diff --git a/.env.example b/.env.example
index fc1aef49d..2b6931761 100644
--- a/.env.example
+++ b/.env.example
@@ -9,11 +9,11 @@ NEXT_PUBLIC_GITHUB_ID=""
 NEXT_PUBLIC_GITHUB_APP_NAME=""
 # Sentry DSN for error monitoring
 NEXT_PUBLIC_SENTRY_DSN=""
-# Enable/Disable OAUTH - default 0 for selfhosted instance 
+# Enable/Disable OAUTH - default 0 for selfhosted instance
 NEXT_PUBLIC_ENABLE_OAUTH=0
 # Enable/Disable sentry
 NEXT_PUBLIC_ENABLE_SENTRY=0
-# Enable/Disable session recording 
+# Enable/Disable session recording
 NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
 # Enable/Disable event tracking
 NEXT_PUBLIC_TRACK_EVENTS=0
@@ -59,15 +59,16 @@ AWS_S3_BUCKET_NAME="uploads"
 FILE_SIZE_LIMIT=5242880
 
 # GPT settings
-OPENAI_API_KEY=""
-GPT_ENGINE=""
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
 
 # Github
 GITHUB_CLIENT_SECRET="" # For fetching release notes
 
 # Settings related to Docker
 DOCKERIZED=1
-# set to 1 If using the pre-configured minio setup 
+# set to 1 If using the pre-configured minio setup
 USE_MINIO=1
 
 # Nginx Configuration
@@ -79,4 +80,4 @@ DEFAULT_PASSWORD="password123"
 
 # SignUps
 ENABLE_SIGNUP="1"
-# Auto generated and Required that will be generated from setup.sh
\ No newline at end of file
+# Auto generated and Required that will be generated from setup.sh
diff --git a/apiserver/Procfile b/apiserver/Procfile
index 30d734913..694c49df4 100644
--- a/apiserver/Procfile
+++ b/apiserver/Procfile
@@ -1,2 +1,3 @@
 web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --config gunicorn.config.py --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
-worker: celery -A plane worker -l info
\ No newline at end of file
+worker: celery -A plane worker -l info
+beat: celery -A plane beat -l INFO
\ No newline at end of file
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 34e711be6..5403a88f0 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -77,6 +77,8 @@ from plane.api.views import (
     BulkCreateIssueLabelsEndpoint,
     IssueAttachmentEndpoint,
     IssueSubscriberViewSet,
+    IssueArchiveViewSet,
+    IssueSubscriberViewSet,
     ## End Issues
     # States
     StateViewSet,
@@ -853,6 +855,36 @@ urlpatterns = [
         name="project-issue-roadmap",
     ),
     ## IssueProperty Ebd
+    ## Issue Archives
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "post": "unarchive",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    ## End Issue Archives
     ## File Assets
     path(
         "workspaces/<str:slug>/file-assets/",
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 327dd6037..9eba0868a 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -65,6 +65,7 @@ from .issue import (
     IssueLinkViewSet,
     BulkCreateIssueLabelsEndpoint,
     IssueAttachmentEndpoint,
+    IssueArchiveViewSet,
     IssueSubscriberViewSet,
 )
 
diff --git a/apiserver/plane/api/views/gpt.py b/apiserver/plane/api/views/gpt.py
index a48bea242..8878e99a5 100644
--- a/apiserver/plane/api/views/gpt.py
+++ b/apiserver/plane/api/views/gpt.py
@@ -67,7 +67,7 @@ class GPTIntegrationEndpoint(BaseAPIView):
 
             openai.api_key = settings.OPENAI_API_KEY
             response = openai.Completion.create(
-                engine=settings.GPT_ENGINE,
+                model=settings.GPT_ENGINE,
                 prompt=final_text,
                 temperature=0.7,
                 max_tokens=1024,
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index d96441c75..415e7e2fa 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -914,6 +914,197 @@ class IssueAttachmentEndpoint(BaseAPIView):
             )
 
 
+class IssueArchiveViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+    serializer_class = IssueFlatSerializer
+    model = Issue
+
+    def get_queryset(self):
+        return (
+            Issue.objects.annotate(
+                sub_issues_count=Issue.objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(archived_at__isnull=False)
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+        )
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id):
+        try:
+            filters = issue_filters(request.query_params, "GET")
+            show_sub_issues = request.GET.get("show_sub_issues", "true")
+
+            # Custom ordering for priority and state
+            priority_order = ["urgent", "high", "medium", "low", None]
+            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+            order_by_param = request.GET.get("order_by", "-created_at")
+
+            issue_queryset = (
+                self.get_queryset()
+                .filter(**filters)
+                .annotate(cycle_id=F("issue_cycle__id"))
+                .annotate(module_id=F("issue_module__id"))
+                .annotate(
+                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .annotate(
+                    attachment_count=IssueAttachment.objects.filter(
+                        issue=OuterRef("id")
+                    )
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+            )
+
+            # Priority Ordering
+            if order_by_param == "priority" or order_by_param == "-priority":
+                priority_order = (
+                    priority_order
+                    if order_by_param == "priority"
+                    else priority_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    priority_order=Case(
+                        *[
+                            When(priority=p, then=Value(i))
+                            for i, p in enumerate(priority_order)
+                        ],
+                        output_field=CharField(),
+                    )
+                ).order_by("priority_order")
+
+            # State Ordering
+            elif order_by_param in [
+                "state__name",
+                "state__group",
+                "-state__name",
+                "-state__group",
+            ]:
+                state_order = (
+                    state_order
+                    if order_by_param in ["state__name", "state__group"]
+                    else state_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    state_order=Case(
+                        *[
+                            When(state__group=state_group, then=Value(i))
+                            for i, state_group in enumerate(state_order)
+                        ],
+                        default=Value(len(state_order)),
+                        output_field=CharField(),
+                    )
+                ).order_by("state_order")
+            # assignee and label ordering
+            elif order_by_param in [
+                "labels__name",
+                "-labels__name",
+                "assignees__first_name",
+                "-assignees__first_name",
+            ]:
+                issue_queryset = issue_queryset.annotate(
+                    max_values=Max(
+                        order_by_param[1::]
+                        if order_by_param.startswith("-")
+                        else order_by_param
+                    )
+                ).order_by(
+                    "-max_values" if order_by_param.startswith("-") else "max_values"
+                )
+            else:
+                issue_queryset = issue_queryset.order_by(order_by_param)
+
+            issue_queryset = (
+                issue_queryset
+                if show_sub_issues == "true"
+                else issue_queryset.filter(parent__isnull=True)
+            )
+
+            issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+            ## Grouping the results
+            group_by = request.GET.get("group_by", False)
+            if group_by:
+                return Response(
+                    group_results(issues, group_by), status=status.HTTP_200_OK
+                )
+
+            return Response(issues, status=status.HTTP_200_OK)
+
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+    def retrieve(self, request, slug, project_id, pk=None):
+        try:
+            issue = Issue.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                archived_at__isnull=False,
+                pk=pk,
+            )
+            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+        except Issue.DoesNotExist:
+            return Response(
+                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+    def unarchive(self, request, slug, project_id, pk=None):
+        try:
+            issue = Issue.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                archived_at__isnull=False,
+                pk=pk,
+            )
+            issue.archived_at = None
+            issue.save()
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=json.dumps({"archived_in": None}),
+                actor_id=str(request.user.id),
+                issue_id=str(issue.id),
+                project_id=str(project_id),
+                current_instance=None,
+            )
+
+            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+        except Issue.DoesNotExist:
+            return Response(
+                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong, please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
 class IssueSubscriberViewSet(BaseViewSet):
     serializer_class = IssueSubscriberSerializer
     model = IssueSubscriber
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 7bb6010dd..ae123cfa7 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -5,6 +5,7 @@ import requests
 # Django imports
 from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
+from django.utils import timezone
 
 # Third Party imports
 from celery import shared_task
@@ -557,6 +558,24 @@ def track_estimate_points(
             )
 
 
+def track_archive_in(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    issue_activities.append(
+        IssueActivity(
+            issue_id=issue_id,
+            project=project,
+            workspace=project.workspace,
+            comment=f"{actor.email} has restored the issue",
+            verb="updated",
+            actor=actor,
+            field="archived_at",
+            old_value="archive",
+            new_value="restore",
+        )
+    )
+
+
 def update_issue_activity(
     requested_data, current_instance, issue_id, project, actor, issue_activities
 ):
@@ -573,6 +592,7 @@ def update_issue_activity(
         "blocks_list": track_blocks,
         "blockers_list": track_blockings,
         "estimate_point": track_estimate_points,
+        "archived_in": track_archive_in,
     }
 
     requested_data = json.loads(requested_data) if requested_data is not None else None
@@ -950,6 +970,7 @@ def delete_attachment_activity(
     )
 
 
+
 # Receive message from room group
 @shared_task
 def issue_activity(
@@ -961,6 +982,11 @@ def issue_activity(
         actor = User.objects.get(pk=actor_id)
         project = Project.objects.get(pk=project_id)
 
+        issue = Issue.objects.filter(pk=issue_id).first()
+        if issue is not None:
+            issue.updated_at = timezone.now()
+            issue.save()
+            
         # add the user to issue subscriber
         try:
             _ = IssueSubscriber.objects.create(issue_id=issue_id, subscriber=actor)
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
new file mode 100644
index 000000000..0b64e546f
--- /dev/null
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -0,0 +1,148 @@
+# Python improts
+from datetime import timedelta
+
+# Django imports
+from django.utils import timezone
+from django.db.models import Q
+from django.conf import settings
+
+# Third party imports
+from celery import shared_task
+from sentry_sdk import capture_exception
+
+# Module imports
+from plane.db.models import Issue, Project, IssueActivity, State
+
+
+@shared_task
+def archive_and_close_old_issues():
+    archive_old_issues()
+    close_old_issues()
+
+def archive_old_issues():
+    try:
+        # Get all the projects whose archive_in is greater than 0
+        projects = Project.objects.filter(archive_in__gt=0)
+
+        for project in projects:
+            project_id = project.id
+            archive_in = project.archive_in
+
+            # Get all the issues whose updated_at in less that the archive_in month
+            issues = Issue.objects.filter(
+                Q(
+                    project=project_id,
+                    archived_at__isnull=True,
+                    updated_at__lte=(timezone.now() - timedelta(days=archive_in * 30)),
+                    state__group__in=["completed", "cancelled"],
+                ),
+                Q(issue_cycle__isnull=True)
+                | (
+                    Q(issue_cycle__cycle__end_date__lt=timezone.now().date())
+                    & Q(issue_cycle__isnull=False)
+                ),
+                Q(issue_module__isnull=True)
+                | (
+                    Q(issue_module__module__target_date__lt=timezone.now().date())
+                    & Q(issue_module__isnull=False)
+                ),
+            )
+
+            # Check if Issues
+            if issues:
+                issues_to_update = []
+                for issue in issues:
+                    issue.archived_at = timezone.now()
+                    issues_to_update.append(issue)
+
+                # Bulk Update the issues and log the activity
+                Issue.objects.bulk_update(issues_to_update, ["archived_at"], batch_size=100)
+                IssueActivity.objects.bulk_create(
+                    [
+                        IssueActivity(
+                            issue_id=issue.id,
+                            actor=project.created_by,
+                            verb="updated",
+                            field="archived_at",
+                            project=project,
+                            workspace=project.workspace,
+                            comment="Plane archived the issue",
+                            new_value="archive",
+                            old_value=""
+                        )
+                        for issue in issues_to_update
+                    ],
+                    batch_size=100,
+                )
+        return
+    except Exception as e:
+        if settings.DEBUG:
+            print(e)
+        capture_exception(e)
+        return
+
+def close_old_issues():
+    try:
+        # Get all the projects whose close_in is greater than 0
+        projects = Project.objects.filter(close_in__gt=0).select_related("default_state")
+
+        for project in projects:
+            project_id = project.id
+            close_in = project.close_in
+
+            # Get all the issues whose updated_at in less that the close_in month
+            issues = Issue.objects.filter(
+                Q(
+                    project=project_id,
+                    archived_at__isnull=True,
+                    updated_at__lte=(timezone.now() - timedelta(days=close_in * 30)),
+                    state__group__in=["backlog", "unstarted", "started"],
+                ),
+                Q(issue_cycle__isnull=True)
+                | (
+                    Q(issue_cycle__cycle__end_date__lt=timezone.now().date())
+                    & Q(issue_cycle__isnull=False)
+                ),
+                Q(issue_module__isnull=True)
+                | (
+                    Q(issue_module__module__target_date__lt=timezone.now().date())
+                    & Q(issue_module__isnull=False)
+                ),
+            )
+
+            # Check if Issues
+            if issues:
+                if project.default_state is None:
+                    close_state = project.default_state
+                else:
+                    close_state = State.objects.filter(group="cancelled").first()
+
+
+                issues_to_update = []
+                for issue in issues:
+                    issue.state = close_state
+                    issues_to_update.append(issue)
+
+                # Bulk Update the issues and log the activity
+                Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
+                IssueActivity.objects.bulk_create(
+                    [
+                        IssueActivity(
+                            issue_id=issue.id,
+                            actor=project.created_by,
+                            verb="updated",
+                            field="state",
+                            project=project,
+                            workspace=project.workspace,
+                            comment="Plane cancelled the issue",
+                        )
+                        for issue in issues_to_update
+                    ],
+                    batch_size=100,
+                )
+        return
+    except Exception as e:
+        if settings.DEBUG:
+            print(e)
+        capture_exception(e)
+        return
\ No newline at end of file
diff --git a/apiserver/plane/celery.py b/apiserver/plane/celery.py
index 1fbbdd732..ed0dc419e 100644
--- a/apiserver/plane/celery.py
+++ b/apiserver/plane/celery.py
@@ -1,6 +1,7 @@
 import os
 from celery import Celery
 from plane.settings.redis import redis_instance
+from celery.schedules import crontab
 
 # Set the default Django settings module for the 'celery' program.
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "plane.settings.production")
@@ -13,5 +14,15 @@ app = Celery("plane")
 # pickle the object when using Windows.
 app.config_from_object("django.conf:settings", namespace="CELERY")
 
+app.conf.beat_schedule = {
+    # Executes every day at 12 AM
+    "check-every-day-to-archive-and-close": {
+        "task": "plane.bgtasks.issue_automation_task.archive_and_close_old_issues",
+        "schedule": crontab(hour=0, minute=0),
+    },
+}
+
 # Load task modules from all registered Django app configs.
 app.autodiscover_tasks()
+
+app.conf.beat_scheduler = 'django_celery_beat.schedulers.DatabaseScheduler'
\ No newline at end of file
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 4b765a516..f301d4191 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -28,6 +28,8 @@ class IssueManager(models.Manager):
                 | models.Q(issue_inbox__status=2)
                 | models.Q(issue_inbox__isnull=True)
             )
+            .filter(archived_at__isnull=True)
+            .exclude(archived_at__isnull=False)
         )
 
 
@@ -81,6 +83,7 @@ class Issue(ProjectBaseModel):
     )
     sort_order = models.FloatField(default=65535)
     completed_at = models.DateTimeField(null=True)
+    archived_at = models.DateField(null=True)
 
     objects = models.Manager()
     issue_objects = IssueManager()
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 0b6c4b50d..b28cbc69e 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -4,6 +4,7 @@ from django.conf import settings
 from django.template.defaultfilters import slugify
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.core.validators import MinValueValidator, MaxValueValidator
 
 # Modeule imports
 from plane.db.mixins import AuditModel
@@ -74,6 +75,15 @@ class Project(BaseModel):
     estimate = models.ForeignKey(
         "db.Estimate", on_delete=models.SET_NULL, related_name="projects", null=True
     )
+    archive_in = models.IntegerField(
+        default=0, validators=[MinValueValidator(0), MaxValueValidator(12)]
+    )
+    close_in = models.IntegerField(
+        default=0, validators=[MinValueValidator(0), MaxValueValidator(12)]
+    )
+    default_state = models.ForeignKey(
+        "db.State", on_delete=models.SET_NULL, null=True, related_name="default_state"
+    )
 
     def __str__(self):
         """Return name of the project"""
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index 2e0266159..e3a918c18 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -35,6 +35,7 @@ INSTALLED_APPS = [
     "rest_framework_simplejwt.token_blacklist",
     "corsheaders",
     "taggit",
+    "django_celery_beat",
 ]
 
 MIDDLEWARE = [
@@ -213,3 +214,4 @@ SIMPLE_JWT = {
 CELERY_TIMEZONE = TIME_ZONE
 CELERY_TASK_SERIALIZER = 'json'
 CELERY_ACCEPT_CONTENT = ['application/json']
+CELERY_IMPORTS = ("plane.bgtasks.issue_automation_task",)
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index 2e40c5998..98e22bcbd 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -246,8 +246,9 @@ PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)
 ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
 ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
 
+OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
-GPT_ENGINE = os.environ.get("GPT_ENGINE", "text-davinci-003")
+GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
 
 SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)
 
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index 076bb3e3c..daf8f974b 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -11,10 +11,9 @@ from sentry_sdk.integrations.django import DjangoIntegration
 from sentry_sdk.integrations.redis import RedisIntegration
 
 from .common import *  # noqa
+
 # Database
-DEBUG = int(os.environ.get(
-    "DEBUG", 1
-))  == 1
+DEBUG = int(os.environ.get("DEBUG", 1)) == 1
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.postgresql_psycopg2",
@@ -56,9 +55,7 @@ STORAGES = {
 
 
 # Make true if running in a docker environment
-DOCKERIZED = int(os.environ.get(
-    "DOCKERIZED", 0
-))  == 1
+DOCKERIZED = int(os.environ.get("DOCKERIZED", 0)) == 1
 FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
 USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
 
@@ -201,15 +198,19 @@ PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)
 ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
 ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
 
+
+OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
-GPT_ENGINE = os.environ.get("GPT_ENGINE", "text-davinci-003")
+GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
 
 SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)
 
 LOGGER_BASE_URL = os.environ.get("LOGGER_BASE_URL", False)
 
 redis_url = os.environ.get("REDIS_URL")
-broker_url = f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
+broker_url = (
+    f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
+)
 
 CELERY_RESULT_BACKEND = broker_url
 CELERY_BROKER_URL = broker_url
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 537564828..c4fa8ef2c 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -28,4 +28,5 @@ uvicorn==0.22.0
 channels==4.0.0
 openai==0.27.8
 slack-sdk==3.21.3
-celery==5.3.1
\ No newline at end of file
+celery==5.3.1
+django_celery_beat==2.5.0
diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index e1b7aea98..ba8c759af 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -164,8 +164,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               type="button"
               className={`mt-5 flex w-full justify-end text-xs outline-none ${
                 isResendDisabled
-                  ? "cursor-default text-brand-secondary"
-                  : "cursor-pointer text-brand-accent"
+                  ? "cursor-default text-custom-text-200"
+                  : "cursor-pointer text-custom-primary"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index 8a0dc3a33..97da2b9e4 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -80,7 +80,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
             <div className="ml-auto text-sm">
               {isSignUpPage ? (
                 <Link href="/">
-                  <a className="font-medium text-brand-accent hover:text-brand-accent">
+                  <a className="font-medium text-custom-primary hover:text-custom-primary">
                     Already have an account? Sign in.
                   </a>
                 </Link>
@@ -88,7 +88,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                 <button
                   type="button"
                   onClick={() => setIsResettingPassword(true)}
-                  className="font-medium text-brand-accent hover:text-brand-accent"
+                  className="font-medium text-custom-primary hover:text-custom-primary"
                 >
                   Forgot your password?
                 </button>
@@ -112,7 +112,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
             </SecondaryButton>
             {!isSignUpPage && (
               <Link href="/sign-up">
-                <a className="block font-medium text-brand-accent hover:text-brand-accent text-sm mt-1">
+                <a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1">
                   Don{"'"}t have an account? Sign up.
                 </a>
               </Link>
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index d997b3a3d..889d46405 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -39,7 +39,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
+        <button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-100 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
           <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index afaaf1b98..22e728089 100644
--- a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -97,7 +97,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -111,10 +111,13 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
               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 rounded-lg border border-brand-base bg-brand-base px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Save Analytics
                     </Dialog.Title>
                     <div className="mt-5">
diff --git a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
index f46b7f2b2..d04733b56 100644
--- a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
@@ -61,7 +61,7 @@ export const CustomAnalytics: React.FC<Props> = ({
         <AnalyticsSelectBar
           control={control}
           setValue={setValue}
-          projects={projects}
+          projects={projects ?? []}
           params={params}
           fullScreen={fullScreen}
           isProjectLevel={isProjectLevel}
@@ -86,7 +86,7 @@ export const CustomAnalytics: React.FC<Props> = ({
               </div>
             ) : (
               <div className="grid h-full place-items-center p-5">
-                <div className="space-y-4 text-brand-secondary">
+                <div className="space-y-4 text-custom-text-200">
                   <p className="text-sm">No matching issues found. Try changing the parameters.</p>
                 </div>
               </div>
@@ -104,7 +104,7 @@ export const CustomAnalytics: React.FC<Props> = ({
           )
         ) : (
           <div className="grid h-full place-items-center p-5">
-            <div className="space-y-4 text-brand-secondary">
+            <div className="space-y-4 text-custom-text-200">
               <p className="text-sm">There was some error in fetching the data.</p>
               <div className="flex items-center justify-center gap-2">
                 <PrimaryButton
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 7fd0c1396..8f4a413b5 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -31,7 +31,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{
@@ -39,7 +39,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
         }}
       />
       <span
-        className={`font-medium text-brand-secondary ${
+        className={`font-medium text-custom-text-200 ${
           params.segment
             ? params.segment === "priority" || params.segment === "state__group"
               ? "capitalize"
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index cce93204c..3f70dddc5 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -111,7 +111,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
             : undefined,
       }}
       theme={{
-        background: "rgb(var(--color-bg-base))",
         axis: {},
       }}
     />
diff --git a/apps/app/components/analytics/custom-analytics/select-bar.tsx b/apps/app/components/analytics/custom-analytics/select-bar.tsx
index 7286a9cf8..8c2b822e5 100644
--- a/apps/app/components/analytics/custom-analytics/select-bar.tsx
+++ b/apps/app/components/analytics/custom-analytics/select-bar.tsx
@@ -29,7 +29,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
   >
     {!isProjectLevel && (
       <div>
-        <h6 className="text-xs text-brand-secondary">Project</h6>
+        <h6 className="text-xs text-custom-text-200">Project</h6>
         <Controller
           name="project"
           control={control}
@@ -40,7 +40,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       </div>
     )}
     <div>
-      <h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
+      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
       <Controller
         name="y_axis"
         control={control}
@@ -50,7 +50,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       />
     </div>
     <div>
-      <h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
+      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
       <Controller
         name="x_axis"
         control={control}
@@ -67,7 +67,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       />
     </div>
     <div>
-      <h6 className="text-xs text-brand-secondary">Group</h6>
+      <h6 className="text-xs text-custom-text-200">Group</h6>
       <Controller
         name="segment"
         control={control}
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 418d87c4a..8a736af0a 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -24,13 +24,13 @@ import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 import { renderEmoji } from "helpers/emoji.helper";
+import { truncateText } from "helpers/string.helper";
 // types
 import {
   IAnalyticsParams,
   IAnalyticsResponse,
   ICurrentUserResponse,
   IExportAnalyticsFormData,
-  IProject,
   IWorkspace,
 } from "types";
 // fetch-keys
@@ -179,23 +179,23 @@ export const AnalyticsSidebar: React.FC<Props> = ({
   };
 
   const selectedProjects =
-    params.project && params.project.length > 0 ? params.project : projects.map((p) => p.id);
+    params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
 
   return (
     <div
       className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
         fullScreen
-          ? "border-l border-brand-base md:h-full md:border-l md:border-brand-base md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+          ? "border-l border-custom-border-100 md:h-full md:border-l md:border-custom-border-100 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
       <div className="flex items-center gap-2 flex-wrap">
-        <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+        <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
           <LayerDiagonalIcon height={14} width={14} />
           {analytics ? analytics.total : "..."} Issues
         </div>
         {isProjectLevel && (
-          <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+          <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
             <CalendarDaysIcon className="h-3.5 w-3.5" />
             {renderShortDate(
               (cycleId
@@ -207,7 +207,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
           </div>
         )}
       </div>
-      <div className="h-full overflow-hidden">
+      <div className="h-full w-full overflow-hidden">
         {fullScreen ? (
           <>
             {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
@@ -215,61 +215,62 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                 <h4 className="font-medium">Selected Projects</h4>
                 <div className="space-y-6 mt-4 h-full overflow-y-auto">
                   {selectedProjects.map((projectId) => {
-                    const project: IProject = projects.find((p) => p.id === projectId);
+                    const project = projects?.find((p) => p.id === projectId);
 
-                    return (
-                      <div key={project.id}>
-                        <div className="text-sm flex items-center gap-1">
-                          {project.emoji ? (
-                            <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                              {renderEmoji(project.emoji)}
-                            </span>
-                          ) : project.icon_prop ? (
-                            <div className="h-6 w-6 grid place-items-center flex-shrink-0">
-                              <span
-                                style={{ color: project.icon_prop.color }}
-                                className="material-symbols-rounded text-lg"
-                              >
-                                {project.icon_prop.name}
+                    if (project)
+                      return (
+                        <div key={project.id} className="w-full">
+                          <div className="text-sm flex items-center gap-1">
+                            {project.emoji ? (
+                              <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
+                                {renderEmoji(project.emoji)}
                               </span>
-                            </div>
-                          ) : (
-                            <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                              {project?.name.charAt(0)}
-                            </span>
-                          )}
-                          <h5 className="break-words">
-                            {project.name}
-                            <span className="text-brand-secondary text-xs ml-1">
-                              ({project.identifier})
-                            </span>
-                          </h5>
-                        </div>
-                        <div className="mt-4 space-y-3 pl-2">
-                          <div className="flex items-center justify-between gap-2 text-xs">
-                            <div className="flex items-center gap-2">
-                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-                              <h6>Total members</h6>
-                            </div>
-                            <span className="text-brand-secondary">{project.total_members}</span>
+                            ) : project.icon_prop ? (
+                              <div className="h-6 w-6 grid place-items-center flex-shrink-0">
+                                <span
+                                  style={{ color: project.icon_prop.color }}
+                                  className="material-symbols-rounded text-lg"
+                                >
+                                  {project.icon_prop.name}
+                                </span>
+                              </div>
+                            ) : (
+                              <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                                {project?.name.charAt(0)}
+                              </span>
+                            )}
+                            <h5 className="flex items-center gap-1">
+                              <p className="break-words">{truncateText(project.name, 20)}</p>
+                              <span className="text-custom-text-200 text-xs ml-1">
+                                ({project.identifier})
+                              </span>
+                            </h5>
                           </div>
-                          <div className="flex items-center justify-between gap-2 text-xs">
-                            <div className="flex items-center gap-2">
-                              <ContrastIcon height={16} width={16} />
-                              <h6>Total cycles</h6>
+                          <div className="mt-4 space-y-3 pl-2 w-full">
+                            <div className="flex items-center justify-between gap-2 text-xs">
+                              <div className="flex items-center gap-2">
+                                <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+                                <h6>Total members</h6>
+                              </div>
+                              <span className="text-custom-text-200">{project.total_members}</span>
                             </div>
-                            <span className="text-brand-secondary">{project.total_cycles}</span>
-                          </div>
-                          <div className="flex items-center justify-between gap-2 text-xs">
-                            <div className="flex items-center gap-2">
-                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-                              <h6>Total modules</h6>
+                            <div className="flex items-center justify-between gap-2 text-xs">
+                              <div className="flex items-center gap-2">
+                                <ContrastIcon height={16} width={16} />
+                                <h6>Total cycles</h6>
+                              </div>
+                              <span className="text-custom-text-200">{project.total_cycles}</span>
+                            </div>
+                            <div className="flex items-center justify-between gap-2 text-xs">
+                              <div className="flex items-center gap-2">
+                                <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+                                <h6>Total modules</h6>
+                              </div>
+                              <span className="text-custom-text-200">{project.total_modules}</span>
                             </div>
-                            <span className="text-brand-secondary">{project.total_modules}</span>
                           </div>
                         </div>
-                      </div>
-                    );
+                      );
                   })}
                 </div>
               </div>
@@ -280,13 +281,13 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Lead</h6>
+                      <h6 className="text-custom-text-200">Lead</h6>
                       <span>
                         {cycleDetails.owned_by?.first_name} {cycleDetails.owned_by?.last_name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <h6 className="text-custom-text-200">Start Date</h6>
                       <span>
                         {cycleDetails.start_date && cycleDetails.start_date !== ""
                           ? renderShortDate(cycleDetails.start_date)
@@ -294,7 +295,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <h6 className="text-custom-text-200">Target Date</h6>
                       <span>
                         {cycleDetails.end_date && cycleDetails.end_date !== ""
                           ? renderShortDate(cycleDetails.end_date)
@@ -308,14 +309,14 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Lead</h6>
+                      <h6 className="text-custom-text-200">Lead</h6>
                       <span>
                         {moduleDetails.lead_detail?.first_name}{" "}
                         {moduleDetails.lead_detail?.last_name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <h6 className="text-custom-text-200">Start Date</h6>
                       <span>
                         {moduleDetails.start_date && moduleDetails.start_date !== ""
                           ? renderShortDate(moduleDetails.start_date)
@@ -323,7 +324,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <h6 className="text-custom-text-200">Target Date</h6>
                       <span>
                         {moduleDetails.target_date && moduleDetails.target_date !== ""
                           ? renderShortDate(moduleDetails.target_date)
@@ -357,7 +358,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   </div>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Network</h6>
+                      <h6 className="text-custom-text-200">Network</h6>
                       <span>
                         {
                           NETWORK_CHOICES[
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index df3953b35..54a73186e 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
-            <thead className="bg-brand-surface-2">
-              <tr className="divide-x divide-brand-base text-sm text-brand-base">
+          <table className="min-w-full divide-y divide-custom-border-100 whitespace-nowrap border-y border-custom-border-100">
+            <thead className="bg-custom-background-80">
+              <tr className="divide-x divide-custom-border-100 text-sm text-custom-text-100">
                 <th scope="col" className="py-3 px-2.5 text-left font-medium">
                   {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
                 </th>
@@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                 )}
               </tr>
             </thead>
-            <tbody className="divide-y divide-brand-base">
+            <tbody className="divide-y divide-custom-border-100">
               {barGraphData.data.map((item, index) => (
                 <tr
                   key={`table-row-${index}`}
-                  className="divide-x divide-brand-base text-xs text-brand-secondary"
+                  className="divide-x divide-custom-border-100 text-xs text-custom-text-200"
                 >
                   <td
                     className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index 5fdb6682d..454b2abaf 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -150,16 +150,16 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
 
   return (
     <div
-      className={`absolute top-0 z-30 h-full bg-brand-surface-1 ${
+      className={`absolute top-0 z-30 h-full bg-custom-background-90 ${
         fullScreen ? "p-2 w-full" : "w-1/2"
       } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-base text-left ${
+        className={`flex h-full flex-col overflow-hidden border-custom-border-100 bg-custom-background-100 text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
-        <div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm">
+        <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
           <h3 className="break-words">
             Analytics for{" "}
             {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
@@ -167,7 +167,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           <div className="flex items-center gap-2">
             <button
               type="button"
-              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
               onClick={() => setFullScreen((prevData) => !prevData)}
             >
               {fullScreen ? (
@@ -178,7 +178,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
             </button>
             <button
               type="button"
-              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
               onClick={handleClose}
             >
               <XMarkIcon className="h-4 w-4" />
@@ -186,13 +186,13 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-brand-base p-5 pt-0">
+          <Tab.List as="div" className="space-x-2 border-b border-custom-border-100 p-5 pt-0">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
-                    selected ? "bg-brand-surface-2" : ""
+                  `rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                    selected ? "bg-custom-background-80" : ""
                   }`
                 }
                 onClick={() => trackAnalyticsEvent(tab)}
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index 4a454b564..bb0627025 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -10,10 +10,10 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-brand-base p-3">
+  <div className="space-y-3 rounded-[10px] border border-custom-border-100 p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
-      <h4 className="text-brand-bas text-base font-medium">Total open tasks</h4>
+      <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
     <div className="space-y-6">
@@ -31,13 +31,13 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
                   }}
                 />
                 <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-brand-surface-2 px-2 py-0.5 text-[0.65rem] text-brand-secondary">
+                <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
                   {group.state_count}
                 </span>
               </div>
-              <p className="text-brand-secondary">{percentage}%</p>
+              <p className="text-custom-text-200">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
+            <div className="bar relative h-1 w-full rounded bg-custom-background-80">
               <div
                 className="absolute top-0 left-0 h-1 rounded duration-300"
                 style={{
@@ -50,8 +50,8 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-      <p className="flex items-center gap-1 text-brand-secondary">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+      <p className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
         <span>Estimate Demand:</span>
       </p>
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index 72b892eeb..daad1a9d9 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
-  <div className="p-3 border border-brand-base rounded-[10px]">
+  <div className="p-3 border border-custom-border-100 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">
@@ -33,7 +33,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
                   {user.firstName !== "" ? user.firstName[0] : "?"}
                 </div>
               )}
-              <span className="break-words text-brand-secondary">
+              <span className="break-words text-custom-text-200">
                 {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
               </span>
             </div>
@@ -42,7 +42,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
         ))}
       </div>
     ) : (
-      <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+      <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
     )}
   </div>
 );
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index d5bf10bc2..cfc315ac1 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -88,7 +88,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-brand-secondary">
+          <div className="space-y-4 text-custom-text-200">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index b0a422ed4..1247fa824 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -8,9 +8,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-brand-base">
+  <div className="rounded-[10px] border border-custom-border-100">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-brand-base">
+    <div className="divide-y divide-custom-border-100">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -27,8 +27,8 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-                  <span className="font-medium text-brand-secondary">
+                <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+                  <span className="font-medium text-custom-text-200">
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name
                       : "No assignee"}
@@ -69,12 +69,11 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             }}
             margin={{ top: 20 }}
             theme={{
-              background: "rgb(var(--color-bg-base))",
               axis: {},
             }}
           />
         ) : (
-          <div className="text-brand-secondary text-center text-sm py-8">
+          <div className="text-custom-text-200 text-center text-sm py-8">
             No matching data found.
           </div>
         )}
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
index a37518cba..c1e0e95fa 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -15,14 +15,14 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
   const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
 
   return (
-    <div className="py-3 border border-brand-base rounded-[10px]">
+    <div className="py-3 border border-custom-border-100 rounded-[10px]">
       <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
       {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
         <LineGraph
           data={[
             {
               id: "issues_closed",
-              color: "rgb(var(--color-accent))",
+              color: "rgb(var(--color-primary-100))",
               data: MONTHS_LIST.map((month) => ({
                 x: month.label.substring(0, 3),
                 y:
@@ -43,19 +43,19 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           margin={{ top: 20 }}
           enableSlices="x"
           sliceTooltip={(datum) => (
-            <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+            <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
               {datum.slice.points[0].data.yFormatted}
-              <span className="text-brand-secondary"> issues closed in </span>
+              <span className="text-custom-text-200"> issues closed in </span>
               {datum.slice.points[0].data.xFormatted}
             </div>
           )}
           theme={{
-            background: "rgb(var(--color-bg-base))",
+            background: "rgb(var(--color-background-100))",
           }}
           enableArea
         />
       ) : (
-        <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+        <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
       )}
     </div>
   );
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
index 0cc88aa3b..5d625bd02 100644
--- a/apps/app/components/analytics/select/project.tsx
+++ b/apps/app/components/analytics/select/project.tsx
@@ -15,7 +15,7 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
     query: project.name + project.identifier,
     content: (
       <div className="flex items-center gap-2">
-        <span className="text-brand-secondary text-[0.65rem]">{project.identifier}</span>
+        <span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
         {project.name}
       </div>
     ),
diff --git a/apps/app/components/analytics/select/segment.tsx b/apps/app/components/analytics/select/segment.tsx
index ef6a2fe51..e125d8401 100644
--- a/apps/app/components/analytics/select/segment.tsx
+++ b/apps/app/components/analytics/select/segment.tsx
@@ -23,7 +23,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       label={
         <span>
           {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-            <span className="text-brand-secondary">No value</span>
+            <span className="text-custom-text-200">No value</span>
           )}
         </span>
       }
diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx
index d76e56b61..f0917a640 100644
--- a/apps/app/components/auth-screens/not-authorized-view.tsx
+++ b/apps/app/components/auth-screens/not-authorized-view.tsx
@@ -22,7 +22,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
 
   return (
     <DefaultLayout>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
         <div className="h-44 w-72">
           <Image
             src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}
@@ -31,16 +31,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-brand-base">
+        <h1 className="text-xl font-medium text-custom-text-100">
           Oops! You are not authorized to view this page
         </h1>
 
-        <div className="w-full max-w-md text-base text-brand-secondary">
+        <div className="w-full max-w-md text-base text-custom-text-200">
           {user ? (
             <p>
               You have signed in as {user.email}. <br />
               <Link href={`/?next=${currentPath}`}>
-                <a className="font-medium text-brand-base">Sign in</a>
+                <a className="font-medium text-custom-text-100">Sign in</a>
               </Link>{" "}
               with different account that has access to this page.
             </p>
@@ -48,7 +48,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             <p>
               You need to{" "}
               <Link href={`/?next=${currentPath}`}>
-                <a className="font-medium text-brand-base">Sign in</a>
+                <a className="font-medium text-custom-text-100">Sign in</a>
               </Link>{" "}
               with an account that has access to this page.
             </p>
diff --git a/apps/app/components/auth-screens/project/join-project.tsx b/apps/app/components/auth-screens/project/join-project.tsx
index 06ae1c240..854773632 100644
--- a/apps/app/components/auth-screens/project/join-project.tsx
+++ b/apps/app/components/auth-screens/project/join-project.tsx
@@ -41,13 +41,15 @@ export const JoinProject: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-brand-base">You are not a member of this project</h1>
+      <h1 className="text-xl font-medium text-custom-text-100">
+        You are not a member of this project
+      </h1>
 
-      <div className="w-full max-w-md text-base text-brand-secondary">
+      <div className="w-full max-w-md text-base text-custom-text-200">
         <p className="mx-auto w-full text-sm md:w-3/4">
           You are not a member of this project, but you can join this project by clicking the button
           below.
diff --git a/apps/app/components/auth-screens/workspace/not-a-member.tsx b/apps/app/components/auth-screens/workspace/not-a-member.tsx
index 12bb3d850..ee63b5883 100644
--- a/apps/app/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/app/components/auth-screens/workspace/not-a-member.tsx
@@ -11,7 +11,7 @@ export const NotAWorkspaceMember = () => (
       <div className="space-y-8 text-center">
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Not Authorized!</h3>
-          <p className="mx-auto w-1/2 text-sm text-brand-secondary">
+          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
             You{"'"}re not a member of this workspace. Please contact the workspace admin to get an
             invitation or check your pending invitations.
           </p>
diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
index 6e2c85785..893d6fde1 100644
--- a/apps/app/components/breadcrumbs/index.tsx
+++ b/apps/app/components/breadcrumbs/index.tsx
@@ -17,12 +17,12 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
       <div className="flex items-center">
         <button
           type="button"
-          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
+          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-100 text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
           <Icon
             iconName="keyboard_backspace"
-            className="text-base leading-4 text-brand-secondary group-hover:text-brand-base"
+            className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
           />
         </button>
         {children}
@@ -41,7 +41,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
   <>
     {link ? (
       <Link href={link}>
-        <a className="border-r-2 border-brand-base px-3 text-sm">
+        <a className="border-r-2 border-custom-sidebar-border-100 px-3 text-sm">
           <p className={`${icon ? "flex items-center gap-2" : ""}`}>
             {icon ?? null}
             {title}
diff --git a/apps/app/components/command-palette/change-interface-theme.tsx b/apps/app/components/command-palette/change-interface-theme.tsx
index f4bcd7483..b2b43c670 100644
--- a/apps/app/components/command-palette/change-interface-theme.tsx
+++ b/apps/app/components/command-palette/change-interface-theme.tsx
@@ -34,8 +34,8 @@ export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-brand-secondary">
-            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
             {theme.label}
           </div>
         </Command.Item>
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 32634f18c..244265ff5 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -408,7 +408,7 @@ export const CommandPalette: React.FC = () => {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -421,7 +421,7 @@ export const CommandPalette: React.FC = () => {
               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 mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-custom-border-100 divide-opacity-10 rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -444,7 +444,7 @@ export const CommandPalette: React.FC = () => {
                 >
                   {issueId && issueDetails && (
                     <div className="flex p-3">
-                      <p className="overflow-hidden truncate rounded-md bg-brand-surface-1 p-1 px-2 text-xs font-medium text-brand-secondary">
+                      <p className="overflow-hidden truncate rounded-md bg-custom-background-90 p-1 px-2 text-xs font-medium text-custom-text-200">
                         {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
                         {issueDetails?.name}
                       </p>
@@ -452,11 +452,11 @@ export const CommandPalette: React.FC = () => {
                   )}
                   <div className="relative">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-secondary"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
                       aria-hidden="true"
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-brand-base bg-transparent p-4 pl-11 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="w-full border-0 border-b border-custom-border-100 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => {
@@ -470,7 +470,7 @@ export const CommandPalette: React.FC = () => {
                       resultsCount === 0 &&
                       searchTerm !== "" &&
                       debouncedSearchTerm !== "" && (
-                        <div className="my-4 text-center text-brand-secondary">
+                        <div className="my-4 text-center text-custom-text-200">
                           No results found.
                         </div>
                       )}
@@ -533,9 +533,9 @@ export const CommandPalette: React.FC = () => {
                                       value={value}
                                       className="focus:outline-none"
                                     >
-                                      <div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
+                                      <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
                                         <Icon
-                                          className="h-4 w-4 text-brand-secondary"
+                                          className="h-4 w-4 text-custom-text-200"
                                           color="#6b7280"
                                         />
                                         <p className="block flex-1 truncate">{item.name}</p>
@@ -562,8 +562,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
                                 Change state...
                               </div>
                             </Command.Item>
@@ -575,8 +575,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <ChartBarIcon className="h-4 w-4 text-custom-text-200" />
                                 Change priority...
                               </div>
                             </Command.Item>
@@ -588,8 +588,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <UsersIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <UsersIcon className="h-4 w-4 text-custom-text-200" />
                                 Assign to...
                               </div>
                             </Command.Item>
@@ -600,15 +600,15 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
+                              <div className="flex items-center gap-2 text-custom-text-200">
                                 {issueDetails?.assignees.includes(user.id) ? (
                                   <>
-                                    <UserMinusIcon className="h-4 w-4 text-brand-secondary" />
+                                    <UserMinusIcon className="h-4 w-4 text-custom-text-200" />
                                     Un-assign from me
                                   </>
                                 ) : (
                                   <>
-                                    <UserPlusIcon className="h-4 w-4 text-brand-secondary" />
+                                    <UserPlusIcon className="h-4 w-4 text-custom-text-200" />
                                     Assign to me
                                   </>
                                 )}
@@ -616,8 +616,8 @@ export const CommandPalette: React.FC = () => {
                             </Command.Item>
 
                             <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <TrashIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <TrashIcon className="h-4 w-4 text-custom-text-200" />
                                 Delete issue
                               </div>
                             </Command.Item>
@@ -628,8 +628,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <LinkIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <LinkIcon className="h-4 w-4 text-custom-text-200" />
                                 Copy issue URL to clipboard
                               </div>
                             </Command.Item>
@@ -638,9 +638,9 @@ export const CommandPalette: React.FC = () => {
                         <Command.Group heading="Issue">
                           <Command.Item
                             onSelect={createNewIssue}
-                            className="focus:bg-brand-surface-2"
+                            className="focus:bg-custom-background-80"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
                               Create new issue
                             </div>
@@ -654,7 +654,7 @@ export const CommandPalette: React.FC = () => {
                               onSelect={createNewProject}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
+                              <div className="flex items-center gap-2 text-custom-text-200">
                                 <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
                                 Create new project
                               </div>
@@ -670,7 +670,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewCycle}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <ContrastIcon className="h-4 w-4" color="#6b7280" />
                                   Create new cycle
                                 </div>
@@ -683,7 +683,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewModule}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
                                   Create new module
                                 </div>
@@ -693,7 +693,7 @@ export const CommandPalette: React.FC = () => {
 
                             <Command.Group heading="View">
                               <Command.Item onSelect={createNewView} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <ViewListIcon className="h-4 w-4" color="#6b7280" />
                                   Create new view
                                 </div>
@@ -703,7 +703,7 @@ export const CommandPalette: React.FC = () => {
 
                             <Command.Group heading="Page">
                               <Command.Item onSelect={createNewPage} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <DocumentTextIcon className="h-4 w-4" color="#6b7280" />
                                   Create new page
                                 </div>
@@ -721,7 +721,7 @@ export const CommandPalette: React.FC = () => {
                                   }
                                   className="focus:outline-none"
                                 >
-                                  <div className="flex items-center gap-2 text-brand-secondary">
+                                  <div className="flex items-center gap-2 text-custom-text-200">
                                     <InboxIcon className="h-4 w-4" color="#6b7280" />
                                     Open inbox
                                   </div>
@@ -740,7 +740,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <SettingIcon className="h-4 w-4" color="#6b7280" />
                               Search settings...
                             </div>
@@ -751,8 +751,8 @@ export const CommandPalette: React.FC = () => {
                             onSelect={createNewWorkspace}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FolderPlusIcon className="h-4 w-4 text-custom-text-200" />
                               Create new workspace
                             </div>
                           </Command.Item>
@@ -764,8 +764,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <SettingIcon className="h-4 w-4 text-custom-text-200" />
                               Change interface theme...
                             </div>
                           </Command.Item>
@@ -781,8 +781,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
                               Open keyboard shortcuts
                             </div>
                           </Command.Item>
@@ -793,8 +793,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <DocumentIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <DocumentIcon className="h-4 w-4 text-custom-text-200" />
                               Open Plane documentation
                             </div>
                           </Command.Item>
@@ -805,7 +805,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <DiscordIcon className="h-4 w-4" color="#6b7280" />
                               Join our Discord
                             </div>
@@ -820,7 +820,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <GithubIcon className="h-4 w-4" color="#6b7280" />
                               Report a bug
                             </div>
@@ -832,8 +832,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-custom-text-200" />
                               Chat with us
                             </div>
                           </Command.Item>
@@ -847,8 +847,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             General
                           </div>
                         </Command.Item>
@@ -856,8 +856,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Members
                           </div>
                         </Command.Item>
@@ -865,8 +865,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Billing and Plans
                           </div>
                         </Command.Item>
@@ -874,8 +874,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Integrations
                           </div>
                         </Command.Item>
@@ -883,8 +883,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/import-export`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Import/Export
                           </div>
                         </Command.Item>
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 8f946f5ea..339d3695e 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -85,29 +85,29 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-brand-surface-2 p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-custom-background-80 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
+                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
                       >
                         <span>Keyboard Shortcuts</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
+                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
                               aria-hidden="true"
                             />
                           </button>
                         </span>
                       </Dialog.Title>
                       <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
-                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-100 bg-custom-background-90 px-3 py-2">
+                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                             id="search"
                             name="search"
                             type="text"
@@ -123,22 +123,22 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div key={shortcut.keys} className="flex w-full flex-col">
                                 <div className="flex flex-col gap-y-3">
                                   <div className="flex items-center justify-between">
-                                    <p className="text-sm text-brand-secondary">
+                                    <p className="text-sm text-custom-text-200">
                                       {shortcut.description}
                                     </p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
@@ -151,7 +151,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             ))
                           ) : (
                             <div className="flex flex-col gap-y-3">
-                              <p className="text-sm text-brand-secondary">
+                              <p className="text-sm text-custom-text-200">
                                 No shortcuts found for{" "}
                                 <span className="font-semibold italic">
                                   {`"`}
@@ -168,20 +168,20 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div className="flex flex-col gap-y-3">
                                 {shortcuts.map(({ keys, description }, index) => (
                                   <div key={index} className="flex items-center justify-between">
-                                    <p className="text-sm text-brand-secondary">{description}</p>
+                                    <p className="text-sm text-custom-text-200">{description}</p>
                                     <div className="flex items-center gap-x-2.5">
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 711fb7336..7b5d1e527 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -85,7 +85,7 @@ export const AllBoards: React.FC<Props> = ({
                     return (
                       <div
                         key={index}
-                        className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
+                        className="flex items-center justify-between gap-2 rounded bg-custom-background-90 p-2 shadow"
                       >
                         <div className="flex items-center gap-2">
                           {currentState &&
@@ -96,7 +96,7 @@ export const AllBoards: React.FC<Props> = ({
                               : addSpaceIfCamelCase(singleGroup)}
                           </h4>
                         </div>
-                        <span className="text-xs text-brand-secondary">0</span>
+                        <span className="text-xs text-custom-text-200">0</span>
                       </div>
                     );
                 })}
diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
index 880a6b56b..38cb8fa87 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -113,7 +113,7 @@ export const BoardHeader: React.FC<Props> = ({
   return (
     <div
       className={`flex items-center justify-between px-1 ${
-        !isCollapsed ? "flex-col rounded-md bg-brand-surface-1" : ""
+        !isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
       }`}
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@@ -134,7 +134,7 @@ export const BoardHeader: React.FC<Props> = ({
           <span
             className={`${
               isCollapsed ? "ml-0.5" : ""
-            } min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs`}
+            } min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>
@@ -144,7 +144,7 @@ export const BoardHeader: React.FC<Props> = ({
       <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
         <button
           type="button"
-          className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
           onClick={() => {
             setIsCollapsed((prevData) => !prevData);
           }}
@@ -158,7 +158,7 @@ export const BoardHeader: React.FC<Props> = ({
         {!isCompleted && selectedGroup !== "created_by" && (
           <button
             type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+            className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
             onClick={addIssueToState}
           >
             <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 52b20d220..9cfe9c937 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -77,7 +77,9 @@ export const SingleBoard: React.FC<Props> = ({
           {(provided, snapshot) => (
             <div
               className={`relative h-full ${
-                orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
+                orderBy !== "sort_order" && snapshot.isDraggingOver
+                  ? "bg-custom-background-100/20"
+                  : ""
               } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
               ref={provided.innerRef}
               {...provided.droppableProps}
@@ -87,12 +89,12 @@ export const SingleBoard: React.FC<Props> = ({
                   <div
                     className={`absolute ${
                       snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
+                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-custom-background-90 opacity-50`}
                   />
                   <div
                     className={`absolute ${
                       snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
+                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-custom-background-100 p-2 text-xs`}
                   >
                     This board is ordered by{" "}
                     {replaceUnderscoreIfSnakeCase(
@@ -150,7 +152,7 @@ export const SingleBoard: React.FC<Props> = ({
                   {type === "issue" ? (
                     <button
                       type="button"
-                      className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
+                      className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
                       onClick={addIssueToState}
                     >
                       <PlusIcon className="h-4 w-4" />
@@ -162,7 +164,7 @@ export const SingleBoard: React.FC<Props> = ({
                         customButton={
                           <button
                             type="button"
-                            className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                            className="flex items-center gap-2 font-medium text-custom-primary outline-none"
                           >
                             <PlusIcon className="h-4 w-4" />
                             Add Issue
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 6753e84cd..e019d3a9e 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -43,7 +43,7 @@ import {
 import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { handleIssuesMutation } from "constants/issue";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import {
   ICurrentUserResponse,
@@ -265,8 +265,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className={`mb-3 rounded bg-brand-base shadow ${
-          snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
+        className={`mb-3 rounded bg-custom-background-90 shadow ${
+          snapshot.isDragging ? "border-2 border-custom-primary shadow-lg" : ""
         }`}
         ref={provided.innerRef}
         {...provided.draggableProps}
@@ -290,7 +290,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-custom-background-80"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <EllipsisHorizontalIcon className="h-4 w-4" />
@@ -330,13 +330,11 @@ export const SingleBoardIssue: React.FC<Props> = ({
           <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
             <a>
               {properties.key && (
-                <div className="mb-2.5 text-xs font-medium text-brand-secondary">
+                <div className="mb-2.5 text-xs font-medium text-custom-text-200">
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
-              <h5 className="text-sm group-hover:text-brand-accent break-words line-clamp-3">
-                {issue.name}
-              </h5>
+              <h5 className="text-sm break-words line-clamp-3">{issue.name}</h5>
             </a>
           </Link>
           <div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">
@@ -394,9 +392,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
                     {issue.sub_issues_count}
                   </div>
@@ -404,9 +402,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
                     {issue.link_count}
                   </div>
@@ -414,9 +412,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                     {issue.attachment_count}
                   </div>
diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index 23c11d254..c9afc4217 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -62,7 +62,7 @@ export const CalendarHeader: React.FC<Props> = ({
           {({ open }) => (
             <>
               <Popover.Button>
-                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-brand-base">
+                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
                   <span>{formatDate(currentDate, "Month")}</span>{" "}
                   <span>{formatDate(currentDate, "yyyy")}</span>
                 </div>
@@ -77,30 +77,30 @@ export const CalendarHeader: React.FC<Props> = ({
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
+                <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-custom-background-80 shadow-lg">
                   <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
                     {YEARS_LIST.map((year) => (
                       <button
                         onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
                         className={` ${
                           isSameYear(year.value, currentDate)
-                            ? "text-sm font-medium text-brand-base"
-                            : "text-xs text-brand-secondary "
-                        } hover:text-sm hover:font-medium hover:text-brand-base`}
+                            ? "text-sm font-medium text-custom-text-100"
+                            : "text-xs text-custom-text-200 "
+                        } hover:text-sm hover:font-medium hover:text-custom-text-100`}
                       >
                         {year.label}
                       </button>
                     ))}
                   </div>
-                  <div className="grid grid-cols-4  border-t border-brand-base px-2">
+                  <div className="grid grid-cols-4  border-t border-custom-border-100 px-2">
                     {MONTHS_LIST.map((month) => (
                       <button
                         onClick={() =>
                           updateDate(updateDateWithMonth(`${month.value}`, currentDate))
                         }
-                        className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
+                        className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
                           isSameMonth(`${month.value}`, currentDate)
-                            ? "font-medium text-brand-base"
+                            ? "font-medium text-custom-text-100"
                             : ""
                         }`}
                       >
@@ -152,7 +152,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
       <div className="flex w-full items-center justify-end gap-2">
         <button
-          className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
+          className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
           onClick={() => {
             if (isMonthlyView) {
               updateDate(new Date());
@@ -170,7 +170,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
         <CustomMenu
           customButton={
-            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none ">
+            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
               {isMonthlyView ? "Monthly" : "Weekly"}
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </div>
@@ -181,7 +181,7 @@ export const CalendarHeader: React.FC<Props> = ({
               setIsMonthlyView(true);
               changeDateRange(startOfWeek(currentDate), lastDayOfWeek(currentDate));
             }}
-            className="w-52 text-sm text-brand-secondary"
+            className="w-52 text-sm text-custom-text-200"
           >
             <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
               <span className="flex items-center gap-2">Monthly View</span>
@@ -198,7 +198,7 @@ export const CalendarHeader: React.FC<Props> = ({
                 getCurrentWeekEndDate(currentDate)
               );
             }}
-            className="w-52 text-sm text-brand-secondary"
+            className="w-52 text-sm text-custom-text-200"
           >
             <div className="flex w-full items-center justify-between gap-2">
               <span className="flex items-center gap-2">Weekly View</span>
@@ -207,7 +207,7 @@ export const CalendarHeader: React.FC<Props> = ({
               />
             </div>
           </CustomMenu.MenuItem>
-          <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-brand-secondary">
+          <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-100 py-2 px-1  text-sm text-custom-text-200">
             <h4>Show weekends</h4>
             <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
           </div>
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index 9da6e5873..e61a7b1ce 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -172,7 +172,7 @@ export const CalendarView: React.FC<Props> = ({
   return calendarIssues ? (
     <div className="h-full overflow-y-auto">
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="h-full rounded-lg p-8 text-brand-secondary">
+        <div className="h-full rounded-lg p-8 text-custom-text-200">
           <CalendarHeader
             isMonthlyView={isMonthlyView}
             setIsMonthlyView={setIsMonthlyView}
@@ -191,7 +191,7 @@ export const CalendarView: React.FC<Props> = ({
             {weeks.map((date, index) => (
               <div
                 key={index}
-                className={`flex  items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
+                className={`flex  items-center justify-start gap-2 border-custom-border-100 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
                   !isMonthlyView
                     ? showWeekEnds
                       ? (index + 1) % 7 === 0
diff --git a/apps/app/components/core/calendar-view/single-date.tsx b/apps/app/components/core/calendar-view/single-date.tsx
index 2dbfe5dfd..0e39e1950 100644
--- a/apps/app/components/core/calendar-view/single-date.tsx
+++ b/apps/app/components/core/calendar-view/single-date.tsx
@@ -49,7 +49,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           key={index}
           ref={provided.innerRef}
           {...provided.droppableProps}
-          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
+          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-100 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
             isMonthlyView ? "" : "pt-9"
           } ${
             showWeekEnds
@@ -83,7 +83,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           {totalIssues > 4 && (
             <button
               type="button"
-              className="w-min whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 px-1.5 py-1 text-xs"
+              className="w-min whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 px-1.5 py-1 text-xs"
               onClick={() => setShowAllIssues((prevData) => !prevData)}
             >
               {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
@@ -91,13 +91,13 @@ export const SingleCalendarDate: React.FC<Props> = ({
           )}
 
           <div
-            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-brand-surface-2 p-1 text-xs text-brand-secondary opacity-0 group-hover:opacity-100`}
+            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
           >
             <button
               className="flex items-center justify-center gap-1 text-center"
               onClick={() => addIssueToDate(date.date)}
             >
-              <PlusSmallIcon className="h-4 w-4 text-brand-secondary" />
+              <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
               Add issue
             </button>
           </div>
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index 31cbf139c..7c5c89afa 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -163,8 +163,8 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       ref={provided.innerRef}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
-      className={`w-full relative cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
-        snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
+      className={`w-full relative cursor-pointer rounded border border-custom-border-100 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
+        snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
       }`}
     >
       <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
@@ -199,13 +199,13 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                <span className="flex-shrink-0 text-xs text-custom-text-200">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-xs text-brand-base">{truncateText(issue.name, 25)}</span>
+              <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
             </Tooltip>
           </a>
         </Link>
@@ -267,9 +267,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
                     {issue.sub_issues_count}
                   </div>
@@ -277,9 +277,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
                     {issue.link_count}
                   </div>
@@ -287,9 +287,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                     {issue.attachment_count}
                   </div>
diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx
deleted file mode 100644
index 59aed8b2b..000000000
--- a/apps/app/components/core/custom-theme-selector.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { useTheme } from "next-themes";
-
-import { useForm } from "react-hook-form";
-
-// hooks
-import useUser from "hooks/use-user";
-// ui
-import { PrimaryButton } from "components/ui";
-import { ColorPickerInput } from "components/core";
-// services
-import userService from "services/user.service";
-// helper
-import { applyTheme } from "helpers/theme.helper";
-// types
-import { ICustomTheme } from "types";
-
-type Props = {
-  preLoadedData?: Partial<ICustomTheme> | null;
-};
-
-export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
-  const [darkPalette, setDarkPalette] = useState(false);
-
-  const defaultValues = {
-    accent: preLoadedData?.accent ?? "#FE5050",
-    bgBase: preLoadedData?.bgBase ?? "#FFF7F7",
-    bgSurface1: preLoadedData?.bgSurface1 ?? "#FFE0E0",
-    bgSurface2: preLoadedData?.bgSurface2 ?? "#FFF7F7",
-    border: preLoadedData?.border ?? "#FFC9C9",
-    darkPalette: preLoadedData?.darkPalette ?? false,
-    palette: preLoadedData?.palette ?? "",
-    sidebar: preLoadedData?.sidebar ?? "#FFFFFF",
-    textBase: preLoadedData?.textBase ?? "#430000",
-    textSecondary: preLoadedData?.textSecondary ?? "#323232",
-  };
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-    setValue,
-    reset,
-  } = useForm<any>({
-    defaultValues,
-  });
-
-  const { setTheme } = useTheme();
-  const { mutateUser } = useUser();
-
-  const handleFormSubmit = async (formData: any) => {
-    await userService
-      .updateUser({
-        theme: {
-          accent: formData.accent,
-          bgBase: formData.bgBase,
-          bgSurface1: formData.bgSurface1,
-          bgSurface2: formData.bgSurface2,
-          border: formData.border,
-          darkPalette: darkPalette,
-          palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`,
-          sidebar: formData.sidebar,
-          textBase: formData.textBase,
-          textSecondary: formData.textSecondary,
-        },
-      })
-      .then((res) => {
-        mutateUser((prevData) => {
-          if (!prevData) return prevData;
-          return { ...prevData, user: res };
-        }, false);
-        applyTheme(formData.palette, darkPalette);
-        setTheme("custom");
-      })
-      .catch((err) => console.log(err));
-  };
-
-  const handleUpdateTheme = async (formData: any) => {
-    await handleFormSubmit({ ...formData, darkPalette });
-
-    reset({
-      ...defaultValues,
-    });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...preLoadedData,
-    });
-  }, [preLoadedData, reset]);
-
-  return (
-    <form onSubmit={handleSubmit(handleUpdateTheme)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-brand-base">Customize your theme</h3>
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background</h3>
-              <ColorPickerInput
-                name="bgBase"
-                error={errors.bgBase}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background surface 1</h3>
-              <ColorPickerInput
-                name="bgSurface1"
-                error={errors.bgSurface1}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Background surface 2</h3>
-              <ColorPickerInput
-                name="bgSurface2"
-                error={errors.bgSurface2}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Border</h3>
-              <ColorPickerInput
-                name="border"
-                error={errors.border}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Sidebar</h3>
-              <ColorPickerInput
-                name="sidebar"
-                error={errors.sidebar}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Accent</h3>
-              <ColorPickerInput
-                name="accent"
-                error={errors.accent}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Text primary</h3>
-              <ColorPickerInput
-                name="textBase"
-                error={errors.textBase}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-
-            <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-base text-brand-secondary">Text secondary</h3>
-              <ColorPickerInput
-                name="textSecondary"
-                error={errors.textSecondary}
-                watch={watch}
-                setValue={setValue}
-                register={register}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="mt-5 flex justify-end gap-2">
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {isSubmitting ? "Creating Theme..." : "Set Theme"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index d00804ec8..bc915d294 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -55,55 +55,55 @@ const activityDetails: {
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   description: {
     message: "updated the description.",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   issue: {
     message: "deleted the issue.",
-    icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <TrashIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   link: {
     message: "updated the link",
-    icon: <LinkIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <LinkIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   attachment: {
     message: "updated the attachment",
-    icon: <PaperClipIcon className="h-3 w-3 text-gray-500 " aria-hidden="true" />,
+    icon: <PaperClipIcon className="h-3 w-3 text-custom-text-200 " aria-hidden="true" />,
   },
 };
 
@@ -157,7 +157,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
         ) {
           const { workspace_detail, project, issue } = activity;
           value = (
-            <span className="text-brand-secondary">
+            <span className="text-custom-text-200">
               created{" "}
               <Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
                 <a className="inline-flex items-center hover:underline">
@@ -221,9 +221,9 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     </div>
                   )}
 
-                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
                     <ChatBubbleLeftEllipsisIcon
-                      className="h-3.5 w-3.5 text-brand-secondary"
+                      className="h-3.5 w-3.5 text-custom-text-200"
                       aria-hidden="true"
                     />
                   </span>
@@ -234,7 +234,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       {activity.actor_detail.first_name}
                       {activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
                     </div>
-                    <p className="mt-0.5 text-xs text-brand-secondary">
+                    <p className="mt-0.5 text-xs text-custom-text-200">
                       Commented {timeAgo(activity.created_at)}
                     </p>
                   </div>
@@ -247,7 +247,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       }
                       editable={false}
                       noBorder
-                      customClassName="text-xs border border-brand-base bg-brand-base"
+                      customClassName="text-xs border border-custom-border-100 bg-custom-background-100"
                     />
                   </div>
                 </div>
@@ -262,7 +262,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
               <div className="relative pb-1">
                 {activities.length > 1 && activityIdx !== activities.length - 1 ? (
                   <span
-                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
+                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                     aria-hidden="true"
                   />
                 ) : null}
@@ -271,7 +271,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     <div>
                       <div className="relative px-1.5">
                         <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 ring-white">
                             {activity.field ? (
                               activityDetails[activity.field as keyof typeof activityDetails]?.icon
                             ) : activity.actor_detail.avatar &&
@@ -295,7 +295,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       </div>
                     </div>
                     <div className="min-w-0 flex-1 py-3">
-                      <div className="text-xs text-brand-secondary">
+                      <div className="text-xs text-custom-text-200">
                         <span className="text-gray font-medium">
                           {activity.actor_detail.first_name}
                           {activity.actor_detail.is_bot
@@ -303,7 +303,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                             : " " + activity.actor_detail.last_name}
                         </span>
                         <span> {action} </span>
-                        <span className="text-xs font-medium text-brand-base"> {value} </span>
+                        <span className="text-xs font-medium text-custom-text-100"> {value} </span>
                         <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
                       </div>
                     </div>
diff --git a/apps/app/components/core/filters/due-date-filter-modal.tsx b/apps/app/components/core/filters/due-date-filter-modal.tsx
index 6c6bc4ec6..e3a24a7b1 100644
--- a/apps/app/components/core/filters/due-date-filter-modal.tsx
+++ b/apps/app/components/core/filters/due-date-filter-modal.tsx
@@ -96,7 +96,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -109,7 +109,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               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 flex transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="flex w-full justify-between">
                     <Controller
@@ -157,9 +157,9 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                   </div>
                   {watch("filterType") === "range" && (
                     <h6 className="text-xs flex items-center gap-1">
-                      <span className="text-brand-secondary">After:</span>
+                      <span className="text-custom-text-200">After:</span>
                       <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
-                      <span className="text-brand-secondary ml-1">Before:</span>
+                      <span className="text-custom-text-200 ml-1">Before:</span>
                       {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
                     </h6>
                   )}
diff --git a/apps/app/components/core/filters/filters-list.tsx b/apps/app/components/core/filters/filters-list.tsx
index 7254f8072..2e895e5e4 100644
--- a/apps/app/components/core/filters/filters-list.tsx
+++ b/apps/app/components/core/filters/filters-list.tsx
@@ -58,9 +58,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1"
             >
-              <span className="capitalize text-brand-secondary">
+              <span className="capitalize text-custom-text-200">
                 {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[key as keyof IIssueFilterOptions] === null ||
@@ -132,7 +132,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                               ? "bg-yellow-500/20 text-yellow-500"
                               : priority === "low"
                               ? "bg-green-500/20 text-green-500"
-                              : "bg-brand-surface-1 text-brand-secondary"
+                              : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
                           <span>{getPriorityIcon(priority)}</span>
@@ -171,7 +171,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
                             <Avatar user={member} />
                             <span>{member?.first_name}</span>
@@ -212,7 +212,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
                             <Avatar user={member} />
                             <span>{member?.first_name}</span>
@@ -310,7 +310,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-base px-1 py-0.5"
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-100 px-1 py-0.5"
                           >
                             <div className="h-1.5 w-1.5 rounded-full" />
                             <span className="capitalize">
@@ -381,7 +381,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               target_date: null,
             })
           }
-          className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
+          className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
           <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index 67b2423ec..8b625fbcf 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -23,10 +23,33 @@ import {
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties } from "types";
+import { Properties, TIssueViewOptions } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
+const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
+  {
+    type: "list",
+    icon: <ListBulletIcon className="h-4 w-4" />,
+  },
+  {
+    type: "kanban",
+    icon: <Squares2X2Icon className="h-4 w-4" />,
+  },
+  {
+    type: "calendar",
+    icon: <CalendarDaysIcon className="h-4 w-4" />,
+  },
+  {
+    type: "spreadsheet",
+    icon: <Icon iconName="table_chart" />,
+  },
+  {
+    type: "gantt_chart",
+    icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
+  },
+];
+
 export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
@@ -56,53 +79,20 @@ export const IssuesFilterView: React.FC = () => {
   return (
     <div className="flex items-center gap-2">
       <div className="flex items-center gap-x-1">
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "list" ? "bg-brand-surface-2" : ""
-          }`}
-          onClick={() => setIssueView("list")}
-        >
-          <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "kanban" ? "bg-brand-surface-2" : ""
-          }`}
-          onClick={() => setIssueView("kanban")}
-        >
-          <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "calendar" ? "bg-brand-surface-2" : ""
-          }`}
-          onClick={() => setIssueView("calendar")}
-        >
-          <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "spreadsheet" ? "bg-brand-surface-2" : ""
-          }`}
-          onClick={() => setIssueView("spreadsheet")}
-        >
-          <Icon iconName="table_chart" className="text-brand-secondary" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "gantt_chart" ? "bg-brand-surface-2" : ""
-          }`}
-          onClick={() => setIssueView("gantt_chart")}
-        >
-          <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
-            waterfall_chart
-          </span>
-        </button>
+        {issueViewOptions.map((option) => (
+          <button
+            key={option.type}
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+              issueView === option.type
+                ? "bg-custom-sidebar-background-80"
+                : "text-custom-sidebar-text-200"
+            }`}
+            onClick={() => setIssueView(option.type)}
+          >
+            {option.icon}
+          </button>
+        ))}
       </div>
       <SelectFilters
         filters={filters}
@@ -146,8 +136,10 @@ export const IssuesFilterView: React.FC = () => {
         {({ open }) => (
           <>
             <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
-                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
+                open
+                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                  : "text-custom-sidebar-text-200"
               }`}
             >
               View
@@ -163,13 +155,13 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-brand-base bg-brand-surface-1 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-brand-base">
+              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-100 bg-custom-background-90 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-custom-border-100">
                   <div className="space-y-4 pb-3 text-xs">
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Group by</h4>
+                          <h4 className="text-custom-text-200">Group by</h4>
                           <CustomMenu
                             label={
                               GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
@@ -190,7 +182,7 @@ export const IssuesFilterView: React.FC = () => {
                           </CustomMenu>
                         </div>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Order by</h4>
+                          <h4 className="text-custom-text-200">Order by</h4>
                           <CustomMenu
                             label={
                               ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
@@ -215,7 +207,7 @@ export const IssuesFilterView: React.FC = () => {
                       </>
                     )}
                     <div className="flex items-center justify-between">
-                      <h4 className="text-brand-secondary">Issue type</h4>
+                      <h4 className="text-custom-text-200">Issue type</h4>
                       <CustomMenu
                         label={
                           FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
@@ -241,7 +233,7 @@ export const IssuesFilterView: React.FC = () => {
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Show empty states</h4>
+                          <h4 className="text-custom-text-200">Show empty states</h4>
                           <ToggleSwitch
                             value={showEmptyGroups}
                             onChange={() => setShowEmptyGroups(!showEmptyGroups)}
@@ -253,7 +245,7 @@ export const IssuesFilterView: React.FC = () => {
                           </button>
                           <button
                             type="button"
-                            className="font-medium text-brand-accent"
+                            className="font-medium text-custom-primary"
                             onClick={() => setNewFilterDefaultView()}
                           >
                             Set as default
@@ -264,7 +256,7 @@ export const IssuesFilterView: React.FC = () => {
                   </div>
 
                   <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-brand-secondary">Display Properties</h4>
+                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
                     <div className="flex flex-wrap items-center gap-2">
                       {Object.keys(properties).map((key) => {
                         if (key === "estimate" && !isEstimateActive) return null;
@@ -289,8 +281,8 @@ export const IssuesFilterView: React.FC = () => {
                             type="button"
                             className={`rounded border px-2 py-1 text-xs capitalize ${
                               properties[key as keyof Properties]
-                                ? "border-brand-accent bg-brand-accent text-white"
-                                : "border-brand-base"
+                                ? "border-custom-primary bg-custom-primary text-white"
+                                : "border-custom-border-100"
                             }`}
                             onClick={() => setProperties(key as keyof Properties)}
                           >
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 380c6f356..0bc64142d 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-brand-secondary"
+        className="rounded-md border border-custom-border-100 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -76,16 +76,16 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-brand-base bg-brand-surface-2 shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-100 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
+              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => (
                   <Tab
                     key={tab.key}
                     className={({ selected }) =>
                       `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
-                        selected ? "bg-brand-accent text-white" : "text-brand-base"
+                        selected ? "bg-custom-primary text-white" : "text-custom-text-100"
                       }`
                     }
                   >
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 1eb52590c..b91944abf 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -5,10 +5,8 @@ export * from "./gantt-chart-view";
 export * from "./list-view";
 export * from "./modals";
 export * from "./spreadsheet-view";
+export * from "./theme";
 export * from "./sidebar";
 export * from "./issues-view";
 export * from "./image-picker-popover";
 export * from "./feeds";
-export * from "./theme-switch";
-export * from "./custom-theme-selector";
-export * from "./color-picker-input";
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 7a8c8960f..b53553c9f 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -29,19 +29,13 @@ import {
 } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
-import { CycleIssuesGanttChartView, TransferIssues, TransferIssuesModal } from "components/cycles";
-import { IssueGanttChartView } from "components/issues/gantt-chart";
+import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
-import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
+import { EmptyState, PrimaryButton, Spinner } from "components/ui";
 // icons
-import {
-  ListBulletIcon,
-  PlusIcon,
-  RectangleStackIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // images
-import emptyIssue from "public/empty-state/empty-issue.svg";
+import emptyIssue from "public/empty-state/issue.svg";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { orderArrayBy } from "helpers/array.helper";
@@ -56,7 +50,6 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   STATES_LIST,
 } from "constants/fetch-keys";
-import { ModuleIssuesGanttChartView } from "components/modules";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
@@ -107,7 +100,7 @@ export const IssuesView: React.FC<Props> = ({
     groupByProperty: selectedGroup,
     orderBy,
     filters,
-    isNotEmpty,
+    isEmpty,
     setFilters,
     params,
   } = useIssuesView();
@@ -495,7 +488,7 @@ export const IssuesView: React.FC<Props> = ({
               {viewId ? "Update" : "Save"} view
             </PrimaryButton>
           </div>
-          {<div className="mt-3 border-t border-brand-base" />}
+          {<div className="mt-3 border-t border-custom-border-100" />}
         </>
       )}
 
@@ -505,7 +498,7 @@ export const IssuesView: React.FC<Props> = ({
             <div
               className={`${
                 trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-              } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-brand-base px-3 py-5 text-xs font-medium italic text-red-500 ${
+              } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
                 snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
               } transition duration-300`}
               ref={provided.innerRef}
@@ -517,7 +510,7 @@ export const IssuesView: React.FC<Props> = ({
           )}
         </StrictModeDroppable>
         {groupedByIssues ? (
-          isNotEmpty ? (
+          !isEmpty || issueView === "kanban" || issueView === "calendar" ? (
             <>
               {isCompleted && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
               {issueView === "list" ? (
@@ -584,46 +577,20 @@ export const IssuesView: React.FC<Props> = ({
                 issueView === "gantt_chart" && <GanttChartView />
               )}
             </>
-          ) : type === "issue" ? (
-            <EmptyState
-              type="issue"
-              title="Create New Issue"
-              description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-              imgURL={emptyIssue}
-            />
           ) : (
-            <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-              <EmptySpace
-                title="You don't have any issue yet."
-                description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-                Icon={RectangleStackIcon}
-              >
-                <EmptySpaceItem
-                  title="Create a new issue"
-                  description={
-                    <span>
-                      Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
-                      shortcut to create a new issue
-                    </span>
-                  }
-                  Icon={PlusIcon}
-                  action={() => {
-                    const e = new KeyboardEvent("keydown", {
-                      key: "c",
-                    });
-                    document.dispatchEvent(e);
-                  }}
-                />
-                {openIssuesListModal && (
-                  <EmptySpaceItem
-                    title="Add an existing issue"
-                    description="Open list"
-                    Icon={ListBulletIcon}
-                    action={openIssuesListModal}
-                  />
-                )}
-              </EmptySpace>
-            </div>
+            <EmptyState
+              title="Project issues will appear here"
+              description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+              image={emptyIssue}
+              buttonText="New Issue"
+              buttonIcon={<PlusIcon className="h-4 w-4" />}
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "c",
+                });
+                document.dispatchEvent(e);
+              }}
+            />
           )
         ) : (
           <div className="flex h-full w-full items-center justify-center">
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 774fbb02d..686151243 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -218,7 +218,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
+        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-100 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -233,13 +233,13 @@ export const SingleListIssue: React.FC<Props> = ({
                   tooltipHeading="Issue ID"
                   tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                 >
-                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                  <span className="flex-shrink-0 text-xs text-custom-text-200">
                     {issue.project_detail?.identifier}-{issue.sequence_id}
                   </span>
                 </Tooltip>
               )}
               <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-[0.825rem] text-brand-base">
+                <span className="text-[0.825rem] text-custom-text-100">
                   {truncateText(issue.name, 50)}
                 </span>
               </Tooltip>
@@ -302,9 +302,9 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
                   {issue.sub_issues_count}
                 </div>
@@ -312,9 +312,9 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LinkIcon className="h-3.5 w-3.5" />
                   {issue.link_count}
                 </div>
@@ -322,9 +322,9 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                   {issue.attachment_count}
                 </div>
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index b76f3ad8a..4ea1be2f3 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -141,20 +141,20 @@ export const SingleList: React.FC<Props> = ({
     <Disclosure as="div" defaultOpen>
       {({ open }) => (
         <div>
-          <div className="flex items-center justify-between px-4 py-2.5">
+          <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
                   <div className="flex items-center">{getGroupIcon()}</div>
                 )}
                 {selectedGroup !== null ? (
-                  <h2 className="text-sm font-semibold capitalize leading-6 text-brand-base">
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-custom-text-100">
                     {getGroupTitle()}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="text-brand-2 min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs">
+                <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
                   {groupedByIssues[groupTitle as keyof IIssue].length}
                 </span>
               </div>
@@ -162,7 +162,7 @@ export const SingleList: React.FC<Props> = ({
             {type === "issue" ? (
               <button
                 type="button"
-                className="p-1  text-brand-secondary hover:bg-brand-surface-2"
+                className="p-1  text-custom-text-200 hover:bg-custom-background-80"
                 onClick={addIssueToState}
               >
                 <PlusIcon className="h-4 w-4" />
@@ -221,7 +221,7 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="bg-brand-base px-4 py-2.5 text-sm text-brand-secondary">
+                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
                     No issues.
                   </p>
                 )
diff --git a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
index a2c6310e9..6addb2e94 100644
--- a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
@@ -173,7 +173,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -188,12 +188,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                 >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <input
                       type="text"
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Search..."
                       onChange={(event) => setQuery(event.target.value)}
                     />
@@ -201,16 +201,16 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                   <Combobox.Options
                     static
-                    className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
+                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto"
                   >
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">
                         {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
                             Select issues to delete
                           </h2>
                         )}
-                        <ul className="text-sm text-brand-secondary">
+                        <ul className="text-sm text-custom-text-200">
                           {filteredIssues.map((issue) => (
                             <Combobox.Option
                               key={issue.id}
@@ -218,7 +218,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                               value={issue.id}
                               className={({ active, selected }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-brand-surface-2 text-brand-base" : ""
+                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
                                 }`
                               }
                             >
@@ -246,9 +246,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                     ) : (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                         <LayerDiagonalIcon height="56" width="56" />
-                        <h3 className="text-brand-secondary">
+                        <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
                         </h3>
                       </div>
                     )}
diff --git a/apps/app/components/core/modals/existing-issues-list-modal.tsx b/apps/app/components/core/modals/existing-issues-list-modal.tsx
index e9a004a5e..906d6d470 100644
--- a/apps/app/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/modals/existing-issues-list-modal.tsx
@@ -141,7 +141,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -165,24 +165,24 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
 
-                  <div className="text-brand-secondary text-[0.825rem] p-2">
+                  <div className="text-custom-text-200 text-[0.825rem] p-2">
                     {selectedIssues.length > 0 ? (
                       <div className="flex items-center gap-2 flex-wrap mt-1">
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 text-xs border border-brand-base bg-brand-surface-2 pl-2 py-1 rounded-md text-brand-base whitespace-nowrap"
+                            className="flex items-center gap-1 text-xs border border-custom-border-100 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -194,13 +194,13 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                 )
                               }
                             >
-                              <XMarkIcon className="h-3 w-3 text-brand-secondary group-hover:text-brand-base" />
+                              <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min text-xs border border-brand-base bg-brand-surface-2 p-2 rounded-md whitespace-nowrap">
+                      <div className="w-min text-xs border border-custom-border-100 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
                         No issues selected
                       </div>
                     )}
@@ -208,9 +208,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
                     {debouncedSearchTerm !== "" && (
-                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
+                      <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
                         Search results for{" "}
-                        <span className="text-brand-base">
+                        <span className="text-custom-text-100">
                           {'"'}
                           {debouncedSearchTerm}
                           {'"'}
@@ -225,9 +225,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       debouncedSearchTerm !== "" && (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-brand-secondary">
+                          <h3 className="text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
                               C
                             </pre>
                             .
@@ -243,7 +243,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm text-brand-base ${issues.length > 0 ? "p-2" : ""}`}>
+                      <ul
+                        className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}
+                      >
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -254,9 +256,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                               htmlFor={`issue-${issue.id}`}
                               value={issue}
                               className={({ active }) =>
-                                `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                  active ? "bg-brand-surface-2 text-brand-base" : ""
-                                } ${selected ? "text-brand-base" : ""}`
+                                `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                } ${selected ? "text-custom-text-100" : ""}`
                               }
                             >
                               <input type="checkbox" checked={selected} readOnly />
diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index a62b3e413..dff1209c3 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -143,7 +143,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >
diff --git a/apps/app/components/core/modals/image-upload-modal.tsx b/apps/app/components/core/modals/image-upload-modal.tsx
index 4168c5e0a..9bca11124 100644
--- a/apps/app/components/core/modals/image-upload-modal.tsx
+++ b/apps/app/components/core/modals/image-upload-modal.tsx
@@ -104,7 +104,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -118,18 +118,21 @@ export const ImageUploadModal: React.FC<Props> = ({
               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 border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-custom-text-100"
+                  >
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
                     <div className="flex items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
+                        className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-brand-base hover:bg-brand-surface-1"
+                            ? "border-2 border-dashed border-custom-border-100 hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
@@ -137,7 +140,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           <>
                             <button
                               type="button"
-                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-brand-secondary"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>
@@ -151,8 +154,8 @@ export const ImageUploadModal: React.FC<Props> = ({
                           </>
                         ) : (
                           <div>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-brand-secondary" />
-                            <span className="mt-2 block text-sm font-medium text-brand-secondary">
+                            <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
                               {isDragActive
                                 ? "Drop image here to upload"
                                 : "Drag & drop image here"}
diff --git a/apps/app/components/core/modals/link-modal.tsx b/apps/app/components/core/modals/link-modal.tsx
index 3c22c2b1b..543e733d6 100644
--- a/apps/app/components/core/modals/link-modal.tsx
+++ b/apps/app/components/core/modals/link-modal.tsx
@@ -70,11 +70,14 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
               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-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
+                      >
                         Add Link
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
diff --git a/apps/app/components/core/sidebar/links-list.tsx b/apps/app/components/core/sidebar/links-list.tsx
index 590ebc758..7094b9b86 100644
--- a/apps/app/components/core/sidebar/links-list.tsx
+++ b/apps/app/components/core/sidebar/links-list.tsx
@@ -32,15 +32,15 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
             <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
               <Link href={link.url}>
                 <a
-                  className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 outline-none hover:bg-brand-surface-2"
+                  className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
                   target="_blank"
                 >
-                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-brand-secondary" />
+                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
                 </a>
               </Link>
               <button
                 type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
+                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
                 onClick={() => handleDeleteLink(link.id)}
               >
                 <TrashIcon className="h-4 w-4" />
@@ -48,13 +48,16 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
             </div>
           )}
           <Link href={link.url}>
-            <a className="relative flex gap-2 rounded-md bg-brand-base p-2" target="_blank">
+            <a
+              className="relative flex gap-2 rounded-md bg-custom-background-100 p-2"
+              target="_blank"
+            >
               <div className="mt-0.5">
                 <LinkIcon className="h-3.5 w-3.5" />
               </div>
               <div>
                 <h5 className="w-4/5 break-words">{link.title}</h5>
-                <p className="mt-0.5 text-brand-secondary">
+                <p className="mt-0.5 text-custom-text-200">
                   Added {timeAgo(link.created_at)}
                   <br />
                   by{" "}
diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index 5fa25e863..86de2f336 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -119,9 +119,9 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+          <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
-            <span className="text-brand-secondary"> issues pending on </span>
+            <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}
           </div>
         )}
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index b90f4e3ee..cfa8bdc2b 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -80,16 +80,16 @@ export const SidebarProgressStats: React.FC<Props> = ({
       <Tab.List
         as="div"
         className={`flex w-full items-center gap-2 justify-between rounded-md ${
-          noBackground ? "" : "bg-brand-surface-1"
+          noBackground ? "" : "bg-custom-background-90"
         } px-1 py-1.5 
         ${module ? "text-xs" : "text-sm"} `}
       >
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1 text-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -98,9 +98,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1 text-brand-base ${
-              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
           }
         >
@@ -109,16 +109,16 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1  text-brand-base ${
-              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+            } px-3 py-1  text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-brand-secondary">
+      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
         <Tab.Panel as="div" className="w-full space-y-1">
           {distribution.assignees.map((assignee, index) => {
             if (assignee.assignee_id)
@@ -159,7 +159,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   key={`unassigned-${index}`}
                   title={
                     <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-brand-base bg-brand-surface-2">
+                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80">
                         <img
                           src="/user.png"
                           height="100%"
diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx
index 7c7f65446..1498c9bad 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/single-progress-stats.tsx
@@ -19,8 +19,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
 }) => (
   <div
     className={`flex w-full items-center gap-4 justify-between rounded-sm p-1 text-xs ${
-      onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
-    } ${selected ? "bg-brand-surface-1" : ""}`}
+      onClick ? "cursor-pointer hover:bg-custom-background-90" : ""
+    } ${selected ? "bg-custom-background-90" : ""}`}
     onClick={onClick}
   >
     <div className="w-1/2">{title}</div>
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index daeeedd9a..0bb45371b 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -179,12 +179,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   return (
     <div
-      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
+      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max"
       style={{ gridTemplateColumns }}
     >
-      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
+      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full">
         <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14">
+          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
             {properties.key && (
               <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
                 {issue.project_detail?.identifier}-{issue.sequence_id}
@@ -198,11 +198,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                   onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
                   content={
                     <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-brand-base bg-brand-surface-1`}
+                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
                     >
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleEditIssue(issue);
                           setIsOpen(false);
@@ -216,7 +216,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleDeleteIssue(issue);
                           setIsOpen(false);
@@ -230,7 +230,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleCopyText();
                           setIsOpen(false);
@@ -245,7 +245,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                   }
                   placement="bottom-start"
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-brand-secondary" />
+                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
                 </Popover2>
               </div>
             )}
@@ -254,7 +254,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           {issue.sub_issues_count > 0 && (
             <div className="h-6 w-6 flex justify-center items-center">
               <button
-                className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
+                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
                 onClick={() => handleToggleExpand(issue.id)}
               >
                 <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
@@ -264,13 +264,13 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
 
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <a className="truncate text-brand-base cursor-pointer w-full text-[0.825rem]">
+          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
             {issue.name}
           </a>
         </Link>
       </div>
       {properties.state && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewStateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -284,7 +284,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.priority && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewPrioritySelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -297,7 +297,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.assignee && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewAssigneeSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -310,7 +310,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.labels && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewLabelSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -324,7 +324,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       )}
 
       {properties.due_date && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -336,7 +336,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.estimate && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
           <ViewEstimateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
index b05a5e82b..9341e446d 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
@@ -39,13 +39,15 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
         if (col.isActive) {
           return (
             <div
-              className={`bg-brand-surface-1 w-full ${
-                col.propertyName === "title" ? "sticky left-0 z-20 bg-brand-surface-1 pl-24" : ""
+              className={`bg-custom-background-90 w-full ${
+                col.propertyName === "title"
+                  ? "sticky left-0 z-20 bg-custom-background-90 pl-24"
+                  : ""
               }`}
             >
               {col.propertyName === "title" ? (
                 <div
-                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-brand-secondary text-current w-full py-2.5 px-2`}
+                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-custom-text-200 text-current w-full py-2.5 px-2`}
                 >
                   {col.colName}
                 </div>
@@ -54,22 +56,22 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   className="!w-full"
                   customButton={
                     <div
-                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-brand-secondary text-current hover:text-brand-base w-full py-3 px-2 ${
-                        activeSortingProperty === col.propertyName ? "bg-brand-surface-2" : ""
+                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-custom-text-200 text-current hover:text-custom-text-100 w-full py-3 px-2 ${
+                        activeSortingProperty === col.propertyName ? "bg-custom-background-80" : ""
                       }`}
                     >
                       {activeSortingProperty === col.propertyName && (
                         <div className="absolute top-1 right-1.5">
                           <Icon
                             iconName="filter_list"
-                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-brand-accent text-xs text-white"
+                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
                           />
                         </div>
                       )}
 
                       {col.icon ? (
                         <col.icon
-                          className={`text-brand-secondary group-hover:text-brand-base ${
+                          className={`text-custom-text-200 group-hover:text-custom-text-100 ${
                             col.propertyName === "estimate" ? "-rotate-90" : ""
                           }`}
                           aria-hidden="true"
@@ -77,7 +79,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                           width="14"
                         />
                       ) : col.propertyName === "priority" ? (
-                        <span className="text-sm material-symbols-rounded text-brand-secondary">
+                        <span className="text-sm material-symbols-rounded text-custom-text-200">
                           signal_cellular_alt
                         </span>
                       ) : (
@@ -94,7 +96,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   <CustomMenu.MenuItem
                     className={`${
                       selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                        ? "bg-brand-surface-2"
+                        ? "bg-custom-background-80"
                         : ""
                     }`}
                     key={col.propertyName}
@@ -105,8 +107,8 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     <div
                       className={`group flex gap-1.5 px-1 items-center justify-between ${
                         selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                          ? "text-brand-base"
-                          : "text-brand-secondary hover:text-brand-base"
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
                       }`}
                     >
                       <div className="flex gap-2 items-center">
@@ -166,7 +168,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   <CustomMenu.MenuItem
                     className={`mt-0.5 ${
                       selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                        ? "bg-brand-surface-2"
+                        ? "bg-custom-background-80"
                         : ""
                     }`}
                     key={col.property}
@@ -177,8 +179,8 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     <div
                       className={`group flex gap-1.5 px-1 items-center justify-between ${
                         selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                          ? "text-brand-base"
-                          : "text-brand-secondary hover:text-brand-base"
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
                       }`}
                     >
                       <div className="flex gap-2 items-center">
@@ -249,7 +251,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                       <CustomMenu.MenuItem
                         className={`mt-0.5${
                           selectedMenuItem === `-created_at_${col.propertyName}`
-                            ? "bg-brand-surface-2"
+                            ? "bg-custom-background-80"
                             : ""
                         }`}
                         key={col.property}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index 5b8ee0077..ad78ae938 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -61,12 +61,12 @@ export const SpreadsheetView: React.FC<Props> = ({
     .join(" ");
 
   return (
-    <div className="h-full rounded-lg text-brand-secondary overflow-x-auto whitespace-nowrap bg-brand-base">
-      <div className="sticky z-[2] top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
+    <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+      <div className="sticky z-[2] top-0 border-b border-custom-border-100 bg-custom-background-90 w-full min-w-max">
         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
       </div>
       {spreadsheetIssues ? (
-        <div className="flex flex-col h-full w-full bg-brand-base rounded-sm ">
+        <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
           {spreadsheetIssues.map((issue: IIssue, index) => (
             <SpreadsheetIssues
               key={`${issue.id}_${index}`}
@@ -84,12 +84,12 @@ export const SpreadsheetView: React.FC<Props> = ({
             />
           ))}
           <div
-            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
+            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max"
             style={{ gridTemplateColumns }}
           >
             {type === "issue" ? (
               <button
-                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "c" });
                   document.dispatchEvent(e);
@@ -104,7 +104,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                   className="sticky left-0 z-[1]"
                   customButton={
                     <button
-                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full"
                       type="button"
                     >
                       <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/theme/color-picker-input.tsx
similarity index 80%
rename from apps/app/components/core/color-picker-input.tsx
rename to apps/app/components/core/theme/color-picker-input.tsx
index 28b6c4e2c..1b740ca27 100644
--- a/apps/app/components/core/color-picker-input.tsx
+++ b/apps/app/components/core/theme/color-picker-input.tsx
@@ -16,9 +16,11 @@ import { Popover, Transition } from "@headlessui/react";
 import { Input } from "components/ui";
 // icons
 import { ColorPickerIcon } from "components/icons";
+// types
+import { ICustomTheme } from "types";
 
 type Props = {
-  name: string;
+  name: keyof ICustomTheme;
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
   error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
@@ -31,31 +33,25 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
     setValue(name, hex);
   };
 
-  const getColorText = (colorName: string) => {
+  const getColorText = (colorName: keyof ICustomTheme) => {
     switch (colorName) {
-      case "accent":
-        return "Accent";
-      case "bgBase":
+      case "background":
         return "Background";
-      case "bgSurface1":
-        return "Background surface 1";
-      case "bgSurface2":
-        return "Background surface 2";
-      case "border":
-        return "Border";
-      case "sidebar":
-        return "Sidebar";
-      case "textBase":
-        return "Text primary";
-      case "textSecondary":
-        return "Text secondary";
+      case "text":
+        return "Text";
+      case "primary":
+        return "Primary(Theme)";
+      case "sidebarBackground":
+        return "Sidebar Background";
+      case "sidebarText":
+        return "Sidebar Text";
       default:
         return "Color";
     }
   };
 
   return (
-    <div className="relative ">
+    <div className="relative">
       <Input
         id={name}
         name={name}
@@ -80,12 +76,12 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
               <Popover.Button
                 type="button"
                 className={`group inline-flex items-center outline-none ${
-                  open ? "text-brand-base" : "text-brand-secondary"
+                  open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-brand-base"
+                    className="h-4 w-4 rounded border border-custom-border-100"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}
@@ -94,7 +90,7 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
                   <ColorPickerIcon
                     height={14}
                     width={14}
-                    className="fill-current text-brand-base"
+                    className="fill-current text-custom-text-100"
                   />
                 )}
               </Popover.Button>
diff --git a/apps/app/components/core/theme/custom-theme-selector.tsx b/apps/app/components/core/theme/custom-theme-selector.tsx
new file mode 100644
index 000000000..4ee904b11
--- /dev/null
+++ b/apps/app/components/core/theme/custom-theme-selector.tsx
@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from "react";
+
+import { useTheme } from "next-themes";
+
+import { useForm } from "react-hook-form";
+
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { PrimaryButton } from "components/ui";
+import { ColorPickerInput } from "components/core";
+// services
+import userService from "services/user.service";
+// helper
+import { applyTheme } from "helpers/theme.helper";
+// types
+import { ICustomTheme } from "types";
+
+type Props = {
+  preLoadedData?: Partial<ICustomTheme> | null;
+};
+
+const defaultValues: ICustomTheme = {
+  background: "#fff7f7",
+  text: "#ffc9c9",
+  primary: "#fe5050",
+  sidebarBackground: "#ffffff",
+  sidebarText: "#000000",
+  darkPalette: false,
+  palette: "",
+};
+
+export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
+  const [darkPalette, setDarkPalette] = useState(false);
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+  } = useForm<ICustomTheme>({
+    defaultValues,
+  });
+
+  const { setTheme } = useTheme();
+  const { mutateUser } = useUser();
+
+  const handleFormSubmit = async (formData: ICustomTheme) => {
+    const payload: ICustomTheme = {
+      background: formData.background,
+      text: formData.text,
+      primary: formData.primary,
+      sidebarBackground: formData.sidebarBackground,
+      sidebarText: formData.sidebarText,
+      darkPalette: darkPalette,
+      palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
+    };
+
+    await userService
+      .updateUser({
+        theme: payload,
+      })
+      .then((res) => {
+        mutateUser((prevData) => {
+          if (!prevData) return prevData;
+
+          return { ...prevData, ...res };
+        }, false);
+
+        applyTheme(payload.palette, darkPalette);
+        setTheme("custom");
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const handleUpdateTheme = async (formData: any) => {
+    await handleFormSubmit({ ...formData, darkPalette });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+    });
+  }, [preLoadedData, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
+                Background color
+              </h3>
+              <ColorPickerInput
+                name="background"
+                error={errors.background}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
+              <ColorPickerInput
+                name="text"
+                error={errors.text}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
+                Primary(Theme) color
+              </h3>
+              <ColorPickerInput
+                name="primary"
+                error={errors.primary}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
+                Sidebar background color
+              </h3>
+              <ColorPickerInput
+                name="sidebarBackground"
+                error={errors.sidebarBackground}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
+                Sidebar text color
+              </h3>
+              <ColorPickerInput
+                name="sidebarText"
+                error={errors.sidebarText}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {isSubmitting ? "Creating Theme..." : "Set Theme"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/core/theme/index.ts b/apps/app/components/core/theme/index.ts
new file mode 100644
index 000000000..145b3862a
--- /dev/null
+++ b/apps/app/components/core/theme/index.ts
@@ -0,0 +1,3 @@
+export * from "./color-picker-input";
+export * from "./custom-theme-selector";
+export * from "./theme-switch";
diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme/theme-switch.tsx
similarity index 87%
rename from apps/app/components/core/theme-switch.tsx
rename to apps/app/components/core/theme/theme-switch.tsx
index e38375c2e..1d67c8ef5 100644
--- a/apps/app/components/core/theme-switch.tsx
+++ b/apps/app/components/core/theme/theme-switch.tsx
@@ -6,8 +6,6 @@ import { useTheme } from "next-themes";
 import { THEMES_OBJ } from "constants/themes";
 // ui
 import { CustomSelect } from "components/ui";
-// helper
-import { applyTheme } from "helpers/theme.helper";
 // types
 import { ICustomTheme, IUser } from "types";
 
@@ -79,19 +77,14 @@ export const ThemeSwitch: React.FC<Props> = ({
             if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
           } else {
             if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
-            const cssVars = [
-              "--color-bg-base",
-              "--color-bg-surface-1",
-              "--color-bg-surface-2",
 
-              "--color-border",
-              "--color-bg-sidebar",
-              "--color-accent",
-
-              "--color-text-base",
-              "--color-text-secondary",
-            ];
-            cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
+            for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
+              document.documentElement.style.removeProperty(`--color-background-${i}`);
+              document.documentElement.style.removeProperty(`--color-text-${i}`);
+              document.documentElement.style.removeProperty(`--color-primary-${i}`);
+              document.documentElement.style.removeProperty(`--color-sidebar-background-${i}`);
+              document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`);
+            }
           }
           setTheme(value);
           document.documentElement.style.setProperty("color-scheme", type);
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index e7a1990e9..b97d7c9c6 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -110,8 +110,8 @@ export const ActiveCycleDetails: React.FC = () => {
 
   if (!cycle)
     return (
-      <div className="flex w-full items-center justify-start rounded-[10px] bg-brand-surface-2 px-6 py-4">
-        <h3 className="text-base font-medium text-brand-base ">No active cycle is present.</h3>
+      <div className="flex w-full items-center justify-start rounded-[10px] bg-custom-background-80 px-6 py-4">
+        <h3 className="text-base font-medium text-custom-text-100 ">No active cycle is present.</h3>
       </div>
     );
 
@@ -209,8 +209,8 @@ export const ActiveCycleDetails: React.FC = () => {
   }));
 
   return (
-    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-brand-base border border-brand-base">
-      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-3">
+    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-100">
+      <div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="flex flex-col text-xs">
           <div className="h-full w-full">
             <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
@@ -227,7 +227,7 @@ export const ActiveCycleDetails: React.FC = () => {
                           : cycleStatus === "completed"
                           ? "#3F76FF"
                           : cycleStatus === "draft"
-                          ? "#858E96"
+                          ? "rgb(var(--color-text-200))"
                           : ""
                       }`}
                     />
@@ -300,18 +300,18 @@ export const ActiveCycleDetails: React.FC = () => {
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
               </div>
 
-              <div className="flex items-center justify-start gap-5 text-brand-secondary">
+              <div className="flex items-center justify-start gap-5 text-custom-text-200">
                 <div className="flex items-start gap-1">
                   <CalendarDaysIcon className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(startDate)}</span>
                 </div>
-                <ArrowRightIcon className="h-4 w-4 text-brand-secondary" />
+                <ArrowRightIcon className="h-4 w-4 text-custom-text-200" />
                 <div className="flex items-start gap-1">
                   <TargetIcon className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(endDate)}</span>
@@ -319,7 +319,7 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
 
               <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2.5 text-brand-secondary">
+                <div className="flex items-center gap-2.5 text-custom-text-200">
                   {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                     <img
                       src={cycle.owned_by.avatar}
@@ -329,21 +329,21 @@ export const ActiveCycleDetails: React.FC = () => {
                       alt={cycle.owned_by.first_name}
                     />
                   ) : (
-                    <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-brand-base  capitalize">
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
                       {cycle.owned_by.first_name.charAt(0)}
                     </span>
                   )}
-                  <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                  <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                 </div>
 
                 {cycle.assignees.length > 0 && (
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <AssigneesList users={cycle.assignees} length={4} />
                   </div>
                 )}
               </div>
 
-              <div className="flex items-center gap-4 text-brand-secondary">
+              <div className="flex items-center gap-4 text-custom-text-200">
                 <div className="flex gap-2">
                   <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
                   {cycle.total_issues} issues
@@ -355,16 +355,16 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
 
               <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-                <a className="bg-brand-accent text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-brand-accent/90">
+                <a className="bg-custom-primary text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-custom-primary/90">
                   View Cycle
                 </a>
               </Link>
             </div>
           </div>
         </div>
-        <div className="grid col-span-2 grid-cols-1 divide-y border-brand-base md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-60 flex-col border-brand-base">
-            <div className="flex h-full w-full flex-col text-brand-secondary p-4">
+        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-100 md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-60 flex-col border-custom-border-100">
+            <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
                 <LinearProgressIndicator data={progressIndicatorData} />
@@ -391,22 +391,22 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="border-brand-base h-60 overflow-y-scroll">
+          <div className="border-custom-border-100 h-60 overflow-y-scroll">
             <ActiveCycleProgressStats cycle={cycle} />
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-2">
+      <div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
         <div className="flex flex-col justify-between p-4">
           <div>
-            <div className="text-brand-primary">High Priority Issues</div>
+            <div className="text-custom-primary">High Priority Issues</div>
             <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
               {issues ? (
                 issues.length > 0 ? (
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-brand-base bg-brand-surface-1 px-3 py-1.5"
+                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-100 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
                         <div>
@@ -414,7 +414,7 @@ export const ActiveCycleDetails: React.FC = () => {
                             tooltipHeading="Issue ID"
                             tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                           >
-                            <span className="flex-shrink-0 text-xs text-brand-secondary">
+                            <span className="flex-shrink-0 text-xs text-custom-text-200">
                               {issue.project_detail?.identifier}-{issue.sequence_id}
                             </span>
                           </Tooltip>
@@ -424,7 +424,7 @@ export const ActiveCycleDetails: React.FC = () => {
                           tooltipHeading="Title"
                           tooltipContent={issue.name}
                         >
-                          <span className="text-[0.825rem] text-brand-base">
+                          <span className="text-[0.825rem] text-custom-text-100">
                             {truncateText(issue.name, 30)}
                           </span>
                         </Tooltip>
@@ -444,7 +444,7 @@ export const ActiveCycleDetails: React.FC = () => {
                             {issue.label_details.map((label) => (
                               <span
                                 key={label.id}
-                                className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200"
                               >
                                 <span
                                   className="h-1.5 w-1.5  rounded-full"
@@ -460,7 +460,7 @@ export const ActiveCycleDetails: React.FC = () => {
                         ) : (
                           ""
                         )}
-                        <div className={`flex items-center gap-2 text-brand-secondary`}>
+                        <div className={`flex items-center gap-2 text-custom-text-200`}>
                           {issue.assignees &&
                           issue.assignees.length > 0 &&
                           Array.isArray(issue.assignees) ? (
@@ -479,7 +479,7 @@ export const ActiveCycleDetails: React.FC = () => {
                     </div>
                   ))
                 ) : (
-                  <div className="grid place-items-center text-brand-secondary text-sm text-center">
+                  <div className="grid place-items-center text-custom-text-200 text-sm text-center">
                     No issues present in the cycle.
                   </div>
                 )
@@ -495,7 +495,7 @@ export const ActiveCycleDetails: React.FC = () => {
 
           {issues && issues.length > 0 && (
             <div className="flex items-center justify-between gap-2">
-              <div className="h-1 w-full rounded-full bg-brand-surface-2">
+              <div className="h-1 w-full rounded-full bg-custom-background-80">
                 <div
                   className="h-1 rounded-full bg-green-600"
                   style={{
@@ -510,16 +510,16 @@ export const ActiveCycleDetails: React.FC = () => {
                   }}
                 />
               </div>
-              <div className="w-16 text-end text-xs text-brand-secondary">
+              <div className="w-16 text-end text-xs text-custom-text-200">
                 {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "}
                 {issues?.length}
               </div>
             </div>
           )}
         </div>
-        <div className="flex flex-col justify-between border-brand-base p-4">
+        <div className="flex flex-col justify-between border-custom-border-100 p-4">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
-            <div className="flex items-center gap-3 text-brand-base">
+            <div className="flex items-center gap-3 text-custom-text-100">
               <div className="flex items-center justify-center gap-1">
                 <span className="h-2.5 w-2.5 rounded-full bg-[#a9bbd0]" />
                 <span>Ideal</span>
@@ -531,7 +531,7 @@ export const ActiveCycleDetails: React.FC = () => {
             </div>
             <div className="flex items-center gap-1">
               <span>
-                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-brand-secondary" />
+                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
               </span>
               <span>
                 Pending Issues -{" "}
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
index 30b69ffaf..09a692b39 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -48,12 +48,12 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
     >
       <Tab.List
         as="div"
-        className="flex sticky top-0 z-10 bg-brand-base w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
+        className="flex sticky top-0 z-10 bg-custom-background-100 w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
       >
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -61,8 +61,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -73,7 +73,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         <Tab.Panels as={Fragment}>
           <Tab.Panel
             as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-brand-secondary p-4"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
           >
             {cycle.distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)
@@ -103,7 +103,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-brand-base bg-brand-surface-2">
+                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80">
                           <img
                             src="/user.png"
                             height="100%"
@@ -123,7 +123,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           </Tab.Panel>
           <Tab.Panel
             as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-brand-secondary p-4"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
           >
             {cycle.distribution.labels.map((label, index) => (
               <SingleProgressStats
@@ -146,7 +146,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           </Tab.Panel>
         </Tab.Panels>
       ) : (
-        <div className="grid place-items-center text-brand-secondary text-sm text-center mt-4">
+        <div className="grid place-items-center text-custom-text-200 text-sm text-center mt-4">
           No issues present in the cycle.
         </div>
       )}
diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 056872c33..ddb9a5b13 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -24,7 +24,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -34,7 +34,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
       <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
         <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 261e81018..bcf3281ce 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -19,8 +19,10 @@ import {
 } from "components/cycles";
 // ui
 import { EmptyState, Loader } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyCycle from "public/empty-state/empty-cycle.svg";
+import emptyCycle from "public/empty-state/cycle.svg";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
@@ -171,10 +173,10 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
       {cycles ? (
         cycles.length > 0 ? (
           viewType === "list" ? (
-            <div className="divide-y divide-brand-base">
+            <div className="divide-y divide-custom-border-100">
               {cycles.map((cycle) => (
-                <div className="hover:bg-brand-surface-2">
-                  <div className="flex flex-col border-brand-base">
+                <div className="hover:bg-custom-background-80">
+                  <div className="flex flex-col border-custom-border-100">
                     <SingleCycleList
                       key={cycle.id}
                       cycle={cycle}
@@ -205,10 +207,17 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
           )
         ) : (
           <EmptyState
-            type="cycle"
-            title="Create New Cycle"
-            description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-            imgURL={emptyCycle}
+            title="Plan your project with cycles"
+            description="Cycle is a custom time period in which a team works to complete items on their backlog."
+            image={emptyCycle}
+            buttonText="New Cycle"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "q",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : viewType === "list" ? (
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index d60e3ddce..4d9a59b41 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -110,7 +110,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -124,7 +124,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
               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 border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -136,14 +136,14 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the cycle will be permanently removed. This
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 5c0b2e080..8ff2b20d0 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -51,7 +51,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} Cycle
         </h3>
         <div className="space-y-3">
@@ -107,7 +107,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting}>
           {status
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 42ecad448..f484365e2 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 3c1c16506..3af8b1cec 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -234,7 +234,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -247,7 +247,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               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 rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index 2fdda69b5..70aad5b88 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@@ -66,9 +66,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`flex cursor-pointer items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+              className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <CyclesIcon className="h-3 w-3 text-brand-secondary" />
+              <CyclesIcon className="h-3 w-3 text-custom-text-200" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>
@@ -82,7 +82,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
               leaveTo="opacity-0"
             >
               <Listbox.Options
-                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-brand-surface-2 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-custom-background-80 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
               >
                 <div className="py-1">
                   {options ? (
@@ -100,7 +100,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                                 : ""
                             } ${
                               active ? "bg-indigo-50" : ""
-                            } relative cursor-pointer select-none p-2 text-brand-base`
+                            } relative cursor-pointer select-none p-2 text-custom-text-100`
                           }
                           value={option.value}
                         >
@@ -110,14 +110,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                         </Listbox.Option>
                       ))
                     ) : (
-                      <p className="text-center text-sm text-brand-secondary">No options</p>
+                      <p className="text-center text-sm text-custom-text-200">No options</p>
                     )
                   ) : (
-                    <p className="text-center text-sm text-brand-secondary">Loading...</p>
+                    <p className="text-center text-sm text-custom-text-200">Loading...</p>
                   )}
                   <button
                     type="button"
-                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
+                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
                     onClick={openCycleModal}
                   >
                     <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 2080d7f6b..6c9cce134 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -292,14 +292,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {cycle ? (
           <>
             <div className="flex flex-col items-start justify-center">
               <div className="flex gap-2.5 px-5 text-sm">
                 <div className="flex items-center">
-                  <span className="flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
+                  <span className="flex items-center rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                     {capitalizeFirstLetter(cycleStatus)}
                   </span>
                 </div>
@@ -309,8 +309,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            cycle.start_date ? "" : "text-brand-secondary"
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycle.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -352,15 +352,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            cycle.end_date ? "" : "text-brand-secondary"
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycle.end_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -409,7 +409,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold text-brand-base break-words w-full">
+                      <h4 className="text-xl font-semibold text-custom-text-100 break-words w-full">
                         {cycle.name}
                       </h4>
                     </div>
@@ -431,14 +431,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
+                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
                     {cycle.description}
                   </span>
                 </div>
 
                 <div className="flex flex-col  gap-4  text-sm">
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <UserCircleIcon className="h-5 w-5" />
                       <span>Lead</span>
                     </div>
@@ -457,17 +457,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                      <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
                         <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
                       </span>
@@ -477,7 +477,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -485,7 +485,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Progress</span>
+                        <span className="font-medium text-custom-text-200">Progress</span>
                         {!open && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -506,9 +506,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             {cycleStatus === "upcoming"
                               ? "Cycle is yet to start."
                               : "Invalid date. Please enter valid date."}
@@ -523,7 +523,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
+                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -532,7 +532,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-brand-base">
+                              <div className="flex items-center gap-3 text-custom-text-100">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -561,7 +561,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 )}
               </Disclosure>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -569,7 +569,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   >
                     <div className="flex w-full items-center justify-between gap-2">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Other Information</span>
+                        <span className="font-medium text-custom-text-200">Other Information</span>
                       </div>
 
                       {cycle.total_issues > 0 ? (
@@ -584,9 +584,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
                         </div>
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index c00429a43..b5ae3f28d 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -128,7 +128,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col rounded-[10px] bg-brand-base border border-brand-base text-xs shadow">
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-100 text-xs shadow">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
@@ -145,7 +145,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                           : cycleStatus === "completed"
                           ? "#3F76FF"
                           : cycleStatus === "draft"
-                          ? "#858E96"
+                          ? "rgb(var(--color-text-200))"
                           : ""
                       }`}
                     />
@@ -218,12 +218,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
               </div>
-              <div className="flex h-4 items-center justify-start gap-5 text-brand-secondary">
+              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
                 {cycleStatus !== "draft" && (
                   <>
                     <div className="flex items-start gap-1">
@@ -240,10 +240,10 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
               </div>
 
               <div className="flex justify-between items-end">
-                <div className="flex flex-col gap-2 text-xs text-brand-secondary">
+                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
                   <div className="flex items-center gap-2">
                     <div className="w-16">Creator:</div>
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                         <img
                           src={cycle.owned_by.avatar}
@@ -253,17 +253,17 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                           alt={cycle.owned_by.first_name}
                         />
                       ) : (
-                        <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                      <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
                   <div className="flex h-5 items-center gap-2">
                     <div className="w-16">Members:</div>
                     {cycle.assignees.length > 0 ? (
-                      <div className="flex items-center gap-1 text-brand-secondary">
+                      <div className="flex items-center gap-1 text-custom-text-200">
                         <AssigneesList users={cycle.assignees} length={4} />
                       </div>
                     ) : (
@@ -279,11 +279,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         e.preventDefault();
                         handleEditCycle();
                       }}
-                      className="flex cursor-pointer items-center rounded p-1 text-brand-secondary duration-300 hover:bg-brand-surface-1"
+                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
                     >
-                      <span>
-                        <PencilIcon className="h-4 w-4" />
-                      </span>
+                      <PencilIcon className="h-4 w-4" />
                     </button>
                   )}
 
@@ -323,7 +321,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
           <Disclosure>
             {({ open }) => (
               <div
-                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-brand-base bg-brand-surface-2 text-brand-secondary ${
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-100 bg-custom-background-80 text-custom-text-200 ${
                   open ? "" : "flex-row"
                 }`}
               >
@@ -369,7 +367,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                 </div>
                 <Transition show={open}>
                   <Disclosure.Panel>
-                    <div className="overflow-hidden rounded-b-md bg-brand-surface-2 py-3 shadow">
+                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
                       <div className="col-span-2 space-y-3 px-4">
                         <div className="space-y-3 text-xs">
                           {stateGroups.map((group) => (
@@ -389,7 +387,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                               <div>
                                 <span>
                                   {cycle[group.key as keyof ICycle] as number}{" "}
-                                  <span className="text-brand-secondary">
+                                  <span className="text-custom-text-200">
                                     -{" "}
                                     {cycle.total_issues > 0
                                       ? `${Math.round(
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
index 423580383..32bd18539 100644
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 
 import Link from "next/link";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 // hooks
@@ -152,12 +151,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col text-xs hover:bg-brand-surface-2">
+      <div className="flex flex-col text-xs hover:bg-custom-background-80">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
               <div className="flex items-center justify-between gap-1">
-                <span className="flex items-start gap-2">
+                <div className="flex items-start gap-2">
                   <ContrastIcon
                     className="mt-1 h-5 w-5"
                     color={`${
@@ -168,7 +167,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         : cycleStatus === "completed"
                         ? "#3F76FF"
                         : cycleStatus === "draft"
-                        ? "#858E96"
+                        ? "rgb(var(--color-text-200))"
                         : ""
                     }`}
                   />
@@ -179,15 +178,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       position="top-left"
                     >
                       <h3 className="break-words w-full text-base font-semibold">
-                        {truncateText(cycle.name, 70)}
+                        {truncateText(cycle.name, 60)}
                       </h3>
                     </Tooltip>
-                    <p className="mt-2 text-brand-secondary break-words w-full">
+                    <p className="mt-2 text-custom-text-200 break-words w-full">
                       {cycle.description}
                     </p>
                   </div>
-                </span>
-                <span className="flex items-center gap-4 capitalize">
+                </div>
+                <div className="flex-shrink-0 flex items-center gap-4">
                   <span
                     className={`rounded-full px-1.5 py-0.5
                     ${
@@ -203,14 +202,14 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     }`}
                   >
                     {cycleStatus === "current" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <PersonRunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1">
                         <AlarmClockIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "completed" ? (
                       <span className="flex items-center gap-1">
@@ -235,20 +234,20 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                   </span>
 
                   {cycleStatus !== "draft" && (
-                    <div className="flex items-center justify-start gap-2 text-brand-secondary">
-                      <div className="flex items-start gap-1 ">
+                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
                         <CalendarDaysIcon className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(startDate)}</span>
                       </div>
                       <ArrowRightIcon className="h-4 w-4" />
-                      <div className="flex items-start gap-1 ">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
                         <TargetIcon className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(endDate)}</span>
                       </div>
                     </div>
                   )}
 
-                  <div className="flex items-center gap-2.5 text-brand-secondary">
+                  <div className="flex items-center gap-2.5 text-custom-text-200">
                     {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                       <img
                         src={cycle.owned_by.avatar}
@@ -258,7 +257,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         alt={cycle.owned_by.first_name}
                       />
                     ) : (
-                      <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
                         {cycle.owned_by.first_name.charAt(0)}
                       </span>
                     )}
@@ -287,7 +286,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     }`}
                     >
                       {cycleStatus === "current" ? (
-                        <span className="flex gap-1">
+                        <span className="flex gap-1 whitespace-nowrap">
                           {cycle.total_issues > 0 ? (
                             <>
                               <RadialProgressBar
@@ -336,7 +335,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   <div className="flex items-center">
@@ -380,7 +379,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       </CustomMenu.MenuItem>
                     </CustomMenu>
                   </div>
-                </span>
+                </div>
               </div>
             </div>
           </a>
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index 6eea69342..fe71d82a2 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -108,21 +108,21 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               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 rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-3">
                       <TransferIcon className="h-4 w-5" color="#495057" />
-                      <h4 className="text-xl font-medium text-brand-base">Transfer Issues</h4>
+                      <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 border-b border-brand-base px-5 pb-3">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
+                  <div className="flex items-center gap-2 border-b border-custom-border-100 px-5 pb-3">
+                    <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
                     <input
-                      className="bg-brand-surface-1 outline-none"
+                      className="bg-custom-background-90 outline-none"
                       placeholder="Search for a cycle..."
                       onChange={(e) => setQuery(e.target.value)}
                       value={query}
@@ -134,7 +134,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         filteredOptions.map((option: ICycle) => (
                           <button
                             key={option.id}
-                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-brand-secondary hover:bg-brand-surface-1"
+                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-custom-text-200 hover:bg-custom-background-90"
                             onClick={() => {
                               transferIssue({
                                 new_cycle_id: option?.id,
@@ -145,7 +145,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                             <ContrastIcon className="h-5 w-5" />
                             <div className="flex w-full justify-between">
                               <span>{option?.name}</span>
-                              <span className=" flex items-center rounded-full bg-brand-surface-2  px-2 capitalize">
+                              <span className=" flex items-center rounded-full bg-custom-background-80  px-2 capitalize">
                                 {getDateRangeStatus(option?.start_date, option?.end_date)}
                               </span>
                             </div>
@@ -156,16 +156,16 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-center text-brand-secondary">
+                          <span className="text-center text-custom-text-200">
                             You don’t have any current cycle. Please create one to transfer the
                             issues.
                           </span>
                         </div>
                       )
                     ) : (
-                      <p className="text-center text-brand-secondary">Loading...</p>
+                      <p className="text-center text-custom-text-200">Loading...</p>
                     )}
                   </div>
                 </div>
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
index 5febdffcc..a49c7665f 100644
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ b/apps/app/components/cycles/transfer-issues.tsx
@@ -38,8 +38,8 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     : 0;
   return (
     <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
-      <div className="flex items-center gap-2 text-sm text-brand-secondary">
-        <ExclamationIcon height={14} width={14} className="fill-current text-brand-secondary" />
+      <div className="flex items-center gap-2 text-sm text-custom-text-200">
+        <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
         <span>Completed cycles are not editable.</span>
       </div>
 
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index fecba1c15..ff9a40d40 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -30,7 +30,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
 
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
-  const [activeColor, setActiveColor] = useState<string>("#858e96");
+  const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
@@ -49,7 +49,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
   return (
     <Popover className="relative z-[1]" ref={ref}>
       <Popover.Button
-        className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
+        className="rounded-full bg-custom-background-90 p-2 outline-none sm:text-sm"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -63,8 +63,8 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-brand-base bg-brand-surface-2 shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-brand-base bg-brand-surface-2 p-2 shadow-xl">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-100 bg-custom-background-80 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-100 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
@@ -76,7 +76,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                           setOpenColorPicker(false);
                         }}
                         className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
-                          selected ? "" : "border-transparent text-brand-secondary"
+                          selected ? "" : "border-transparent text-custom-text-200"
                         }`}
                       >
                         {tab.title}
@@ -89,7 +89,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                 <Tab.Panel>
                   {recentEmojis.length > 0 && (
                     <div className="py-2">
-                      <h3 className="mb-2 text-xs text-brand-secondary">Recent</h3>
+                      <h3 className="mb-2 text-xs text-custom-text-200">Recent</h3>
                       <div className="grid grid-cols-8 gap-2">
                         {recentEmojis.map((emoji) => (
                           <button
@@ -107,7 +107,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                       </div>
                     </div>
                   )}
-                  <hr className="mb-2 h-[1px] w-full border-brand-base" />
+                  <hr className="mb-2 h-[1px] w-full border-custom-border-100" />
                   <div>
                     <div className="grid grid-cols-8 gap-x-2 gap-y-3">
                       {emojis.map((emoji) => (
@@ -173,7 +173,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                         />
                       </div>
                     </div>
-                    <hr className="mb-1 h-[1px] w-full border-brand-base" />
+                    <hr className="mb-1 h-[1px] w-full border-custom-border-100" />
                     <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
                       {icons.material_rounded.map((icon, index) => (
                         <button
diff --git a/apps/app/components/estimates/create-update-estimate-modal.tsx b/apps/app/components/estimates/create-update-estimate-modal.tsx
index 68cbcaaaf..e9caeeee3 100644
--- a/apps/app/components/estimates/create-update-estimate-modal.tsx
+++ b/apps/app/components/estimates/create-update-estimate-modal.tsx
@@ -240,7 +240,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -254,7 +254,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ 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 rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                   <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="space-y-3">
                       <div className="text-lg font-medium leading-6">
@@ -282,9 +282,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                       </div>
                       <div className="grid grid-cols-3 gap-3">
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">1</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value1"
@@ -298,9 +298,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">2</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value2"
@@ -314,9 +314,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">3</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value3"
@@ -330,9 +330,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">4</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value4"
@@ -346,9 +346,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">5</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value5"
@@ -362,9 +362,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">6</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value6"
diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
index 5a4f9ccfa..52cc42417 100644
--- a/apps/app/components/estimates/delete-estimate-modal.tsx
+++ b/apps/app/components/estimates/delete-estimate-modal.tsx
@@ -46,7 +46,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -60,7 +60,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -74,9 +74,11 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="break-words text-sm leading-7 text-brand-secondary">
+                    <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-brand-base">{data.name}</span>
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data.name}
+                      </span>
                       {""}? All of the data related to the estiamte will be permanently removed.
                       This action cannot be undone.
                     </p>
diff --git a/apps/app/components/estimates/single-estimate.tsx b/apps/app/components/estimates/single-estimate.tsx
index 5e331c139..17c111559 100644
--- a/apps/app/components/estimates/single-estimate.tsx
+++ b/apps/app/components/estimates/single-estimate.tsx
@@ -72,18 +72,21 @@ export const SingleEstimate: React.FC<Props> = ({
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
               {estimate.name}
               {projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
-                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
                   In use
                 </span>
               )}
             </h6>
-            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-brand-secondary">
+            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
               {estimate.description}
             </p>
           </div>
           <div className="flex items-center gap-2">
             {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <SecondaryButton onClick={handleUseEstimate} className="py-1">
+              <SecondaryButton
+                onClick={handleUseEstimate}
+                className="!py-1 text-custom-text-200 hover:text-custom-text-100"
+              >
                 Use
               </SecondaryButton>
             )}
@@ -114,11 +117,11 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         </div>
         {estimate.points.length > 0 ? (
-          <div className="flex text-xs text-brand-secondary">
+          <div className="flex text-xs text-custom-text-200">
             Estimate points (
             <span className="flex gap-1">
               {orderArrayBy(estimate.points, "key").map((point, index) => (
-                <h6 key={point.id} className="text-brand-secondary">
+                <h6 key={point.id} className="text-custom-text-200">
                   {point.value}
                   {index !== estimate.points.length - 1 && ","}{" "}
                 </h6>
@@ -128,7 +131,7 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         ) : (
           <div>
-            <p className="text-xs text-brand-secondary">No estimate points</p>
+            <p className="text-xs text-custom-text-200">No estimate points</p>
           </div>
         )}
       </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 31e7839cc..7e3f9972d 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -38,13 +38,13 @@ export const GanttChartBlocks: FC<{
                     style={{ marginLeft: `${block?.position?.marginLeft}px` }}
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
-                      <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                      <div className="absolute right-0 mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
                         {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
                     <div
-                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-100"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
@@ -56,7 +56,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
-                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
                         {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
@@ -68,11 +68,11 @@ export const GanttChartBlocks: FC<{
       </div>
 
       {/* sidebar */}
-      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-brand-base border-r border-brand-base overflow-y-auto">
+      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-100 border-r border-custom-border-100 overflow-y-auto">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-custom-background-100" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/bi-week.tsx b/apps/app/components/gantt-chart/chart/bi-week.tsx
index 489bc3eb6..8c46eaf6b 100644
--- a/apps/app/components/gantt-chart/chart/bi-week.tsx
+++ b/apps/app/components/gantt-chart/chart/bi-week.tsx
@@ -7,18 +7,18 @@ export const BiWeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const BiWeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const BiWeekChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-custom-background-80`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/day.tsx b/apps/app/components/gantt-chart/chart/day.tsx
index 1ad1649b6..f8b3458cb 100644
--- a/apps/app/components/gantt-chart/chart/day.tsx
+++ b/apps/app/components/gantt-chart/chart/day.tsx
@@ -7,18 +7,18 @@ export const DayChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const DayChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/hours.tsx b/apps/app/components/gantt-chart/chart/hours.tsx
index 02b2d15b1..2ee097664 100644
--- a/apps/app/components/gantt-chart/chart/hours.tsx
+++ b/apps/app/components/gantt-chart/chart/hours.tsx
@@ -7,18 +7,18 @@ export const HourChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const HourChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 72d6888e2..5731abc2f 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -215,17 +215,19 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   return (
     <div
       className={`${
-        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
+        fullScreenMode
+          ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
+          : `relative`
       } ${
-        border ? `border border-brand-base` : ``
-      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
+        border ? `border border-custom-border-100` : ``
+      } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
     >
       {/* chart title */}
-      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-100">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
             </div>
           </div>
@@ -242,7 +244,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
         {/* <div
-          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
         >
           {blocksSidebarView ? (
@@ -255,7 +257,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
             </div>
           </div>
@@ -277,8 +279,10 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
-                  currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
+                className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs ${
+                  currentView === _chatView?.key
+                    ? `bg-custom-background-80`
+                    : `hover:bg-custom-background-90`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
               >
@@ -289,7 +293,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs hover:bg-custom-background-80`}
             onClick={handleToday}
           >
             Today
@@ -297,7 +301,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         </div>
 
         <div
-          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setFullScreenMode(() => !fullScreenMode)}
         >
           {fullScreenMode ? (
@@ -309,7 +313,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-brand-base">
+      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-100">
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
           id="scroll-container"
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 197ac9930..7941de48c 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -7,18 +7,18 @@ export const MonthChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const MonthChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-1`
+                            ? `bg-custom-background-90`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/quarter.tsx b/apps/app/components/gantt-chart/chart/quarter.tsx
index 57f6f4f5e..159eeaa63 100644
--- a/apps/app/components/gantt-chart/chart/quarter.tsx
+++ b/apps/app/components/gantt-chart/chart/quarter.tsx
@@ -7,18 +7,18 @@ export const QuarterChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const QuarterChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/week.tsx b/apps/app/components/gantt-chart/chart/week.tsx
index 695fa2aa5..da87ff811 100644
--- a/apps/app/components/gantt-chart/chart/week.tsx
+++ b/apps/app/components/gantt-chart/chart/week.tsx
@@ -7,18 +7,18 @@ export const WeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const WeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const WeekChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-custom-background-80`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/year.tsx b/apps/app/components/gantt-chart/chart/year.tsx
index d06f0e025..ec4578ca4 100644
--- a/apps/app/components/gantt-chart/chart/year.tsx
+++ b/apps/app/components/gantt-chart/chart/year.tsx
@@ -7,18 +7,18 @@ export const YearChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-100">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-100">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const YearChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/icons/alarm-clock-icon.tsx b/apps/app/components/icons/alarm-clock-icon.tsx
index 598d2733c..83180496a 100644
--- a/apps/app/components/icons/alarm-clock-icon.tsx
+++ b/apps/app/components/icons/alarm-clock-icon.tsx
@@ -3,7 +3,7 @@ import type { Props } from "./types";
 export const AlarmClockIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/arrow-right.tsx b/apps/app/components/icons/arrow-right.tsx
index a157e5820..df8d8d86c 100644
--- a/apps/app/components/icons/arrow-right.tsx
+++ b/apps/app/components/icons/arrow-right.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ArrowRightIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/assignment-clipboard-icon.tsx b/apps/app/components/icons/assignment-clipboard-icon.tsx
index 5045f048d..777397981 100644
--- a/apps/app/components/icons/assignment-clipboard-icon.tsx
+++ b/apps/app/components/icons/assignment-clipboard-icon.tsx
@@ -5,8 +5,8 @@ import type { Props } from "./types";
 export const AssignmentClipboardIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
-  className
+  color = "rgb(var(--color-text-200))",
+  className,
 }) => (
   <svg
     width={width}
@@ -16,6 +16,9 @@ export const AssignmentClipboardIcon: React.FC<Props> = ({
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path fill={color} d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z" />
+    <path
+      fill={color}
+      d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z"
+    />
   </svg>
 );
diff --git a/apps/app/components/icons/backlog-state-icon.tsx b/apps/app/components/icons/backlog-state-icon.tsx
index 48ae09524..2c140a112 100644
--- a/apps/app/components/icons/backlog-state-icon.tsx
+++ b/apps/app/components/icons/backlog-state-icon.tsx
@@ -6,7 +6,7 @@ export const BacklogStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/calendar-after-icon.tsx b/apps/app/components/icons/calendar-after-icon.tsx
index 278e500f0..5acfbb083 100644
--- a/apps/app/components/icons/calendar-after-icon.tsx
+++ b/apps/app/components/icons/calendar-after-icon.tsx
@@ -14,7 +14,7 @@ export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24"
     <g clipPath="url(#clip0_3309_70901)">
       <path
         d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-        fill="#858E96"
+        fill="rgb(var(--color-text-200))"
       />
     </g>
     <defs>
@@ -23,4 +23,4 @@ export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24"
       </clipPath>
     </defs>
   </svg>
-);
\ No newline at end of file
+);
diff --git a/apps/app/components/icons/calendar-before-icon.tsx b/apps/app/components/icons/calendar-before-icon.tsx
index f2651c084..abcbfb3e9 100644
--- a/apps/app/components/icons/calendar-before-icon.tsx
+++ b/apps/app/components/icons/calendar-before-icon.tsx
@@ -14,13 +14,13 @@ export const CalendarBeforeIcon: React.FC<Props> = ({ width = "24", height = "24
     <g clipPath="url(#clip0_3309_70907)">
       <path
         d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-        fill="#858E96"
+        fill="rgb(var(--color-text-200))"
       />
       <g clipPath="url(#clip1_3309_70907)">
         <path
           d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-          fill="#858E96"
-          stroke="#858E96"
+          fill="rgb(var(--color-text-200))"
+          stroke="rgb(var(--color-text-200))"
           strokeWidth="0.5"
         />
       </g>
diff --git a/apps/app/components/icons/calendar-month-icon.tsx b/apps/app/components/icons/calendar-month-icon.tsx
index dbfc43c50..cf541d4dc 100644
--- a/apps/app/components/icons/calendar-month-icon.tsx
+++ b/apps/app/components/icons/calendar-month-icon.tsx
@@ -13,7 +13,7 @@ export const CalendarMonthIcon: React.FC<Props> = ({ width = "24", height = "24"
   >
     <path
       d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z"
-      fill="#858E96"
+      fill="rgb(var(--color-text-200))"
     />
   </svg>
 );
diff --git a/apps/app/components/icons/check.tsx b/apps/app/components/icons/check.tsx
index 6ab04cd43..e62e4e46a 100644
--- a/apps/app/components/icons/check.tsx
+++ b/apps/app/components/icons/check.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CheckIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cloud-upload.tsx b/apps/app/components/icons/cloud-upload.tsx
index 585ed4a4a..f01674d38 100644
--- a/apps/app/components/icons/cloud-upload.tsx
+++ b/apps/app/components/icons/cloud-upload.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CloudUploadIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cog.tsx b/apps/app/components/icons/cog.tsx
index b0167fdd0..490426ccd 100644
--- a/apps/app/components/icons/cog.tsx
+++ b/apps/app/components/icons/cog.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CogIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/color-pallette-icon.tsx b/apps/app/components/icons/color-pallette-icon.tsx
index 23f0e41d3..5d7b73ebf 100644
--- a/apps/app/components/icons/color-pallette-icon.tsx
+++ b/apps/app/components/icons/color-pallette-icon.tsx
@@ -6,7 +6,7 @@ export const ColorPalletteIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/command-icon.tsx b/apps/app/components/icons/command-icon.tsx
index 5b3121f98..d6465b789 100644
--- a/apps/app/components/icons/command-icon.tsx
+++ b/apps/app/components/icons/command-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CommandIcon: React.FC<Props> = ({
   width = "81",
   height = "80",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/contrast-icon.tsx b/apps/app/components/icons/contrast-icon.tsx
index 5dfa47e4d..989a93409 100644
--- a/apps/app/components/icons/contrast-icon.tsx
+++ b/apps/app/components/icons/contrast-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ContrastIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cycle-icon.tsx b/apps/app/components/icons/cycle-icon.tsx
index f8881c6c1..16c9b8c94 100644
--- a/apps/app/components/icons/cycle-icon.tsx
+++ b/apps/app/components/icons/cycle-icon.tsx
@@ -6,7 +6,7 @@ export const CyclesIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/discord-icon.tsx b/apps/app/components/icons/discord-icon.tsx
index cec62944e..27bfdcbe9 100644
--- a/apps/app/components/icons/discord-icon.tsx
+++ b/apps/app/components/icons/discord-icon.tsx
@@ -13,7 +13,7 @@ export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", clas
   >
     <g clipPath="url(#clip0_282_229)">
       <path
-        fill={color ? color : "#858E96"}
+        fill={color ? color : "rgb(var(--color-text-200))"}
         d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
       />
     </g>
diff --git a/apps/app/components/icons/github-icon.tsx b/apps/app/components/icons/github-icon.tsx
index 1dc7b5eea..c2bf8f491 100644
--- a/apps/app/components/icons/github-icon.tsx
+++ b/apps/app/components/icons/github-icon.tsx
@@ -16,7 +16,7 @@ export const GithubIcon: React.FC<Props> = ({ width = "24", height = "24", class
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-        fill={color ? color : "#858E96"}
+        fill={color ? color : "rgb(var(--color-text-200))"}
       />
     </g>
     <defs>
diff --git a/apps/app/components/icons/grid-view-icons.tsx b/apps/app/components/icons/grid-view-icons.tsx
index f5e81daf8..a4a3a9aec 100644
--- a/apps/app/components/icons/grid-view-icons.tsx
+++ b/apps/app/components/icons/grid-view-icons.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const GridViewIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/heartbeat-icon.tsx b/apps/app/components/icons/heartbeat-icon.tsx
index ff950ca0b..5276b2cd2 100644
--- a/apps/app/components/icons/heartbeat-icon.tsx
+++ b/apps/app/components/icons/heartbeat-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const HeartbeatIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/import-layers.tsx b/apps/app/components/icons/import-layers.tsx
index 701c51355..d64f5c5f5 100644
--- a/apps/app/components/icons/import-layers.tsx
+++ b/apps/app/components/icons/import-layers.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ImportLayersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/inbox-icon.tsx b/apps/app/components/icons/inbox-icon.tsx
index 6013c8861..649504c5b 100644
--- a/apps/app/components/icons/inbox-icon.tsx
+++ b/apps/app/components/icons/inbox-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const InboxIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/layer-diagonal-icon.tsx b/apps/app/components/icons/layer-diagonal-icon.tsx
index aff7bc66c..dc6b5b684 100644
--- a/apps/app/components/icons/layer-diagonal-icon.tsx
+++ b/apps/app/components/icons/layer-diagonal-icon.tsx
@@ -6,7 +6,7 @@ export const LayerDiagonalIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/people-group-icon.tsx b/apps/app/components/icons/people-group-icon.tsx
index 813511208..c7f56cd51 100644
--- a/apps/app/components/icons/people-group-icon.tsx
+++ b/apps/app/components/icons/people-group-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const PeopleGroupIcon: React.FC<Props> = ({
   width = "24",
   height = "16",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/setting-icon.tsx b/apps/app/components/icons/setting-icon.tsx
index 3bee580ae..bf0dfa2c3 100644
--- a/apps/app/components/icons/setting-icon.tsx
+++ b/apps/app/components/icons/setting-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const SettingIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/stacked-layers-horizontal-icon.tsx b/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
index 2d5f75ba9..bd12d0336 100644
--- a/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
+++ b/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
@@ -6,7 +6,7 @@ export const StackedLayersHorizontalIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/stacked-layers-icon.tsx b/apps/app/components/icons/stacked-layers-icon.tsx
index 61e003d0a..459d9217d 100644
--- a/apps/app/components/icons/stacked-layers-icon.tsx
+++ b/apps/app/components/icons/stacked-layers-icon.tsx
@@ -6,7 +6,7 @@ export const StackedLayersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/target-icon.tsx b/apps/app/components/icons/target-icon.tsx
index 71bc44230..810a3c698 100644
--- a/apps/app/components/icons/target-icon.tsx
+++ b/apps/app/components/icons/target-icon.tsx
@@ -6,7 +6,7 @@ export const TargetIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/tick-mark-icon.tsx b/apps/app/components/icons/tick-mark-icon.tsx
index 3d7c1618c..1f7a5c5a5 100644
--- a/apps/app/components/icons/tick-mark-icon.tsx
+++ b/apps/app/components/icons/tick-mark-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const TickMarkIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/unstarted-state-icon.tsx b/apps/app/components/icons/unstarted-state-icon.tsx
index 0fcad39ea..161a0ab2a 100644
--- a/apps/app/components/icons/unstarted-state-icon.tsx
+++ b/apps/app/components/icons/unstarted-state-icon.tsx
@@ -6,7 +6,7 @@ export const UnstartedStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/user-group-icon.tsx b/apps/app/components/icons/user-group-icon.tsx
index 37be59e3f..3cbac8a38 100644
--- a/apps/app/components/icons/user-group-icon.tsx
+++ b/apps/app/components/icons/user-group-icon.tsx
@@ -18,7 +18,7 @@ export const UserGroupIcon: React.FC<Props> = ({
   >
     <path
       d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
-      fill={color ? color : "#858E96"}
+      fill={color ? color : "rgb(var(--color-text-200))"}
     />
   </svg>
 );
diff --git a/apps/app/components/icons/users.tsx b/apps/app/components/icons/users.tsx
index 9e590d8fc..ffff9fc73 100644
--- a/apps/app/components/icons/users.tsx
+++ b/apps/app/components/icons/users.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const UsersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/view-list-icon.tsx b/apps/app/components/icons/view-list-icon.tsx
index e893c2732..3f53fd05b 100644
--- a/apps/app/components/icons/view-list-icon.tsx
+++ b/apps/app/components/icons/view-list-icon.tsx
@@ -6,7 +6,7 @@ export const ViewListIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/water-drop-icon.tsx b/apps/app/components/icons/water-drop-icon.tsx
index 8123db09b..7ff6ff8a4 100644
--- a/apps/app/components/icons/water-drop-icon.tsx
+++ b/apps/app/components/icons/water-drop-icon.tsx
@@ -6,7 +6,7 @@ export const WaterDropIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/inbox/accept-issue-modal.tsx b/apps/app/components/inbox/accept-issue-modal.tsx
index 6427c562c..82979051c 100644
--- a/apps/app/components/inbox/accept-issue-modal.tsx
+++ b/apps/app/components/inbox/accept-issue-modal.tsx
@@ -42,7 +42,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
               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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-green-500/20 p-4">
@@ -67,9 +67,9 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to accept issue{" "}
-                      <span className="break-all font-medium text-brand-base">
+                      <span className="break-all font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? Once accepted, this issue will be added to the project issues list.
diff --git a/apps/app/components/inbox/decline-issue-modal.tsx b/apps/app/components/inbox/decline-issue-modal.tsx
index 11f1db5de..36fa0b72d 100644
--- a/apps/app/components/inbox/decline-issue-modal.tsx
+++ b/apps/app/components/inbox/decline-issue-modal.tsx
@@ -42,7 +42,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export const DeclineIssueModal: 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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -70,9 +70,9 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to decline issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? This action cannot be undone.
diff --git a/apps/app/components/inbox/delete-issue-modal.tsx b/apps/app/components/inbox/delete-issue-modal.tsx
index f188ff1aa..8973a1395 100644
--- a/apps/app/components/inbox/delete-issue-modal.tsx
+++ b/apps/app/components/inbox/delete-issue-modal.tsx
@@ -97,7 +97,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -111,7 +111,7 @@ export const DeleteIssueModal: 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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -125,9 +125,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? The issue will only be deleted from the inbox and this action cannot be
diff --git a/apps/app/components/inbox/filters-dropdown.tsx b/apps/app/components/inbox/filters-dropdown.tsx
index c12fcb8d2..1379b5885 100644
--- a/apps/app/components/inbox/filters-dropdown.tsx
+++ b/apps/app/components/inbox/filters-dropdown.tsx
@@ -72,7 +72,7 @@ export const FiltersDropdown: React.FC = () => {
         ]}
       />
       {filtersLength > 0 && (
-        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-brand-base bg-brand-surface-2 border border-brand-base z-10">
+        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-100 z-10">
           <span>{filtersLength}</span>
         </div>
       )}
diff --git a/apps/app/components/inbox/filters-list.tsx b/apps/app/components/inbox/filters-list.tsx
index 264b925a2..a7430872d 100644
--- a/apps/app/components/inbox/filters-list.tsx
+++ b/apps/app/components/inbox/filters-list.tsx
@@ -22,9 +22,9 @@ export const InboxFiltersList = () => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1"
             >
-              <span className="capitalize text-brand-secondary">
+              <span className="capitalize text-custom-text-200">
                 {replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
@@ -45,7 +45,7 @@ export const InboxFiltersList = () => {
                               ? "bg-yellow-500/20 text-yellow-500"
                               : priority === "low"
                               ? "bg-green-500/20 text-green-500"
-                              : "bg-brand-surface-1 text-brand-secondary"
+                              : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
                           <span>{getPriorityIcon(priority)}</span>
@@ -78,7 +78,7 @@ export const InboxFiltersList = () => {
                       {filters.inbox_status?.map((status) => (
                         <div
                           key={status}
-                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-brand-surface-1 text-brand-secondary"
+                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-custom-background-90 text-custom-text-200"
                         >
                           <span>{INBOX_STATUS.find((s) => s.value === status)?.label}</span>
                           <button
@@ -116,7 +116,7 @@ export const InboxFiltersList = () => {
       <button
         type="button"
         onClick={clearAllFilters}
-        className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-brand-secondary hover:text-brand-base"
+        className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <span>Clear all</span>
         <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/inbox/inbox-action-headers.tsx b/apps/app/components/inbox/inbox-action-headers.tsx
index ac144ba0b..a26e0aede 100644
--- a/apps/app/components/inbox/inbox-action-headers.tsx
+++ b/apps/app/components/inbox/inbox-action-headers.tsx
@@ -162,10 +162,10 @@ export const InboxActionHeader = () => {
         handleClose={() => setDeleteIssueModal(false)}
         data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
       />
-      <div className="grid grid-cols-4 border-b border-brand-base divide-x divide-brand-base">
+      <div className="grid grid-cols-4 border-b border-custom-border-100 divide-x divide-custom-border-100">
         <div className="col-span-1 flex justify-between p-4">
           <div className="flex items-center gap-2">
-            <InboxIcon className="h-4 w-4 text-brand-secondary" />
+            <InboxIcon className="h-4 w-4 text-custom-text-200" />
             <h3 className="font-medium">Inbox</h3>
           </div>
           <FiltersDropdown />
@@ -175,7 +175,7 @@ export const InboxActionHeader = () => {
             <div className="flex items-center gap-x-2">
               <button
                 type="button"
-                className="rounded border border-brand-base bg-brand-surface-1 p-1.5 hover:bg-brand-surface-2"
+                className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
                   document.dispatchEvent(e);
@@ -185,7 +185,7 @@ export const InboxActionHeader = () => {
               </button>
               <button
                 type="button"
-                className="rounded border border-brand-base bg-brand-surface-1 p-1.5 hover:bg-brand-surface-2"
+                className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
                   document.dispatchEvent(e);
@@ -203,11 +203,11 @@ export const InboxActionHeader = () => {
                   <Popover className="relative">
                     <Popover.Button as="button" type="button">
                       <SecondaryButton className="flex gap-x-1 items-center" size="sm">
-                        <ClockIcon className="h-4 w-4 text-brand-secondary" />
+                        <ClockIcon className="h-4 w-4 text-custom-text-200" />
                         <span>Snooze</span>
                       </SecondaryButton>
                     </Popover.Button>
-                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-brand-base bg-brand-surface-2 shadow-lg">
+                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg">
                       {({ close }) => (
                         <div className="w-full h-full flex flex-col gap-y-1">
                           <DatePicker
@@ -245,7 +245,7 @@ export const InboxActionHeader = () => {
                     className="flex gap-2 items-center"
                     onClick={() => setSelectDuplicateIssue(true)}
                   >
-                    <StackedLayersHorizontalIcon className="h-4 w-4 text-brand-secondary" />
+                    <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
                     <span>Mark as duplicate</span>
                   </SecondaryButton>
                 </div>
diff --git a/apps/app/components/inbox/inbox-issue-card.tsx b/apps/app/components/inbox/inbox-issue-card.tsx
index 53d6c2e95..9ef35f742 100644
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ b/apps/app/components/inbox/inbox-issue-card.tsx
@@ -40,12 +40,12 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
       <a>
         <div
           id={issue.id}
-          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-brand-base hover:bg-brand-accent hover:bg-opacity-10 ${
-            active ? "bg-brand-accent bg-opacity-5" : " "
+          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-100 hover:bg-custom-primary hover:bg-opacity-10 ${
+            active ? "bg-custom-primary bg-opacity-5" : " "
           } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
         >
           <div className="flex items-center gap-x-2">
-            <p className="flex-shrink-0 text-brand-secondary text-xs">
+            <p className="flex-shrink-0 text-custom-text-200 text-xs">
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </p>
             <h5 className="truncate text-sm">{issue.name}</h5>
@@ -62,7 +62,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                     ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                     : issue.priority === "low"
                     ? "border-green-500/20 bg-green-500/20 text-green-500"
-                    : "border-brand-base"
+                    : "border-custom-border-100"
                 }`}
               >
                 {getPriorityIcon(
@@ -75,7 +75,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               tooltipHeading="Created on"
               tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
-              <div className="flex items-center gap-1 rounded border border-brand-base shadow-sm text-xs px-2 py-[0.19rem] text-brand-secondary">
+              <div className="flex items-center gap-1 rounded border border-custom-border-100 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
                 <CalendarDaysIcon className="h-3.5 w-3.5" />
                 <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index 46aa4b33f..3a0b5550b 100644
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@@ -193,20 +193,20 @@ export const InboxMainContent: React.FC = () => {
 
   if (!inboxIssueId)
     return (
-      <div className="h-full p-4 grid place-items-center text-brand-secondary">
+      <div className="h-full p-4 grid place-items-center text-custom-text-200">
         <div className="grid h-full place-items-center">
           <div className="my-5 flex flex-col items-center gap-4">
             <InboxIcon height={60} width={60} />
             {inboxIssues && inboxIssues.length > 0 ? (
-              <span className="text-brand-secondary">
+              <span className="text-custom-text-200">
                 {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
                 details.
               </span>
             ) : (
-              <span className="text-brand-secondary">
+              <span className="text-custom-text-200">
                 No issues found. Use{" "}
-                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
-                create a new issue
+                <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
+                to create a new issue
               </span>
             )}
           </div>
@@ -228,11 +228,11 @@ export const InboxMainContent: React.FC = () => {
                   : issueStatus === 0
                   ? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
                     ? "text-red-500 border-red-500 bg-red-500/10"
-                    : "text-brand-secondary border-gray-500 bg-gray-500/10"
+                    : "text-custom-text-200 border-gray-500 bg-gray-500/10"
                   : issueStatus === 1
                   ? "text-green-500 border-green-500 bg-green-500/10"
                   : issueStatus === 2
-                  ? "text-brand-secondary border-gray-500 bg-gray-500/10"
+                  ? "text-custom-text-200 border-gray-500 bg-gray-500/10"
                   : ""
               }`}
             >
@@ -304,13 +304,13 @@ export const InboxMainContent: React.FC = () => {
               />
             </div>
             <div className="space-y-5">
-              <h3 className="text-lg text-brand-base">Comments/Activity</h3>
+              <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
               <IssueActivitySection issueId={issueDetails.id} user={user} />
               <AddComment issueId={issueDetails.id} user={user} />
             </div>
           </div>
 
-          <div className="basis-1/3 space-y-5 border-brand-base p-5">
+          <div className="basis-1/3 space-y-5 border-custom-border-100 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/components/inbox/issues-list-sidebar.tsx b/apps/app/components/inbox/issues-list-sidebar.tsx
index 6126be117..c188a1b39 100644
--- a/apps/app/components/inbox/issues-list-sidebar.tsx
+++ b/apps/app/components/inbox/issues-list-sidebar.tsx
@@ -18,7 +18,7 @@ export const IssuesListSidebar = () => {
       <InboxFiltersList />
       {inboxIssues ? (
         inboxIssues.length > 0 ? (
-          <div className="divide-y divide-brand-base overflow-auto h-full">
+          <div className="divide-y divide-custom-border-100 overflow-auto h-full">
             {inboxIssues.map((issue) => (
               <InboxIssueCard
                 key={issue.id}
@@ -28,7 +28,7 @@ export const IssuesListSidebar = () => {
             ))}
           </div>
         ) : (
-          <div className="h-full p-4 grid place-items-center text-center text-sm text-brand-secondary">
+          <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
             {filtersLength > 0 &&
               "No issues found for the selected filters. Try changing the filters."}
           </div>
diff --git a/apps/app/components/inbox/select-duplicate.tsx b/apps/app/components/inbox/select-duplicate.tsx
index 74409a57f..a28ba072a 100644
--- a/apps/app/components/inbox/select-duplicate.tsx
+++ b/apps/app/components/inbox/select-duplicate.tsx
@@ -88,7 +88,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
 
             <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -101,7 +101,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
                   <Combobox
                     value={selectedItem}
                     onChange={(value) => {
@@ -110,12 +110,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                   >
                     <div className="relative m-1">
                       <MagnifyingGlassIcon
-                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                       />
@@ -123,24 +123,26 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
                               Select issue
                             </h2>
                           )}
-                          <ul className="text-sm text-brand-base">
+                          <ul className="text-sm text-custom-text-100">
                             {filteredIssues.map((issue) => (
                               <Combobox.Option
                                 key={issue.id}
                                 as="div"
                                 value={issue.id}
                                 className={({ active, selected }) =>
-                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                    active || selected ? "bg-brand-surface-2 text-brand-base" : ""
+                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                    active || selected
+                                      ? "bg-custom-background-80 text-custom-text-100"
+                                      : ""
                                   } `
                                 }
                               >
@@ -151,14 +153,14 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                       backgroundColor: issue.state_detail.color,
                                     }}
                                   />
-                                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                  <span className="flex-shrink-0 text-xs text-custom-text-200">
                                     {
                                       issues?.find((i) => i.id === issue.id)?.project_detail
                                         ?.identifier
                                     }
                                     -{issue.sequence_id}
                                   </span>
-                                  <span className="text-brand-muted-1">{issue.name}</span>
+                                  <span className="text-custom-text-200">{issue.name}</span>
                                 </div>
                               </Combobox.Option>
                             ))}
@@ -167,9 +169,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="56" width="56" />
-                          <h3 className="text-sm text-brand-secondary">
+                          <h3 className="text-sm text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">
+                              C
+                            </pre>
+                            .
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/integration/delete-import-modal.tsx b/apps/app/components/integration/delete-import-modal.tsx
index 57af3fbfc..6566399c3 100644
--- a/apps/app/components/integration/delete-import-modal.tsx
+++ b/apps/app/components/integration/delete-import-modal.tsx
@@ -74,7 +74,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -88,7 +88,7 @@ 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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -102,9 +102,9 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-brand-base">
+                      <span className="break-words font-semibold capitalize text-custom-text-100">
                         {data?.service}
                       </span>
                       ? All of the data related to the import will be permanently removed. This
@@ -112,9 +112,9 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete import</span> below:
+                      <span className="font-medium text-custom-text-100">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 4f5784ffd..ca5a55a77 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-brand-secondary">Set up your GitHub import.</div>
+          <div className="text-sm text-custom-text-200">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 7b8c507fe..8a7383062 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 text-brand-secondary">
+    <h4 className="font-medium text-custom-text-200">
       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 6babaf2e7..eeae3f28d 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/apps/app/components/integration/github/import-data.tsx
@@ -37,7 +37,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-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the repository that you want the issues to be imported from.
             </p>
           </div>
@@ -54,7 +54,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         `${value.full_name}`
                       ) : (
-                        <span className="text-brand-secondary">Select Repository</span>
+                        <span className="text-custom-text-200">Select Repository</span>
                       )
                     }
                     onChange={onChange}
@@ -68,7 +68,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 Project</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the project to import the issues to.
             </p>
           </div>
@@ -84,7 +84,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         projects.find((p) => p.id === value)?.name
                       ) : (
-                        <span className="text-brand-secondary">Select Project</span>
+                        <span className="text-custom-text-200">Select Project</span>
                       )
                     }
                     onChange={onChange}
@@ -99,7 +99,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">Sync Issues</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Set whether you want to sync the issues or not.
             </p>
           </div>
diff --git a/apps/app/components/integration/github/import-users.tsx b/apps/app/components/integration/github/import-users.tsx
index e609e88d4..e4caf349b 100644
--- a/apps/app/components/integration/github/import-users.tsx
+++ b/apps/app/components/integration/github/import-users.tsx
@@ -26,8 +26,8 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
     <div className="mt-6">
       <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-custom-text-200">Name</div>
+          <div className="text-custom-text-200">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 2a1d74e4f..8a9c97193 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-brand-secondary">Import completed. We have found:</div>
+              <div className="text-sm text-custom-text-200">Import completed. We have found:</div>
             </div>
             <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-brand-secondary">Issues</h6>
+                <h6 className="text-sm text-custom-text-200">Issues</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-brand-secondary">Labels</h6>
+                <h6 className="text-sm text-custom-text-200">Labels</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
-                <h6 className="text-sm text-brand-secondary">Users</h6>
+                <h6 className="text-sm text-custom-text-200">Users</h6>
               </div>
             </div>
           </div>
diff --git a/apps/app/components/integration/github/root.tsx b/apps/app/components/integration/github/root.tsx
index 96ce845c4..ebbd76ee5 100644
--- a/apps/app/components/integration/github/root.tsx
+++ b/apps/app/components/integration/github/root.tsx
@@ -179,13 +179,13 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
     <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-brand-secondary hover:text-brand-base">
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
             <ArrowLeftIcon className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
+        <div className="space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -196,12 +196,12 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                   <div
                     className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
                       index <= activeIntegrationState()
-                        ? `border-brand-accent bg-brand-accent ${
+                        ? `border-custom-primary bg-custom-primary ${
                             index === activeIntegrationState()
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-brand-base"
+                        : "border-custom-border-100"
                     }`}
                   >
                     <integration.icon
@@ -215,8 +215,8 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                       key={index}
                       className={`border-b px-7 ${
                         index <= activeIntegrationState() - 1
-                          ? `border-brand-accent`
-                          : `border-brand-base`
+                          ? `border-custom-primary`
+                          : `border-custom-border-100`
                       }`}
                     >
                       {" "}
diff --git a/apps/app/components/integration/github/select-repository.tsx b/apps/app/components/integration/github/select-repository.tsx
index 69040c2d0..9857c0088 100644
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/apps/app/components/integration/github/select-repository.tsx
@@ -81,7 +81,7 @@ export const SelectRepository: React.FC<Props> = ({
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-brand-secondary hover:bg-brand-surface-2"
+              className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-custom-background-80"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/apps/app/components/integration/github/single-user-select.tsx
index b94fc1dbd..01e1f2327 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/apps/app/components/integration/github/single-user-select.tsx
@@ -62,7 +62,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
   }));
 
   return (
-    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
+    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
       <div className="flex items-center gap-2">
         <div className="relative h-8 w-8 flex-shrink-0 rounded">
           <img
diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx
index 2db8ef010..1b1a56bb9 100644
--- a/apps/app/components/integration/guide.tsx
+++ b/apps/app/components/integration/guide.tsx
@@ -83,7 +83,7 @@ const IntegrationGuide = () => {
               {IMPORTERS_EXPORTERS_LIST.map((service) => (
                 <div
                   key={service.provider}
-                  className="rounded-[10px] border border-brand-base bg-brand-base p-4"
+                  className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4"
                 >
                   <div className="flex items-center gap-4 whitespace-nowrap">
                     <div className="relative h-10 w-10 flex-shrink-0">
@@ -96,7 +96,7 @@ const IntegrationGuide = () => {
                     </div>
                     <div className="w-full">
                       <h3>{service.title}</h3>
-                      <p className="text-sm text-brand-secondary">{service.description}</p>
+                      <p className="text-sm text-custom-text-200">{service.description}</p>
                     </div>
                     <div className="flex-shrink-0">
                       <Link
@@ -113,12 +113,12 @@ const IntegrationGuide = () => {
                 </div>
               ))}
             </div>
-            <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+            <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
               <h3 className="mb-2 flex gap-2 text-lg font-medium">
                 Previous Imports
                 <button
                   type="button"
-                  className="flex flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs outline-none"
+                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
                   onClick={() => {
                     setRefreshing(true);
                     mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
@@ -133,7 +133,7 @@ const IntegrationGuide = () => {
               {importerServices ? (
                 importerServices.length > 0 ? (
                   <div className="space-y-2">
-                    <div className="divide-y divide-brand-base">
+                    <div className="divide-y divide-custom-border-100">
                       {importerServices.map((service) => (
                         <SingleImport
                           key={service.id}
@@ -145,7 +145,7 @@ const IntegrationGuide = () => {
                     </div>
                   </div>
                 ) : (
-                  <p className="py-2 text-sm text-brand-secondary">
+                  <p className="py-2 text-sm text-custom-text-200">
                     No previous imports available.
                   </p>
                 )
diff --git a/apps/app/components/integration/jira/confirm-import.tsx b/apps/app/components/integration/jira/confirm-import.tsx
index 1945bb501..54c599151 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-brand-secondary">Migrating</p>
+          <p className="text-sm text-custom-text-200">Migrating</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
-            <p className="text-sm text-brand-secondary">Issues</p>
+            <p className="text-sm text-custom-text-200">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
-            <p className="text-sm text-brand-secondary">States</p>
+            <p className="text-sm text-custom-text-200">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
-            <p className="text-sm text-brand-secondary">Modules</p>
+            <p className="text-sm text-custom-text-200">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
-            <p className="text-sm text-brand-secondary">Labels</p>
+            <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">
               {watch("data.users").filter((user) => user.import).length}
             </h4>
-            <p className="text-sm text-brand-secondary">User</p>
+            <p className="text-sm text-custom-text-200">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 6a1c5b66f..3fc5d9641 100644
--- a/apps/app/components/integration/jira/give-details.tsx
+++ b/apps/app/components/integration/jira/give-details.tsx
@@ -31,10 +31,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="font-semibold">Jira Personal Access Token</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Get to know your access token by navigating to{" "}
             <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
-              <a className="text-brand-accent underline" target="_blank" rel="noreferrer">
+              <a className="text-custom-primary underline" target="_blank" rel="noreferrer">
                 Atlassian Settings
               </a>
             </Link>
@@ -58,7 +58,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <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>
+          <p className="text-sm text-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -77,7 +77,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Enter the Gmail account that you use in Jira account
           </p>
         </div>
@@ -99,7 +99,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <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>
+          <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -119,7 +119,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Select which project you want to import to.
           </p>
         </div>
@@ -137,22 +137,22 @@ export const JiraGetImportDetail: React.FC = () => {
                 label={
                   <span>
                     {value && value !== "" ? (
-                      projects.find((p) => p.id === value)?.name
+                      projects?.find((p) => p.id === value)?.name
                     ) : (
-                      <span className="text-brand-secondary">Select a project</span>
+                      <span className="text-custom-text-200">Select a project</span>
                     )}
                   </span>
                 }
                 verticalPosition="top"
               >
-                {projects.length > 0 ? (
+                {projects && projects.length > 0 ? (
                   projects.map((project) => (
                     <CustomSelect.Option key={project.id} value={project.id}>
                       {project.name}
                     </CustomSelect.Option>
                   ))
                 ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary">
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
                     <p>You don{"'"}t have any project. Please create a project first.</p>
                   </div>
                 )}
@@ -163,9 +163,9 @@ 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-brand-secondary"
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
                   >
-                    <PlusIcon className="h-4 w-4 text-gray-500" />
+                    <PlusIcon className="h-4 w-4 text-custom-text-200" />
                     <span>Create new project</span>
                   </button>
                 </div>
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index 80c0c4c9b..8c7e04788 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -51,11 +51,11 @@ export const JiraImportUsers: FC = () => {
   }));
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-100 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Update, invite or choose not to invite assignee
           </p>
         </div>
@@ -73,8 +73,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-sm text-brand-secondary">Name</div>
-            <div className="col-span-1 text-sm text-brand-secondary">Import as</div>
+            <div className="col-span-1 text-sm text-custom-text-200">Name</div>
+            <div className="col-span-1 text-sm text-custom-text-200">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 2e4061638..88803727c 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-brand-secondary">
+        <p className="text-sm text-custom-text-200">
           Something went wrong. Please{" "}
           <button
             onClick={() => setCurrentStep({ state: "import-configure" })}
             type="button"
-            className="inline text-brand-accent underline"
+            className="inline text-custom-primary underline"
           >
             go back
           </button>{" "}
@@ -122,28 +122,28 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import Data</h3>
-          <p className="text-sm text-brand-secondary">Import Completed. We have found:</p>
+          <p className="text-sm text-custom-text-200">Import Completed. We have found:</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
-            <p className="text-sm text-brand-secondary">Issues</p>
+            <p className="text-sm text-custom-text-200">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
-            <p className="text-sm text-brand-secondary">States</p>
+            <p className="text-sm text-custom-text-200">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
-            <p className="text-sm text-brand-secondary">Modules</p>
+            <p className="text-sm text-custom-text-200">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
-            <p className="text-sm text-brand-secondary">Labels</p>
+            <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
-            <p className="text-sm text-brand-secondary">Users</p>
+            <p className="text-sm text-custom-text-200">Users</p>
           </div>
         </div>
       </div>
@@ -151,7 +151,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import Epics</h3>
-          <p className="text-sm text-brand-secondary">Import epics as modules</p>
+          <p className="text-sm text-custom-text-200">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 b1098c9cb..35dc14357 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -110,7 +110,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   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-brand-secondary hover:text-brand-base">
+        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
             <ArrowLeftIcon className="h-3 w-3" />
           </div>
@@ -118,7 +118,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
         </div>
       </Link>
 
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
             <Image src={JiraLogo} alt="jira logo" />
@@ -135,14 +135,14 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-brand-base ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-100 ${
                     index <= activeIntegrationState()
-                      ? `border-brand-accent bg-brand-accent ${
+                      ? `border-custom-primary bg-custom-primary ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-brand-base"
+                      : "border-custom-border-100"
                   }`}
                 >
                   <integration.icon
@@ -156,8 +156,8 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     key={index}
                     className={`border-b px-7 ${
                       index <= activeIntegrationState() - 1
-                        ? `border-brand-accent`
-                        : `border-brand-base`
+                        ? `border-custom-primary`
+                        : `border-custom-border-100`
                     }`}
                   >
                     {" "}
@@ -183,7 +183,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
               </div>
 
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-brand-base p-4 pb-0">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-100 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 fa3fd45f6..56ee0adf8 100644
--- a/apps/app/components/integration/single-import.tsx
+++ b/apps/app/components/integration/single-import.tsx
@@ -40,7 +40,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
           {refreshing ? "Refreshing..." : service.status}
         </span>
       </h4>
-      <div className="mt-2 flex items-center gap-2 text-xs text-brand-secondary">
+      <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
         <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
         <span>
           Imported by{" "}
diff --git a/apps/app/components/integration/single-integration-card.tsx b/apps/app/components/integration/single-integration-card.tsx
index f6ae65b12..8d1d480f0 100644
--- a/apps/app/components/integration/single-integration-card.tsx
+++ b/apps/app/components/integration/single-integration-card.tsx
@@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
   );
 
   return (
-    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5">
       <div className="flex items-start gap-4">
         <div className="h-12 w-12 flex-shrink-0">
           <Image
@@ -116,14 +116,14 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
                   <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500" /> Installed
                 </span>
               ) : (
-                <span className="flex items-center gap-1 text-sm font-normal text-gray-400">
-                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400" /> Not
-                  Installed
+                <span className="flex items-center gap-1 text-sm font-normal text-custom-text-200">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-custom-background-80" />{" "}
+                  Not Installed
                 </span>
               )
             ) : null}
           </h3>
-          <p className="text-sm text-gray-400">
+          <p className="text-sm text-custom-text-200">
             {workspaceIntegrations
               ? isInstalled
                 ? integrationDetails[integration.provider].installed
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index e30f00b0b..baa860660 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -61,54 +61,54 @@ const activityDetails: {
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   labels: {
     icon: <TagIcon height="12" width="12" color="#6b7280" />,
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   description: {
     message: "updated the description.",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   link: {
     message: "updated the link",
-    icon: <LinkIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <LinkIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   attachment: {
     message: "updated the attachment",
-    icon: <PaperClipIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <PaperClipIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
 };
 
@@ -264,7 +264,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             activityItem.field !== "link" &&
             activityItem.field !== "estimate"
           ) {
-            value = <span className="text-brand-secondary">created this issue.</span>;
+            value = <span className="text-custom-text-200">created this issue.</span>;
           } else if (activityItem.field === "state") {
             value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
           } else if (activityItem.field === "labels") {
@@ -279,7 +279,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             }
 
             value = (
-              <span className="relative inline-flex items-center rounded-full border border-brand-base px-2 py-0.5 text-xs">
+              <span className="relative inline-flex items-center rounded-full border border-custom-border-100 px-2 py-0.5 text-xs">
                 <span className="absolute flex flex-shrink-0 items-center justify-center">
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -289,7 +289,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                     aria-hidden="true"
                   />
                 </span>
-                <span className="ml-3 font-medium text-brand-base">{name}</span>
+                <span className="ml-3 font-medium text-custom-text-100">{name}</span>
               </span>
             );
           } else if (activityItem.field === "assignees") {
@@ -334,7 +334,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                 <div className="relative pb-1">
                   {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
-                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -343,7 +343,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                       <div>
                         <div className="relative px-1.5">
                           <div className="mt-1.5">
-                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 ring-white">
                               {activityItem.field ? (
                                 activityDetails[activityItem.field as keyof typeof activityDetails]
                                   ?.icon
@@ -368,7 +368,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                         </div>
                       </div>
                       <div className="min-w-0 flex-1 py-3">
-                        <div className="text-xs text-brand-secondary">
+                        <div className="text-xs text-custom-text-200">
                           <span className="text-gray font-medium">
                             {activityItem.actor_detail.first_name}
                             {activityItem.actor_detail.is_bot
@@ -376,7 +376,10 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                               : " " + activityItem.actor_detail.last_name}
                           </span>
                           <span> {action} </span>
-                          <span className="text-xs font-medium text-brand-base"> {value} </span>
+                          <span className="text-xs font-medium text-custom-text-100">
+                            {" "}
+                            {value}{" "}
+                          </span>
                           <span className="whitespace-nowrap">
                             {timeAgo(activityItem.created_at)}
                           </span>
diff --git a/apps/app/components/issues/attachment-upload.tsx b/apps/app/components/issues/attachment-upload.tsx
index 7e5184ce8..5eb5f76e3 100644
--- a/apps/app/components/issues/attachment-upload.tsx
+++ b/apps/app/components/issues/attachment-upload.tsx
@@ -85,8 +85,8 @@ export const IssueAttachmentUpload = () => {
   return (
     <div
       {...getRootProps()}
-      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed text-brand-accent bg-brand-accent/5 text-xs rounded-md px-4 ${
-        isDragActive ? "bg-brand-accent/10 border-brand-accent" : "border-brand-base"
+      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${
+        isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-100"
       } ${isDragReject ? "bg-red-100" : ""}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/app/components/issues/attachments.tsx b/apps/app/components/issues/attachments.tsx
index 7f4be47dd..6d56264e5 100644
--- a/apps/app/components/issues/attachments.tsx
+++ b/apps/app/components/issues/attachments.tsx
@@ -61,7 +61,7 @@ export const IssueAttachments = () => {
         attachments.map((file) => (
           <div
             key={file.id}
-            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-2 text-sm"
+            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-100 bg-custom-background-100 px-4 py-2 text-sm"
           >
             <Link href={file.asset}>
               <a target="_blank">
@@ -82,7 +82,7 @@ export const IssueAttachments = () => {
                         } uploaded on ${renderLongDateFormat(file.updated_at)}`}
                       >
                         <span>
-                          <ExclamationIcon className="h-3 w-3 fill-current text-brand-base" />
+                          <ExclamationIcon className="h-3 w-3 fill-current text-custom-text-100" />
                         </span>
                       </Tooltip>
                     </div>
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 72f6fcae6..a90c7ff47 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             alt={comment.actor_detail.first_name}
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-brand-base"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-100"
           />
         ) : (
           <div
@@ -82,9 +82,9 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
           <ChatBubbleLeftEllipsisIcon
-            className="h-3.5 w-3.5 text-brand-secondary"
+            className="h-3.5 w-3.5 text-custom-text-200"
             aria-hidden="true"
           />
         </span>
@@ -95,7 +95,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             {comment.actor_detail.first_name}
             {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
           </div>
-          <p className="mt-0.5 text-xs text-brand-secondary">
+          <p className="mt-0.5 text-xs text-custom-text-200">
             Commented {timeAgo(comment.created_at)}
           </p>
         </div>
@@ -135,7 +135,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
               value={comment.comment_html}
               editable={false}
               noBorder
-              customClassName="text-xs border border-brand-base bg-brand-base"
+              customClassName="text-xs border border-custom-border-100 bg-custom-background-100"
               ref={showEditorRef}
             />
           </div>
diff --git a/apps/app/components/issues/delete-attachment-modal.tsx b/apps/app/components/issues/delete-attachment-modal.tsx
index 85450809a..0ea0f9684 100644
--- a/apps/app/components/issues/delete-attachment-modal.tsx
+++ b/apps/app/components/issues/delete-attachment-modal.tsx
@@ -75,7 +75,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-75 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -89,8 +89,8 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, 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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                  <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                  <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                         <ExclamationTriangleIcon
@@ -101,12 +101,12 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                         <Dialog.Title
                           as="h3"
-                          className="text-lg font-medium leading-6 text-brand-base"
+                          className="text-lg font-medium leading-6 text-custom-text-100"
                         >
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
-                          <p className="text-sm text-brand-secondary">
+                          <p className="text-sm text-custom-text-200">
                             Are you sure you want to delete attachment-{" "}
                             <span className="font-bold">{getFileName(data.attributes.name)}</span>?
                             This attachment will be permanently removed. This action cannot be
@@ -116,7 +116,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       </div>
                     </div>
                   </div>
-                  <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                  <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <DangerButton
                       onClick={() => {
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index c4fb3b00a..cbda250fe 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -138,7 +138,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -152,7 +152,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
               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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -166,9 +166,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the issue will be permanently removed. This
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 492110a8c..0770834fa 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -105,14 +105,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
               });
           }}
           required={true}
-          className="min-h-10 block w-full resize-none
-      overflow-hidden rounded border-none bg-transparent
-      px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-theme"
+          className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
           role="textbox"
           disabled={!isAllowed}
         />
         {characterLimit && (
-          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
+          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-custom-background-80 p-1 text-xs">
             <span
               className={`${
                 watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@@ -166,7 +164,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         }}
       />
       <div
-        className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
+        className={`absolute -bottom-8 right-0 text-sm text-custom-text-200 ${
           isSubmitting ? "block" : "hidden"
         }`}
       >
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8bf64e6ff..a06b1d7cd 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -273,14 +273,14 @@ export const IssueForm: FC<IssueFormProps> = ({
                 )}
               />
             )}
-            <h3 className="text-xl font-semibold leading-6 text-brand-base">
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
               {status ? "Update" : "Create"} Issue
             </h3>
           </div>
           {watch("parent") &&
             watch("parent") !== "" &&
             (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
+              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
                 <div className="flex items-center gap-2">
                   <span
                     className="block h-1.5 w-1.5 rounded-full"
@@ -289,7 +289,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                         .color,
                     }}
                   />
-                  <span className="flex-shrink-0 text-brand-secondary">
+                  <span className="flex-shrink-0 text-custom-text-200">
                     {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
                     {issues.find((i) => i.id === watch("parent"))?.sequence_id}
                   </span>
@@ -326,7 +326,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   />
                   {mostSimilarIssue && (
                     <div className="flex items-center gap-x-2">
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
                         >
@@ -342,7 +342,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       </p>
                       <button
                         type="button"
-                        className="text-sm text-brand-accent"
+                        className="text-sm text-custom-primary"
                         onClick={() => {
                           setMostSimilarIssue(undefined);
                         }}
@@ -359,7 +359,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     {issueName && issueName !== "" && (
                       <button
                         type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
                           iAmFeelingLucky ? "cursor-wait" : ""
                         }`}
                         onClick={handleAutoGenerateDescription}
@@ -376,7 +376,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
                       <SparklesIcon className="h-4 w-4" />
@@ -529,7 +529,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 571583707..533badd7d 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -27,7 +27,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -40,7 +40,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -50,7 +50,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index 6123556a5..9eb351c8b 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -53,9 +53,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
     <>
       <div className="rounded-lg">
         {issueDetails?.parent && issueDetails.parent !== "" ? (
-          <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
+          <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
             <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.parent}`}>
-              <a className="flex items-center gap-2 text-brand-secondary">
+              <a className="flex items-center gap-2 text-custom-text-200">
                 <span
                   className="block h-1.5 w-1.5 rounded-full"
                   style={{
@@ -85,7 +85,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
                   </CustomMenu.MenuItem>
                 ))
               ) : (
-                <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-secondary">
+                <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-custom-text-200">
                   No other sibling issues
                 </CustomMenu.MenuItem>
               )}
@@ -109,7 +109,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
         </div>
       </div>
       <div className="space-y-5 pt-3">
-        <h3 className="text-lg text-brand-base">Comments/Activity</h3>
+        <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
         <IssueActivitySection issueId={issueId as string} user={user} />
         <AddComment issueId={issueId as string} user={user} />
       </div>
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index b83bbc480..b0b0a8e20 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -188,7 +188,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         payload,
         user
       )
-      .then((res) => {
+      .then(() => {
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -323,7 +323,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={() => {}}>
+      <Dialog as="div" className="relative z-20" onClose={() => handleClose()}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -333,7 +333,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -347,7 +347,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               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 rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <IssueForm
                   issues={issues ?? []}
                   handleFormSubmit={handleFormSubmit}
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 790570cce..7ef4b495f 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -87,7 +87,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   return (
-    <div className="border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0">
+    <div className="border-b border-custom-border-100 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
       <div key={issue.id} className="flex items-center justify-between gap-2">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
@@ -96,13 +96,13 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
                 tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                <span className="flex-shrink-0 text-xs text-custom-text-200">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-[0.825rem] text-brand-base">
+              <span className="text-[0.825rem] text-custom-text-100">
                 {truncateText(issue.name, 50)}
               </span>
             </Tooltip>
@@ -139,7 +139,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               {issue.label_details.map((label) => (
                 <span
                   key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                  className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200"
                 >
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -155,7 +155,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             ""
           )}
           {properties.assignee && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
               <Tooltip
                 position="top-right"
                 tooltipHeading="Assignees"
@@ -176,9 +176,9 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
                   {issue.sub_issues_count}
                 </div>
@@ -186,20 +186,20 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
-                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                <div className="flex items-center gap-1 text-custom-text-200">
+                  <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />
                   {issue.link_count}
                 </div>
               </Tooltip>
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                <div className="flex items-center gap-1 text-custom-text-200">
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
index b93c07d3c..f01fe80bf 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -108,15 +108,15 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox value={value} onChange={onChange}>
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
@@ -126,9 +126,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   {customDisplay && <div className="p-2">{customDisplay}</div>}
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
                     {debouncedSearchTerm !== "" && (
-                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
+                      <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
                         Search results for{" "}
-                        <span className="text-brand-base">
+                        <span className="text-custom-text-100">
                           {'"'}
                           {debouncedSearchTerm}
                           {'"'}
@@ -143,9 +143,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       debouncedSearchTerm !== "" && (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-brand-secondary">
+                          <h3 className="text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
                               C
                             </pre>
                             .
@@ -167,9 +167,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                             key={issue.id}
                             value={issue.id}
                             className={({ active, selected }) =>
-                              `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                active ? "bg-brand-surface-2 text-brand-base" : ""
-                              } ${selected ? "text-brand-base" : ""}`
+                              `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                active ? "bg-custom-background-80 text-custom-text-100" : ""
+                              } ${selected ? "text-custom-text-100" : ""}`
                             }
                             onClick={handleClose}
                           >
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 2e1844a69..6805c931e 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -55,15 +55,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={true} />
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-              <span className="text-brand-secondary">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <span className="text-custom-text-200">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index 26288e11b..7ce39c449 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -16,11 +16,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
-                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
+                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
index 18204295b..0d910013b 100644
--- a/apps/app/components/issues/select/estimate.tsx
+++ b/apps/app/components/issues/select/estimate.tsx
@@ -22,8 +22,12 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2 text-xs">
-          <PlayIcon className={`h-3.5 w-3.5 -rotate-90 ${value !== null ? "text-brand-base" : "text-brand-secondary"}`} />
-          <span className={value !== null ? "text-brand-base" : "text-brand-secondary"}>
+          <PlayIcon
+            className={`h-3.5 w-3.5 -rotate-90 ${
+              value !== null ? "text-custom-text-100" : "text-custom-text-200"
+            }`}
+          />
+          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index e99eecc16..318d70185 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -59,7 +59,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 hover:bg-brand-surface-2">
+          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
             {value && value.length > 0 ? (
               <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
                 <IssueLabelsList
@@ -70,8 +70,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               </span>
             ) : (
               <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
-                <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
-                <span className=" text-brand-secondary">Label</span>
+                <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                <span className=" text-custom-text-200">Label</span>
               </span>
             )}
           </Combobox.Button>
@@ -88,12 +88,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           >
             <Combobox.Options
               className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
-                bg-brand-surface-1 px-2 py-2 text-xs shadow-md focus:outline-none`}
+                bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
+              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-100 bg-custom-background-90 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for label..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -112,8 +112,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                               key={label.id}
                               className={({ active }) =>
                                 `${
-                                  active ? "bg-brand-surface-2" : ""
-                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                                  active ? "bg-custom-background-80" : ""
+                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
                               }
                               value={label.id}
                             >
@@ -141,8 +141,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           );
                       } else
                         return (
-                          <div className="border-y border-brand-base">
-                            <div className="flex select-none items-center gap-2 truncate p-2 text-brand-base">
+                          <div className="border-y border-custom-border-100">
+                            <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
                               <RectangleGroupIcon className="h-3 w-3" /> {label.name}
                             </div>
                             <div>
@@ -151,8 +151,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                   key={child.id}
                                   className={({ active }) =>
                                     `${
-                                      active ? "bg-brand-surface-2" : ""
-                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                                      active ? "bg-custom-background-80" : ""
+                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
                                   }
                                   value={child.id}
                                 >
@@ -183,17 +183,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         );
                     })
                   ) : (
-                    <p className="px-2 text-xs text-brand-secondary">No labels found</p>
+                    <p className="px-2 text-xs text-custom-text-200">No labels found</p>
                   )
                 ) : (
-                  <p className="px-2 text-xs text-brand-secondary">Loading...</p>
+                  <p className="px-2 text-xs text-custom-text-200">Loading...</p>
                 )}
                 <button
                   type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
                   onClick={() => setIsOpen(true)}
                 >
-                  <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                  <span className="flex items-center justify-start gap-1 text-custom-text-200">
                     <PlusIcon className="h-4 w-4" aria-hidden="true" />
                     <span>Create New Label</span>
                   </span>
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 7404ac5a0..b734e6a90 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -18,9 +18,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
     label={
       <div className="flex items-center justify-center gap-2 text-xs">
         <span className="flex items-center">
-          {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
+          {getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
         </span>
-        <span className={`${value ? "" : "text-brand-secondary"} capitalize`}>
+        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
           {value ?? "Priority"}
         </span>
       </div>
diff --git a/apps/app/components/issues/select/project.tsx b/apps/app/components/issues/select/project.tsx
index 09ed5225c..12ee0a50c 100644
--- a/apps/app/components/issues/select/project.tsx
+++ b/apps/app/components/issues/select/project.tsx
@@ -59,7 +59,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
           <p className="text-gray-400">No projects found!</p>
         )
       ) : (
-        <div className="px-2 text-sm text-brand-secondary">Loading...</div>
+        <div className="px-2 text-sm text-custom-text-200">Loading...</div>
       )}
     </CustomSelect>
   );
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index fa4807815..99c4140b2 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -62,17 +62,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           ) : currentDefaultState ? (
             getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
           ) : (
-            <Squares2X2Icon className="h-3.5 w-3.5 text-brand-secondary" />
+            <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
           )}
           {selectedOption?.name
             ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-brand-secondary">State</span>}
+            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
         </div>
       }
       footerOption={
         <button
           type="button"
-          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-4 w-4" aria-hidden="true" />
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 6fcd04eb8..93e6d37d5 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -57,7 +57,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
         <p>Assignees</p>
       </div>
@@ -65,11 +65,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-brand-secondary">
+            <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="-my-0.5 flex items-center justify-center gap-2">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-brand-base">{value.length} Assignees</span>
+                  <span className="text-custom-text-100">{value.length} Assignees</span>
                 </div>
               ) : (
                 "No assignees"
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index de8985792..c0eb1e33b 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -80,7 +80,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         handleOnSubmit={onSubmit}
       />
       <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
           <BlockedIcon height={16} width={16} />
           <p>Blocked by</p>
         </div>
@@ -90,7 +90,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
               ? watch("blocked_issues").map((issue) => (
                   <div
                     key={issue.blocked_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`}
@@ -122,9 +122,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-brand-secondary ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-            } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`flex w-full text-custom-text-200 ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockedModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index 40f1eb10f..f1a934771 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -80,7 +80,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         handleOnSubmit={onSubmit}
       />
       <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
           <BlockerIcon height={16} width={16} />
           <p>Blocking</p>
         </div>
@@ -90,7 +90,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
               ? watch("blocker_issues").map((issue) => (
                   <div
                     key={issue.blocker_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`}
@@ -124,9 +124,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-brand-secondary ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-            } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`flex w-full text-custom-text-200 ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockerModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 0d8beaab8..4ada12672 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -65,7 +65,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <ContrastIcon className="h-4 w-4 flex-shrink-0" />
         <p>Cycle</p>
       </div>
@@ -77,7 +77,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
               tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
             >
               <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueCycle ? "text-brand-base" : "text-brand-secondary"}`}>
+                <span className={`${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}>
                   {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "No cycle"}
                 </span>
               </span>
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index cfe4bdf75..e1d40d49c 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -24,7 +24,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
         <p>Estimate</p>
       </div>
@@ -35,11 +35,11 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAu
             <div className="flex items-center gap-2 text-xs">
               <PlayIcon
                 className={`h-4 w-4 -rotate-90 ${
-                  value !== null ? "text-brand-base" : "text-brand-secondary"
+                  value !== null ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               />
               {estimatePoints?.find((e) => e.key === value)?.value ?? (
-                <span className="text-brand-secondary">No estimates</span>
+                <span className="text-custom-text-200">No estimates</span>
               )}
             </div>
           }
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 7f08bc92c..b64a8cb2b 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -59,7 +59,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
         <p>Module</p>
       </div>
@@ -73,7 +73,9 @@ export const SidebarModuleSelect: React.FC<Props> = ({
               }`}
             >
               <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueModule ? "text-brand-base" : "text-brand-secondary"}`}>
+                <span
+                  className={`${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}
+                >
                   {truncateText(
                     `${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`,
                     15
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index 9d183d262..fab15581b 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -50,7 +50,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <UserIcon className="h-4 w-4 flex-shrink-0" />
         <p>Parent</p>
       </div>
@@ -75,8 +75,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+          } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
         >
@@ -85,7 +85,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
               issues?.find((i) => i.id === watch("parent"))?.sequence_id
             }`
           ) : (
-            <span className="text-brand-secondary">Select issue</span>
+            <span className="text-custom-text-200">Select issue</span>
           )}
         </button>
       </div>
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index 70a23090c..9f3631f7c 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -21,7 +21,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
         <p>Priority</p>
       </div>
@@ -29,10 +29,10 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
         <CustomSelect
           label={
             <div className="flex items-center gap-2 text-left capitalize">
-              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {getPriorityIcon(value ?? "None", "text-sm")}
               </span>
-              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {value ?? "None"}
               </span>
             </div>
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index 02d1dd5cb..518e95c81 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -43,7 +43,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
         <p>State</p>
       </div>
@@ -51,7 +51,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
         <CustomSelect
           label={
             selectedState ? (
-              <div className="flex items-center gap-2 text-left text-brand-base">
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
                 {getStateGroupIcon(
                   selectedState?.group ?? "backlog",
                   "16",
@@ -61,7 +61,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
                 {addSpaceIfCamelCase(selectedState?.name ?? "")}
               </div>
             ) : inboxIssueId ? (
-              <div className="flex items-center gap-2 text-left text-brand-base">
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
                 {getStateGroupIcon("backlog", "16", "16", "#ff7700")}
                 Triage
               </div>
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 6f231871b..13a9c6395 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -281,7 +281,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         data={issueDetail ?? null}
         user={user}
       />
-      <div className="sticky top-5 w-full divide-y-2 divide-brand-base">
+      <div className="sticky top-5 w-full divide-y-2 divide-custom-border-100">
         <div className="flex items-center justify-between pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@@ -290,7 +290,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
               <button
                 type="button"
-                className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
+                className="rounded-md border border-custom-border-100 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
                 onClick={handleCopyText}
               >
                 <LinkIcon className="h-3.5 w-3.5" />
@@ -307,7 +307,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             )}
           </div>
         </div>
-        <div className="divide-y-2 divide-brand-base">
+        <div className="divide-y-2 divide-custom-border-100">
           {showFirstSection && (
             <div className="py-1">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
@@ -374,15 +374,15 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     issueDetail?.parent_detail ? (
                       <button
                         type="button"
-                        className="flex items-center gap-2 rounded bg-brand-surface-2 px-3 py-2 text-xs"
+                        className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs"
                         onClick={() => submitChanges({ parent: null })}
                       >
-                        <span className="text-brand-secondary">Selected:</span>{" "}
+                        <span className="text-custom-text-200">Selected:</span>{" "}
                         {issueDetail.parent_detail?.name}
                         <XMarkIcon className="h-3 w-3" />
                       </button>
                     ) : (
-                      <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs text-brand-secondary">
+                      <div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200">
                         No parent selected
                       </div>
                     )
@@ -409,7 +409,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                 <div className="flex flex-wrap items-center py-2">
-                  <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+                  <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
                     <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
                     <p>Due date</p>
                   </div>
@@ -426,7 +426,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               target_date: val,
                             })
                           }
-                          className="bg-brand-surface-1"
+                          className="bg-custom-background-90"
                           disabled={isNotAllowed}
                         />
                       )}
@@ -458,7 +458,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
           <div className="space-y-3 py-3">
             <div className="flex items-start justify-between">
-              <div className="flex basis-1/2 items-center gap-x-2 text-sm text-brand-secondary">
+              <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
                 <TagIcon className="h-4 w-4" />
                 <p>Label</p>
               </div>
@@ -471,7 +471,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       return (
                         <span
                           key={label.id}
-                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
                           onClick={() => {
                             const updatedLabels = watchIssue("labels_list")?.filter(
                               (l) => l !== labelId
@@ -511,8 +511,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               className={`flex ${
                                 isNotAllowed
                                   ? "cursor-not-allowed"
-                                  : "cursor-pointer hover:bg-brand-surface-1"
-                              } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                                  : "cursor-pointer hover:bg-custom-background-90"
+                              } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
                             >
                               Select Label
                             </Listbox.Button>
@@ -524,7 +524,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               leaveFrom="opacity-100"
                               leaveTo="opacity-0"
                             >
-                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg border border-brand-base focus:outline-none">
+                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
                                 <div className="py-1">
                                   {issueLabels ? (
                                     issueLabels.length > 0 ? (
@@ -540,9 +540,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                 key={label.id}
                                                 className={({ active, selected }) =>
                                                   `${
-                                                    active || selected ? "bg-brand-surface-1" : ""
+                                                    active || selected
+                                                      ? "bg-custom-background-90"
+                                                      : ""
                                                   } ${
-                                                    selected ? "" : "text-brand-secondary"
+                                                    selected ? "" : "text-custom-text-200"
                                                   } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                                 }
                                                 value={label.id}
@@ -561,8 +563,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                             );
                                         } else
                                           return (
-                                            <div className="border-y border-brand-base bg-brand-surface-1">
-                                              <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
+                                            <div className="border-y border-custom-border-100 bg-custom-background-90">
+                                              <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
                                                 <RectangleGroupIcon className="h-3 w-3" />
                                                 {label.name}
                                               </div>
@@ -572,9 +574,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                     key={child.id}
                                                     className={({ active, selected }) =>
                                                       `${
-                                                        active || selected ? "bg-brand-base" : ""
+                                                        active || selected
+                                                          ? "bg-custom-background-100"
+                                                          : ""
                                                       } ${
-                                                        selected ? "" : "text-brand-secondary"
+                                                        selected ? "" : "text-custom-text-200"
                                                       } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                                     }
                                                     value={child.id}
@@ -612,8 +616,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       className={`flex ${
                         isNotAllowed
                           ? "cursor-not-allowed"
-                          : "cursor-pointer hover:bg-brand-surface-1"
-                      } items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                          : "cursor-pointer hover:bg-custom-background-90"
+                      } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
                       onClick={() => setCreateLabelForm((prevData) => !prevData)}
                     >
                       {createLabelForm ? (
@@ -637,7 +641,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`flex items-center gap-1 rounded-md bg-brand-surface-2 p-1 outline-none focus:ring-2 focus:ring-brand-accent`}
+                          className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
                         >
                           {watch("color") && watch("color") !== "" && (
                             <span
@@ -711,7 +715,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               {!isNotAllowed && (
                 <button
                   type="button"
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
                   onClick={() => setLinkModal(true)}
                 >
                   <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/issues/sub-issues-list.tsx b/apps/app/components/issues/sub-issues-list.tsx
index 3558c8d74..06126d710 100644
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -203,16 +203,16 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
             <>
               <div className="flex items-center justify-between">
                 <div className="flex items-center justify-start gap-3">
-                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
+                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-custom-background-90">
                     <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
                     Sub-issues{" "}
-                    <span className="ml-1 text-brand-secondary">
+                    <span className="ml-1 text-custom-text-200">
                       {subIssuesResponse.sub_issues.length}
                     </span>
                   </Disclosure.Button>
                   {subIssuesResponse.state_distribution && (
-                    <div className="flex w-60 items-center gap-2 text-brand-base">
-                      <div className="bar relative h-1.5 w-full rounded bg-brand-surface-2">
+                    <div className="flex w-60 items-center gap-2 text-custom-text-100">
+                      <div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
                         <div
                           className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
                           style={{
@@ -242,7 +242,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                   <div className="flex items-center">
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-custom-background-90"
                       onClick={handleCreateIssueModal}
                     >
                       <PlusIcon className="h-3 w-3" />
@@ -271,7 +271,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                       key={issue.id}
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
                     >
-                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-base">
+                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-100">
                         <div className="flex items-center gap-2 rounded text-xs">
                           <span
                             className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -279,7 +279,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                               backgroundColor: issue.state_detail.color,
                             }}
                           />
-                          <span className="flex-shrink-0 text-brand-secondary">
+                          <span className="flex-shrink-0 text-custom-text-200">
                             {issue.project_detail.identifier}-{issue.sequence_id}
                           </span>
                           <span className="max-w-sm break-words font-medium">{issue.name}</span>
@@ -295,7 +295,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                               handleSubIssueRemove(issue.id);
                             }}
                           >
-                            <XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
+                            <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
                           </button>
                         )}
                       </a>
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index cba1db1e7..c4bf7c16c 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -84,7 +84,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       <div
         className={`flex ${
           isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-brand-secondary`}
+        } items-center gap-2 text-custom-text-200`}
       >
         {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
           <div className="-my-0.5 flex items-center justify-center gap-2">
@@ -92,7 +92,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           </div>
         ) : (
           <div className="flex items-center justify-center gap-2">
-            <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+            <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
           </div>
         )}
       </div>
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index efd568c30..f45440cfc 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -8,6 +8,7 @@ import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date
 import trackEventServices from "services/track-event.service";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
+import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
   issue: IIssue;
@@ -29,6 +30,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { issueView } = useIssuesView();
+
   return (
     <Tooltip
       tooltipHeading="Due Date"
@@ -71,7 +74,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
               user
             );
           }}
-          className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
+          className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
+            issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
+          }`}
           noBorder={noBorder}
           disabled={isNotAllowed}
         />
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
index d330a5f58..bef060e77 100644
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/apps/app/components/issues/view-select/estimate.tsx
@@ -43,7 +43,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
 
   const estimateLabels = (
     <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
-      <div className="flex items-center gap-1 text-brand-secondary">
+      <div className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
         {estimateValue ?? "None"}
       </div>
diff --git a/apps/app/components/issues/view-select/label.tsx b/apps/app/components/issues/view-select/label.tsx
index b82b02a0f..098576dd7 100644
--- a/apps/app/components/issues/view-select/label.tsx
+++ b/apps/app/components/issues/view-select/label.tsx
@@ -71,34 +71,43 @@ export const ViewLabelSelect: React.FC<Props> = ({
       position={tooltipPosition}
       tooltipHeading="Labels"
       tooltipContent={
-        issue.label_details.length > 0
-          ? issue.label_details.map((label) => label.name ?? "").join(", ")
-          : "No Label"
+        issue.labels.length > 0
+          ? issue.labels
+              .map((labelId) => {
+                const label = issueLabels?.find((l) => l.id === labelId);
+
+                return label?.name ?? "";
+              })
+              .join(", ")
+          : "No label"
       }
     >
       <div
         className={`flex ${
           isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-brand-secondary`}
+        } items-center gap-2 text-custom-text-200`}
       >
-        {issue.label_details.length > 0 ? (
+        {issue.labels.length > 0 ? (
           <>
-            {issue.label_details.slice(0, 4).map((label, index) => (
-              <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
-                <span
-                  className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-brand-surface-2 border-brand-base
-                          `}
-                  style={{
-                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
-                  }}
-                />
-              </div>
-            ))}
-            {issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
+            {issue.labels.slice(0, 4).map((labelId, index) => {
+              const label = issueLabels?.find((l) => l.id === labelId);
+
+              return (
+                <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
+                  <span
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
+                    style={{
+                      backgroundColor: label?.color ?? "#000000",
+                    }}
+                  />
+                </div>
+              );
+            })}
+            {issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
           </>
         ) : (
           <>
-            <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
+            <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
           </>
         )}
       </div>
@@ -108,17 +117,17 @@ export const ViewLabelSelect: React.FC<Props> = ({
   const footerOption = (
     <button
       type="button"
-      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
       onClick={() => setLabelModal(true)}
     >
-      <span className="flex items-center justify-start gap-1 text-brand-secondary">
+      <span className="flex items-center justify-start gap-1 text-custom-text-200">
         <PlusIcon className="h-4 w-4" aria-hidden="true" />
         <span>Create New Label</span>
       </span>
     </button>
   );
 
-  const noResultIcon = <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />;
+  const noResultIcon = <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />;
 
   return (
     <>
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index e7a674ec7..04f500e88 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -67,14 +67,14 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             noBorder
               ? ""
               : issue.priority === "urgent"
-              ? "border-red-500/20 bg-red-500/20 text-red-500"
+              ? "border-red-500/20 bg-red-500/20"
               : issue.priority === "high"
-              ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+              ? "border-orange-500/20 bg-orange-500/20"
               : issue.priority === "medium"
-              ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+              ? "border-yellow-500/20 bg-yellow-500/20"
               : issue.priority === "low"
-              ? "border-green-500/20 bg-green-500/20 text-green-500"
-              : "border-brand-base"
+              ? "border-green-500/20 bg-green-500/20"
+              : "border-custom-border-100 bg-custom-background-80"
           } items-center`}
         >
           <Tooltip
@@ -82,10 +82,20 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             tooltipContent={issue.priority ?? "None"}
             position={tooltipPosition}
           >
-            <span className="flex gap-1 items-center text-brand-secondary text-xs">
+            <span className="flex gap-1 items-center text-custom-text-200 text-xs">
               {getPriorityIcon(
                 issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                "text-sm"
+                `text-sm ${
+                  issue.priority === "urgent"
+                    ? "text-red-500"
+                    : issue.priority === "high"
+                    ? "text-orange-500"
+                    : issue.priority === "medium"
+                    ? "text-yellow-500"
+                    : issue.priority === "low"
+                    ? "text-green-500"
+                    : "text-custom-text-200"
+                }`
               )}
               {noBorder
                 ? issue.priority && issue.priority !== ""
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index a38ff55a7..6f679fe7c 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -10,7 +10,6 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
 // icons
 import { getStateGroupIcon } from "components/icons";
 // helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { getStatesList } from "helpers/state.helper";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
@@ -67,10 +66,10 @@ export const ViewStateSelect: React.FC<Props> = ({
   const stateLabel = (
     <Tooltip
       tooltipHeading="State"
-      tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+      tooltipContent={selectedOption?.name ?? ""}
       position={tooltipPosition}
     >
-      <div className="flex items-center cursor-pointer w-full gap-2 text-brand-secondary">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
         <span className="h-4 w-4">
           {selectedOption &&
             getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index c7566dc77..c420e45b4 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -31,7 +31,7 @@ type Props = {
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#858E96",
+  color: "rgb(var(--color-text-200))",
 };
 
 export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
@@ -98,10 +98,13 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               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 rounded-lg bg-brand-surface-1 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -109,8 +112,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
-                                open ? "text-brand-base" : "text-brand-secondary"
+                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-custom-text-100 focus:outline-none ${
+                                open ? "text-custom-text-100" : "text-custom-text-200"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
@@ -122,7 +125,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                 />
                               )}
                               <ChevronDownIcon
-                                className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
                                 aria-hidden="true"
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
index 7b1a04b91..f0198b247 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -32,7 +32,7 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  color: "#858E96",
+  color: "rgb(var(--color-text-200))",
 };
 
 type Ref = HTMLDivElement;
@@ -115,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
 
   return (
     <div
-      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5 ${
+      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 ${
         labelForm ? "" : "hidden"
       }`}
       ref={ref}
@@ -126,7 +126,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
             <>
               <Popover.Button
                 className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                  open ? "text-brand-base" : "text-brand-secondary"
+                  open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 <span
@@ -136,7 +136,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
                   }}
                 />
                 <ChevronDownIcon
-                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                     open ? "text-gray-600" : "text-gray-400"
                   }`}
                   aria-hidden="true"
diff --git a/apps/app/components/labels/delete-label-modal.tsx b/apps/app/components/labels/delete-label-modal.tsx
index dd3df0fc4..e45926bfa 100644
--- a/apps/app/components/labels/delete-label-modal.tsx
+++ b/apps/app/components/labels/delete-label-modal.tsx
@@ -77,7 +77,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -91,7 +91,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
               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-brand-base border border-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -103,15 +103,15 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Label
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-brand-base">{data?.name}</span>? The
-                          label will be removed from all the issues.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
+                          The label will be removed from all the issues.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/apps/app/components/labels/labels-list-modal.tsx
index 23f60ab7f..bc270d9e0 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/apps/app/components/labels/labels-list-modal.tsx
@@ -83,7 +83,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -96,80 +96,75 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
               <Combobox>
                 <div className="relative m-1">
                   <MagnifyingGlassIcon
-                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                     aria-hidden="true"
                   />
                   <Combobox.Input
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                     placeholder="Search..."
                     onChange={(e) => setQuery(e.target.value)}
                   />
                 </div>
 
-                <Combobox.Options
-                  static
-                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                >
+                <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                   {filteredLabels.length > 0 && (
-                    <>
-                      <li className="p-2">
-                        {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                            Labels
-                          </h2>
-                        )}
-                        <ul className="text-sm text-gray-700">
-                          {filteredLabels.map((label) => {
-                            const children = issueLabels?.filter((l) => l.parent === label.id);
+                    <li className="p-2">
+                      {query === "" && (
+                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
+                          Labels
+                        </h2>
+                      )}
+                      <ul className="text-sm text-gray-700">
+                        {filteredLabels.map((label) => {
+                          const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                            if (
-                              (label.parent === "" || label.parent === null) && // issue does not have any other parent
-                              label.id !== parent?.id && // issue is not itself
-                              children?.length === 0 // issue doesn't have any othe children
-                            )
-                              return (
-                                <Combobox.Option
-                                  key={label.id}
-                                  value={{
-                                    name: label.name,
+                          if (
+                            (label.parent === "" || label.parent === null) && // issue does not have any other parent
+                            label.id !== parent?.id && // issue is not itself
+                            children?.length === 0 // issue doesn't have any othe children
+                          )
+                            return (
+                              <Combobox.Option
+                                key={label.id}
+                                value={{
+                                  name: label.name,
+                                }}
+                                className={({ active }) =>
+                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                    active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                  }`
+                                }
+                                onClick={() => {
+                                  addChildLabel(label);
+                                  handleClose();
+                                }}
+                              >
+                                <span
+                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: label.color !== "" ? label.color : "#000000",
                                   }}
-                                  className={({ active }) =>
-                                    `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                      active ? "bg-brand-surface-2 text-brand-base" : ""
-                                    }`
-                                  }
-                                  onClick={() => {
-                                    addChildLabel(label);
-                                    handleClose();
-                                  }}
-                                >
-                                  <span
-                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                    style={{
-                                      backgroundColor: label.color !== "" ? label.color : "#000000",
-                                    }}
-                                  />
-                                  {label.name}
-                                </Combobox.Option>
-                              );
-                          })}
-                        </ul>
-                      </li>
-                    </>
+                                />
+                                {label.name}
+                              </Combobox.Option>
+                            );
+                        })}
+                      </ul>
+                    </li>
                   )}
                 </Combobox.Options>
 
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
                     <RectangleStackIcon
-                      className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
+                      className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
-                    <p className="mt-4 text-sm text-brand-base">
+                    <p className="mt-4 text-sm text-custom-text-100">
                       We couldn{"'"}t find any label with that term. Please try again.
                     </p>
                   </div>
diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx
index f1a74f296..1ee04f932 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -76,7 +76,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
   return (
     <Disclosure
       as="div"
-      className="rounded-[10px] border border-brand-base bg-brand-base p-5 text-brand-base"
+      className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
@@ -112,7 +112,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <Disclosure.Button>
                 <span>
                   <ChevronDownIcon
-                    className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
+                    className={`h-4 w-4 text-custom-text-100 ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
               </Disclosure.Button>
@@ -132,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
+                    className="group flex items-center justify-between rounded-md border border-custom-border-100 p-2 text-sm"
                   >
                     <h5 className="flex items-center gap-3">
                       <span
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 58e6d2932..d305db1a6 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-base p-5">
+  <div className="gap-2 space-y-3 divide-y divide-custom-border-100 rounded-[10px]  border border-custom-border-100 bg-custom-background-100 p-5">
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index deece2ea5..b83092625 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -78,7 +78,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -92,7 +92,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
               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 border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -104,14 +104,14 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the module will be permanently removed. This
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index e94bc6d72..b5af60ca6 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -60,7 +60,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} Module
         </h3>
         <div className="space-y-3">
@@ -164,7 +164,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
           {status
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index e24e1dd9a..4117483c1 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index c06be46d5..3ab144739 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -126,7 +126,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -140,7 +140,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
               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 rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index 0f109ba6a..b739f0b1e 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
           backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color,
         }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
           style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
index be7052df0..441cb673a 100644
--- a/apps/app/components/modules/select/lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -59,7 +59,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           {selectedOption ? (
             <Avatar user={selectedOption} />
           ) : (
-            <UserCircleIcon className="h-4 w-4 text-brand-secondary" />
+            <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
           )}
           {selectedOption ? (
             selectedOption?.first_name && selectedOption.first_name !== "" ? (
@@ -68,7 +68,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
               selectedOption?.email
             )
           ) : (
-            <span className="text-brand-secondary">Lead</span>
+            <span className="text-custom-text-200">Lead</span>
           )}
         </div>
       }
diff --git a/apps/app/components/modules/select/members.tsx b/apps/app/components/modules/select/members.tsx
index c95331202..da2856217 100644
--- a/apps/app/components/modules/select/members.tsx
+++ b/apps/app/components/modules/select/members.tsx
@@ -50,16 +50,16 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-brand-secondary">{value.length} Assignees</span>
+              <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-              <span className="text-brand-secondary">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <span className="text-custom-text-200">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx
index 02b1a3a75..08192cd5d 100644
--- a/apps/app/components/modules/select/status.tsx
+++ b/apps/app/components/modules/select/status.tsx
@@ -39,11 +39,11 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
               />
             ) : (
               <Squares2X2Icon
-                className={`h-3 w-3 ${error ? "text-red-500" : "text-brand-secondary"}`}
+                className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
               />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
-              <span className={`${error ? "text-red-500" : "text-brand-secondary"}`}>Status</span>
+              <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
             )}
           </div>
         }
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index 937a0d6df..0e8dd0f89 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -53,7 +53,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
         <UserCircleIcon className="h-5 w-5" />
         <span>Lead</span>
       </div>
@@ -70,7 +70,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
                   selectedOption?.email
                 )
               ) : (
-                <span className="text-brand-secondary">No lead</span>
+                <span className="text-custom-text-200">No lead</span>
               )}
             </div>
           }
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index 2481aaeed..b41469863 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -49,7 +49,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
         <UserGroupIcon className="h-5 w-5" />
         <span>Members</span>
       </div>
@@ -57,11 +57,11 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-brand-secondary">
+            <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="flex items-center justify-center gap-2">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-brand-secondary">{value.length} Assignees</span>
+                  <span className="text-custom-text-200">{value.length} Assignees</span>
                 </div>
               ) : (
                 "No members"
diff --git a/apps/app/components/modules/sidebar-select/select-status.tsx b/apps/app/components/modules/sidebar-select/select-status.tsx
index 5d5ac9464..f67f40222 100644
--- a/apps/app/components/modules/sidebar-select/select-status.tsx
+++ b/apps/app/components/modules/sidebar-select/select-status.tsx
@@ -33,7 +33,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
             label={
               <span
                 className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-brand-base"
+                  value ? "" : "text-custom-text-100"
                 }`}
               >
                 <span
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 3b70814f7..5cb8e7d75 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -186,7 +186,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {module ? (
           <>
@@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     render={({ field: { value } }) => (
                       <CustomSelect
                         customButton={
-                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
+                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                             {capitalizeFirstLetter(`${watch("status")}`)}
                           </span>
                         }
@@ -222,8 +222,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            module.start_date ? "" : "text-brand-secondary"
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                            module.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -269,14 +269,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            module.target_date ? "" : "text-brand-secondary"
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                            module.target_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
@@ -329,7 +329,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold break-words w-full text-brand-base">
+                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
                         {module.name}
                       </h4>
                     </div>
@@ -349,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
+                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
                     {module.description}
                   </span>
                 </div>
@@ -381,12 +381,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   />
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
                         <ProgressBar
                           value={module.completed_issues}
@@ -400,7 +400,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </div>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -408,7 +408,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Progress</span>
+                        <span className="font-medium text-custom-text-200">Progress</span>
                         {!open && moduleIssues && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -430,9 +430,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             Invalid date. Please enter valid date.
                           </span>
                         </div>
@@ -445,7 +445,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
+                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -454,7 +454,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-brand-base">
+                              <div className="flex items-center gap-3 text-custom-text-100">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -484,7 +484,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -492,7 +492,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Other Information</span>
+                        <span className="font-medium text-custom-text-200">Other Information</span>
                       </div>
 
                       {module.total_issues > 0 ? (
@@ -507,9 +507,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
                         </div>
@@ -544,17 +544,17 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col border-t border-brand-base px-6 py-6 text-xs">
+            <div className="flex w-full flex-col border-t border-custom-border-100 px-6 py-6 text-xs">
               <div className="flex w-full items-center justify-between">
-                <h4 className="text-sm font-medium text-brand-secondary">Links</h4>
+                <h4 className="text-sm font-medium text-custom-text-200">Links</h4>
                 <button
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
                   onClick={() => setModuleLinkModal(true)}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </div>
-              <div className="mt-2 space-y-2 hover:bg-brand-surface-2">
+              <div className="mt-2 space-y-2 hover:bg-custom-background-80">
                 {memberRole && module.link_module && module.link_module.length > 0 ? (
                   <LinksList
                     links={module.link_module}
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index ac92bdcdd..16535e77f 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -131,14 +131,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
         data={module}
         user={user}
       />
-      <div className="flex flex-col divide-y divide-brand-base overflow-hidden rounded-[10px] border border-brand-base bg-brand-base text-xs">
+      <div className="flex flex-col divide-y divide-custom-border-100 overflow-hidden rounded-[10px] border border-custom-border-100 bg-custom-background-100 text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
               <Tooltip tooltipContent={module.name} position="top-left">
                 <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
                   <a className="w-auto max-w-[calc(100%-9rem)]">
-                    <h3 className="truncate break-words text-lg font-semibold text-brand-base">
+                    <h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
                       {truncateText(module.name, 75)}
                     </h3>
                   </a>
@@ -146,7 +146,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
               </Tooltip>
 
               <div className="flex items-center gap-1">
-                <div className="mr-2 flex whitespace-nowrap rounded bg-brand-surface-1 px-2.5 py-2 text-brand-secondary">
+                <div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
                   <span className="capitalize">{module?.status?.replace("-", " ")}</span>
                 </div>
                 {module.is_favorite ? (
@@ -155,7 +155,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
                   </button>
                 ) : (
                   <button type="button" onClick={handleAddToFavorites}>
-                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                   </button>
                 )}
 
@@ -181,24 +181,24 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
                 </CustomMenu>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-2 text-brand-secondary">
+            <div className="grid grid-cols-2 gap-2 text-custom-text-200">
               <div className="flex items-start gap-1">
                 <CalendarDaysIcon className="h-4 w-4" />
                 <span>Start:</span>
-                <span>{renderShortDateWithYearFormat(startDate)}</span>
+                <span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
               </div>
               <div className="flex items-start gap-1">
                 <TargetIcon className="h-4 w-4" />
                 <span>End:</span>
-                <span>{renderShortDateWithYearFormat(endDate)}</span>
+                <span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
               </div>
             </div>
           </div>
         </div>
-        <div className="flex h-20 flex-col items-end bg-brand-surface-2">
-          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-brand-secondary">
+        <div className="flex h-20 flex-col items-end bg-custom-background-80">
+          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
             <span>Progress</span>
-            <div className="bar relative h-1 w-full rounded bg-brand-surface-1">
+            <div className="bar relative h-1 w-full rounded bg-custom-background-90">
               <div
                 className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
                 style={{
@@ -208,7 +208,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
             </div>
             <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
           </div>
-          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-brand-secondary">
+          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
             <p>
               Last updated:
               <span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index 913607801..0390723b6 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -45,7 +45,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace, user }) =>
       }}
     >
       <div className="flex w-full max-w-xl flex-col gap-12">
-        <div className="flex flex-col gap-6 rounded-[10px] bg-brand-base p-7 shadow-md">
+        <div className="flex flex-col gap-6 rounded-[10px] bg-custom-background-100 p-7 shadow-md">
           <h2 className="text-xl font-medium">Invite co-workers to your team</h2>
           <div className="flex flex-col items-start justify-center gap-2.5">
             <span>Email</span>
diff --git a/apps/app/components/onboarding/onboarding-card.tsx b/apps/app/components/onboarding/onboarding-card.tsx
index 2ab3f8654..717c90375 100644
--- a/apps/app/components/onboarding/onboarding-card.tsx
+++ b/apps/app/components/onboarding/onboarding-card.tsx
@@ -23,7 +23,7 @@ export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
       <Image src={data.imgURL} height="180" width="450" alt={data.title} />
     </div>
     <h3 className="text-2xl font-medium">{data.title}</h3>
-    <p className="text-base text-brand-secondary">{data.description}</p>
-    <span className="text-base text-brand-secondary">{data.step}</span>
+    <p className="text-base text-custom-text-200">{data.description}</p>
+    <span className="text-base text-custom-text-200">{data.step}</span>
   </div>
 );
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 1e96bb143..e981839bd 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -67,10 +67,10 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
   return (
     <form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
       <div className="flex w-full max-w-xl flex-col gap-7">
-        <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+        <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
           <div className="flex flex-col gap-2 justify-center px-7 pt-7 pb-3.5">
-            <h3 className="text-base font-semibold text-brand-base">User Details</h3>
-            <p className="text-sm text-brand-secondary">
+            <h3 className="text-base font-semibold text-custom-text-100">User Details</h3>
+            <p className="text-sm text-custom-text-200">
               Enter your details as a first step to open your Plane account.
             </p>
           </div>
@@ -102,7 +102,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
             </div>
           </div>
 
-          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-7 pt-3.5 pb-7">
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-custom-border-100 px-7 pt-3.5 pb-7">
             <span>What is your role?</span>
             <div className="w-full">
               <Controller
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 0beef1419..80c0b4034 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -82,7 +82,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
     <div className="grid w-full place-items-center">
       <Tab.Group
         as="div"
-        className="flex h-[442px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
+        className="flex h-[442px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md"
         defaultIndex={currentTabValue(currentTab)}
         onChange={(i) => {
           switch (i) {
@@ -97,8 +97,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
       >
         <Tab.List as="div" className="flex flex-col gap-3 px-7 pt-7 pb-3.5">
           <div className="flex flex-col gap-2 justify-center">
-            <h3 className="text-base font-semibold text-brand-base">Workspace</h3>
-            <p className="text-sm text-brand-secondary">
+            <h3 className="text-base font-semibold text-custom-text-100">Workspace</h3>
+            <p className="text-sm text-custom-text-200">
               Create or join the workspace to get started with Plane.
             </p>
           </div>
@@ -107,8 +107,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
               className={({ selected }) =>
                 `rounded-3xl border px-4 py-2 outline-none ${
                   selected
-                    ? "border-brand-accent bg-brand-accent text-white font-medium"
-                    : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    ? "border-custom-primary bg-custom-primary text-white font-medium"
+                    : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80"
                 }`
               }
             >
@@ -118,8 +118,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
               className={({ selected }) =>
                 `rounded-3xl border px-4 py-2 outline-none ${
                   selected
-                    ? "border-brand-accent bg-brand-accent text-white font-medium"
-                    : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    ? "border-custom-primary bg-custom-primary text-white font-medium"
+                    : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80"
                 }`
               }
             >
@@ -159,7 +159,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                           <div className="text-sm font-medium">
                             {truncateText(invitation.workspace.name, 30)}
                           </div>
-                          <p className="text-sm text-brand-secondary">
+                          <p className="text-sm text-custom-text-200">
                             Invited by{" "}
                             {invitation.created_by_detail
                               ? invitation.created_by_detail.first_name
@@ -170,9 +170,9 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                           <button
                             className={`${
                               invitationsRespond.includes(invitation.id)
-                                ? "bg-brand-surface-2 text-brand-secondary"
-                                : "bg-brand-accent text-white"
-                            } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+                                ? "bg-custom-background-80 text-custom-text-200"
+                                : "bg-custom-primary text-white"
+                            } text-sm px-4 py-2 border border-custom-border-100 rounded-3xl`}
                             onClick={(e) => {
                               handleInvitation(
                                 invitation,
@@ -202,11 +202,11 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                             type="button"
                             className={`${
                               invitationsRespond.includes(invitation.id)
-                                ? "bg-brand-surface-2 text-brand-secondary"
-                                : "bg-brand-accent text-white"
-                            } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+                                ? "bg-custom-background-80 text-custom-text-200"
+                                : "bg-custom-primary text-white"
+                            } text-sm px-4 py-2 border border-custom-border-100 rounded-3xl`}
 
-                            // className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
+                            // className="h-4 w-4 rounded border-custom-border-100 text-custom-primary focus:ring-custom-primary"
                           /> */}
                         </div>
                       </label>
@@ -214,7 +214,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                   ))
                 ) : (
                   <div className="text-center">
-                    <h3 className="text-brand-secondary">{`You don't have any invitations yet.`}</h3>
+                    <h3 className="text-custom-text-200">{`You don't have any invitations yet.`}</h3>
                   </div>
                 )}
               </div>
diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
index d4098db93..29c83da07 100644
--- a/apps/app/components/pages/create-block.tsx
+++ b/apps/app/components/pages/create-block.tsx
@@ -96,7 +96,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
   return (
     <div className="relative">
       <form
-        className="flex flex-col items-center justify-between rounded border-2 border-brand-base p-2"
+        className="flex flex-col items-center justify-between rounded border-2 border-custom-border-100 p-2"
         onSubmit={handleSubmit(createPageBlock)}
       >
         <div className="flex min-h-[75px] w-full">
@@ -115,7 +115,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
 
         <div className="flex w-full items-center justify-end gap-2 p-1">
           <button type="submit">
-            <PaperAirplaneIcon className="h-5 w-5 text-brand-base" />
+            <PaperAirplaneIcon className="h-5 w-5 text-custom-text-100" />
           </button>
         </div>
       </form>
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 0b3fcb17c..95ede7ebe 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -280,7 +280,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div className="relative">
       <form
-        className="divide-y divide-brand-base rounded border border-brand-base shadow"
+        className="divide-y divide-custom-border-100 rounded border border-custom-border-100 shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
         <div className="pt-2">
@@ -295,7 +295,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               maxLength={255}
             />
           </div>
-          <div className="page-block-section relative -mt-2 text-brand-secondary">
+          <div className="page-block-section relative -mt-2 text-custom-text-200">
             <Controller
               name="description"
               control={control}
@@ -318,7 +318,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
                 else if (!value || !watch("description_html"))
                   return (
-                    <div className="h-32 w-full flex items-center justify-center text-brand-secondary text-sm" />
+                    <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
                   );
 
                 return (
@@ -344,8 +344,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
-                  iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${
+                  iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
@@ -361,7 +361,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
 
               <button
                 type="button"
-                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80"
                 onClick={() => setGptAssistantModal(true)}
               >
                 <SparklesIcon className="h-4 w-4" />
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
index 57e25b5f7..bf74f352a 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -152,7 +152,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -166,7 +166,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
               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 rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
index eaa7c2189..3d2c5e62d 100644
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -103,7 +103,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -117,7 +117,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
               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 border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -129,14 +129,14 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete Page-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the page will be permanently removed. This
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
index db466ff0d..b23daee18 100644
--- a/apps/app/components/pages/page-form.tsx
+++ b/apps/app/components/pages/page-form.tsx
@@ -59,7 +59,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
   return (
     <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} Page
         </h3>
         <div className="space-y-3">
diff --git a/apps/app/components/pages/pages-list/recent-pages-list.tsx b/apps/app/components/pages/pages-list/recent-pages-list.tsx
index ce66a6ce1..2a4942564 100644
--- a/apps/app/components/pages/pages-list/recent-pages-list.tsx
+++ b/apps/app/components/pages/pages-list/recent-pages-list.tsx
@@ -10,8 +10,10 @@ import pagesService from "services/pages.service";
 import { PagesView } from "components/pages";
 // ui
 import { EmptyState, Loader } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyPage from "public/empty-state/empty-page.svg";
+import emptyPage from "public/empty-state/page.svg";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
@@ -51,10 +53,17 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
           })
         ) : (
           <EmptyState
-            type="page"
-            title="Create New Page"
-            description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
-            imgURL={emptyPage}
+            title="Have your thoughts in place"
+            description="You can think of Pages as an AI-powered notepad."
+            image={emptyPage}
+            buttonText="New Page"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "d",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : (
diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index 7d1eac724..b1c8419f6 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -18,8 +18,10 @@ import {
 } from "components/pages";
 // ui
 import { EmptyState, Loader } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyPage from "public/empty-state/empty-page.svg";
+import emptyPage from "public/empty-state/page.svg";
 // types
 import { IPage, TPageViewProps } from "types";
 import {
@@ -208,7 +210,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
             viewType === "list" ? (
-              <ul role="list" className="divide-y divide-brand-base">
+              <ul role="list" className="divide-y divide-custom-border-100">
                 {pages.map((page) => (
                   <SinglePageListItem
                     key={page.id}
@@ -223,7 +225,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </ul>
             ) : viewType === "detailed" ? (
-              <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
+              <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
@@ -238,7 +240,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </div>
             ) : (
-              <div className="rounded-[10px] border border-brand-base">
+              <div className="rounded-[10px] border border-custom-border-100">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
@@ -255,10 +257,17 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
             )
           ) : (
             <EmptyState
-              type="page"
-              title="Create New Page"
-              description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
-              imgURL={emptyPage}
+              title="Have your thoughts in place"
+              description="You can think of Pages as an AI-powered notepad."
+              image={emptyPage}
+              buttonText="New Page"
+              buttonIcon={<PlusIcon className="h-4 w-4" />}
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "d",
+                });
+                document.dispatchEvent(e);
+              }}
             />
           )}
         </div>
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 898f4aba5..4b2c896ed 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -313,8 +313,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
             </div>
           ) : (
             <div
-              className={`group relative w-full rounded bg-brand-surface-2 text-brand-secondary ${
-                snapshot.isDragging ? "bg-brand-base p-4 shadow" : ""
+              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${
+                snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
@@ -329,7 +329,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-2 hidden items-center gap-2 bg-brand-surface-2 pl-4 group-hover:!flex ${
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
@@ -345,7 +345,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
                     iAmFeelingLucky ? "cursor-wait" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
@@ -361,7 +361,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -369,7 +369,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -377,7 +377,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-custom-background-90"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -426,7 +426,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
                         >
-                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 px-1.5 py-1 text-xs">
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
                             <LayerDiagonalIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
@@ -436,12 +436,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                     <TextArea
                       name="blockName"
                       value={block.name}
-                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-brand-base"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100"
                       noPadding
                     />
                   </div>
                   {block?.description_stripped.length > 0 && (
-                    <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
+                    <p className="mt-3 h-5 truncate text-sm font-normal text-custom-text-200">
                       {block.description_stripped}
                     </p>
                   )}
diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/apps/app/components/pages/single-page-detailed-item.tsx
index 4be70384e..fcd6ca54f 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -20,7 +20,11 @@ import {
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { renderShortTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
+import {
+  render24HourFormatTime,
+  renderShortDate,
+  renderLongDateFormat,
+} from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -75,7 +79,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 page.label_details.map((label) => (
                   <div
                     key={label.id}
-                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                    className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs"
                     style={{
                       backgroundColor: `${
                         label?.color && label.color !== "" ? label.color : "#000000"
@@ -97,11 +101,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
             <div className="flex items-center gap-2">
               <Tooltip
                 tooltipContent={`Last updated at ${
-                  renderShortTime(page.updated_at) +
+                  render24HourFormatTime(page.updated_at) +
                   ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
                 } on ${renderShortDate(page.updated_at)}`}
               >
-                <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+                <p className="text-sm text-custom-text-200">
+                  {render24HourFormatTime(page.updated_at)}
+                </p>
               </Tooltip>
               {page.is_favorite ? (
                 <button
@@ -125,7 +131,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 " color="#858E96" />
+                  <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                 </button>
               )}
               {page.created_by === user?.id && (
@@ -146,9 +152,9 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     }}
                   >
                     {page.access ? (
-                      <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                      <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     ) : (
-                      <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                      <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     )}
                   </button>
                 </Tooltip>
@@ -162,7 +168,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 } on ${renderLongDateFormat(`${page.created_at}`)}`}
               >
                 <span>
-                  <ExclamationIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                  <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
                 </span>
               </Tooltip>
               <CustomMenu verticalEllipsis>
@@ -205,7 +211,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-brand-secondary">
+          <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
             {page.blocks.length > 0
               ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
               : null}
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index 876d94102..1832aa20d 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -21,7 +21,11 @@ import {
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { renderLongDateFormat, renderShortDate, renderShortTime } from "helpers/date-time.helper";
+import {
+  renderLongDateFormat,
+  renderShortDate,
+  render24HourFormatTime,
+} from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -69,18 +73,18 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-surface-2">
+          <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <DocumentTextIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm text-brand-base">
+                <p className="mr-2 truncate text-sm text-custom-text-100">
                   {truncateText(page.name, 75)}
                 </p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
                       key={label.id}
-                      className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                      className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${label?.color}20`,
                       }}
@@ -98,11 +102,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(
                       page.updated_at
                     )} on ${renderShortDate(page.updated_at)}`}
                   >
-                    <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+                    <p className="text-sm text-custom-text-200">
+                      {render24HourFormatTime(page.updated_at)}
+                    </p>
                   </Tooltip>
                   {page.is_favorite ? (
                     <button
@@ -124,7 +130,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   {page.created_by === user?.id && (
@@ -145,9 +151,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         {page.access ? (
-                          <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                          <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         ) : (
-                          <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                          <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         )}
                       </button>
                     </Tooltip>
@@ -161,7 +167,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                     } on ${renderLongDateFormat(`${page.created_at}`)}`}
                   >
                     <span>
-                      <ExclamationIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                      <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
                     </span>
                   </Tooltip>
 
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index ffa67c344..c6a0538a0 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -53,8 +53,8 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
               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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -65,12 +65,12 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
                           <span className="font-bold">{data?.email}</span>? They will no longer have
                           access to this project. This action cannot be undone.
@@ -79,7 +79,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index f17558d9b..5f289d7c5 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -170,7 +170,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -184,8 +184,8 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
               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="transform rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
-                <div className="relative h-36 w-full rounded-t-lg bg-brand-surface-2">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
                   {watch("cover_image") !== null && (
                     <img
                       src={watch("cover_image")!}
@@ -328,7 +328,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                     </div>
                   </div>
 
-                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-brand-base px-4 py-3">
+                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-100 px-4 py-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Adding project..." : "Add Project"}
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index eabe85f2d..0a0266fbc 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -98,7 +98,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -112,7 +112,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
               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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -126,17 +126,19 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete project{" "}
                       <span className="break-words font-semibold">{selectedProject?.name}</span>?
                       All of the data related to the project will be permanently removed. This
                       action cannot be undone
                     </p>
                   </span>
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the project name{" "}
-                      <span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
+                      <span className="font-medium text-custom-text-100">
+                        {selectedProject?.name}
+                      </span>{" "}
                       to continue:
                     </p>
                     <Input
@@ -150,10 +152,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                       name="projectName"
                     />
                   </div>
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="text-sm">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete my project</span> below:
+                      <span className="font-medium text-custom-text-100">delete my project</span>{" "}
+                      below:
                     </p>
                     <Input
                       type="text"
diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index 83933dffb..e0517ac6a 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -59,9 +59,12 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               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-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-custom-text-100"
+                  >
                     Join Project?
                   </Dialog.Title>
                   <p>
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index 65643d834..7435d2069 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -172,18 +172,19 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
               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 rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="space-y-5 mb-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <div className="space-y-5">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Invite Members
                     </Dialog.Title>
-                  </div>
-
-                  <div className="text-sm">
-                    <div className="grid grid-cols-12 gap-x-4 mb-3 text-sm">
-                      <h6 className="col-span-7 px-1">Email</h6>
-                      <h6 className="col-span-4 px-1">Role</h6>
+                    <div className="mt-2">
+                      <p className="text-sm text-custom-text-200">
+                        Invite members to work on your project.
+                      </p>
                     </div>
 
                     <div className="space-y-4 mb-3">
@@ -201,7 +202,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                 <CustomSearchSelect
                                   value={value}
                                   customButton={
-                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 text-brand-secondary hover:text-brand-base hover:bg-brand-surface-2 focus:outline-none px-3 py-2 text-sm text-left">
+                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-100 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
                                       {value && value !== "" ? (
                                         <div className="flex items-center gap-2">
                                           <Avatar
@@ -275,7 +276,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                   className="self-center place-items-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <XMarkIcon className="h-4 w-4 text-brand-secondary" />
+                                  <XMarkIcon className="h-4 w-4 text-custom-text-200" />
                                 </button>
                               )}
                             </div>
@@ -288,7 +289,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <button
                       type="button"
-                      className="flex items-center gap-2 outline-brand-accent bg-transparent text-brand-accent text-sm font-medium py-2 pr-3"
+                      className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
                       <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/settings-header.tsx b/apps/app/components/project/settings-header.tsx
index 0aff5350c..8dcff5138 100644
--- a/apps/app/components/project/settings-header.tsx
+++ b/apps/app/components/project/settings-header.tsx
@@ -4,7 +4,7 @@ export const SettingsHeader = () => (
   <div className="mb-8 space-y-6">
     <div>
       <h3 className="text-2xl font-semibold">Project Settings</h3>
-      <p className="mt-1 text-sm text-brand-secondary">
+      <p className="mt-1 text-sm text-custom-text-200">
         This information will be displayed to every member of the project.
       </p>
     </div>
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index adee30bb5..33abb5875 100644
--- a/apps/app/components/project/settings/single-label.tsx
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -40,7 +40,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
   return (
     <>
       {children && children.length === 0 ? (
-        <div className="gap-2 space-y-3 divide-y rounded-md border  border-brand-base p-3 md:w-2/3">
+        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-100 p-3 md:w-2/3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <span
@@ -61,12 +61,12 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
           </div>
           <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
             <div className="h-8 w-8 flex-shrink-0">
-              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
+              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-custom-background-80">
                 {({ open }) => (
                   <>
                     <Popover.Button
                       className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                        open ? "text-brand-base" : "text-brand-secondary"
+                        open ? "text-custom-text-100" : "text-custom-text-200"
                       }`}
                     >
                       {watch("color") && watch("color") !== "" && (
@@ -123,13 +123,13 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
           </div>
         </div>
       ) : (
-        <div className="rounded-md bg-brand-surface-2 p-4 text-brand-base">
+        <div className="rounded-md bg-custom-background-80 p-4 text-custom-text-100">
           <h3 className="flex items-center gap-2 font-medium leading-5">
             <RectangleGroupIcon className="h-5 w-5" />
             This is the label group title
           </h3>
           <div className="mt-4 pl-5">
-            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-brand-surface-1">
+            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-custom-background-90">
               <h5 className="flex items-center gap-2">
                 <div className="h-2 w-2 rounded-full bg-red-600" />
                 This is the label title
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index f9b6c5760..a4125ffac 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -151,10 +151,12 @@ export const ProjectSidebarList: FC = () => {
         data={projectToDelete}
         user={user}
       />
-      <div className="mt-2.5 h-full overflow-y-auto border-t border-brand-base bg-brand-sidebar pt-2.5">
+      <div className="mt-2.5 h-full overflow-y-auto border-t border-custom-sidebar-border-100 bg-custom-sidebar-background-100 pt-2.5">
         {favoriteProjects && favoriteProjects.length > 0 && (
           <div className="mt-3 flex flex-col space-y-2 px-3">
-            {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
+            {!sidebarCollapse && (
+              <h5 className="text-sm font-semibold text-custom-sidebar-text-200">Favorites</h5>
+            )}
             {favoriteProjects.map((favoriteProject) => {
               const project = favoriteProject.project_detail;
 
@@ -172,7 +174,9 @@ export const ProjectSidebarList: FC = () => {
           </div>
         )}
         <div className="flex flex-col space-y-2 p-3">
-          {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
+          {!sidebarCollapse && (
+            <h5 className="text-sm font-semibold text-custom-sidebar-text-200">Projects</h5>
+          )}
           {projects ? (
             <>
               {normalProjects.length > 0 ? (
@@ -189,13 +193,13 @@ export const ProjectSidebarList: FC = () => {
               ) : (
                 <div className="space-y-3 text-center">
                   {!sidebarCollapse && (
-                    <h4 className="text-sm text-brand-secondary">
+                    <h4 className="text-sm text-custom-text-200">
                       You don{"'"}t have any project yet
                     </h4>
                   )}
                   <button
                     type="button"
-                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-brand-surface-2 p-2 text-xs text-brand-base"
+                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-custom-background-80 p-2 text-xs text-custom-text-100"
                     onClick={() => setCreateProjectModal(true)}
                   >
                     <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/single-integration-card.tsx b/apps/app/components/project/single-integration-card.tsx
index 584c65fe8..7a78d8048 100644
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/apps/app/components/project/single-integration-card.tsx
@@ -93,7 +93,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12 flex-shrink-0">
               <Image
@@ -105,7 +105,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
               <h3 className="flex items-center gap-4 text-xl font-semibold">
                 {integration.integration_detail.title}
               </h3>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
             </div>
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index b4fe9c1b1..a66df7413 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -138,7 +138,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   return (
     <>
       {members ? (
-        <div className="flex flex-col rounded-[10px] bg-brand-base shadow">
+        <div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
           <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
             <a>
               <div className="relative h-32 w-full rounded-t-[10px]">
@@ -178,11 +178,11 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
               </div>
             </a>
           </Link>
-          <div className="flex h-full flex-col rounded-b-[10px] p-4 text-brand-secondary">
+          <div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
             <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
               <a>
                 <div className="flex items-center gap-1">
-                  <h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
+                  <h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
                   {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
                       {renderEmoji(project.emoji)}
@@ -216,7 +216,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                 <div className="flex items-center">
                   {(isOwner || isMember) && (
                     <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
-                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-brand-surface-1">
+                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-custom-background-90">
                         <PencilIcon className="h-4 w-4" />
                       </a>
                     </Link>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 51727b5b3..47f4f92f5 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -83,7 +83,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
     <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
       {({ open }) => (
         <>
-          <div className="flex items-center gap-x-1">
+          <div className="flex items-center gap-x-1 text-custom-sidebar-text-100">
             <Disclosure.Button
               as="div"
               className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
@@ -111,9 +111,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
                 )}
 
                 {!sidebarCollapse && (
-                  <p className="overflow-hidden text-ellipsis text-[0.875rem]">
+                  <h5 className={`overflow-hidden text-sm ${open ? "" : "text-custom-text-200"}`}>
                     {truncateText(project?.name, 20)}
-                  </p>
+                  </h5>
                 )}
               </div>
               {!sidebarCollapse && (
@@ -182,16 +182,18 @@ export const SingleSidebarProject: React.FC<Props> = ({
                     <a
                       className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
                         router.asPath.includes(item.href)
-                          ? "bg-brand-surface-2 text-brand-base"
-                          : "text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-secondary focus:bg-brand-surface-2 focus:text-brand-secondary"
+                          ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 focus:bg-custom-sidebar-background-90"
                       } ${sidebarCollapse ? "justify-center" : ""}`}
                     >
                       <div className="grid place-items-center">
                         <item.icon
-                          className={`h-5 w-5 flex-shrink-0 text-brand-secondary ${
-                            !sidebarCollapse ? "mr-3" : ""
-                          }`}
-                          color="#858e96"
+                          className={`h-5 w-5 flex-shrink-0 ${!sidebarCollapse ? "mr-3" : ""}`}
+                          color={
+                            router.asPath.includes(item.href)
+                              ? "rgb(var(--color-sidebar-text-100))"
+                              : "rgb(var(--color-sidebar-text-200))"
+                          }
                           aria-hidden="true"
                         />
                       </div>
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 874f7da47..944a1179a 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -145,7 +145,8 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         uploadHandler: uploadImageHandler,
         createPlaceholder() {
           const div = document.createElement("div");
-          div.className = "w-full aspect-video bg-brand-surface-2 animate-pulse";
+          div.className =
+            "w-full aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
           return div;
         },
       }),
@@ -185,10 +186,10 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-3 relative focus:outline-none rounded-md focus:border-brand-base ${
-            noBorder ? "" : "border border-brand-base"
+          `p-3 relative focus:outline-none rounded-md focus:border-custom-border-100 ${
+            noBorder ? "" : "border border-custom-border-100"
           } ${
-            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+            borderOnFocus ? "focus:border border-custom-border-100" : "focus:border-0"
           } ${customClassName}`,
         ]}
         editable={editable}
diff --git a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
index e8e081370..81aed8d20 100644
--- a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -209,8 +209,8 @@ export const CustomFloatingToolbar: React.FC<Props> = ({
   }, [clickEdit]);
 
   return (
-    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
-      <div className="flex items-center gap-y-2 divide-x divide-brand-base">
+    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-custom-border-100 rounded border border-custom-border-100 bg-custom-background-80 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-y-2 divide-x divide-custom-border-100">
         <div className="flex items-center gap-x-1 px-2">
           <ToggleHeadingButton
             attrs={{
@@ -242,7 +242,7 @@ export const CustomFloatingToolbar: React.FC<Props> = ({
           <div className="flex items-center gap-x-1 px-2">
             <button
               type="button"
-              className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+              className="rounded py-1 px-1.5 text-xs hover:bg-custom-background-90"
               onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
             >
               AI
diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx
index a47c45c1a..045736b99 100644
--- a/apps/app/components/rich-text-editor/toolbar/link.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/link.tsx
@@ -173,12 +173,15 @@ export const FloatingLinkToolbar = () => {
   return (
     <>
       {!isEditing && (
-        <FloatingToolbar className="rounded bg-brand-surface-2 p-1 shadow-lg">
+        <FloatingToolbar className="rounded bg-custom-background-80 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}
       {!isEditing && empty && (
-        <FloatingToolbar positioner={linkPositioner} className="rounded bg-brand-surface-2 p-1 shadow-lg">
+        <FloatingToolbar
+          positioner={linkPositioner}
+          className="rounded bg-custom-background-80 p-1 shadow-lg"
+        >
           {linkEditButtons}
         </FloatingToolbar>
       )}
diff --git a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
index d8f8e24e2..20f49b6db 100644
--- a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
@@ -8,7 +8,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })}
-        className="rounded p-1 hover:bg-brand-surface-1"
+        className="rounded p-1 hover:bg-custom-background-90"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +28,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => commands.deleteTable()}
-        className="rounded p-1 hover:bg-brand-surface-1"
+        className="rounded p-1 hover:bg-custom-background-90"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/app/components/search-listbox/index.tsx b/apps/app/components/search-listbox/index.tsx
index cbbc6cf5b..863179f5f 100644
--- a/apps/app/components/search-listbox/index.tsx
+++ b/apps/app/components/search-listbox/index.tsx
@@ -84,14 +84,14 @@ const SearchListbox: React.FC<Props> = ({
         <>
           <Combobox.Label className="sr-only">{title}</Combobox.Label>
           <Combobox.Button
-            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
+            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
               buttonClassName || ""
             }`}
           >
             {icon ?? null}
             <span
               className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-brand-base"
+                value === null || value === undefined ? "" : "text-custom-text-100"
               }`}
             >
               {Array.isArray(value)
@@ -110,7 +110,7 @@ const SearchListbox: React.FC<Props> = ({
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-brand-surface-2 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
+              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-custom-background-80 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
                 optionsFontsize === "sm"
                   ? "text-xs"
                   : optionsFontsize === "md"
@@ -139,7 +139,7 @@ const SearchListbox: React.FC<Props> = ({
                         className={({ active }) =>
                           `${
                             active ? "bg-indigo-50" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-custom-text-100`
                         }
                         value={option.value}
                       >
@@ -148,12 +148,12 @@ const SearchListbox: React.FC<Props> = ({
                       </Combobox.Option>
                     ))
                   ) : (
-                    <p className="text-xs text-brand-secondary px-2">
+                    <p className="text-xs text-custom-text-200 px-2">
                       No {title.toLowerCase()} found
                     </p>
                   )
                 ) : (
-                  <p className="text-xs text-brand-secondary px-2">Loading...</p>
+                  <p className="text-xs text-custom-text-200 px-2">Loading...</p>
                 )}
               </div>
             </Combobox.Options>
diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
index dca001932..ad7f38c4e 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -36,7 +36,7 @@ type Props = {
 const defaultValues: Partial<IState> = {
   name: "",
   description: "",
-  color: "#858e96",
+  color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
@@ -128,10 +128,13 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               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-brand-surface-2 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Create State
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
@@ -177,8 +180,8 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                           {({ open }) => (
                             <>
                               <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                  open ? "text-brand-base" : "text-brand-secondary"
+                                className={`group inline-flex items-center rounded-md bg-custom-background-80 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-custom-text-100" : "text-custom-text-200"
                                 }`}
                               >
                                 <span>Color</span>
@@ -191,7 +194,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                   />
                                 )}
                                 <ChevronDownIcon
-                                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                     open ? "text-gray-600" : "text-gray-400"
                                   }`}
                                   aria-hidden="true"
diff --git a/apps/app/components/states/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
index 94062878f..87ad14731 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -35,7 +35,7 @@ export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "ca
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#858e96",
+  color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
@@ -169,15 +169,16 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-brand-base p-5"
+      className="flex items-center gap-x-2 rounded-[10px] bg-custom-background-100 p-5"
     >
       <div className="flex-shrink-0">
         <Popover className="relative flex h-full w-full items-center justify-center">
           {({ open }) => (
             <>
               <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-brand-base" : "text-brand-secondary"
-                  }`}
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
               >
                 {watch("color") && watch("color") !== "" && (
                   <span
@@ -229,7 +230,9 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
           name="group"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}  >
+            <Tooltip
+              tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
+            >
               <div>
                 <CustomSelect
                   disabled={groupLength === 1}
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index a92f235c4..bbc115ef6 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -108,8 +108,8 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
               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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -120,16 +120,16 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-brand-base">{data?.name}</span>? All of
-                          the data related to the state will be permanently removed. This action
-                          cannot be undone.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
+                          All of the data related to the state will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index 8bf4198fe..589648357 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -160,19 +160,19 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 border-brand-base bg-brand-base p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
+    <div className="group flex items-center justify-between gap-2 border-custom-border-100 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
       <div className="flex items-center gap-3">
         {getStateGroupIcon(state.group, "20", "20", state.color)}
         <div>
           <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-brand-secondary">{state.description}</p>
+          <p className="text-xs text-custom-text-200">{state.description}</p>
         </div>
       </div>
       <div className="flex items-center gap-2">
         {index !== 0 && (
           <button
             type="button"
-            className="hidden text-brand-secondary group-hover:inline-block"
+            className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
             <ArrowUpIcon className="h-4 w-4" />
@@ -181,18 +181,18 @@ export const SingleState: React.FC<Props> = ({
         {!(index === groupLength - 1) && (
           <button
             type="button"
-            className="hidden text-brand-secondary group-hover:inline-block"
+            className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
             <ArrowDownIcon className="h-4 w-4" />
           </button>
         )}
         {state.default ? (
-          <span className="text-xs text-brand-secondary">Default</span>
+          <span className="text-xs text-custom-text-200">Default</span>
         ) : (
           <button
             type="button"
-            className="hidden text-xs text-brand-secondary group-hover:inline-block"
+            className="hidden text-xs text-custom-text-200 group-hover:inline-block"
             onClick={handleMakeDefault}
             disabled={isSubmitting}
           >
@@ -201,7 +201,7 @@ export const SingleState: React.FC<Props> = ({
         )}
 
         <button type="button" className="grid place-items-center" onClick={handleEditState}>
-          <PencilSquareIcon className="h-4 w-4 text-brand-secondary" />
+          <PencilSquareIcon className="h-4 w-4 text-custom-text-200" />
         </button>
         <button
           type="button"
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index c91541aaa..c8f9f791b 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -37,7 +37,7 @@ export const Avatar: React.FC<AvatarProps> = ({
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`rounded-full border-2 ${
-          index ? "border-brand-surface-1 bg-brand-surface-2" : "border-transparent"
+          index ? "border-custom-border-100 bg-custom-background-80" : "border-transparent"
         }`}
         style={{
           height: height,
@@ -52,7 +52,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       </div>
     ) : (
       <div
-        className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
+        className="grid place-items-center rounded-full border-2 border-custom-border-100 bg-gray-700 text-xs capitalize text-white"
         style={{
           height: height,
           width: width,
@@ -90,7 +90,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({
 
   if ((users && users.length === 0) || (userIds && userIds.length === 0))
     return (
-      <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
+      <div className="h-5 w-5 rounded-full border-2 border-white bg-custom-background-80">
         <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
       </div>
     );
diff --git a/apps/app/components/ui/buttons/primary-button.tsx b/apps/app/components/ui/buttons/primary-button.tsx
index d86227e3a..357832f4e 100644
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/apps/app/components/ui/buttons/primary-button.tsx
@@ -13,7 +13,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-brand-accent font-medium duration-300 ${
+    className={`${className} border border-custom-primary font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
@@ -25,8 +25,8 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
         : ""
     } ${
       outline
-        ? "bg-transparent text-brand-accent hover:bg-brand-accent hover:text-white"
-        : "text-white bg-brand-accent hover:border-opacity-90 hover:bg-opacity-90"
+        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
+        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
     }  ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/app/components/ui/buttons/secondary-button.tsx b/apps/app/components/ui/buttons/secondary-button.tsx
index 4b857a72c..c65b3a2df 100644
--- a/apps/app/components/ui/buttons/secondary-button.tsx
+++ b/apps/app/components/ui/buttons/secondary-button.tsx
@@ -13,16 +13,16 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-brand-base font-medium duration-300 ${
+    className={`${className} border border-custom-border-100 font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
         ? "rounded-md px-3.5 py-2 text-sm"
         : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-brand-base bg-brand-surface-1" : ""} ${
+    } ${disabled ? "cursor-not-allowed border-custom-border-100 bg-custom-background-90" : ""} ${
       outline
-        ? "bg-transparent hover:bg-brand-surface-2"
-        : "bg-brand-surface-2 hover:border-opacity-70 hover:bg-opacity-70"
+        ? "bg-transparent hover:bg-custom-background-80"
+        : "bg-custom-background-80 hover:border-opacity-70 hover:bg-opacity-70"
     } ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/app/components/ui/circular-progress.tsx b/apps/app/components/ui/circular-progress.tsx
new file mode 100644
index 000000000..af808ee8a
--- /dev/null
+++ b/apps/app/components/ui/circular-progress.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+
+export const CircularProgress = ({ progress }: { progress: number }) => {
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const calcCircumference = 2 * Math.PI * radius;
+    setCircumference(calcCircumference);
+  }, []);
+
+  const progressAngle = (progress / 100) * 360 >= 360 ? 359.9 : (progress / 100) * 360;
+  const progressX = 50 + Math.cos((progressAngle - 90) * (Math.PI / 180)) * 40;
+  const progressY = 50 + Math.sin((progressAngle - 90) * (Math.PI / 180)) * 40;
+
+  return (
+    <div className="relative h-5 w-5">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className="stroke-current"
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <path
+          className="fill-current"
+          d={`M50 10
+            A40 40 0 ${progress > 50 ? 1 : 0} 1 ${progressX} ${progressY}
+            L50 50 Z`}
+          strokeWidth="12"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index 755318b34..3977b6152 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -37,14 +37,14 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
       }`}
     >
       <div
-        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-1 p-2 text-xs shadow-lg`}
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-100 bg-custom-background-90 p-2 text-xs shadow-lg`}
         style={{
           left: `${position.x}px`,
           top: `${position.y}px`,
         }}
       >
         {title && (
-          <h4 className="border-b border-brand-base px-1 py-1 pb-2 text-[0.8rem] font-medium">
+          <h4 className="border-b border-custom-border-100 px-1 py-1 pb-2 text-[0.8rem] font-medium">
             {title}
           </h4>
         )}
@@ -75,7 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     {renderAs === "a" ? (
       <Link href={href}>
         <a
-          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
         >
           <>
             {Icon && <Icon />}
@@ -86,7 +86,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     ) : (
       <button
         type="button"
-        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
         onClick={onClick}
       >
         <>
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index 958453b28..e42e49d21 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -59,7 +59,7 @@ const CustomMenu = ({
             {ellipsis || verticalEllipsis ? (
               <Menu.Button
                 type="button"
-                className="relative grid place-items-center rounded p-1 text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
+                className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
               >
                 <EllipsisHorizontalIcon
                   className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
@@ -68,8 +68,8 @@ const CustomMenu = ({
             ) : (
               <Menu.Button
                 type="button"
-                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-2 ${
-                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-custom-background-80 ${
+                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 } ${
                   textAlignment === "right"
                     ? "text-right"
@@ -79,7 +79,7 @@ const CustomMenu = ({
                 } ${
                   noBorder
                     ? "rounded-md"
-                    : "rounded-md border border-brand-base shadow-sm focus:outline-none"
+                    : "rounded-md border border-custom-border-100 shadow-sm focus:outline-none"
                 } ${
                   width === "sm"
                     ? "w-10"
@@ -133,8 +133,8 @@ const CustomMenu = ({
                 : "min-w-full"
             } ${
               menuItemsWhiteBg
-                ? "border-brand-surface-1 bg-brand-base"
-                : "border-brand-base bg-brand-surface-1"
+                ? "border-custom-border-200 bg-custom-background-100"
+                : "border-custom-border-100 bg-custom-background-90"
             } ${menuItemsClassName}`}
           >
             <div className="py-1">{children}</div>
@@ -158,8 +158,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <Link href={href ?? ""}>
           <a
             className={`${className} ${
-              active ? "bg-brand-surface-2" : ""
-            } hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+              active ? "bg-custom-background-80" : ""
+            } hover:text-custom-text-200 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
             onClick={close}
           >
             {children}
@@ -169,8 +169,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <button
           type="button"
           className={`${className} ${
-            active ? "bg-brand-surface-2" : ""
-          } hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+            active ? "bg-custom-background-80" : ""
+          } hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
           onClick={onClick}
         >
           {children}
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 0eb82305e..1a367578d 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -81,8 +81,8 @@ export const CustomSearchSelect = ({
             <Combobox.Button as="div">{customButton}</Combobox.Button>
           ) : (
             <Combobox.Button
-              className={`flex w-full border border-brand-base ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+              className={`flex w-full border border-custom-border-100 ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
               } ${
                 input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
               } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
@@ -110,18 +110,18 @@ export const CustomSearchSelect = ({
             leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
-              className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
+              className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-100 p-2 ${
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+              } z-10 origin-top-right rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
                 dropdownWidth ? dropdownWidth : ``
               } `}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-100 bg-custom-background-90 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Type to search..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -147,9 +147,9 @@ export const CustomSearchSelect = ({
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `${active || selected ? "bg-brand-surface-2" : ""} ${
-                            selected ? "font-medium" : ""
-                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                          `${active || selected ? "bg-custom-background-80" : ""} ${
+                            selected ? "text-custom-text-100" : "text-custom-text-200"
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
                         }
                       >
                         {({ active, selected }) => (
@@ -157,7 +157,7 @@ export const CustomSearchSelect = ({
                             {option.content}
                             {multiple ? (
                               <div
-                                className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
+                                className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
                                   active || selected ? "opacity-100" : "opacity-0"
                                 }`}
                               >
@@ -177,11 +177,11 @@ export const CustomSearchSelect = ({
                   ) : (
                     <span className="flex items-center gap-2 p-1">
                       {noResultIcon && noResultIcon}
-                      <p className="text-left text-brand-secondary ">No matching results</p>
+                      <p className="text-left text-custom-text-200 ">No matching results</p>
                     </span>
                   )
                 ) : (
-                  <p className="text-center text-brand-secondary">Loading...</p>
+                  <p className="text-center text-custom-text-200">Loading...</p>
                 )}
               </div>
               {footerOption}
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index ec55bf29a..be26ec5be 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -54,9 +54,11 @@ const CustomSelect = ({
       ) : (
         <Listbox.Button
           className={`flex w-full ${
-            disabled ? "cursor-not-allowed text-brand-secondary" : "cursor-pointer hover:bg-brand-surface-2"
-          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
-            input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : "cursor-pointer hover:bg-custom-background-80"
+          } items-center justify-between gap-1 rounded-md border border-custom-border-100 shadow-sm duration-300 focus:outline-none ${
+            input ? "border-custom-border-100 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"
               ? "text-right"
@@ -81,11 +83,11 @@ const CustomSelect = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Listbox.Options
-        className={`${optionsClassName} absolute border border-brand-base ${
+        className={`${optionsClassName} absolute border border-custom-border-100 ${
           position === "right" ? "right-0" : "left-0"
         } ${
           verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
           width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
         } ${input ? "max-h-48" : ""} ${
           maxHeight === "lg"
@@ -115,9 +117,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     className={({ active, selected }) =>
-      `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${
-        selected ? "font-medium" : ""
-      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
+      `${className} ${active || selected ? "bg-custom-background-80" : ""} ${
+        selected ? "text-custom-text-100" : "text-custom-text-200"
+      } cursor-pointer select-none truncate rounded px-1 py-1.5`
     }
   >
     {({ selected }) => (
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index d5a2cb722..abfd9a171 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -17,11 +17,11 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-300 hover:bg-brand-surface-2">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
-                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
+                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 9b20dcafc..a13220ee6 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -41,14 +41,14 @@ export const CustomDatePicker: React.FC<Props> = ({
         ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-2 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-brand-surface-2"
-          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
     } ${
-      noBorder ? "" : "border border-brand-base"
-    } w-full rounded-md bg-transparent caret-transparent ${className}`}
+      noBorder ? "" : "border border-custom-border-100"
+    } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
     disabled={disabled}
diff --git a/apps/app/components/ui/empty-space.tsx b/apps/app/components/ui/empty-space.tsx
index f853defb6..f31280aeb 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/apps/app/components/ui/empty-space.tsx
@@ -18,22 +18,22 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
     <div className="max-w-lg">
       {Icon ? (
         <div className="mb-4">
-          <Icon className="h-14 w-14 text-brand-secondary" />
+          <Icon className="h-14 w-14 text-custom-text-200" />
         </div>
       ) : null}
 
-      <h2 className="text-lg font-medium text-brand-base">{title}</h2>
-      <div className="mt-1 text-sm text-brand-secondary">{description}</div>
+      <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
+      <div className="mt-1 text-sm text-custom-text-200">{description}</div>
       <ul
         role="list"
-        className="mt-6 divide-y divide-brand-base border-t border-b border-brand-base"
+        className="mt-6 divide-y divide-custom-border-100 border-t border-b border-custom-border-100"
       >
         {children}
       </ul>
       {link ? (
         <div className="mt-6 flex">
           <Link href={link.href}>
-            <a className="text-sm font-medium text-brand-accent hover:text-brand-accent">
+            <a className="text-sm font-medium text-custom-primary hover:text-custom-primary">
               {link.text}
               <span aria-hidden="true"> &rarr;</span>
             </a>
@@ -60,17 +60,17 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         } space-x-3 py-4`}
       >
         <div className="flex-shrink-0">
-          <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent">
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
           </span>
         </div>
-        <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-brand-base">{title}</div>
-          {description ? <div className="text-sm text-brand-secondary">{description}</div> : null}
+        <div className="min-w-0 flex-1 text-custom-text-200">
+          <div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
+          {description ? <div className="text-sm">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
           <ChevronRightIcon
-            className="h-5 w-5 text-brand-base group-hover:text-brand-secondary"
+            className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
             aria-hidden="true"
           />
         </div>
diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx
index 4e469d967..ad9d9a6a1 100644
--- a/apps/app/components/ui/empty-state.tsx
+++ b/apps/app/components/ui/empty-state.tsx
@@ -1,77 +1,42 @@
 import React from "react";
+
 import Image from "next/image";
 
 // ui
 import { PrimaryButton } from "components/ui";
-// icon
-import { PlusIcon } from "@heroicons/react/24/outline";
-// helper
-import { capitalizeFirstLetter } from "helpers/string.helper";
 
 type Props = {
-  type: "cycle" | "module" | "project" | "issue" | "view" | "page" | "estimate";
   title: string;
   description: React.ReactNode | string;
-  imgURL: string;
-  action?: () => void;
+  image: any;
+  buttonText: string;
+  buttonIcon?: any;
+  onClick?: () => void;
+  isFullScreen?: boolean;
 };
 
-export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL, action }) => {
-  const shortcutKey = (type: string) => {
-    switch (type) {
-      case "cycle":
-        return "Q";
-      case "module":
-        return "M";
-      case "project":
-        return "P";
-      case "issue":
-        return "C";
-      case "view":
-        return "V";
-      case "page":
-        return "D";
-      default:
-        return null;
-    }
-  };
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-5 text-center">
-      <div className="h-32 w-72">
-        <Image src={imgURL} height="128" width="288" alt={type} />
-      </div>
-
-      <h3 className="text-xl font-semibold">{title}</h3>
-      {shortcutKey(type) && (
-        <span>
-          Use shortcut{" "}
-          <span className="text-brand-muted-1 mx-1 rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium">
-            {shortcutKey(type)}
-          </span>{" "}
-          to create {type} from anywhere.
-        </span>
-      )}
-      <p className="max-w-md text-sm text-brand-secondary">{description}</p>
-
-      <PrimaryButton
-        className="flex items-center gap-1"
-        onClick={() => {
-          if (action) {
-            action();
-            return;
-          }
-
-          if (!shortcutKey(type)) return;
-
-          const e = new KeyboardEvent("keydown", {
-            key: shortcutKey(type) as string,
-          });
-          document.dispatchEvent(e);
-        }}
-      >
-        <PlusIcon className="h-4 w-4 font-bold text-white" />
-        Create New {capitalizeFirstLetter(type)}
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  onClick,
+  buttonText,
+  buttonIcon,
+  isFullScreen = true,
+}) => (
+  <div
+    className={`h-full w-full mx-auto grid place-items-center p-8 ${
+      isFullScreen ? "md:w-4/5 lg:w-3/5" : ""
+    }`}
+  >
+    <div className="text-center flex flex-col items-center w-full">
+      <Image src={image} className="w-52 sm:w-60" alt={buttonText} />
+      <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
+      <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>
+      <PrimaryButton className="flex items-center gap-1.5" onClick={onClick}>
+        {buttonIcon}
+        {buttonText}
       </PrimaryButton>
     </div>
-  );
-};
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/calendar-graph.tsx b/apps/app/components/ui/graphs/calendar-graph.tsx
index 940eacc70..0725c425a 100644
--- a/apps/app/components/ui/graphs/calendar-graph.tsx
+++ b/apps/app/components/ui/graphs/calendar-graph.tsx
@@ -17,16 +17,16 @@ export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" |
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       colors={
         rest.colors ?? [
-          "rgba(var(--color-accent), 0.2)",
-          "rgba(var(--color-accent), 0.4)",
-          "rgba(var(--color-accent), 0.8)",
-          "rgba(var(--color-accent), 1)",
+          "rgba(var(--color-primary-100), 0.2)",
+          "rgba(var(--color-primary-100), 0.4)",
+          "rgba(var(--color-primary-100), 0.8)",
+          "rgba(var(--color-primary-100), 1)",
         ]
       }
-      emptyColor={rest.emptyColor ?? "rgb(var(--color-bg-surface-2))"}
+      emptyColor={rest.emptyColor ?? "rgb(var(--color-background-80))"}
       dayBorderColor={rest.dayBorderColor ?? "transparent"}
       daySpacing={rest.daySpacing ?? 5}
-      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-bg-base))"}
+      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-background-100))"}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 6eb273c4a..e66f369df 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -26,3 +26,4 @@ export * from "./product-updates-modal";
 export * from "./integration-and-import-export-banner";
 export * from "./range-datepicker";
 export * from "./icon";
+export * from "./circular-progress";
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index b6e09f876..06668b3e7 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -21,7 +21,7 @@ export const Input: React.FC<Props> = ({
 }) => (
   <>
     {label && (
-      <label htmlFor={id} className="text-brand-muted-1 mb-2">
+      <label htmlFor={id} className="text-custom-text-200 mb-2">
         {label}
       </label>
     )}
@@ -36,9 +36,9 @@ export const Input: React.FC<Props> = ({
       }}
       className={`block rounded-md bg-transparent text-sm focus:outline-none ${
         mode === "primary"
-          ? "rounded-md border border-brand-base"
+          ? "rounded-md border border-custom-border-100"
           : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-brand-accent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
           : mode === "trueTransparent"
           ? "rounded border-none bg-transparent ring-0"
           : ""
diff --git a/apps/app/components/ui/integration-and-import-export-banner.tsx b/apps/app/components/ui/integration-and-import-export-banner.tsx
index 19bbc353d..fd24acaab 100644
--- a/apps/app/components/ui/integration-and-import-export-banner.tsx
+++ b/apps/app/components/ui/integration-and-import-export-banner.tsx
@@ -7,8 +7,8 @@ type Props = {
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName }) => (
   <div className="flex flex-col items-start gap-3">
     <h3 className="text-2xl font-semibold">{bannerName}</h3>
-    <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
-      <ExclamationIcon height={24} width={24} className="fill-current text-brand-base" />
+    <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
+      <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
       <p className="leading-5">
         Integrations and importers are only available on the cloud version. We plan to open-source
         our SDKs in the near future so that the community can request or contribute integrations as
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
index 564811f19..053e646cd 100644
--- a/apps/app/components/ui/labels-list.tsx
+++ b/apps/app/components/ui/labels-list.tsx
@@ -17,7 +17,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
         {labels.slice(0, length).map((color, index) => (
           <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
             <span
-              className={`h-4 w-4 flex-shrink-0 rounded-full border border-brand-base
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-100
               `}
               style={{
                 backgroundColor: color && color !== "" ? color : "#000000",
diff --git a/apps/app/components/ui/loader.tsx b/apps/app/components/ui/loader.tsx
index 107f03e8c..b9d13883a 100644
--- a/apps/app/components/ui/loader.tsx
+++ b/apps/app/components/ui/loader.tsx
@@ -17,7 +17,7 @@ type ItemProps = {
 };
 
 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div className="rounded-md bg-brand-surface-2" style={{ height: height, width: width }} />
+  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
 );
 
 Loader.Item = Item;
diff --git a/apps/app/components/ui/markdown-to-component.tsx b/apps/app/components/ui/markdown-to-component.tsx
index cb716bc22..53b157b19 100644
--- a/apps/app/components/ui/markdown-to-component.tsx
+++ b/apps/app/components/ui/markdown-to-component.tsx
@@ -34,23 +34,23 @@ interface Props {
 }
 
 const HeadingPrimary: CustomComponent = ({ children }) => (
-  <h1 className="text-lg font-semibold text-brand-base">{children}</h1>
+  <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
 );
 
 const HeadingSecondary: CustomComponent = ({ children }) => (
-  <h3 className="text-base font-semibold text-brand-base">{children}</h3>
+  <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
 );
 
 const Paragraph: CustomComponent = ({ children }) => (
-  <p className="text-sm text-brand-secondary">{children}</p>
+  <p className="text-sm text-custom-text-200">{children}</p>
 );
 
 const OrderedList: CustomComponent = ({ children }) => (
-  <ol className="ml-8 mb-4 list-decimal text-sm text-brand-secondary">{children}</ol>
+  <ol className="ml-8 mb-4 list-decimal text-sm text-custom-text-200">{children}</ol>
 );
 
 const UnorderedList: CustomComponent = ({ children }) => (
-  <ul className="ml-8 mb-4 list-disc text-sm text-brand-secondary">{children}</ul>
+  <ul className="ml-8 mb-4 list-disc text-sm text-custom-text-200">{children}</ul>
 );
 
 const Link: CustomComponent = ({ href, children }) => (
diff --git a/apps/app/components/ui/multi-input.tsx b/apps/app/components/ui/multi-input.tsx
index e9890564d..bacb65713 100644
--- a/apps/app/components/ui/multi-input.tsx
+++ b/apps/app/components/ui/multi-input.tsx
@@ -53,12 +53,12 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
 
   return (
     <>
-      {label && <label className="mb-2 text-brand-secondary">{label}</label>}
-      <div className="rounded-md border border-brand-base p-2">
+      {label && <label className="mb-2 text-custom-text-200">{label}</label>}
+      <div className="rounded-md border border-custom-border-100 p-2">
         {watch(name)?.map((tag: any, index: number) => (
           <button
             type="button"
-            className="m-1.5 rounded-full bg-brand-surface-2 px-3 py-2 "
+            className="m-1.5 rounded-full bg-custom-background-80 px-3 py-2 "
             key={index}
           >
             {tag.email} <span onClick={() => removeTag(index)}>&times;</span>
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index e0d5b0f17..14f2a8106 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -43,8 +43,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             <div>
               <Menu.Button
                 onClick={() => setOpenChildFor(null)}
-                className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
-                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
+                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 {label}
@@ -62,7 +62,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             >
               <Menu.Items
                 static
-                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none"
+                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none"
               >
                 {options.map((option) => (
                   <div className="relative p-1" key={option.id}>
@@ -85,8 +85,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         <>
                           <div
                             className={`${
-                              active || option.selected ? "bg-brand-surface-2" : ""
-                            } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
+                              active || option.selected ? "bg-custom-background-80" : ""
+                            } flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 ${
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
@@ -103,7 +103,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     </Menu.Item>
                     {option.children && option.id === openChildFor && (
                       <div
-                        className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
+                        className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 shadow-lg focus:outline-none ${
                           direction === "left"
                             ? "right-full -translate-x-1"
                             : "left-full translate-x-1"
@@ -129,8 +129,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                   type="button"
                                   onClick={() => onSelect(child.value)}
                                   className={`${
-                                    child.selected ? "bg-brand-surface-2" : ""
-                                  } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+                                    child.selected ? "bg-custom-background-80" : ""
+                                  } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
                                 >
                                   {child.label}{" "}
                                   <CheckIcon
diff --git a/apps/app/components/ui/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx
index a063ee45f..510efc5ad 100644
--- a/apps/app/components/ui/multi-level-select.tsx
+++ b/apps/app/components/ui/multi-level-select.tsx
@@ -48,11 +48,11 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
           <div className="relative mt-1">
             <Listbox.Button
               onClick={() => setOpenChildFor(null)}
-              className="relative w-full cursor-default rounded-lg bg-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
+              className="relative w-full cursor-default rounded-lg bg-custom-background-80 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                <ChevronUpDownIcon className="h-5 w-5 text-custom-text-200" aria-hidden="true" />
               </span>
             </Listbox.Button>
             <Transition
@@ -64,13 +64,13 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
             >
               <Listbox.Options
                 static
-                className="absolute mt-1 max-h-60 w-full rounded-md bg-brand-surface-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                className="absolute mt-1 max-h-60 w-full rounded-md bg-custom-background-80 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
               >
                 {options.map((option) => (
                   <Listbox.Option
                     key={option.id}
                     className={
-                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-custom-background-90 hover:text-custom-text-100"
                     }
                     onClick={(e: any) => {
                       if (option.children !== null) {
@@ -88,7 +88,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                       <>
                         {openChildFor?.id === option.id && (
                           <div
-                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-brand-base bg-brand-surface-2 ${
+                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-100 bg-custom-background-80 ${
                               direction === "right"
                                 ? "left-full translate-x-2 rounded-tl-none shadow-md"
                                 : "right-full -translate-x-2 rounded-tr-none shadow-md"
@@ -98,7 +98,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                               <Listbox.Option
                                 key={child.id}
                                 className={
-                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-custom-background-90 hover:text-custom-text-100"
                                 }
                                 as="div"
                                 value={child}
@@ -113,7 +113,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                                       {child.label}
                                     </span>
                                     {selected ? (
-                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
                                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
@@ -123,7 +123,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             ))}
 
                             <div
-                              className={`absolute h-0 w-0 border-t-8 border-brand-base ${
+                              className={`absolute h-0 w-0 border-t-8 border-custom-border-100 ${
                                 direction === "right"
                                   ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
                                   : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
@@ -137,7 +137,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                           {option.label}
                         </span>
                         {selected ? (
-                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index 54dba586f..f965356f8 100644
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -31,7 +31,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -45,19 +45,19 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="max-h-[600px] overflow-y-auto bg-brand-surface-2 p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="max-h-[600px] overflow-y-auto bg-custom-background-80 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
+                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
                       >
                         <span>Product Updates</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
+                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
                               aria-hidden="true"
                             />
                           </button>
@@ -66,13 +66,13 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       {updates && updates.length > 0 ? (
                         updates.map((item, index) => (
                           <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-brand-secondary">
-                              <span className="flex items-center rounded-full border border-brand-base bg-brand-surface-1 px-3 py-1.5 text-xs">
+                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                              <span className="flex items-center rounded-full border border-custom-border-100 bg-custom-background-90 px-3 py-1.5 text-xs">
                                 {item.tag_name}
                               </span>
                               <span>{renderLongDateFormat(item.published_at)}</span>
                               {index === 0 && (
-                                <span className="flex items-center rounded-full border border-brand-base bg-brand-accent px-3 py-1.5 text-xs text-white">
+                                <span className="flex items-center rounded-full border border-custom-border-100 bg-custom-primary px-3 py-1.5 text-xs text-white">
                                   New
                                 </span>
                               )}
diff --git a/apps/app/components/ui/range-datepicker.tsx b/apps/app/components/ui/range-datepicker.tsx
index 0dfda41ec..e2054fd89 100644
--- a/apps/app/components/ui/range-datepicker.tsx
+++ b/apps/app/components/ui/range-datepicker.tsx
@@ -45,12 +45,12 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
         ? "block px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-3 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-brand-surface-2"
-          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
+    } w-full rounded-md border border-custom-border-100 bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     disabled={disabled}
     selectsStart={selectsStart}
diff --git a/apps/app/components/ui/spinner.tsx b/apps/app/components/ui/spinner.tsx
index c27cab362..b96188030 100644
--- a/apps/app/components/ui/spinner.tsx
+++ b/apps/app/components/ui/spinner.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
 
 export const Spinner: React.FC = () => (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-         />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-         />
-      </svg>
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
+  <div role="status">
+    <svg
+      aria-hidden="true"
+      className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index 84251b2d4..b4c242259 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -45,7 +45,7 @@ export const TextArea: React.FC<Props> = ({
   return (
     <>
       {label && (
-        <label htmlFor={id} className="mb-2 text-brand-secondary">
+        <label htmlFor={id} className="mb-2 text-custom-text-200">
           {label}
         </label>
       )}
@@ -70,7 +70,7 @@ export const TextArea: React.FC<Props> = ({
           noPadding ? "" : "px-3 py-2"
         } outline-none ${
           mode === "primary"
-            ? "rounded-md border border-brand-base"
+            ? "rounded-md border border-custom-border-100"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""
diff --git a/apps/app/components/ui/toggle-switch.tsx b/apps/app/components/ui/toggle-switch.tsx
index fe4e2c96d..f8046191e 100644
--- a/apps/app/components/ui/toggle-switch.tsx
+++ b/apps/app/components/ui/toggle-switch.tsx
@@ -19,8 +19,8 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
       onChange={onChange}
       className={`relative inline-flex ${
         size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
-      } flex-shrink-0 cursor-pointer rounded-full border-2 border-brand-base transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-green-500" : "bg-brand-surface-2"
+      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-100 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-green-500" : "bg-custom-background-80"
       } ${className || ""}`}
     >
       <span className="sr-only">{label}</span>
@@ -35,7 +35,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
                 : size === "md"
                 ? "translate-x-3"
                 : "translate-x-5") + " bg-white"
-            : "translate-x-0 bg-brand-surface-1"
+            : "translate-x-0 bg-custom-background-90"
         }`}
       />
     </Switch>
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 86ca39e54..271dfcd50 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -43,7 +43,7 @@ export const Tooltip: React.FC<Props> = ({
     content={
       <div
         className={`${className} relative z-50 flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
-          theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
+          theme === "light" ? "text-custom-text-200 bg-custom-background-80" : "bg-black text-white"
         }`}
       >
         {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
index fa5e6781c..3a2afe977 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -82,7 +82,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -96,7 +96,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
               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 border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -108,14 +108,14 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the view will be permanently removed. This
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index 1b8875138..dc1cf9fba 100644
--- a/apps/app/components/views/form.tsx
+++ b/apps/app/components/views/form.tsx
@@ -67,7 +67,7 @@ export const ViewForm: React.FC<Props> = ({
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} View
         </h3>
         <div className="space-y-3">
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index a445331b2..cd586b500 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
index 755251356..179106a33 100644
--- a/apps/app/components/views/modal.tsx
+++ b/apps/app/components/views/modal.tsx
@@ -121,7 +121,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -135,7 +135,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
               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 rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/views/select-filters.tsx b/apps/app/components/views/select-filters.tsx
index 6c2c04954..bf7bf9cf9 100644
--- a/apps/app/components/views/select-filters.tsx
+++ b/apps/app/components/views/select-filters.tsx
@@ -213,7 +213,7 @@ export const SelectFilters: React.FC<Props> = ({
                 element: (
                   <button
                     onClick={() => setIsDueDateFilterModalOpen(true)}
-                    className="w-full rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom
                   </button>
diff --git a/apps/app/components/views/single-view-item.tsx b/apps/app/components/views/single-view-item.tsx
index 233ee3e74..a6f81912c 100644
--- a/apps/app/components/views/single-view-item.tsx
+++ b/apps/app/components/views/single-view-item.tsx
@@ -18,7 +18,7 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortDateWithYearFormat, renderShortTime } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, render24HourFormatTime } from "helpers/date-time.helper";
 
 type Props = {
   view: IView;
@@ -83,7 +83,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
   };
 
   return (
-    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-brand-surface-2">
+    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-custom-background-90">
       <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
         <a>
           <div className="relative rounded p-4">
@@ -94,7 +94,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
               </div>
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
-                  <p className="rounded-full bg-brand-surface-2 py-0.5 px-2 text-xs text-brand-secondary">
+                  <p className="rounded-full bg-custom-background-80 py-0.5 px-2 text-xs text-custom-text-200">
                     {Object.keys(view.query_data)
                       .map((key: string) =>
                         view.query_data[key as keyof typeof view.query_data] !== null
@@ -105,12 +105,12 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                     filters
                   </p>
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(
                       view.updated_at
                     )} ${renderShortDateWithYearFormat(view.updated_at)}`}
                   >
-                    <p className="text-sm text-brand-secondary">
-                      {renderShortTime(view.updated_at)}
+                    <p className="text-sm text-custom-text-200">
+                      {render24HourFormatTime(view.updated_at)}
                     </p>
                   </Tooltip>
                   {view.is_favorite ? (
@@ -133,7 +133,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   <CustomMenu width="auto" verticalEllipsis>
@@ -166,7 +166,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
               </div>
             </div>
             {view?.description && (
-              <p className="px-[27px] text-sm font-normal leading-5 text-brand-secondary">
+              <p className="px-[27px] text-sm font-normal leading-5 text-custom-text-200">
                 {view.description}
               </p>
             )}
diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
index b49446eeb..c9fecc1cd 100644
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/apps/app/components/workspace/activity-graph.tsx
@@ -117,8 +117,8 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                       date === "" ? "pointer-events-none opacity-0" : ""
                     } h-4 w-4 rounded ${
                       isActive
-                        ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
-                        : "bg-brand-surface-2"
+                        ? `bg-custom-primary ${activitiesIntensity(isActive.activity_count)}`
+                        : "bg-custom-background-80"
                     }`}
                   />
                 </Tooltip>
@@ -127,11 +127,11 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
           </div>
           <div className="mt-8 flex items-center gap-2 text-xs">
             <span>Less</span>
-            <span className="h-4 w-4 rounded bg-brand-surface-2" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
-            <span className="h-4 w-4 rounded bg-brand-accent" />
+            <span className="h-4 w-4 rounded bg-custom-background-80" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-20" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-40" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-80" />
+            <span className="h-4 w-4 rounded bg-custom-primary" />
             <span>More</span>
           </div>
         </div>
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
index 4c7e1edb6..f2776affd 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -38,7 +38,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
           ))}
         </CustomMenu>
       </div>
-      <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
+      <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-8 pl-4">
         {data.every((item) => item.completed_count === 0) ? (
           <div className="flex items-center justify-center h-72">
             <h4 className="text-[#d687ff]">No issues closed this month</h4>
@@ -62,14 +62,14 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
               colors={(datum) => datum.color}
               enableSlices="x"
               sliceTooltip={(datum) => (
-                <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+                <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
                   {datum.slice.points[0].data.yFormatted}
-                  <span className="text-brand-secondary"> issues closed in </span>
+                  <span className="text-custom-text-200"> issues closed in </span>
                   {datum.slice.points[0].data.xFormatted}
                 </div>
               )}
               theme={{
-                background: "rgb(var(--color-bg-base))",
+                background: "rgb(var(--color-background-100))",
               }}
             />
             <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index 18e127404..2f2cae6e4 100644
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -39,7 +39,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -53,8 +53,8 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, 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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -65,12 +65,12 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
                           <span className="font-bold">{data?.email}</span>? They will no longer have
                           access to this workspace. This action cannot be undone.
@@ -79,7 +79,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 42078fe91..344955431 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -134,14 +134,14 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                   `Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
               }}
               placeholder="e.g. My Workspace"
-              className="placeholder:text-brand-secondary"
+              className="placeholder:text-custom-text-200"
               error={errors.name}
             />
           </div>
           <div className="flex flex-col items-start justify-center gap-1">
             <span className="mb-1.5 text-sm">Workspace URL</span>
-            <div className="flex w-full items-center rounded-md border border-brand-base px-3">
-              <span className="whitespace-nowrap text-sm text-brand-secondary">
+            <div className="flex w-full items-center rounded-md border border-custom-border-100 px-3">
+              <span className="whitespace-nowrap text-sm text-custom-text-200">
                 {typeof window !== "undefined" && window.location.origin}/
               </span>
               <Input
@@ -169,7 +169,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className="flex flex-col items-start justify-center gap-1 border-t border-brand-base px-7 pt-3.5 ">
+        <div className="flex flex-col items-start justify-center gap-1 border-t border-custom-border-100 px-7 pt-3.5 ">
           <span className="mb-1.5 text-sm">How large is your company?</span>
           <div className="w-full">
             <Controller
@@ -184,7 +184,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                     value ? (
                       value.toString()
                     ) : (
-                      <span className="text-brand-secondary">Select company size</span>
+                      <span className="text-custom-text-200">Select company size</span>
                     )
                   }
                   input
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
index b9f3e60f4..afbd6801c 100644
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ b/apps/app/components/workspace/delete-workspace-modal.tsx
@@ -89,7 +89,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -103,7 +103,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
               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 border border-brand-base bg-brand-base 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-custom-border-100 bg-custom-background-100 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-500/20 p-4">
@@ -118,7 +118,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   </div>
 
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete workspace{" "}
                       <span className="break-words font-semibold">{data?.name}</span>? All of the
                       data related to the workspace will be permanently removed. This action cannot
@@ -126,10 +126,12 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                     </p>
                   </span>
 
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the workspace name{" "}
-                      <span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
+                      <span className="font-medium text-custom-text-100">
+                        {selectedWorkspace?.name}
+                      </span>{" "}
                       to continue:
                     </p>
                     <Input
@@ -144,10 +146,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                     />
                   </div>
 
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="text-sm">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete my workspace</span>{" "}
+                      <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Input
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 013cbd1bf..bbb50c21f 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -1,7 +1,11 @@
 import { useState, useRef, FC } from "react";
 
+import { useRouter } from "next/router";
+
 import Link from "next/link";
 
+import useSWR from "swr";
+
 // headless ui
 import { Transition } from "@headlessui/react";
 // hooks
@@ -12,8 +16,19 @@ import {
   ArrowLongLeftIcon,
   ChatBubbleOvalLeftEllipsisIcon,
   RocketLaunchIcon,
+  ArrowUpCircleIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { QuestionMarkCircleIcon, DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
+// services
+import workspaceService from "services/workspace.service";
+// fetch-keys
+import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+// ui
+import { CircularProgress } from "components/ui";
+// components
+import UpgradeToProModal from "./upgrade-to-pro-modal";
+import useUser from "hooks/use-user";
 
 const helpOptions = [
   {
@@ -43,7 +58,14 @@ export interface WorkspaceHelpSectionProps {
   setSidebarActive: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+type progress = {
+  progress: number;
+};
 export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const { setSidebarActive } = props;
   // theme
   const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
@@ -54,105 +76,192 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
   // hooks
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
 
+  const { user } = useUser();
+
   const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
 
-  return (
-    <div
-      className={`flex w-full items-center justify-between self-baseline border-t border-brand-base bg-brand-sidebar px-6 py-2 ${
-        sidebarCollapse ? "flex-col" : ""
-      }`}
-    >
-      <button
-        type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
-          sidebarCollapse ? "w-full justify-center" : ""
-        }`}
-        onClick={() => {
-          const e = new KeyboardEvent("keydown", {
-            key: "h",
-          });
-          document.dispatchEvent(e);
-        }}
-        title="Shortcuts"
-      >
-        <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
-        {!sidebarCollapse && <span>Shortcuts</span>}
-      </button>
-      <button
-        type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
-          sidebarCollapse ? "w-full justify-center" : ""
-        }`}
-        onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-        title="Help"
-      >
-        <QuestionMarkCircleIcon className="h-4 w-4 text-brand-secondary" />
-        {!sidebarCollapse && <span>Help</span>}
-      </button>
-      <button
-        type="button"
-        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:hidden"
-        onClick={() => setSidebarActive(false)}
-      >
-        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary group-hover:text-brand-base" />
-      </button>
-      <button
-        type="button"
-        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:flex ${
-          sidebarCollapse ? "w-full justify-center" : ""
-        }`}
-        onClick={() => toggleCollapsed()}
-      >
-        <ArrowLongLeftIcon
-          className={`h-4 w-4 flex-shrink-0 text-brand-secondary duration-300 group-hover:text-brand-base ${
-            sidebarCollapse ? "rotate-180" : ""
-          }`}
-        />
-      </button>
+  const [alert, setAlert] = useState(false);
 
-      <div className="relative">
-        <Transition
-          show={isNeedHelpOpen}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
+  const [upgradeModal, setUpgradeModal] = useState(false);
+
+  const { data: workspaceDetails } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
+  );
+  const issueNumber = workspaceDetails?.total_issues || 0;
+
+  return (
+    <>
+      <UpgradeToProModal
+        isOpen={upgradeModal}
+        onClose={() => setUpgradeModal(false)}
+        user={user}
+        issueNumber={issueNumber}
+      />
+      {!sidebarCollapse && (alert || (issueNumber && issueNumber >= 750)) ? (
+        <>
           <div
-            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-brand-surface-2 p-1 shadow-md`}
-            ref={helpOptionsRef}
+            className={`border-t p-4 ${
+              issueNumber >= 750
+                ? "bg-red-50 text-red-600 border-red-200"
+                : issueNumber >= 500
+                ? "bg-yellow-50 text-yellow-600 border-yellow-200"
+                : "text-green-600"
+            }`}
           >
-            {helpOptions.map(({ name, Icon, href, onClick }) => {
-              if (href)
-                return (
-                  <Link href={href} key={name}>
-                    <a
-                      target="_blank"
-                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-brand-surface-1"
-                    >
-                      <Icon className="h-4 w-4 text-brand-secondary" />
-                      <span className="text-sm">{name}</span>
-                    </a>
-                  </Link>
-                );
-              else
-                return (
-                  <button
-                    key={name}
-                    type="button"
-                    onClick={onClick ? onClick : undefined}
-                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-brand-surface-1"
-                  >
-                    <Icon className="h-4 w-4 text-brand-secondary" />
-                    <span className="text-sm">{name}</span>
-                  </button>
-                );
-            })}
+            <div className="flex items-center gap-2 w-full">
+              <CircularProgress progress={(issueNumber / 1024) * 100} />
+              <div className="">Free Plan</div>
+              {issueNumber < 750 && (
+                <div className="ml-auto text-custom-text-200" onClick={() => setAlert(false)}>
+                  <XMarkIcon className="h-4 w-4" />
+                </div>
+              )}
+            </div>
+            <div className="text-custom-text-200 text-xs mt-2">
+              This workspace has used {issueNumber} of its 1024 issues creation limit (
+              {((issueNumber / 1024) * 100).toFixed(0)}
+              %).
+            </div>
           </div>
-        </Transition>
+        </>
+      ) : (
+        ""
+      )}
+      <div
+        className={`flex w-full items-center justify-between self-baseline border-t border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-2 ${
+          sidebarCollapse ? "flex-col" : ""
+        }`}
+      >
+        {alert || (issueNumber && issueNumber >= 750) ? (
+          <button
+            type="button"
+            className={`flex items-center gap-x-1 rounded-md px-2 py-2 font-medium outline-none text-sm 
+            ${
+              issueNumber >= 750
+                ? "bg-custom-primary-100 text-white"
+                : "bg-blue-50 text-custom-primary-100"
+            }
+            ${sidebarCollapse ? "w-full justify-center" : ""}`}
+            title="Shortcuts"
+            onClick={() => setUpgradeModal(true)}
+          >
+            <ArrowUpCircleIcon className="h-4 w-4 " />
+            {!sidebarCollapse && <span> Learn more</span>}
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={`flex items-center gap-x-1 rounded-md px-2 py-2 font-medium outline-none text-sm ${
+              issueNumber >= 750
+                ? "bg-red-50 text-red-600"
+                : issueNumber >= 500
+                ? "bg-yellow-50 text-yellow-600"
+                : "bg-green-50 text-green-600"
+            }
+            ${sidebarCollapse ? "w-full justify-center" : ""}`}
+            title="Shortcuts"
+            onClick={() => setAlert(true)}
+          >
+            <CircularProgress
+              progress={(issueNumber / 1024) * 100 > 100 ? 100 : (issueNumber / 1024) * 100}
+            />
+            {!sidebarCollapse && <span>Free Plan</span>}
+          </button>
+        )}
+
+        <button
+          type="button"
+          className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            sidebarCollapse ? "w-full justify-center" : ""
+          }`}
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              key: "h",
+            });
+            document.dispatchEvent(e);
+          }}
+          title="Shortcuts"
+        >
+          <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
+          {/* {!sidebarCollapse && <span>Shortcuts</span>} */}
+        </button>
+        <button
+          type="button"
+          className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            sidebarCollapse ? "w-full justify-center" : ""
+          }`}
+          onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          title="Help"
+        >
+          <QuestionMarkCircleIcon className="h-4 w-4 text-custom-text-200" />
+          {/* {!sidebarCollapse && <span>Help</span>} */}
+        </button>
+        <button
+          type="button"
+          className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
+          onClick={() => setSidebarActive(false)}
+        >
+          <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200 group-hover:text-custom-text-100" />
+        </button>
+        <button
+          type="button"
+          className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:flex ${
+            sidebarCollapse ? "w-full justify-center" : ""
+          }`}
+          onClick={() => toggleCollapsed()}
+        >
+          <ArrowLongLeftIcon
+            className={`h-4 w-4 flex-shrink-0 text-custom-text-200 duration-300 group-hover:text-custom-text-100 ${
+              sidebarCollapse ? "rotate-180" : ""
+            }`}
+          />
+        </button>
+
+        <div className="relative">
+          <Transition
+            show={isNeedHelpOpen}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <div
+              className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-custom-background-80 p-1 shadow-md`}
+              ref={helpOptionsRef}
+            >
+              {helpOptions.map(({ name, Icon, href, onClick }) => {
+                if (href)
+                  return (
+                    <Link href={href} key={name}>
+                      <a
+                        target="_blank"
+                        className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
+                      >
+                        <Icon className="h-4 w-4 text-custom-text-200" />
+                        <span className="text-sm">{name}</span>
+                      </a>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      onClick={onClick ? onClick : undefined}
+                      className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-custom-background-90"
+                    >
+                      <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
+                      <span className="text-sm">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+          </Transition>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
index cfae13687..3c0157a7f 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -37,10 +37,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
     <div>
       <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
       {issues ? (
-        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-brand-base bg-brand-base p-4 text-sm">
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 text-sm">
           <div
             className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
-              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-brand-surface-2"
+              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"
             }`}
           >
             <h4 className="capitalize">{type}</h4>
@@ -86,10 +86,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
               <div className="grid h-full place-items-center">
                 <div className="my-5 flex flex-col items-center gap-4">
                   <LayerDiagonalIcon height={60} width={60} />
-                  <span className="text-brand-secondary">
+                  <span className="text-custom-text-200">
                     No issues found. Use{" "}
-                    <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
-                    create a new issue
+                    <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
+                    shortcut to create a new issue
                   </span>
                 </div>
               </div>
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index c83ef1de2..5219a4d3a 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -14,7 +14,7 @@ type Props = {
 export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
   <div>
     <h3 className="mb-2 font-semibold">Issues by States</h3>
-    <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+    <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
       <PieGraph
         data={
           groupedIssues?.map((cell) => ({
@@ -58,8 +58,8 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         activeInnerRadiusOffset={5}
         colors={(datum) => datum.data.color}
         tooltip={(datum) => (
-          <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-            <span className="text-brand-secondary capitalize">{datum.datum.label} issues:</span>{" "}
+          <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+            <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
             {datum.datum.value}
           </div>
         )}
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 8e108a676..1d1162a3d 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -12,8 +12,8 @@ type Props = {
 };
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-base lg:grid-cols-3">
-    <div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
+  <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-100 bg-custom-background-100 lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-custom-border-100 border-b border-custom-border-100 lg:border-r lg:border-b-0">
       <div className="flex">
         <div className="basis-1/2 p-4">
           <h4 className="text-sm">Issues assigned to you</h4>
@@ -27,7 +27,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-brand-base p-4">
+        <div className="basis-1/2 border-l border-custom-border-100 p-4">
           <h4 className="text-sm">Pending issues</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -53,7 +53,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-brand-base p-4">
+        <div className="basis-1/2 border-l border-custom-border-100 p-4">
           <h4 className="text-sm">Issues due by this week</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -72,7 +72,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
         Activity Graph
         <Tooltip
           tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
-          className="w-72 border border-brand-base"
+          className="w-72 border border-custom-border-100"
         >
           <InformationCircleIcon className="h-3 w-3" />
         </Tooltip>
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index 56d9385b1..cd48702fc 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -105,17 +105,17 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
               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 rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <div>
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Members
                       </Dialog.Title>
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         Invite members to work on your workspace.
                       </p>
                     </div>
diff --git a/apps/app/components/workspace/settings-header.tsx b/apps/app/components/workspace/settings-header.tsx
index 89a3690f5..2f11b8a98 100644
--- a/apps/app/components/workspace/settings-header.tsx
+++ b/apps/app/components/workspace/settings-header.tsx
@@ -4,7 +4,7 @@ export const SettingsHeader = () => (
   <div className="mb-8 space-y-6">
     <div>
       <h3 className="text-2xl font-semibold">Workspace Settings</h3>
-      <p className="mt-1 text-sm text-brand-secondary">
+      <p className="mt-1 text-sm text-custom-text-200">
         This information will be displayed to every member of the workspace.
       </p>
     </div>
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index 6e5774434..5629b782b 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -89,13 +89,13 @@ export const WorkspaceSidebarDropdown = () => {
     <div className="relative">
       <Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
         <div className="flex items-center justify-between gap-2.5">
-          <Menu.Button className="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
+          <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
             <div
-              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-surface-2 px-2 py-1.5 ${
+              className={`flex w-full items-center gap-x-2 rounded-md bg-custom-sidebar-background-80 px-2 py-1.5 ${
                 sidebarCollapse ? "justify-center" : ""
               }`}
             >
-              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white dark:bg-brand-surface-2 dark:text-gray-800">
+              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
                 {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                   <img
                     src={activeWorkspace.logo}
@@ -108,9 +108,9 @@ export const WorkspaceSidebarDropdown = () => {
               </div>
 
               {!sidebarCollapse && (
-                <p>
+                <h4 className="text-custom-text-100">
                   {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
-                </p>
+                </h4>
               )}
             </div>
           </Menu.Button>
@@ -137,11 +137,11 @@ export const WorkspaceSidebarDropdown = () => {
         >
           <Menu.Items
             className="fixed left-2 z-20 mt-1 flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
-          border border-brand-base bg-brand-surface-2 shadow-lg focus:outline-none"
+          border border-custom-sidebar-border-100 bg-custom-sidebar-background-90 shadow-lg focus:outline-none"
           >
             <div className="flex flex-col items-start justify-start gap-3 p-3">
-              <div className="text-sm text-gray-500">{user?.email}</div>
-              <span className="text-sm font-semibold text-gray-500">Workspace</span>
+              <div className="text-sm text-custom-sidebar-text-200">{user?.email}</div>
+              <span className="text-sm font-semibold text-custom-sidebar-text-200">Workspace</span>
               {workspaces ? (
                 <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
                   {workspaces.length > 0 ? (
@@ -151,7 +151,7 @@ export const WorkspaceSidebarDropdown = () => {
                           <button
                             type="button"
                             onClick={() => handleWorkspaceNavigation(workspace)}
-                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-brand-base"
+                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-custom-sidebar-text-100"
                           >
                             <div className="flex items-center justify-start gap-2.5">
                               <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
@@ -166,11 +166,17 @@ export const WorkspaceSidebarDropdown = () => {
                                 )}
                               </span>
 
-                              <h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
+                              <h5
+                                className={`text-sm ${
+                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                }`}
+                              >
+                                {truncateText(workspace.name, 18)}
+                              </h5>
                             </div>
                             <span className="p-1">
                               <CheckIcon
-                                className={`h-3 w-3.5 text-brand-base ${
+                                className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
                                   active || workspace.id === activeWorkspace?.id
                                     ? "opacity-100"
                                     : "opacity-0"
@@ -190,7 +196,7 @@ export const WorkspaceSidebarDropdown = () => {
                     onClick={() => {
                       router.push("/create-workspace");
                     }}
-                    className="flex w-full items-center gap-1 text-sm text-brand-secondary"
+                    className="flex w-full items-center gap-1 text-sm text-custom-sidebar-text-200"
                   >
                     <PlusIcon className="h-3 w-3" />
                     Create Workspace
@@ -205,12 +211,12 @@ export const WorkspaceSidebarDropdown = () => {
                 </div>
               )}
             </div>
-            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-brand-base px-3 py-2 text-sm">
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-100 px-3 py-2 text-sm">
               {userLinks(workspaceSlug as string).map((link, index) => (
                 <Menu.Item
                   key={index}
                   as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-brand-secondary hover:bg-brand-surface-1"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                 >
                   <Link href={link.href}>
                     <a className="w-full">{link.name}</a>
@@ -218,11 +224,11 @@ export const WorkspaceSidebarDropdown = () => {
                 </Menu.Item>
               ))}
             </div>
-            <div className="w-full border-t border-t-brand-base px-3 py-2">
+            <div className="w-full border-t border-t-custom-sidebar-border-100 px-3 py-2">
               <Menu.Item
                 as="button"
                 type="button"
-                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-brand-surface-1"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
                 onClick={handleSignOut}
               >
                 Sign out
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index d163173fa..b86aa6610 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -46,33 +46,40 @@ export const WorkspaceSidebarMenu = () => {
 
   return (
     <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => (
-        <Link key={index} href={link.href}>
-          <a
-            className={`${
-              (
-                link.name === "Settings"
-                  ? router.asPath.includes(link.href)
-                  : router.asPath === link.href
-              )
-                ? "bg-brand-surface-2 text-brand-base"
-                : "text-brand-secondary hover:bg-brand-surface-2 focus:bg-brand-surface-2"
-            } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
-              sidebarCollapse ? "justify-center" : ""
-            }`}
-          >
-            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-              <link.icon
-                className="text-brand-secondary"
-                aria-hidden="true"
-                height="20"
-                width="20"
-              />
-            </span>
-            {!sidebarCollapse && link.name}
-          </a>
-        </Link>
-      ))}
+      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+        const isActive =
+          link.name === "Settings"
+            ? router.asPath.includes(link.href)
+            : router.asPath === link.href;
+
+        return (
+          <Link key={index} href={link.href}>
+            <a
+              className={`${
+                isActive
+                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                  : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 focus:bg-custom-sidebar-background-90"
+              } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
+                sidebarCollapse ? "justify-center" : ""
+              }`}
+            >
+              <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+                <link.icon
+                  color={
+                    isActive
+                      ? "rgb(var(--color-sidebar-text-100))"
+                      : "rgb(var(--color-sidebar-text-200))"
+                  }
+                  aria-hidden="true"
+                  height="20"
+                  width="20"
+                />
+              </span>
+              {!sidebarCollapse && link.name}
+            </a>
+          </Link>
+        );
+      })}
     </div>
   );
 };
diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx
index 73f6d4655..623a43a08 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/apps/app/components/workspace/single-invitation.tsx
@@ -38,7 +38,7 @@ const SingleInvitation: React.FC<Props> = ({
       </div>
       <div className="min-w-0 flex-1">
         <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-        <p className="text-sm text-brand-secondary">
+        <p className="text-sm text-custom-text-200">
           Invited by{" "}
           {invitation.created_by_detail
             ? invitation.created_by_detail.first_name
@@ -49,9 +49,9 @@ const SingleInvitation: React.FC<Props> = ({
         <button
           className={`${
             invitationsRespond.includes(invitation.id)
-              ? "bg-brand-surface-2 text-brand-secondary"
-              : "bg-brand-accent text-white"
-          } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+              ? "bg-custom-background-80 text-custom-text-200"
+              : "bg-custom-primary text-white"
+          } text-sm px-4 py-2 border border-custom-border-100 rounded-3xl`}
           onClick={(e) => {
             handleInvitation(
               invitation,
diff --git a/apps/app/components/workspace/upgrade-to-pro-modal.tsx b/apps/app/components/workspace/upgrade-to-pro-modal.tsx
new file mode 100644
index 000000000..32d778fc0
--- /dev/null
+++ b/apps/app/components/workspace/upgrade-to-pro-modal.tsx
@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { XCircleIcon, RocketLaunchIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+// ui
+import { CircularProgress } from "components/ui";
+// types
+import type { ICurrentUserResponse, IWorkspace } from "types";
+
+declare global {
+  interface Window {
+    supabase: any;
+  }
+}
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  user: ICurrentUserResponse | undefined;
+  issueNumber: number;
+};
+
+const UpgradeToProModal: React.FC<Props> = ({ isOpen, onClose, user, issueNumber }) => {
+  const [supabaseClient, setSupabaseClient] = useState<any>(null);
+
+  useEffect(() => {
+    // Create a Supabase client
+    if (process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
+      const { createClient } = window.supabase;
+      const supabase = createClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+        {
+          auth: {
+            autoRefreshToken: false,
+            persistSession: false,
+          },
+        }
+      );
+
+      if (supabase) {
+        setSupabaseClient(supabase);
+      }
+    }
+  }, []);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+    setIsLoading(false);
+  };
+
+  const proFeatures = [
+    "Everything in free",
+    "Unlimited users",
+    "Unlimited file uploads",
+    "Priority Support",
+    "Custom Theming",
+    "Access to Roadmap",
+    "Plane AI (GPT unlimited)",
+  ];
+
+  const [errorMessage, setErrorMessage] = useState<null | { status: String; message: string }>(
+    null
+  );
+  const [loader, setLoader] = useState(false);
+  const submitEmail = async () => {
+    setLoader(true);
+    const payload = { email: user?.email || "" };
+
+    if (supabaseClient) {
+      if (payload?.email) {
+        const emailExists = await supabaseClient
+          .from("web-waitlist")
+          .select("id,email,count")
+          .eq("email", payload?.email);
+        if (emailExists.data.length === 0) {
+          const emailCreation = await supabaseClient
+            .from("web-waitlist")
+            .insert([{ email: payload?.email, count: 1, last_visited: new Date() }])
+            .select("id,email,count");
+          if (emailCreation.status === 201)
+            setErrorMessage({ status: "success", message: "Successfully registered." });
+          else setErrorMessage({ status: "insert_error", message: "Insertion Error." });
+        } else {
+          const emailCountUpdate = await supabaseClient
+            .from("web-waitlist")
+            .upsert({
+              id: emailExists.data[0]?.id,
+              count: emailExists.data[0]?.count + 1,
+              last_visited: new Date(),
+            })
+            .select("id,email,count");
+          if (emailCountUpdate.status === 201)
+            setErrorMessage({
+              status: "email_already_exists",
+              message: "Email already exists.",
+            });
+          else setErrorMessage({ status: "update_error", message: "Update Error." });
+        }
+      } else setErrorMessage({ status: "email_required", message: "Please provide email." });
+    } else
+      setErrorMessage({
+        status: "supabase_error",
+        message: "Network error. Please try again later.",
+      });
+
+    setLoader(false);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
+                <div className="flex flex-wrap">
+                  <div className="w-full md:w-3/5 p-6 flex flex-col gap-y-6">
+                    <div className="flex gap-2">
+                      <div
+                        className={`font-semibold outline-none text-sm mt-1.5 ${
+                          issueNumber >= 750
+                            ? "text-red-600"
+                            : issueNumber >= 500
+                            ? "text-yellow-600"
+                            : "text-green-600"
+                        }`}
+                        title="Shortcuts"
+                      >
+                        <CircularProgress
+                          progress={
+                            (issueNumber / 1024) * 100 > 100 ? 100 : (issueNumber / 1024) * 100
+                          }
+                        />
+                      </div>
+                      <div className="">
+                        <div className="font-semibold text-lg">Upgrade to pro</div>
+                        <div className="text-custom-text-200 text-sm">
+                          This workspace has used {issueNumber} of its 1024 issues creation limit (
+                          {((issueNumber / 1024) * 100).toFixed(2)}%).
+                        </div>
+                      </div>
+                      <div
+                        onClick={handleClose}
+                        className="w-5 h-5 text-custom-text-200 cursor-pointer mt-1.5 md:hidden block ml-auto"
+                      >
+                        <XCircleIcon />
+                      </div>
+                    </div>
+                    <div className="flex gap-2 pt-6">
+                      <div
+                        className={`font-semibold outline-none text-sm mt-1.5 w-5 h-5 text-[#892FFF] flex-shrink-0`}
+                        title="Shortcuts"
+                      >
+                        <RocketLaunchIcon />
+                      </div>
+                      <div className="">
+                        <div className="font-semibold text-lg">Order summary</div>
+                        <div className="text-custom-text-200 text-sm">
+                          Priority support, file uploads, and access to premium features.
+                        </div>
+
+                        <div className="flex flex-wrap my-4">
+                          {proFeatures.map((feature, index) => (
+                            <div key={index} className="w-1/2 py-2 flex gap-2 my-1.5">
+                              <div className="w-5 h-5 mt-0.5 text-green-600">
+                                <CheckCircleIcon />
+                              </div>
+                              <div>{feature}</div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="w-full md:w-2/5 bg-custom-background-90 p-6 flex flex-col">
+                    <div className="flex justify-between items-center">
+                      <div className="font-semibold text-lg">Summary</div>
+                      <div
+                        onClick={handleClose}
+                        className="w-5 h-5 text-custom-text-200 cursor-pointer mt-1.5 hidden md:block"
+                      >
+                        <XCircleIcon />
+                      </div>
+                    </div>
+                    <div className="text-custom-text-200 text-sm mt-4">
+                      Plane application is currently in dev-mode. We will soon introduce Pro plans
+                      once general availability has been established. Stay tuned for more updates.
+                      In the meantime, Plane remains free and unrestricted.
+                      <br /> <br />
+                      We{"'"}ll ensure a smooth transition from the community version to the Pro
+                      plan for you.
+                    </div>
+                    <button
+                      disabled={loader}
+                      onClick={() => submitEmail()}
+                      type="button"
+                      className="mt-5 md:mt-auto whitespace-nowrap max-w-min items-center gap-x-1 rounded-md px-3 py-2 font-medium outline-none text-sm bg-custom-primary-100 text-white"
+                    >
+                      {loader ? "Loading.." : " Join waitlist"}
+                    </button>
+                    {errorMessage && (
+                      <div
+                        className={`mt-1 text-sm ${
+                          errorMessage && errorMessage?.status === "success"
+                            ? "text-green-500"
+                            : " text-red-500"
+                        }`}
+                      >
+                        {errorMessage?.message}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default UpgradeToProModal;
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
index 6c2f20a3e..d4227804b 100644
--- a/apps/app/constants/graph.ts
+++ b/apps/app/constants/graph.ts
@@ -2,27 +2,27 @@
 import { Theme } from "@nivo/core";
 
 export const CHARTS_THEME: Theme = {
-  background: "rgb(var(--color-bg-surface-1))",
-  textColor: "rgb(var(--color-text-secondary))",
+  background: "transparent",
+  textColor: "rgb(var(--color-text-200))",
   axis: {
     domain: {
       line: {
-        stroke: "rgb(var(--color-border))",
+        stroke: "rgb(var(--color-background-80))",
         strokeWidth: 0.5,
       },
     },
   },
   tooltip: {
     container: {
-      background: "rgb(var(--color-bg-surface-2))",
-      color: "rgb(var(--color-text-secondary))",
+      background: "rgb(var(--color-background-80))",
+      color: "rgb(var(--color-text-200))",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-border))",
+      border: "1px solid rgb(var(--color-background-80))",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-border))",
+      stroke: "rgb(var(--color-background-80))",
     },
   },
 };
diff --git a/apps/app/constants/inbox.ts b/apps/app/constants/inbox.ts
index 3d7e8a054..6ec52ee13 100644
--- a/apps/app/constants/inbox.ts
+++ b/apps/app/constants/inbox.ts
@@ -19,7 +19,7 @@ export const INBOX_STATUS = [
     key: "snoozed",
     label: "Snoozed",
     value: 0,
-    textColor: "text-brand-secondary",
+    textColor: "text-custom-text-200",
     bgColor: "bg-gray-500/10",
     borderColor: "border-gray-500",
   },
@@ -35,7 +35,7 @@ export const INBOX_STATUS = [
     key: "duplicate",
     label: "Duplicate",
     value: 2,
-    textColor: "text-brand-secondary",
+    textColor: "text-custom-text-200",
     bgColor: "bg-gray-500/10",
     borderColor: "border-gray-500",
   },
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
index 0a3d37809..0bf3f4ffb 100644
--- a/apps/app/constants/issue.ts
+++ b/apps/app/constants/issue.ts
@@ -73,6 +73,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
       ...prevData[issueIndex],
       ...formData,
       assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
     };
 
     prevData.splice(issueIndex, 1, updatedIssue);
@@ -90,6 +91,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
       ...oldGroup[issueIndex],
       ...formData,
       assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
     };
 
     if (selectedGroupBy !== Object.keys(formData)[0])
diff --git a/apps/app/helpers/color.helper.ts b/apps/app/helpers/color.helper.ts
new file mode 100644
index 000000000..a1f915a1e
--- /dev/null
+++ b/apps/app/helpers/color.helper.ts
@@ -0,0 +1,19 @@
+export type TRgb = { r: number; g: number; b: number };
+
+export const hexToRgb = (hex: string): TRgb => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  return { r, g, b };
+};
+
+export const rgbToHex = (rgb: TRgb): string => {
+  const { r, g, b } = rgb;
+
+  const hexR = r.toString(16).padStart(2, "0");
+  const hexG = g.toString(16).padStart(2, "0");
+  const hexB = b.toString(16).padStart(2, "0");
+
+  return `#${hexR}${hexG}${hexB}`;
+};
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index b513b38da..dcc33541e 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -172,18 +172,35 @@ export const renderShortDate = (date: string | Date, placeholder?: string) => {
   return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
 };
 
-export const renderShortTime = (date: string | Date) => {
-  if (!date || date === "") return null;
+export const render12HourFormatTime = (date: string | Date): string => {
+  if (!date || date === "") return "";
+
+  date = new Date(date);
+
+  let hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  let period = "AM";
+
+  if (hours >= 12) {
+    period = "PM";
+
+    if (hours > 12) hours -= 12;
+  }
+
+  return hours + ":" + minutes + " " + period;
+};
+
+export const render24HourFormatTime = (date: string | Date): string => {
+  if (!date || date === "") return "";
 
   date = new Date(date);
 
   const hours = date.getHours();
   let minutes: any = date.getMinutes();
 
-  // Add leading zero to single-digit minutes
-  if (minutes < 10) {
-    minutes = "0" + minutes;
-  }
+  // add leading zero to single digit minutes
+  if (minutes < 10) minutes = "0" + minutes;
 
   return hours + ":" + minutes;
 };
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index 4dfc9855b..a5fc05e78 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -89,7 +89,7 @@ export const cosineSimilarity = (a: string, b: string) => {
 };
 
 export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-accent))";
+  if (!string) return "rgb(var(--color-primary-100))";
 
   string = `${string}`;
 
diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts
index d3d76f3e5..42e6bd8d9 100644
--- a/apps/app/helpers/theme.helper.ts
+++ b/apps/app/helpers/theme.helper.ts
@@ -1,35 +1,119 @@
-export const hexToRgb = (hex: string) => {
-  hex = hex.toLowerCase();
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",")
-    : null;
+import { TRgb, hexToRgb } from "helpers/color.helper";
+
+type TShades = {
+  10: TRgb;
+  20: TRgb;
+  30: TRgb;
+  40: TRgb;
+  50: TRgb;
+  60: TRgb;
+  70: TRgb;
+  80: TRgb;
+  90: TRgb;
+  100: TRgb;
+  200: TRgb;
+  300: TRgb;
+  400: TRgb;
+  500: TRgb;
+  600: TRgb;
+  700: TRgb;
+  800: TRgb;
+  900: TRgb;
+};
+
+const calculateShades = (hexValue: string): TShades => {
+  const shades: Partial<TShades> = {};
+  const { r, g, b } = hexToRgb(hexValue);
+
+  const convertHexToSpecificShade = (shade: number): TRgb => {
+    if (shade <= 100) {
+      const decimalValue = (100 - shade) / 100;
+
+      const newR = Math.floor(r + (255 - r) * decimalValue);
+      const newG = Math.floor(g + (255 - g) * decimalValue);
+      const newB = Math.floor(b + (255 - b) * decimalValue);
+
+      return {
+        r: newR,
+        g: newG,
+        b: newB,
+      };
+    } else {
+      const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
+
+      const newR = Math.ceil(r * decimalValue);
+      const newG = Math.ceil(g * decimalValue);
+      const newB = Math.ceil(b * decimalValue);
+
+      return {
+        r: newR,
+        g: newG,
+        b: newB,
+      };
+    }
+  };
+
+  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
+    shades[i as keyof TShades] = convertHexToSpecificShade(i);
+
+  return shades as TShades;
 };
 
 export const applyTheme = (palette: string, isDarkPalette: boolean) => {
-  const values: string[] = [];
-  palette.split(",").map((color: string) => {
-    const cssVarColor = hexToRgb(color);
-    if (cssVarColor) values.push(cssVarColor);
-  });
-
-  const cssVars = [
-    "--color-bg-base",
-    "--color-bg-surface-1",
-    "--color-bg-surface-2",
-    "--color-border",
-    "--color-bg-sidebar",
-    "--color-accent",
-    "--color-text-base",
-    "--color-text-secondary",
-    "color-scheme",
-  ];
-
+  // palette: [bg, text, primary, sidebarBg, sidebarText]
+  const values: string[] = palette.split(",");
   values.push(isDarkPalette ? "dark" : "light");
 
-  cssVars.forEach((cssVar, i) =>
+  const bgShades = calculateShades(values[0]);
+  const textShades = calculateShades(values[1]);
+  const primaryShades = calculateShades(values[2]);
+  const sidebarBackgroundShades = calculateShades(values[3]);
+  const sidebarTextShades = calculateShades(values[4]);
+
+  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
+    const shade = i as keyof TShades;
+
+    const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
+    const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
+    const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
+    const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
+    const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
+
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(cssVar, values[i])
-  );
+      ?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-text-${shade}`, textRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
+
+    if (i >= 100 && i <= 400) {
+      const borderShade = (shade + 100) as keyof TShades;
+
+      document
+        .querySelector<HTMLElement>("[data-theme='custom']")
+        ?.style.setProperty(
+          `--color-border-${shade}`,
+          `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
+        );
+      document
+        .querySelector<HTMLElement>("[data-theme='custom']")
+        ?.style.setProperty(
+          `--color-sidebar-border-${shade}`,
+          `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
+        );
+    }
+  }
+
+  document
+    .querySelector<HTMLElement>("[data-theme='custom']")
+    ?.style.setProperty("--color-scheme", values[5]);
 };
diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
index cbd550053..cc3943ad7 100644
--- a/apps/app/hooks/use-issues-view.tsx
+++ b/apps/app/hooks/use-issues-view.tsx
@@ -186,7 +186,7 @@ const useIssuesView = () => {
     filters,
     setFilters,
     params,
-    isNotEmpty: !isEmpty,
+    isEmpty,
     resetFilterToDefault,
     setNewFilterDefaultView,
     setIssueView,
diff --git a/apps/app/hooks/use-projects.tsx b/apps/app/hooks/use-projects.tsx
index a8a2d455b..f7c9f235c 100644
--- a/apps/app/hooks/use-projects.tsx
+++ b/apps/app/hooks/use-projects.tsx
@@ -6,6 +6,8 @@ import useSWR from "swr";
 import projectService from "services/project.service";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IProject } from "types";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
@@ -24,7 +26,7 @@ const useProjects = () => {
     ?.slice(0, 3);
 
   return {
-    projects: orderArrayBy(projects ?? [], "is_favorite", "descending") || [],
+    projects: orderArrayBy(projects ?? [], "is_favorite", "descending") as IProject[] | undefined,
     recentProjects: recentProjects || [],
     mutateProjects,
   };
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index ea7d5558c..0c07ceb85 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
   <div
-    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ${
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-custom-border-100 bg-custom-sidebar-background-100 px-5 py-4 ${
       noHeader ? "md:hidden" : ""
     }`}
   >
@@ -19,7 +19,7 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
       <div className="block md:hidden">
         <button
           type="button"
-          className="grid h-8 w-8 place-items-center rounded border border-brand-base"
+          className="grid h-8 w-8 place-items-center rounded border border-custom-border-100"
           onClick={() => setToggleSidebar((prevData) => !prevData)}
         >
           <Bars3Icon className="h-5 w-5" />
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index ccdc29ad3..3c3976959 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -19,11 +19,11 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
 
   return (
     <div
-      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
+      className={`z-20 h-full flex-shrink-0 border-r border-custom-sidebar-border-100 ${
         sidebarCollapse ? "" : "w-auto md:w-[17rem]"
       } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"
-      } flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
+      } flex h-full flex-col bg-custom-sidebar-background-100 duration-300 md:relative`}
     >
       <div className="flex h-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index a061491cf..61d84394e 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
           <main
             className={`relative flex h-full w-full flex-col overflow-hidden ${
               bg === "primary"
-                ? "bg-brand-surface-1"
+                ? "bg-custom-background-100"
                 : bg === "secondary"
-                ? "bg-brand-sidebar"
-                : "bg-brand-base"
+                ? "bg-custom-background-90"
+                : "bg-custom-background-80"
             }`}
           >
             <AppHeader
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 6a3050655..3ce21058d 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -101,10 +101,10 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
             <main
               className={`relative flex h-full w-full flex-col overflow-hidden ${
                 bg === "primary"
-                  ? "bg-brand-surface-1"
+                  ? "bg-custom-background-100"
                   : bg === "secondary"
-                  ? "bg-brand-sidebar"
-                  : "bg-brand-base"
+                  ? "bg-custom-background-90"
+                  : "bg-custom-background-80"
               }`}
             >
               <AppHeader
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
index cce155906..5113595fc 100644
--- a/apps/app/layouts/default-layout/index.tsx
+++ b/apps/app/layouts/default-layout/index.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 const DefaultLayout: React.FC<Props> = ({ children }) => (
-  <div className="h-screen w-full overflow-auto bg-brand-surface-1">
+  <div className="h-screen w-full overflow-auto bg-custom-background-90">
     <>{children}</>
   </div>
 );
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 5c06026ea..634fd609d 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -103,8 +103,8 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
                     ? router.asPath.includes(link.href)
                     : router.asPath === link.href
                 )
-                  ? "border-brand-accent bg-brand-accent text-white"
-                  : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
+                  ? "border-custom-primary bg-custom-primary text-white"
+                  : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-90"
               }`}
             >
               {link.label}
diff --git a/apps/app/pages/404.tsx b/apps/app/pages/404.tsx
index a70bc2345..6386093a7 100644
--- a/apps/app/pages/404.tsx
+++ b/apps/app/pages/404.tsx
@@ -21,7 +21,7 @@ const PageNotFound: NextPage = () => (
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Sorry, the page you are looking for cannot be found. It may have been removed, had its
             name changed, or is temporarily unavailable.
           </p>
diff --git a/apps/app/pages/[workspaceSlug]/analytics.tsx b/apps/app/pages/[workspaceSlug]/analytics.tsx
index e37555bae..bbed700cf 100644
--- a/apps/app/pages/[workspaceSlug]/analytics.tsx
+++ b/apps/app/pages/[workspaceSlug]/analytics.tsx
@@ -8,6 +8,7 @@ import useSWR from "swr";
 import { useForm } from "react-hook-form";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
+import useProjects from "hooks/use-projects";
 // headless ui
 import { Tab } from "@headlessui/react";
 // services
@@ -19,6 +20,11 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { EmptyState } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyAnalytics from "public/empty-state/analytics.svg";
 // types
 import { IAnalyticsParams } from "types";
 // fetch-keys
@@ -38,6 +44,7 @@ const Analytics = () => {
   const { workspaceSlug } = router.query;
 
   const { user } = useUserAuth();
+  const { projects } = useProjects();
 
   const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
 
@@ -84,54 +91,60 @@ const Analytics = () => {
           <BreadcrumbItem title="Workspace Analytics" />
         </Breadcrumbs>
       }
-      // right={
-      //   <PrimaryButton
-      //     className="flex items-center gap-2"
-      //     onClick={() => {
-      //       const e = new KeyboardEvent("keydown", { key: "p" });
-      //       document.dispatchEvent(e);
-      //     }}
-      //   >
-      //     <PlusIcon className="h-4 w-4" />
-      //     Save Analytics
-      //   </PrimaryButton>
-      // }
     >
-      <div className="h-full flex flex-col overflow-hidden bg-brand-base">
-        <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
-            {tabsList.map((tab) => (
-              <Tab
-                key={tab}
-                className={({ selected }) =>
-                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
-                    selected ? "bg-brand-surface-2" : ""
-                  }`
-                }
-                onClick={() => trackAnalyticsEvent(tab)}
-              >
-                {tab}
-              </Tab>
-            ))}
-          </Tab.List>
-          <Tab.Panels as={Fragment}>
-            <Tab.Panel as={Fragment}>
-              <ScopeAndDemand fullScreen />
-            </Tab.Panel>
-            <Tab.Panel as={Fragment}>
-              <CustomAnalytics
-                analytics={analytics}
-                analyticsError={analyticsError}
-                params={params}
-                control={control}
-                setValue={setValue}
-                user={user}
-                fullScreen
-              />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </div>
+      {projects ? (
+        projects.length > 0 ? (
+          <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+            <Tab.Group as={Fragment}>
+              <Tab.List as="div" className="space-x-2 border-b border-custom-border-100 px-5 py-3">
+                {tabsList.map((tab) => (
+                  <Tab
+                    key={tab}
+                    className={({ selected }) =>
+                      `rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                        selected ? "bg-custom-background-80" : ""
+                      }`
+                    }
+                    onClick={() => trackAnalyticsEvent(tab)}
+                  >
+                    {tab}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels as={Fragment}>
+                <Tab.Panel as={Fragment}>
+                  <ScopeAndDemand fullScreen />
+                </Tab.Panel>
+                <Tab.Panel as={Fragment}>
+                  <CustomAnalytics
+                    analytics={analytics}
+                    analyticsError={analyticsError}
+                    params={params}
+                    control={control}
+                    setValue={setValue}
+                    user={user}
+                    fullScreen
+                  />
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        ) : (
+          <EmptyState
+            title="You can see your all projects' analytics here"
+            description="Let's create your first project and analyse the stats with various graphs."
+            image={emptyAnalytics}
+            buttonText="New Project"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            }}
+          />
+        )
+      ) : null}
     </WorkspaceAuthorizationLayout>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 3c75890f6..5a478a6ac 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 import useSWR, { mutate } from "swr";
 
@@ -8,6 +9,9 @@ import useSWR, { mutate } from "swr";
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // services
 import userService from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+import useProjects from "hooks/use-projects";
 // components
 import {
   CompletedIssuesGraph,
@@ -15,11 +19,18 @@ import {
   IssuesPieChart,
   IssuesStats,
 } from "components/workspace";
-import { ProductUpdatesModal } from "components/ui";
+// ui
+import { PrimaryButton, ProductUpdatesModal } from "components/ui";
+// images
+import emptyDashboard from "public/empty-state/dashboard.svg";
+// helpers
+import { render12HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 // types
 import type { NextPage } from "next";
 // fetch-keys
 import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
+// constants
+import { DAYS } from "constants/project";
 
 const WorkspacePage: NextPage = () => {
   const [month, setMonth] = useState(new Date().getMonth() + 1);
@@ -28,11 +39,18 @@ const WorkspacePage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { user } = useUser();
+  const { projects } = useProjects();
+
   const { data: workspaceDashboardData } = useSWR(
     workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
     workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null
   );
 
+  const today = new Date();
+  const greeting =
+    today.getHours() < 12 ? "morning" : today.getHours() < 18 ? "afternoon" : "evening";
+
   useEffect(() => {
     if (!workspaceSlug) return;
 
@@ -47,42 +65,76 @@ const WorkspacePage: NextPage = () => {
           setIsOpen={setIsProductUpdatesModalOpen}
         />
       )}
-      <div className="p-8">
-        <div className="flex flex-col gap-8">
-          <div className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-brand-base bg-brand-base px-4 py-6 md:flex-row md:items-center md:py-3">
-            <p className="font-semibold">
-              Plane is open source, support us by starring us on GitHub.
-            </p>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setIsProductUpdatesModalOpen(true)}
-                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
-              >
-                {`What's New?`}
-              </button>
-              <a
-                href="https://github.com/makeplane/plane"
-                target="_blank"
-                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
-                rel="noopener noreferrer"
-              >
-                Star us on GitHub
-              </a>
+      {projects ? (
+        projects.length > 0 ? (
+          <div className="p-8">
+            <div className="flex flex-col gap-8">
+              <div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
+                <p className="font-semibold">
+                  Plane is open source, support us by starring us on GitHub.
+                </p>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setIsProductUpdatesModalOpen(true)}
+                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                  >
+                    {`What's New?`}
+                  </button>
+                  <a
+                    href="https://github.com/makeplane/plane"
+                    target="_blank"
+                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                    rel="noopener noreferrer"
+                  >
+                    Star us on GitHub
+                  </a>
+                </div>
+              </div>
+              <IssuesStats data={workspaceDashboardData} />
+              <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
+                <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
+                <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
+                <CompletedIssuesGraph
+                  issues={workspaceDashboardData?.completed_issues}
+                  month={month}
+                  setMonth={setMonth}
+                />
+              </div>
             </div>
           </div>
-          <IssuesStats data={workspaceDashboardData} />
-          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-            <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
-            <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
-            <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
-            <CompletedIssuesGraph
-              issues={workspaceDashboardData?.completed_issues}
-              month={month}
-              setMonth={setMonth}
-            />
+        ) : (
+          <div className="p-8">
+            <h3 className="text-2xl font-semibold">
+              Good {greeting}, {user?.first_name} {user?.last_name}
+            </h3>
+            <h6 className="text-custom-text-400 font-medium">
+              {DAYS[today.getDay()]}, {renderShortDate(today)} {render12HourFormatTime(today)}
+            </h6>
+            <div className="mt-7 bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
+              <div className="p-5 md:p-8 pr-0">
+                <h5 className="text-xl font-semibold">Create a project</h5>
+                <p className="mt-2 mb-5">
+                  Manage your projects by creating issues, cycles, modules, views and pages.
+                </p>
+                <PrimaryButton
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "p",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  Create Project
+                </PrimaryButton>
+              </div>
+              <div className="hidden md:block self-end overflow-hidden pt-8">
+                <Image src={emptyDashboard} alt="Empty Dashboard" />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        )
+      ) : null}
     </WorkspaceAuthorizationLayout>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index c66fcee55..e4826bf64 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -5,13 +5,15 @@ import { useRouter } from "next/router";
 // headless ui
 import { Disclosure, Popover, Transition } from "@headlessui/react";
 // icons
-import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyMyIssues from "public/empty-state/my-issues.svg";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // hooks
 import useIssues from "hooks/use-issues";
 // ui
-import { Spinner, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
+import { Spinner, PrimaryButton, EmptyState } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // hooks
 import useMyIssuesProperties from "hooks/use-my-issues-filter";
@@ -23,13 +25,14 @@ import { MyIssuesListItem } from "components/issues";
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
+import useProjects from "hooks/use-projects";
 
 const MyIssuesPage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  // fetching user issues
   const { myIssues } = useIssues(workspaceSlug as string);
+  const { projects } = useProjects();
 
   const [properties, setProperties] = useMyIssuesProperties(workspaceSlug as string);
 
@@ -47,8 +50,8 @@ const MyIssuesPage: NextPage = () => {
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
-                      open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                    className={`group flex items-center gap-2 rounded-md border border-custom-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
+                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                     }`}
                   >
                     <span>View</span>
@@ -64,9 +67,9 @@ const MyIssuesPage: NextPage = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-brand-base p-3 shadow-lg">
+                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-custom-background-100 p-3 shadow-lg">
                       <div className="space-y-2 py-3">
-                        <h4 className="text-sm text-brand-secondary">Properties</h4>
+                        <h4 className="text-sm text-custom-text-200">Properties</h4>
                         <div className="flex flex-wrap items-center gap-2">
                           {Object.keys(properties).map((key) => {
                             if (key === "estimate") return null;
@@ -77,8 +80,8 @@ const MyIssuesPage: NextPage = () => {
                                 type="button"
                                 className={`rounded border px-2 py-1 text-xs capitalize ${
                                   properties[key as keyof Properties]
-                                    ? "border-brand-accent bg-brand-accent text-white"
-                                    : "border-brand-base"
+                                    ? "border-custom-primary bg-custom-primary text-white"
+                                    : "border-custom-border-100"
                                 }`}
                                 onClick={() => setProperties(key as keyof Properties)}
                               >
@@ -114,11 +117,11 @@ const MyIssuesPage: NextPage = () => {
               <Disclosure as="div" defaultOpen>
                 {({ open }) => (
                   <div>
-                    <div className="flex items-center px-4 py-2.5">
+                    <div className="flex items-center px-4 py-2.5 bg-custom-background-90">
                       <Disclosure.Button>
                         <div className="flex items-center gap-x-2">
                           <h2 className="font-medium leading-5">My Issues</h2>
-                          <span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
+                          <span className="rounded-full bg-custom-background-80 py-0.5 px-3 text-sm text-custom-text-200">
                             {myIssues.length}
                           </span>
                         </div>
@@ -148,30 +151,39 @@ const MyIssuesPage: NextPage = () => {
                 )}
               </Disclosure>
             ) : (
-              <div className="flex h-full w-full flex-col items-center justify-center px-4">
-                <EmptySpace
-                  title="You don't have any issue assigned to you yet."
-                  description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-                  Icon={RectangleStackIcon}
-                >
-                  <EmptySpaceItem
-                    title="Create a new issue"
-                    description={
-                      <span>
-                        Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut
-                        to create a new issue
-                      </span>
-                    }
-                    Icon={PlusIcon}
-                    action={() => {
-                      const e = new KeyboardEvent("keydown", {
-                        key: "c",
-                      });
-                      document.dispatchEvent(e);
-                    }}
-                  />
-                </EmptySpace>
-              </div>
+              <EmptyState
+                title={
+                  projects
+                    ? projects.length > 0
+                      ? "You don't have any issue assigned to you yet"
+                      : "Issues assigned to you will appear here"
+                    : ""
+                }
+                description={
+                  projects
+                    ? projects.length > 0
+                      ? "Keep track of your work in a single place."
+                      : "Let's create your first project and add issues that you want to accomplish."
+                    : ""
+                }
+                image={emptyMyIssues}
+                buttonText={projects ? (projects.length > 0 ? "New Issue" : "New Project") : ""}
+                buttonIcon={<PlusIcon className="h-4 w-4" />}
+                onClick={() => {
+                  let e: KeyboardEvent;
+
+                  if (projects && projects.length > 0)
+                    e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                  else
+                    e = new KeyboardEvent("keydown", {
+                      key: "p",
+                    });
+
+                  document.dispatchEvent(e);
+                }}
+              />
             )}
           </>
         ) : (
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index 3fe99df92..4b115bf00 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -28,7 +28,7 @@ const ProfileActivity = () => {
         <div className="mb-8 space-y-6">
           <div>
             <h3 className="text-3xl font-semibold">Profile Settings</h3>
-            <p className="mt-1 text-brand-secondary">
+            <p className="mt-1 text-custom-text-200">
               This information will be visible to only you.
             </p>
           </div>
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 247ef7e03..85834d546 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -140,7 +140,7 @@ const Profile: NextPage = () => {
           <div className="mb-8 space-y-6">
             <div>
               <h3 className="text-3xl font-semibold">Profile Settings</h3>
-              <p className="mt-1 text-brand-secondary">
+              <p className="mt-1 text-custom-text-200">
                 This information will be visible to only you.
               </p>
             </div>
@@ -149,8 +149,8 @@ const Profile: NextPage = () => {
           <div className="space-y-8 sm:space-y-12">
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Profile Picture</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Profile Picture</h4>
+                <p className="text-sm text-custom-text-200">
                   Max file size is 5MB. Supported file types are .jpg and .png.
                 </p>
               </div>
@@ -158,8 +158,8 @@ const Profile: NextPage = () => {
                 <div className="flex items-center gap-4">
                   <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                     {!watch("avatar") || watch("avatar") === "" ? (
-                      <div className="h-12 w-12 rounded-md bg-brand-surface-2 p-2">
-                        <UserIcon className="h-full w-full text-brand-secondary" />
+                      <div className="h-12 w-12 rounded-md bg-custom-background-80 p-2">
+                        <UserIcon className="h-full w-full text-custom-text-200" />
                       </div>
                     ) : (
                       <div className="relative h-12 w-12 overflow-hidden">
@@ -194,8 +194,8 @@ const Profile: NextPage = () => {
             </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Full Name</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Full Name</h4>
+                <p className="text-sm text-custom-text-200">
                   This name will be reflected on all the projects you are working on.
                 </p>
               </div>
@@ -223,8 +223,8 @@ const Profile: NextPage = () => {
             </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Email</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Email</h4>
+                <p className="text-sm text-custom-text-200">
                   The email address that you are using.
                 </p>
               </div>
@@ -242,8 +242,8 @@ const Profile: NextPage = () => {
             </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Role</h4>
-                <p className="text-sm text-brand-secondary">Add your role.</p>
+                <h4 className="text-lg font-semibold text-custom-text-100">Role</h4>
+                <p className="text-sm text-custom-text-200">Add your role.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
index abaaefcd8..64b598f7f 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -40,7 +40,7 @@ const ProfilePreferences = () => {
           <div className="mb-8 space-y-6">
             <div>
               <h3 className="text-3xl font-semibold">Profile Settings</h3>
-              <p className="mt-1 text-brand-secondary">
+              <p className="mt-1 text-custom-text-200">
                 This information will be visible to only you.
               </p>
             </div>
@@ -49,8 +49,8 @@ const ProfilePreferences = () => {
           <div className="space-y-8 sm:space-y-12">
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Theme</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
+                <p className="text-sm text-custom-text-200">
                   Select or customize your interface color scheme.
                 </p>
               </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 917515931..690300358 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -140,14 +140,14 @@ const SingleCycle: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
               outline
             >
               Analytics
             </SecondaryButton>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
                 cycleSidebar ? "rotate-180" : ""
               }`}
               onClick={() => setCycleSidebar((prevData) => !prevData)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 502578927..4997ddf6e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -10,7 +10,6 @@ import { Tab } from "@headlessui/react";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // services
-import cycleService from "services/cycles.service";
 import projectService from "services/project.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
@@ -109,37 +108,37 @@ const ProjectCycles: NextPage = () => {
       />
       <div className="space-y-5 p-8 h-full flex flex-col overflow-hidden">
         <div className="flex gap-4 justify-between">
-          <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
+          <h3 className="text-2xl font-semibold text-custom-text-100">Cycles</h3>
           <div className="flex items-center gap-x-1">
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "list" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "list" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => setCyclesView("list")}
             >
-              <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+              <ListBulletIcon className="h-4 w-4 text-custom-text-200" />
             </button>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "board" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "board" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => setCyclesView("board")}
             >
-              <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+              <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
             </button>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "gantt_chart" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => {
                 setCyclesView("gantt_chart");
                 setCycleTab("All");
               }}
             >
-              <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
                 waterfall_chart
               </span>
             </button>
@@ -177,8 +176,8 @@ const ProjectCycles: NextPage = () => {
                   className={({ selected }) =>
                     `rounded-3xl border px-6 py-1 outline-none ${
                       selected
-                        ? "border-brand-accent bg-brand-accent text-white font-medium"
-                        : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                        ? "border-custom-primary bg-custom-primary text-white font-medium"
+                        : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80"
                     }`
                   }
                 >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index dc301e0d8..387bf5979 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -52,7 +52,7 @@ const ProjectInbox: NextPage = () => {
       >
         <div className="flex flex-col h-full">
           <InboxActionHeader />
-          <div className="grid grid-cols-4 flex-1 divide-x divide-brand-base overflow-hidden">
+          <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-100 overflow-hidden">
             <IssuesListSidebar />
             <div className="col-span-3 h-full overflow-auto">
               <InboxMainContent />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index cb57ff9fd..6592e3123 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="w-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
+          <div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-100 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="w-1/3 space-y-5 border-l border-brand-base p-5">
+          <div className="w-1/3 space-y-5 border-l border-custom-border-100 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 8fdab7f4f..6f87366f8 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 rounded-md font-normal text-brand-secondary"
+              className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
               outline
             >
               Analytics
@@ -72,12 +72,12 @@ const ProjectIssues: NextPage = () => {
               <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
                 <a>
                   <SecondaryButton
-                    className="relative !py-1.5 rounded-md font-normal text-brand-secondary"
+                    className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
                     outline
                   >
                     <span>Inbox</span>
                     {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
-                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-brand-base bg-brand-surface-2 border border-brand-base">
+                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-100">
                         {inboxList?.[0]?.pending_issue_count}
                       </span>
                     )}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 8e15cc6f3..98d2c7985 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -144,14 +144,14 @@ const SingleModule: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
               outline
             >
               Analytics
             </SecondaryButton>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
                 moduleSidebar ? "rotate-180" : ""
               }`}
               onClick={() => setModuleSidebar((prevData) => !prevData)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index be92a9f86..ba952be7a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -21,9 +21,9 @@ import {
 import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ChartBarIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // images
-import emptyModule from "public/empty-state/empty-module.svg";
+import emptyModule from "public/empty-state/module.svg";
 // types
 import { IModule, SelectModuleType } from "types/modules";
 import type { NextPage } from "next";
@@ -99,25 +99,25 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5 p-8 flex flex-col h-full overflow-hidden">
             <div className="flex gap-4 justify-between">
-              <h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
+              <h3 className="text-2xl font-semibold text-custom-text-100">Modules</h3>
               <div className="flex items-center gap-x-1">
                 <button
                   type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    modulesView === "grid" ? "bg-brand-surface-2" : ""
+                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                    modulesView === "grid" ? "bg-custom-background-80" : ""
                   }`}
                   onClick={() => setModulesView("grid")}
                 >
-                  <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                  <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
                 </button>
                 <button
                   type="button"
-                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-                    modulesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
+                    modulesView === "gantt_chart" ? "bg-custom-background-80" : ""
                   }`}
                   onClick={() => setModulesView("gantt_chart")}
                 >
-                  <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+                  <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
                     waterfall_chart
                   </span>
                 </button>
@@ -141,10 +141,17 @@ const ProjectModules: NextPage = () => {
           </div>
         ) : (
           <EmptyState
-            type="module"
-            title="Create New Module"
-            description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
-            imgURL={emptyModule}
+            title="Manage your project with modules"
+            description="Modules are smaller, focused projects that help you group and organize issues."
+            image={emptyModule}
+            buttonText="New Module"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "m",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index c157d7b96..f34689237 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -41,7 +41,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
 // helpers
-import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
+import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -306,7 +306,7 @@ const SinglePage: NextPage = () => {
                 <div className="flex w-full items-center gap-2">
                   <button
                     type="button"
-                    className="flex items-center gap-2 text-sm text-brand-secondary"
+                    className="flex items-center gap-2 text-sm text-custom-text-200"
                     onClick={() => router.back()}
                   >
                     <ArrowLeftIcon className="h-4 w-4" />
@@ -320,7 +320,7 @@ const SinglePage: NextPage = () => {
                     onBlur={handleSubmit(updatePage)}
                     onChange={(e) => setValue("name", e.target.value)}
                     required={true}
-                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
+                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0"
                     role="textbox"
                     noPadding
                   />
@@ -337,7 +337,7 @@ const SinglePage: NextPage = () => {
                         return (
                           <div
                             key={label.id}
-                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
                             onClick={() => {
                               const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
                               partialUpdatePage({ labels_list: updatedLabels });
@@ -366,7 +366,7 @@ const SinglePage: NextPage = () => {
                     customButton={
                       <button
                         type="button"
-                        className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
+                        className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs"
                       >
                         <PlusIcon className="h-3.5 w-3.5" />
                         {pageDetails.labels.length <= 0 && <span>Add Label</span>}
@@ -376,12 +376,12 @@ const SinglePage: NextPage = () => {
                     footerOption={
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
                         onClick={() => {
                           setLabelModal(true);
                         }}
                       >
-                        <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                        <span className="flex items-center justify-start gap-1 text-custom-text-200">
                           <PlusIcon className="h-4 w-4" aria-hidden="true" />
                           <span>Create New Label</span>
                         </span>
@@ -395,13 +395,13 @@ const SinglePage: NextPage = () => {
                 </div>
               </div>
               <div className="flex items-center">
-                <div className="flex items-center gap-6 text-brand-secondary">
+                <div className="flex items-center gap-6 text-custom-text-200">
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(
                       pageDetails.updated_at
                     )} on ${renderShortDate(pageDetails.updated_at)}`}
                   >
-                    <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
+                    <p className="text-sm">{render24HourFormatTime(pageDetails.updated_at)}</p>
                   </Tooltip>
                   <button className="flex items-center gap-2" onClick={handleCopyText}>
                     <LinkIcon className="h-4 w-4" />
@@ -413,7 +413,7 @@ const SinglePage: NextPage = () => {
                           <Popover.Button
                             type="button"
                             className={`group inline-flex items-center outline-none ${
-                              open ? "text-brand-base" : "text-brand-secondary"
+                              open ? "text-custom-text-100" : "text-custom-text-200"
                             }`}
                           >
                             {watch("color") && watch("color") !== "" ? (
@@ -443,12 +443,12 @@ const SinglePage: NextPage = () => {
                                 styles={{
                                   default: {
                                     card: {
-                                      backgroundColor: `rgba(var(--color-bg-surface-2))`,
+                                      backgroundColor: `rgba(var(--color-background-80))`,
                                     },
                                     triangle: {
                                       position: "absolute",
                                       borderColor:
-                                        "transparent transparent rgba(var(--color-bg-surface-2)) transparent",
+                                        "transparent transparent rgba(var(--color-background-80)) transparent",
                                     },
                                     input: {
                                       border: "none",
@@ -457,13 +457,13 @@ const SinglePage: NextPage = () => {
                                       paddingLeft: "0.25rem",
                                       color: `rgba(var(--color-text-secondary))`,
                                       boxShadow: "none",
-                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
-                                      borderLeft: `1px solid rgba(var(--color-bg-surface-2))`,
+                                      backgroundColor: `rgba(var(--color-background-90))`,
+                                      borderLeft: `1px solid rgba(var(--color-background-80))`,
                                     },
                                     hash: {
                                       color: `rgba(var(--color-text-secondary))`,
                                       boxShadow: "none",
-                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                      backgroundColor: `rgba(var(--color-background-90))`,
                                     },
                                   },
                                 }}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f76c7f7e4..e7a2be1c6 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -125,12 +125,12 @@ const ProjectPages: NextPage = () => {
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
           <div className="flex gap-4 justify-between">
-            <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+            <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
             <div className="flex gap-x-1">
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                  viewType === "list" ? "bg-brand-surface-2" : ""
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                  viewType === "list" ? "bg-custom-background-80" : ""
                 }`}
                 onClick={() => setViewType("list")}
               >
@@ -138,8 +138,8 @@ const ProjectPages: NextPage = () => {
               </button>
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                  viewType === "detailed" ? "bg-brand-surface-2" : ""
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                  viewType === "detailed" ? "bg-custom-background-80" : ""
                 }`}
                 onClick={() => setViewType("detailed")}
               >
@@ -176,8 +176,8 @@ const ProjectPages: NextPage = () => {
                     className={({ selected }) =>
                       `rounded-full border px-5 py-1.5 text-sm outline-none ${
                         selected
-                          ? "border-brand-accent bg-brand-accent text-white"
-                          : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
+                          ? "border-custom-primary bg-custom-primary text-white"
+                          : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-90"
                       }`
                     }
                   >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index c6e02d726..7fe2bca6b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -111,7 +111,7 @@ const ControlSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Project Lead</h4>
-              <p className="text-sm text-brand-secondary">Select the project leader.</p>
+              <p className="text-sm text-custom-text-200">Select the project leader.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -123,7 +123,7 @@ const ControlSettings: NextPage = () => {
                       {...field}
                       label={
                         people?.find((person) => person.member.id === field.value)?.member
-                          .first_name ?? <span className="text-brand-secondary">Select lead</span>
+                          .first_name ?? <span className="text-custom-text-200">Select lead</span>
                       }
                       width="w-full"
                       input
@@ -169,7 +169,7 @@ const ControlSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Default Assignee</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select the default assignee for the project.
               </p>
             </div>
@@ -183,7 +183,7 @@ const ControlSettings: NextPage = () => {
                       {...field}
                       label={
                         people?.find((p) => p.member.id === field.value)?.member.first_name ?? (
-                          <span className="text-brand-secondary">Select default assignee</span>
+                          <span className="text-custom-text-200">Select default assignee</span>
                         )
                       }
                       width="w-full"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 76e353319..5c924d187 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -23,7 +23,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyEstimate from "public/empty-state/empty-estimate.svg";
+import emptyEstimate from "public/empty-state/estimate.svg";
 // types
 import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
@@ -122,14 +122,14 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8">
+        <div className="h-full flex flex-col p-8 overflow-hidden">
           <SettingsHeader />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
             <div className="col-span-12 space-y-5 sm:col-span-7">
               <div className="flex items-center gap-2">
-                <span
-                  className="flex cursor-pointer items-center gap-2 text-theme"
+                <div
+                  className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
                   onClick={() => {
                     setEstimateToUpdate(undefined);
                     setEstimateFormOpen(true);
@@ -137,7 +137,7 @@ const EstimatesSettings: NextPage = () => {
                 >
                   <PlusIcon className="h-4 w-4" />
                   Create New Estimate
-                </span>
+                </div>
                 {projectDetails?.estimate && (
                   <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
                 )}
@@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="mt-5 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+              <section className="h-full mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6 overflow-y-auto">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
@@ -158,13 +158,14 @@ const EstimatesSettings: NextPage = () => {
                 ))}
               </section>
             ) : (
-              <div className="mt-5">
+              <div className="h-full w-full overflow-y-auto">
                 <EmptyState
-                  type="estimate"
-                  title="Create New Estimate"
-                  description="Estimates help you communicate the complexity of an issue. You can create your own estimate and communicate with your team."
-                  imgURL={emptyEstimate}
-                  action={() => {
+                  title="No estimates yet"
+                  description="Estimates help you communicate the complexity of an issue."
+                  image={emptyEstimate}
+                  buttonText="Add Estimate"
+                  buttonIcon={<PlusIcon className="h-4 w-4" />}
+                  onClick={() => {
                     setEstimateToUpdate(undefined);
                     setEstimateFormOpen(true);
                   }}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index e10ce5aa6..e528b086f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -184,13 +184,13 @@ const FeaturesSettings: NextPage = () => {
             {featuresList.map((feature) => (
               <div
                 key={feature.property}
-                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-base p-5"
+                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5"
               >
                 <div className="flex items-start gap-3">
                   {feature.icon}
-                  <div>
+                  <div className="">
                     <h4 className="text-lg font-semibold">{feature.title}</h4>
-                    <p className="text-sm text-brand-secondary">{feature.description}</p>
+                    <p className="text-sm text-custom-text-200">{feature.description}</p>
                   </div>
                 </div>
                 <ToggleSwitch
@@ -219,11 +219,21 @@ const FeaturesSettings: NextPage = () => {
               </div>
             ))}
           </div>
-          <div className="flex items-center gap-2">
-            <a href="https://plane.so/" target="_blank" rel="noreferrer">
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <a
+              href="https://plane.so/"
+              target="_blank"
+              rel="noreferrer"
+              className="hover:text-custom-text-100"
+            >
               <SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
             </a>
-            <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
+            <a
+              href="https://github.com/makeplane/plane"
+              target="_blank"
+              rel="noreferrer"
+              className="hover:text-custom-text-100"
+            >
               <SecondaryButton outline>Star us on GitHub</SecondaryButton>
             </a>
           </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index e8ac1d9d0..3ad95d473 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -166,7 +166,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Icon & Name</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select an icon and a name for your project.
               </p>
             </div>
@@ -226,7 +226,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Description</h4>
-              <p className="text-sm text-brand-secondary">Give a description to your project.</p>
+              <p className="text-sm text-custom-text-200">Give a description to your project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -249,13 +249,13 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Cover Photo</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select your cover photo from the given library.
               </p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {watch("cover_image") ? (
-                <div className="h-32 w-full rounded border border-brand-base p-1">
+                <div className="h-32 w-full rounded border border-custom-border-100 p-1">
                   <div className="relative h-full w-full rounded">
                     <img
                       src={watch("cover_image")!}
@@ -283,7 +283,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Identifier</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Create a 1-6 characters{"'"} identifier for the project.
               </p>
             </div>
@@ -319,7 +319,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Network</h4>
-              <p className="text-sm text-brand-secondary">Select privacy type for the project.</p>
+              <p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -366,7 +366,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Danger Zone</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 The danger zone of the project delete page is a critical area that requires careful
                 consideration and attention. When deleting a project, all of the data and resources
                 within that project will be permanently removed and cannot be recovered.
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index d2acc3a5f..7726df02a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -12,15 +12,12 @@ import projectService from "services/project.service";
 // components
 import { SettingsHeader, SingleIntegration } from "components/project";
 // ui
-import {
-  EmptySpace,
-  EmptySpaceItem,
-  IntegrationAndImportExportBanner,
-  Loader,
-} from "components/ui";
+import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+// images
+import emptyIntegration from "public/empty-state/integration.svg";
 // types
 import { IProject } from "types";
 import type { NextPage } from "next";
@@ -58,11 +55,11 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8">
+      <div className="h-full flex flex-col p-8 overflow-hidden">
         <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
-            <section className="space-y-8">
+            <section className="space-y-8 overflow-y-auto">
               <IntegrationAndImportExportBanner bannerName="Integrations" />
               <div className="space-y-5">
                 {workspaceIntegrations.map((integration) => (
@@ -74,21 +71,13 @@ const ProjectIntegrations: NextPage = () => {
               </div>
             </section>
           ) : (
-            <div className="grid h-full w-full place-items-center">
-              <EmptySpace
-                title="You haven't added any integration yet."
-                description="Add GitHub and other integrations to sync your project issues."
-                Icon={PuzzlePieceIcon}
-              >
-                <EmptySpaceItem
-                  title="Add new integration"
-                  Icon={PlusIcon}
-                  action={() => {
-                    router.push(`/${workspaceSlug}/settings/integrations`);
-                  }}
-                />
-              </EmptySpace>
-            </div>
+            <EmptyState
+              title="You haven't configured integrations"
+              description="Configure GitHub and other integrations to sync your project issues."
+              image={emptyIntegration}
+              buttonText="Configure now"
+              onClick={() => router.push(`/${workspaceSlug}/settings/integrations`)}
+            />
           )
         ) : (
           <Loader className="space-y-5">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 6d48c5ee0..228c8ed44 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -21,10 +21,12 @@ import {
 } from "components/labels";
 import { SettingsHeader } from "components/project";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyLabel from "public/empty-state/label.svg";
 // types
 import { IIssueLabels } from "types";
 import type { NextPage } from "next";
@@ -113,7 +115,7 @@ const LabelsSettings: NextPage = () => {
           <section className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
               <h3 className="text-2xl font-semibold">Labels</h3>
-              <p className="text-brand-secondary">Manage the labels of this project.</p>
+              <p className="text-custom-text-200">Manage the labels of this project.</p>
               <PrimaryButton onClick={newLabel} size="sm" className="mt-4">
                 <span className="flex items-center gap-2">
                   <PlusIcon className="h-4 w-4" />
@@ -133,16 +135,33 @@ const LabelsSettings: NextPage = () => {
               )}
               <>
                 {issueLabels ? (
-                  issueLabels.map((label) => {
-                    const children = issueLabels?.filter((l) => l.parent === label.id);
+                  issueLabels.length > 0 ? (
+                    issueLabels.map((label) => {
+                      const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                    if (children && children.length === 0) {
-                      if (!label.parent)
+                      if (children && children.length === 0) {
+                        if (!label.parent)
+                          return (
+                            <SingleLabel
+                              key={label.id}
+                              label={label}
+                              addLabelToGroup={() => addLabelToGroup(label)}
+                              editLabel={(label) => {
+                                editLabel(label);
+                                scrollToRef.current?.scrollIntoView({
+                                  behavior: "smooth",
+                                });
+                              }}
+                              handleLabelDelete={() => setSelectDeleteLabel(label)}
+                            />
+                          );
+                      } else
                         return (
-                          <SingleLabel
+                          <SingleLabelGroup
                             key={label.id}
                             label={label}
-                            addLabelToGroup={() => addLabelToGroup(label)}
+                            labelChildren={children}
+                            addLabelToGroup={addLabelToGroup}
                             editLabel={(label) => {
                               editLabel(label);
                               scrollToRef.current?.scrollIntoView({
@@ -150,26 +169,20 @@ const LabelsSettings: NextPage = () => {
                               });
                             }}
                             handleLabelDelete={() => setSelectDeleteLabel(label)}
+                            user={user}
                           />
                         );
-                    } else
-                      return (
-                        <SingleLabelGroup
-                          key={label.id}
-                          label={label}
-                          labelChildren={children}
-                          addLabelToGroup={addLabelToGroup}
-                          editLabel={(label) => {
-                            editLabel(label);
-                            scrollToRef.current?.scrollIntoView({
-                              behavior: "smooth",
-                            });
-                          }}
-                          handleLabelDelete={() => setSelectDeleteLabel(label)}
-                          user={user}
-                        />
-                      );
-                  })
+                    })
+                  ) : (
+                    <EmptyState
+                      title="No labels yet"
+                      description="Create labels to help organize and filter issues in you project"
+                      image={emptyLabel}
+                      buttonText="Add label"
+                      onClick={newLabel}
+                      isFullScreen={false}
+                    />
+                  )
                 ) : (
                   <Loader className="space-y-5">
                     <Loader.Item height="40px" />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index a0d53df35..65fcff4bc 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -153,7 +153,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-brand-accent outline-none"
+              className="flex items-center gap-2 text-custom-primary outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -168,7 +168,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
+            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -190,7 +190,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
+                          <p className="mt-0.5 text-xs text-custom-text-200">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 0868fef93..835b395f5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -75,8 +75,8 @@ const StatesSettings: NextPage = () => {
           <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
-              <h3 className="text-2xl font-semibold text-brand-base">States</h3>
-              <p className="text-brand-secondary">Manage the states of this project.</p>
+              <h3 className="text-2xl font-semibold text-custom-text-100">States</h3>
+              <p className="text-custom-text-200">Manage the states of this project.</p>
             </div>
             <div className="col-span-12 space-y-8 sm:col-span-7">
               {states && projectDetails ? (
@@ -85,17 +85,17 @@ const StatesSettings: NextPage = () => {
                     return (
                       <div key={key}>
                         <div className="mb-2 flex w-full justify-between">
-                          <h4 className="font-medium capitalize">{key}</h4>
+                          <h4 className="text-custom-text-200 capitalize">{key}</h4>
                           <button
                             type="button"
-                            className="flex items-center gap-2 text-brand-accent outline-none"
+                            className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
                             onClick={() => setActiveGroup(key as keyof StateGroup)}
                           >
                             <PlusIcon className="h-4 w-4" />
                             Add
                           </button>
                         </div>
-                        <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+                        <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
                           {key === activeGroup && (
                             <CreateUpdateStateInline
                               groupLength={orderedStateGroups[key].length}
@@ -121,7 +121,7 @@ const StatesSettings: NextPage = () => {
                               />
                             ) : (
                               <div
-                                className="border-b border-brand-base last:border-b-0"
+                                className="border-b border-custom-border-100 last:border-b-0"
                                 key={state.id}
                               >
                                 <CreateUpdateStateInline
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 44c25cdf0..acd8c882c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -16,7 +16,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 //icons
 import { PlusIcon } from "components/icons";
 // images
-import emptyView from "public/empty-state/empty-view.svg";
+import emptyView from "public/empty-state/view.svg";
 // fetching keys
 import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
@@ -101,8 +101,8 @@ const ProjectViews: NextPage = () => {
       {views ? (
         views.length > 0 ? (
           <div className="space-y-5 p-8">
-            <h3 className="text-2xl font-semibold text-brand-base">Views</h3>
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+            <h3 className="text-2xl font-semibold text-custom-text-100">Views</h3>
+            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
               {views.map((view) => (
                 <SingleViewItem
                   key={view.id}
@@ -115,10 +115,17 @@ const ProjectViews: NextPage = () => {
           </div>
         ) : (
           <EmptyState
-            type="view"
-            title="Create New View"
+            title="Get focused with views"
             description="Views aid in saving your issues by applying various filters and grouping options."
-            imgURL={emptyView}
+            image={emptyView}
+            buttonText="New View"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "v",
+              });
+              document.dispatchEvent(e);
+            }}
           />
         )
       ) : (
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index fa34f02c0..e6bf7a28a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -16,12 +16,12 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { JoinProjectModal } from "components/project/join-project-modal";
 import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
-import { Loader, EmptyState, PrimaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
-import emptyProject from "public/empty-state/empty-project.svg";
+import emptyProject from "public/empty-state/project.svg";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -87,25 +87,34 @@ const ProjectsPage: NextPage = () => {
         user={user}
       />
       {projects ? (
-        <div className="p-8">
-          {projects.length === 0 ? (
-            <EmptyState
-              type="project"
-              title="Create New Project"
-              description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
-              imgURL={emptyProject}
-            />
-          ) : (
-            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-              {projects.map((project) => (
-                <SingleProjectCard
-                  key={project.id}
-                  project={project}
-                  setToJoinProject={setSelectedProjectToJoin}
-                  setDeleteProject={setDeleteProject}
-                />
-              ))}
+        <div className="h-full w-full overflow-hidden">
+          {projects.length > 0 ? (
+            <div className="h-full p-8 overflow-y-auto">
+              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+                {projects.map((project) => (
+                  <SingleProjectCard
+                    key={project.id}
+                    project={project}
+                    setToJoinProject={setSelectedProjectToJoin}
+                    setDeleteProject={setDeleteProject}
+                  />
+                ))}
+              </div>
             </div>
+          ) : (
+            <EmptyState
+              image={emptyProject}
+              title="No projects yet"
+              description="Get started by creating your first project"
+              buttonText="New Project"
+              buttonIcon={<PlusIcon className="h-4 w-4" />}
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "p",
+                });
+                document.dispatchEvent(e);
+              }}
+            />
           )}
         </div>
       ) : (
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 76b66529e..3827a398e 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -44,18 +44,18 @@ const BillingSettings: NextPage = () => {
         <section className="space-y-8">
           <div>
             <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
-            <p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
+            <p className="mt-4 text-sm text-custom-text-200">[Free launch preview] plan Pro</p>
           </div>
           <div className="space-y-8 md:w-2/3">
             <div>
-              <div className="w-80 rounded-md border border-brand-base bg-brand-base p-4 text-center">
+              <div className="w-80 rounded-md border border-custom-border-100 bg-custom-background-100 p-4 text-center">
                 <h4 className="text-md mb-1 leading-6">Payment due</h4>
                 <h2 className="text-3xl font-extrabold">--</h2>
               </div>
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
-              <p className="mb-3 text-sm text-brand-secondary">
+              <p className="mb-3 text-sm text-custom-text-200">
                 You are currently using the free plan
               </p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
@@ -64,7 +64,7 @@ const BillingSettings: NextPage = () => {
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Billing history</h4>
-              <p className="mb-3 text-sm text-brand-secondary">There are no invoices to display</p>
+              <p className="mb-3 text-sm text-custom-text-200">There are no invoices to display</p>
             </div>
           </div>
         </section>
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 9e0917d16..969d2c6fd 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -177,7 +177,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Logo</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   Max file size is 5MB. Supported file types are .jpg and .png.
                 </p>
               </div>
@@ -218,7 +218,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">URL</h4>
-                <p className="text-sm text-brand-secondary">Your workspace URL.</p>
+                <p className="text-sm text-custom-text-200">Your workspace URL.</p>
               </div>
               <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
                 <Input
@@ -258,7 +258,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Name</h4>
-                <p className="text-sm text-brand-secondary">Give a name to your workspace.</p>
+                <p className="text-sm text-custom-text-200">Give a name to your workspace.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Input
@@ -277,7 +277,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Company Size</h4>
-                <p className="text-sm text-brand-secondary">How big is your company?</p>
+                <p className="text-sm text-custom-text-200">How big is your company?</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
@@ -308,7 +308,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Danger Zone</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   The danger zone of the workspace delete page is a critical area that requires
                   careful consideration and attention. When deleting a workspace, all of the data
                   and resources within that workspace will be permanently removed and cannot be
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index da8fd52cb..0955f6c07 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -154,7 +154,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-brand-accent outline-none"
+              className="flex items-center gap-2 text-custom-primary outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
+            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -191,7 +191,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="text-xs text-brand-secondary">{member.email}</p>
+                          <p className="text-xs text-custom-text-200">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">
diff --git a/apps/app/pages/_document.tsx b/apps/app/pages/_document.tsx
index 24f3068c9..8958de15a 100644
--- a/apps/app/pages/_document.tsx
+++ b/apps/app/pages/_document.tsx
@@ -13,6 +13,7 @@ class MyDocument extends Document {
           <link rel="apple-touch-icon" href="/icon.png" />
           <meta name="theme-color" content="#fff" />
           <script defer data-domain="app.plane.so" src="https://plausible.io/js/script.js" />
+          <script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2" />
           {isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
             <script
               defer
diff --git a/apps/app/pages/_error.tsx b/apps/app/pages/_error.tsx
index 8482cbc93..3595c6ce7 100644
--- a/apps/app/pages/_error.tsx
+++ b/apps/app/pages/_error.tsx
@@ -35,18 +35,18 @@ const CustomErrorComponent = () => {
         <div className="space-y-8 text-center">
           <div className="space-y-2">
             <h3 className="text-lg font-semibold">Exception Detected!</h3>
-            <p className="text-sm text-brand-secondary w-1/2 mx-auto">
+            <p className="text-sm text-custom-text-200 w-1/2 mx-auto">
               We{"'"}re Sorry! An exception has been detected, and our engineering team has been
               notified. We apologize for any inconvenience this may have caused. Please reach out to
               our engineering team at{" "}
-              <a href="mailto:support@plane.so" className="text-brand-accent">
+              <a href="mailto:support@plane.so" className="text-custom-primary">
                 support@plane.so
               </a>{" "}
               or on our{" "}
               <a
                 href="https://discord.com/invite/A92xrEGCge"
                 target="_blank"
-                className="text-brand-accent"
+                className="text-custom-primary"
                 rel="noopener noreferrer"
               >
                 Discord
diff --git a/apps/app/pages/colors.tsx b/apps/app/pages/colors.tsx
new file mode 100644
index 000000000..d52e2cf41
--- /dev/null
+++ b/apps/app/pages/colors.tsx
@@ -0,0 +1,143 @@
+import React from "react";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+// types
+import type { NextPage } from "next";
+
+const Colors: NextPage = () => (
+  <UserAuthorizationLayout>
+    <DefaultLayout>
+      <div className="space-y-8 p-8">
+        <div>
+          Primary:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-primary-0" />
+            <div className="h-12 w-12 bg-custom-primary-10" />
+            <div className="h-12 w-12 bg-custom-primary-20" />
+            <div className="h-12 w-12 bg-custom-primary-30" />
+            <div className="h-12 w-12 bg-custom-primary-40" />
+            <div className="h-12 w-12 bg-custom-primary-50" />
+            <div className="h-12 w-12 bg-custom-primary-60" />
+            <div className="h-12 w-12 bg-custom-primary-70" />
+            <div className="h-12 w-12 bg-custom-primary-80" />
+            <div className="h-12 w-12 bg-custom-primary-90" />
+            <div className="h-12 w-12 bg-custom-primary-100" />
+            <div className="h-12 w-12 bg-custom-primary-200" />
+            <div className="h-12 w-12 bg-custom-primary-300" />
+            <div className="h-12 w-12 bg-custom-primary-400" />
+            <div className="h-12 w-12 bg-custom-primary-500" />
+            <div className="h-12 w-12 bg-custom-primary-600" />
+            <div className="h-12 w-12 bg-custom-primary-700" />
+            <div className="h-12 w-12 bg-custom-primary-800" />
+            <div className="h-12 w-12 bg-custom-primary-900" />
+            <div className="h-12 w-12 bg-custom-primary-1000" />
+          </div>
+        </div>
+        <div>
+          Background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-background-0" />
+            <div className="h-12 w-12 bg-custom-background-10" />
+            <div className="h-12 w-12 bg-custom-background-20" />
+            <div className="h-12 w-12 bg-custom-background-30" />
+            <div className="h-12 w-12 bg-custom-background-40" />
+            <div className="h-12 w-12 bg-custom-background-50" />
+            <div className="h-12 w-12 bg-custom-background-60" />
+            <div className="h-12 w-12 bg-custom-background-70" />
+            <div className="h-12 w-12 bg-custom-background-80" />
+            <div className="h-12 w-12 bg-custom-background-90" />
+            <div className="h-12 w-12 bg-custom-background-100" />
+            <div className="h-12 w-12 bg-custom-background-200" />
+            <div className="h-12 w-12 bg-custom-background-300" />
+            <div className="h-12 w-12 bg-custom-background-400" />
+            <div className="h-12 w-12 bg-custom-background-500" />
+            <div className="h-12 w-12 bg-custom-background-600" />
+            <div className="h-12 w-12 bg-custom-background-700" />
+            <div className="h-12 w-12 bg-custom-background-800" />
+            <div className="h-12 w-12 bg-custom-background-900" />
+            <div className="h-12 w-12 bg-custom-background-1000" />
+          </div>
+        </div>
+        <div>
+          Text:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-text-0" />
+            <div className="h-12 w-12 bg-custom-text-10" />
+            <div className="h-12 w-12 bg-custom-text-20" />
+            <div className="h-12 w-12 bg-custom-text-30" />
+            <div className="h-12 w-12 bg-custom-text-40" />
+            <div className="h-12 w-12 bg-custom-text-50" />
+            <div className="h-12 w-12 bg-custom-text-60" />
+            <div className="h-12 w-12 bg-custom-text-70" />
+            <div className="h-12 w-12 bg-custom-text-80" />
+            <div className="h-12 w-12 bg-custom-text-90" />
+            <div className="h-12 w-12 bg-custom-text-100" />
+            <div className="h-12 w-12 bg-custom-text-200" />
+            <div className="h-12 w-12 bg-custom-text-300" />
+            <div className="h-12 w-12 bg-custom-text-400" />
+            <div className="h-12 w-12 bg-custom-text-500" />
+            <div className="h-12 w-12 bg-custom-text-600" />
+            <div className="h-12 w-12 bg-custom-text-700" />
+            <div className="h-12 w-12 bg-custom-text-800" />
+            <div className="h-12 w-12 bg-custom-text-900" />
+            <div className="h-12 w-12 bg-custom-text-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-background-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Text:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-text-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-1000" />
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  </UserAuthorizationLayout>
+);
+
+export default Colors;
diff --git a/apps/app/pages/create-workspace.tsx b/apps/app/pages/create-workspace.tsx
index 82f0d2001..de7888da9 100644
--- a/apps/app/pages/create-workspace.tsx
+++ b/apps/app/pages/create-workspace.tsx
@@ -31,14 +31,14 @@ const CreateWorkspace: NextPage = () => {
         <div className="relative grid h-full place-items-center p-5">
           <div className="h-full flex flex-col items-center justify-center w-full py-4">
             <div className="mb-7 flex items-center justify-center text-center">
-              <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+              <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
             </div>
 
-            <div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md">
               <div className="flex items-center justify-start gap-3 px-7 pt-7 pb-3.5 text-gray-8 text-sm">
                 <div className="flex flex-col gap-2 justify-center ">
-                  <h3 className="text-base font-semibold text-brand-base">Create Workspace</h3>
-                  <p className="text-sm text-brand-secondary">
+                  <h3 className="text-base font-semibold text-custom-text-100">Create Workspace</h3>
+                  <p className="text-sm text-custom-text-200">
                     Create or join the workspace to get started with Plane.
                   </p>
                 </div>
@@ -53,8 +53,8 @@ const CreateWorkspace: NextPage = () => {
           </div>
 
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       </DefaultLayout>
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index abe317415..b6b8aad59 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -133,16 +133,16 @@ const HomePage: NextPage = () => {
             <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
               <div className="flex flex-col items-center justify-center gap-10">
                 <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-                <div className="text-center text-xl font-medium text-brand-base">
+                <div className="text-center text-xl font-medium text-custom-text-100">
                   Sign In to your Plane Account
                 </div>
               </div>
 
-              <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+              <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
                 {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                   <>
                     <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                    <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5">
+                    <div className="flex flex-col items-center justify-center gap-3 border-t border-custom-border-100 py-5 px-5">
                       <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                       <GithubLoginButton handleSignIn={handleGithubSignIn} />
                     </div>
diff --git a/apps/app/pages/installations/[provider]/index.tsx b/apps/app/pages/installations/[provider]/index.tsx
index 70b1a02c2..2becb1f88 100644
--- a/apps/app/pages/installations/[provider]/index.tsx
+++ b/apps/app/pages/installations/[provider]/index.tsx
@@ -26,7 +26,6 @@ const AppPostInstallation = ({
   provider,
   code,
 }: IGithuPostInstallationProps) => {
-
   const { setToastAlert } = useToast();
 
   useEffect(() => {
@@ -42,59 +41,59 @@ const AppPostInstallation = ({
           console.log(err);
         });
     } else if (provider === "slack" && state && code) {
-        appinstallationsService
-          .getSlackAuthDetails(code)
-          .then((res) => {
-            const [workspaceSlug, projectId, integrationId] = state.split(",");
+      appinstallationsService
+        .getSlackAuthDetails(code)
+        .then((res) => {
+          const [workspaceSlug, projectId, integrationId] = state.split(",");
 
-            if(!projectId) {
-              const payload = {
-                metadata: {
-                  ...res,
-                },
-              };
+          if (!projectId) {
+            const payload = {
+              metadata: {
+                ...res,
+              },
+            };
 
-              appinstallationsService
-                .addInstallationApp(state, provider, payload)
-                .then((r) => {
-                  window.opener = null;
-                  window.open("", "_self");
-                  window.close();
-                })
-                .catch((err) => {
-                  throw err?.response;
-                });
-            } else {
-              const payload = {
-                access_token: res.access_token,
-                bot_user_id: res.bot_user_id,
-                webhook_url: res.incoming_webhook.url,
-                data: res,
-                team_id: res.team.id,
-                team_name: res.team.name,
-                scopes: res.scope,
-              };
-              appinstallationsService
-                .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-                .then((r) => {
-                  window.opener = null;
-                  window.open("", "_self");
-                  window.close();
-                })
-                .catch((err) => {
-                  throw err.response
-                })
-            }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+            appinstallationsService
+              .addInstallationApp(state, provider, payload)
+              .then((r) => {
+                window.opener = null;
+                window.open("", "_self");
+                window.close();
+              })
+              .catch((err) => {
+                throw err?.response;
+              });
+          } else {
+            const payload = {
+              access_token: res.access_token,
+              bot_user_id: res.bot_user_id,
+              webhook_url: res.incoming_webhook.url,
+              data: res,
+              team_id: res.team.id,
+              team_name: res.team.name,
+              scopes: res.scope,
+            };
+            appinstallationsService
+              .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
+              .then((r) => {
+                window.opener = null;
+                window.open("", "_self");
+                window.close();
+              })
+              .catch((err) => {
+                throw err.response;
+              });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     }
   }, [state, installation_id, provider, code]);
 
   return (
-    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">
-      <h2 className="text-2xl text-brand-base">Installing. Please wait...</h2>
+    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
+      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
       <Spinner />
     </div>
   );
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index ed5545557..6a44bcc8d 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -85,18 +85,18 @@ const OnBoard: NextPage = () => {
         <div className="relative grid h-full place-items-center p-5">
           <div className="h-full flex flex-col items-center justify-center w-full py-4">
             <div className="mb-7 flex items-center justify-center text-center">
-              <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+              <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
             </div>
 
-            <div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-brand-base shadow-md">
+            <div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-custom-background-100 shadow-md">
               {invitations && workspaces ? (
                 invitations.length > 0 ? (
                   <div className="flex w-full flex-col gap-3 justify-between">
                     <div className="flex flex-col gap-2 justify-center ">
-                      <h3 className="text-base font-semibold text-brand-base">
+                      <h3 className="text-base font-semibold text-custom-text-100">
                         Workspace Invitations
                       </h3>
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         Create or join the workspace to get started with Plane.
                       </p>
                     </div>
@@ -129,12 +129,12 @@ const OnBoard: NextPage = () => {
                     {workspaces.map((workspace) => (
                       <Link key={workspace.id} href={workspace.slug}>
                         <a>
-                          <div className="mb-2 flex items-center justify-between rounded border border-brand-base px-4 py-2">
+                          <div className="mb-2 flex items-center justify-between rounded border border-custom-border-100 px-4 py-2">
                             <div className="flex items-center gap-x-2 text-sm">
-                              <CubeIcon className="h-5 w-5 text-brand-secondary" />
+                              <CubeIcon className="h-5 w-5 text-custom-text-200" />
                               {workspace.name}
                             </div>
-                            <div className="flex items-center gap-x-2 text-xs text-brand-secondary">
+                            <div className="flex items-center gap-x-2 text-xs text-custom-text-200">
                               {workspace.owner.first_name}
                             </div>
                           </div>
@@ -167,8 +167,8 @@ const OnBoard: NextPage = () => {
             </div>
           </div>
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       </DefaultLayout>
diff --git a/apps/app/pages/magic-sign-in.tsx b/apps/app/pages/magic-sign-in.tsx
index 81ebf0267..c959764a2 100644
--- a/apps/app/pages/magic-sign-in.tsx
+++ b/apps/app/pages/magic-sign-in.tsx
@@ -45,18 +45,18 @@ const MagicSignIn: NextPage = () => {
 
   return (
     <DefaultLayout>
-      <div className="h-screen w-full overflow-auto bg-brand-surface-1">
+      <div className="h-screen w-full overflow-auto bg-custom-background-90">
         {isSigningIn ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3">
             <h2 className="text-4xl font-medium">Signing you in...</h2>
-            <p className="text-sm font-medium text-brand-secondary">
+            <p className="text-sm font-medium text-custom-text-200">
               Please wait while we are preparing your take off.
             </p>
           </div>
         ) : errorSigningIn ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3">
             <h2 className="text-4xl font-medium">Error</h2>
-            <div className="text-sm font-medium text-brand-secondary flex gap-2">
+            <div className="text-sm font-medium text-custom-text-200 flex gap-2">
               <div>{errorSigningIn}.</div>
               <span
                 className="cursor-pointer underline"
@@ -86,7 +86,7 @@ const MagicSignIn: NextPage = () => {
         ) : (
           <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
             <h2 className="text-4xl font-medium">Success</h2>
-            <p className="text-sm font-medium text-brand-secondary">
+            <p className="text-sm font-medium text-custom-text-200">
               Redirecting you to the app...
             </p>
           </div>
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index cc6b742df..2fd3c4575 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -52,7 +52,7 @@ const Onboarding: NextPage = () => {
           {step <= 3 ? (
             <div className="h-full flex flex-col justify-center w-full py-4">
               <div className="mb-7 flex items-center justify-center text-center">
-                <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+                <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
               </div>
               {step === 1 ? (
                 <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
@@ -64,7 +64,7 @@ const Onboarding: NextPage = () => {
             </div>
           ) : (
             <div className="flex w-full max-w-2xl flex-col gap-12">
-              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
+              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-custom-background-100 pb-7 text-center shadow-md">
                 {step === 4 ? (
                   <OnboardingCard data={ONBOARDING_CARDS.welcome} />
                 ) : step === 5 ? (
@@ -124,8 +124,8 @@ const Onboarding: NextPage = () => {
             </div>
           )}
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       )}
diff --git a/apps/app/pages/reset-password.tsx b/apps/app/pages/reset-password.tsx
index 82ee32114..748050021 100644
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@@ -81,11 +81,11 @@ const ResetPasswordPage: NextPage = () => {
           <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
             <div className="flex flex-col items-center justify-center gap-10">
               <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-              <h2 className="text-center text-xl font-medium text-brand-base">
+              <h2 className="text-center text-xl font-medium text-custom-text-100">
                 Reset your password
               </h2>
             </div>
-            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
               <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
                 <div>
                   <Input
diff --git a/apps/app/pages/sign-up.tsx b/apps/app/pages/sign-up.tsx
index 2c86d96ff..edd17b5b3 100644
--- a/apps/app/pages/sign-up.tsx
+++ b/apps/app/pages/sign-up.tsx
@@ -65,12 +65,12 @@ const SignUp: NextPage = () => {
           <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
             <div className="flex flex-col items-center justify-center gap-10">
               <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-              <div className="text-center text-xl font-medium text-brand-base">
+              <div className="text-center text-xl font-medium text-custom-text-100">
                 Create a new Plane Account
               </div>
             </div>
 
-            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
               <EmailPasswordForm onSubmit={handleSignUp} />
             </div>
           </div>
diff --git a/apps/app/pages/workspace-member-invitation.tsx b/apps/app/pages/workspace-member-invitation.tsx
index b895aa90a..9af057f94 100644
--- a/apps/app/pages/workspace-member-invitation.tsx
+++ b/apps/app/pages/workspace-member-invitation.tsx
@@ -66,7 +66,7 @@ const WorkspaceInvitation: NextPage = () => {
         {invitationDetail ? (
           <>
             {error ? (
-              <div className="flex w-full flex-col space-y-4 rounded border border-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-100 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
                 <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
               </div>
             ) : (
diff --git a/apps/app/public/empty-state/analytics.svg b/apps/app/public/empty-state/analytics.svg
new file mode 100644
index 000000000..4f7cd4b7d
--- /dev/null
+++ b/apps/app/public/empty-state/analytics.svg
@@ -0,0 +1,21 @@
+<svg width="126" height="136" viewBox="0 0 126 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M113.955 135.906C113.919 135.906 113.883 135.906 113.848 135.906L19.4 134.786C14.0318 134.715 9.70802 130.233 9.74578 124.787C3.07794 102.326 0.140014 84.6385 0.220352 67.4423C0.304227 49.494 3.79635 31.2365 11.2096 9.98858C11.2958 4.57842 15.6643 0.222153 20.9864 0.222153C21.0208 0.222153 21.0552 0.222371 21.0897 0.222697L115.538 1.34477C120.918 1.41524 125.248 5.91626 125.189 11.3783L124.998 28.0142L124.856 28.0159L123.728 126.104C123.659 131.532 119.285 135.906 113.955 135.906ZM20.9863 0.668279C15.8915 0.668279 11.7123 4.84756 11.6484 10.0314L11.648 10.0683L11.6358 10.1031C-2.52107 50.6621 -2.90313 80.6475 10.1761 124.69L10.1858 124.723L10.1854 124.757C10.1319 129.973 14.2679 134.272 19.4054 134.34L113.853 135.459C113.887 135.46 113.921 135.46 113.955 135.46C119.046 135.46 123.223 131.282 123.289 126.099L124.33 35.5712L124.335 35.1254L124.456 24.7741L124.596 24.773L124.75 11.3732C124.806 6.15696 120.671 1.8582 115.532 1.79089L21.0848 0.668824C21.0522 0.668498 21.0188 0.668279 20.9863 0.668279Z" fill="#F5F5F5"/>
+<path d="M105.57 95.7116L105.563 96.1577H51.6133V95.7116H105.57Z" fill="#F5F5F5"/>
+<path d="M105.677 86.2315L105.673 86.6777H51.6133V86.2315H105.677Z" fill="#F5F5F5"/>
+<path d="M105.787 76.7513L105.783 77.1975H51.6133V76.7513H105.787Z" fill="#F5F5F5"/>
+<path d="M105.442 106.062L105.437 106.508H50.4023V59.6869L50.8417 59.6914V87.7104C50.8417 90.579 51.4897 93.2937 52.6451 95.7117C52.7176 95.8611 52.7901 96.0106 52.867 96.1578C55.8764 102.042 61.9348 106.062 68.9158 106.062H105.442Z" fill="#F5F5F5"/>
+<path d="M29.1238 129.338C23.8536 129.27 19.6326 124.882 19.6882 119.53C7.13649 77.2648 6.35043 47.2084 21.1499 4.80458C21.1795 3.11704 21.6476 1.46746 22.5066 0.0226944L20.6481 0.000550955C15.3778 -0.0558841 11.0569 4.23032 10.9891 9.582C-3.81039 51.9859 -3.0243 82.0422 9.52746 124.308C9.47176 129.659 13.6928 134.047 18.963 134.116L113.411 135.237C116.826 135.266 119.994 133.434 121.713 130.437L29.1238 129.338Z" fill="#F5F5F5"/>
+<path d="M17.1014 125.311C17.0716 124.32 17.9447 123.617 18.8372 123.436C19.9713 123.205 21.1291 123.799 22.09 124.338C23.8072 125.303 22.5893 124.924 24.6061 125.743C27.4295 126.563 29.8496 124.515 30.7316 121.601C31.2526 119.19 31.1434 117.133 31.2579 114.916C31.3681 112.78 31.9407 110.611 33.7234 109.285C34.4718 108.728 35.404 108.398 36.3333 108.594C37.3258 108.802 38.1186 109.527 39.075 109.842C40.8547 110.429 42.7264 109.637 44.061 108.429C45.6134 107.025 46.3714 105.05 46.9048 103.058C47.4579 100.992 47.7957 98.8294 48.8098 96.9266C49.6752 95.3029 51.0345 93.8043 52.908 93.4946C54.7436 93.1912 56.5024 94.105 58.0867 94.9234C59.7173 95.7656 61.4029 96.6782 63.2711 96.7567C67.2745 96.925 70.3669 93.4662 72.1019 90.1776C74.0822 86.424 75.2304 81.8692 78.7486 79.2155C80.2608 78.0749 82.1795 77.2786 84.09 77.5982C86.0209 77.9212 87.4315 79.3434 88.7138 80.7334C90.0273 82.1572 91.3314 83.5599 93.111 84.3799C94.8575 85.1846 96.8087 85.486 98.7111 85.2311C99.6298 85.108 100.509 84.8524 101.359 84.4796C101.747 84.3092 101.412 83.7326 101.026 83.9017C99.1621 84.7195 97.04 84.8612 95.0732 84.3691C93.0971 83.8747 91.5224 82.7522 90.127 81.2828C88.8495 79.9375 87.6484 78.4058 85.9773 77.5413C84.2868 76.6668 82.3485 76.6891 80.6038 77.3946C78.8348 78.1101 77.3023 79.3755 76.1402 80.8969C74.7902 82.6643 73.8925 84.7357 72.9901 86.7604C71.359 90.4199 69.2681 94.7415 65.0953 95.8789C61.1443 96.9559 58.221 93.4057 54.5355 92.8421C52.7237 92.5651 51.009 93.2021 49.726 94.5162C48.3977 95.8768 47.6298 97.6761 47.1226 99.4939C46.501 101.721 46.181 104.107 45.0397 106.146C44.1375 107.758 42.4664 109.253 40.5676 109.365C39.4798 109.429 38.6469 108.919 37.7171 108.427C36.879 107.983 36.0038 107.754 35.0617 107.941C33.2973 108.291 31.9264 109.874 31.2526 111.488C29.5906 115.47 31.8793 120.586 28.6257 123.99C28.0311 124.612 27.2683 125.08 26.4071 125.175C25.2534 125.303 24.1746 124.757 23.1966 124.204C21.5072 123.249 19.3683 121.971 17.5167 123.297C16.8596 123.768 16.4174 124.478 16.4424 125.311C16.4554 125.74 17.1144 125.742 17.1014 125.311Z" fill="#3A3A3A"/>
+<path d="M82.8793 78.9819C83.9712 78.9819 84.8563 78.0831 84.8563 76.9743C84.8563 75.8656 83.9712 74.9667 82.8793 74.9667C81.7875 74.9667 80.9023 75.8656 80.9023 76.9743C80.9023 78.0831 81.7875 78.9819 82.8793 78.9819Z" fill="#3F76FF"/>
+<path d="M64.4223 97.9423C65.5142 97.9423 66.3993 97.0435 66.3993 95.9347C66.3993 94.826 65.5142 93.9272 64.4223 93.9272C63.3304 93.9272 62.4453 94.826 62.4453 95.9347C62.4453 97.0435 63.3304 97.9423 64.4223 97.9423Z" fill="#3F76FF"/>
+<path d="M53.1523 35.2409C54.3647 32.6859 57.5101 31.2629 60.1915 32.0564C61.702 32.5034 62.969 33.5304 64.3579 34.281C65.7468 35.0315 67.4699 35.4976 68.867 34.763C71.2685 33.5002 71.122 29.7301 73.2108 27.9858C74.6011 26.8248 76.6411 26.8791 78.3595 27.4234C80.0778 27.9677 81.6492 28.9286 83.3787 29.4352C86.5972 30.3778 90.2569 29.5851 92.8165 27.3909C92.8421 27.369 92.8673 27.3469 92.8922 27.3246C94.1594 26.191 96.1451 27.1252 96.0986 28.8395L95.7746 40.7943H53.3791L53.1523 35.2409Z" fill="#F5F5F5"/>
+<path d="M90.36 33.0866C90.4996 33.029 90.4996 32.8303 90.3599 32.7727C89.3853 32.3712 88.2938 31.7997 87.4596 31.178C87.3261 31.0784 87.1476 31.2157 87.204 31.3738L87.6788 32.7065H79.5547V33.1527H87.6788L87.2039 34.4858C87.1476 34.644 87.326 34.7812 87.4596 34.6817C88.2937 34.0599 89.3853 33.4883 90.36 33.0866Z" fill="#3A3A3A"/>
+<path d="M72.0801 30.9379C72.157 30.8062 72.0385 30.648 71.893 30.6881C70.8779 30.9678 69.6684 31.184 68.6339 31.2021C68.4682 31.205 68.408 31.4239 68.5472 31.5152L69.7197 32.2839L63.2539 37.2788L63.5199 37.6339L69.9857 32.6389L70.4026 33.9919C70.4521 34.1525 70.6759 34.1519 70.7229 33.9906C71.0161 32.9829 71.544 31.8569 72.0801 30.9379Z" fill="#3A3A3A"/>
+<path d="M94.3087 30.3053C96.3884 30.3053 98.0744 28.5933 98.0744 26.4814C98.0744 24.3694 96.3884 22.6574 94.3087 22.6574C92.2289 22.6574 90.543 24.3694 90.543 26.4814C90.543 28.5933 92.2289 30.3053 94.3087 30.3053Z" fill="#3F76FF"/>
+<path opacity="0.7" d="M75.8673 30.3053C77.947 30.3053 79.633 28.5933 79.633 26.4814C79.633 24.3694 77.947 22.6574 75.8673 22.6574C73.7875 22.6574 72.1016 24.3694 72.1016 26.4814C72.1016 28.5933 73.7875 30.3053 75.8673 30.3053Z" fill="#3F76FF"/>
+<path opacity="0.25" d="M59.168 33.8743C61.2478 33.8743 62.9337 32.1623 62.9337 30.0504C62.9337 27.9384 61.2478 26.2264 59.168 26.2264C57.0883 26.2264 55.4023 27.9384 55.4023 30.0504C55.4023 32.1623 57.0883 33.8743 59.168 33.8743Z" fill="#3F76FF"/>
+<path d="M104.847 48.4215L46.4175 47.9963C44.5394 47.9826 43.0018 49.5218 42.9884 51.4289C42.9749 53.336 44.4906 54.8974 46.3687 54.9111L104.798 55.3363C106.676 55.35 108.214 53.8109 108.227 51.9037C108.241 49.9966 106.725 48.4352 104.847 48.4215Z" fill="#F5F5F5"/>
+<path d="M37.69 52.2934C38.5392 52.2934 39.2277 51.5943 39.2277 50.7319C39.2277 49.8695 38.5392 49.1705 37.69 49.1705C36.8408 49.1705 36.1523 49.8695 36.1523 50.7319C36.1523 51.5943 36.8408 52.2934 37.69 52.2934Z" fill="#F5F5F5"/>
+<path d="M104.847 10.0546L46.4175 9.62939C44.5394 9.61572 43.0018 11.1549 42.9884 13.062C42.9749 14.9692 44.4906 16.5305 46.3687 16.5442L104.798 16.9694C106.676 16.9831 108.214 15.444 108.227 13.5368C108.241 11.6297 106.725 10.0683 104.847 10.0546Z" fill="#F5F5F5"/>
+<path d="M37.69 13.9265C38.5392 13.9265 39.2277 13.2274 39.2277 12.365C39.2277 11.5027 38.5392 10.8036 37.69 10.8036C36.8408 10.8036 36.1523 11.5027 36.1523 12.365C36.1523 13.2274 36.8408 13.9265 37.69 13.9265Z" fill="#F5F5F5"/>
+</svg>
diff --git a/apps/app/public/empty-state/cycle.svg b/apps/app/public/empty-state/cycle.svg
new file mode 100644
index 000000000..fe1dba3f8
--- /dev/null
+++ b/apps/app/public/empty-state/cycle.svg
@@ -0,0 +1,21 @@
+<svg width="182" height="160" viewBox="0 0 182 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M77.5271 158.363C34.7784 158.363 0 123.584 0 80.8354C0 38.0867 34.7784 3.30835 77.5271 3.30835C89.9482 3.32111 102.185 6.31164 113.212 12.0292C124.239 17.7468 133.735 26.0247 140.902 36.169L140.169 36.6873C133.084 26.6602 123.699 18.4779 112.799 12.8264C101.9 7.17492 89.8045 4.21891 77.5271 4.20626C35.2738 4.20626 0.897914 38.5822 0.897914 80.8354C0.897914 123.089 35.2738 157.465 77.5271 157.465C89.2975 157.503 100.917 154.812 111.472 149.603C122.026 144.393 131.23 136.808 138.359 127.442L139.071 127.988C131.859 137.464 122.547 145.138 111.869 150.409C101.19 155.679 89.4353 158.401 77.5271 158.363Z" fill="#E5E5E5"/>
+<path d="M109.579 67.8527C108.729 67.8527 107.898 67.6006 107.191 67.1284C106.484 66.6562 105.934 65.985 105.608 65.1998C105.283 64.4145 105.198 63.5505 105.364 62.7168C105.53 61.8832 105.939 61.1175 106.54 60.5165C107.141 59.9155 107.907 59.5062 108.74 59.3404C109.574 59.1746 110.438 59.2597 111.223 59.5849C112.008 59.9102 112.68 60.461 113.152 61.1677C113.624 61.8744 113.876 62.7053 113.876 63.5552C113.876 64.695 113.423 65.788 112.617 66.594C111.811 67.3999 110.718 67.8527 109.579 67.8527Z" fill="#E5E5E5"/>
+<path d="M88.2044 17.1041C92.9276 17.1041 96.7565 13.2753 96.7565 8.55207C96.7565 3.82889 92.9276 0 88.2044 0C83.4812 0 79.6523 3.82889 79.6523 8.55207C79.6523 13.2753 83.4812 17.1041 88.2044 17.1041Z" fill="#E5E5E5"/>
+<path d="M87.0383 13.003C86.8906 13.003 86.7449 12.9687 86.6128 12.9026C86.4808 12.8365 86.3659 12.7406 86.2773 12.6224L83.9441 9.51154C83.8692 9.4116 83.8147 9.29788 83.7837 9.17686C83.7527 9.05585 83.7458 8.92991 83.7635 8.80624C83.7811 8.68257 83.823 8.5636 83.8867 8.45611C83.9503 8.34862 84.0345 8.25471 84.1344 8.17976C84.2344 8.10481 84.3481 8.05028 84.4691 8.01928C84.5901 7.98828 84.7161 7.98142 84.8397 7.99909C84.9634 8.01676 85.0824 8.05862 85.1899 8.12227C85.2974 8.18592 85.3913 8.27012 85.4662 8.37006L86.9927 10.4051L90.9131 4.5246C91.0538 4.3165 91.2711 4.17252 91.5176 4.12407C91.7641 4.07562 92.0198 4.12663 92.2288 4.26598C92.4378 4.40533 92.5832 4.6217 92.6333 4.86788C92.6834 5.11405 92.6341 5.37005 92.4961 5.57999L87.8299 12.5794C87.7455 12.706 87.6319 12.8105 87.4988 12.8841C87.3657 12.9578 87.2168 12.9985 87.0647 13.0027L87.0383 13.003Z" fill="white"/>
+<path d="M98.6775 23.9807H78.1119C76.8549 23.9807 75.8359 24.9997 75.8359 26.2567V27.0758C75.8359 28.3328 76.8549 29.3518 78.1119 29.3518H98.6775C99.9345 29.3518 100.953 28.3328 100.953 27.0758V26.2567C100.953 24.9997 99.9345 23.9807 98.6775 23.9807Z" fill="#E5E5E5"/>
+<path d="M111.436 34.7229H65.358C64.101 34.7229 63.082 35.7419 63.082 36.9989V37.818C63.082 39.075 64.101 40.094 65.358 40.094H111.436C112.693 40.094 113.712 39.075 113.712 37.818V36.9989C113.712 35.7419 112.693 34.7229 111.436 34.7229Z" fill="#E5E5E5"/>
+<path d="M111.436 45.4651H65.358C64.101 45.4651 63.082 46.4841 63.082 47.7411V48.5602C63.082 49.8172 64.101 50.8362 65.358 50.8362H111.436C112.693 50.8362 113.712 49.8172 113.712 48.5602V47.7411C113.712 46.4841 112.693 45.4651 111.436 45.4651Z" fill="#E5E5E5"/>
+<path d="M83.4068 160C82.5568 160 81.726 159.748 81.0193 159.276C80.3126 158.804 79.7618 158.133 79.4365 157.347C79.1112 156.562 79.0261 155.698 79.1919 154.864C79.3578 154.031 79.7671 153.265 80.3681 152.664C80.9691 152.063 81.7348 151.654 82.5684 151.488C83.402 151.322 84.2661 151.407 85.0513 151.732C85.8366 152.058 86.5078 152.608 86.98 153.315C87.4522 154.022 87.7042 154.853 87.7042 155.703C87.7042 156.842 87.2514 157.935 86.4455 158.741C85.6396 159.547 84.5465 160 83.4068 160Z" fill="#E5E5E5"/>
+<path d="M62.0325 109.251C66.7557 109.251 70.5846 105.422 70.5846 100.699C70.5846 95.9761 66.7557 92.1472 62.0325 92.1472C57.3094 92.1472 53.4805 95.9761 53.4805 100.699C53.4805 105.422 57.3094 109.251 62.0325 109.251Z" fill="#E5E5E5"/>
+<path d="M60.8703 105.15C60.7226 105.15 60.5769 105.116 60.4449 105.05C60.3128 104.984 60.1979 104.888 60.1093 104.77L57.7762 101.659C57.7012 101.559 57.6467 101.445 57.6157 101.324C57.5847 101.203 57.5778 101.077 57.5955 100.953C57.6132 100.83 57.655 100.711 57.7187 100.603C57.7823 100.496 57.8665 100.402 57.9665 100.327C58.0664 100.252 58.1801 100.197 58.3012 100.166C58.4222 100.135 58.5481 100.129 58.6718 100.146C58.7954 100.164 58.9144 100.206 59.0219 100.269C59.1294 100.333 59.2233 100.417 59.2983 100.517L60.8247 102.552L64.7451 96.6718C64.814 96.567 64.9029 96.4768 65.0068 96.4064C65.1107 96.3361 65.2275 96.287 65.3505 96.262C65.4734 96.237 65.6001 96.2366 65.7232 96.2607C65.8463 96.2848 65.9634 96.3331 66.0678 96.4027C66.1722 96.4723 66.2618 96.5619 66.3315 96.6662C66.4011 96.7706 66.4494 96.8877 66.4736 97.0108C66.4978 97.1339 66.4974 97.2606 66.4725 97.3835C66.4475 97.5065 66.3985 97.6233 66.3282 97.7272L61.6619 104.727C61.5775 104.853 61.4639 104.958 61.3308 105.031C61.1977 105.105 61.0488 105.146 60.8968 105.15L60.8703 105.15Z" fill="white"/>
+<path d="M72.5056 116.128H51.9401C50.6831 116.128 49.6641 117.147 49.6641 118.404V119.223C49.6641 120.48 50.6831 121.499 51.9401 121.499H72.5056C73.7626 121.499 74.7816 120.48 74.7816 119.223V118.404C74.7816 117.147 73.7626 116.128 72.5056 116.128Z" fill="#E5E5E5"/>
+<path d="M85.2605 126.87H39.1822C37.9252 126.87 36.9062 127.889 36.9062 129.146V129.965C36.9062 131.222 37.9252 132.241 39.1822 132.241H85.2605C86.5175 132.241 87.5365 131.222 87.5365 129.965V129.146C87.5365 127.889 86.5175 126.87 85.2605 126.87Z" fill="#E5E5E5"/>
+<path d="M85.2605 137.613H39.1822C37.9252 137.613 36.9062 138.632 36.9062 139.889V140.708C36.9062 141.965 37.9252 142.984 39.1822 142.984H85.2605C86.5175 142.984 87.5365 141.965 87.5365 140.708V139.889C87.5365 138.632 86.5175 137.613 85.2605 137.613Z" fill="#E5E5E5"/>
+<path d="M172.305 141.665C171.132 141.665 169.984 141.317 169.009 140.664C168.033 140.012 167.272 139.086 166.823 138.001C166.374 136.917 166.256 135.724 166.485 134.573C166.714 133.421 167.279 132.364 168.109 131.534C168.939 130.704 169.997 130.139 171.148 129.91C172.299 129.681 173.492 129.798 174.576 130.248C175.661 130.697 176.588 131.457 177.24 132.433C177.892 133.409 178.24 134.557 178.24 135.73C178.24 137.304 177.615 138.814 176.502 139.926C175.389 141.039 173.879 141.665 172.305 141.665Z" fill="#E5E5E5"/>
+<path d="M146.45 71.5857C152.972 71.5857 158.26 66.2984 158.26 59.7761C158.26 53.2539 152.972 47.9666 146.45 47.9666C139.928 47.9666 134.641 53.2539 134.641 59.7761C134.641 66.2984 139.928 71.5857 146.45 71.5857Z" fill="#3F76FF"/>
+<path d="M144.836 65.9224C144.632 65.9224 144.431 65.8749 144.249 65.7837C144.066 65.6924 143.908 65.56 143.785 65.3968L140.563 61.1009C140.46 60.9629 140.385 60.8059 140.342 60.6388C140.299 60.4717 140.29 60.2978 140.314 60.127C140.338 59.9562 140.396 59.7919 140.484 59.6435C140.572 59.4951 140.688 59.3654 140.826 59.2619C140.964 59.1584 141.121 59.0831 141.288 59.0403C141.456 58.9975 141.629 58.988 141.8 59.0124C141.971 59.0368 142.135 59.0946 142.284 59.1825C142.432 59.2704 142.562 59.3867 142.665 59.5247L144.773 62.3349L150.187 54.2144C150.283 54.0708 150.406 53.9475 150.549 53.8515C150.692 53.7554 150.853 53.6886 151.022 53.6547C151.192 53.6208 151.366 53.6206 151.535 53.6541C151.704 53.6876 151.865 53.7541 152.009 53.8498C152.152 53.9455 152.276 54.0686 152.372 54.2119C152.468 54.3553 152.535 54.5162 152.568 54.6854C152.602 54.8546 152.602 55.0288 152.569 55.198C152.535 55.3673 152.469 55.5283 152.373 55.6718L145.929 65.3374C145.813 65.5122 145.656 65.6565 145.472 65.7582C145.288 65.8599 145.083 65.916 144.873 65.9219C144.861 65.9222 144.848 65.9224 144.836 65.9224Z" fill="white"/>
+<path d="M161.776 81.0818H131.643C130.386 81.0818 129.367 82.1008 129.367 83.3578V86.2228C129.367 87.4798 130.386 88.4988 131.643 88.4988H161.776C163.033 88.4988 164.052 87.4798 164.052 86.2228V83.3578C164.052 82.1008 163.033 81.0818 161.776 81.0818Z" fill="#686868"/>
+<path d="M179.39 95.9158H114.026C112.769 95.9158 111.75 96.9348 111.75 98.1918V101.057C111.75 102.314 112.769 103.333 114.026 103.333H179.39C180.647 103.333 181.666 102.314 181.666 101.057V98.1918C181.666 96.9348 180.647 95.9158 179.39 95.9158Z" fill="#686868"/>
+<path d="M179.39 110.75H114.026C112.769 110.75 111.75 111.769 111.75 113.026V115.89C111.75 117.147 112.769 118.166 114.026 118.166H179.39C180.647 118.166 181.666 117.147 181.666 115.89V113.026C181.666 111.769 180.647 110.75 179.39 110.75Z" fill="#686868"/>
+</svg>
diff --git a/apps/app/public/empty-state/dashboard.svg b/apps/app/public/empty-state/dashboard.svg
new file mode 100644
index 000000000..1e45c69ee
--- /dev/null
+++ b/apps/app/public/empty-state/dashboard.svg
@@ -0,0 +1,23 @@
+<svg width="277" height="167" viewBox="0 0 277 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.1378 23.975H33.4777C31.3953 23.9769 29.3987 24.805 27.9262 26.2775C26.4538 27.75 25.6257 29.7465 25.6238 31.8289V55.3121C25.3469 55.2955 25.07 55.2708 24.7971 55.2377C19.6656 54.6978 14.787 52.7351 10.7113 49.5709C6.63556 46.4067 3.52485 42.1669 1.72986 37.3293C-0.0651362 32.4918 -0.473025 27.2491 0.552182 22.1921C1.57739 17.1352 3.99491 12.4652 7.5322 8.70874C11.0695 4.95225 15.5858 2.25865 20.5721 0.931613C25.5583 -0.395423 30.8161 -0.303114 35.7527 1.19814C40.6893 2.69939 45.1083 5.54988 48.5115 9.42823C51.9147 13.3066 54.1669 18.0585 55.0139 23.1483C55.0593 23.4211 55.1007 23.6981 55.1378 23.975Z" fill="#B2C8FF"/>
+<path d="M310.84 23.1483H33.4736C31.1721 23.1508 28.9656 24.0662 27.3382 25.6936C25.7109 27.321 24.7955 29.5275 24.793 31.8289V178.159C24.7955 180.461 25.7109 182.667 27.3382 184.295C28.9656 185.922 31.1721 186.837 33.4736 186.84H310.84C313.141 186.837 315.348 185.922 316.975 184.295C318.603 182.667 319.518 180.461 319.521 178.159V31.8289C319.518 29.5275 318.603 27.321 316.975 25.6936C315.348 24.0662 313.141 23.1508 310.84 23.1483ZM318.694 178.159C318.692 180.242 317.864 182.238 316.391 183.711C314.919 185.183 312.922 186.011 310.84 186.013H33.4736C31.3912 186.011 29.3946 185.183 27.9221 183.711C26.4496 182.238 25.6216 180.242 25.6197 178.159V31.8289C25.6216 29.7465 26.4496 27.75 27.9221 26.2775C29.3946 24.805 31.3912 23.9769 33.4736 23.975H310.84C312.922 23.9769 314.919 24.805 316.391 26.2775C317.864 27.75 318.692 29.7465 318.694 31.8289V178.159Z" fill="#E5E5E5"/>
+<path d="M297.201 46.8628H47.1165C47.0069 46.8628 46.9017 46.8192 46.8242 46.7417C46.7467 46.6642 46.7031 46.5591 46.7031 46.4494C46.7031 46.3398 46.7467 46.2347 46.8242 46.1571C46.9017 46.0796 47.0069 46.0361 47.1165 46.0361H297.201C297.31 46.0361 297.416 46.0796 297.493 46.1571C297.571 46.2347 297.614 46.3398 297.614 46.4494C297.614 46.5591 297.571 46.6642 297.493 46.7417C297.416 46.8192 297.31 46.8628 297.201 46.8628Z" fill="#E5E5E5"/>
+<path d="M117.812 169.065C117.702 169.065 117.597 169.022 117.52 168.944C117.442 168.867 117.398 168.762 117.398 168.652V32.6557C117.398 32.546 117.442 32.4409 117.52 32.3634C117.597 32.2858 117.702 32.2423 117.812 32.2423C117.921 32.2423 118.027 32.2858 118.104 32.3634C118.182 32.4409 118.225 32.546 118.225 32.6557V168.652C118.225 168.762 118.182 168.867 118.104 168.944C118.027 169.022 117.921 169.065 117.812 169.065Z" fill="#E5E5E5"/>
+<path d="M180.214 169.065C180.105 169.065 179.999 169.022 179.922 168.944C179.844 168.867 179.801 168.762 179.801 168.652V32.6557C179.801 32.546 179.844 32.4409 179.922 32.3634C179.999 32.2858 180.105 32.2423 180.214 32.2423C180.324 32.2423 180.429 32.2858 180.506 32.3634C180.584 32.4409 180.628 32.546 180.628 32.6557V168.652C180.628 168.762 180.584 168.867 180.506 168.944C180.429 169.022 180.324 169.065 180.214 169.065Z" fill="#E5E5E5"/>
+<path d="M242.636 169.065C242.526 169.065 242.421 169.022 242.344 168.944C242.266 168.867 242.223 168.762 242.223 168.652V32.6557C242.223 32.546 242.266 32.4409 242.344 32.3634C242.421 32.2858 242.526 32.2423 242.636 32.2423C242.746 32.2423 242.851 32.2858 242.928 32.3634C243.006 32.4409 243.049 32.546 243.049 32.6557V168.652C243.049 168.762 243.006 168.867 242.928 168.944C242.851 169.022 242.746 169.065 242.636 169.065Z" fill="#E5E5E5"/>
+<path d="M77.6675 89.5292H62.5633C62.0701 89.5286 61.5973 89.3325 61.2486 88.9838C60.8998 88.635 60.7037 88.1622 60.7031 87.6691V69.845C60.7037 69.3518 60.8998 68.879 61.2486 68.5303C61.5973 68.1816 62.0701 67.9854 62.5633 67.9849H77.6675C78.1607 67.9854 78.6335 68.1816 78.9822 68.5303C79.3309 68.879 79.5271 69.3518 79.5276 69.845V87.6691C79.5271 88.1622 79.3309 88.635 78.9822 88.9838C78.6335 89.3325 78.1607 89.5286 77.6675 89.5292Z" fill="#3F76FF"/>
+<path d="M99.1753 140.373H84.0711C83.5779 140.372 83.1051 140.176 82.7564 139.827C82.4076 139.479 82.2115 139.006 82.2109 138.513V120.689C82.2115 120.195 82.4076 119.723 82.7564 119.374C83.1051 119.025 83.5779 118.829 84.0711 118.829H99.1753C99.6685 118.829 100.141 119.025 100.49 119.374C100.839 119.723 101.035 120.195 101.035 120.689V138.513C101.035 139.006 100.839 139.479 100.49 139.827C100.141 140.176 99.6685 140.372 99.1753 140.373Z" fill="#3F76FF"/>
+<path d="M147.937 100.277H132.833C132.34 100.276 131.867 100.08 131.518 99.7311C131.169 99.3824 130.973 98.9096 130.973 98.4164V80.5924C130.973 80.0992 131.169 79.6264 131.518 79.2777C131.867 78.9289 132.34 78.7328 132.833 78.7322H147.937C148.43 78.7328 148.903 78.9289 149.252 79.2777C149.6 79.6264 149.797 80.0992 149.797 80.5924V98.4164C149.797 98.9096 149.6 99.3824 149.252 99.7311C148.903 100.08 148.43 100.276 147.937 100.277Z" fill="#3F76FF"/>
+<path d="M211.195 80.8485H196.091C195.597 80.848 195.125 80.6518 194.776 80.3031C194.427 79.9544 194.231 79.4816 194.23 78.9884V61.1644C194.231 60.6712 194.427 60.1984 194.776 59.8497C195.125 59.5009 195.597 59.3048 196.091 59.3042H211.195C211.688 59.3048 212.161 59.5009 212.51 59.8497C212.858 60.1984 213.054 60.6712 213.055 61.1644V78.9884C213.054 79.4816 212.858 79.9544 212.51 80.3031C212.161 80.6518 211.688 80.848 211.195 80.8485Z" fill="#3F76FF"/>
+<path d="M269.468 80.8485H254.364C253.871 80.848 253.398 80.6518 253.049 80.3031C252.701 79.9544 252.504 79.4816 252.504 78.9884V61.1644C252.504 60.6712 252.701 60.1984 253.049 59.8497C253.398 59.5009 253.871 59.3048 254.364 59.3042H269.468C269.961 59.3048 270.434 59.5009 270.783 59.8497C271.132 60.1984 271.328 60.6712 271.328 61.1644V78.9884C271.328 79.4816 271.132 79.9544 270.783 80.3031C270.434 80.6518 269.961 80.848 269.468 80.8485Z" fill="#3F76FF"/>
+<path d="M284.347 117.638H269.243C268.75 117.637 268.277 117.441 267.928 117.092C267.58 116.744 267.383 116.271 267.383 115.778V97.9536C267.383 97.4604 267.58 96.9876 267.928 96.6389C268.277 96.2902 268.75 96.094 269.243 96.0935H284.347C284.84 96.094 285.313 96.2902 285.662 96.6389C286.011 96.9876 286.207 97.4604 286.207 97.9536V115.778C286.207 116.271 286.011 116.744 285.662 117.092C285.313 117.441 284.84 117.637 284.347 117.638Z" fill="#E5E5E5"/>
+<path d="M233.105 111.024H218.001C217.508 111.023 217.035 110.827 216.686 110.479C216.337 110.13 216.141 109.657 216.141 109.164V91.3399C216.141 90.8467 216.337 90.3739 216.686 90.0252C217.035 89.6764 217.508 89.4803 218.001 89.4797H233.105C233.598 89.4803 234.071 89.6764 234.42 90.0252C234.768 90.3739 234.965 90.8467 234.965 91.3399V109.164C234.965 109.657 234.768 110.13 234.42 110.479C234.071 110.827 233.598 111.023 233.105 111.024Z" fill="#FF6584"/>
+<path d="M203.757 117.638H188.653C188.16 117.637 187.687 117.441 187.338 117.092C186.99 116.744 186.794 116.271 186.793 115.778V97.9536C186.794 97.4604 186.99 96.9876 187.338 96.6389C187.687 96.2902 188.16 96.094 188.653 96.0935H203.757C204.251 96.094 204.723 96.2902 205.072 96.6389C205.421 96.9876 205.617 97.4604 205.617 97.9536V115.778C205.617 116.271 205.421 116.744 205.072 117.092C204.723 117.441 204.251 117.637 203.757 117.638Z" fill="#E5E5E5"/>
+<path d="M140.496 145.746H125.391C124.898 145.746 124.425 145.55 124.077 145.201C123.728 144.852 123.532 144.379 123.531 143.886V126.062C123.532 125.569 123.728 125.096 124.077 124.748C124.425 124.399 124.898 124.203 125.391 124.202H140.496C140.989 124.203 141.462 124.399 141.81 124.748C142.159 125.096 142.355 125.569 142.356 126.062V143.886C142.355 144.38 142.159 144.852 141.81 145.201C141.462 145.55 140.989 145.746 140.496 145.746Z" fill="#E5E5E5"/>
+<path d="M64.0308 122.185H48.9265C48.4334 122.184 47.9606 121.988 47.6118 121.639C47.2631 121.291 47.067 120.818 47.0664 120.325V102.501C47.067 102.008 47.2631 101.535 47.6118 101.186C47.9606 100.837 48.4334 100.641 48.9265 100.641H64.0308C64.524 100.641 64.9968 100.837 65.3455 101.186C65.6942 101.535 65.8904 102.008 65.8909 102.501V120.325C65.8904 120.818 65.6942 121.291 65.3455 121.639C64.9968 121.988 64.524 122.184 64.0308 122.185Z" fill="#FF6584"/>
+<path d="M106.617 89.5292H91.5125C91.0193 89.5286 90.5465 89.3325 90.1978 88.9838C89.849 88.635 89.6529 88.1622 89.6523 87.6691V69.845C89.6529 69.3518 89.849 68.879 90.1978 68.5303C90.5465 68.1816 91.0193 67.9854 91.5125 67.9849H106.617C107.11 67.9854 107.583 68.1816 107.931 68.5303C108.28 68.879 108.476 69.3518 108.477 69.845V87.6691C108.476 88.1622 108.28 88.635 107.931 88.9838C107.583 89.3325 107.11 89.5286 106.617 89.5292Z" fill="#E5E5E5"/>
+<path d="M94.2386 40.0962H70.6769C70.2384 40.0962 69.8178 39.922 69.5077 39.6119C69.1976 39.3018 69.0234 38.8813 69.0234 38.4427C69.0234 38.0042 69.1976 37.5837 69.5077 37.2736C69.8178 36.9635 70.2384 36.7893 70.6769 36.7893H94.2386C94.6771 36.7893 95.0976 36.9635 95.4077 37.2736C95.7178 37.5837 95.892 38.0042 95.892 38.4427C95.892 38.8813 95.7178 39.3018 95.4077 39.6119C95.0976 39.922 94.6771 40.0962 94.2386 40.0962Z" fill="#D4D4D4"/>
+<path d="M160.782 40.0962H137.22C136.781 40.0962 136.361 39.922 136.051 39.6119C135.741 39.3018 135.566 38.8813 135.566 38.4427C135.566 38.0042 135.741 37.5837 136.051 37.2736C136.361 36.9635 136.781 36.7893 137.22 36.7893H160.782C161.22 36.7893 161.641 36.9635 161.951 37.2736C162.261 37.5837 162.435 38.0042 162.435 38.4427C162.435 38.8813 162.261 39.3018 161.951 39.6119C161.641 39.922 161.22 40.0962 160.782 40.0962Z" fill="#D4D4D4"/>
+<path d="M223.207 40.0962H199.646C199.207 40.0962 198.787 39.922 198.476 39.6119C198.166 39.3018 197.992 38.8813 197.992 38.4427C197.992 38.0042 198.166 37.5837 198.476 37.2736C198.787 36.9635 199.207 36.7893 199.646 36.7893H223.207C223.646 36.7893 224.066 36.9635 224.376 37.2736C224.687 37.5837 224.861 38.0042 224.861 38.4427C224.861 38.8813 224.687 39.3018 224.376 39.6119C224.066 39.922 223.646 40.0962 223.207 40.0962Z" fill="#D4D4D4"/>
+<path d="M281.496 40.0962H257.935C257.496 40.0962 257.076 39.922 256.766 39.6119C256.455 39.3018 256.281 38.8813 256.281 38.4427C256.281 38.0042 256.455 37.5837 256.766 37.2736C257.076 36.9635 257.496 36.7893 257.935 36.7893H281.496C281.935 36.7893 282.355 36.9635 282.666 37.2736C282.976 37.5837 283.15 38.0042 283.15 38.4427C283.15 38.8813 282.976 39.3018 282.666 39.6119C282.355 39.922 281.935 40.0962 281.496 40.0962Z" fill="#D4D4D4"/>
+</svg>
diff --git a/apps/app/public/empty-state/empty-cycle.svg b/apps/app/public/empty-state/empty-cycle.svg
deleted file mode 100644
index b82fbab84..000000000
--- a/apps/app/public/empty-state/empty-cycle.svg
+++ /dev/null
@@ -1,50 +0,0 @@
-<svg width="289" height="116" viewBox="0 0 289 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_2094_49731)">
-<rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
-</g>
-<path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
-<path d="M26 63H285.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
-<path d="M45.6429 21.334C45.5998 20.9308 45.4183 20.6169 45.0982 20.3922C44.7812 20.1676 44.3688 20.0552 43.861 20.0552C43.504 20.0552 43.1977 20.1091 42.9423 20.2168C42.6868 20.3245 42.4914 20.4707 42.356 20.6554C42.2206 20.84 42.1513 21.0508 42.1483 21.2878C42.1483 21.4848 42.1929 21.6556 42.2821 21.8002C42.3745 21.9449 42.4991 22.068 42.6561 22.1696C42.813 22.2681 42.9869 22.3511 43.1777 22.4189C43.3685 22.4866 43.5609 22.5435 43.7548 22.5897L44.6412 22.8113C44.9982 22.8944 45.3413 23.0067 45.6706 23.1483C46.003 23.2898 46.3 23.4683 46.5616 23.6838C46.8263 23.8992 47.0356 24.1593 47.1895 24.464C47.3433 24.7686 47.4203 25.1257 47.4203 25.535C47.4203 26.089 47.2787 26.5768 46.9956 26.9984C46.7124 27.417 46.3031 27.7447 45.7676 27.9817C45.2351 28.2156 44.5904 28.3326 43.8333 28.3326C43.0977 28.3326 42.4591 28.2187 41.9174 27.9909C41.3788 27.7632 40.9572 27.4308 40.6525 26.9938C40.3509 26.5568 40.1878 26.0243 40.1632 25.3965H41.8482C41.8728 25.7258 41.9744 25.9997 42.1529 26.2182C42.3314 26.4367 42.5637 26.5998 42.85 26.7076C43.1393 26.8153 43.4624 26.8691 43.8194 26.8691C44.1918 26.8691 44.5181 26.8137 44.7981 26.7029C45.0813 26.5891 45.3029 26.4321 45.4629 26.2321C45.6229 26.0289 45.7045 25.792 45.7076 25.5211C45.7045 25.2749 45.6322 25.0718 45.4906 24.9118C45.349 24.7486 45.1505 24.6132 44.8951 24.5055C44.6427 24.3947 44.3472 24.2962 44.0087 24.21L42.9331 23.9331C42.1544 23.733 41.5389 23.4299 41.0865 23.0236C40.6371 22.6143 40.4125 22.0711 40.4125 21.394C40.4125 20.8369 40.5633 20.3491 40.8649 19.9306C41.1696 19.512 41.5835 19.1873 42.1067 18.9565C42.6299 18.7226 43.2224 18.6056 43.8841 18.6056C44.555 18.6056 45.1428 18.7226 45.6475 18.9565C46.1554 19.1873 46.5539 19.5089 46.8432 19.9213C47.1325 20.3307 47.2818 20.8016 47.291 21.334H45.6429ZM50.5445 18.7349V28.1895H48.8733V18.7349H50.5445ZM54.3034 28.3326C53.8541 28.3326 53.4494 28.2525 53.0893 28.0925C52.7323 27.9294 52.4492 27.6893 52.2399 27.3723C52.0337 27.0553 51.9306 26.6645 51.9306 26.1998C51.9306 25.7997 52.0044 25.4688 52.1522 25.2072C52.2999 24.9456 52.5015 24.7363 52.7569 24.5794C53.0124 24.4224 53.3001 24.3039 53.6202 24.2239C53.9434 24.1408 54.2773 24.0808 54.622 24.0439C55.0375 24.0008 55.3745 23.9623 55.633 23.9284C55.8915 23.8915 56.0792 23.8361 56.1962 23.7623C56.3162 23.6853 56.3762 23.5668 56.3762 23.4068V23.3791C56.3762 23.0313 56.2731 22.762 56.0669 22.5712C55.8607 22.3804 55.5637 22.285 55.176 22.285C54.7666 22.285 54.4419 22.3742 54.2019 22.5527C53.9649 22.7312 53.8049 22.9421 53.7218 23.1852L52.1614 22.9636C52.2845 22.5327 52.4876 22.1726 52.7708 21.8833C53.0539 21.591 53.4002 21.3725 53.8095 21.2278C54.2188 21.0801 54.6712 21.0062 55.1667 21.0062C55.5083 21.0062 55.8484 21.0462 56.187 21.1262C56.5255 21.2063 56.8348 21.3386 57.1149 21.5233C57.3949 21.7048 57.6196 21.9526 57.7889 22.2665C57.9612 22.5804 58.0474 22.9728 58.0474 23.4437V28.1895H56.4409V27.2154H56.3855C56.2839 27.4123 56.1408 27.597 55.9561 27.7694C55.7746 27.9386 55.5453 28.0756 55.2683 28.1802C54.9944 28.2818 54.6728 28.3326 54.3034 28.3326ZM54.7374 27.1046C55.0729 27.1046 55.3637 27.0384 55.6099 26.9061C55.8561 26.7707 56.0454 26.5922 56.1777 26.3706C56.3132 26.149 56.3809 25.9074 56.3809 25.6458V24.8102C56.3285 24.8533 56.2393 24.8933 56.1131 24.9302C55.99 24.9672 55.8515 24.9995 55.6976 25.0272C55.5437 25.0549 55.3914 25.0795 55.2406 25.101C55.0898 25.1226 54.959 25.141 54.8482 25.1564C54.5989 25.1903 54.3758 25.2457 54.1788 25.3226C53.9818 25.3996 53.8264 25.5073 53.7125 25.6458C53.5987 25.7812 53.5417 25.9566 53.5417 26.1721C53.5417 26.4798 53.6541 26.7122 53.8787 26.8691C54.1034 27.0261 54.3896 27.1046 54.7374 27.1046ZM62.8208 28.3279C62.113 28.3279 61.5051 28.1725 60.9973 27.8617C60.4926 27.5508 60.1033 27.1215 59.8294 26.5737C59.5585 26.0228 59.4231 25.3888 59.4231 24.6717C59.4231 23.9515 59.5616 23.316 59.8386 22.7651C60.1156 22.2111 60.5065 21.7802 61.0112 21.4725C61.519 21.1616 62.1191 21.0062 62.8116 21.0062C63.3871 21.0062 63.8965 21.1124 64.3397 21.3248C64.7859 21.534 65.1414 21.831 65.4061 22.2157C65.6708 22.5974 65.8216 23.0436 65.8585 23.5545H64.2612C64.1966 23.2129 64.0427 22.9282 63.7995 22.7005C63.5595 22.4696 63.2379 22.3542 62.8347 22.3542C62.4931 22.3542 62.193 22.4466 61.9345 22.6312C61.676 22.8128 61.4744 23.0744 61.3297 23.416C61.1882 23.7576 61.1174 24.167 61.1174 24.644C61.1174 25.1272 61.1882 25.5427 61.3297 25.8904C61.4713 26.2351 61.6698 26.5014 61.9252 26.6891C62.1838 26.8738 62.4869 26.9661 62.8347 26.9661C63.0809 26.9661 63.301 26.9199 63.4949 26.8276C63.6918 26.7322 63.8565 26.5952 63.9888 26.4167C64.1212 26.2382 64.2119 26.0212 64.2612 25.7658H65.8585C65.8185 26.2675 65.6708 26.7122 65.4153 27.1C65.1599 27.4847 64.8121 27.7863 64.372 28.0048C63.9319 28.2202 63.4148 28.3279 62.8208 28.3279ZM68.7542 25.9643L68.7496 23.9469H69.0173L71.5656 21.0985H73.5184L70.3838 24.5886H70.0376L68.7542 25.9643ZM67.2307 28.1895V18.7349H68.9019V28.1895H67.2307ZM71.681 28.1895L69.3728 24.9625L70.4992 23.7853L73.68 28.1895H71.681ZM79.6433 18.7349V28.1895H77.9306V18.7349H79.6433ZM83.0953 24.0346V28.1895H81.4241V21.0985H83.0214V22.3034H83.1045C83.2676 21.9064 83.5277 21.591 83.8847 21.3571C84.2448 21.1232 84.6895 21.0062 85.2188 21.0062C85.7082 21.0062 86.1344 21.1109 86.4976 21.3201C86.8638 21.5294 87.147 21.8326 87.347 22.2296C87.5502 22.6266 87.6502 23.1083 87.6471 23.6745V28.1895H85.9759V23.9331C85.9759 23.4591 85.8528 23.0882 85.6066 22.8205C85.3635 22.5527 85.0265 22.4189 84.5956 22.4189C84.3032 22.4189 84.0432 22.4835 83.8154 22.6127C83.5908 22.7389 83.4138 22.9221 83.2845 23.1621C83.1584 23.4022 83.0953 23.693 83.0953 24.0346ZM92.8868 21.0985V22.3912H88.8105V21.0985H92.8868ZM89.8169 19.3997H91.488V26.0566C91.488 26.2813 91.5219 26.4537 91.5896 26.5737C91.6604 26.6906 91.7527 26.7707 91.8666 26.8137C91.9804 26.8568 92.1066 26.8784 92.2451 26.8784C92.3498 26.8784 92.4452 26.8707 92.5313 26.8553C92.6206 26.8399 92.6883 26.8261 92.7345 26.8137L93.0161 28.1202C92.9268 28.151 92.7991 28.1848 92.6329 28.2218C92.4698 28.2587 92.2697 28.2802 92.0328 28.2864C91.6142 28.2987 91.2372 28.2356 90.9017 28.0971C90.5663 27.9556 90.3 27.737 90.1031 27.4416C89.9092 27.1461 89.8138 26.7768 89.8169 26.3336V19.3997ZM97.3475 28.3279C96.6365 28.3279 96.0225 28.1802 95.5055 27.8848C94.9915 27.5862 94.5961 27.1646 94.3191 26.6199C94.0421 26.072 93.9036 25.4273 93.9036 24.6855C93.9036 23.9561 94.0421 23.316 94.3191 22.7651C94.5991 22.2111 94.99 21.7802 95.4917 21.4725C95.9933 21.1616 96.5827 21.0062 97.2598 21.0062C97.6968 21.0062 98.1092 21.077 98.497 21.2186C98.8878 21.3571 99.2325 21.5725 99.5311 21.8649C99.8327 22.1573 100.07 22.5297 100.242 22.9821C100.414 23.4314 100.501 23.9669 100.501 24.5886V25.101H94.6884V23.9746H98.8986C98.8955 23.6545 98.8263 23.3699 98.6909 23.1206C98.5555 22.8682 98.3662 22.6697 98.123 22.525C97.883 22.3804 97.6029 22.3081 97.2828 22.3081C96.9412 22.3081 96.6412 22.3912 96.3826 22.5574C96.1241 22.7205 95.9225 22.9359 95.7779 23.2037C95.6363 23.4683 95.564 23.7592 95.5609 24.0762V25.0595C95.5609 25.4719 95.6363 25.8258 95.7871 26.1213C95.9379 26.4136 96.1487 26.6383 96.4196 26.7953C96.6904 26.9492 97.0074 27.0261 97.3706 27.0261C97.6137 27.0261 97.8337 26.9922 98.0307 26.9245C98.2277 26.8538 98.3985 26.7507 98.5431 26.6152C98.6878 26.4798 98.7971 26.3121 98.8709 26.112L100.431 26.2875C100.333 26.6999 100.145 27.06 99.8681 27.3677C99.5942 27.6724 99.2433 27.9094 98.8155 28.0787C98.3877 28.2449 97.8984 28.3279 97.3475 28.3279ZM104.998 30.9963C104.398 30.9963 103.882 30.9147 103.452 30.7516C103.021 30.5916 102.675 30.3761 102.413 30.1053C102.151 29.8345 101.97 29.5344 101.868 29.2051L103.373 28.8404C103.441 28.9789 103.539 29.1158 103.669 29.2512C103.798 29.3897 103.972 29.5036 104.19 29.5929C104.412 29.6852 104.69 29.7314 105.026 29.7314C105.5 29.7314 105.892 29.6159 106.203 29.3851C106.514 29.1574 106.669 28.7819 106.669 28.2587V26.9153H106.586C106.5 27.0877 106.374 27.2646 106.208 27.4462C106.045 27.6278 105.828 27.7801 105.557 27.9032C105.289 28.0263 104.952 28.0879 104.546 28.0879C104.001 28.0879 103.507 27.9602 103.064 27.7047C102.624 27.4462 102.273 27.0615 102.011 26.5506C101.753 26.0366 101.623 25.3934 101.623 24.6209C101.623 23.8423 101.753 23.1852 102.011 22.6497C102.273 22.1111 102.625 21.7033 103.068 21.4263C103.512 21.1462 104.006 21.0062 104.55 21.0062C104.966 21.0062 105.307 21.077 105.575 21.2186C105.846 21.3571 106.061 21.5248 106.222 21.7218C106.382 21.9157 106.503 22.0988 106.586 22.2711H106.679V21.0985H108.327V28.3049C108.327 28.9112 108.182 29.4128 107.893 29.8098C107.603 30.2069 107.208 30.5038 106.706 30.7008C106.205 30.8978 105.635 30.9963 104.998 30.9963ZM105.012 26.7768C105.366 26.7768 105.668 26.6906 105.917 26.5183C106.166 26.3459 106.355 26.0982 106.485 25.775C106.614 25.4519 106.679 25.0641 106.679 24.6117C106.679 24.1654 106.614 23.7746 106.485 23.4391C106.358 23.1036 106.171 22.8436 105.921 22.6589C105.675 22.4712 105.372 22.3773 105.012 22.3773C104.64 22.3773 104.329 22.4743 104.079 22.6681C103.83 22.862 103.642 23.1283 103.516 23.4668C103.39 23.8023 103.327 24.1839 103.327 24.6117C103.327 25.0456 103.39 25.4257 103.516 25.752C103.646 26.0751 103.835 26.3275 104.084 26.5091C104.336 26.6876 104.646 26.7768 105.012 26.7768ZM110.039 28.1895V21.0985H111.66V22.2804H111.734C111.863 21.871 112.084 21.5556 112.398 21.334C112.715 21.1093 113.077 20.997 113.483 20.997C113.576 20.997 113.679 21.0016 113.793 21.0108C113.909 21.017 114.006 21.0278 114.083 21.0431V22.5804C114.013 22.5558 113.9 22.5343 113.746 22.5158C113.596 22.4943 113.449 22.4835 113.308 22.4835C113.003 22.4835 112.729 22.5497 112.486 22.682C112.246 22.8113 112.057 22.9913 111.918 23.2221C111.78 23.4529 111.71 23.7192 111.71 24.0208V28.1895H110.039ZM117.107 28.3326C116.658 28.3326 116.253 28.2525 115.893 28.0925C115.536 27.9294 115.253 27.6893 115.044 27.3723C114.837 27.0553 114.734 26.6645 114.734 26.1998C114.734 25.7997 114.808 25.4688 114.956 25.2072C115.104 24.9456 115.305 24.7363 115.561 24.5794C115.816 24.4224 116.104 24.3039 116.424 24.2239C116.747 24.1408 117.081 24.0808 117.426 24.0439C117.841 24.0008 118.178 23.9623 118.437 23.9284C118.695 23.8915 118.883 23.8361 119 23.7623C119.12 23.6853 119.18 23.5668 119.18 23.4068V23.3791C119.18 23.0313 119.077 22.762 118.871 22.5712C118.664 22.3804 118.367 22.285 117.98 22.285C117.57 22.285 117.246 22.3742 117.006 22.5527C116.769 22.7312 116.609 22.9421 116.525 23.1852L114.965 22.9636C115.088 22.5327 115.291 22.1726 115.574 21.8833C115.858 21.591 116.204 21.3725 116.613 21.2278C117.023 21.0801 117.475 21.0062 117.97 21.0062C118.312 21.0062 118.652 21.0462 118.991 21.1262C119.329 21.2063 119.639 21.3386 119.919 21.5233C120.199 21.7048 120.423 21.9526 120.593 22.2665C120.765 22.5804 120.851 22.9728 120.851 23.4437V28.1895H119.245V27.2154H119.189C119.088 27.4123 118.945 27.597 118.76 27.7694C118.578 27.9386 118.349 28.0756 118.072 28.1802C117.798 28.2818 117.476 28.3326 117.107 28.3326ZM117.541 27.1046C117.877 27.1046 118.167 27.0384 118.414 26.9061C118.66 26.7707 118.849 26.5922 118.981 26.3706C119.117 26.149 119.185 25.9074 119.185 25.6458V24.8102C119.132 24.8533 119.043 24.8933 118.917 24.9302C118.794 24.9672 118.655 24.9995 118.501 25.0272C118.347 25.0549 118.195 25.0795 118.044 25.101C117.893 25.1226 117.763 25.141 117.652 25.1564C117.403 25.1903 117.179 25.2457 116.983 25.3226C116.786 25.3996 116.63 25.5073 116.516 25.6458C116.402 25.7812 116.345 25.9566 116.345 26.1721C116.345 26.4798 116.458 26.7122 116.682 26.8691C116.907 27.0261 117.193 27.1046 117.541 27.1046ZM126.072 21.0985V22.3912H121.996V21.0985H126.072ZM123.002 19.3997H124.674V26.0566C124.674 26.2813 124.707 26.4537 124.775 26.5737C124.846 26.6906 124.938 26.7707 125.052 26.8137C125.166 26.8568 125.292 26.8784 125.431 26.8784C125.535 26.8784 125.631 26.8707 125.717 26.8553C125.806 26.8399 125.874 26.8261 125.92 26.8137L126.202 28.1202C126.112 28.151 125.985 28.1848 125.818 28.2218C125.655 28.2587 125.455 28.2802 125.218 28.2864C124.8 28.2987 124.423 28.2356 124.087 28.0971C123.752 27.9556 123.486 27.737 123.289 27.4416C123.095 27.1461 122.999 26.7768 123.002 26.3336V19.3997ZM127.47 28.1895V21.0985H129.141V28.1895H127.47ZM128.31 20.0922C128.046 20.0922 127.818 20.0044 127.627 19.829C127.436 19.6505 127.341 19.4366 127.341 19.1873C127.341 18.935 127.436 18.7211 127.627 18.5456C127.818 18.3671 128.046 18.2779 128.31 18.2779C128.578 18.2779 128.806 18.3671 128.993 18.5456C129.184 18.7211 129.28 18.935 129.28 19.1873C129.28 19.4366 129.184 19.6505 128.993 19.829C128.806 20.0044 128.578 20.0922 128.31 20.0922ZM133.953 28.3279C133.26 28.3279 132.66 28.1756 132.152 27.8709C131.644 27.5662 131.251 27.14 130.97 26.5922C130.693 26.0443 130.555 25.4042 130.555 24.6717C130.555 23.9392 130.693 23.2975 130.97 22.7466C131.251 22.1957 131.644 21.7679 132.152 21.4632C132.66 21.1586 133.26 21.0062 133.953 21.0062C134.645 21.0062 135.245 21.1586 135.753 21.4632C136.261 21.7679 136.653 22.1957 136.93 22.7466C137.21 23.2975 137.35 23.9392 137.35 24.6717C137.35 25.4042 137.21 26.0443 136.93 26.5922C136.653 27.14 136.261 27.5662 135.753 27.8709C135.245 28.1756 134.645 28.3279 133.953 28.3279ZM133.962 26.9892C134.337 26.9892 134.651 26.8861 134.904 26.6799C135.156 26.4706 135.344 26.1905 135.467 25.8397C135.593 25.4888 135.656 25.098 135.656 24.6671C135.656 24.2331 135.593 23.8407 135.467 23.4899C135.344 23.1359 135.156 22.8543 134.904 22.6451C134.651 22.4358 134.337 22.3311 133.962 22.3311C133.577 22.3311 133.257 22.4358 133.002 22.6451C132.749 22.8543 132.56 23.1359 132.434 23.4899C132.311 23.8407 132.249 24.2331 132.249 24.6671C132.249 25.098 132.311 25.4888 132.434 25.8397C132.56 26.1905 132.749 26.4706 133.002 26.6799C133.257 26.8861 133.577 26.9892 133.962 26.9892ZM140.44 24.0346V28.1895H138.769V21.0985H140.366V22.3034H140.449C140.612 21.9064 140.872 21.591 141.229 21.3571C141.589 21.1232 142.034 21.0062 142.564 21.0062C143.053 21.0062 143.479 21.1109 143.842 21.3201C144.209 21.5294 144.492 21.8326 144.692 22.2296C144.895 22.6266 144.995 23.1083 144.992 23.6745V28.1895H143.321V23.9331C143.321 23.4591 143.198 23.0882 142.951 22.8205C142.708 22.5527 142.371 22.4189 141.94 22.4189C141.648 22.4189 141.388 22.4835 141.16 22.6127C140.935 22.7389 140.759 22.9221 140.629 23.1621C140.503 23.4022 140.44 23.693 140.44 24.0346ZM152.295 22.9728L150.772 23.139C150.729 22.9851 150.653 22.8405 150.545 22.7051C150.441 22.5697 150.299 22.4604 150.121 22.3773C149.942 22.2942 149.724 22.2527 149.465 22.2527C149.117 22.2527 148.825 22.3281 148.588 22.4789C148.354 22.6297 148.239 22.8251 148.242 23.0652C148.239 23.2714 148.314 23.4391 148.468 23.5684C148.625 23.6976 148.884 23.8038 149.244 23.8869L150.453 24.1454C151.124 24.2901 151.623 24.5194 151.949 24.8333C152.278 25.1472 152.444 25.5581 152.447 26.0659C152.444 26.5121 152.314 26.9061 152.055 27.2477C151.8 27.5862 151.444 27.8509 150.989 28.0417C150.533 28.2325 150.01 28.3279 149.419 28.3279C148.551 28.3279 147.853 28.1464 147.323 27.7832C146.794 27.417 146.478 26.9076 146.377 26.2551L148.006 26.0982C148.08 26.4183 148.237 26.6599 148.477 26.823C148.717 26.9861 149.03 27.0676 149.414 27.0676C149.811 27.0676 150.13 26.9861 150.37 26.823C150.613 26.6599 150.735 26.4583 150.735 26.2182C150.735 26.0151 150.656 25.8474 150.499 25.715C150.345 25.5827 150.105 25.4811 149.779 25.4103L148.57 25.1564C147.889 25.0149 147.386 24.7763 147.06 24.4409C146.734 24.1023 146.572 23.6745 146.575 23.1575C146.572 22.7205 146.691 22.3419 146.931 22.0218C147.174 21.6987 147.511 21.4494 147.942 21.274C148.376 21.0955 148.876 21.0062 149.442 21.0062C150.273 21.0062 150.927 21.1832 151.404 21.5371C151.884 21.891 152.181 22.3696 152.295 22.9728Z" fill="black"/>
-<path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747V76.5747Z" fill="#DEE2E6"/>
-<rect x="84.4092" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
-<rect x="115.566" y="75.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
-<rect x="178.641" y="75.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
-<path d="M213.6 75.3408H267.841C268.522 75.3408 269.075 75.8932 269.075 76.5747V76.5747C269.075 77.2561 268.522 77.8086 267.841 77.8086H213.6V75.3408Z" fill="#09A953"/>
-<rect x="39.5723" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
-<rect x="134.581" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<g filter="url(#filter1_d_2094_49731)">
-<rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
-</g>
-<path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
-<path d="M3 86H262.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
-<path d="M23.8386 44.7541C23.7617 44.5048 23.6555 44.2817 23.5201 44.0847C23.3877 43.8846 23.2277 43.7138 23.04 43.5723C22.8553 43.4307 22.6429 43.3245 22.4029 43.2537C22.1628 43.1799 21.9012 43.1429 21.6181 43.1429C21.1103 43.1429 20.6578 43.2707 20.2608 43.5261C19.8638 43.7815 19.5514 44.157 19.3237 44.6525C19.099 45.1449 18.9867 45.7451 18.9867 46.4529C18.9867 47.167 19.099 47.7717 19.3237 48.2672C19.5484 48.7627 19.8607 49.1397 20.2608 49.3983C20.6609 49.6537 21.1257 49.7814 21.655 49.7814C22.1351 49.7814 22.5506 49.6891 22.9015 49.5044C23.2554 49.3198 23.5278 49.0582 23.7186 48.7196C23.9094 48.378 24.0048 47.9779 24.0048 47.5194L24.3926 47.5794H21.8258V46.2406H25.6621V47.3762C25.6621 48.1857 25.4898 48.8858 25.1451 49.4767C24.8004 50.0676 24.3264 50.5231 23.7232 50.8432C23.12 51.1602 22.4275 51.3187 21.6458 51.3187C20.7748 51.3187 20.01 51.1233 19.3514 50.7324C18.6958 50.3385 18.1834 49.7799 17.8141 49.0566C17.4479 48.3303 17.2647 47.4686 17.2647 46.4714C17.2647 45.7082 17.3725 45.0265 17.5879 44.4263C17.8064 43.8262 18.1111 43.3168 18.502 42.8983C18.8928 42.4766 19.3514 42.1565 19.8777 41.938C20.4039 41.7164 20.9764 41.6056 21.595 41.6056C22.1182 41.6056 22.606 41.6826 23.0584 41.8365C23.5108 41.9873 23.9125 42.2027 24.2633 42.4828C24.6172 42.7628 24.9081 43.0952 25.1358 43.4799C25.3636 43.8646 25.5128 44.2894 25.5836 44.7541H23.8386ZM27.6887 51.1895V44.0985H29.3599V51.1895H27.6887ZM28.5289 43.0922C28.2643 43.0922 28.0365 43.0044 27.8457 42.829C27.6549 42.6505 27.5595 42.4366 27.5595 42.1873C27.5595 41.935 27.6549 41.7211 27.8457 41.5456C28.0365 41.3671 28.2643 41.2779 28.5289 41.2779C28.7967 41.2779 29.0244 41.3671 29.2122 41.5456C29.403 41.7211 29.4984 41.935 29.4984 42.1873C29.4984 42.4366 29.403 42.6505 29.2122 42.829C29.0244 43.0044 28.7967 43.0922 28.5289 43.0922ZM34.6192 44.0985V45.3912H30.5429V44.0985H34.6192ZM31.5493 42.3997H33.2204V49.0566C33.2204 49.2813 33.2543 49.4537 33.322 49.5737C33.3928 49.6906 33.4851 49.7707 33.599 49.8137C33.7129 49.8568 33.839 49.8784 33.9775 49.8784C34.0822 49.8784 34.1776 49.8707 34.2638 49.8553C34.353 49.8399 34.4207 49.8261 34.4669 49.8137L34.7485 51.1202C34.6592 51.151 34.5315 51.1848 34.3653 51.2218C34.2022 51.2587 34.0022 51.2802 33.7652 51.2864C33.3466 51.2987 32.9696 51.2356 32.6341 51.0971C32.2987 50.9556 32.0325 50.737 31.8355 50.4416C31.6416 50.1461 31.5462 49.7768 31.5493 49.3336V42.3997ZM37.8404 47.0346V51.1895H36.1692V41.7349H37.8034V45.3034H37.8865C38.0527 44.9033 38.3097 44.5879 38.6575 44.3571C39.0083 44.1232 39.4546 44.0062 39.9963 44.0062C40.4887 44.0062 40.918 44.1093 41.2843 44.3155C41.6505 44.5217 41.9337 44.8233 42.1337 45.2203C42.3368 45.6174 42.4384 46.1021 42.4384 46.6745V51.1895H40.7672V46.9331C40.7672 46.456 40.6441 46.0852 40.3979 45.8205C40.1548 45.5527 39.8132 45.4189 39.373 45.4189C39.0776 45.4189 38.8129 45.4835 38.579 45.6127C38.3482 45.7389 38.1666 45.9221 38.0343 46.1621C37.905 46.4022 37.8404 46.693 37.8404 47.0346ZM48.6614 48.2072V44.0985H50.3326V51.1895H48.7122V49.9292H48.6383C48.4783 50.3262 48.2151 50.6509 47.8489 50.9032C47.4857 51.1556 47.0379 51.2818 46.5055 51.2818C46.0408 51.2818 45.6299 51.1787 45.2729 50.9725C44.919 50.7632 44.642 50.46 44.4419 50.063C44.2419 49.6629 44.1419 49.1797 44.1419 48.6135V44.0985H45.813V48.3549C45.813 48.8043 45.9361 49.1613 46.1824 49.426C46.4286 49.6906 46.7517 49.823 47.1518 49.823C47.398 49.823 47.6365 49.763 47.8674 49.6429C48.0982 49.5229 48.2875 49.3444 48.4352 49.1074C48.586 48.8674 48.6614 48.5673 48.6614 48.2072ZM52.1249 51.1895V41.7349H53.7961V45.2711H53.8653C53.9515 45.0988 54.0731 44.9157 54.23 44.7218C54.387 44.5248 54.5993 44.3571 54.8671 44.2186C55.1349 44.077 55.4765 44.0062 55.892 44.0062C56.4398 44.0062 56.9337 44.1462 57.3738 44.4263C57.817 44.7033 58.1679 45.1142 58.4264 45.6589C58.688 46.2006 58.8188 46.8654 58.8188 47.6532C58.8188 48.4319 58.6911 49.0936 58.4356 49.6383C58.1802 50.1831 57.8324 50.5985 57.3923 50.8848C56.9522 51.171 56.4536 51.3141 55.8966 51.3141C55.4903 51.3141 55.1533 51.2464 54.8856 51.111C54.6178 50.9756 54.4024 50.8124 54.2393 50.6216C54.0792 50.4277 53.9546 50.2446 53.8653 50.0723H53.7684V51.1895H52.1249ZM53.7638 47.644C53.7638 48.1026 53.8284 48.5042 53.9577 48.8489C54.09 49.1936 54.2793 49.4629 54.5255 49.6568C54.7748 49.8476 55.0764 49.943 55.4303 49.943C55.7996 49.943 56.1089 49.8445 56.3582 49.6475C56.6075 49.4475 56.7952 49.1751 56.9214 48.8304C57.0507 48.4827 57.1153 48.0872 57.1153 47.644C57.1153 47.2039 57.0522 46.813 56.926 46.4714C56.7999 46.1298 56.6121 45.862 56.3628 45.6681C56.1135 45.4743 55.8027 45.3773 55.4303 45.3773C55.0733 45.3773 54.7702 45.4712 54.5209 45.6589C54.2716 45.8466 54.0823 46.1098 53.953 46.4483C53.8269 46.7869 53.7638 47.1854 53.7638 47.644ZM65.2507 41.7349V51.1895H63.538V41.7349H65.2507ZM68.7027 47.0346V51.1895H67.0315V44.0985H68.6288V45.3034H68.7119C68.875 44.9064 69.1351 44.591 69.4921 44.3571C69.8522 44.1232 70.2969 44.0062 70.8263 44.0062C71.3156 44.0062 71.7419 44.1109 72.105 44.3201C72.4713 44.5294 72.7544 44.8326 72.9545 45.2296C73.1576 45.6266 73.2576 46.1083 73.2545 46.6745V51.1895H71.5834V46.9331C71.5834 46.4591 71.4603 46.0882 71.214 45.8205C70.9709 45.5527 70.6339 45.4189 70.203 45.4189C69.9107 45.4189 69.6506 45.4835 69.4229 45.6127C69.1982 45.7389 69.0212 45.9221 68.892 46.1621C68.7658 46.4022 68.7027 46.693 68.7027 47.0346ZM78.4942 44.0985V45.3912H74.4179V44.0985H78.4942ZM75.4243 42.3997H77.0954V49.0566C77.0954 49.2813 77.1293 49.4537 77.197 49.5737C77.2678 49.6906 77.3601 49.7707 77.474 49.8137C77.5879 49.8568 77.714 49.8784 77.8525 49.8784C77.9572 49.8784 78.0526 49.8707 78.1388 49.8553C78.228 49.8399 78.2957 49.8261 78.3419 49.8137L78.6235 51.1202C78.5342 51.151 78.4065 51.1848 78.2403 51.2218C78.0772 51.2587 77.8772 51.2802 77.6402 51.2864C77.2216 51.2987 76.8446 51.2356 76.5091 51.0971C76.1737 50.9556 75.9075 50.737 75.7105 50.4416C75.5166 50.1461 75.4212 49.7768 75.4243 49.3336V42.3997ZM82.9549 51.3279C82.244 51.3279 81.63 51.1802 81.1129 50.8848C80.599 50.5862 80.2035 50.1646 79.9265 49.6199C79.6495 49.072 79.511 48.4273 79.511 47.6855C79.511 46.9561 79.6495 46.316 79.9265 45.7651C80.2066 45.2111 80.5974 44.7802 81.0991 44.4725C81.6007 44.1616 82.1901 44.0062 82.8672 44.0062C83.3042 44.0062 83.7166 44.077 84.1044 44.2186C84.4953 44.3571 84.84 44.5725 85.1385 44.8649C85.4401 45.1573 85.6771 45.5297 85.8494 45.9821C86.0218 46.4314 86.108 46.9669 86.108 47.5886V48.101H80.2958V46.9746H84.506C84.503 46.6545 84.4337 46.3699 84.2983 46.1206C84.1629 45.8682 83.9736 45.6697 83.7305 45.525C83.4904 45.3804 83.2103 45.3081 82.8903 45.3081C82.5487 45.3081 82.2486 45.3912 81.9901 45.5574C81.7315 45.7205 81.5299 45.9359 81.3853 46.2037C81.2437 46.4683 81.1714 46.7592 81.1683 47.0762V48.0595C81.1683 48.4719 81.2437 48.8258 81.3945 49.1213C81.5453 49.4136 81.7562 49.6383 82.027 49.7953C82.2978 49.9492 82.6148 50.0261 82.978 50.0261C83.2211 50.0261 83.4412 49.9922 83.6381 49.9245C83.8351 49.8538 84.0059 49.7507 84.1506 49.6152C84.2952 49.4798 84.4045 49.3121 84.4783 49.112L86.0387 49.2875C85.9402 49.6999 85.7525 50.06 85.4755 50.3677C85.2016 50.6724 84.8507 50.9094 84.4229 51.0787C83.9951 51.2449 83.5058 51.3279 82.9549 51.3279ZM90.6056 53.9963C90.0054 53.9963 89.4899 53.9147 89.059 53.7516C88.6282 53.5916 88.2819 53.3761 88.0203 53.1053C87.7587 52.8345 87.5771 52.5344 87.4756 52.2051L88.9806 51.8404C89.0483 51.9789 89.1468 52.1158 89.276 52.2512C89.4053 52.3897 89.5792 52.5036 89.7977 52.5929C90.0193 52.6852 90.2978 52.7314 90.6333 52.7314C91.1072 52.7314 91.4996 52.6159 91.8105 52.3851C92.1213 52.1574 92.2767 51.7819 92.2767 51.2587V49.9153H92.1936C92.1075 50.0877 91.9813 50.2646 91.8151 50.4462C91.652 50.6278 91.435 50.7801 91.1642 50.9032C90.8964 51.0263 90.5594 51.0879 90.1531 51.0879C89.6084 51.0879 89.1144 50.9602 88.6713 50.7047C88.2311 50.4462 87.8803 50.0615 87.6187 49.5506C87.3602 49.0366 87.2309 48.3934 87.2309 47.6209C87.2309 46.8423 87.3602 46.1852 87.6187 45.6497C87.8803 45.1111 88.2327 44.7033 88.6759 44.4263C89.1191 44.1462 89.613 44.0062 90.1578 44.0062C90.5732 44.0062 90.9149 44.077 91.1826 44.2186C91.4535 44.3571 91.6689 44.5248 91.8289 44.7218C91.989 44.9157 92.1105 45.0988 92.1936 45.2711H92.286V44.0985H93.934V51.3049C93.934 51.9112 93.7894 52.4128 93.5001 52.8098C93.2108 53.2069 92.8153 53.5038 92.3137 53.7008C91.812 53.8978 91.2426 53.9963 90.6056 53.9963ZM90.6194 49.7768C90.9733 49.7768 91.2749 49.6906 91.5242 49.5183C91.7735 49.3459 91.9628 49.0982 92.0921 48.775C92.2213 48.4519 92.286 48.0641 92.286 47.6117C92.286 47.1654 92.2213 46.7746 92.0921 46.4391C91.9659 46.1036 91.7781 45.8436 91.5289 45.6589C91.2826 45.4712 90.9795 45.3773 90.6194 45.3773C90.247 45.3773 89.9362 45.4743 89.6869 45.6681C89.4376 45.862 89.2499 46.1283 89.1237 46.4668C88.9975 46.8023 88.9344 47.1839 88.9344 47.6117C88.9344 48.0456 88.9975 48.4257 89.1237 48.752C89.2529 49.0751 89.4422 49.3275 89.6915 49.5091C89.9439 49.6876 90.2532 49.7768 90.6194 49.7768ZM95.6468 51.1895V44.0985H97.2671V45.2804H97.341C97.4703 44.871 97.6919 44.5556 98.0058 44.334C98.3228 44.1093 98.6844 43.997 99.0906 43.997C99.183 43.997 99.2861 44.0016 99.3999 44.0108C99.5169 44.017 99.6138 44.0278 99.6908 44.0431V45.5804C99.62 45.5558 99.5077 45.5343 99.3538 45.5158C99.203 45.4943 99.0568 45.4835 98.9152 45.4835C98.6105 45.4835 98.3366 45.5497 98.0935 45.682C97.8534 45.8113 97.6642 45.9913 97.5257 46.2221C97.3872 46.4529 97.3179 46.7192 97.3179 47.0208V51.1895H95.6468ZM102.715 51.3326C102.265 51.3326 101.861 51.2525 101.5 51.0925C101.143 50.9294 100.86 50.6893 100.651 50.3723C100.445 50.0553 100.342 49.6645 100.342 49.1998C100.342 48.7997 100.416 48.4688 100.563 48.2072C100.711 47.9456 100.913 47.7363 101.168 47.5794C101.424 47.4224 101.711 47.3039 102.031 47.2239C102.354 47.1408 102.688 47.0808 103.033 47.0439C103.449 47.0008 103.786 46.9623 104.044 46.9284C104.303 46.8915 104.49 46.8361 104.607 46.7623C104.727 46.6853 104.787 46.5668 104.787 46.4068V46.3791C104.787 46.0313 104.684 45.762 104.478 45.5712C104.272 45.3804 103.975 45.285 103.587 45.285C103.178 45.285 102.853 45.3742 102.613 45.5527C102.376 45.7312 102.216 45.9421 102.133 46.1852L100.573 45.9636C100.696 45.5327 100.899 45.1726 101.182 44.8833C101.465 44.591 101.811 44.3725 102.221 44.2278C102.63 44.0801 103.082 44.0062 103.578 44.0062C103.919 44.0062 104.26 44.0462 104.598 44.1262C104.937 44.2063 105.246 44.3386 105.526 44.5233C105.806 44.7048 106.031 44.9526 106.2 45.2665C106.372 45.5804 106.459 45.9728 106.459 46.4437V51.1895H104.852V50.2154H104.797C104.695 50.4123 104.552 50.597 104.367 50.7694C104.186 50.9386 103.956 51.0756 103.679 51.1802C103.406 51.2818 103.084 51.3326 102.715 51.3326ZM103.149 50.1046C103.484 50.1046 103.775 50.0384 104.021 49.9061C104.267 49.7707 104.457 49.5922 104.589 49.3706C104.724 49.149 104.792 48.9074 104.792 48.6458V47.8102C104.74 47.8533 104.65 47.8933 104.524 47.9302C104.401 47.9672 104.263 47.9995 104.109 48.0272C103.955 48.0549 103.803 48.0795 103.652 48.101C103.501 48.1226 103.37 48.141 103.259 48.1564C103.01 48.1903 102.787 48.2457 102.59 48.3226C102.393 48.3996 102.238 48.5073 102.124 48.6458C102.01 48.7812 101.953 48.9566 101.953 49.1721C101.953 49.4798 102.065 49.7122 102.29 49.8691C102.515 50.0261 102.801 50.1046 103.149 50.1046ZM111.68 44.0985V45.3912H107.603V44.0985H111.68ZM108.61 42.3997H110.281V49.0566C110.281 49.2813 110.315 49.4537 110.383 49.5737C110.453 49.6906 110.546 49.7707 110.66 49.8137C110.773 49.8568 110.9 49.8784 111.038 49.8784C111.143 49.8784 111.238 49.8707 111.324 49.8553C111.414 49.8399 111.481 49.8261 111.527 49.8137L111.809 51.1202C111.72 51.151 111.592 51.1848 111.426 51.2218C111.263 51.2587 111.063 51.2802 110.826 51.2864C110.407 51.2987 110.03 51.2356 109.695 51.0971C109.359 50.9556 109.093 50.737 108.896 50.4416C108.702 50.1461 108.607 49.7768 108.61 49.3336V42.3997ZM113.077 51.1895V44.0985H114.749V51.1895H113.077ZM113.918 43.0922C113.653 43.0922 113.425 43.0044 113.234 42.829C113.044 42.6505 112.948 42.4366 112.948 42.1873C112.948 41.935 113.044 41.7211 113.234 41.5456C113.425 41.3671 113.653 41.2779 113.918 41.2779C114.185 41.2779 114.413 41.3671 114.601 41.5456C114.792 41.7211 114.887 41.935 114.887 42.1873C114.887 42.4366 114.792 42.6505 114.601 42.829C114.413 43.0044 114.185 43.0922 113.918 43.0922ZM119.56 51.3279C118.868 51.3279 118.267 51.1756 117.76 50.8709C117.252 50.5662 116.858 50.14 116.578 49.5922C116.301 49.0443 116.162 48.4042 116.162 47.6717C116.162 46.9392 116.301 46.2975 116.578 45.7466C116.858 45.1957 117.252 44.7679 117.76 44.4632C118.267 44.1586 118.868 44.0062 119.56 44.0062C120.253 44.0062 120.853 44.1586 121.361 44.4632C121.868 44.7679 122.261 45.1957 122.538 45.7466C122.818 46.2975 122.958 46.9392 122.958 47.6717C122.958 48.4042 122.818 49.0443 122.538 49.5922C122.261 50.14 121.868 50.5662 121.361 50.8709C120.853 51.1756 120.253 51.3279 119.56 51.3279ZM119.569 49.9892C119.945 49.9892 120.259 49.8861 120.511 49.6799C120.763 49.4706 120.951 49.1905 121.074 48.8397C121.2 48.4888 121.264 48.098 121.264 47.6671C121.264 47.2331 121.2 46.8407 121.074 46.4899C120.951 46.1359 120.763 45.8543 120.511 45.6451C120.259 45.4358 119.945 45.3311 119.569 45.3311C119.185 45.3311 118.865 45.4358 118.609 45.6451C118.357 45.8543 118.167 46.1359 118.041 46.4899C117.918 46.8407 117.857 47.2331 117.857 47.6671C117.857 48.098 117.918 48.4888 118.041 48.8397C118.167 49.1905 118.357 49.4706 118.609 49.6799C118.865 49.8861 119.185 49.9892 119.569 49.9892ZM126.047 47.0346V51.1895H124.376V44.0985H125.974V45.3034H126.057C126.22 44.9064 126.48 44.591 126.837 44.3571C127.197 44.1232 127.642 44.0062 128.171 44.0062C128.66 44.0062 129.087 44.1109 129.45 44.3201C129.816 44.5294 130.099 44.8326 130.299 45.2296C130.502 45.6266 130.602 46.1083 130.599 46.6745V51.1895H128.928V46.9331C128.928 46.4591 128.805 46.0882 128.559 45.8205C128.316 45.5527 127.979 45.4189 127.548 45.4189C127.255 45.4189 126.995 45.4835 126.768 45.6127C126.543 45.7389 126.366 45.9221 126.237 46.1621C126.11 46.4022 126.047 46.693 126.047 47.0346ZM137.903 45.9728L136.379 46.139C136.336 45.9851 136.261 45.8405 136.153 45.7051C136.048 45.5697 135.907 45.4604 135.728 45.3773C135.55 45.2942 135.331 45.2527 135.073 45.2527C134.725 45.2527 134.432 45.3281 134.195 45.4789C133.962 45.6297 133.846 45.8251 133.849 46.0652C133.846 46.2714 133.922 46.4391 134.075 46.5684C134.232 46.6976 134.491 46.8038 134.851 46.8869L136.061 47.1454C136.731 47.2901 137.23 47.5194 137.556 47.8333C137.886 48.1472 138.052 48.5581 138.055 49.0659C138.052 49.5121 137.921 49.9061 137.662 50.2477C137.407 50.5862 137.052 50.8509 136.596 51.0417C136.141 51.2325 135.617 51.3279 135.026 51.3279C134.159 51.3279 133.46 51.1464 132.931 50.7832C132.401 50.417 132.086 49.9076 131.984 49.2551L133.614 49.0982C133.688 49.4183 133.845 49.6599 134.085 49.823C134.325 49.9861 134.637 50.0676 135.022 50.0676C135.419 50.0676 135.737 49.9861 135.977 49.823C136.221 49.6599 136.342 49.4583 136.342 49.2182C136.342 49.0151 136.264 48.8474 136.107 48.715C135.953 48.5827 135.713 48.4811 135.387 48.4103L134.177 48.1564C133.497 48.0149 132.994 47.7763 132.667 47.4409C132.341 47.1023 132.18 46.6745 132.183 46.1575C132.18 45.7205 132.298 45.3419 132.538 45.0218C132.781 44.6987 133.118 44.4494 133.549 44.274C133.983 44.0955 134.483 44.0062 135.05 44.0062C135.881 44.0062 136.535 44.1832 137.012 44.5371C137.492 44.891 137.789 45.3696 137.903 45.9728Z" fill="black"/>
-<path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747V99.5747Z" fill="#DEE2E6"/>
-<rect x="61.4092" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
-<rect x="92.5664" y="98.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
-<rect x="155.641" y="98.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
-<path d="M190.6 98.3408H244.841C245.522 98.3408 246.075 98.8932 246.075 99.5747V99.5747C246.075 100.256 245.522 100.809 244.841 100.809H190.6V98.3408Z" fill="#09A953"/>
-<rect x="16.5723" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
-<rect x="111.581" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<defs>
-<filter id="filter0_d_2094_49731" x="23.5323" y="0.532252" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2094_49731"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2094_49731" result="shape"/>
-</filter>
-<filter id="filter1_d_2094_49731" x="0.532252" y="23.5323" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2094_49731"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2094_49731" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/empty-estimate.svg b/apps/app/public/empty-state/empty-estimate.svg
deleted file mode 100644
index eb2926ad9..000000000
--- a/apps/app/public/empty-state/empty-estimate.svg
+++ /dev/null
@@ -1,49 +0,0 @@
-<svg width="196" height="115" viewBox="0 0 196 115" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_3137_70101)">
-<rect x="88" y="2.99988" width="105" height="65" rx="5.5615" fill="white"/>
-<path d="M167.557 48.358C165.869 48.358 164.365 48.0682 163.044 47.4886C161.732 46.9091 160.688 46.1037 159.912 45.0724C159.145 44.0327 158.727 42.8267 158.659 41.4545H161.881C161.949 42.2983 162.239 43.027 162.75 43.6406C163.261 44.2457 163.93 44.7145 164.757 45.0469C165.584 45.3793 166.5 45.5455 167.506 45.5455C168.631 45.5455 169.628 45.3494 170.497 44.9574C171.366 44.5653 172.048 44.0199 172.543 43.321C173.037 42.6222 173.284 41.8125 173.284 40.892C173.284 39.929 173.045 39.081 172.568 38.348C172.091 37.6065 171.392 37.027 170.472 36.6094C169.551 36.1918 168.426 35.983 167.097 35.983H165V33.1705H167.097C168.136 33.1705 169.048 32.983 169.832 32.608C170.625 32.233 171.243 31.7045 171.686 31.0227C172.138 30.3409 172.364 29.5398 172.364 28.6193C172.364 27.733 172.168 26.9616 171.776 26.3054C171.384 25.6491 170.83 25.1378 170.114 24.7713C169.406 24.4048 168.571 24.2216 167.608 24.2216C166.705 24.2216 165.852 24.3878 165.051 24.7202C164.259 25.044 163.611 25.517 163.108 26.1392C162.605 26.7528 162.332 27.4943 162.29 28.3636H159.222C159.273 26.9915 159.686 25.7898 160.462 24.7585C161.237 23.7187 162.251 22.9091 163.504 22.3295C164.766 21.75 166.151 21.4602 167.659 21.4602C169.278 21.4602 170.668 21.7884 171.827 22.4446C172.986 23.0923 173.876 23.9489 174.499 25.0142C175.121 26.0795 175.432 27.2301 175.432 28.4659C175.432 29.9403 175.044 31.1974 174.268 32.2372C173.501 33.277 172.457 33.9972 171.136 34.3977V34.6023C172.79 34.875 174.081 35.5781 175.01 36.7116C175.939 37.8366 176.403 39.2301 176.403 40.892C176.403 42.3153 176.016 43.5938 175.24 44.7273C174.473 45.8523 173.425 46.7386 172.095 47.3864C170.766 48.0341 169.253 48.358 167.557 48.358Z" fill="#495057"/>
-<path d="M105.479 47.75L121.5 20L137.521 47.75H105.479Z" stroke="#ACB5BD"/>
-</g>
-<g filter="url(#filter1_d_3137_70101)">
-<rect x="47" y="24.9999" width="105" height="65" rx="5.5615" fill="white"/>
-<path d="M117.71 70V67.6989L126.352 58.2386C127.366 57.1307 128.202 56.1676 128.858 55.3494C129.514 54.5227 130 53.7472 130.315 53.0227C130.639 52.2898 130.801 51.5227 130.801 50.7216C130.801 49.8011 130.58 49.0043 130.136 48.331C129.702 47.6577 129.105 47.1378 128.347 46.7713C127.588 46.4048 126.736 46.2216 125.79 46.2216C124.784 46.2216 123.906 46.4304 123.156 46.848C122.415 47.2571 121.839 47.8324 121.43 48.5739C121.03 49.3153 120.83 50.1847 120.83 51.1818H117.812C117.812 49.6477 118.166 48.3011 118.874 47.142C119.581 45.983 120.544 45.0795 121.763 44.4318C122.99 43.7841 124.366 43.4602 125.892 43.4602C127.426 43.4602 128.786 43.7841 129.97 44.4318C131.155 45.0795 132.084 45.9531 132.757 47.0526C133.43 48.152 133.767 49.375 133.767 50.7216C133.767 51.6847 133.592 52.6264 133.243 53.5469C132.902 54.4588 132.305 55.4773 131.453 56.6023C130.609 57.7187 129.438 59.0824 127.938 60.6932L122.057 66.983V67.1875H134.227V70H117.71Z" fill="#495057"/>
-<path d="M64.4785 69.75L80.5 42L96.5215 69.75H64.4785Z" stroke="#ACB5BD"/>
-</g>
-<g filter="url(#filter2_d_3137_70101)">
-<rect x="3" y="46.9999" width="105" height="65" rx="5.5615" fill="white"/>
-<path d="M82.9148 65.8182V92H79.7443V69.142H79.5909L73.1989 73.3864V70.1648L79.7443 65.8182H82.9148Z" fill="#495057"/>
-<path d="M20.4785 91.75L36.5 64L52.5215 91.75H20.4785Z" stroke="#ACB5BD"/>
-</g>
-<defs>
-<filter id="filter0_d_3137_70101" x="85.2193" y="0.219129" width="110.561" height="70.5616" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3137_70101"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3137_70101" result="shape"/>
-</filter>
-<filter id="filter1_d_3137_70101" x="44.2193" y="22.2191" width="110.561" height="70.5616" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3137_70101"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3137_70101" result="shape"/>
-</filter>
-<filter id="filter2_d_3137_70101" x="0.219251" y="44.2191" width="110.561" height="70.5616" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3137_70101"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3137_70101" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/empty-issue.svg b/apps/app/public/empty-state/empty-issue.svg
deleted file mode 100644
index 2e9df2768..000000000
--- a/apps/app/public/empty-state/empty-issue.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<svg width="288" height="114" viewBox="0 0 288 114" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_1295_41552)">
-<rect x="25" y="3" width="260" height="84.1176" rx="5.5615" fill="white"/>
-<path d="M38.2659 22.0371L36.3304 14.9588H37.2014L38.6806 20.7238H38.7497L40.2566 14.9588H41.2244L42.7313 20.7238H42.8004L44.2796 14.9588H45.1506L43.2151 22.0371H42.3304L40.7682 16.3966H40.7129L39.1507 22.0371H38.2659ZM47.7704 22.1477C47.2911 22.1477 46.8706 22.0337 46.5089 21.8055C46.1494 21.5774 45.8683 21.2583 45.6656 20.8482C45.4651 20.438 45.3649 19.9588 45.3649 19.4104C45.3649 18.8574 45.4651 18.3747 45.6656 17.9623C45.8683 17.5498 46.1494 17.2296 46.5089 17.0014C46.8706 16.7733 47.2911 16.6593 47.7704 16.6593C48.2497 16.6593 48.669 16.7733 49.0284 17.0014C49.3902 17.2296 49.6713 17.5498 49.8718 17.9623C50.0745 18.3747 50.1759 18.8574 50.1759 19.4104C50.1759 19.9588 50.0745 20.438 49.8718 20.8482C49.6713 21.2583 49.3902 21.5774 49.0284 21.8055C48.669 22.0337 48.2497 22.1477 47.7704 22.1477ZM47.7704 21.415C48.1344 21.415 48.434 21.3217 48.669 21.135C48.904 20.9484 49.078 20.703 49.1909 20.3989C49.3038 20.0947 49.3602 19.7652 49.3602 19.4104C49.3602 19.0556 49.3038 18.7249 49.1909 18.4185C49.078 18.112 48.904 17.8643 48.669 17.6754C48.434 17.4865 48.1344 17.392 47.7704 17.392C47.4063 17.392 47.1068 17.4865 46.8718 17.6754C46.6368 17.8643 46.4628 18.112 46.3499 18.4185C46.237 18.7249 46.1805 19.0556 46.1805 19.4104C46.1805 19.7652 46.237 20.0947 46.3499 20.3989C46.4628 20.703 46.6368 20.9484 46.8718 21.135C47.1068 21.3217 47.4063 21.415 47.7704 21.415ZM51.421 22.0371V16.7284H52.209V17.5302H52.2643C52.3611 17.2676 52.5362 17.0544 52.7896 16.8908C53.0431 16.7273 53.3288 16.6455 53.6468 16.6455C53.7067 16.6455 53.7816 16.6466 53.8714 16.6489C53.9613 16.6512 54.0293 16.6547 54.0753 16.6593V17.4888C54.0477 17.4819 53.9843 17.4715 53.8853 17.4577C53.7885 17.4415 53.6859 17.4335 53.5777 17.4335C53.3196 17.4335 53.0892 17.4876 52.8864 17.5959C52.686 17.7019 52.527 17.8494 52.4095 18.0383C52.2943 18.2249 52.2367 18.4381 52.2367 18.6777V22.0371H51.421ZM55.8026 20.1016L55.7887 19.0924H55.9546L58.2772 16.7284H59.2864L56.8118 19.2307H56.7427L55.8026 20.1016ZM55.0422 22.0371V14.9588H55.8579V22.0371H55.0422ZM58.4154 22.0371L56.3417 19.4104L56.9224 18.8436L59.4523 22.0371H58.4154ZM65.2302 22.1477C64.7509 22.1477 64.3304 22.0337 63.9687 21.8055C63.6092 21.5774 63.3281 21.2583 63.1254 20.8482C62.9249 20.438 62.8247 19.9588 62.8247 19.4104C62.8247 18.8574 62.9249 18.3747 63.1254 17.9623C63.3281 17.5498 63.6092 17.2296 63.9687 17.0014C64.3304 16.7733 64.7509 16.6593 65.2302 16.6593C65.7094 16.6593 66.1288 16.7733 66.4882 17.0014C66.85 17.2296 67.1311 17.5498 67.3315 17.9623C67.5343 18.3747 67.6357 18.8574 67.6357 19.4104C67.6357 19.9588 67.5343 20.438 67.3315 20.8482C67.1311 21.2583 66.85 21.5774 66.4882 21.8055C66.1288 22.0337 65.7094 22.1477 65.2302 22.1477ZM65.2302 21.415C65.5942 21.415 65.8938 21.3217 66.1288 21.135C66.3638 20.9484 66.5378 20.703 66.6507 20.3989C66.7636 20.0947 66.82 19.7652 66.82 19.4104C66.82 19.0556 66.7636 18.7249 66.6507 18.4185C66.5378 18.112 66.3638 17.8643 66.1288 17.6754C65.8938 17.4865 65.5942 17.392 65.2302 17.392C64.8661 17.392 64.5666 17.4865 64.3316 17.6754C64.0966 17.8643 63.9226 18.112 63.8097 18.4185C63.6968 18.7249 63.6403 19.0556 63.6403 19.4104C63.6403 19.7652 63.6968 20.0947 63.8097 20.3989C63.9226 20.703 64.0966 20.9484 64.3316 21.135C64.5666 21.3217 64.8661 21.415 65.2302 21.415ZM69.6964 18.8436V22.0371H68.8808V16.7284H69.6688V17.5579H69.7379C69.8623 17.2883 70.0513 17.0717 70.3047 16.9081C70.5582 16.7422 70.8854 16.6593 71.2863 16.6593C71.6457 16.6593 71.9602 16.733 72.2298 16.8805C72.4994 17.0256 72.7091 17.2468 72.8588 17.5441C73.0086 17.839 73.0835 18.2123 73.0835 18.6639V22.0371H72.2678V18.7192C72.2678 18.3021 72.1595 17.9772 71.943 17.7445C71.7264 17.5095 71.4291 17.392 71.0513 17.392C70.7909 17.392 70.5582 17.4484 70.3531 17.5613C70.1504 17.6743 69.9902 17.839 69.8727 18.0556C69.7552 18.2722 69.6964 18.5348 69.6964 18.8436ZM82.2605 17.1708C82.1845 16.9381 82.0843 16.7296 81.9598 16.5452C81.8377 16.3586 81.6914 16.1996 81.5209 16.0683C81.3527 15.9369 81.1615 15.8367 80.9472 15.7676C80.7329 15.6985 80.4979 15.6639 80.2421 15.6639C79.8228 15.6639 79.4414 15.7722 79.0981 15.9888C78.7548 16.2054 78.4818 16.5245 78.279 16.9461C78.0762 17.3678 77.9749 17.8851 77.9749 18.498C77.9749 19.1109 78.0774 19.6281 78.2825 20.0498C78.4875 20.4715 78.7652 20.7906 79.1154 21.0072C79.4656 21.2238 79.8596 21.332 80.2974 21.332C80.703 21.332 81.0601 21.2456 81.3688 21.0728C81.6799 20.8977 81.9218 20.6512 82.0946 20.3332C82.2698 20.0129 82.3573 19.6362 82.3573 19.203L82.62 19.2583H80.491V18.498H83.1868V19.2583C83.1868 19.8413 83.0624 20.3482 82.8135 20.7791C82.567 21.2099 82.226 21.544 81.7905 21.7814C81.3573 22.0164 80.8596 22.1339 80.2974 22.1339C79.6707 22.1339 79.12 21.9864 78.6454 21.6915C78.173 21.3966 77.8044 20.9772 77.5394 20.4334C77.2767 19.8897 77.1454 19.2445 77.1454 18.498C77.1454 17.9381 77.2203 17.4346 77.37 16.9876C77.5221 16.5383 77.7364 16.1558 78.0129 15.8402C78.2894 15.5245 78.6166 15.2826 78.9944 15.1144C79.3723 14.9462 79.7882 14.8621 80.2421 14.8621C80.6154 14.8621 80.9633 14.9185 81.2859 15.0314C81.6108 15.142 81.8999 15.2999 82.1534 15.5049C82.4092 15.7077 82.6223 15.9508 82.7928 16.2342C82.9633 16.5153 83.0808 16.8275 83.1453 17.1708H82.2605ZM84.8769 22.0371V16.7284H85.6925V22.0371H84.8769ZM85.2916 15.8436C85.1326 15.8436 84.9955 15.7895 84.8803 15.6812C84.7674 15.5729 84.711 15.4427 84.711 15.2906C84.711 15.1386 84.7674 15.0084 84.8803 14.9001C84.9955 14.7918 85.1326 14.7376 85.2916 14.7376C85.4506 14.7376 85.5865 14.7918 85.6994 14.9001C85.8147 15.0084 85.8723 15.1386 85.8723 15.2906C85.8723 15.4427 85.8147 15.5729 85.6994 15.6812C85.5865 15.7895 85.4506 15.8436 85.2916 15.8436ZM89.4952 16.7284V17.4196H86.7441V16.7284H89.4952ZM87.5459 15.4565H88.3616V20.5164C88.3616 20.7468 88.395 20.9196 88.4618 21.0348C88.5309 21.1477 88.6185 21.2238 88.7245 21.2629C88.8328 21.2998 88.9468 21.3182 89.0666 21.3182C89.1565 21.3182 89.2302 21.3136 89.2878 21.3044C89.3454 21.2929 89.3915 21.2837 89.4261 21.2767L89.592 22.0095C89.5367 22.0302 89.4595 22.0509 89.3604 22.0717C89.2613 22.0947 89.1358 22.1062 88.9837 22.1062C88.7533 22.1062 88.5275 22.0567 88.3063 21.9576C88.0874 21.8585 87.9054 21.7076 87.7602 21.5049C87.6173 21.3021 87.5459 21.0463 87.5459 20.7376V15.4565ZM91.6519 18.8436V22.0371H90.8362V14.9588H91.6519V17.5579H91.721C91.8454 17.2837 92.032 17.066 92.2809 16.9047C92.532 16.7411 92.8661 16.6593 93.2832 16.6593C93.6449 16.6593 93.9617 16.7319 94.2336 16.877C94.5055 17.0199 94.7163 17.2399 94.8661 17.5372C95.0182 17.8321 95.0942 18.2077 95.0942 18.6639V22.0371H94.2786V18.7192C94.2786 18.2975 94.1691 17.9715 93.9502 17.7411C93.7336 17.5084 93.4329 17.392 93.0482 17.392C92.7809 17.392 92.5413 17.4484 92.3293 17.5613C92.1196 17.6743 91.9537 17.839 91.8316 18.0556C91.7118 18.2722 91.6519 18.5348 91.6519 18.8436ZM99.932 19.8666V16.7284H100.748V22.0371H99.932V21.1385H99.8767C99.7523 21.4081 99.5587 21.6373 99.2961 21.8263C99.0334 22.0129 98.7016 22.1062 98.3007 22.1062C97.9689 22.1062 97.674 22.0337 97.4159 21.8885C97.1579 21.741 96.9551 21.5198 96.8076 21.2249C96.6602 20.9277 96.5864 20.5533 96.5864 20.1016V16.7284H97.4021V20.0463C97.4021 20.4334 97.5104 20.7422 97.727 20.9726C97.9459 21.203 98.2247 21.3182 98.5634 21.3182C98.7661 21.3182 98.9724 21.2664 99.182 21.1627C99.394 21.059 99.5714 20.9 99.7143 20.6857C99.8594 20.4715 99.932 20.1984 99.932 19.8666ZM102.352 22.0371V14.9588H103.168V17.5717H103.237C103.297 17.4796 103.38 17.362 103.486 17.2192C103.594 17.074 103.749 16.945 103.949 16.8321C104.152 16.7169 104.426 16.6593 104.772 16.6593C105.219 16.6593 105.613 16.771 105.954 16.9945C106.295 17.218 106.561 17.5349 106.752 17.945C106.943 18.3551 107.039 18.839 107.039 19.3966C107.039 19.9588 106.943 20.4461 106.752 20.8585C106.561 21.2687 106.296 21.5867 105.957 21.8125C105.618 22.036 105.228 22.1477 104.785 22.1477C104.444 22.1477 104.171 22.0913 103.966 21.9784C103.761 21.8631 103.603 21.733 103.493 21.5878C103.382 21.4403 103.297 21.3182 103.237 21.2214H103.14V22.0371H102.352ZM103.154 19.3828C103.154 19.7837 103.213 20.1374 103.33 20.4438C103.448 20.748 103.619 20.9864 103.845 21.1592C104.071 21.3297 104.348 21.415 104.675 21.415C105.016 21.415 105.3 21.3251 105.528 21.1454C105.759 20.9634 105.932 20.7192 106.047 20.4127C106.164 20.1039 106.223 19.7606 106.223 19.3828C106.223 19.0095 106.166 18.6731 106.05 18.3736C105.937 18.0717 105.766 17.8332 105.535 17.6581C105.307 17.4807 105.02 17.392 104.675 17.392C104.343 17.392 104.064 17.4761 103.838 17.6443C103.613 17.8102 103.442 18.0429 103.327 18.3424C103.212 18.6397 103.154 18.9864 103.154 19.3828ZM111.992 14.9588V22.0371H111.134V14.9588H111.992ZM114.415 18.8436V22.0371H113.6V16.7284H114.388V17.5579H114.457C114.581 17.2883 114.77 17.0717 115.023 16.9081C115.277 16.7422 115.604 16.6593 116.005 16.6593C116.364 16.6593 116.679 16.733 116.949 16.8805C117.218 17.0256 117.428 17.2468 117.578 17.5441C117.727 17.839 117.802 18.2123 117.802 18.6639V22.0371H116.987V18.7192C116.987 18.3021 116.878 17.9772 116.662 17.7445C116.445 17.5095 116.148 17.392 115.77 17.392C115.51 17.392 115.277 17.4484 115.072 17.5613C114.869 17.6743 114.709 17.839 114.591 18.0556C114.474 18.2722 114.415 18.5348 114.415 18.8436ZM121.601 16.7284V17.4196H118.85V16.7284H121.601ZM119.652 15.4565H120.468V20.5164C120.468 20.7468 120.501 20.9196 120.568 21.0348C120.637 21.1477 120.725 21.2238 120.831 21.2629C120.939 21.2998 121.053 21.3182 121.173 21.3182C121.263 21.3182 121.336 21.3136 121.394 21.3044C121.452 21.2929 121.498 21.2837 121.532 21.2767L121.698 22.0095C121.643 22.0302 121.566 22.0509 121.467 22.0717C121.368 22.0947 121.242 22.1062 121.09 22.1062C120.86 22.1062 120.634 22.0567 120.413 21.9576C120.194 21.8585 120.012 21.7076 119.866 21.5049C119.724 21.3021 119.652 21.0463 119.652 20.7376V15.4565ZM124.997 22.1477C124.486 22.1477 124.044 22.0348 123.673 21.809C123.305 21.5809 123.02 21.2629 122.82 20.8551C122.622 20.445 122.523 19.968 122.523 19.4242C122.523 18.8805 122.622 18.4012 122.82 17.9865C123.02 17.5694 123.299 17.2445 123.656 17.0118C124.016 16.7768 124.435 16.6593 124.914 16.6593C125.191 16.6593 125.464 16.7054 125.733 16.7975C126.003 16.8897 126.248 17.0395 126.469 17.2468C126.691 17.4519 126.867 17.7238 126.998 18.0625C127.13 18.4012 127.195 18.8182 127.195 19.3136V19.6593H123.103V18.9542H126.366C126.366 18.6547 126.306 18.3874 126.186 18.1524C126.069 17.9173 125.9 17.7319 125.681 17.5959C125.465 17.46 125.209 17.392 124.914 17.392C124.589 17.392 124.308 17.4726 124.071 17.6339C123.836 17.7929 123.655 18.0003 123.528 18.256C123.402 18.5118 123.338 18.786 123.338 19.0786V19.5487C123.338 19.9496 123.407 20.2894 123.546 20.5682C123.686 20.8447 123.881 21.0556 124.13 21.2007C124.378 21.3436 124.668 21.415 124.997 21.415C125.211 21.415 125.405 21.385 125.578 21.3251C125.753 21.2629 125.904 21.1708 126.031 21.0486C126.157 20.9242 126.255 20.7698 126.324 20.5855L127.112 20.8067C127.029 21.074 126.89 21.309 126.694 21.5118C126.498 21.7122 126.256 21.8689 125.968 21.9818C125.68 22.0924 125.357 22.1477 124.997 22.1477ZM130.579 24.1385C130.185 24.1385 129.846 24.0878 129.563 23.9864C129.279 23.8873 129.043 23.756 128.854 23.5924C128.668 23.4311 128.519 23.2583 128.408 23.074L129.058 22.6177C129.132 22.7145 129.225 22.8251 129.338 22.9495C129.451 23.0763 129.605 23.1857 129.801 23.2779C129.999 23.3723 130.259 23.4196 130.579 23.4196C131.007 23.4196 131.361 23.3159 131.64 23.1085C131.919 22.9012 132.058 22.5763 132.058 22.1339V21.0556H131.989C131.929 21.1523 131.844 21.2721 131.733 21.415C131.625 21.5555 131.468 21.6811 131.263 21.7917C131.06 21.9 130.786 21.9542 130.441 21.9542C130.012 21.9542 129.627 21.8528 129.286 21.65C128.948 21.4473 128.679 21.1523 128.481 20.7652C128.285 20.3781 128.187 19.9081 128.187 19.3551C128.187 18.8113 128.283 18.3378 128.474 17.9346C128.665 17.5291 128.931 17.2157 129.272 16.9945C129.613 16.771 130.007 16.6593 130.454 16.6593C130.8 16.6593 131.074 16.7169 131.277 16.8321C131.482 16.945 131.639 17.074 131.747 17.2192C131.858 17.362 131.943 17.4796 132.003 17.5717H132.086V16.7284H132.874V22.1892C132.874 22.6454 132.77 23.0164 132.563 23.3021C132.358 23.5901 132.081 23.8009 131.733 23.9346C131.388 24.0705 131.003 24.1385 130.579 24.1385ZM130.551 21.2214C130.878 21.2214 131.155 21.1466 131.381 20.9968C131.607 20.847 131.778 20.6316 131.896 20.3505C132.013 20.0694 132.072 19.733 132.072 19.3413C132.072 18.9588 132.014 18.6212 131.899 18.3286C131.784 18.036 131.613 17.8067 131.388 17.6408C131.162 17.4749 130.883 17.392 130.551 17.392C130.206 17.392 129.918 17.4796 129.687 17.6547C129.459 17.8298 129.287 18.0648 129.172 18.3597C129.059 18.6547 129.003 18.9818 129.003 19.3413C129.003 19.7099 129.06 20.036 129.176 20.3194C129.293 20.6005 129.466 20.8217 129.694 20.983C129.925 21.142 130.21 21.2214 130.551 21.2214ZM134.367 22.0371V16.7284H135.155V17.5302H135.21C135.307 17.2676 135.482 17.0544 135.736 16.8908C135.989 16.7273 136.275 16.6455 136.593 16.6455C136.653 16.6455 136.727 16.6466 136.817 16.6489C136.907 16.6512 136.975 16.6547 137.021 16.6593V17.4888C136.994 17.4819 136.93 17.4715 136.831 17.4577C136.734 17.4415 136.632 17.4335 136.524 17.4335C136.265 17.4335 136.035 17.4876 135.832 17.5959C135.632 17.7019 135.473 17.8494 135.355 18.0383C135.24 18.2249 135.183 18.4381 135.183 18.6777V22.0371H134.367ZM139.55 22.1615C139.214 22.1615 138.909 22.0982 138.634 21.9714C138.36 21.8424 138.142 21.6569 137.981 21.415C137.82 21.1708 137.739 20.8758 137.739 20.5302C137.739 20.2261 137.799 19.9795 137.919 19.7906C138.039 19.5993 138.199 19.4496 138.399 19.3413C138.6 19.233 138.821 19.1523 139.063 19.0994C139.307 19.0441 139.553 19.0003 139.799 18.968C140.122 18.9265 140.383 18.8954 140.584 18.8747C140.786 18.8517 140.934 18.8136 141.026 18.7606C141.121 18.7076 141.168 18.6155 141.168 18.4841V18.4565C141.168 18.1155 141.074 17.8505 140.888 17.6616C140.703 17.4726 140.424 17.3782 140.048 17.3782C139.659 17.3782 139.353 17.4634 139.132 17.6339C138.911 17.8044 138.755 17.9865 138.665 18.18L137.891 17.9035C138.03 17.5809 138.214 17.3298 138.444 17.1501C138.677 16.968 138.93 16.8413 139.205 16.7699C139.481 16.6961 139.753 16.6593 140.02 16.6593C140.191 16.6593 140.387 16.68 140.608 16.7215C140.831 16.7607 141.047 16.8425 141.254 16.9669C141.464 17.0913 141.638 17.2791 141.776 17.5302C141.914 17.7814 141.983 18.1178 141.983 18.5394V22.0371H141.168V21.3182H141.126C141.071 21.4334 140.979 21.5567 140.85 21.688C140.721 21.8194 140.549 21.9311 140.335 22.0233C140.121 22.1154 139.859 22.1615 139.55 22.1615ZM139.675 21.4288C139.997 21.4288 140.269 21.3655 140.49 21.2387C140.714 21.112 140.882 20.9484 140.995 20.748C141.11 20.5475 141.168 20.3367 141.168 20.1155V19.3689C141.133 19.4104 141.057 19.4484 140.94 19.483C140.824 19.5152 140.691 19.544 140.539 19.5694C140.389 19.5924 140.243 19.6132 140.1 19.6316C139.959 19.6477 139.845 19.6616 139.758 19.6731C139.546 19.7007 139.348 19.7457 139.163 19.8079C138.981 19.8678 138.834 19.9588 138.721 20.0809C138.61 20.2007 138.555 20.3643 138.555 20.5717C138.555 20.8551 138.66 21.0694 138.869 21.2145C139.081 21.3574 139.35 21.4288 139.675 21.4288ZM145.781 16.7284V17.4196H143.03V16.7284H145.781ZM143.832 15.4565H144.647V20.5164C144.647 20.7468 144.681 20.9196 144.748 21.0348C144.817 21.1477 144.904 21.2238 145.01 21.2629C145.118 21.2998 145.233 21.3182 145.352 21.3182C145.442 21.3182 145.516 21.3136 145.574 21.3044C145.631 21.2929 145.677 21.2837 145.712 21.2767L145.878 22.0095C145.822 22.0302 145.745 22.0509 145.646 22.0717C145.547 22.0947 145.421 22.1062 145.269 22.1062C145.039 22.1062 144.813 22.0567 144.592 21.9576C144.373 21.8585 144.191 21.7076 144.046 21.5049C143.903 21.3021 143.832 21.0463 143.832 20.7376V15.4565ZM147.008 22.0371V16.7284H147.824V22.0371H147.008ZM147.423 15.8436C147.264 15.8436 147.127 15.7895 147.011 15.6812C146.898 15.5729 146.842 15.4427 146.842 15.2906C146.842 15.1386 146.898 15.0084 147.011 14.9001C147.127 14.7918 147.264 14.7376 147.423 14.7376C147.582 14.7376 147.718 14.7918 147.83 14.9001C147.946 15.0084 148.003 15.1386 148.003 15.2906C148.003 15.4427 147.946 15.5729 147.83 15.6812C147.718 15.7895 147.582 15.8436 147.423 15.8436ZM151.474 22.1477C150.995 22.1477 150.574 22.0337 150.213 21.8055C149.853 21.5774 149.572 21.2583 149.369 20.8482C149.169 20.438 149.069 19.9588 149.069 19.4104C149.069 18.8574 149.169 18.3747 149.369 17.9623C149.572 17.5498 149.853 17.2296 150.213 17.0014C150.574 16.7733 150.995 16.6593 151.474 16.6593C151.953 16.6593 152.373 16.7733 152.732 17.0014C153.094 17.2296 153.375 17.5498 153.575 17.9623C153.778 18.3747 153.88 18.8574 153.88 19.4104C153.88 19.9588 153.778 20.438 153.575 20.8482C153.375 21.2583 153.094 21.5774 152.732 21.8055C152.373 22.0337 151.953 22.1477 151.474 22.1477ZM151.474 21.415C151.838 21.415 152.138 21.3217 152.373 21.135C152.608 20.9484 152.782 20.703 152.895 20.3989C153.008 20.0947 153.064 19.7652 153.064 19.4104C153.064 19.0556 153.008 18.7249 152.895 18.4185C152.782 18.112 152.608 17.8643 152.373 17.6754C152.138 17.4865 151.838 17.392 151.474 17.392C151.11 17.392 150.811 17.4865 150.576 17.6754C150.34 17.8643 150.167 18.112 150.054 18.4185C149.941 18.7249 149.884 19.0556 149.884 19.4104C149.884 19.7652 149.941 20.0947 150.054 20.3989C150.167 20.703 150.34 20.9484 150.576 21.135C150.811 21.3217 151.11 21.415 151.474 21.415ZM155.94 18.8436V22.0371H155.125V16.7284H155.913V17.5579H155.982C156.106 17.2883 156.295 17.0717 156.549 16.9081C156.802 16.7422 157.129 16.6593 157.53 16.6593C157.89 16.6593 158.204 16.733 158.474 16.8805C158.743 17.0256 158.953 17.2468 159.103 17.5441C159.253 17.839 159.327 18.2123 159.327 18.6639V22.0371H158.512V18.7192C158.512 18.3021 158.403 17.9772 158.187 17.7445C157.97 17.5095 157.673 17.392 157.295 17.392C157.035 17.392 156.802 17.4484 156.597 17.5613C156.394 17.6743 156.234 17.839 156.117 18.0556C155.999 18.2722 155.94 18.5348 155.94 18.8436ZM168.311 14.9588H169.168V19.6454C169.168 20.1293 169.054 20.5613 168.826 20.9415C168.6 21.3194 168.281 21.6178 167.869 21.8367C167.456 22.0532 166.972 22.1615 166.417 22.1615C165.862 22.1615 165.378 22.0532 164.965 21.8367C164.553 21.6178 164.233 21.3194 164.005 20.9415C163.779 20.5613 163.666 20.1293 163.666 19.6454V14.9588H164.523V19.5763C164.523 19.9219 164.599 20.2295 164.751 20.4991C164.903 20.7664 165.12 20.9772 165.401 21.1316C165.684 21.2837 166.023 21.3597 166.417 21.3597C166.811 21.3597 167.15 21.2837 167.433 21.1316C167.716 20.9772 167.933 20.7664 168.083 20.4991C168.235 20.2295 168.311 19.9219 168.311 19.5763V14.9588ZM171.737 14.9588V22.0371H170.88V14.9588H171.737Z" fill="#858E96"/>
-<circle cx="111.106" cy="68.4444" r="4.96388" fill="white"/>
-<circle cx="111.106" cy="68.4443" r="4.51262" fill="#F7AE59"/>
-<circle cx="103.435" cy="68.4444" r="4.96388" fill="white"/>
-<circle cx="103.434" cy="68.4443" r="4.51262" fill="#8CC1FF"/>
-<circle cx="95.3115" cy="68.4444" r="4.96388" fill="white"/>
-<circle cx="95.3117" cy="68.4443" r="4.51262" fill="#2C435F"/>
-<rect x="59.238" y="60.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" strokeWidth="0.347594"/>
-<circle cx="70.8824" cy="68.3478" r="4.86631" stroke="#FCBE1D" strokeWidth="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
-<path d="M73.2007 65.3557C72.5321 64.8376 71.7093 64.5583 70.8634 64.5625C70.0176 64.5668 69.1975 64.8542 68.5341 65.379L70.8823 68.3474L73.2007 65.3557Z" fill="#FCBE1D"/>
-<path d="M68.5576 71.3396C69.2262 71.8578 70.049 72.137 70.8949 72.1328C71.7407 72.1285 72.5608 71.8411 73.2242 71.3163L70.876 68.3479L68.5576 71.3396Z" fill="#FCBE1D"/>
-<rect x="36.8181" y="60.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
-<rect x="40.9893" y="64.1758" width="7.64706" height="7.64706" rx="3.47594" fill="#FFEDD5"/>
-<path d="M46.9636 70.5492C46.8521 70.5492 46.7579 70.5107 46.6809 70.4337C46.6039 70.3567 46.5654 70.2624 46.5654 70.1509V65.8495C46.5654 65.7379 46.6039 65.6437 46.6809 65.5667C46.7579 65.4897 46.8521 65.4512 46.9636 65.4512C47.0752 65.4512 47.1694 65.4897 47.2464 65.5667C47.3234 65.6437 47.3619 65.7379 47.3619 65.8495V70.1509C47.3619 70.2624 47.3234 70.3567 47.2464 70.4337C47.1694 70.5107 47.0752 70.5492 46.9636 70.5492ZM42.9888 70.5492C42.9304 70.5492 42.8759 70.5386 42.8255 70.5173C42.775 70.4961 42.7325 70.4682 42.698 70.4337C42.6635 70.3992 42.6356 70.3567 42.6144 70.3063C42.5931 70.2558 42.5825 70.204 42.5825 70.1509V69.0357C42.5825 68.9242 42.621 68.83 42.698 68.7529C42.775 68.6759 42.8693 68.6374 42.9808 68.6374C43.0923 68.6374 43.1866 68.6759 43.2636 68.7529C43.3406 68.83 43.3791 68.9242 43.3791 69.0357V70.1509C43.3791 70.204 43.3685 70.2558 43.3472 70.3063C43.326 70.3567 43.2981 70.3992 43.2636 70.4337C43.2291 70.4682 43.1879 70.4961 43.1401 70.5173C43.0923 70.5386 43.0419 70.5492 42.9888 70.5492ZM44.9722 70.5492C44.8607 70.5492 44.7664 70.5107 44.6894 70.4337C44.6124 70.3567 44.5739 70.2624 44.5739 70.1509V67.4426C44.5739 67.3311 44.6124 67.2368 44.6894 67.1598C44.7664 67.0828 44.8607 67.0443 44.9722 67.0443C45.0837 67.0443 45.178 67.0828 45.255 67.1598C45.332 67.2368 45.3705 67.3311 45.3705 67.4426V70.1509C45.3705 70.2624 45.332 70.3567 45.255 70.4337C45.178 70.5107 45.0837 70.5492 44.9722 70.5492Z" fill="#FF6B00"/>
-</g>
-<rect x="36" y="31" width="237" height="5" rx="2.5" fill="#EBEBEB"/>
-<rect x="36" y="42" width="237" height="5" rx="2.5" fill="#E2E2E2"/>
-<g filter="url(#filter1_d_1295_41552)">
-<rect x="3" y="27" width="260" height="84.1176" rx="5.5615" fill="white"/>
-<path d="M19.6253 38.9588H20.4824V43.6454C20.4824 44.1293 20.3684 44.5613 20.1403 44.9415C19.9145 45.3194 19.5953 45.6178 19.1829 45.8367C18.7705 46.0532 18.2866 46.1615 17.7313 46.1615C17.176 46.1615 16.6921 46.0532 16.2797 45.8367C15.8673 45.6178 15.547 45.3194 15.3189 44.9415C15.0931 44.5613 14.9802 44.1293 14.9802 43.6454V38.9588H15.8373V43.5763C15.8373 43.9219 15.9134 44.2295 16.0654 44.4991C16.2175 44.7664 16.4341 44.9772 16.7152 45.1316C16.9986 45.2837 17.3373 45.3597 17.7313 45.3597C18.1253 45.3597 18.464 45.2837 18.7474 45.1316C19.0308 44.9772 19.2474 44.7664 19.3972 44.4991C19.5493 44.2295 19.6253 43.9219 19.6253 43.5763V38.9588ZM22.0835 48.0279V40.7284H22.8715V41.5717H22.9683C23.0282 41.4796 23.1111 41.362 23.2171 41.2192C23.3254 41.074 23.4798 40.945 23.6803 40.8321C23.883 40.7169 24.1572 40.6593 24.5028 40.6593C24.9498 40.6593 25.3438 40.771 25.6849 40.9945C26.0259 41.218 26.292 41.5349 26.4832 41.945C26.6745 42.3551 26.7701 42.839 26.7701 43.3966C26.7701 43.9588 26.6745 44.4461 26.4832 44.8585C26.292 45.2687 26.027 45.5867 25.6883 45.8125C25.3496 46.036 24.9591 46.1477 24.5167 46.1477C24.1757 46.1477 23.9026 46.0913 23.6975 45.9784C23.4925 45.8631 23.3346 45.733 23.224 45.5878C23.1135 45.4403 23.0282 45.3182 22.9683 45.2214H22.8992V48.0279H22.0835ZM22.8853 43.3828C22.8853 43.7837 22.9441 44.1374 23.0616 44.4438C23.1791 44.748 23.3508 44.9864 23.5766 45.1592C23.8024 45.3297 24.0789 45.415 24.4061 45.415C24.7471 45.415 25.0316 45.3251 25.2597 45.1454C25.4902 44.9634 25.663 44.7192 25.7782 44.4127C25.8957 44.1039 25.9544 43.7606 25.9544 43.3828C25.9544 43.0095 25.8968 42.6731 25.7816 42.3736C25.6687 42.0717 25.4971 41.8332 25.2667 41.6581C25.0385 41.4807 24.7517 41.392 24.4061 41.392C24.0743 41.392 23.7955 41.4761 23.5697 41.6443C23.3439 41.8102 23.1734 42.0429 23.0582 42.3424C22.9429 42.6397 22.8853 42.9864 22.8853 43.3828ZM30.0189 46.1477C29.5765 46.1477 29.186 46.036 28.8473 45.8125C28.5086 45.5867 28.2436 45.2687 28.0523 44.8585C27.8611 44.4461 27.7655 43.9588 27.7655 43.3966C27.7655 42.839 27.8611 42.3551 28.0523 41.945C28.2436 41.5349 28.5097 41.218 28.8507 40.9945C29.1917 40.771 29.5857 40.6593 30.0327 40.6593C30.3784 40.6593 30.6514 40.7169 30.8519 40.8321C31.0546 40.945 31.209 41.074 31.315 41.2192C31.4233 41.362 31.5074 41.4796 31.5673 41.5717H31.6364V38.9588H32.4521V46.0371H31.6641V45.2214H31.5673C31.5074 45.3182 31.4221 45.4403 31.3115 45.5878C31.2009 45.733 31.0431 45.8631 30.838 45.9784C30.633 46.0913 30.3599 46.1477 30.0189 46.1477ZM30.1295 45.415C30.4567 45.415 30.7332 45.3297 30.959 45.1592C31.1848 44.9864 31.3565 44.748 31.474 44.4438C31.5915 44.1374 31.6502 43.7837 31.6502 43.3828C31.6502 42.9864 31.5926 42.6397 31.4774 42.3424C31.3622 42.0429 31.1917 41.8102 30.9659 41.6443C30.7401 41.4761 30.4613 41.392 30.1295 41.392C29.7839 41.392 29.4959 41.4807 29.2655 41.6581C29.0374 41.8332 28.8657 42.0717 28.7505 42.3736C28.6376 42.6731 28.5811 43.0095 28.5811 43.3828C28.5811 43.7606 28.6387 44.1039 28.7539 44.4127C28.8715 44.7192 29.0443 44.9634 29.2724 45.1454C29.5028 45.3251 29.7885 45.415 30.1295 45.415ZM35.6214 46.1615C35.285 46.1615 34.9797 46.0982 34.7055 45.9714C34.4313 45.8424 34.2136 45.6569 34.0523 45.415C33.891 45.1708 33.8103 44.8758 33.8103 44.5302C33.8103 44.2261 33.8703 43.9795 33.9901 43.7906C34.1099 43.5993 34.27 43.4496 34.4705 43.3413C34.6709 43.233 34.8921 43.1523 35.1341 43.0994C35.3783 43.0441 35.6237 43.0003 35.8702 42.968C36.1928 42.9265 36.4543 42.8954 36.6548 42.8747C36.8576 42.8517 37.005 42.8136 37.0972 42.7606C37.1916 42.7076 37.2389 42.6155 37.2389 42.4841V42.4565C37.2389 42.1155 37.1456 41.8505 36.9589 41.6616C36.7746 41.4726 36.4947 41.3782 36.1191 41.3782C35.7297 41.3782 35.4244 41.4634 35.2032 41.6339C34.982 41.8044 34.8265 41.9865 34.7366 42.18L33.9624 41.9035C34.1007 41.5809 34.285 41.3298 34.5154 41.1501C34.7481 40.968 35.0016 40.8413 35.2758 40.7699C35.5523 40.6961 35.8242 40.6593 36.0914 40.6593C36.2619 40.6593 36.4578 40.68 36.679 40.7215C36.9025 40.7607 37.1179 40.8425 37.3253 40.9669C37.535 41.0913 37.7089 41.2791 37.8472 41.5302C37.9854 41.7814 38.0545 42.1178 38.0545 42.5394V46.0371H37.2389V45.3182H37.1974C37.1421 45.4334 37.0499 45.5567 36.9209 45.688C36.7919 45.8194 36.6202 45.9311 36.4059 46.0233C36.1917 46.1154 35.9301 46.1615 35.6214 46.1615ZM35.7458 45.4288C36.0684 45.4288 36.3403 45.3655 36.5615 45.2387C36.785 45.112 36.9532 44.9484 37.0661 44.748C37.1813 44.5475 37.2389 44.3367 37.2389 44.1155V43.3689C37.2043 43.4104 37.1283 43.4484 37.0108 43.483C36.8956 43.5152 36.7619 43.544 36.6099 43.5694C36.4601 43.5924 36.3138 43.6132 36.1709 43.6316C36.0304 43.6477 35.9163 43.6616 35.8288 43.6731C35.6168 43.7007 35.4186 43.7457 35.2343 43.8079C35.0523 43.8678 34.9048 43.9588 34.7919 44.0809C34.6813 44.2007 34.626 44.3643 34.626 44.5717C34.626 44.8551 34.7308 45.0694 34.9405 45.2145C35.1525 45.3574 35.4209 45.4288 35.7458 45.4288ZM41.852 40.7284V41.4196H39.1009V40.7284H41.852ZM39.9027 39.4565H40.7184V44.5164C40.7184 44.7468 40.7518 44.9196 40.8186 45.0348C40.8878 45.1477 40.9753 45.2238 41.0813 45.2629C41.1896 45.2998 41.3036 45.3182 41.4235 45.3182C41.5133 45.3182 41.5871 45.3136 41.6447 45.3044C41.7023 45.2929 41.7483 45.2837 41.7829 45.2767L41.9488 46.0095C41.8935 46.0302 41.8163 46.0509 41.7172 46.0717C41.6182 46.0947 41.4926 46.1062 41.3405 46.1062C41.1101 46.1062 40.8843 46.0567 40.6631 45.9576C40.4442 45.8585 40.2622 45.7076 40.117 45.5049C39.9742 45.3021 39.9027 45.0463 39.9027 44.7376V39.4565ZM45.2477 46.1477C44.7362 46.1477 44.295 46.0348 43.924 45.809C43.5554 45.5809 43.2708 45.2629 43.0703 44.8551C42.8722 44.445 42.7731 43.968 42.7731 43.4242C42.7731 42.8805 42.8722 42.4012 43.0703 41.9865C43.2708 41.5694 43.5496 41.2445 43.9067 41.0118C44.2662 40.7768 44.6855 40.6593 45.1648 40.6593C45.4413 40.6593 45.7143 40.7054 45.9839 40.7975C46.2535 40.8897 46.4989 41.0395 46.7201 41.2468C46.9413 41.4519 47.1175 41.7238 47.2489 42.0625C47.3802 42.4012 47.4459 42.8182 47.4459 43.3136V43.6593H43.3537V42.9542H46.6164C46.6164 42.6547 46.5565 42.3874 46.4367 42.1524C46.3191 41.9173 46.1509 41.7319 45.9321 41.5959C45.7155 41.46 45.4597 41.392 45.1648 41.392C44.8399 41.392 44.5588 41.4726 44.3215 41.6339C44.0865 41.7929 43.9056 42.0003 43.7789 42.256C43.6521 42.5118 43.5888 42.786 43.5888 43.0786V43.5487C43.5888 43.9496 43.6579 44.2894 43.7961 44.5682C43.9367 44.8447 44.1314 45.0556 44.3802 45.2007C44.6291 45.3436 44.9182 45.415 45.2477 45.415C45.462 45.415 45.6556 45.385 45.8284 45.3251C46.0035 45.2629 46.1544 45.1708 46.2811 45.0486C46.4079 44.9242 46.5058 44.7698 46.5749 44.5855L47.3629 44.8067C47.28 45.074 47.1406 45.309 46.9447 45.5118C46.7489 45.7122 46.5069 45.8689 46.2189 45.9818C45.9309 46.0924 45.6072 46.1477 45.2477 46.1477ZM53.7327 40.7284V41.4196H50.9815V40.7284H53.7327ZM51.7834 39.4565H52.599V44.5164C52.599 44.7468 52.6324 44.9196 52.6993 45.0348C52.7684 45.1477 52.8559 45.2238 52.9619 45.2629C53.0702 45.2998 53.1843 45.3182 53.3041 45.3182C53.394 45.3182 53.4677 45.3136 53.5253 45.3044C53.5829 45.2929 53.629 45.2837 53.6635 45.2767L53.8294 46.0095C53.7741 46.0302 53.697 46.0509 53.5979 46.0717C53.4988 46.0947 53.3732 46.1062 53.2212 46.1062C52.9907 46.1062 52.7649 46.0567 52.5437 45.9576C52.3248 45.8585 52.1428 45.7076 51.9977 45.5049C51.8548 45.3021 51.7834 45.0463 51.7834 44.7376V39.4565ZM55.8893 42.8436V46.0371H55.0737V38.9588H55.8893V41.5579H55.9585C56.0829 41.2837 56.2695 41.066 56.5184 40.9047C56.7695 40.7411 57.1036 40.6593 57.5206 40.6593C57.8824 40.6593 58.1992 40.7319 58.4711 40.877C58.743 41.0199 58.9538 41.2399 59.1036 41.5372C59.2557 41.8321 59.3317 42.2077 59.3317 42.6639V46.0371H58.516V42.7192C58.516 42.2975 58.4066 41.9715 58.1877 41.7411C57.9711 41.5084 57.6704 41.392 57.2856 41.392C57.0184 41.392 56.7787 41.4484 56.5667 41.5613C56.3571 41.6743 56.1912 41.839 56.0691 42.0556C55.9492 42.2722 55.8893 42.5348 55.8893 42.8436ZM63.0497 46.1477C62.5382 46.1477 62.0969 46.0348 61.726 45.809C61.3573 45.5809 61.0727 45.2629 60.8723 44.8551C60.6741 44.445 60.5751 43.968 60.5751 43.4242C60.5751 42.8805 60.6741 42.4012 60.8723 41.9865C61.0727 41.5694 61.3515 41.2445 61.7087 41.0118C62.0681 40.7768 62.4875 40.6593 62.9667 40.6593C63.2432 40.6593 63.5163 40.7054 63.7858 40.7975C64.0554 40.8897 64.3008 41.0395 64.522 41.2468C64.7432 41.4519 64.9195 41.7238 65.0508 42.0625C65.1821 42.4012 65.2478 42.8182 65.2478 43.3136V43.6593H61.1557V42.9542H64.4183C64.4183 42.6547 64.3584 42.3874 64.2386 42.1524C64.1211 41.9173 63.9529 41.7319 63.734 41.5959C63.5174 41.46 63.2617 41.392 62.9667 41.392C62.6419 41.392 62.3607 41.4726 62.1234 41.6339C61.8884 41.7929 61.7075 42.0003 61.5808 42.256C61.4541 42.5118 61.3907 42.786 61.3907 43.0786V43.5487C61.3907 43.9496 61.4598 44.2894 61.5981 44.5682C61.7386 44.8447 61.9333 45.0556 62.1822 45.2007C62.431 45.3436 62.7202 45.415 63.0497 45.415C63.264 45.415 63.4575 45.385 63.6303 45.3251C63.8054 45.2629 63.9564 45.1708 64.0831 45.0486C64.2098 44.9242 64.3077 44.7698 64.3769 44.5855L65.1649 44.8067C65.0819 45.074 64.9425 45.309 64.7467 45.5118C64.5508 45.7122 64.3089 45.8689 64.0209 45.9818C63.7329 46.0924 63.4091 46.1477 63.0497 46.1477ZM71.2305 46.1477C70.7881 46.1477 70.3975 46.036 70.0588 45.8125C69.7201 45.5867 69.4551 45.2687 69.2639 44.8585C69.0727 44.4461 68.977 43.9588 68.977 43.3966C68.977 42.839 69.0727 42.3551 69.2639 41.945C69.4551 41.5349 69.7213 41.218 70.0623 40.9945C70.4033 40.771 70.7973 40.6593 71.2443 40.6593C71.5899 40.6593 71.863 40.7169 72.0634 40.8321C72.2662 40.945 72.4206 41.074 72.5265 41.2192C72.6348 41.362 72.7189 41.4796 72.7788 41.5717H72.848V38.9588H73.6636V46.0371H72.8756V45.2214H72.7788C72.7189 45.3182 72.6337 45.4403 72.5231 45.5878C72.4125 45.733 72.2547 45.8631 72.0496 45.9784C71.8445 46.0913 71.5715 46.1477 71.2305 46.1477ZM71.3411 45.415C71.6683 45.415 71.9448 45.3297 72.1706 45.1592C72.3964 44.9864 72.568 44.748 72.6855 44.4438C72.803 44.1374 72.8618 43.7837 72.8618 43.3828C72.8618 42.9864 72.8042 42.6397 72.689 42.3424C72.5738 42.0429 72.4033 41.8102 72.1775 41.6443C71.9517 41.4761 71.6729 41.392 71.3411 41.392C70.9955 41.392 70.7074 41.4807 70.477 41.6581C70.2489 41.8332 70.0773 42.0717 69.9621 42.3736C69.8492 42.6731 69.7927 43.0095 69.7927 43.3828C69.7927 43.7606 69.8503 44.1039 69.9655 44.4127C70.083 44.7192 70.2558 44.9634 70.4839 45.1454C70.7144 45.3251 71.0001 45.415 71.3411 45.415ZM77.4965 46.1477C76.985 46.1477 76.5438 46.0348 76.1728 45.809C75.8042 45.5809 75.5196 45.2629 75.3191 44.8551C75.121 44.445 75.0219 43.968 75.0219 43.4242C75.0219 42.8805 75.121 42.4012 75.3191 41.9865C75.5196 41.5694 75.7984 41.2445 76.1555 41.0118C76.515 40.7768 76.9343 40.6593 77.4136 40.6593C77.6901 40.6593 77.9631 40.7054 78.2327 40.7975C78.5023 40.8897 78.7477 41.0395 78.9689 41.2468C79.1901 41.4519 79.3663 41.7238 79.4977 42.0625C79.629 42.4012 79.6947 42.8182 79.6947 43.3136V43.6593H75.6025V42.9542H78.8652C78.8652 42.6547 78.8053 42.3874 78.6855 42.1524C78.568 41.9173 78.3998 41.7319 78.1809 41.5959C77.9643 41.46 77.7085 41.392 77.4136 41.392C77.0887 41.392 76.8076 41.4726 76.5703 41.6339C76.3353 41.7929 76.1544 42.0003 76.0277 42.256C75.9009 42.5118 75.8376 42.786 75.8376 43.0786V43.5487C75.8376 43.9496 75.9067 44.2894 76.0449 44.5682C76.1855 44.8447 76.3802 45.0556 76.629 45.2007C76.8779 45.3436 77.1671 45.415 77.4965 45.415C77.7108 45.415 77.9044 45.385 78.0772 45.3251C78.2523 45.2629 78.4032 45.1708 78.5299 45.0486C78.6567 44.9242 78.7546 44.7698 78.8237 44.5855L79.6117 44.8067C79.5288 45.074 79.3894 45.309 79.1935 45.5118C78.9977 45.7122 78.7557 45.8689 78.4677 45.9818C78.1797 46.0924 77.856 46.1477 77.4965 46.1477ZM84.6958 41.9173L83.9631 42.1247C83.917 42.0026 83.849 41.8839 83.7592 41.7687C83.6716 41.6512 83.5518 41.5544 83.3997 41.4784C83.2476 41.4024 83.0529 41.3643 82.8156 41.3643C82.4907 41.3643 82.22 41.4392 82.0034 41.589C81.7891 41.7365 81.682 41.9242 81.682 42.1524C81.682 42.3551 81.7557 42.5153 81.9032 42.6328C82.0506 42.7503 82.2811 42.8482 82.5944 42.9265L83.3824 43.1201C83.8571 43.2353 84.2108 43.4116 84.4435 43.6489C84.6762 43.8839 84.7926 44.1869 84.7926 44.5579C84.7926 44.862 84.705 45.1339 84.5299 45.3735C84.3571 45.6132 84.1151 45.8021 83.8041 45.9403C83.493 46.0786 83.1313 46.1477 82.7188 46.1477C82.1774 46.1477 81.7292 46.0302 81.3744 45.7952C81.0195 45.5602 80.7949 45.2168 80.7004 44.7652L81.4746 44.5717C81.5483 44.8574 81.6877 45.0717 81.8928 45.2145C82.1002 45.3574 82.3709 45.4288 82.705 45.4288C83.0852 45.4288 83.387 45.3482 83.6105 45.1869C83.8363 45.0233 83.9492 44.8274 83.9492 44.5993C83.9492 44.415 83.8847 44.2606 83.7557 44.1362C83.6267 44.0095 83.4285 43.915 83.1612 43.8528L82.2764 43.6454C81.7903 43.5302 81.4331 43.3517 81.205 43.1097C80.9792 42.8655 80.8663 42.5602 80.8663 42.1938C80.8663 41.8943 80.9504 41.6293 81.1186 41.3989C81.2891 41.1685 81.5207 40.9876 81.8133 40.8563C82.1082 40.725 82.4423 40.6593 82.8156 40.6593C83.341 40.6593 83.7534 40.7745 84.0529 41.0049C84.3548 41.2353 84.5691 41.5395 84.6958 41.9173ZM86.0204 46.0371V40.7284H86.836V46.0371H86.0204ZM86.4351 39.8436C86.2761 39.8436 86.139 39.7895 86.0238 39.6812C85.9109 39.5729 85.8545 39.4427 85.8545 39.2906C85.8545 39.1386 85.9109 39.0084 86.0238 38.9001C86.139 38.7918 86.2761 38.7376 86.4351 38.7376C86.5941 38.7376 86.73 38.7918 86.8429 38.9001C86.9581 39.0084 87.0157 39.1386 87.0157 39.2906C87.0157 39.4427 86.9581 39.5729 86.8429 39.6812C86.73 39.7895 86.5941 39.8436 86.4351 39.8436ZM90.4728 48.1385C90.0788 48.1385 89.7401 48.0878 89.4567 47.9864C89.1733 47.8873 88.9371 47.756 88.7482 47.5924C88.5615 47.4311 88.4129 47.2583 88.3023 47.074L88.9521 46.6177C89.0258 46.7145 89.1191 46.8251 89.232 46.9495C89.3449 47.0763 89.4993 47.1857 89.6951 47.2779C89.8933 47.3723 90.1525 47.4196 90.4728 47.4196C90.9014 47.4196 91.255 47.3159 91.5338 47.1085C91.8126 46.9012 91.952 46.5763 91.952 46.1339V45.0556H91.8829C91.823 45.1523 91.7378 45.2721 91.6272 45.415C91.5189 45.5555 91.3622 45.6811 91.1571 45.7917C90.9544 45.9 90.6802 45.9542 90.3345 45.9542C89.906 45.9542 89.5212 45.8528 89.1802 45.65C88.8415 45.4473 88.573 45.1523 88.3749 44.7652C88.179 44.3781 88.0811 43.9081 88.0811 43.3551C88.0811 42.8113 88.1767 42.3378 88.368 41.9346C88.5592 41.5291 88.8253 41.2157 89.1664 40.9945C89.5074 40.771 89.9014 40.6593 90.3484 40.6593C90.694 40.6593 90.9682 40.7169 91.1709 40.8321C91.376 40.945 91.5327 41.074 91.641 41.2192C91.7516 41.362 91.8368 41.4796 91.8967 41.5717H91.9797V40.7284H92.7677V46.1892C92.7677 46.6454 92.664 47.0164 92.4566 47.3021C92.2516 47.5901 91.9751 47.8009 91.6272 47.9346C91.2815 48.0705 90.8968 48.1385 90.4728 48.1385ZM90.4451 45.2214C90.7723 45.2214 91.0488 45.1466 91.2746 44.9968C91.5004 44.847 91.6721 44.6316 91.7896 44.3505C91.9071 44.0694 91.9659 43.733 91.9659 43.3413C91.9659 42.9588 91.9083 42.6212 91.7931 42.3286C91.6778 42.036 91.5073 41.8067 91.2815 41.6408C91.0557 41.4749 90.7769 41.392 90.4451 41.392C90.0995 41.392 89.8115 41.4796 89.5811 41.6547C89.353 41.8298 89.1813 42.0648 89.0661 42.3597C88.9532 42.6547 88.8968 42.9818 88.8968 43.3413C88.8968 43.7099 88.9544 44.036 89.0696 44.3194C89.1871 44.6005 89.3599 44.8217 89.588 44.983C89.8184 45.142 90.1041 45.2214 90.4451 45.2214ZM95.0764 42.8436V46.0371H94.2608V40.7284H95.0488V41.5579H95.1179C95.2423 41.2883 95.4313 41.0717 95.6847 40.9081C95.9382 40.7422 96.2654 40.6593 96.6663 40.6593C97.0257 40.6593 97.3402 40.733 97.6098 40.8805C97.8794 41.0256 98.0891 41.2468 98.2388 41.5441C98.3886 41.839 98.4635 42.2123 98.4635 42.6639V46.0371H97.6478V42.7192C97.6478 42.3021 97.5395 41.9772 97.323 41.7445C97.1064 41.5095 96.8091 41.392 96.4313 41.392C96.1709 41.392 95.9382 41.4484 95.7331 41.5613C95.5303 41.6743 95.3702 41.839 95.2527 42.0556C95.1352 42.2722 95.0764 42.5348 95.0764 42.8436ZM103.714 41.9173L102.982 42.1247C102.936 42.0026 102.868 41.8839 102.778 41.7687C102.69 41.6512 102.57 41.5544 102.418 41.4784C102.266 41.4024 102.071 41.3643 101.834 41.3643C101.509 41.3643 101.239 41.4392 101.022 41.589C100.808 41.7365 100.701 41.9242 100.701 42.1524C100.701 42.3551 100.774 42.5153 100.922 42.6328C101.069 42.7503 101.3 42.8482 101.613 42.9265L102.401 43.1201C102.876 43.2353 103.229 43.4116 103.462 43.6489C103.695 43.8839 103.811 44.1869 103.811 44.5579C103.811 44.862 103.724 45.1339 103.548 45.3735C103.376 45.6132 103.134 45.8021 102.823 45.9403C102.512 46.0786 102.15 46.1477 101.737 46.1477C101.196 46.1477 100.748 46.0302 100.393 45.7952C100.038 45.5602 99.8134 45.2168 99.719 44.7652L100.493 44.5717C100.567 44.8574 100.706 45.0717 100.911 45.2145C101.119 45.3574 101.389 45.4288 101.724 45.4288C102.104 45.4288 102.406 45.3482 102.629 45.1869C102.855 45.0233 102.968 44.8274 102.968 44.5993C102.968 44.415 102.903 44.2606 102.774 44.1362C102.645 44.0095 102.447 43.915 102.18 43.8528L101.295 43.6454C100.809 43.5302 100.452 43.3517 100.224 43.1097C99.9978 42.8655 99.8848 42.5602 99.8848 42.1938C99.8848 41.8943 99.9689 41.6293 100.137 41.3989C100.308 41.1685 100.539 40.9876 100.832 40.8563C101.127 40.725 101.461 40.6593 101.834 40.6593C102.359 40.6593 102.772 40.7745 103.071 41.0049C103.373 41.2353 103.588 41.5395 103.714 41.9173ZM109.933 46.1477C109.454 46.1477 109.033 46.0337 108.671 45.8055C108.312 45.5774 108.031 45.2583 107.828 44.8482C107.628 44.438 107.527 43.9588 107.527 43.4104C107.527 42.8574 107.628 42.3747 107.828 41.9623C108.031 41.5498 108.312 41.2296 108.671 41.0014C109.033 40.7733 109.454 40.6593 109.933 40.6593C110.412 40.6593 110.831 40.7733 111.191 41.0014C111.553 41.2296 111.834 41.5498 112.034 41.9623C112.237 42.3747 112.338 42.8574 112.338 43.4104C112.338 43.9588 112.237 44.438 112.034 44.8482C111.834 45.2583 111.553 45.5774 111.191 45.8055C110.831 46.0337 110.412 46.1477 109.933 46.1477ZM109.933 45.415C110.297 45.415 110.596 45.3217 110.831 45.135C111.066 44.9484 111.24 44.703 111.353 44.3989C111.466 44.0947 111.523 43.7652 111.523 43.4104C111.523 43.0556 111.466 42.7249 111.353 42.4185C111.24 42.112 111.066 41.8643 110.831 41.6754C110.596 41.4865 110.297 41.392 109.933 41.392C109.569 41.392 109.269 41.4865 109.034 41.6754C108.799 41.8643 108.625 42.112 108.512 42.4185C108.399 42.7249 108.343 43.0556 108.343 43.4104C108.343 43.7652 108.399 44.0947 108.512 44.3989C108.625 44.703 108.799 44.9484 109.034 45.135C109.269 45.3217 109.569 45.415 109.933 45.415ZM115.947 40.7284V41.4196H113.086V40.7284H115.947ZM113.943 46.0371V39.9957C113.943 39.6916 114.014 39.4381 114.157 39.2353C114.3 39.0326 114.486 38.8805 114.714 38.7791C114.942 38.6777 115.183 38.627 115.436 38.627C115.636 38.627 115.8 38.6432 115.927 38.6754C116.053 38.7077 116.148 38.7376 116.21 38.7653L115.975 39.4704C115.934 39.4565 115.876 39.4392 115.802 39.4185C115.731 39.3978 115.636 39.3874 115.519 39.3874C115.249 39.3874 115.055 39.4554 114.935 39.5913C114.817 39.7273 114.759 39.9266 114.759 40.1892V46.0371H113.943ZM119.939 46.0371V38.9588H120.796V42.4703H120.879L124.058 38.9588H125.178L122.206 42.1524L125.178 46.0371H124.141L121.68 42.7468L120.796 43.7422V46.0371H119.939ZM127.739 46.1615C127.403 46.1615 127.097 46.0982 126.823 45.9714C126.549 45.8424 126.331 45.6569 126.17 45.415C126.009 45.1708 125.928 44.8758 125.928 44.5302C125.928 44.2261 125.988 43.9795 126.108 43.7906C126.228 43.5993 126.388 43.4496 126.588 43.3413C126.789 43.233 127.01 43.1523 127.252 43.0994C127.496 43.0441 127.741 43.0003 127.988 42.968C128.311 42.9265 128.572 42.8954 128.773 42.8747C128.975 42.8517 129.123 42.8136 129.215 42.7606C129.309 42.7076 129.357 42.6155 129.357 42.4841V42.4565C129.357 42.1155 129.263 41.8505 129.077 41.6616C128.892 41.4726 128.612 41.3782 128.237 41.3782C127.847 41.3782 127.542 41.4634 127.321 41.6339C127.1 41.8044 126.944 41.9865 126.854 42.18L126.08 41.9035C126.218 41.5809 126.403 41.3298 126.633 41.1501C126.866 40.968 127.119 40.8413 127.393 40.7699C127.67 40.6961 127.942 40.6593 128.209 40.6593C128.38 40.6593 128.576 40.68 128.797 40.7215C129.02 40.7607 129.236 40.8425 129.443 40.9669C129.653 41.0913 129.827 41.2791 129.965 41.5302C130.103 41.7814 130.172 42.1178 130.172 42.5394V46.0371H129.357V45.3182H129.315C129.26 45.4334 129.168 45.5567 129.039 45.688C128.91 45.8194 128.738 45.9311 128.524 46.0233C128.309 46.1154 128.048 46.1615 127.739 46.1615ZM127.864 45.4288C128.186 45.4288 128.458 45.3655 128.679 45.2387C128.903 45.112 129.071 44.9484 129.184 44.748C129.299 44.5475 129.357 44.3367 129.357 44.1155V43.3689C129.322 43.4104 129.246 43.4484 129.129 43.483C129.013 43.5152 128.88 43.544 128.728 43.5694C128.578 43.5924 128.432 43.6132 128.289 43.6316C128.148 43.6477 128.034 43.6616 127.946 43.6731C127.735 43.7007 127.536 43.7457 127.352 43.8079C127.17 43.8678 127.023 43.9588 126.91 44.0809C126.799 44.2007 126.744 44.3643 126.744 44.5717C126.744 44.8551 126.849 45.0694 127.058 45.2145C127.27 45.3574 127.539 45.4288 127.864 45.4288ZM132.477 42.8436V46.0371H131.661V40.7284H132.449V41.5579H132.518C132.643 41.2883 132.832 41.0717 133.085 40.9081C133.338 40.7422 133.666 40.6593 134.067 40.6593C134.426 40.6593 134.74 40.733 135.01 40.8805C135.28 41.0256 135.489 41.2468 135.639 41.5441C135.789 41.839 135.864 42.2123 135.864 42.6639V46.0371H135.048V42.7192C135.048 42.3021 134.94 41.9772 134.723 41.7445C134.507 41.5095 134.209 41.392 133.832 41.392C133.571 41.392 133.338 41.4484 133.133 41.5613C132.931 41.6743 132.77 41.839 132.653 42.0556C132.535 42.2722 132.477 42.5348 132.477 42.8436ZM137.465 46.0371V38.9588H138.28V41.5717H138.35C138.41 41.4796 138.492 41.362 138.598 41.2192C138.707 41.074 138.861 40.945 139.062 40.8321C139.264 40.7169 139.539 40.6593 139.884 40.6593C140.331 40.6593 140.725 40.771 141.066 40.9945C141.407 41.218 141.673 41.5349 141.865 41.945C142.056 42.3551 142.151 42.839 142.151 43.3966C142.151 43.9588 142.056 44.4461 141.865 44.8585C141.673 45.2687 141.408 45.5867 141.07 45.8125C140.731 46.036 140.34 46.1477 139.898 46.1477C139.557 46.1477 139.284 46.0913 139.079 45.9784C138.874 45.8631 138.716 45.733 138.605 45.5878C138.495 45.4403 138.41 45.3182 138.35 45.2214H138.253V46.0371H137.465ZM138.267 43.3828C138.267 43.7837 138.325 44.1374 138.443 44.4438C138.56 44.748 138.732 44.9864 138.958 45.1592C139.184 45.3297 139.46 45.415 139.787 45.415C140.128 45.415 140.413 45.3251 140.641 45.1454C140.871 44.9634 141.044 44.7192 141.159 44.4127C141.277 44.1039 141.336 43.7606 141.336 43.3828C141.336 43.0095 141.278 42.6731 141.163 42.3736C141.05 42.0717 140.878 41.8332 140.648 41.6581C140.42 41.4807 140.133 41.392 139.787 41.392C139.456 41.392 139.177 41.4761 138.951 41.6443C138.725 41.8102 138.555 42.0429 138.439 42.3424C138.324 42.6397 138.267 42.9864 138.267 43.3828ZM144.961 46.1615C144.625 46.1615 144.32 46.0982 144.045 45.9714C143.771 45.8424 143.553 45.6569 143.392 45.415C143.231 45.1708 143.15 44.8758 143.15 44.5302C143.15 44.2261 143.21 43.9795 143.33 43.7906C143.45 43.5993 143.61 43.4496 143.81 43.3413C144.011 43.233 144.232 43.1523 144.474 43.0994C144.718 43.0441 144.964 43.0003 145.21 42.968C145.533 42.9265 145.794 42.8954 145.995 42.8747C146.197 42.8517 146.345 42.8136 146.437 42.7606C146.532 42.7076 146.579 42.6155 146.579 42.4841V42.4565C146.579 42.1155 146.485 41.8505 146.299 41.6616C146.115 41.4726 145.835 41.3782 145.459 41.3782C145.07 41.3782 144.764 41.4634 144.543 41.6339C144.322 41.8044 144.166 41.9865 144.077 42.18L143.302 41.9035C143.441 41.5809 143.625 41.3298 143.855 41.1501C144.088 40.968 144.341 40.8413 144.616 40.7699C144.892 40.6961 145.164 40.6593 145.431 40.6593C145.602 40.6593 145.798 40.68 146.019 40.7215C146.242 40.7607 146.458 40.8425 146.665 40.9669C146.875 41.0913 147.049 41.2791 147.187 41.5302C147.325 41.7814 147.394 42.1178 147.394 42.5394V46.0371H146.579V45.3182H146.537C146.482 45.4334 146.39 45.5567 146.261 45.688C146.132 45.8194 145.96 45.9311 145.746 46.0233C145.532 46.1154 145.27 46.1615 144.961 46.1615ZM145.086 45.4288C145.408 45.4288 145.68 45.3655 145.901 45.2387C146.125 45.112 146.293 44.9484 146.406 44.748C146.521 44.5475 146.579 44.3367 146.579 44.1155V43.3689C146.544 43.4104 146.468 43.4484 146.351 43.483C146.235 43.5152 146.102 43.544 145.95 43.5694C145.8 43.5924 145.654 43.6132 145.511 43.6316C145.37 43.6477 145.256 43.6616 145.169 43.6731C144.957 43.7007 144.759 43.7457 144.574 43.8079C144.392 43.8678 144.245 43.9588 144.132 44.0809C144.021 44.2007 143.966 44.3643 143.966 44.5717C143.966 44.8551 144.071 45.0694 144.28 45.2145C144.492 45.3574 144.761 45.4288 145.086 45.4288ZM149.699 42.8436V46.0371H148.883V40.7284H149.671V41.5579H149.74C149.865 41.2883 150.054 41.0717 150.307 40.9081C150.561 40.7422 150.888 40.6593 151.289 40.6593C151.648 40.6593 151.963 40.733 152.232 40.8805C152.502 41.0256 152.711 41.2468 152.861 41.5441C153.011 41.839 153.086 42.2123 153.086 42.6639V46.0371H152.27V42.7192C152.27 42.3021 152.162 41.9772 151.945 41.7445C151.729 41.5095 151.432 41.392 151.054 41.392C150.793 41.392 150.561 41.4484 150.356 41.5613C150.153 41.6743 149.993 41.839 149.875 42.0556C149.758 42.2722 149.699 42.5348 149.699 42.8436ZM157.715 38.9588L159.816 44.9173H159.899L162 38.9588H162.899L160.3 46.0371H159.415L156.816 38.9588H157.715ZM163.891 46.0371V40.7284H164.706V46.0371H163.891ZM164.306 39.8436C164.147 39.8436 164.009 39.7895 163.894 39.6812C163.781 39.5729 163.725 39.4427 163.725 39.2906C163.725 39.1386 163.781 39.0084 163.894 38.9001C164.009 38.7918 164.147 38.7376 164.306 38.7376C164.465 38.7376 164.6 38.7918 164.713 38.9001C164.829 39.0084 164.886 39.1386 164.886 39.2906C164.886 39.4427 164.829 39.5729 164.713 39.6812C164.6 39.7895 164.465 39.8436 164.306 39.8436ZM168.426 46.1477C167.915 46.1477 167.473 46.0348 167.102 45.809C166.734 45.5809 166.449 45.2629 166.249 44.8551C166.051 44.445 165.952 43.968 165.952 43.4242C165.952 42.8805 166.051 42.4012 166.249 41.9865C166.449 41.5694 166.728 41.2445 167.085 41.0118C167.445 40.7768 167.864 40.6593 168.343 40.6593C168.62 40.6593 168.893 40.7054 169.162 40.7975C169.432 40.8897 169.677 41.0395 169.899 41.2468C170.12 41.4519 170.296 41.7238 170.427 42.0625C170.559 42.4012 170.624 42.8182 170.624 43.3136V43.6593H166.532V42.9542H169.795C169.795 42.6547 169.735 42.3874 169.615 42.1524C169.498 41.9173 169.329 41.7319 169.111 41.5959C168.894 41.46 168.638 41.392 168.343 41.392C168.018 41.392 167.737 41.4726 167.5 41.6339C167.265 41.7929 167.084 42.0003 166.957 42.256C166.831 42.5118 166.767 42.786 166.767 43.0786V43.5487C166.767 43.9496 166.836 44.2894 166.975 44.5682C167.115 44.8447 167.31 45.0556 167.559 45.2007C167.808 45.3436 168.097 45.415 168.426 45.415C168.64 45.415 168.834 45.385 169.007 45.3251C169.182 45.2629 169.333 45.1708 169.46 45.0486C169.586 44.9242 169.684 44.7698 169.753 44.5855L170.541 44.8067C170.458 45.074 170.319 45.309 170.123 45.5118C169.927 45.7122 169.685 45.8689 169.397 45.9818C169.109 46.0924 168.786 46.1477 168.426 46.1477ZM173.068 46.0371L171.45 40.7284H172.308L173.455 44.7929H173.51L174.644 40.7284H175.515L176.635 44.7791H176.69L177.837 40.7284H178.695L177.077 46.0371H176.275L175.114 41.9588H175.031L173.87 46.0371H173.068Z" fill="#858E96"/>
-<circle cx="89.106" cy="92.4444" r="4.96388" fill="white"/>
-<circle cx="89.1056" cy="92.4443" r="4.51262" fill="#F7AE59"/>
-<circle cx="81.4346" cy="92.4444" r="4.96388" fill="white"/>
-<circle cx="81.434" cy="92.4443" r="4.51262" fill="#8CC1FF"/>
-<circle cx="73.3115" cy="92.4444" r="4.96388" fill="white"/>
-<circle cx="73.3117" cy="92.4443" r="4.51262" fill="#2C435F"/>
-<rect x="37.238" y="84.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" strokeWidth="0.347594"/>
-<circle cx="48.8824" cy="92.3478" r="4.86631" stroke="#FCBE1D" strokeWidth="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
-<path d="M51.2007 89.3557C50.5321 88.8376 49.7093 88.5583 48.8634 88.5625C48.0176 88.5668 47.1975 88.8542 46.5341 89.379L48.8823 92.3474L51.2007 89.3557Z" fill="#FCBE1D"/>
-<path d="M46.5576 95.3396C47.2262 95.8578 48.049 96.137 48.8949 96.1328C49.7407 96.1285 50.5608 95.8411 51.2242 95.3163L48.876 92.3479L46.5576 95.3396Z" fill="#FCBE1D"/>
-<rect x="14.8181" y="84.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
-<rect x="18.9893" y="88.1758" width="7.64706" height="7.64706" rx="3.47594" fill="#FFEDD5"/>
-<path d="M24.9636 94.5492C24.8521 94.5492 24.7579 94.5107 24.6809 94.4337C24.6039 94.3567 24.5654 94.2624 24.5654 94.1509V89.8495C24.5654 89.7379 24.6039 89.6437 24.6809 89.5667C24.7579 89.4897 24.8521 89.4512 24.9636 89.4512C25.0752 89.4512 25.1694 89.4897 25.2464 89.5667C25.3234 89.6437 25.3619 89.7379 25.3619 89.8495V94.1509C25.3619 94.2624 25.3234 94.3567 25.2464 94.4337C25.1694 94.5107 25.0752 94.5492 24.9636 94.5492ZM20.9888 94.5492C20.9304 94.5492 20.8759 94.5386 20.8255 94.5173C20.775 94.4961 20.7325 94.4682 20.698 94.4337C20.6635 94.3992 20.6356 94.3567 20.6144 94.3063C20.5931 94.2558 20.5825 94.204 20.5825 94.1509V93.0357C20.5825 92.9242 20.621 92.83 20.698 92.7529C20.775 92.6759 20.8693 92.6374 20.9808 92.6374C21.0923 92.6374 21.1866 92.6759 21.2636 92.7529C21.3406 92.83 21.3791 92.9242 21.3791 93.0357V94.1509C21.3791 94.204 21.3685 94.2558 21.3472 94.3063C21.326 94.3567 21.2981 94.3992 21.2636 94.4337C21.2291 94.4682 21.1879 94.4961 21.1401 94.5173C21.0923 94.5386 21.0419 94.5492 20.9888 94.5492ZM22.9722 94.5492C22.8607 94.5492 22.7664 94.5107 22.6894 94.4337C22.6124 94.3567 22.5739 94.2624 22.5739 94.1509V91.4426C22.5739 91.3311 22.6124 91.2368 22.6894 91.1598C22.7664 91.0828 22.8607 91.0443 22.9722 91.0443C23.0837 91.0443 23.178 91.0828 23.255 91.1598C23.332 91.2368 23.3705 91.3311 23.3705 91.4426V94.1509C23.3705 94.2624 23.332 94.3567 23.255 94.4337C23.178 94.5107 23.0837 94.5492 22.9722 94.5492Z" fill="#FF6B00"/>
-</g>
-<rect x="14" y="55" width="237" height="5" rx="2.5" fill="#EBEBEB"/>
-<rect x="14" y="66" width="237" height="5" rx="2.5" fill="#E2E2E2"/>
-<defs>
-<filter id="filter0_d_1295_41552" x="22.2193" y="0.219251" width="265.561" height="89.6787" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1295_41552"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1295_41552" result="shape"/>
-</filter>
-<filter id="filter1_d_1295_41552" x="0.219251" y="24.2193" width="265.561" height="89.6787" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1295_41552"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1295_41552" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/empty-module.svg b/apps/app/public/empty-state/empty-module.svg
deleted file mode 100644
index efe3b454f..000000000
--- a/apps/app/public/empty-state/empty-module.svg
+++ /dev/null
@@ -1,50 +0,0 @@
-<svg width="289" height="116" viewBox="0 0 289 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_1424_38225)">
-<rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
-</g>
-<path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
-<path d="M26 63H285.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
-<path d="M41.7186 28.1895H39.8904L43.2189 18.7349H45.3333L48.6664 28.1895H46.8382L44.313 20.6738H44.2392L41.7186 28.1895ZM41.7786 24.4824H46.7644V25.8581H41.7786V24.4824ZM51.6244 18.7349V28.1895H49.9117V18.7349H51.6244ZM58.4164 18.7349V28.1895H56.7036V18.7349H58.4164ZM61.8683 24.0346V28.1895H60.1972V21.0985H61.7945V22.3034H61.8776C62.0407 21.9064 62.3007 21.591 62.6577 21.3571C63.0178 21.1232 63.4626 21.0062 63.9919 21.0062C64.4813 21.0062 64.9075 21.1109 65.2707 21.3201C65.6369 21.5294 65.9201 21.8326 66.1201 22.2296C66.3232 22.6266 66.4233 23.1083 66.4202 23.6745V28.1895H64.749V23.9331C64.749 23.4591 64.6259 23.0882 64.3797 22.8205C64.1366 22.5527 63.7996 22.4189 63.3687 22.4189C63.0763 22.4189 62.8162 22.4835 62.5885 22.6127C62.3638 22.7389 62.1869 22.9221 62.0576 23.1621C61.9314 23.4022 61.8683 23.693 61.8683 24.0346ZM71.6599 21.0985V22.3912H67.5835V21.0985H71.6599ZM68.5899 19.3997H70.2611V26.0566C70.2611 26.2813 70.2949 26.4537 70.3626 26.5737C70.4334 26.6906 70.5258 26.7707 70.6396 26.8137C70.7535 26.8568 70.8797 26.8784 71.0182 26.8784C71.1228 26.8784 71.2182 26.8707 71.3044 26.8553C71.3937 26.8399 71.4614 26.8261 71.5075 26.8137L71.7891 28.1202C71.6999 28.151 71.5722 28.1848 71.406 28.2218C71.2429 28.2587 71.0428 28.2802 70.8058 28.2864C70.3873 28.2987 70.0103 28.2356 69.6748 28.0971C69.3393 27.9556 69.0731 27.737 68.8761 27.4416C68.6823 27.1461 68.5868 26.7768 68.5899 26.3336V19.3997ZM76.1205 28.3279C75.4096 28.3279 74.7956 28.1802 74.2786 27.8848C73.7646 27.5862 73.3691 27.1646 73.0921 26.6199C72.8152 26.072 72.6767 25.4273 72.6767 24.6855C72.6767 23.9561 72.8152 23.316 73.0921 22.7651C73.3722 22.2111 73.7631 21.7802 74.2647 21.4725C74.7664 21.1616 75.3558 21.0062 76.0328 21.0062C76.4699 21.0062 76.8823 21.077 77.2701 21.2186C77.6609 21.3571 78.0056 21.5725 78.3041 21.8649C78.6058 22.1573 78.8427 22.5297 79.0151 22.9821C79.1874 23.4314 79.2736 23.9669 79.2736 24.5886V25.101H73.4615V23.9746H77.6717C77.6686 23.6545 77.5994 23.3699 77.4639 23.1206C77.3285 22.8682 77.1393 22.6697 76.8961 22.525C76.6561 22.3804 76.376 22.3081 76.0559 22.3081C75.7143 22.3081 75.4142 22.3912 75.1557 22.5574C74.8972 22.7205 74.6956 22.9359 74.5509 23.2037C74.4094 23.4683 74.3371 23.7592 74.334 24.0762V25.0595C74.334 25.4719 74.4094 25.8258 74.5602 26.1213C74.711 26.4136 74.9218 26.6383 75.1926 26.7953C75.4635 26.9492 75.7805 27.0261 76.1436 27.0261C76.3868 27.0261 76.6068 26.9922 76.8038 26.9245C77.0008 26.8538 77.1716 26.7507 77.3162 26.6152C77.4609 26.4798 77.5701 26.3121 77.644 26.112L79.2044 26.2875C79.1059 26.6999 78.9181 27.06 78.6411 27.3677C78.3672 27.6724 78.0164 27.9094 77.5886 28.0787C77.1608 28.2449 76.6714 28.3279 76.1205 28.3279ZM83.7712 30.9963C83.1711 30.9963 82.6556 30.9147 82.2247 30.7516C81.7938 30.5916 81.4476 30.3761 81.186 30.1053C80.9244 29.8345 80.7428 29.5344 80.6412 29.2051L82.1462 28.8404C82.2139 28.9789 82.3124 29.1158 82.4417 29.2512C82.5709 29.3897 82.7448 29.5036 82.9633 29.5929C83.1849 29.6852 83.4634 29.7314 83.7989 29.7314C84.2729 29.7314 84.6653 29.6159 84.9761 29.3851C85.287 29.1574 85.4424 28.7819 85.4424 28.2587V26.9153H85.3593C85.2731 27.0877 85.1469 27.2646 84.9807 27.4462C84.8176 27.6278 84.6006 27.7801 84.3298 27.9032C84.062 28.0263 83.725 28.0879 83.3188 28.0879C82.774 28.0879 82.2801 27.9602 81.8369 27.7047C81.3968 27.4462 81.0459 27.0615 80.7843 26.5506C80.5258 26.0366 80.3966 25.3934 80.3966 24.6209C80.3966 23.8423 80.5258 23.1852 80.7843 22.6497C81.0459 22.1111 81.3983 21.7033 81.8415 21.4263C82.2847 21.1462 82.7787 21.0062 83.3234 21.0062C83.7389 21.0062 84.0805 21.077 84.3483 21.2186C84.6191 21.3571 84.8345 21.5248 84.9946 21.7218C85.1546 21.9157 85.2762 22.0988 85.3593 22.2711H85.4516V21.0985H87.0997V28.3049C87.0997 28.9112 86.955 29.4128 86.6657 29.8098C86.3764 30.2069 85.981 30.5038 85.4793 30.7008C84.9776 30.8978 84.4083 30.9963 83.7712 30.9963ZM83.7851 26.7768C84.139 26.7768 84.4406 26.6906 84.6899 26.5183C84.9392 26.3459 85.1285 26.0982 85.2577 25.775C85.387 25.4519 85.4516 25.0641 85.4516 24.6117C85.4516 24.1654 85.387 23.7746 85.2577 23.4391C85.1315 23.1036 84.9438 22.8436 84.6945 22.6589C84.4483 22.4712 84.1451 22.3773 83.7851 22.3773C83.4127 22.3773 83.1018 22.4743 82.8525 22.6681C82.6032 22.862 82.4155 23.1283 82.2893 23.4668C82.1631 23.8023 82.1 24.1839 82.1 24.6117C82.1 25.0456 82.1631 25.4257 82.2893 25.752C82.4186 26.0751 82.6079 26.3275 82.8571 26.5091C83.1095 26.6876 83.4188 26.7768 83.7851 26.7768ZM88.8124 28.1895V21.0985H90.4328V22.2804H90.5066C90.6359 21.871 90.8575 21.5556 91.1714 21.334C91.4884 21.1093 91.85 20.997 92.2563 20.997C92.3486 20.997 92.4517 21.0016 92.5656 21.0108C92.6825 21.017 92.7795 21.0278 92.8564 21.0431V22.5804C92.7856 22.5558 92.6733 22.5343 92.5194 22.5158C92.3686 22.4943 92.2224 22.4835 92.0809 22.4835C91.7762 22.4835 91.5023 22.5497 91.2591 22.682C91.0191 22.8113 90.8298 22.9913 90.6913 23.2221C90.5528 23.4529 90.4836 23.7192 90.4836 24.0208V28.1895H88.8124ZM95.8802 28.3326C95.4309 28.3326 95.0262 28.2525 94.6661 28.0925C94.3091 27.9294 94.0259 27.6893 93.8167 27.3723C93.6105 27.0553 93.5074 26.6645 93.5074 26.1998C93.5074 25.7997 93.5812 25.4688 93.7289 25.2072C93.8767 24.9456 94.0783 24.7363 94.3337 24.5794C94.5892 24.4224 94.8769 24.3039 95.197 24.2239C95.5201 24.1408 95.8541 24.0808 96.1988 24.0439C96.6142 24.0008 96.9512 23.9623 97.2098 23.9284C97.4683 23.8915 97.656 23.8361 97.773 23.7623C97.893 23.6853 97.953 23.5668 97.953 23.4068V23.3791C97.953 23.0313 97.8499 22.762 97.6437 22.5712C97.4375 22.3804 97.1405 22.285 96.7527 22.285C96.3434 22.285 96.0187 22.3742 95.7787 22.5527C95.5417 22.7312 95.3816 22.9421 95.2986 23.1852L93.7382 22.9636C93.8613 22.5327 94.0644 22.1726 94.3476 21.8833C94.6307 21.591 94.9769 21.3725 95.3863 21.2278C95.7956 21.0801 96.248 21.0062 96.7435 21.0062C97.0851 21.0062 97.4252 21.0462 97.7637 21.1262C98.1023 21.2063 98.4116 21.3386 98.6917 21.5233C98.9717 21.7048 99.1964 21.9526 99.3657 22.2665C99.538 22.5804 99.6242 22.9728 99.6242 23.4437V28.1895H98.0177V27.2154H97.9623C97.8607 27.4123 97.7176 27.597 97.5329 27.7694C97.3513 27.9386 97.1221 28.0756 96.8451 28.1802C96.5712 28.2818 96.2495 28.3326 95.8802 28.3326ZM96.3142 27.1046C96.6496 27.1046 96.9405 27.0384 97.1867 26.9061C97.4329 26.7707 97.6222 26.5922 97.7545 26.3706C97.8899 26.149 97.9576 25.9074 97.9576 25.6458V24.8102C97.9053 24.8533 97.8161 24.8933 97.6899 24.9302C97.5668 24.9672 97.4283 24.9995 97.2744 25.0272C97.1205 25.0549 96.9682 25.0795 96.8174 25.101C96.6666 25.1226 96.5358 25.141 96.425 25.1564C96.1757 25.1903 95.9526 25.2457 95.7556 25.3226C95.5586 25.3996 95.4032 25.5073 95.2893 25.6458C95.1754 25.7812 95.1185 25.9566 95.1185 26.1721C95.1185 26.4798 95.2308 26.7122 95.4555 26.8691C95.6802 27.0261 95.9664 27.1046 96.3142 27.1046ZM104.845 21.0985V22.3912H100.769V21.0985H104.845ZM101.775 19.3997H103.447V26.0566C103.447 26.2813 103.48 26.4537 103.548 26.5737C103.619 26.6906 103.711 26.7707 103.825 26.8137C103.939 26.8568 104.065 26.8784 104.204 26.8784C104.308 26.8784 104.404 26.8707 104.49 26.8553C104.579 26.8399 104.647 26.8261 104.693 26.8137L104.975 28.1202C104.885 28.151 104.758 28.1848 104.592 28.2218C104.428 28.2587 104.228 28.2802 103.991 28.2864C103.573 28.2987 103.196 28.2356 102.86 28.0971C102.525 27.9556 102.259 27.737 102.062 27.4416C101.868 27.1461 101.772 26.7768 101.775 26.3336V19.3997ZM106.243 28.1895V21.0985H107.914V28.1895H106.243ZM107.083 20.0922C106.819 20.0922 106.591 20.0044 106.4 19.829C106.209 19.6505 106.114 19.4366 106.114 19.1873C106.114 18.935 106.209 18.7211 106.4 18.5456C106.591 18.3671 106.819 18.2779 107.083 18.2779C107.351 18.2779 107.579 18.3671 107.767 18.5456C107.957 18.7211 108.053 18.935 108.053 19.1873C108.053 19.4366 107.957 19.6505 107.767 19.829C107.579 20.0044 107.351 20.0922 107.083 20.0922ZM112.726 28.3279C112.033 28.3279 111.433 28.1756 110.925 27.8709C110.418 27.5662 110.024 27.14 109.744 26.5922C109.467 26.0443 109.328 25.4042 109.328 24.6717C109.328 23.9392 109.467 23.2975 109.744 22.7466C110.024 22.1957 110.418 21.7679 110.925 21.4632C111.433 21.1586 112.033 21.0062 112.726 21.0062C113.418 21.0062 114.018 21.1586 114.526 21.4632C115.034 21.7679 115.426 22.1957 115.703 22.7466C115.983 23.2975 116.123 23.9392 116.123 24.6717C116.123 25.4042 115.983 26.0443 115.703 26.5922C115.426 27.14 115.034 27.5662 114.526 27.8709C114.018 28.1756 113.418 28.3279 112.726 28.3279ZM112.735 26.9892C113.11 26.9892 113.424 26.8861 113.677 26.6799C113.929 26.4706 114.117 26.1905 114.24 25.8397C114.366 25.4888 114.429 25.098 114.429 24.6671C114.429 24.2331 114.366 23.8407 114.24 23.4899C114.117 23.1359 113.929 22.8543 113.677 22.6451C113.424 22.4358 113.11 22.3311 112.735 22.3311C112.35 22.3311 112.03 22.4358 111.775 22.6451C111.522 22.8543 111.333 23.1359 111.207 23.4899C111.084 23.8407 111.022 24.2331 111.022 24.6671C111.022 25.098 111.084 25.4888 111.207 25.8397C111.333 26.1905 111.522 26.4706 111.775 26.6799C112.03 26.8861 112.35 26.9892 112.735 26.9892ZM119.213 24.0346V28.1895H117.542V21.0985H119.139V22.3034H119.222C119.385 21.9064 119.645 21.591 120.002 21.3571C120.363 21.1232 120.807 21.0062 121.337 21.0062C121.826 21.0062 122.252 21.1109 122.615 21.3201C122.982 21.5294 123.265 21.8326 123.465 22.2296C123.668 22.6266 123.768 23.1083 123.765 23.6745V28.1895H122.094V23.9331C122.094 23.4591 121.971 23.0882 121.724 22.8205C121.481 22.5527 121.144 22.4189 120.713 22.4189C120.421 22.4189 120.161 22.4835 119.933 22.6127C119.709 22.7389 119.532 22.9221 119.402 23.1621C119.276 23.4022 119.213 23.693 119.213 24.0346ZM131.068 22.9728L129.545 23.139C129.502 22.9851 129.426 22.8405 129.319 22.7051C129.214 22.5697 129.072 22.4604 128.894 22.3773C128.715 22.2942 128.497 22.2527 128.238 22.2527C127.89 22.2527 127.598 22.3281 127.361 22.4789C127.127 22.6297 127.012 22.8251 127.015 23.0652C127.012 23.2714 127.087 23.4391 127.241 23.5684C127.398 23.6976 127.657 23.8038 128.017 23.8869L129.226 24.1454C129.897 24.2901 130.396 24.5194 130.722 24.8333C131.051 25.1472 131.217 25.5581 131.221 26.0659C131.217 26.5121 131.087 26.9061 130.828 27.2477C130.573 27.5862 130.217 27.8509 129.762 28.0417C129.306 28.2325 128.783 28.3279 128.192 28.3279C127.324 28.3279 126.626 28.1464 126.096 27.7832C125.567 27.417 125.251 26.9076 125.15 26.2551L126.779 26.0982C126.853 26.4183 127.01 26.6599 127.25 26.823C127.49 26.9861 127.803 27.0676 128.187 27.0676C128.585 27.0676 128.903 26.9861 129.143 26.823C129.386 26.6599 129.508 26.4583 129.508 26.2182C129.508 26.0151 129.429 25.8474 129.272 25.715C129.118 25.5827 128.878 25.4811 128.552 25.4103L127.343 25.1564C126.663 25.0149 126.159 24.7763 125.833 24.4409C125.507 24.1023 125.345 23.6745 125.348 23.1575C125.345 22.7205 125.464 22.3419 125.704 22.0218C125.947 21.6987 126.284 21.4494 126.715 21.274C127.149 21.0955 127.649 21.0062 128.215 21.0062C129.046 21.0062 129.7 21.1832 130.177 21.5371C130.657 21.891 130.954 22.3696 131.068 22.9728Z" fill="black"/>
-<path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747Z" fill="#DEE2E6"/>
-<rect x="84.4091" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
-<rect x="115.567" y="75.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
-<rect x="178.641" y="75.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
-<path d="M213.599 75.3408H267.841C268.522 75.3408 269.075 75.8932 269.075 76.5747C269.075 77.2561 268.522 77.8086 267.841 77.8086H213.599V75.3408Z" fill="#09A953"/>
-<rect x="39.5719" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
-<rect x="134.581" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<g filter="url(#filter1_d_1424_38225)">
-<rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
-</g>
-<path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
-<path d="M3 86H262.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
-<path d="M25.5971 44.9249H23.8706C23.8213 44.6417 23.7305 44.3909 23.5982 44.1724C23.4658 43.9508 23.3012 43.7631 23.1042 43.6092C22.9072 43.4553 22.6826 43.3399 22.4302 43.263C22.1809 43.1829 21.9116 43.1429 21.6223 43.1429C21.1084 43.1429 20.6529 43.2722 20.2558 43.5307C19.8588 43.7862 19.548 44.1616 19.3233 44.6571C19.0987 45.1496 18.9863 45.7512 18.9863 46.4622C18.9863 47.1854 19.0987 47.7948 19.3233 48.2903C19.5511 48.7827 19.8619 49.1551 20.2558 49.4075C20.6529 49.6568 21.1068 49.7814 21.6177 49.7814C21.9009 49.7814 22.1655 49.7445 22.4117 49.6706C22.661 49.5937 22.8842 49.4814 23.0811 49.3336C23.2812 49.1859 23.4489 49.0043 23.5843 48.7889C23.7228 48.5734 23.8182 48.3272 23.8706 48.0502L25.5971 48.0595C25.5325 48.5088 25.3924 48.9305 25.177 49.3244C24.9647 49.7183 24.6861 50.0661 24.3414 50.3677C23.9967 50.6663 23.5936 50.9002 23.1319 51.0694C22.6703 51.2356 22.1578 51.3187 21.5946 51.3187C20.7637 51.3187 20.0219 51.1264 19.3695 50.7417C18.717 50.3569 18.2031 49.8014 17.8276 49.0751C17.4521 48.3488 17.2644 47.4778 17.2644 46.4622C17.2644 45.4435 17.4536 44.5725 17.8322 43.8493C18.2107 43.1229 18.7263 42.5674 19.3787 42.1827C20.0312 41.798 20.7698 41.6056 21.5946 41.6056C22.1209 41.6056 22.6103 41.6795 23.0627 41.8272C23.5151 41.975 23.9183 42.1919 24.2722 42.4782C24.6261 42.7613 24.917 43.1091 25.1447 43.5215C25.3755 43.9308 25.5263 44.3986 25.5971 44.9249ZM32.3037 44.334C32.2606 43.9308 32.079 43.6169 31.759 43.3922C31.442 43.1676 31.0296 43.0552 30.5217 43.0552C30.1647 43.0552 29.8585 43.1091 29.6031 43.2168C29.3476 43.3245 29.1522 43.4707 29.0168 43.6554C28.8814 43.84 28.8121 44.0508 28.809 44.2878C28.809 44.4848 28.8537 44.6556 28.9429 44.8002C29.0352 44.9449 29.1599 45.068 29.3168 45.1696C29.4738 45.2681 29.6477 45.3511 29.8385 45.4189C30.0293 45.4866 30.2217 45.5435 30.4156 45.5897L31.3019 45.8113C31.6589 45.8944 32.0021 46.0067 32.3314 46.1483C32.6638 46.2898 32.9608 46.4683 33.2224 46.6838C33.4871 46.8992 33.6963 47.1593 33.8502 47.464C34.0041 47.7686 34.081 48.1257 34.081 48.535C34.081 49.089 33.9395 49.5768 33.6563 49.9984C33.3732 50.417 32.9639 50.7447 32.4283 50.9817C31.8959 51.2156 31.2511 51.3326 30.494 51.3326C29.7585 51.3326 29.1199 51.2187 28.5782 50.9909C28.0396 50.7632 27.618 50.4308 27.3133 49.9938C27.0117 49.5568 26.8486 49.0243 26.8239 48.3965H28.509C28.5336 48.7258 28.6351 48.9997 28.8136 49.2182C28.9921 49.4367 29.2245 49.5998 29.5107 49.7076C29.8 49.8153 30.1232 49.8691 30.4802 49.8691C30.8526 49.8691 31.1788 49.8137 31.4589 49.7029C31.742 49.5891 31.9636 49.4321 32.1237 49.2321C32.2837 49.0289 32.3653 48.792 32.3683 48.5211C32.3653 48.2749 32.2929 48.0718 32.1514 47.9118C32.0098 47.7486 31.8113 47.6132 31.5558 47.5055C31.3035 47.3947 31.008 47.2962 30.6695 47.21L29.5938 46.9331C28.8152 46.733 28.1997 46.4299 27.7472 46.0236C27.2979 45.6143 27.0732 45.0711 27.0732 44.394C27.0732 43.8369 27.224 43.3491 27.5256 42.9306C27.8303 42.512 28.2443 42.1873 28.7675 41.9565C29.2907 41.7226 29.8831 41.6056 30.5448 41.6056C31.2158 41.6056 31.8036 41.7226 32.3083 41.9565C32.8161 42.1873 33.2147 42.5089 33.504 42.9213C33.7933 43.3307 33.9425 43.8016 33.9518 44.334H32.3037ZM36.8729 41.7349L39.3334 49.1767H39.4304L41.8864 41.7349H43.7699L40.4368 51.1895H38.3224L34.994 41.7349H36.8729ZM49.9525 41.7349V51.1895H48.2398V41.7349H49.9525ZM51.7333 51.1895V44.0985H53.3306V45.3034H53.4137C53.5614 44.8972 53.8061 44.5802 54.1477 44.3525C54.4893 44.1216 54.8971 44.0062 55.3711 44.0062C55.8512 44.0062 56.2559 44.1232 56.5852 44.3571C56.9176 44.5879 57.1515 44.9033 57.2869 45.3034H57.3608C57.5177 44.9095 57.7824 44.5956 58.1548 44.3617C58.5303 44.1247 58.975 44.0062 59.489 44.0062C60.1414 44.0062 60.6739 44.2124 61.0863 44.6248C61.4987 45.0372 61.7049 45.6389 61.7049 46.4299V51.1895H60.0291V46.6884C60.0291 46.2483 59.9122 45.9267 59.6783 45.7235C59.4444 45.5173 59.1581 45.4142 58.8196 45.4142C58.4164 45.4142 58.101 45.5404 57.8732 45.7928C57.6485 46.0421 57.5362 46.3668 57.5362 46.7669V51.1895H55.8974V46.6191C55.8974 46.2529 55.7866 45.9605 55.565 45.742C55.3465 45.5235 55.0602 45.4142 54.7063 45.4142C54.4663 45.4142 54.2477 45.4758 54.0508 45.5989C53.8538 45.7189 53.6968 45.8897 53.5799 46.1113C53.4629 46.3298 53.4045 46.5853 53.4045 46.8777V51.1895H51.7333ZM63.4003 53.8485V44.0985H65.0438V45.2711H65.1407C65.2269 45.0988 65.3484 44.9157 65.5054 44.7218C65.6624 44.5248 65.8747 44.3571 66.1425 44.2186C66.4102 44.077 66.7519 44.0062 67.1673 44.0062C67.7152 44.0062 68.2091 44.1462 68.6492 44.4263C69.0924 44.7033 69.4433 45.1142 69.7018 45.6589C69.9634 46.2006 70.0942 46.8654 70.0942 47.6532C70.0942 48.4319 69.9665 49.0936 69.711 49.6383C69.4556 50.1831 69.1078 50.5985 68.6677 50.8848C68.2276 51.171 67.729 51.3141 67.172 51.3141C66.7657 51.3141 66.4287 51.2464 66.1609 51.111C65.8932 50.9756 65.6778 50.8124 65.5146 50.6216C65.3546 50.4277 65.23 50.2446 65.1407 50.0723H65.0715V53.8485H63.4003ZM65.0391 47.644C65.0391 48.1026 65.1038 48.5042 65.233 48.8489C65.3654 49.1936 65.5546 49.4629 65.8009 49.6568C66.0501 49.8476 66.3518 49.943 66.7057 49.943C67.075 49.943 67.3843 49.8445 67.6336 49.6475C67.8829 49.4475 68.0706 49.1751 68.1968 48.8304C68.3261 48.4827 68.3907 48.0872 68.3907 47.644C68.3907 47.2039 68.3276 46.813 68.2014 46.4714C68.0752 46.1298 67.8875 45.862 67.6382 45.6681C67.3889 45.4743 67.0781 45.3773 66.7057 45.3773C66.3487 45.3773 66.0455 45.4712 65.7962 45.6589C65.547 45.8466 65.3577 46.1098 65.2284 46.4483C65.1022 46.7869 65.0391 47.1854 65.0391 47.644ZM74.6183 51.3279C73.9259 51.3279 73.3257 51.1756 72.8179 50.8709C72.3101 50.5662 71.9162 50.14 71.6361 49.5922C71.3591 49.0443 71.2206 48.4042 71.2206 47.6717C71.2206 46.9392 71.3591 46.2975 71.6361 45.7466C71.9162 45.1957 72.3101 44.7679 72.8179 44.4632C73.3257 44.1586 73.9259 44.0062 74.6183 44.0062C75.3108 44.0062 75.9109 44.1586 76.4188 44.4632C76.9266 44.7679 77.319 45.1957 77.596 45.7466C77.876 46.2975 78.0161 46.9392 78.0161 47.6717C78.0161 48.4042 77.876 49.0443 77.596 49.5922C77.319 50.14 76.9266 50.5662 76.4188 50.8709C75.9109 51.1756 75.3108 51.3279 74.6183 51.3279ZM74.6276 49.9892C75.003 49.9892 75.317 49.8861 75.5693 49.6799C75.8217 49.4706 76.0094 49.1905 76.1325 48.8397C76.2587 48.4888 76.3218 48.098 76.3218 47.6671C76.3218 47.2331 76.2587 46.8407 76.1325 46.4899C76.0094 46.1359 75.8217 45.8543 75.5693 45.6451C75.317 45.4358 75.003 45.3311 74.6276 45.3311C74.2429 45.3311 73.9228 45.4358 73.6673 45.6451C73.415 45.8543 73.2257 46.1359 73.0995 46.4899C72.9764 46.8407 72.9149 47.2331 72.9149 47.6671C72.9149 48.098 72.9764 48.4888 73.0995 48.8397C73.2257 49.1905 73.415 49.4706 73.6673 49.6799C73.9228 49.8861 74.2429 49.9892 74.6276 49.9892ZM79.4345 51.1895V44.0985H81.0549V45.2804H81.1287C81.258 44.871 81.4796 44.5556 81.7935 44.334C82.1105 44.1093 82.4721 43.997 82.8784 43.997C82.9707 43.997 83.0738 44.0016 83.1877 44.0108C83.3046 44.017 83.4016 44.0278 83.4785 44.0431V45.5804C83.4077 45.5558 83.2954 45.5343 83.1415 45.5158C82.9907 45.4943 82.8445 45.4835 82.7029 45.4835C82.3982 45.4835 82.1243 45.5497 81.8812 45.682C81.6411 45.8113 81.4519 45.9913 81.3134 46.2221C81.1749 46.4529 81.1056 46.7192 81.1056 47.0208V51.1895H79.4345ZM88.5105 44.0985V45.3912H84.4341V44.0985H88.5105ZM85.4405 42.3997H87.1117V49.0566C87.1117 49.2813 87.1455 49.4537 87.2132 49.5737C87.284 49.6906 87.3764 49.7707 87.4902 49.8137C87.6041 49.8568 87.7303 49.8784 87.8688 49.8784C87.9734 49.8784 88.0688 49.8707 88.155 49.8553C88.2442 49.8399 88.312 49.8261 88.3581 49.8137L88.6397 51.1202C88.5505 51.151 88.4228 51.1848 88.2566 51.2218C88.0934 51.2587 87.8934 51.2802 87.6564 51.2864C87.2379 51.2987 86.8608 51.2356 86.5254 51.0971C86.1899 50.9556 85.9237 50.737 85.7267 50.4416C85.5328 50.1461 85.4374 49.7768 85.4405 49.3336V42.3997ZM92.9711 51.3279C92.2602 51.3279 91.6462 51.1802 91.1292 50.8848C90.6152 50.5862 90.2197 50.1646 89.9427 49.6199C89.6657 49.072 89.5272 48.4273 89.5272 47.6855C89.5272 46.9561 89.6657 46.316 89.9427 45.7651C90.2228 45.2111 90.6137 44.7802 91.1153 44.4725C91.617 44.1616 92.2063 44.0062 92.8834 44.0062C93.3204 44.0062 93.7329 44.077 94.1206 44.2186C94.5115 44.3571 94.8562 44.5725 95.1547 44.8649C95.4563 45.1573 95.6933 45.5297 95.8657 45.9821C96.038 46.4314 96.1242 46.9669 96.1242 47.5886V48.101H90.312V46.9746H94.5223C94.5192 46.6545 94.4499 46.3699 94.3145 46.1206C94.1791 45.8682 93.9898 45.6697 93.7467 45.525C93.5066 45.3804 93.2266 45.3081 92.9065 45.3081C92.5649 45.3081 92.2648 45.3912 92.0063 45.5574C91.7478 45.7205 91.5462 45.9359 91.4015 46.2037C91.26 46.4683 91.1876 46.7592 91.1846 47.0762V48.0595C91.1846 48.4719 91.26 48.8258 91.4108 49.1213C91.5616 49.4136 91.7724 49.6383 92.0432 49.7953C92.3141 49.9492 92.6311 50.0261 92.9942 50.0261C93.2374 50.0261 93.4574 49.9922 93.6544 49.9245C93.8513 49.8538 94.0222 49.7507 94.1668 49.6152C94.3115 49.4798 94.4207 49.3121 94.4946 49.112L96.0549 49.2875C95.9565 49.6999 95.7687 50.06 95.4917 50.3677C95.2178 50.6724 94.867 50.9094 94.4392 51.0787C94.0114 51.2449 93.522 51.3279 92.9711 51.3279ZM97.538 51.1895V44.0985H99.1584V45.2804H99.2322C99.3615 44.871 99.5831 44.5556 99.897 44.334C100.214 44.1093 100.576 43.997 100.982 43.997C101.074 43.997 101.177 44.0016 101.291 44.0108C101.408 44.017 101.505 44.0278 101.582 44.0431V45.5804C101.511 45.5558 101.399 45.5343 101.245 45.5158C101.094 45.4943 100.948 45.4835 100.806 45.4835C100.502 45.4835 100.228 45.5497 99.9847 45.682C99.7447 45.8113 99.5554 45.9913 99.4169 46.2221C99.2784 46.4529 99.2092 46.7192 99.2092 47.0208V51.1895H97.538Z" fill="black"/>
-<path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747Z" fill="#DEE2E6"/>
-<rect x="61.4091" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
-<rect x="92.5669" y="98.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
-<rect x="155.641" y="98.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
-<path d="M190.599 98.3408H244.841C245.522 98.3408 246.075 98.8932 246.075 99.5747C246.075 100.256 245.522 100.809 244.841 100.809H190.599V98.3408Z" fill="#09A953"/>
-<rect x="16.5719" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
-<rect x="111.581" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<defs>
-<filter id="filter0_d_1424_38225" x="23.5323" y="0.532252" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1424_38225"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1424_38225" result="shape"/>
-</filter>
-<filter id="filter1_d_1424_38225" x="0.532252" y="23.5323" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1424_38225"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1424_38225" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/empty-page.svg b/apps/app/public/empty-state/empty-page.svg
deleted file mode 100644
index a2fd4cc46..000000000
--- a/apps/app/public/empty-state/empty-page.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<svg width="296" height="105" viewBox="0 0 296 105" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_1900_49885)">
-<rect x="14" y="3" width="279" height="80" rx="5.5615" fill="white"/>
-<rect x="25" y="31" width="103" height="10" rx="5" fill="#DEE2E6"/>
-<rect x="25" y="48" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
-<rect x="25" y="62" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
-<path d="M31.676 17.1708H30.8188C30.7682 16.9243 30.6794 16.7077 30.5527 16.521C30.4283 16.3344 30.2762 16.1777 30.0965 16.051C29.9191 15.922 29.7221 15.8252 29.5055 15.7607C29.2889 15.6962 29.0631 15.6639 28.8281 15.6639C28.3995 15.6639 28.0113 15.7722 27.6633 15.9888C27.3177 16.2054 27.0424 16.5245 26.8373 16.9461C26.6346 17.3678 26.5332 17.8851 26.5332 18.498C26.5332 19.1109 26.6346 19.6281 26.8373 20.0498C27.0424 20.4715 27.3177 20.7906 27.6633 21.0072C28.0113 21.2238 28.3995 21.332 28.8281 21.332C29.0631 21.332 29.2889 21.2998 29.5055 21.2353C29.7221 21.1708 29.9191 21.0751 30.0965 20.9484C30.2762 20.8194 30.4283 20.6615 30.5527 20.4749C30.6794 20.286 30.7682 20.0694 30.8188 19.8252H31.676C31.6115 20.1869 31.494 20.5106 31.3234 20.7963C31.1529 21.082 30.941 21.3251 30.6875 21.5256C30.4341 21.7237 30.1495 21.8747 29.8338 21.9784C29.5205 22.082 29.1852 22.1339 28.8281 22.1339C28.2244 22.1339 27.6875 21.9864 27.2175 21.6915C26.7475 21.3966 26.3776 20.9772 26.1081 20.4334C25.8385 19.8897 25.7037 19.2445 25.7037 18.498C25.7037 17.7514 25.8385 17.1063 26.1081 16.5625C26.3776 16.0187 26.7475 15.5994 27.2175 15.3045C27.6875 15.0095 28.2244 14.8621 28.8281 14.8621C29.1852 14.8621 29.5205 14.9139 29.8338 15.0176C30.1495 15.1213 30.4341 15.2734 30.6875 15.4738C30.941 15.672 31.1529 15.9139 31.3234 16.1996C31.494 16.483 31.6115 16.8067 31.676 17.1708ZM33.7661 14.9588V22.0371H32.9504V14.9588H33.7661ZM35.26 22.0371V16.7284H36.0757V22.0371H35.26ZM35.6748 15.8436C35.5158 15.8436 35.3787 15.7895 35.2635 15.6812C35.1506 15.5729 35.0941 15.4427 35.0941 15.2906C35.0941 15.1386 35.1506 15.0084 35.2635 14.9001C35.3787 14.7918 35.5158 14.7376 35.6748 14.7376C35.8338 14.7376 35.9697 14.7918 36.0826 14.9001C36.1978 15.0084 36.2554 15.1386 36.2554 15.2906C36.2554 15.4427 36.1978 15.5729 36.0826 15.6812C35.9697 15.7895 35.8338 15.8436 35.6748 15.8436ZM39.7954 22.1477C39.2839 22.1477 38.8427 22.0348 38.4717 21.809C38.103 21.5809 37.8185 21.2629 37.618 20.8551C37.4199 20.445 37.3208 19.968 37.3208 19.4242C37.3208 18.8805 37.4199 18.4012 37.618 17.9865C37.8185 17.5694 38.0973 17.2445 38.4544 17.0118C38.8139 16.7768 39.2332 16.6593 39.7125 16.6593C39.989 16.6593 40.262 16.7054 40.5316 16.7975C40.8012 16.8897 41.0466 17.0395 41.2678 17.2468C41.489 17.4519 41.6652 17.7238 41.7966 18.0625C41.9279 18.4012 41.9936 18.8182 41.9936 19.3136V19.6593H37.9014V18.9542H41.1641C41.1641 18.6547 41.1042 18.3874 40.9843 18.1524C40.8668 17.9173 40.6986 17.7319 40.4797 17.5959C40.2632 17.46 40.0074 17.392 39.7125 17.392C39.3876 17.392 39.1065 17.4726 38.8692 17.6339C38.6341 17.7929 38.4533 18.0003 38.3265 18.256C38.1998 18.5118 38.1365 18.786 38.1365 19.0786V19.5487C38.1365 19.9496 38.2056 20.2894 38.3438 20.5682C38.4844 20.8447 38.6791 21.0556 38.9279 21.2007C39.1768 21.3436 39.4659 21.415 39.7954 21.415C40.0097 21.415 40.2033 21.385 40.3761 21.3251C40.5512 21.2629 40.7021 21.1708 40.8288 21.0486C40.9555 20.9242 41.0535 20.7698 41.1226 20.5855L41.9106 20.8067C41.8277 21.074 41.6883 21.309 41.4924 21.5118C41.2966 21.7122 41.0546 21.8689 40.7666 21.9818C40.4786 22.0924 40.1549 22.1477 39.7954 22.1477ZM44.05 18.8436V22.0371H43.2343V16.7284H44.0223V17.5579H44.0915C44.2159 17.2883 44.4048 17.0717 44.6583 16.9081C44.9117 16.7422 45.2389 16.6593 45.6398 16.6593C45.9993 16.6593 46.3138 16.733 46.5834 16.8805C46.853 17.0256 47.0626 17.2468 47.2124 17.5441C47.3622 17.839 47.437 18.2123 47.437 18.6639V22.0371H46.6214V18.7192C46.6214 18.3021 46.5131 17.9772 46.2965 17.7445C46.0799 17.5095 45.7827 17.392 45.4048 17.392C45.1444 17.392 44.9117 17.4484 44.7067 17.5613C44.5039 17.6743 44.3438 17.839 44.2263 18.0556C44.1087 18.2722 44.05 18.5348 44.05 18.8436ZM51.2363 16.7284V17.4196H48.4851V16.7284H51.2363ZM49.287 15.4565H50.1026V20.5164C50.1026 20.7468 50.136 20.9196 50.2029 21.0348C50.272 21.1477 50.3595 21.2238 50.4655 21.2629C50.5738 21.2998 50.6879 21.3182 50.8077 21.3182C50.8976 21.3182 50.9713 21.3136 51.0289 21.3044C51.0865 21.2929 51.1326 21.2837 51.1671 21.2767L51.333 22.0095C51.2777 22.0302 51.2005 22.0509 51.1015 22.0717C51.0024 22.0947 50.8768 22.1062 50.7247 22.1062C50.4943 22.1062 50.2685 22.0567 50.0473 21.9576C49.8284 21.8585 49.6464 21.7076 49.5013 21.5049C49.3584 21.3021 49.287 21.0463 49.287 20.7376V15.4565ZM55.2005 22.0371V16.7284H55.9885V17.5579H56.0576C56.1682 17.2745 56.3468 17.0544 56.5933 16.8978C56.8399 16.7388 57.136 16.6593 57.4816 16.6593C57.8318 16.6593 58.1233 16.7388 58.356 16.8978C58.591 17.0544 58.7742 17.2745 58.9055 17.5579H58.9608C59.0968 17.2837 59.3007 17.066 59.5726 16.9047C59.8445 16.7411 60.1705 16.6593 60.5507 16.6593C61.0253 16.6593 61.4136 16.8079 61.7154 17.1051C62.0173 17.4001 62.1682 17.8597 62.1682 18.4841V22.0371H61.3525V18.4841C61.3525 18.0924 61.2454 17.8125 61.0311 17.6443C60.8168 17.4761 60.5645 17.392 60.2742 17.392C59.9009 17.392 59.6118 17.5049 59.4067 17.7307C59.2016 17.9542 59.0991 18.2376 59.0991 18.5809V22.0371H58.2696V18.4012C58.2696 18.0994 58.1717 17.8563 57.9758 17.6719C57.78 17.4853 57.5277 17.392 57.2189 17.392C57.0069 17.392 56.8088 17.4484 56.6245 17.5613C56.4424 17.6743 56.295 17.8309 56.1821 18.0314C56.0715 18.2295 56.0162 18.4588 56.0162 18.7192V22.0371H55.2005ZM65.8853 22.1477C65.3738 22.1477 64.9326 22.0348 64.5616 21.809C64.1929 21.5809 63.9084 21.2629 63.7079 20.8551C63.5098 20.445 63.4107 19.968 63.4107 19.4242C63.4107 18.8805 63.5098 18.4012 63.7079 17.9865C63.9084 17.5694 64.1872 17.2445 64.5443 17.0118C64.9038 16.7768 65.3231 16.6593 65.8024 16.6593C66.0789 16.6593 66.3519 16.7054 66.6215 16.7975C66.8911 16.8897 67.1364 17.0395 67.3576 17.2468C67.5788 17.4519 67.7551 17.7238 67.8864 18.0625C68.0178 18.4012 68.0834 18.8182 68.0834 19.3136V19.6593H63.9913V18.9542H67.254C67.254 18.6547 67.194 18.3874 67.0742 18.1524C66.9567 17.9173 66.7885 17.7319 66.5696 17.5959C66.353 17.46 66.0973 17.392 65.8024 17.392C65.4775 17.392 65.1964 17.4726 64.959 17.6339C64.724 17.7929 64.5432 18.0003 64.4164 18.256C64.2897 18.5118 64.2263 18.786 64.2263 19.0786V19.5487C64.2263 19.9496 64.2955 20.2894 64.4337 20.5682C64.5743 20.8447 64.769 21.0556 65.0178 21.2007C65.2666 21.3436 65.5558 21.415 65.8853 21.415C66.0996 21.415 66.2931 21.385 66.4659 21.3251C66.6411 21.2629 66.792 21.1708 66.9187 21.0486C67.0454 20.9242 67.1434 20.7698 67.2125 20.5855L68.0005 20.8067C67.9175 21.074 67.7781 21.309 67.5823 21.5118C67.3864 21.7122 67.1445 21.8689 66.8565 21.9818C66.5685 22.0924 66.2448 22.1477 65.8853 22.1477ZM71.55 22.1477C71.0385 22.1477 70.5972 22.0348 70.2263 21.809C69.8576 21.5809 69.5731 21.2629 69.3726 20.8551C69.1744 20.445 69.0754 19.968 69.0754 19.4242C69.0754 18.8805 69.1744 18.4012 69.3726 17.9865C69.5731 17.5694 69.8519 17.2445 70.209 17.0118C70.5684 16.7768 70.9878 16.6593 71.467 16.6593C71.7435 16.6593 72.0166 16.7054 72.2862 16.7975C72.5557 16.8897 72.8011 17.0395 73.0223 17.2468C73.2435 17.4519 73.4198 17.7238 73.5511 18.0625C73.6825 18.4012 73.7481 18.8182 73.7481 19.3136V19.6593H69.656V18.9542H72.9186C72.9186 18.6547 72.8587 18.3874 72.7389 18.1524C72.6214 17.9173 72.4532 17.7319 72.2343 17.5959C72.0177 17.46 71.762 17.392 71.467 17.392C71.1422 17.392 70.8611 17.4726 70.6237 17.6339C70.3887 17.7929 70.2078 18.0003 70.0811 18.256C69.9544 18.5118 69.891 18.786 69.891 19.0786V19.5487C69.891 19.9496 69.9601 20.2894 70.0984 20.5682C70.2389 20.8447 70.4336 21.0556 70.6825 21.2007C70.9313 21.3436 71.2205 21.415 71.55 21.415C71.7643 21.415 71.9578 21.385 72.1306 21.3251C72.3057 21.2629 72.4567 21.1708 72.5834 21.0486C72.7101 20.9242 72.808 20.7698 72.8772 20.5855L73.6652 20.8067C73.5822 21.074 73.4428 21.309 73.247 21.5118C73.0511 21.7122 72.8092 21.8689 72.5212 21.9818C72.2332 22.0924 71.9094 22.1477 71.55 22.1477ZM77.2976 16.7284V17.4196H74.5465V16.7284H77.2976ZM75.3483 15.4565H76.164V20.5164C76.164 20.7468 76.1974 20.9196 76.2642 21.0348C76.3334 21.1477 76.4209 21.2238 76.5269 21.2629C76.6352 21.2998 76.7493 21.3182 76.8691 21.3182C76.9589 21.3182 77.0327 21.3136 77.0903 21.3044C77.1479 21.2929 77.1939 21.2837 77.2285 21.2767L77.3944 22.0095C77.3391 22.0302 77.2619 22.0509 77.1628 22.0717C77.0638 22.0947 76.9382 22.1062 76.7861 22.1062C76.5557 22.1062 76.3299 22.0567 76.1087 21.9576C75.8898 21.8585 75.7078 21.7076 75.5626 21.5049C75.4198 21.3021 75.3483 21.0463 75.3483 20.7376V15.4565ZM78.5246 22.0371V16.7284H79.3402V22.0371H78.5246ZM78.9393 15.8436C78.7803 15.8436 78.6432 15.7895 78.528 15.6812C78.4151 15.5729 78.3587 15.4427 78.3587 15.2906C78.3587 15.1386 78.4151 15.0084 78.528 14.9001C78.6432 14.7918 78.7803 14.7376 78.9393 14.7376C79.0983 14.7376 79.2342 14.7918 79.3472 14.9001C79.4624 15.0084 79.52 15.1386 79.52 15.2906C79.52 15.4427 79.4624 15.5729 79.3472 15.6812C79.2342 15.7895 79.0983 15.8436 78.9393 15.8436ZM81.6498 18.8436V22.0371H80.8342V16.7284H81.6222V17.5579H81.6913C81.8157 17.2883 82.0047 17.0717 82.2581 16.9081C82.5116 16.7422 82.8388 16.6593 83.2397 16.6593C83.5991 16.6593 83.9136 16.733 84.1832 16.8805C84.4528 17.0256 84.6625 17.2468 84.8122 17.5441C84.962 17.839 85.0369 18.2123 85.0369 18.6639V22.0371H84.2212V18.7192C84.2212 18.3021 84.1129 17.9772 83.8964 17.7445C83.6798 17.5095 83.3825 17.392 83.0047 17.392C82.7443 17.392 82.5116 17.4484 82.3065 17.5613C82.1037 17.6743 81.9436 17.839 81.8261 18.0556C81.7086 18.2722 81.6498 18.5348 81.6498 18.8436ZM88.6702 24.1385C88.2762 24.1385 87.9375 24.0878 87.6541 23.9864C87.3707 23.8873 87.1345 23.756 86.9456 23.5924C86.7589 23.4311 86.6103 23.2583 86.4997 23.074L87.1495 22.6177C87.2232 22.7145 87.3165 22.8251 87.4294 22.9495C87.5423 23.0763 87.6967 23.1857 87.8926 23.2779C88.0907 23.3723 88.3499 23.4196 88.6702 23.4196C89.0988 23.4196 89.4525 23.3159 89.7313 23.1085C90.0101 22.9012 90.1495 22.5763 90.1495 22.1339V21.0556H90.0803C90.0204 21.1523 89.9352 21.2721 89.8246 21.415C89.7163 21.5555 89.5596 21.6811 89.3545 21.7917C89.1518 21.9 88.8776 21.9542 88.532 21.9542C88.1034 21.9542 87.7186 21.8528 87.3776 21.65C87.0389 21.4473 86.7705 21.1523 86.5723 20.7652C86.3765 20.3781 86.2785 19.9081 86.2785 19.3551C86.2785 18.8113 86.3742 18.3378 86.5654 17.9346C86.7566 17.5291 87.0228 17.2157 87.3638 16.9945C87.7048 16.771 88.0988 16.6593 88.5458 16.6593C88.8914 16.6593 89.1656 16.7169 89.3684 16.8321C89.5734 16.945 89.7301 17.074 89.8384 17.2192C89.949 17.362 90.0343 17.4796 90.0942 17.5717H90.1771V16.7284H90.9651V22.1892C90.9651 22.6454 90.8614 23.0164 90.6541 23.3021C90.449 23.5901 90.1725 23.8009 89.8246 23.9346C89.479 24.0705 89.0942 24.1385 88.6702 24.1385ZM88.6426 21.2214C88.9697 21.2214 89.2462 21.1466 89.472 20.9968C89.6979 20.847 89.8695 20.6316 89.987 20.3505C90.1045 20.0694 90.1633 19.733 90.1633 19.3413C90.1633 18.9588 90.1057 18.6212 89.9905 18.3286C89.8753 18.036 89.7048 17.8067 89.479 17.6408C89.2532 17.4749 88.9744 17.392 88.6426 17.392C88.2969 17.392 88.0089 17.4796 87.7785 17.6547C87.5504 17.8298 87.3788 18.0648 87.2635 18.3597C87.1506 18.6547 87.0942 18.9818 87.0942 19.3413C87.0942 19.7099 87.1518 20.036 87.267 20.3194C87.3845 20.6005 87.5573 20.8217 87.7854 20.983C88.0158 21.142 88.3016 21.2214 88.6426 21.2214ZM96.0112 18.8436V22.0371H95.1955V16.7284H95.9835V17.5579H96.0526C96.1771 17.2883 96.366 17.0717 96.6194 16.9081C96.8729 16.7422 97.2001 16.6593 97.601 16.6593C97.9604 16.6593 98.275 16.733 98.5445 16.8805C98.8141 17.0256 99.0238 17.2468 99.1736 17.5441C99.3233 17.839 99.3982 18.2123 99.3982 18.6639V22.0371H98.5826V18.7192C98.5826 18.3021 98.4743 17.9772 98.2577 17.7445C98.0411 17.5095 97.7439 17.392 97.366 17.392C97.1056 17.392 96.8729 17.4484 96.6678 17.5613C96.4651 17.6743 96.3049 17.839 96.1874 18.0556C96.0699 18.2722 96.0112 18.5348 96.0112 18.8436ZM103.045 22.1477C102.566 22.1477 102.146 22.0337 101.784 21.8055C101.424 21.5774 101.143 21.2583 100.941 20.8482C100.74 20.438 100.64 19.9588 100.64 19.4104C100.64 18.8574 100.74 18.3747 100.941 17.9623C101.143 17.5498 101.424 17.2296 101.784 17.0014C102.146 16.7733 102.566 16.6593 103.045 16.6593C103.525 16.6593 103.944 16.7733 104.303 17.0014C104.665 17.2296 104.946 17.5498 105.147 17.9623C105.349 18.3747 105.451 18.8574 105.451 19.4104C105.451 19.9588 105.349 20.438 105.147 20.8482C104.946 21.2583 104.665 21.5774 104.303 21.8055C103.944 22.0337 103.525 22.1477 103.045 22.1477ZM103.045 21.415C103.409 21.415 103.709 21.3217 103.944 21.135C104.179 20.9484 104.353 20.703 104.466 20.3989C104.579 20.0947 104.635 19.7652 104.635 19.4104C104.635 19.0556 104.579 18.7249 104.466 18.4185C104.353 18.112 104.179 17.8643 103.944 17.6754C103.709 17.4865 103.409 17.392 103.045 17.392C102.681 17.392 102.382 17.4865 102.147 17.6754C101.912 17.8643 101.738 18.112 101.625 18.4185C101.512 18.7249 101.456 19.0556 101.456 19.4104C101.456 19.7652 101.512 20.0947 101.625 20.3989C101.738 20.703 101.912 20.9484 102.147 21.135C102.382 21.3217 102.681 21.415 103.045 21.415ZM109.005 16.7284V17.4196H106.254V16.7284H109.005ZM107.055 15.4565H107.871V20.5164C107.871 20.7468 107.904 20.9196 107.971 21.0348C108.04 21.1477 108.128 21.2238 108.234 21.2629C108.342 21.2998 108.456 21.3182 108.576 21.3182C108.666 21.3182 108.74 21.3136 108.797 21.3044C108.855 21.2929 108.901 21.2837 108.936 21.2767L109.101 22.0095C109.046 22.0302 108.969 22.0509 108.87 22.0717C108.771 22.0947 108.645 22.1062 108.493 22.1062C108.263 22.1062 108.037 22.0567 107.816 21.9576C107.597 21.8585 107.415 21.7076 107.27 21.5049C107.127 21.3021 107.055 21.0463 107.055 20.7376V15.4565ZM112.4 22.1477C111.889 22.1477 111.448 22.0348 111.077 21.809C110.708 21.5809 110.423 21.2629 110.223 20.8551C110.025 20.445 109.926 19.968 109.926 19.4242C109.926 18.8805 110.025 18.4012 110.223 17.9865C110.423 17.5694 110.702 17.2445 111.059 17.0118C111.419 16.7768 111.838 16.6593 112.317 16.6593C112.594 16.6593 112.867 16.7054 113.137 16.7975C113.406 16.8897 113.652 17.0395 113.873 17.2468C114.094 17.4519 114.27 17.7238 114.402 18.0625C114.533 18.4012 114.599 18.8182 114.599 19.3136V19.6593H110.506V18.9542H113.769C113.769 18.6547 113.709 18.3874 113.589 18.1524C113.472 17.9173 113.304 17.7319 113.085 17.5959C112.868 17.46 112.612 17.392 112.317 17.392C111.993 17.392 111.711 17.4726 111.474 17.6339C111.239 17.7929 111.058 18.0003 110.932 18.256C110.805 18.5118 110.741 18.786 110.741 19.0786V19.5487C110.741 19.9496 110.811 20.2894 110.949 20.5682C111.089 20.8447 111.284 21.0556 111.533 21.2007C111.782 21.3436 112.071 21.415 112.4 21.415C112.615 21.415 112.808 21.385 112.981 21.3251C113.156 21.2629 113.307 21.1708 113.434 21.0486C113.561 20.9242 113.658 20.7698 113.728 20.5855L114.516 20.8067C114.433 21.074 114.293 21.309 114.097 21.5118C113.902 21.7122 113.66 21.8689 113.372 21.9818C113.084 22.0924 112.76 22.1477 112.4 22.1477ZM119.6 17.9173L118.867 18.1247C118.821 18.0026 118.753 17.8839 118.663 17.7687C118.575 17.6512 118.456 17.5544 118.304 17.4784C118.151 17.4024 117.957 17.3643 117.719 17.3643C117.395 17.3643 117.124 17.4392 116.907 17.589C116.693 17.7365 116.586 17.9242 116.586 18.1524C116.586 18.3551 116.66 18.5153 116.807 18.6328C116.954 18.7503 117.185 18.8482 117.498 18.9265L118.286 19.1201C118.761 19.2353 119.115 19.4116 119.347 19.6489C119.58 19.8839 119.696 20.1869 119.696 20.5579C119.696 20.862 119.609 21.1339 119.434 21.3735C119.261 21.6132 119.019 21.8021 118.708 21.9403C118.397 22.0786 118.035 22.1477 117.623 22.1477C117.081 22.1477 116.633 22.0302 116.278 21.7952C115.923 21.5602 115.699 21.2168 115.604 20.7652L116.378 20.5717C116.452 20.8574 116.592 21.0717 116.797 21.2145C117.004 21.3574 117.275 21.4288 117.609 21.4288C117.989 21.4288 118.291 21.3482 118.514 21.1869C118.74 21.0233 118.853 20.8274 118.853 20.5993C118.853 20.415 118.789 20.2606 118.66 20.1362C118.531 20.0095 118.332 19.915 118.065 19.8528L117.18 19.6454C116.694 19.5302 116.337 19.3517 116.109 19.1097C115.883 18.8655 115.77 18.5602 115.77 18.1938C115.77 17.8943 115.854 17.6293 116.022 17.3989C116.193 17.1685 116.425 16.9876 116.717 16.8563C117.012 16.725 117.346 16.6593 117.719 16.6593C118.245 16.6593 118.657 16.7745 118.957 17.0049C119.259 17.2353 119.473 17.5395 119.6 17.9173Z" fill="#858E96"/>
-<path d="M278 40.168C277.118 40.168 276.342 39.8607 275.672 39.2461C275.002 38.6315 274.667 37.7999 274.667 36.7513C274.667 36.0846 274.922 35.3607 275.432 34.5794C275.943 33.7982 276.719 32.9527 277.76 32.043C277.795 32.0152 277.833 31.9926 277.875 31.9753C277.917 31.9579 277.958 31.9492 278 31.9492C278.042 31.9492 278.083 31.9579 278.125 31.9753C278.167 31.9926 278.205 32.0152 278.239 32.043C279.281 32.9527 280.057 33.7982 280.568 34.5794C281.078 35.3607 281.333 36.0846 281.333 36.7513C281.333 37.7999 280.998 38.6315 280.328 39.2461C279.658 39.8607 278.882 40.168 278 40.168ZM278 39.543C278.764 39.543 279.406 39.2791 279.927 38.7513C280.448 38.2235 280.708 37.5569 280.708 36.7513C280.708 36.2027 280.477 35.5794 280.015 34.8815C279.554 34.1836 278.882 33.4457 278 32.668C277.118 33.4457 276.446 34.1836 275.984 34.8815C275.522 35.5794 275.292 36.2027 275.292 36.7513C275.292 37.5569 275.552 38.2235 276.073 38.7513C276.594 39.2791 277.236 39.543 278 39.543ZM277.989 38.8346C278.101 38.8346 278.186 38.8155 278.245 38.7773C278.304 38.7391 278.333 38.6819 278.333 38.6055C278.333 38.5291 278.304 38.4701 278.245 38.4284C278.186 38.3867 278.097 38.3659 277.979 38.3659C277.687 38.3659 277.39 38.2739 277.088 38.0898C276.786 37.9058 276.594 37.5812 276.51 37.1159C276.496 37.0534 276.465 37.003 276.417 36.9648C276.368 36.9266 276.316 36.9076 276.26 36.9076C276.184 36.9076 276.125 36.9371 276.083 36.9961C276.042 37.0551 276.028 37.1159 276.042 37.1784C276.146 37.7617 276.392 38.1836 276.781 38.444C277.17 38.7044 277.573 38.8346 277.989 38.8346Z" fill="#858E96"/>
-</g>
-<g filter="url(#filter1_d_1900_49885)">
-<rect x="3" y="22" width="279" height="80" rx="5.5615" fill="white"/>
-<rect x="14" y="50" width="103" height="10" rx="5" fill="#DEE2E6"/>
-<rect x="14" y="67" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
-<rect x="14" y="81" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
-<path d="M14.9802 41.0371V33.9588H19.252V34.7192H15.8373V37.1109H19.0308V37.8712H15.8373V40.2767H19.3073V41.0371H14.9802ZM25.0273 35.7284L23.0642 41.0371H22.2347L20.2716 35.7284H21.1564L22.6218 39.9588H22.6771L24.1425 35.7284H25.0273ZM28.1396 41.1477C27.6281 41.1477 27.1869 41.0348 26.8159 40.809C26.4472 40.5809 26.1627 40.2629 25.9622 39.8551C25.7641 39.445 25.665 38.968 25.665 38.4242C25.665 37.8805 25.7641 37.4012 25.9622 36.9865C26.1627 36.5694 26.4415 36.2445 26.7986 36.0118C27.1581 35.7768 27.5774 35.6593 28.0567 35.6593C28.3332 35.6593 28.6062 35.7054 28.8758 35.7975C29.1454 35.8897 29.3907 36.0395 29.6119 36.2468C29.8331 36.4519 30.0094 36.7238 30.1407 37.0625C30.2721 37.4012 30.3377 37.8182 30.3377 38.3136V38.6593H26.2456V37.9542H29.5083C29.5083 37.6547 29.4484 37.3874 29.3285 37.1524C29.211 36.9173 29.0428 36.7319 28.8239 36.5959C28.6073 36.46 28.3516 36.392 28.0567 36.392C27.7318 36.392 27.4507 36.4726 27.2134 36.6339C26.9783 36.7929 26.7975 37.0003 26.6707 37.256C26.544 37.5118 26.4806 37.786 26.4806 38.0786V38.5487C26.4806 38.9496 26.5498 39.2894 26.688 39.5682C26.8286 39.8447 27.0233 40.0556 27.2721 40.2007C27.521 40.3436 27.8101 40.415 28.1396 40.415C28.3539 40.415 28.5474 40.385 28.7202 40.3251C28.8954 40.2629 29.0463 40.1708 29.173 40.0486C29.2997 39.9242 29.3977 39.7698 29.4668 39.5855L30.2548 39.8067C30.1718 40.074 30.0324 40.309 29.8366 40.5118C29.6407 40.7122 29.3988 40.8689 29.1108 40.9818C28.8228 41.0924 28.4991 41.1477 28.1396 41.1477ZM32.3942 37.8436V41.0371H31.5785V35.7284H32.3665V36.5579H32.4356C32.5601 36.2883 32.749 36.0717 33.0025 35.9081C33.2559 35.7422 33.5831 35.6593 33.984 35.6593C34.3435 35.6593 34.658 35.733 34.9276 35.8805C35.1971 36.0256 35.4068 36.2468 35.5566 36.5441C35.7064 36.839 35.7812 37.2123 35.7812 37.6639V41.0371H34.9656V37.7192C34.9656 37.3021 34.8573 36.9772 34.6407 36.7445C34.4241 36.5095 34.1269 36.392 33.749 36.392C33.4886 36.392 33.2559 36.4484 33.0508 36.5613C32.8481 36.6743 32.6879 36.839 32.5704 37.0556C32.4529 37.2722 32.3942 37.5348 32.3942 37.8436ZM37.2717 41.0371V35.7284H38.0874V41.0371H37.2717ZM37.6865 34.8436C37.5275 34.8436 37.3904 34.7895 37.2752 34.6812C37.1623 34.5729 37.1058 34.4427 37.1058 34.2906C37.1058 34.1386 37.1623 34.0084 37.2752 33.9001C37.3904 33.7918 37.5275 33.7376 37.6865 33.7376C37.8454 33.7376 37.9814 33.7918 38.0943 33.9001C38.2095 34.0084 38.2671 34.1386 38.2671 34.2906C38.2671 34.4427 38.2095 34.5729 38.0943 34.6812C37.9814 34.7895 37.8454 34.8436 37.6865 34.8436ZM40.397 37.8436V41.0371H39.5813V35.7284H40.3693V36.5579H40.4384C40.5629 36.2883 40.7518 36.0717 41.0053 35.9081C41.2587 35.7422 41.5859 35.6593 41.9868 35.6593C42.3463 35.6593 42.6608 35.733 42.9304 35.8805C43.1999 36.0256 43.4096 36.2468 43.5594 36.5441C43.7092 36.839 43.784 37.2123 43.784 37.6639V41.0371H42.9684V37.7192C42.9684 37.3021 42.8601 36.9772 42.6435 36.7445C42.4269 36.5095 42.1297 36.392 41.7518 36.392C41.4914 36.392 41.2587 36.4484 41.0536 36.5613C40.8509 36.6743 40.6907 36.839 40.5732 37.0556C40.4557 37.2722 40.397 37.5348 40.397 37.8436ZM47.4174 43.1385C47.0233 43.1385 46.6846 43.0878 46.4012 42.9864C46.1178 42.8873 45.8817 42.756 45.6927 42.5924C45.5061 42.4311 45.3575 42.2583 45.2469 42.074L45.8966 41.6177C45.9704 41.7145 46.0637 41.8251 46.1766 41.9495C46.2895 42.0763 46.4439 42.1857 46.6397 42.2779C46.8379 42.3723 47.0971 42.4196 47.4174 42.4196C47.8459 42.4196 48.1996 42.3159 48.4784 42.1085C48.7572 41.9012 48.8966 41.5763 48.8966 41.1339V40.0556H48.8275C48.7676 40.1523 48.6823 40.2721 48.5717 40.415C48.4634 40.5555 48.3067 40.6811 48.1017 40.7917C47.8989 40.9 47.6247 40.9542 47.2791 40.9542C46.8505 40.9542 46.4657 40.8528 46.1247 40.65C45.786 40.4473 45.5176 40.1523 45.3194 39.7652C45.1236 39.3781 45.0257 38.9081 45.0257 38.3551C45.0257 37.8113 45.1213 37.3378 45.3125 36.9346C45.5038 36.5291 45.7699 36.2157 46.1109 35.9945C46.4519 35.771 46.8459 35.6593 47.2929 35.6593C47.6385 35.6593 47.9127 35.7169 48.1155 35.8321C48.3206 35.945 48.4772 36.074 48.5855 36.2192C48.6961 36.362 48.7814 36.4796 48.8413 36.5717H48.9242V35.7284H49.7123V41.1892C49.7123 41.6454 49.6086 42.0164 49.4012 42.3021C49.1961 42.5901 48.9196 42.8009 48.5717 42.9346C48.2261 43.0705 47.8413 43.1385 47.4174 43.1385ZM47.3897 40.2214C47.7169 40.2214 47.9934 40.1466 48.2192 39.9968C48.445 39.847 48.6166 39.6316 48.7342 39.3505C48.8517 39.0694 48.9104 38.733 48.9104 38.3413C48.9104 37.9588 48.8528 37.6212 48.7376 37.3286C48.6224 37.036 48.4519 36.8067 48.2261 36.6408C48.0003 36.4749 47.7215 36.392 47.3897 36.392C47.0441 36.392 46.7561 36.4796 46.5257 36.6547C46.2975 36.8298 46.1259 37.0648 46.0107 37.3597C45.8978 37.6547 45.8413 37.9818 45.8413 38.3413C45.8413 38.7099 45.8989 39.036 46.0141 39.3194C46.1317 39.6005 46.3045 39.8217 46.5326 39.983C46.763 40.142 47.0487 40.2214 47.3897 40.2214ZM57.9242 35.7284C57.8827 35.3782 57.7145 35.1063 57.4196 34.9127C57.1246 34.7192 56.7629 34.6224 56.3343 34.6224C56.021 34.6224 55.7468 34.6731 55.5117 34.7745C55.279 34.8759 55.097 35.0153 54.9657 35.1927C54.8366 35.3701 54.7721 35.5717 54.7721 35.7975C54.7721 35.9865 54.817 36.1489 54.9069 36.2849C54.9991 36.4185 55.1166 36.5302 55.2594 36.6201C55.4023 36.7077 55.5521 36.7802 55.7087 36.8378C55.8654 36.8931 56.0094 36.9381 56.1408 36.9726L56.8597 37.1662C57.044 37.2146 57.249 37.2814 57.4749 37.3666C57.703 37.4519 57.9207 37.5683 58.1281 37.7157C58.3377 37.8609 58.5106 38.0475 58.6465 38.2756C58.7824 38.5037 58.8504 38.7837 58.8504 39.1155C58.8504 39.498 58.7502 39.8436 58.5497 40.1523C58.3516 40.4611 58.0613 40.7065 57.6788 40.8885C57.2986 41.0705 56.8366 41.1615 56.2928 41.1615C55.7859 41.1615 55.347 41.0797 54.976 40.9161C54.6074 40.7526 54.3171 40.5244 54.1051 40.2318C53.8954 39.9392 53.7767 39.5993 53.7491 39.2122H54.6339C54.6569 39.4795 54.7468 39.7007 54.9035 39.8758C55.0624 40.0486 55.2629 40.1777 55.5048 40.2629C55.7491 40.3459 56.0117 40.3873 56.2928 40.3873C56.62 40.3873 56.9138 40.3344 57.1742 40.2284C57.4345 40.1201 57.6408 39.9703 57.7928 39.7791C57.9449 39.5855 58.0209 39.3597 58.0209 39.1016C58.0209 38.8666 57.9553 38.6754 57.8239 38.5279C57.6926 38.3805 57.5198 38.2606 57.3055 38.1685C57.0912 38.0763 56.8597 37.9957 56.6108 37.9265L55.7398 37.6777C55.1869 37.5187 54.7491 37.2918 54.4265 36.9968C54.1039 36.7019 53.9426 36.316 53.9426 35.839C53.9426 35.4427 54.0498 35.0971 54.2641 34.8021C54.4806 34.5049 54.771 34.2745 55.135 34.1109C55.5014 33.945 55.9104 33.8621 56.362 33.8621C56.8182 33.8621 57.2237 33.9439 57.5785 34.1075C57.9334 34.2687 58.2145 34.4899 58.4218 34.771C58.6315 35.0521 58.7421 35.3713 58.7536 35.7284H57.9242ZM62.4578 35.7284V36.4196H59.7067V35.7284H62.4578ZM60.5085 34.4565H61.3242V39.5164C61.3242 39.7468 61.3576 39.9196 61.4244 40.0348C61.4935 40.1477 61.5811 40.2238 61.6871 40.2629C61.7954 40.2998 61.9094 40.3182 62.0292 40.3182C62.1191 40.3182 62.1928 40.3136 62.2504 40.3044C62.308 40.2929 62.3541 40.2837 62.3887 40.2767L62.5546 41.0095C62.4993 41.0302 62.4221 41.0509 62.323 41.0717C62.2239 41.0947 62.0984 41.1062 61.9463 41.1062C61.7159 41.1062 61.4901 41.0567 61.2689 40.9576C61.05 40.8585 60.868 40.7076 60.7228 40.5049C60.5799 40.3021 60.5085 40.0463 60.5085 39.7376V34.4565ZM65.247 41.1615C64.9106 41.1615 64.6053 41.0982 64.3311 40.9714C64.0569 40.8424 63.8391 40.6569 63.6778 40.415C63.5166 40.1708 63.4359 39.8758 63.4359 39.5302C63.4359 39.2261 63.4958 38.9795 63.6156 38.7906C63.7354 38.5993 63.8956 38.4496 64.096 38.3413C64.2965 38.233 64.5177 38.1523 64.7596 38.0994C65.0039 38.0441 65.2493 38.0003 65.4958 37.968C65.8184 37.9265 66.0799 37.8954 66.2804 37.8747C66.4831 37.8517 66.6306 37.8136 66.7227 37.7606C66.8172 37.7076 66.8644 37.6155 66.8644 37.4841V37.4565C66.8644 37.1155 66.7711 36.8505 66.5845 36.6616C66.4002 36.4726 66.1202 36.3782 65.7446 36.3782C65.3552 36.3782 65.05 36.4634 64.8288 36.6339C64.6076 36.8044 64.452 36.9865 64.3622 37.18L63.588 36.9035C63.7262 36.5809 63.9106 36.3298 64.141 36.1501C64.3737 35.968 64.6271 35.8413 64.9013 35.7699C65.1778 35.6961 65.4497 35.6593 65.717 35.6593C65.8875 35.6593 66.0834 35.68 66.3045 35.7215C66.528 35.7607 66.7435 35.8425 66.9509 35.9669C67.1605 36.0913 67.3345 36.2791 67.4727 36.5302C67.611 36.7814 67.6801 37.1178 67.6801 37.5394V41.0371H66.8644V40.3182H66.823C66.7677 40.4334 66.6755 40.5567 66.5465 40.688C66.4174 40.8194 66.2458 40.9311 66.0315 41.0233C65.8172 41.1154 65.5557 41.1615 65.247 41.1615ZM65.3714 40.4288C65.694 40.4288 65.9658 40.3655 66.187 40.2387C66.4105 40.112 66.5787 39.9484 66.6916 39.748C66.8068 39.5475 66.8644 39.3367 66.8644 39.1155V38.3689C66.8299 38.4104 66.7539 38.4484 66.6363 38.483C66.5211 38.5152 66.3875 38.544 66.2354 38.5694C66.0857 38.5924 65.9393 38.6132 65.7965 38.6316C65.6559 38.6477 65.5419 38.6616 65.4543 38.6731C65.2423 38.7007 65.0442 38.7457 64.8599 38.8079C64.6778 38.8678 64.5304 38.9588 64.4175 39.0809C64.3069 39.2007 64.2516 39.3643 64.2516 39.5717C64.2516 39.8551 64.3564 40.0694 64.5661 40.2145C64.7781 40.3574 65.0465 40.4288 65.3714 40.4288ZM69.9845 37.8436V41.0371H69.1689V35.7284H69.9569V36.5579H70.026C70.1504 36.2883 70.3394 36.0717 70.5928 35.9081C70.8463 35.7422 71.1734 35.6593 71.5744 35.6593C71.9338 35.6593 72.2483 35.733 72.5179 35.8805C72.7875 36.0256 72.9972 36.2468 73.1469 36.5441C73.2967 36.839 73.3716 37.2123 73.3716 37.6639V41.0371H72.5559V37.7192C72.5559 37.3021 72.4476 36.9772 72.231 36.7445C72.0145 36.5095 71.7172 36.392 71.3393 36.392C71.079 36.392 70.8463 36.4484 70.6412 36.5613C70.4384 36.6743 70.2783 36.839 70.1608 37.0556C70.0433 37.2722 69.9845 37.5348 69.9845 37.8436ZM76.8666 41.1477C76.4243 41.1477 76.0337 41.036 75.695 40.8125C75.3563 40.5867 75.0913 40.2687 74.9001 39.8585C74.7088 39.4461 74.6132 38.9588 74.6132 38.3966C74.6132 37.839 74.7088 37.3551 74.9001 36.945C75.0913 36.5349 75.3574 36.218 75.6985 35.9945C76.0395 35.771 76.4335 35.6593 76.8805 35.6593C77.2261 35.6593 77.4991 35.7169 77.6996 35.8321C77.9024 35.945 78.0567 36.074 78.1627 36.2192C78.271 36.362 78.3551 36.4796 78.415 36.5717H78.4841V33.9588H79.2998V41.0371H78.5118V40.2214H78.415C78.3551 40.3182 78.2699 40.4403 78.1593 40.5878C78.0487 40.733 77.8908 40.8631 77.6858 40.9784C77.4807 41.0913 77.2077 41.1477 76.8666 41.1477ZM76.9772 40.415C77.3044 40.415 77.5809 40.3297 77.8067 40.1592C78.0325 39.9864 78.2042 39.748 78.3217 39.4438C78.4392 39.1374 78.498 38.7837 78.498 38.3828C78.498 37.9864 78.4404 37.6397 78.3252 37.3424C78.21 37.0429 78.0394 36.8102 77.8136 36.6443C77.5878 36.4761 77.309 36.392 76.9772 36.392C76.6316 36.392 76.3436 36.4807 76.1132 36.6581C75.8851 36.8332 75.7134 37.0717 75.5982 37.3736C75.4853 37.6731 75.4289 38.0095 75.4289 38.3828C75.4289 38.7606 75.4865 39.1039 75.6017 39.4127C75.7192 39.7192 75.892 39.9634 76.1201 40.1454C76.3505 40.3251 76.6362 40.415 76.9772 40.415ZM84.2525 38.8666V35.7284H85.0682V41.0371H84.2525V40.1385H84.1972C84.0728 40.4081 83.8792 40.6373 83.6166 40.8263C83.3539 41.0129 83.0221 41.1062 82.6212 41.1062C82.2894 41.1062 81.9945 41.0337 81.7364 40.8885C81.4784 40.741 81.2756 40.5198 81.1281 40.2249C80.9807 39.9277 80.9069 39.5533 80.9069 39.1016V35.7284H81.7226V39.0463C81.7226 39.4334 81.8309 39.7422 82.0475 39.9726C82.2664 40.203 82.5452 40.3182 82.8839 40.3182C83.0866 40.3182 83.2928 40.2664 83.5025 40.1627C83.7145 40.059 83.8919 39.9 84.0348 39.6857C84.1799 39.4715 84.2525 39.1984 84.2525 38.8666ZM86.5621 43.0279V35.7284H87.3501V36.5717H87.4469C87.5068 36.4796 87.5898 36.362 87.6957 36.2192C87.804 36.074 87.9584 35.945 88.1589 35.8321C88.3616 35.7169 88.6358 35.6593 88.9814 35.6593C89.4284 35.6593 89.8225 35.771 90.1635 35.9945C90.5045 36.218 90.7706 36.5349 90.9618 36.945C91.1531 37.3551 91.2487 37.839 91.2487 38.3966C91.2487 38.9588 91.1531 39.4461 90.9618 39.8585C90.7706 40.2687 90.5056 40.5867 90.1669 40.8125C89.8282 41.036 89.4377 41.1477 88.9953 41.1477C88.6543 41.1477 88.3812 41.0913 88.1762 40.9784C87.9711 40.8631 87.8133 40.733 87.7027 40.5878C87.5921 40.4403 87.5068 40.3182 87.4469 40.2214H87.3778V43.0279H86.5621ZM87.364 38.3828C87.364 38.7837 87.4227 39.1374 87.5402 39.4438C87.6577 39.748 87.8294 39.9864 88.0552 40.1592C88.281 40.3297 88.5575 40.415 88.8847 40.415C89.2257 40.415 89.5102 40.3251 89.7384 40.1454C89.9688 39.9634 90.1416 39.7192 90.2568 39.4127C90.3743 39.1039 90.433 38.7606 90.433 38.3828C90.433 38.0095 90.3754 37.6731 90.2602 37.3736C90.1473 37.0717 89.9757 36.8332 89.7453 36.6581C89.5172 36.4807 89.2303 36.392 88.8847 36.392C88.5529 36.392 88.2741 36.4761 88.0483 36.6443C87.8225 36.8102 87.652 37.0429 87.5368 37.3424C87.4216 37.6397 87.364 37.9864 87.364 38.3828ZM100.954 33.9588V41.0371H100.124L96.2671 35.4796H96.198V41.0371H95.3408V33.9588H96.1703L100.041 39.5302H100.11V33.9588H100.954ZM104.715 41.1477C104.236 41.1477 103.815 41.0337 103.453 40.8055C103.094 40.5774 102.813 40.2583 102.61 39.8482C102.41 39.438 102.309 38.9588 102.309 38.4104C102.309 37.8574 102.41 37.3747 102.61 36.9623C102.813 36.5498 103.094 36.2296 103.453 36.0014C103.815 35.7733 104.236 35.6593 104.715 35.6593C105.194 35.6593 105.613 35.7733 105.973 36.0014C106.335 36.2296 106.616 36.5498 106.816 36.9623C107.019 37.3747 107.12 37.8574 107.12 38.4104C107.12 38.9588 107.019 39.438 106.816 39.8482C106.616 40.2583 106.335 40.5774 105.973 40.8055C105.613 41.0337 105.194 41.1477 104.715 41.1477ZM104.715 40.415C105.079 40.415 105.378 40.3217 105.613 40.135C105.849 39.9484 106.022 39.703 106.135 39.3989C106.248 39.0947 106.305 38.7652 106.305 38.4104C106.305 38.0556 106.248 37.7249 106.135 37.4185C106.022 37.112 105.849 36.8643 105.613 36.6754C105.378 36.4865 105.079 36.392 104.715 36.392C104.351 36.392 104.051 36.4865 103.816 36.6754C103.581 36.8643 103.407 37.112 103.294 37.4185C103.181 37.7249 103.125 38.0556 103.125 38.4104C103.125 38.7652 103.181 39.0947 103.294 39.3989C103.407 39.703 103.581 39.9484 103.816 40.135C104.051 40.3217 104.351 40.415 104.715 40.415ZM110.674 35.7284V36.4196H107.923V35.7284H110.674ZM108.725 34.4565H109.541V39.5164C109.541 39.7468 109.574 39.9196 109.641 40.0348C109.71 40.1477 109.797 40.2238 109.903 40.2629C110.012 40.2998 110.126 40.3182 110.246 40.3182C110.335 40.3182 110.409 40.3136 110.467 40.3044C110.524 40.2929 110.571 40.2837 110.605 40.2767L110.771 41.0095C110.716 41.0302 110.638 41.0509 110.539 41.0717C110.44 41.0947 110.315 41.1062 110.163 41.1062C109.932 41.1062 109.706 41.0567 109.485 40.9576C109.266 40.8585 109.084 40.7076 108.939 40.5049C108.796 40.3021 108.725 40.0463 108.725 39.7376V34.4565ZM114.07 41.1477C113.558 41.1477 113.117 41.0348 112.746 40.809C112.378 40.5809 112.093 40.2629 111.893 39.8551C111.694 39.445 111.595 38.968 111.595 38.4242C111.595 37.8805 111.694 37.4012 111.893 36.9865C112.093 36.5694 112.372 36.2445 112.729 36.0118C113.088 35.7768 113.508 35.6593 113.987 35.6593C114.263 35.6593 114.536 35.7054 114.806 35.7975C115.076 35.8897 115.321 36.0395 115.542 36.2468C115.763 36.4519 115.94 36.7238 116.071 37.0625C116.202 37.4012 116.268 37.8182 116.268 38.3136V38.6593H112.176V37.9542H115.439C115.439 37.6547 115.379 37.3874 115.259 37.1524C115.141 36.9173 114.973 36.7319 114.754 36.5959C114.538 36.46 114.282 36.392 113.987 36.392C113.662 36.392 113.381 36.4726 113.144 36.6339C112.909 36.7929 112.728 37.0003 112.601 37.256C112.474 37.5118 112.411 37.786 112.411 38.0786V38.5487C112.411 38.9496 112.48 39.2894 112.618 39.5682C112.759 39.8447 112.954 40.0556 113.202 40.2007C113.451 40.3436 113.74 40.415 114.07 40.415C114.284 40.415 114.478 40.385 114.651 40.3251C114.826 40.2629 114.977 40.1708 115.103 40.0486C115.23 39.9242 115.328 39.7698 115.397 39.5855L116.185 39.8067C116.102 40.074 115.963 40.309 115.767 40.5118C115.571 40.7122 115.329 40.8689 115.041 40.9818C114.753 41.0924 114.429 41.1477 114.07 41.1477ZM121.269 36.9173L120.536 37.1247C120.49 37.0026 120.422 36.8839 120.333 36.7687C120.245 36.6512 120.125 36.5544 119.973 36.4784C119.821 36.4024 119.626 36.3643 119.389 36.3643C119.064 36.3643 118.793 36.4392 118.577 36.589C118.362 36.7365 118.255 36.9242 118.255 37.1524C118.255 37.3551 118.329 37.5153 118.477 37.6328C118.624 37.7503 118.854 37.8482 119.168 37.9265L119.956 38.1201C120.43 38.2353 120.784 38.4116 121.017 38.6489C121.25 38.8839 121.366 39.1869 121.366 39.5579C121.366 39.862 121.278 40.1339 121.103 40.3735C120.93 40.6132 120.688 40.8021 120.377 40.9403C120.066 41.0786 119.705 41.1477 119.292 41.1477C118.751 41.1477 118.303 41.0302 117.948 40.7952C117.593 40.5602 117.368 40.2168 117.274 39.7652L118.048 39.5717C118.122 39.8574 118.261 40.0717 118.466 40.2145C118.674 40.3574 118.944 40.4288 119.278 40.4288C119.659 40.4288 119.96 40.3482 120.184 40.1869C120.41 40.0233 120.523 39.8274 120.523 39.5993C120.523 39.415 120.458 39.2606 120.329 39.1362C120.2 39.0095 120.002 38.915 119.735 38.8528L118.85 38.6454C118.364 38.5302 118.006 38.3517 117.778 38.1097C117.553 37.8655 117.44 37.5602 117.44 37.1938C117.44 36.8943 117.524 36.6293 117.692 36.3989C117.862 36.1685 118.094 35.9876 118.387 35.8563C118.682 35.725 119.016 35.6593 119.389 35.6593C119.914 35.6593 120.327 35.7745 120.626 36.0049C120.928 36.2353 121.142 36.5395 121.269 36.9173Z" fill="#858E96"/>
-<path d="M265.417 59.75C265.34 59.75 265.281 59.7257 265.239 59.6771C265.198 59.6285 265.184 59.566 265.198 59.4896L265.583 56.8125H264.062C263.986 56.8125 263.93 56.7778 263.896 56.7083C263.861 56.6389 263.861 56.5729 263.896 56.5104L266.364 52.3854C266.385 52.3507 266.42 52.3194 266.469 52.2917C266.517 52.2639 266.566 52.25 266.614 52.25C266.691 52.25 266.75 52.2743 266.792 52.3229C266.833 52.3715 266.847 52.434 266.833 52.5104L266.448 55.1771H267.948C268.024 55.1771 268.081 55.2118 268.12 55.2812C268.158 55.3507 268.16 55.4167 268.125 55.4792L265.667 59.6146C265.646 59.6493 265.611 59.6806 265.562 59.7083C265.514 59.7361 265.465 59.75 265.417 59.75V59.75Z" fill="#858E96"/>
-</g>
-<defs>
-<filter id="filter0_d_1900_49885" x="11.2193" y="0.219251" width="284.561" height="85.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1900_49885"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1900_49885" result="shape"/>
-</filter>
-<filter id="filter1_d_1900_49885" x="0.219251" y="19.2193" width="284.561" height="85.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1900_49885"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1900_49885" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/empty-view.svg b/apps/app/public/empty-state/empty-view.svg
deleted file mode 100644
index dc209919a..000000000
--- a/apps/app/public/empty-state/empty-view.svg
+++ /dev/null
@@ -1,147 +0,0 @@
-<svg width="301" height="90" viewBox="0 0 301 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g filter="url(#filter0_d_2884_60024)">
-<rect x="19" y="3.5" width="279" height="65" rx="5.5615" fill="white"/>
-<path d="M36.676 17.6708H35.8188C35.7682 17.4243 35.6794 17.2077 35.5527 17.021C35.4283 16.8344 35.2762 16.6777 35.0965 16.551C34.9191 16.422 34.7221 16.3252 34.5055 16.2607C34.2889 16.1962 34.0631 16.1639 33.8281 16.1639C33.3995 16.1639 33.0113 16.2722 32.6633 16.4888C32.3177 16.7054 32.0424 17.0245 31.8373 17.4461C31.6346 17.8678 31.5332 18.3851 31.5332 18.998C31.5332 19.6109 31.6346 20.1281 31.8373 20.5498C32.0424 20.9715 32.3177 21.2906 32.6633 21.5072C33.0113 21.7238 33.3995 21.832 33.8281 21.832C34.0631 21.832 34.2889 21.7998 34.5055 21.7353C34.7221 21.6708 34.9191 21.5751 35.0965 21.4484C35.2762 21.3194 35.4283 21.1615 35.5527 20.9749C35.6794 20.786 35.7682 20.5694 35.8188 20.3252H36.676C36.6115 20.6869 36.494 21.0106 36.3234 21.2963C36.1529 21.582 35.941 21.8251 35.6875 22.0256C35.4341 22.2237 35.1495 22.3747 34.8338 22.4784C34.5205 22.582 34.1852 22.6339 33.8281 22.6339C33.2244 22.6339 32.6875 22.4864 32.2175 22.1915C31.7475 21.8966 31.3776 21.4772 31.1081 20.9334C30.8385 20.3897 30.7037 19.7445 30.7037 18.998C30.7037 18.2514 30.8385 17.6063 31.1081 17.0625C31.3776 16.5187 31.7475 16.0994 32.2175 15.8045C32.6875 15.5095 33.2244 15.3621 33.8281 15.3621C34.1852 15.3621 34.5205 15.4139 34.8338 15.5176C35.1495 15.6213 35.4341 15.7734 35.6875 15.9738C35.941 16.172 36.1529 16.4139 36.3234 16.6996C36.494 16.983 36.6115 17.3067 36.676 17.6708ZM40.1071 22.6477C39.6278 22.6477 39.2073 22.5337 38.8456 22.3055C38.4862 22.0774 38.2051 21.7583 38.0023 21.3482C37.8018 20.938 37.7016 20.4588 37.7016 19.9104C37.7016 19.3574 37.8018 18.8747 38.0023 18.4623C38.2051 18.0498 38.4862 17.7296 38.8456 17.5014C39.2073 17.2733 39.6278 17.1593 40.1071 17.1593C40.5864 17.1593 41.0057 17.2733 41.3652 17.5014C41.7269 17.7296 42.008 18.0498 42.2085 18.4623C42.4112 18.8747 42.5126 19.3574 42.5126 19.9104C42.5126 20.4588 42.4112 20.938 42.2085 21.3482C42.008 21.7583 41.7269 22.0774 41.3652 22.3055C41.0057 22.5337 40.5864 22.6477 40.1071 22.6477ZM40.1071 21.915C40.4712 21.915 40.7707 21.8217 41.0057 21.635C41.2407 21.4484 41.4147 21.203 41.5276 20.8989C41.6405 20.5947 41.697 20.2652 41.697 19.9104C41.697 19.5556 41.6405 19.2249 41.5276 18.9185C41.4147 18.612 41.2407 18.3643 41.0057 18.1754C40.7707 17.9865 40.4712 17.892 40.1071 17.892C39.7431 17.892 39.4435 17.9865 39.2085 18.1754C38.9735 18.3643 38.7995 18.612 38.6866 18.9185C38.5737 19.2249 38.5173 19.5556 38.5173 19.9104C38.5173 20.2652 38.5737 20.5947 38.6866 20.8989C38.7995 21.203 38.9735 21.4484 39.2085 21.635C39.4435 21.8217 39.7431 21.915 40.1071 21.915ZM43.7577 22.5371V17.2284H44.5457V18.0579H44.6148C44.7254 17.7745 44.904 17.5544 45.1505 17.3978C45.3971 17.2388 45.6932 17.1593 46.0388 17.1593C46.389 17.1593 46.6805 17.2388 46.9132 17.3978C47.1482 17.5544 47.3314 17.7745 47.4627 18.0579H47.518C47.654 17.7837 47.8579 17.566 48.1298 17.4047C48.4017 17.2411 48.7277 17.1593 49.1079 17.1593C49.5825 17.1593 49.9708 17.3079 50.2726 17.6051C50.5745 17.9001 50.7254 18.3597 50.7254 18.9841V22.5371H49.9097V18.9841C49.9097 18.5924 49.8026 18.3125 49.5883 18.1443C49.374 17.9761 49.1217 17.892 48.8314 17.892C48.4581 17.892 48.1689 18.0049 47.9639 18.2307C47.7588 18.4542 47.6563 18.7376 47.6563 19.0809V22.5371H46.8268V18.9012C46.8268 18.5994 46.7289 18.3563 46.533 18.1719C46.3372 17.9853 46.0849 17.892 45.7761 17.892C45.5641 17.892 45.366 17.9484 45.1817 18.0613C44.9996 18.1743 44.8522 18.3309 44.7393 18.5314C44.6287 18.7295 44.5734 18.9588 44.5734 19.2192V22.5371H43.7577ZM52.2167 24.5279V17.2284H53.0047V18.0717H53.1015C53.1614 17.9796 53.2444 17.862 53.3503 17.7192C53.4586 17.574 53.613 17.445 53.8135 17.3321C54.0162 17.2169 54.2904 17.1593 54.636 17.1593C55.083 17.1593 55.4771 17.271 55.8181 17.4945C56.1591 17.718 56.4252 18.0349 56.6164 18.445C56.8077 18.8551 56.9033 19.339 56.9033 19.8966C56.9033 20.4588 56.8077 20.9461 56.6164 21.3585C56.4252 21.7687 56.1602 22.0867 55.8215 22.3125C55.4828 22.536 55.0923 22.6477 54.6499 22.6477C54.3089 22.6477 54.0358 22.5913 53.8308 22.4784C53.6257 22.3631 53.4679 22.233 53.3573 22.0878C53.2467 21.9403 53.1614 21.8182 53.1015 21.7214H53.0324V24.5279H52.2167ZM53.0186 19.8828C53.0186 20.2837 53.0773 20.6374 53.1948 20.9438C53.3123 21.248 53.484 21.4864 53.7098 21.6592C53.9356 21.8297 54.2121 21.915 54.5393 21.915C54.8803 21.915 55.1648 21.8251 55.393 21.6454C55.6234 21.4634 55.7962 21.2192 55.9114 20.9127C56.0289 20.6039 56.0876 20.2606 56.0876 19.8828C56.0876 19.5095 56.03 19.1731 55.9148 18.8736C55.8019 18.5717 55.6303 18.3332 55.3999 18.1581C55.1718 17.9807 54.8849 17.892 54.5393 17.892C54.2075 17.892 53.9287 17.9761 53.7029 18.1443C53.4771 18.3102 53.3066 18.5429 53.1914 18.8424C53.0762 19.1397 53.0186 19.4864 53.0186 19.8828ZM58.9632 15.4588V22.5371H58.1475V15.4588H58.9632ZM62.6829 22.6477C62.1714 22.6477 61.7302 22.5348 61.3592 22.309C60.9905 22.0809 60.706 21.7629 60.5055 21.3551C60.3074 20.945 60.2083 20.468 60.2083 19.9242C60.2083 19.3805 60.3074 18.9012 60.5055 18.4865C60.706 18.0694 60.9848 17.7445 61.3419 17.5118C61.7014 17.2768 62.1207 17.1593 62.6 17.1593C62.8765 17.1593 63.1495 17.2054 63.4191 17.2975C63.6887 17.3897 63.9341 17.5395 64.1552 17.7468C64.3764 17.9519 64.5527 18.2238 64.684 18.5625C64.8154 18.9012 64.881 19.3182 64.881 19.8136V20.1593H60.7889V19.4542H64.0516C64.0516 19.1547 63.9917 18.8874 63.8718 18.6524C63.7543 18.4173 63.5861 18.2319 63.3672 18.0959C63.1506 17.96 62.8949 17.892 62.6 17.892C62.2751 17.892 61.994 17.9726 61.7567 18.1339C61.5216 18.2929 61.3408 18.5003 61.214 18.756C61.0873 19.0118 61.0239 19.286 61.0239 19.5786V20.0487C61.0239 20.4496 61.0931 20.7894 61.2313 21.0682C61.3719 21.3447 61.5666 21.5556 61.8154 21.7007C62.0643 21.8436 62.3534 21.915 62.6829 21.915C62.8972 21.915 63.0907 21.885 63.2636 21.8251C63.4387 21.7629 63.5896 21.6708 63.7163 21.5486C63.843 21.4242 63.941 21.2698 64.0101 21.0855L64.7981 21.3067C64.7151 21.574 64.5758 21.809 64.3799 22.0118C64.184 22.2122 63.9421 22.3689 63.6541 22.4818C63.3661 22.5924 63.0424 22.6477 62.6829 22.6477ZM68.4306 17.2284V17.9196H65.6794V17.2284H68.4306ZM66.4813 15.9565H67.2969V21.0164C67.2969 21.2468 67.3303 21.4196 67.3972 21.5348C67.4663 21.6477 67.5538 21.7238 67.6598 21.7629C67.7681 21.7998 67.8822 21.8182 68.002 21.8182C68.0918 21.8182 68.1656 21.8136 68.2232 21.8044C68.2808 21.7929 68.3269 21.7837 68.3614 21.7767L68.5273 22.5095C68.472 22.5302 68.3948 22.5509 68.2958 22.5717C68.1967 22.5947 68.0711 22.6062 67.919 22.6062C67.6886 22.6062 67.4628 22.5567 67.2416 22.4576C67.0227 22.3585 66.8407 22.2076 66.6955 22.0049C66.5527 21.8021 66.4813 21.5463 66.4813 21.2376V15.9565ZM71.8263 22.6477C71.3147 22.6477 70.8735 22.5348 70.5025 22.309C70.1339 22.0809 69.8493 21.7629 69.6489 21.3551C69.4507 20.945 69.3516 20.468 69.3516 19.9242C69.3516 19.3805 69.4507 18.9012 69.6489 18.4865C69.8493 18.0694 70.1281 17.7445 70.4853 17.5118C70.8447 17.2768 71.264 17.1593 71.7433 17.1593C72.0198 17.1593 72.2928 17.2054 72.5624 17.2975C72.832 17.3897 73.0774 17.5395 73.2986 17.7468C73.5198 17.9519 73.6961 18.2238 73.8274 18.5625C73.9587 18.9012 74.0244 19.3182 74.0244 19.8136V20.1593H69.9323V19.4542H73.1949C73.1949 19.1547 73.135 18.8874 73.0152 18.6524C72.8977 18.4173 72.7295 18.2319 72.5106 18.0959C72.294 17.96 72.0382 17.892 71.7433 17.892C71.4184 17.892 71.1373 17.9726 70.9 18.1339C70.665 18.2929 70.4841 18.5003 70.3574 18.756C70.2306 19.0118 70.1673 19.286 70.1673 19.5786V20.0487C70.1673 20.4496 70.2364 20.7894 70.3747 21.0682C70.5152 21.3447 70.7099 21.5556 70.9588 21.7007C71.2076 21.8436 71.4968 21.915 71.8263 21.915C72.0405 21.915 72.2341 21.885 72.4069 21.8251C72.582 21.7629 72.7329 21.6708 72.8597 21.5486C72.9864 21.4242 73.0843 21.2698 73.1534 21.0855L73.9414 21.3067C73.8585 21.574 73.7191 21.809 73.5232 22.0118C73.3274 22.2122 73.0855 22.3689 72.7974 22.4818C72.5094 22.5924 72.1857 22.6477 71.8263 22.6477ZM77.2697 22.6477C76.8274 22.6477 76.4368 22.536 76.0981 22.3125C75.7594 22.0867 75.4944 21.7687 75.3032 21.3585C75.1119 20.9461 75.0163 20.4588 75.0163 19.8966C75.0163 19.339 75.1119 18.8551 75.3032 18.445C75.4944 18.0349 75.7605 17.718 76.1016 17.4945C76.4426 17.271 76.8366 17.1593 77.2836 17.1593C77.6292 17.1593 77.9022 17.2169 78.1027 17.3321C78.3055 17.445 78.4598 17.574 78.5658 17.7192C78.6741 17.862 78.7582 17.9796 78.8181 18.0717H78.8872V15.4588H79.7029V22.5371H78.9149V21.7214H78.8181C78.7582 21.8182 78.673 21.9403 78.5624 22.0878C78.4518 22.233 78.2939 22.3631 78.0889 22.4784C77.8838 22.5913 77.6108 22.6477 77.2697 22.6477ZM77.3803 21.915C77.7075 21.915 77.984 21.8297 78.2098 21.6592C78.4356 21.4864 78.6073 21.248 78.7248 20.9438C78.8423 20.6374 78.9011 20.2837 78.9011 19.8828C78.9011 19.4864 78.8435 19.1397 78.7283 18.8424C78.6131 18.5429 78.4425 18.3102 78.2167 18.1443C77.9909 17.9761 77.7121 17.892 77.3803 17.892C77.0347 17.892 76.7467 17.9807 76.5163 18.1581C76.2882 18.3332 76.1165 18.5717 76.0013 18.8736C75.8884 19.1731 75.832 19.5095 75.832 19.8828C75.832 20.2606 75.8896 20.6039 76.0048 20.9127C76.1223 21.2192 76.2951 21.4634 76.5232 21.6454C76.7536 21.8251 77.0393 21.915 77.3803 21.915ZM88.803 15.4588H89.6602V20.1454C89.6602 20.6293 89.5461 21.0613 89.318 21.4415C89.0922 21.8194 88.7731 22.1178 88.3606 22.3367C87.9482 22.5532 87.4643 22.6615 86.9091 22.6615C86.3538 22.6615 85.8699 22.5532 85.4575 22.3367C85.045 22.1178 84.7247 21.8194 84.4966 21.4415C84.2708 21.0613 84.1579 20.6293 84.1579 20.1454V15.4588H85.0151V20.0763C85.0151 20.4219 85.0911 20.7295 85.2432 20.9991C85.3952 21.2664 85.6118 21.4772 85.8929 21.6316C86.1763 21.7837 86.515 21.8597 86.9091 21.8597C87.3031 21.8597 87.6418 21.7837 87.9252 21.6316C88.2086 21.4772 88.4252 21.2664 88.5749 20.9991C88.727 20.7295 88.803 20.4219 88.803 20.0763V15.4588ZM91.2613 22.5371V17.2284H92.0493V18.0302H92.1046C92.2013 17.7676 92.3764 17.5544 92.6299 17.3908C92.8834 17.2273 93.1691 17.1455 93.487 17.1455C93.5469 17.1455 93.6218 17.1466 93.7117 17.1489C93.8016 17.1512 93.8695 17.1547 93.9156 17.1593V17.9888C93.888 17.9819 93.8246 17.9715 93.7255 17.9577C93.6287 17.9415 93.5262 17.9335 93.4179 17.9335C93.1599 17.9335 92.9294 17.9876 92.7267 18.0959C92.5262 18.2019 92.3672 18.3494 92.2497 18.5383C92.1345 18.7249 92.0769 18.9381 92.0769 19.1777V22.5371H91.2613ZM96.8637 24.6385C96.4697 24.6385 96.131 24.5878 95.8476 24.4864C95.5642 24.3873 95.328 24.256 95.1391 24.0924C94.9525 23.9311 94.8038 23.7583 94.6932 23.574L95.343 23.1177C95.4167 23.2145 95.5101 23.3251 95.623 23.4495C95.7359 23.5763 95.8902 23.6857 96.0861 23.7779C96.2842 23.8723 96.5435 23.9196 96.8637 23.9196C97.2923 23.9196 97.646 23.8159 97.9248 23.6085C98.2036 23.4012 98.343 23.0763 98.343 22.6339V21.5556H98.2739C98.2139 21.6523 98.1287 21.7721 98.0181 21.915C97.9098 22.0555 97.7531 22.1811 97.5481 22.2917C97.3453 22.4 97.0711 22.4542 96.7255 22.4542C96.2969 22.4542 95.9121 22.3528 95.5711 22.15C95.2324 21.9473 94.964 21.6523 94.7658 21.2652C94.57 20.8781 94.472 20.4081 94.472 19.8551C94.472 19.3113 94.5677 18.8378 94.7589 18.4346C94.9502 18.0291 95.2163 17.7157 95.5573 17.4945C95.8983 17.271 96.2923 17.1593 96.7393 17.1593C97.0849 17.1593 97.3591 17.2169 97.5619 17.3321C97.7669 17.445 97.9236 17.574 98.0319 17.7192C98.1425 17.862 98.2278 17.9796 98.2877 18.0717H98.3706V17.2284H99.1586V22.6892C99.1586 23.1454 99.055 23.5164 98.8476 23.8021C98.6425 24.0901 98.366 24.3009 98.0181 24.4346C97.6725 24.5705 97.2877 24.6385 96.8637 24.6385ZM96.8361 21.7214C97.1633 21.7214 97.4398 21.6466 97.6656 21.4968C97.8914 21.347 98.063 21.1316 98.1805 20.8505C98.298 20.5694 98.3568 20.233 98.3568 19.8413C98.3568 19.4588 98.2992 19.1212 98.184 18.8286C98.0688 18.536 97.8983 18.3067 97.6725 18.1408C97.4467 17.9749 97.1679 17.892 96.8361 17.892C96.4905 17.892 96.2024 17.9796 95.972 18.1547C95.7439 18.3298 95.5723 18.5648 95.4571 18.8597C95.3442 19.1547 95.2877 19.4818 95.2877 19.8413C95.2877 20.2099 95.3453 20.536 95.4605 20.8194C95.578 21.1005 95.7508 21.3217 95.9789 21.483C96.2094 21.642 96.4951 21.7214 96.8361 21.7214ZM102.877 22.6477C102.366 22.6477 101.925 22.5348 101.554 22.309C101.185 22.0809 100.901 21.7629 100.7 21.3551C100.502 20.945 100.403 20.468 100.403 19.9242C100.403 19.3805 100.502 18.9012 100.7 18.4865C100.901 18.0694 101.179 17.7445 101.536 17.5118C101.896 17.2768 102.315 17.1593 102.795 17.1593C103.071 17.1593 103.344 17.2054 103.614 17.2975C103.883 17.3897 104.129 17.5395 104.35 17.7468C104.571 17.9519 104.747 18.2238 104.879 18.5625C105.01 18.9012 105.076 19.3182 105.076 19.8136V20.1593H100.984V19.4542H104.246C104.246 19.1547 104.186 18.8874 104.066 18.6524C103.949 18.4173 103.781 18.2319 103.562 18.0959C103.345 17.96 103.089 17.892 102.795 17.892C102.47 17.892 102.189 17.9726 101.951 18.1339C101.716 18.2929 101.535 18.5003 101.409 18.756C101.282 19.0118 101.219 19.286 101.219 19.5786V20.0487C101.219 20.4496 101.288 20.7894 101.426 21.0682C101.566 21.3447 101.761 21.5556 102.01 21.7007C102.259 21.8436 102.548 21.915 102.877 21.915C103.092 21.915 103.285 21.885 103.458 21.8251C103.633 21.7629 103.784 21.6708 103.911 21.5486C104.038 21.4242 104.136 21.2698 104.205 21.0855L104.993 21.3067C104.91 21.574 104.77 21.809 104.574 22.0118C104.379 22.2122 104.137 22.3689 103.849 22.4818C103.561 22.5924 103.237 22.6477 102.877 22.6477ZM107.132 19.3436V22.5371H106.316V17.2284H107.104V18.0579H107.174C107.298 17.7883 107.487 17.5717 107.74 17.4081C107.994 17.2422 108.321 17.1593 108.722 17.1593C109.081 17.1593 109.396 17.233 109.665 17.3805C109.935 17.5256 110.145 17.7468 110.294 18.0441C110.444 18.339 110.519 18.7123 110.519 19.1639V22.5371H109.703V19.2192C109.703 18.8021 109.595 18.4772 109.379 18.2445C109.162 18.0095 108.865 17.892 108.487 17.892C108.227 17.892 107.994 17.9484 107.789 18.0613C107.586 18.1743 107.426 18.339 107.308 18.5556C107.191 18.7722 107.132 19.0348 107.132 19.3436ZM114.318 17.2284V17.9196H111.567V17.2284H114.318ZM112.369 15.9565H113.185V21.0164C113.185 21.2468 113.218 21.4196 113.285 21.5348C113.354 21.6477 113.442 21.7238 113.548 21.7629C113.656 21.7998 113.77 21.8182 113.89 21.8182C113.98 21.8182 114.053 21.8136 114.111 21.8044C114.169 21.7929 114.215 21.7837 114.249 21.7767L114.415 22.5095C114.36 22.5302 114.283 22.5509 114.184 22.5717C114.084 22.5947 113.959 22.6062 113.807 22.6062C113.576 22.6062 113.351 22.5567 113.129 22.4576C112.911 22.3585 112.728 22.2076 112.583 22.0049C112.44 21.8021 112.369 21.5463 112.369 21.2376V15.9565ZM119.25 15.4588V22.5371H118.393V15.4588H119.25ZM124.619 18.4173L123.886 18.6247C123.84 18.5026 123.772 18.3839 123.682 18.2687C123.594 18.1512 123.475 18.0544 123.323 17.9784C123.17 17.9024 122.976 17.8643 122.738 17.8643C122.414 17.8643 122.143 17.9392 121.926 18.089C121.712 18.2365 121.605 18.4242 121.605 18.6524C121.605 18.8551 121.679 19.0153 121.826 19.1328C121.973 19.2503 122.204 19.3482 122.517 19.4265L123.305 19.6201C123.78 19.7353 124.134 19.9116 124.366 20.1489C124.599 20.3839 124.715 20.6869 124.715 21.0579C124.715 21.362 124.628 21.6339 124.453 21.8735C124.28 22.1132 124.038 22.3021 123.727 22.4403C123.416 22.5786 123.054 22.6477 122.642 22.6477C122.1 22.6477 121.652 22.5302 121.297 22.2952C120.942 22.0602 120.718 21.7168 120.623 21.2652L121.397 21.0717C121.471 21.3574 121.611 21.5717 121.816 21.7145C122.023 21.8574 122.294 21.9288 122.628 21.9288C123.008 21.9288 123.31 21.8482 123.533 21.6869C123.759 21.5233 123.872 21.3274 123.872 21.0993C123.872 20.915 123.808 20.7606 123.679 20.6362C123.55 20.5095 123.351 20.415 123.084 20.3528L122.199 20.1454C121.713 20.0302 121.356 19.8517 121.128 19.6097C120.902 19.3655 120.789 19.0602 120.789 18.6938C120.789 18.3943 120.873 18.1293 121.041 17.8989C121.212 17.6685 121.444 17.4876 121.736 17.3563C122.031 17.225 122.365 17.1593 122.738 17.1593C123.264 17.1593 123.676 17.2745 123.976 17.5049C124.278 17.7353 124.492 18.0395 124.619 18.4173ZM129.704 18.4173L128.971 18.6247C128.925 18.5026 128.857 18.3839 128.767 18.2687C128.679 18.1512 128.56 18.0544 128.407 17.9784C128.255 17.9024 128.061 17.8643 127.823 17.8643C127.498 17.8643 127.228 17.9392 127.011 18.089C126.797 18.2365 126.69 18.4242 126.69 18.6524C126.69 18.8551 126.763 19.0153 126.911 19.1328C127.058 19.2503 127.289 19.3482 127.602 19.4265L128.39 19.6201C128.865 19.7353 129.219 19.9116 129.451 20.1489C129.684 20.3839 129.8 20.6869 129.8 21.0579C129.8 21.362 129.713 21.6339 129.538 21.8735C129.365 22.1132 129.123 22.3021 128.812 22.4403C128.501 22.5786 128.139 22.6477 127.727 22.6477C127.185 22.6477 126.737 22.5302 126.382 22.2952C126.027 22.0602 125.803 21.7168 125.708 21.2652L126.482 21.0717C126.556 21.3574 126.696 21.5717 126.901 21.7145C127.108 21.8574 127.379 21.9288 127.713 21.9288C128.093 21.9288 128.395 21.8482 128.618 21.6869C128.844 21.5233 128.957 21.3274 128.957 21.0993C128.957 20.915 128.892 20.7606 128.763 20.6362C128.634 20.5095 128.436 20.415 128.169 20.3528L127.284 20.1454C126.798 20.0302 126.441 19.8517 126.213 19.6097C125.987 19.3655 125.874 19.0602 125.874 18.6938C125.874 18.3943 125.958 18.1293 126.126 17.8989C126.297 17.6685 126.528 17.4876 126.821 17.3563C127.116 17.225 127.45 17.1593 127.823 17.1593C128.349 17.1593 128.761 17.2745 129.061 17.5049C129.363 17.7353 129.577 18.0395 129.704 18.4173ZM134.374 20.3666V17.2284H135.189V22.5371H134.374V21.6385H134.318C134.194 21.9081 134 22.1373 133.738 22.3263C133.475 22.5129 133.143 22.6062 132.742 22.6062C132.411 22.6062 132.116 22.5337 131.858 22.3885C131.6 22.241 131.397 22.0198 131.249 21.7249C131.102 21.4277 131.028 21.0533 131.028 20.6016V17.2284H131.844V20.5463C131.844 20.9334 131.952 21.2422 132.169 21.4726C132.388 21.703 132.666 21.8182 133.005 21.8182C133.208 21.8182 133.414 21.7664 133.624 21.6627C133.836 21.559 134.013 21.4 134.156 21.1857C134.301 20.9715 134.374 20.6984 134.374 20.3666ZM138.909 22.6477C138.398 22.6477 137.956 22.5348 137.585 22.309C137.217 22.0809 136.932 21.7629 136.732 21.3551C136.534 20.945 136.434 20.468 136.434 19.9242C136.434 19.3805 136.534 18.9012 136.732 18.4865C136.932 18.0694 137.211 17.7445 137.568 17.5118C137.928 17.2768 138.347 17.1593 138.826 17.1593C139.103 17.1593 139.376 17.2054 139.645 17.2975C139.915 17.3897 140.16 17.5395 140.381 17.7468C140.603 17.9519 140.779 18.2238 140.91 18.5625C141.042 18.9012 141.107 19.3182 141.107 19.8136V20.1593H137.015V19.4542H140.278C140.278 19.1547 140.218 18.8874 140.098 18.6524C139.981 18.4173 139.812 18.2319 139.593 18.0959C139.377 17.96 139.121 17.892 138.826 17.892C138.501 17.892 138.22 17.9726 137.983 18.1339C137.748 18.2929 137.567 18.5003 137.44 18.756C137.313 19.0118 137.25 19.286 137.25 19.5786V20.0487C137.25 20.4496 137.319 20.7894 137.457 21.0682C137.598 21.3447 137.793 21.5556 138.042 21.7007C138.29 21.8436 138.58 21.915 138.909 21.915C139.123 21.915 139.317 21.885 139.49 21.8251C139.665 21.7629 139.816 21.6708 139.942 21.5486C140.069 21.4242 140.167 21.2698 140.236 21.0855L141.024 21.3067C140.941 21.574 140.802 21.809 140.606 22.0118C140.41 22.2122 140.168 22.3689 139.88 22.4818C139.592 22.5924 139.269 22.6477 138.909 22.6477ZM146.108 18.4173L145.376 18.6247C145.33 18.5026 145.262 18.3839 145.172 18.2687C145.084 18.1512 144.964 18.0544 144.812 17.9784C144.66 17.9024 144.465 17.8643 144.228 17.8643C143.903 17.8643 143.633 17.9392 143.416 18.089C143.202 18.2365 143.095 18.4242 143.095 18.6524C143.095 18.8551 143.168 19.0153 143.316 19.1328C143.463 19.2503 143.694 19.3482 144.007 19.4265L144.795 19.6201C145.27 19.7353 145.623 19.9116 145.856 20.1489C146.089 20.3839 146.205 20.6869 146.205 21.0579C146.205 21.362 146.118 21.6339 145.942 21.8735C145.77 22.1132 145.528 22.3021 145.217 22.4403C144.906 22.5786 144.544 22.6477 144.131 22.6477C143.59 22.6477 143.142 22.5302 142.787 22.2952C142.432 22.0602 142.207 21.7168 142.113 21.2652L142.887 21.0717C142.961 21.3574 143.1 21.5717 143.305 21.7145C143.513 21.8574 143.783 21.9288 144.118 21.9288C144.498 21.9288 144.8 21.8482 145.023 21.6869C145.249 21.5233 145.362 21.3274 145.362 21.0993C145.362 20.915 145.297 20.7606 145.168 20.6362C145.039 20.5095 144.841 20.415 144.574 20.3528L143.689 20.1454C143.203 20.0302 142.846 19.8517 142.618 19.6097C142.392 19.3655 142.279 19.0602 142.279 18.6938C142.279 18.3943 142.363 18.1293 142.531 17.8989C142.702 17.6685 142.933 17.4876 143.226 17.3563C143.521 17.225 143.855 17.1593 144.228 17.1593C144.754 17.1593 145.166 17.2745 145.465 17.5049C145.767 17.7353 145.982 18.0395 146.108 18.4173Z" fill="#858E96"/>
-<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
-<circle cx="82.3717" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="82.3722" cy="37.2784" r="2.64169" stroke="#FCBE1D" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
-<path d="M83.6306 35.6552C83.2676 35.3739 82.8209 35.2223 82.3618 35.2246C81.9026 35.2269 81.4574 35.383 81.0973 35.6678L82.372 37.2793L83.6306 35.6552Z" fill="#FCBE1D"/>
-<path d="M81.1106 38.9015C81.4736 39.1827 81.9203 39.3343 82.3794 39.332C82.8386 39.3297 83.2838 39.1737 83.6439 38.8888L82.3692 37.2774L81.1106 38.9015Z" fill="#FCBE1D"/>
-<circle cx="79.1432" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="79.1427" cy="37.2784" r="2.64169" stroke="#858E96" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
-<circle cx="75.9137" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="75.9132" cy="37.2784" r="2.64169" stroke="#ACB5BD" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
-<path d="M113.397 37.5148L112.217 38.6946C112.183 38.7283 112.144 38.7452 112.099 38.7452C112.054 38.7452 112.015 38.7283 111.981 38.6946C111.948 38.6609 111.931 38.6216 111.931 38.5766C111.931 38.5317 111.948 38.4924 111.981 38.4587L113.161 37.2788L111.981 36.099C111.948 36.0653 111.931 36.026 111.931 35.981C111.931 35.9361 111.948 35.8968 111.981 35.8631C112.015 35.8294 112.054 35.8125 112.099 35.8125C112.144 35.8125 112.183 35.8294 112.217 35.8631L113.397 37.0429L114.577 35.8631C114.611 35.8294 114.65 35.8125 114.695 35.8125C114.74 35.8125 114.779 35.8294 114.813 35.8631C114.846 35.8968 114.863 35.9361 114.863 35.981C114.863 36.026 114.846 36.0653 114.813 36.099L113.633 37.2788L114.813 38.4587C114.846 38.4924 114.863 38.5317 114.863 38.5766C114.863 38.6216 114.846 38.6609 114.813 38.6946C114.779 38.7283 114.74 38.7452 114.695 38.7452C114.65 38.7452 114.611 38.7283 114.577 38.6946L113.397 37.5148Z" fill="black"/>
-<rect x="34" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="88" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M190.397 52.5148L189.217 53.6946C189.183 53.7283 189.144 53.7452 189.099 53.7452C189.054 53.7452 189.015 53.7283 188.981 53.6946C188.948 53.6609 188.931 53.6216 188.931 53.5766C188.931 53.5317 188.948 53.4924 188.981 53.4587L190.161 52.2788L188.981 51.099C188.948 51.0653 188.931 51.026 188.931 50.981C188.931 50.9361 188.948 50.8968 188.981 50.8631C189.015 50.8294 189.054 50.8125 189.099 50.8125C189.144 50.8125 189.183 50.8294 189.217 50.8631L190.397 52.0429L191.577 50.8631C191.611 50.8294 191.65 50.8125 191.695 50.8125C191.74 50.8125 191.779 50.8294 191.813 50.8631C191.846 50.8968 191.863 50.9361 191.863 50.981C191.863 51.026 191.846 51.0653 191.813 51.099L190.633 52.2788L191.813 53.4587C191.846 53.4924 191.863 53.5317 191.863 53.5766C191.863 53.6216 191.846 53.6609 191.813 53.6946C191.779 53.7283 191.74 53.7452 191.695 53.7452C191.65 53.7452 191.611 53.7283 191.577 53.6946L190.397 52.5148Z" fill="black"/>
-<rect x="126" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="165" y="50.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M282.397 37.5148L281.217 38.6946C281.183 38.7283 281.144 38.7452 281.099 38.7452C281.054 38.7452 281.015 38.7283 280.981 38.6946C280.948 38.6609 280.931 38.6216 280.931 38.5766C280.931 38.5317 280.948 38.4924 280.981 38.4587L282.161 37.2788L280.981 36.099C280.948 36.0653 280.931 36.026 280.931 35.981C280.931 35.9361 280.948 35.8968 280.981 35.8631C281.015 35.8294 281.054 35.8125 281.099 35.8125C281.144 35.8125 281.183 35.8294 281.217 35.8631L282.397 37.0429L283.577 35.8631C283.611 35.8294 283.65 35.8125 283.695 35.8125C283.74 35.8125 283.779 35.8294 283.813 35.8631C283.846 35.8968 283.863 35.9361 283.863 35.981C283.863 36.026 283.846 36.0653 283.813 36.099L282.633 37.2788L283.813 38.4587C283.846 38.4924 283.863 38.5317 283.863 38.5766C283.863 38.6216 283.846 38.6609 283.813 38.6946C283.779 38.7283 283.74 38.7452 283.695 38.7452C283.65 38.7452 283.611 38.7283 283.577 38.6946L282.397 37.5148Z" fill="black"/>
-<rect x="218" y="35.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="245" y="35.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
-<circle cx="173.397" cy="37.2785" r="2.9308" fill="white"/>
-<circle cx="173.386" cy="37.2691" r="2.62849" fill="url(#pattern0)"/>
-<circle cx="173.386" cy="37.2691" r="2.62849" fill="#F7AE59"/>
-<circle cx="170.163" cy="37.2785" r="2.9308" fill="white"/>
-<circle cx="170.153" cy="37.2691" r="2.62849" fill="url(#pattern1)"/>
-<circle cx="170.153" cy="37.2691" r="2.62849" fill="#05C3FF"/>
-<circle cx="166.931" cy="37.2785" r="2.9308" fill="white"/>
-<circle cx="166.92" cy="37.2691" r="2.62849" fill="url(#pattern2)"/>
-<circle cx="166.92" cy="37.2691" r="2.62849" fill="#2C435F"/>
-<path d="M205.697 37.5148L204.517 38.6946C204.483 38.7283 204.444 38.7452 204.399 38.7452C204.354 38.7452 204.315 38.7283 204.281 38.6946C204.247 38.6609 204.23 38.6216 204.23 38.5766C204.23 38.5317 204.247 38.4924 204.281 38.4587L205.461 37.2788L204.281 36.099C204.247 36.0653 204.23 36.026 204.23 35.981C204.23 35.9361 204.247 35.8968 204.281 35.8631C204.315 35.8294 204.354 35.8125 204.399 35.8125C204.444 35.8125 204.483 35.8294 204.517 35.8631L205.697 37.0429L206.877 35.8631C206.91 35.8294 206.95 35.8125 206.995 35.8125C207.04 35.8125 207.079 35.8294 207.113 35.8631C207.146 35.8968 207.163 35.9361 207.163 35.981C207.163 36.026 207.146 36.0653 207.113 36.099L205.933 37.2788L207.113 38.4587C207.146 38.4924 207.163 38.5317 207.163 38.5766C207.163 38.6216 207.146 38.6609 207.113 38.6946C207.079 38.7283 207.04 38.7452 206.995 38.7452C206.95 38.7452 206.91 38.7283 206.877 38.6946L205.697 37.5148Z" fill="#858E96"/>
-<rect x="125" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="179" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M113.697 52.5148L112.517 53.6946C112.483 53.7283 112.444 53.7452 112.399 53.7452C112.354 53.7452 112.315 53.7283 112.281 53.6946C112.247 53.6609 112.23 53.6216 112.23 53.5766C112.23 53.5317 112.247 53.4924 112.281 53.4587L113.461 52.2788L112.281 51.099C112.247 51.0653 112.23 51.026 112.23 50.981C112.23 50.9361 112.247 50.8968 112.281 50.8631C112.315 50.8294 112.354 50.8125 112.399 50.8125C112.444 50.8125 112.483 50.8294 112.517 50.8631L113.697 52.0429L114.877 50.8631C114.91 50.8294 114.95 50.8125 114.995 50.8125C115.04 50.8125 115.079 50.8294 115.113 50.8631C115.146 50.8968 115.163 50.9361 115.163 50.981C115.163 51.026 115.146 51.0653 115.113 51.099L113.933 52.2788L115.113 53.4587C115.146 53.4924 115.163 53.5317 115.163 53.5766C115.163 53.6216 115.146 53.6609 115.113 53.6946C115.079 53.7283 115.04 53.7452 114.995 53.7452C114.95 53.7452 114.91 53.7283 114.877 53.6946L113.697 52.5148Z" fill="#858E96"/>
-<rect x="33" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="87" y="50.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<circle cx="81.1477" cy="52.3527" r="2.85274" fill="white"/>
-<circle cx="81.1481" cy="52.3532" r="2.5934" fill="#ADF772"/>
-<circle cx="78.0002" cy="52.3527" r="2.85274" fill="white"/>
-<circle cx="77.9996" cy="52.3532" r="2.5934" fill="#096E8D"/>
-<circle cx="74.8527" cy="52.3527" r="2.85274" fill="white"/>
-<circle cx="74.8532" cy="52.3532" r="2.5934" fill="#FF6B00"/>
-<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-</g>
-<g filter="url(#filter1_d_2884_60024)">
-<rect x="3" y="21.5" width="279" height="65" rx="5.5615" fill="white"/>
-<path d="M15.2705 40.5371H14.3719L16.9709 33.4588H17.8557L20.4548 40.5371H19.5562L17.441 34.5786H17.3857L15.2705 40.5371ZM15.6023 37.7722H19.2244V38.5325H15.6023V37.7722ZM23.6034 40.6477C23.1057 40.6477 22.6771 40.5302 22.3177 40.2952C21.9582 40.0602 21.6817 39.7364 21.4882 39.324C21.2946 38.9115 21.1979 38.4404 21.1979 37.9104C21.1979 37.3712 21.2969 36.8954 21.4951 36.483C21.6956 36.0683 21.9743 35.7445 22.3315 35.5118C22.6909 35.2768 23.1103 35.1593 23.5895 35.1593C23.9628 35.1593 24.2992 35.2284 24.5987 35.3667C24.8983 35.5049 25.1437 35.6984 25.3349 35.9473C25.5262 36.1961 25.6448 36.4865 25.6909 36.8183H24.8752C24.813 36.5763 24.6748 36.362 24.4605 36.1754C24.2485 35.9865 23.9628 35.892 23.6034 35.892C23.2854 35.892 23.0066 35.9749 22.767 36.1408C22.5296 36.3044 22.3442 36.536 22.2105 36.8355C22.0792 37.1328 22.0135 37.4818 22.0135 37.8828C22.0135 38.2929 22.078 38.65 22.2071 38.9542C22.3384 39.2583 22.5227 39.4945 22.7601 39.6627C22.9997 39.8309 23.2808 39.915 23.6034 39.915C23.8153 39.915 24.0077 39.8781 24.1805 39.8044C24.3534 39.7307 24.4997 39.6247 24.6195 39.4864C24.7393 39.3482 24.8246 39.1823 24.8752 38.9887H25.6909C25.6448 39.3021 25.5308 39.5844 25.3487 39.8355C25.169 40.0843 24.9305 40.2825 24.6333 40.43C24.3384 40.5751 23.9951 40.6477 23.6034 40.6477ZM29.192 35.2284V35.9196H26.4409V35.2284H29.192ZM27.2427 33.9565H28.0584V39.0164C28.0584 39.2468 28.0918 39.4196 28.1586 39.5348C28.2277 39.6477 28.3153 39.7238 28.4213 39.7629C28.5296 39.7998 28.6436 39.8182 28.7635 39.8182C28.8533 39.8182 28.927 39.8136 28.9846 39.8044C29.0422 39.7929 29.0883 39.7837 29.1229 39.7767L29.2888 40.5095C29.2335 40.5302 29.1563 40.5509 29.0572 40.5717C28.9581 40.5947 28.8326 40.6062 28.6805 40.6062C28.4501 40.6062 28.2243 40.5567 28.0031 40.4576C27.7842 40.3585 27.6022 40.2076 27.457 40.0049C27.3142 39.8021 27.2427 39.5463 27.2427 39.2376V33.9565ZM30.419 40.5371V35.2284H31.2346V40.5371H30.419ZM30.8337 34.3436C30.6747 34.3436 30.5376 34.2895 30.4224 34.1812C30.3095 34.0729 30.2531 33.9427 30.2531 33.7906C30.2531 33.6386 30.3095 33.5084 30.4224 33.4001C30.5376 33.2918 30.6747 33.2376 30.8337 33.2376C30.9927 33.2376 31.1286 33.2918 31.2415 33.4001C31.3567 33.5084 31.4143 33.6386 31.4143 33.7906C31.4143 33.9427 31.3567 34.0729 31.2415 34.1812C31.1286 34.2895 30.9927 34.3436 30.8337 34.3436ZM37.0695 35.2284L35.1064 40.5371H34.2769L32.3138 35.2284H33.1986L34.664 39.4588H34.7193L36.1847 35.2284H37.0695ZM40.1818 40.6477C39.6703 40.6477 39.2291 40.5348 38.8581 40.309C38.4894 40.0809 38.2049 39.7629 38.0044 39.3551C37.8063 38.945 37.7072 38.468 37.7072 37.9242C37.7072 37.3805 37.8063 36.9012 38.0044 36.4865C38.2049 36.0694 38.4837 35.7445 38.8408 35.5118C39.2003 35.2768 39.6196 35.1593 40.0989 35.1593C40.3754 35.1593 40.6484 35.2054 40.918 35.2975C41.1876 35.3897 41.433 35.5395 41.6542 35.7468C41.8754 35.9519 42.0516 36.2238 42.183 36.5625C42.3143 36.9012 42.38 37.3182 42.38 37.8136V38.1593H38.2878V37.4542H41.5505C41.5505 37.1547 41.4906 36.8874 41.3708 36.6524C41.2532 36.4173 41.085 36.2319 40.8662 36.0959C40.6496 35.96 40.3938 35.892 40.0989 35.892C39.774 35.892 39.4929 35.9726 39.2556 36.1339C39.0205 36.2929 38.8397 36.5003 38.7129 36.756C38.5862 37.0118 38.5229 37.286 38.5229 37.5786V38.0487C38.5229 38.4496 38.592 38.7894 38.7302 39.0682C38.8708 39.3447 39.0655 39.5556 39.3143 39.7007C39.5632 39.8436 39.8523 39.915 40.1818 39.915C40.3961 39.915 40.5897 39.885 40.7625 39.8251C40.9376 39.7629 41.0885 39.6708 41.2152 39.5486C41.342 39.4242 41.4399 39.2698 41.509 39.0855L42.297 39.3067C42.2141 39.574 42.0747 39.809 41.8788 40.0118C41.683 40.2122 41.441 40.3689 41.153 40.4818C40.865 40.5924 40.5413 40.6477 40.1818 40.6477ZM46.4686 40.5371V33.4588H47.3258V36.6109H51.0999V33.4588H51.9571V40.5371H51.0999V37.3712H47.3258V40.5371H46.4686ZM53.5625 40.5371V35.2284H54.3781V40.5371H53.5625ZM53.9772 34.3436C53.8182 34.3436 53.6811 34.2895 53.5659 34.1812C53.453 34.0729 53.3966 33.9427 53.3966 33.7906C53.3966 33.6386 53.453 33.5084 53.5659 33.4001C53.6811 33.2918 53.8182 33.2376 53.9772 33.2376C54.1362 33.2376 54.2721 33.2918 54.385 33.4001C54.5002 33.5084 54.5578 33.6386 54.5578 33.7906C54.5578 33.9427 54.5002 34.0729 54.385 34.1812C54.2721 34.2895 54.1362 34.3436 53.9772 34.3436ZM58.0149 42.6385C57.6209 42.6385 57.2822 42.5878 56.9988 42.4864C56.7154 42.3873 56.4792 42.256 56.2902 42.0924C56.1036 41.9311 55.955 41.7583 55.8444 41.574L56.4942 41.1177C56.5679 41.2145 56.6612 41.3251 56.7741 41.4495C56.887 41.5763 57.0414 41.6857 57.2372 41.7779C57.4354 41.8723 57.6946 41.9196 58.0149 41.9196C58.4435 41.9196 58.7971 41.8159 59.0759 41.6085C59.3547 41.4012 59.4941 41.0763 59.4941 40.6339V39.5556H59.425C59.3651 39.6523 59.2798 39.7721 59.1692 39.915C59.061 40.0555 58.9043 40.1811 58.6992 40.2917C58.4964 40.4 58.2223 40.4542 57.8766 40.4542C57.4481 40.4542 57.0633 40.3528 56.7223 40.15C56.3836 39.9473 56.1151 39.6523 55.917 39.2652C55.7211 38.8781 55.6232 38.4081 55.6232 37.8551C55.6232 37.3113 55.7188 36.8378 55.9101 36.4346C56.1013 36.0291 56.3674 35.7157 56.7084 35.4945C57.0495 35.271 57.4435 35.1593 57.8905 35.1593C58.2361 35.1593 58.5103 35.2169 58.713 35.3321C58.9181 35.445 59.0748 35.574 59.1831 35.7192C59.2937 35.862 59.3789 35.9796 59.4388 36.0717H59.5218V35.2284H60.3098V40.6892C60.3098 41.1454 60.2061 41.5164 59.9987 41.8021C59.7937 42.0901 59.5172 42.3009 59.1692 42.4346C58.8236 42.5705 58.4388 42.6385 58.0149 42.6385ZM57.9872 39.7214C58.3144 39.7214 58.5909 39.6466 58.8167 39.4968C59.0425 39.347 59.2142 39.1316 59.3317 38.8505C59.4492 38.5694 59.508 38.233 59.508 37.8413C59.508 37.4588 59.4504 37.1212 59.3351 36.8286C59.2199 36.536 59.0494 36.3067 58.8236 36.1408C58.5978 35.9749 58.319 35.892 57.9872 35.892C57.6416 35.892 57.3536 35.9796 57.1232 36.1547C56.8951 36.3298 56.7234 36.5648 56.6082 36.8597C56.4953 37.1547 56.4389 37.4818 56.4389 37.8413C56.4389 38.2099 56.4965 38.536 56.6117 38.8194C56.7292 39.1005 56.902 39.3217 57.1301 39.483C57.3605 39.642 57.6462 39.7214 57.9872 39.7214ZM62.6185 37.3436V40.5371H61.8029V33.4588H62.6185V36.0579H62.6876C62.8121 35.7837 62.9987 35.566 63.2475 35.4047C63.4987 35.2411 63.8328 35.1593 64.2498 35.1593C64.6116 35.1593 64.9284 35.2319 65.2003 35.377C65.4722 35.5199 65.683 35.7399 65.8328 36.0372C65.9848 36.3321 66.0609 36.7077 66.0609 37.1639V40.5371H65.2452V37.2192C65.2452 36.7975 65.1358 36.4715 64.9169 36.2411C64.7003 36.0084 64.3996 35.892 64.0148 35.892C63.7475 35.892 63.5079 35.9484 63.2959 36.0613C63.0863 36.1743 62.9204 36.339 62.7982 36.5556C62.6784 36.7722 62.6185 37.0348 62.6185 37.3436ZM70.401 40.5371V33.4588H72.7927C73.348 33.4588 73.8019 33.5591 74.1544 33.7595C74.5092 33.9577 74.7719 34.2261 74.9424 34.5648C75.1129 34.9035 75.1982 35.2814 75.1982 35.6984C75.1982 36.1155 75.1129 36.4945 74.9424 36.8355C74.7742 37.1765 74.5138 37.4484 74.1613 37.6512C73.8088 37.8517 73.3572 37.9519 72.8065 37.9519H71.0922V37.1915H72.7788C73.159 37.1915 73.4643 37.1259 73.6947 36.9945C73.9251 36.8632 74.0922 36.6858 74.1959 36.4623C74.3019 36.2365 74.3549 35.9819 74.3549 35.6984C74.3549 35.415 74.3019 35.1616 74.1959 34.9381C74.0922 34.7146 73.924 34.5395 73.6913 34.4127C73.4586 34.2837 73.1498 34.2192 72.765 34.2192H71.2581V40.5371H70.401ZM76.4683 40.5371V35.2284H77.2563V36.0302H77.3116C77.4084 35.7676 77.5835 35.5544 77.837 35.3908C78.0904 35.2273 78.3761 35.1455 78.6941 35.1455C78.754 35.1455 78.8289 35.1466 78.9188 35.1489C79.0086 35.1512 79.0766 35.1547 79.1227 35.1593V35.9888C79.095 35.9819 79.0317 35.9715 78.9326 35.9577C78.8358 35.9415 78.7333 35.9335 78.625 35.9335C78.3669 35.9335 78.1365 35.9876 77.9337 36.0959C77.7333 36.2019 77.5743 36.3494 77.4568 36.5383C77.3416 36.7249 77.284 36.9381 77.284 37.1777V40.5371H76.4683ZM80.0895 40.5371V35.2284H80.9052V40.5371H80.0895ZM80.5043 34.3436C80.3453 34.3436 80.2082 34.2895 80.093 34.1812C79.9801 34.0729 79.9236 33.9427 79.9236 33.7906C79.9236 33.6386 79.9801 33.5084 80.093 33.4001C80.2082 33.2918 80.3453 33.2376 80.5043 33.2376C80.6633 33.2376 80.7992 33.2918 80.9121 33.4001C81.0273 33.5084 81.0849 33.6386 81.0849 33.7906C81.0849 33.9427 81.0273 34.0729 80.9121 34.1812C80.7992 34.2895 80.6633 34.3436 80.5043 34.3436ZM84.5558 40.6477C84.0765 40.6477 83.656 40.5337 83.2943 40.3055C82.9348 40.0774 82.6537 39.7583 82.451 39.3482C82.2505 38.938 82.1503 38.4588 82.1503 37.9104C82.1503 37.3574 82.2505 36.8747 82.451 36.4623C82.6537 36.0498 82.9348 35.7296 83.2943 35.5014C83.656 35.2733 84.0765 35.1593 84.5558 35.1593C85.0351 35.1593 85.4544 35.2733 85.8139 35.5014C86.1756 35.7296 86.4567 36.0498 86.6572 36.4623C86.8599 36.8747 86.9613 37.3574 86.9613 37.9104C86.9613 38.4588 86.8599 38.938 86.6572 39.3482C86.4567 39.7583 86.1756 40.0774 85.8139 40.3055C85.4544 40.5337 85.0351 40.6477 84.5558 40.6477ZM84.5558 39.915C84.9199 39.915 85.2194 39.8217 85.4544 39.635C85.6894 39.4484 85.8634 39.203 85.9763 38.8989C86.0892 38.5947 86.1456 38.2652 86.1456 37.9104C86.1456 37.5556 86.0892 37.2249 85.9763 36.9185C85.8634 36.612 85.6894 36.3643 85.4544 36.1754C85.2194 35.9865 84.9199 35.892 84.5558 35.892C84.1917 35.892 83.8922 35.9865 83.6572 36.1754C83.4222 36.3643 83.2482 36.612 83.1353 36.9185C83.0224 37.2249 82.966 37.5556 82.966 37.9104C82.966 38.2652 83.0224 38.5947 83.1353 38.8989C83.2482 39.203 83.4222 39.4484 83.6572 39.635C83.8922 39.8217 84.1917 39.915 84.5558 39.915ZM88.2064 40.5371V35.2284H88.9944V36.0302H89.0497C89.1465 35.7676 89.3216 35.5544 89.575 35.3908C89.8285 35.2273 90.1142 35.1455 90.4322 35.1455C90.4921 35.1455 90.567 35.1466 90.6568 35.1489C90.7467 35.1512 90.8147 35.1547 90.8607 35.1593V35.9888C90.8331 35.9819 90.7697 35.9715 90.6707 35.9577C90.5739 35.9415 90.4714 35.9335 90.3631 35.9335C90.105 35.9335 89.8746 35.9876 89.6718 36.0959C89.4714 36.2019 89.3124 36.3494 89.1949 36.5383C89.0797 36.7249 89.0221 36.9381 89.0221 37.1777V40.5371H88.2064ZM91.8276 40.5371V35.2284H92.6433V40.5371H91.8276ZM92.2424 34.3436C92.0834 34.3436 91.9463 34.2895 91.8311 34.1812C91.7182 34.0729 91.6617 33.9427 91.6617 33.7906C91.6617 33.6386 91.7182 33.5084 91.8311 33.4001C91.9463 33.2918 92.0834 33.2376 92.2424 33.2376C92.4013 33.2376 92.5373 33.2918 92.6502 33.4001C92.7654 33.5084 92.823 33.6386 92.823 33.7906C92.823 33.9427 92.7654 34.0729 92.6502 34.1812C92.5373 34.2895 92.4013 34.3436 92.2424 34.3436ZM96.4459 35.2284V35.9196H93.6948V35.2284H96.4459ZM94.4967 33.9565H95.3123V39.0164C95.3123 39.2468 95.3457 39.4196 95.4125 39.5348C95.4817 39.6477 95.5692 39.7238 95.6752 39.7629C95.7835 39.7998 95.8976 39.8182 96.0174 39.8182C96.1072 39.8182 96.181 39.8136 96.2386 39.8044C96.2962 39.7929 96.3423 39.7837 96.3768 39.7767L96.5427 40.5095C96.4874 40.5302 96.4102 40.5509 96.3112 40.5717C96.2121 40.5947 96.0865 40.6062 95.9344 40.6062C95.704 40.6062 95.4782 40.5567 95.257 40.4576C95.0381 40.3585 94.8561 40.2076 94.7109 40.0049C94.5681 39.8021 94.4967 39.5463 94.4967 39.2376V33.9565ZM98.1982 42.5279C98.06 42.5279 97.9367 42.5164 97.8284 42.4933C97.7201 42.4726 97.6452 42.4518 97.6038 42.4311L97.8111 41.7122C98.0093 41.7629 98.1844 41.7813 98.3365 41.7675C98.4885 41.7537 98.6233 41.6857 98.7409 41.5636C98.8607 41.4438 98.9701 41.2491 99.0692 40.9795L99.2213 40.5648L97.2581 35.2284H98.1429L99.6084 39.4588H99.6637L101.129 35.2284H102.014L99.7604 41.3113C99.659 41.5855 99.5335 41.8124 99.3837 41.9922C99.2339 42.1742 99.06 42.309 98.8618 42.3965C98.666 42.4841 98.4448 42.5279 98.1982 42.5279ZM106.795 33.4588V40.5371H105.938V33.4588H106.795ZM112.164 36.4173L111.431 36.6247C111.385 36.5026 111.317 36.3839 111.227 36.2687C111.14 36.1512 111.02 36.0544 110.868 35.9784C110.716 35.9024 110.521 35.8643 110.284 35.8643C109.959 35.8643 109.688 35.9392 109.471 36.089C109.257 36.2365 109.15 36.4242 109.15 36.6524C109.15 36.8551 109.224 37.0153 109.371 37.1328C109.519 37.2503 109.749 37.3482 110.062 37.4265L110.85 37.6201C111.325 37.7353 111.679 37.9116 111.912 38.1489C112.144 38.3839 112.261 38.6869 112.261 39.0579C112.261 39.362 112.173 39.6339 111.998 39.8735C111.825 40.1132 111.583 40.3021 111.272 40.4403C110.961 40.5786 110.599 40.6477 110.187 40.6477C109.645 40.6477 109.197 40.5302 108.842 40.2952C108.488 40.0602 108.263 39.7168 108.168 39.2652L108.943 39.0717C109.016 39.3574 109.156 39.5717 109.361 39.7145C109.568 39.8574 109.839 39.9288 110.173 39.9288C110.553 39.9288 110.855 39.8482 111.079 39.6869C111.304 39.5233 111.417 39.3274 111.417 39.0993C111.417 38.915 111.353 38.7606 111.224 38.6362C111.095 38.5095 110.897 38.415 110.629 38.3528L109.744 38.1454C109.258 38.0302 108.901 37.8517 108.673 37.6097C108.447 37.3655 108.334 37.0602 108.334 36.6938C108.334 36.3943 108.418 36.1293 108.587 35.8989C108.757 35.6685 108.989 35.4876 109.281 35.3563C109.576 35.225 109.91 35.1593 110.284 35.1593C110.809 35.1593 111.221 35.2745 111.521 35.5049C111.823 35.7353 112.037 36.0395 112.164 36.4173ZM117.249 36.4173L116.516 36.6247C116.47 36.5026 116.402 36.3839 116.312 36.2687C116.225 36.1512 116.105 36.0544 115.953 35.9784C115.801 35.9024 115.606 35.8643 115.369 35.8643C115.044 35.8643 114.773 35.9392 114.556 36.089C114.342 36.2365 114.235 36.4242 114.235 36.6524C114.235 36.8551 114.309 37.0153 114.456 37.1328C114.604 37.2503 114.834 37.3482 115.147 37.4265L115.935 37.6201C116.41 37.7353 116.764 37.9116 116.996 38.1489C117.229 38.3839 117.345 38.6869 117.345 39.0579C117.345 39.362 117.258 39.6339 117.083 39.8735C116.91 40.1132 116.668 40.3021 116.357 40.4403C116.046 40.5786 115.684 40.6477 115.272 40.6477C114.73 40.6477 114.282 40.5302 113.927 40.2952C113.572 40.0602 113.348 39.7168 113.253 39.2652L114.028 39.0717C114.101 39.3574 114.241 39.5717 114.446 39.7145C114.653 39.8574 114.924 39.9288 115.258 39.9288C115.638 39.9288 115.94 39.8482 116.163 39.6869C116.389 39.5233 116.502 39.3274 116.502 39.0993C116.502 38.915 116.438 38.7606 116.309 38.6362C116.18 38.5095 115.981 38.415 115.714 38.3528L114.829 38.1454C114.343 38.0302 113.986 37.8517 113.758 37.6097C113.532 37.3655 113.419 37.0602 113.419 36.6938C113.419 36.3943 113.503 36.1293 113.672 35.8989C113.842 35.6685 114.074 35.4876 114.366 35.3563C114.661 35.225 114.995 35.1593 115.369 35.1593C115.894 35.1593 116.306 35.2745 116.606 35.5049C116.908 35.7353 117.122 36.0395 117.249 36.4173ZM121.919 38.3666V35.2284H122.735V40.5371H121.919V39.6385H121.864C121.739 39.9081 121.546 40.1373 121.283 40.3263C121.02 40.5129 120.688 40.6062 120.288 40.6062C119.956 40.6062 119.661 40.5337 119.403 40.3885C119.145 40.241 118.942 40.0198 118.795 39.7249C118.647 39.4277 118.573 39.0533 118.573 38.6016V35.2284H119.389V38.5463C119.389 38.9334 119.497 39.2422 119.714 39.4726C119.933 39.703 120.212 39.8182 120.55 39.8182C120.753 39.8182 120.959 39.7664 121.169 39.6627C121.381 39.559 121.558 39.4 121.701 39.1857C121.846 38.9715 121.919 38.6984 121.919 38.3666ZM126.454 40.6477C125.943 40.6477 125.502 40.5348 125.131 40.309C124.762 40.0809 124.477 39.7629 124.277 39.3551C124.079 38.945 123.98 38.468 123.98 37.9242C123.98 37.3805 124.079 36.9012 124.277 36.4865C124.477 36.0694 124.756 35.7445 125.113 35.5118C125.473 35.2768 125.892 35.1593 126.371 35.1593C126.648 35.1593 126.921 35.2054 127.19 35.2975C127.46 35.3897 127.705 35.5395 127.927 35.7468C128.148 35.9519 128.324 36.2238 128.455 36.5625C128.587 36.9012 128.652 37.3182 128.652 37.8136V38.1593H124.56V37.4542H127.823C127.823 37.1547 127.763 36.8874 127.643 36.6524C127.526 36.4173 127.358 36.2319 127.139 36.0959C126.922 35.96 126.666 35.892 126.371 35.892C126.046 35.892 125.765 35.9726 125.528 36.1339C125.293 36.2929 125.112 36.5003 124.985 36.756C124.859 37.0118 124.795 37.286 124.795 37.5786V38.0487C124.795 38.4496 124.864 38.7894 125.003 39.0682C125.143 39.3447 125.338 39.5556 125.587 39.7007C125.836 39.8436 126.125 39.915 126.454 39.915C126.669 39.915 126.862 39.885 127.035 39.8251C127.21 39.7629 127.361 39.6708 127.488 39.5486C127.614 39.4242 127.712 39.2698 127.781 39.0855L128.569 39.3067C128.487 39.574 128.347 39.809 128.151 40.0118C127.955 40.2122 127.713 40.3689 127.425 40.4818C127.137 40.5924 126.814 40.6477 126.454 40.6477ZM133.654 36.4173L132.921 36.6247C132.875 36.5026 132.807 36.3839 132.717 36.2687C132.629 36.1512 132.51 36.0544 132.357 35.9784C132.205 35.9024 132.011 35.8643 131.773 35.8643C131.448 35.8643 131.178 35.9392 130.961 36.089C130.747 36.2365 130.64 36.4242 130.64 36.6524C130.64 36.8551 130.713 37.0153 130.861 37.1328C131.008 37.2503 131.239 37.3482 131.552 37.4265L132.34 37.6201C132.815 37.7353 133.169 37.9116 133.401 38.1489C133.634 38.3839 133.75 38.6869 133.75 39.0579C133.75 39.362 133.663 39.6339 133.488 39.8735C133.315 40.1132 133.073 40.3021 132.762 40.4403C132.451 40.5786 132.089 40.6477 131.677 40.6477C131.135 40.6477 130.687 40.5302 130.332 40.2952C129.977 40.0602 129.753 39.7168 129.658 39.2652L130.432 39.0717C130.506 39.3574 130.645 39.5717 130.851 39.7145C131.058 39.8574 131.329 39.9288 131.663 39.9288C132.043 39.9288 132.345 39.8482 132.568 39.6869C132.794 39.5233 132.907 39.3274 132.907 39.0993C132.907 38.915 132.842 38.7606 132.713 38.6362C132.584 38.5095 132.386 38.415 132.119 38.3528L131.234 38.1454C130.748 38.0302 130.391 37.8517 130.163 37.6097C129.937 37.3655 129.824 37.0602 129.824 36.6938C129.824 36.3943 129.908 36.1293 130.076 35.8989C130.247 35.6685 130.478 35.4876 130.771 35.3563C131.066 35.225 131.4 35.1593 131.773 35.1593C132.299 35.1593 132.711 35.2745 133.011 35.5049C133.313 35.7353 133.527 36.0395 133.654 36.4173Z" fill="#858E96"/>
-<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
-<circle cx="66.3717" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="66.3722" cy="55.2784" r="2.64169" stroke="#FCBE1D" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
-<path d="M67.6306 53.6552C67.2676 53.3739 66.8209 53.2223 66.3618 53.2246C65.9026 53.2269 65.4574 53.383 65.0973 53.6678L66.372 55.2793L67.6306 53.6552Z" fill="#FCBE1D"/>
-<path d="M65.1106 56.9015C65.4736 57.1827 65.9203 57.3343 66.3794 57.332C66.8386 57.3297 67.2838 57.1737 67.6439 56.8888L66.3692 55.2774L65.1106 56.9015Z" fill="#FCBE1D"/>
-<circle cx="63.1432" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="63.1427" cy="55.2784" r="2.64169" stroke="#858E96" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
-<circle cx="59.9137" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="59.9132" cy="55.2784" r="2.64169" stroke="#ACB5BD" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
-<path d="M97.397 55.5148L96.2172 56.6946C96.1835 56.7283 96.1442 56.7452 96.0992 56.7452C96.0543 56.7452 96.0149 56.7283 95.9812 56.6946C95.9475 56.6609 95.9307 56.6216 95.9307 56.5766C95.9307 56.5317 95.9475 56.4924 95.9812 56.4587L97.161 55.2788L95.9812 54.099C95.9475 54.0653 95.9307 54.026 95.9307 53.981C95.9307 53.9361 95.9475 53.8968 95.9812 53.8631C96.0149 53.8294 96.0543 53.8125 96.0992 53.8125C96.1442 53.8125 96.1835 53.8294 96.2172 53.8631L97.397 55.0429L98.5768 53.8631C98.6105 53.8294 98.6499 53.8125 98.6948 53.8125C98.7397 53.8125 98.7791 53.8294 98.8128 53.8631C98.8465 53.8968 98.8633 53.9361 98.8633 53.981C98.8633 54.026 98.8465 54.0653 98.8128 54.099L97.633 55.2788L98.8128 56.4587C98.8465 56.4924 98.8633 56.5317 98.8633 56.5766C98.8633 56.6216 98.8465 56.6609 98.8128 56.6946C98.7791 56.7283 98.7397 56.7452 98.6948 56.7452C98.6499 56.7452 98.6105 56.7283 98.5768 56.6946L97.397 55.5148Z" fill="black"/>
-<rect x="18" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="72" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M174.397 70.5148L173.217 71.6946C173.183 71.7283 173.144 71.7452 173.099 71.7452C173.054 71.7452 173.015 71.7283 172.981 71.6946C172.948 71.6609 172.931 71.6216 172.931 71.5766C172.931 71.5317 172.948 71.4924 172.981 71.4587L174.161 70.2788L172.981 69.099C172.948 69.0653 172.931 69.026 172.931 68.981C172.931 68.9361 172.948 68.8968 172.981 68.8631C173.015 68.8294 173.054 68.8125 173.099 68.8125C173.144 68.8125 173.183 68.8294 173.217 68.8631L174.397 70.0429L175.577 68.8631C175.611 68.8294 175.65 68.8125 175.695 68.8125C175.74 68.8125 175.779 68.8294 175.813 68.8631C175.846 68.8968 175.863 68.9361 175.863 68.981C175.863 69.026 175.846 69.0653 175.813 69.099L174.633 70.2788L175.813 71.4587C175.846 71.4924 175.863 71.5317 175.863 71.5766C175.863 71.6216 175.846 71.6609 175.813 71.6946C175.779 71.7283 175.74 71.7452 175.695 71.7452C175.65 71.7452 175.611 71.7283 175.577 71.6946L174.397 70.5148Z" fill="black"/>
-<rect x="110" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="149" y="68.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M266.397 55.5148L265.217 56.6946C265.183 56.7283 265.144 56.7452 265.099 56.7452C265.054 56.7452 265.015 56.7283 264.981 56.6946C264.948 56.6609 264.931 56.6216 264.931 56.5766C264.931 56.5317 264.948 56.4924 264.981 56.4587L266.161 55.2788L264.981 54.099C264.948 54.0653 264.931 54.026 264.931 53.981C264.931 53.9361 264.948 53.8968 264.981 53.8631C265.015 53.8294 265.054 53.8125 265.099 53.8125C265.144 53.8125 265.183 53.8294 265.217 53.8631L266.397 55.0429L267.577 53.8631C267.611 53.8294 267.65 53.8125 267.695 53.8125C267.74 53.8125 267.779 53.8294 267.813 53.8631C267.846 53.8968 267.863 53.9361 267.863 53.981C267.863 54.026 267.846 54.0653 267.813 54.099L266.633 55.2788L267.813 56.4587C267.846 56.4924 267.863 56.5317 267.863 56.5766C267.863 56.6216 267.846 56.6609 267.813 56.6946C267.779 56.7283 267.74 56.7452 267.695 56.7452C267.65 56.7452 267.611 56.7283 267.577 56.6946L266.397 55.5148Z" fill="black"/>
-<rect x="202" y="53.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="229" y="53.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
-<circle cx="157.397" cy="55.2785" r="2.9308" fill="white"/>
-<circle cx="157.386" cy="55.2691" r="2.62849" fill="url(#pattern3)"/>
-<circle cx="157.386" cy="55.2691" r="2.62849" fill="#F7AE59"/>
-<circle cx="154.163" cy="55.2785" r="2.9308" fill="white"/>
-<circle cx="154.153" cy="55.2691" r="2.62849" fill="url(#pattern4)"/>
-<circle cx="154.153" cy="55.2691" r="2.62849" fill="#05C3FF"/>
-<circle cx="150.931" cy="55.2785" r="2.9308" fill="white"/>
-<circle cx="150.92" cy="55.2691" r="2.62849" fill="url(#pattern5)"/>
-<circle cx="150.92" cy="55.2691" r="2.62849" fill="#2C435F"/>
-<path d="M189.697 55.5148L188.517 56.6946C188.483 56.7283 188.444 56.7452 188.399 56.7452C188.354 56.7452 188.315 56.7283 188.281 56.6946C188.247 56.6609 188.23 56.6216 188.23 56.5766C188.23 56.5317 188.247 56.4924 188.281 56.4587L189.461 55.2788L188.281 54.099C188.247 54.0653 188.23 54.026 188.23 53.981C188.23 53.9361 188.247 53.8968 188.281 53.8631C188.315 53.8294 188.354 53.8125 188.399 53.8125C188.444 53.8125 188.483 53.8294 188.517 53.8631L189.697 55.0429L190.877 53.8631C190.91 53.8294 190.95 53.8125 190.995 53.8125C191.04 53.8125 191.079 53.8294 191.113 53.8631C191.146 53.8968 191.163 53.9361 191.163 53.981C191.163 54.026 191.146 54.0653 191.113 54.099L189.933 55.2788L191.113 56.4587C191.146 56.4924 191.163 56.5317 191.163 56.5766C191.163 56.6216 191.146 56.6609 191.113 56.6946C191.079 56.7283 191.04 56.7452 190.995 56.7452C190.95 56.7452 190.91 56.7283 190.877 56.6946L189.697 55.5148Z" fill="#858E96"/>
-<rect x="109" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="163" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
-<path d="M97.6968 70.5148L96.517 71.6946C96.4833 71.7283 96.444 71.7452 96.399 71.7452C96.3541 71.7452 96.3147 71.7283 96.281 71.6946C96.2473 71.6609 96.2305 71.6216 96.2305 71.5766C96.2305 71.5317 96.2473 71.4924 96.281 71.4587L97.4608 70.2788L96.281 69.099C96.2473 69.0653 96.2305 69.026 96.2305 68.981C96.2305 68.9361 96.2473 68.8968 96.281 68.8631C96.3147 68.8294 96.3541 68.8125 96.399 68.8125C96.444 68.8125 96.4833 68.8294 96.517 68.8631L97.6968 70.0429L98.8766 68.8631C98.9103 68.8294 98.9497 68.8125 98.9946 68.8125C99.0396 68.8125 99.0789 68.8294 99.1126 68.8631C99.1463 68.8968 99.1632 68.9361 99.1632 68.981C99.1632 69.026 99.1463 69.0653 99.1126 69.099L97.9328 70.2788L99.1126 71.4587C99.1463 71.4924 99.1632 71.5317 99.1632 71.5766C99.1632 71.6216 99.1463 71.6609 99.1126 71.6946C99.0789 71.7283 99.0396 71.7452 98.9946 71.7452C98.9497 71.7452 98.9103 71.7283 98.8766 71.6946L97.6968 70.5148Z" fill="#858E96"/>
-<rect x="17" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
-<rect x="71" y="68.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<circle cx="65.1477" cy="70.3527" r="2.85274" fill="white"/>
-<circle cx="65.1481" cy="70.3532" r="2.5934" fill="#ADF772"/>
-<circle cx="62.0002" cy="70.3527" r="2.85274" fill="white"/>
-<circle cx="61.9996" cy="70.3532" r="2.5934" fill="#096E8D"/>
-<circle cx="58.8527" cy="70.3527" r="2.85274" fill="white"/>
-<circle cx="58.8532" cy="70.3532" r="2.5934" fill="#FF6B00"/>
-<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
-</g>
-<defs>
-<filter id="filter0_d_2884_60024" x="16.2193" y="0.719251" width="284.561" height="70.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60024"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60024" result="shape"/>
-</filter>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<filter id="filter1_d_2884_60024" x="0.219251" y="18.7193" width="284.561" height="70.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.39037"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60024"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60024" result="shape"/>
-</filter>
-<pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<pattern id="pattern4" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<pattern id="pattern5" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
-</pattern>
-<image id="image0_2884_60024" width="320" height="480" xlink:href="data:image/jpeg;base64,/9j/4QBlRXhpZgAATU0AKgAAAAgAAgEOAAIAAAAoAAAAJgE7AAIAAAAPAAAATgAAAABodHRwczovL3Vuc3BsYXNoLmNvbS9waG90b3MvV01ENjR0TWZjNGsAQWxpIE1vcnNoZWRsb3UA/+AAEEpGSUYAAQEBAEgASAAA/+ICHElDQ19QUk9GSUxFAAEBAAACDGxjbXMCEAAAbW50clJHQiBYWVogB9wAAQAZAAMAKQA5YWNzcEFQUEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1sY21zAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKZGVzYwAAAPwAAABeY3BydAAAAVwAAAALd3RwdAAAAWgAAAAUYmtwdAAAAXwAAAAUclhZWgAAAZAAAAAUZ1hZWgAAAaQAAAAUYlhZWgAAAbgAAAAUclRSQwAAAcwAAABAZ1RSQwAAAcwAAABAYlRSQwAAAcwAAABAZGVzYwAAAAAAAAADYzIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdGV4dAAAAABJWAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1YWVogAAAAAAAAAxYAAAMzAAACpFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2N1cnYAAAAAAAAAGgAAAMsByQNjBZIIawv2ED8VURs0IfEpkDIYO5JGBVF3Xe1rcHoFibGafKxpv33Tw+kw////2wCEAAICAgMDAwMEBAMFBQUFBQcGBgYGBwoHCAcIBwoPCgsKCgsKDw4RDg0OEQ4YExERExgcGBcYHCIfHyIrKSs4OEsBAgICAwMDAwQEAwUFBQUFBwYGBgYHCgcIBwgHCg8KCwoKCwoPDhEODQ4RDhgTERETGBwYFxgcIh8fIispKzg4S//CABEIAeABQAMBIgACEQEDEQH/xAA2AAAABwEBAQEAAAAAAAAAAAAAAQIDBAUGBwgJCgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/aAAwDAQACEAMQAAAA+alVhmMe3cUuejxfQLHJ6THfLstlri/CsWKWNVNq8HFdiN1OopHay5dernWtJdZ3Zsg2UuWW0U2aPFRtVHCkrthTSZ3omZrlWw53scgl0ylaqLIEiLpSX4ciM3p9DTSs9OdNdVutsONt+qcUHEtDKzGOyqdSKm0KE61V1dnFgqosyMS7CsK65BktkndYCwDqVnyzVFbG2y7qpVK0hk7QZfRj0GA6jWTfDavS5VZ9KxiXB6yYw7az1tWagdrGrY8vqFvkrfbLp+ScqAwWetqbO8u/bUYS1tIRWhpOQUZ5tkWuvqu4iGUulHKaAg6jPyw3+hotdOtTV6BqlX6M5zcy4qb7LXivPe28HvFzWZ7WoXBtM7Rp7vK2zGHGpKOi1j9vcRnW8OqtaO3hzdK1IUTnH7WhkjRpbWVwIdnGcpQcLXOQ/UyGmGrNoIJymQut9zfRj6W7Uam7rm3K+X0HR5LY47804v6G4E8pEih2TmmZtKO1d7rmWyC8hktXLVdpvOooNZj0Ms1iVUlWffSumCQnn3mmcmIq4rU1mQxrFcqbIagSULCWc27y3gMz6qk9qsfq7zNce5mp1pAuIvKcr65ymoRsKPoQ81B6HTUcv01VZKbae3qy02HB5GmHfsTzpYa9k7GNcuqe20p2M6qz9Lq63Epau6r3KXDh3EtMORRN9Xcz+03D7KW/WmM873fHPkL62c14+n4r8x+tHg/2vn+KS1SPS8JdvQwldzkZ9AiVrsrZTVu1mGrixzD8dHRbfnk6dGLb0Xr+nl8uMeyMMzz+jS5PPSAAUt1C2QgMRpeVVlc9DQil0tBcJ2uF7ZOntP6heCfeXz313W8p4C5vtn9B+TcIi+R7vPOcQ0dPm+UqWLl/rPhtvfcvsaW6omr2bc2+Su50Rz+wyV5FJhGTPiokJ+4tfktL1Z3nP9jhWcayOzx+NwwZxSwTgZpuRF57TQ20qlUxb6gFX+ieS/QHl9P0X0rNejfH+k+RHlH7D8mg6d8ff0f/ABk2jxZ1vI+he7xPL2X1+X9PxYanC0zl7fC3qva5iopJp9dem8pwgmE1yA4HunXwdVuQMX03CNcVwu8wmVxFGqKDxSAysSwhc11yHqal0nn+0b1Sfb/z5+vHk/Vemej8C0nF6HQMqWW4+/nvgPuPlXq5Os6fzbuY5+X8Z7dxn3vmGlz1dnmuPuxk4FRcsSVp2pXNY5ZLl10xzXs9+aaNsNnmuX9k4854DhN7g5bAIZ0+8wkKOtsavC2Ku0aFeNv5i0N/y2/H9POy+QOkfP8A2Gtqd3q/N9jwX569Cck9jx85sMpj9vGGSEj1fGlRzj3nYWVDcFHSzmoqGt6VcVkmytBvFU0yf0kwvVeB+Z6TmW0VP2ceErYMnoxSlaByzUYZuqt6vG0UWhzItNVuJFnBYNbZe9uY+gKDyPqomj81ckwjqGe5Bb93narnnVcptzZSV1Cv6uXnsPo7QufT7dgVZB0tJlpAsbFGuUyjjxhrbW0L0L2Xybc8nV9Xee1/RfE9r5Qzmo3v+DcKjL3mwfgzAo6i2pcKdy+iokT0yI4Unpfzd070Ob9F/wAp/o7verr+M1B6e8UfJfR8b6NRbV85edPo/wDOX0/Kecr0b8VvYZkg1NZUWIT3KeInd56QbmKbqQDT7Qeu+V9lpMtsl2HmGX8/rxbdNP7+K3chPaFpMrJ9FXUXFZhUeh0MQTkyRR9mVxCjJ6MuofeP84f0E619aPNXov5LdGvOfR/zW1vzXufUv42fTT5k9XmOplzccs9E6jns7yeli6HTPOxN1kY0jMS0aYtn6iv+Lt8dK27PbybGFy1PLr0nOZSPUyLaivdomSYUl1OsIN7RTtVMPXPS1lIW+a2kpkjhsshydUuh6r81duLq7ONvQrjw/pNVyX6RfN31fl3nIknLKfo8bPHv0YdOW22wc2VhcG8mv74/QCw8HZ/i9CTUwZXbwc5CQZmQDH9JmdMnKfZdV2bbcDaIVfYQOjKMAxkSiYeBMWcxDaCTHI9r+ILvouU0Kvy/pPpn8yPTvmH1fnxJjO82TVhGkgokxAc1OG3OOkN/SOJ46NrKlzE0FfcBytyMcubEDaHNTltfrDynDVuRbCJtFRAsoO+VfHWzz0T0c4dguE7chmS0NsjSVYNRpXN6U6uSNuJ4hb3jCa+k+u638rK5bHGSp9O6K0ZFRLsWYr6J1rBcCkVbFRWFesIh7LPJZsHMS4q2sTIzdIOjmwNIjBaMaaS61NOGlAPvwnGlpeYGUmK5nuam1aYSfUnlTX7z6o5x51r52WknMc5M2uFpxme5JXT0Nhoxm0juW1nQI1hDQ4tDjG3ZBJxpUebU1tJo6jWK5N+xnVQVhChskZQwAAfDTtDQNEt00lSBthBkAgSbLtU9nK856zqp7vMMrT57fx6ESI8SAAF8hpVimiaCY/XSwBNoCVLr5TVlDmw+vNEB+Jk22Zx5VUJmaPLTIDYzh4FfomhtcTb+8SvWx+EDfrnzJ5zoRoG8nRq0EYfQ9HhFz6XSdTxyJn2UUdmH0eDJorSBI0AIdqk3GCFNr0TFIfobUpCHDQkLhgNdebYl5+A258fKi7Dxzaz0dL3PIot39BfLeF5hrh9WegeJ7v2ojeA/bHifzpIBPATYrL5SFRTklpjuMcbDg4xqspKg+js6TkQo86bgzoyJjjS2GAlBBJhKUyN4YiSQDMZsY045HMc6yz5gcuIYa5rJvaGzySGBLDIzagkIfZIwUSXQMISyYw08CUrNFkhK2MsToaJSkBjhICFpWsEm863Uw5US4JJlnQAMAo0goiJiiCQAAQA7cMohb1oNABAAAAAwDyVAYACVIYNio7roBD5pkHgNKWgCDDJL1VaRKUQAS1KbAAAAAAAAMCCkhJ0GbsLLXK3FOAMCAgAAWhQGpJgZgBPJbTFuNKCU2hCp1LEkTDTiBGpDgSo8yB0ZxYz7GNgASwAAAAAAKBIlxWEAEAAApSXAaJ1oApKgNSVAsjIJhhIKCXGIBECVoNACyBt5mSyfXqh9GZRX2cLSAJYAAAGoCMwzpEfdbvufkcnE8CSAYLNDoEzJjMBkaDUkwWkwExxAAltrYhLzYJcC0ISaARPiSqSoNhD3hliSxjTIMRRGtIGol0IMwzQbHmB6DkV+LiKSAgKS4CUuNgDIAZgAYIBNWFARvIA4jzbFJSQA0KBciLMpKjPx9oTHfYzaEqGVhKyYawdSlKklW1WxIzI4AYAAAURA6042AAAGAYAyILIBbEpMgQA0h0mlAoEAcnV0zRJaeRrDMeRHhoAGNgyVQoyOoShbaoyQIYAMCBkAAAKIyAgAAMAADILJBEyRGJILQFg240tCkEAOfW2miZCm9IaZdZhoAEWaiVSMBJJNOszYAEgAAGQAAAAAAAAAGAYEDATwTjGg2YBlxoApC0GYIF3FPfbTWtOoqWGVtZ0QBxRmBYaTISWzKGAAgAAAAAAAAGRgRkAMAAZkYf/EAEYQAAEDAgQEAwYEAwQHCQEAAAEAAgMEEQUSITEGEBNBIlFhBxQgMnGBMEJSkTNAsRUjocFDYmNyc4LRFiQ0NYOy0uHw8f/aAAgBAQABPwE1DB3Tp2X0KfUNsvehdRy3XUU/zHlZTDROGvJ6jKzaKRAq6hWUlCIpkKEITqcJ8SESNM6ytbdZdVQPZbVYtE21wqY5XpkjSxS2U+qpacIW7KXdUUXdTWsjI5wQcQi8lO0VJKCiFVfMozorp+qlCcU5NK6mie6/K6gemaoBAIBBqkjQaAnSaIxF5T6F4F0x7o3Kara9lio7Z0GkBSzKNpcUG2CBsgbuURICc7RQgkKRjidAm0sltl0H31CDDGVHUaWVUo3LOiVIiE5BH4InaqmemWTUBqmMVQ+yumi6iiQj0IVZApWWTHeJRPBjUpu5UkQsphYJzzsqdiadFI5R0ACgoI8yjw2LLsq+jYFNCE9pYnTXTFdO2TiiE9qATuYWyZPZMrD5qmqboTgI1ikkug9NcopFCA5V1DpdVLCLhbFNqCBZMbmN1Tvy6KpeFFqU0WCdIi8qKUFR7qCXwrEDdSlS6qaJU5A3TgidE7k4XWRP+G3KlemguTKZSQWXTUcWqZFZQusnPc5pFliTcpN08hbqljTo3BSTE6FUrRui5oRIunPFk+MsKpqjsUJFUuuCqhEJzU9paonXUqKzIldRFt1I23JrFlWi0UctiqKULqBSSIJgQemNURA3WO04IuE5huoYymeFddVG91SkkIxOKbAbp9PouoJB8yILTuo6gjunyhwVQxWRTo8wThkTfEFIxZE9qyq9k4XTYwnDROv8FPMQoJsybBddKy2WbVUQupKXS4WJsNk+PxFRhtk5hKAI3U4FgsPGqawIxKRhCzhnYKnIfvZVNOB8oT5HNKbLmClW/J8eYJ12ovurpysnBG4WYpkiJBXTCMJVlGwqF2VU1X2QeCpSmu1VI63dNqwBusSLHBVWjionKMi2qlspToqOaxQqkyqT5xlT25uyhaW91NUOA3Tp2u3RlA2T5hbdNlanSBB6maCFbVEIolNTwjGugUIEIiEACuiFFThTR2UBKbPYLr3QcopiFnLlWvIG6lfcqFuqbGbLpFTQaFN8Lky6jCdCSEICEY3HYJ+HPf2VRhr40YnJ8SyEJjCumngqQWQcnLMgQnWKt6oPRkKbKoKKeoIDIyfonYNVsGsRH1XQqod4inzX9FFNY2KbGHhdGxUcITIwELWVcBZSx6qlbqmNGi6YU0amjyuUcotZU7bposNUcVB7qLGAPzJ+OiyqMT6hWe/ZPF0QmGyzr5gpgrIp5Ud05XV0wF3Zez/2cTY7Lmf4IRufNYZ7NsNpYckcI9D3Vb7OKOcAmTX1Cr/ZLS9FwZPr6rGPZBVtechB+ixLgOvpgbsvbyVO57DlcnON02QhMmKbOql11I3VRPylNnaQvfLJ9WCqhwc1MPiVLMAApZtF1ChKfNF580xyhF1IEQsiLENAntunxp6cxXsnPRJKhjL3ALB8GNQ5rWt0GpXsxwr3bDWgtsXaowaaBVN2J0t2qpma2TVY/WxGYtBuuM8JjglZURtsyQ627O/+03ZXCLgnvKzmyc/xJsWZNpnqRrh2VlLIot0JbITX7puGvPZMweQ/lTcClPZHB3tTKfIpERzerp4unAItT2J26asLgzFx9bLgqnEAN4rhzSFwjGG0sY8kXnZVrLqaZrfCq+nkk210KxaiqIZnOd3WOES4dM1wvsf2XXDQpKvVMqbphBTrJ7PEqVAaKeJpVTIAVe6HLOQVFRx+Sgo4/Je7Mt8qroGi+iqdLqQ/A5POqabhT3CZInG4TwguGogRn8n7ea4OpvenxxtGvzO9NUyqpsKoi55OSMfcrGPbe+CRxjpMkd9Lgkmyb7eJpr3iZvtrqo/aRS1OQtuCd7rG+PoIGA9UfZVPtIpHvsWvP1sp62nxGimNO/8AL8p3Crn2Lfui4lNfZR1JUVRqrZlEMqdIA291U1nkU+7itlmQkQIKhChR2WIHdVe5TvgKlGqYbKUXTo7K2iICexcJNj6EWa93GTbcL2V0wHv7w4EnKP8A+Lj6ubTUwufoFjeMQMpS6fC6uVxNs3SyMuf+JYn7CygeZKyPpwuGd1mst/guH/ZfTnC5ZKmO1Rk7aWWP9aCtqYXkkseW6qFsb93gFcLtc2vY0EjdYsP+8zDykf8A1R5BRnVQO0V27qqq0ZLldRZ1dXQUSjci9VxvdVY1KfzCKlV1msUGhyfFYKTRYVRGvqqana4NMrw3Mdm9yfsFwZwfw9WiRlNjckssbcrM7QzKb75dNCvZrT+609aHNs/rlh+rd1PQx1OpYCQNCVxXgdTUMMTa0tafyljX/wBVw97IHOqWT1Fa/K119gw6fRQxthgyXO1l7UeHXf2xNJGz59fqosOlD7OoyfposFwRkUsc7Rk82rFW2rKof7V//uTmqyIUQK6lk6qKc/Mfhug4qFxJUQRCrAqtScxym3TVKopbFBmdiqmELhH/AM1pd9pdv+E5QP8A7IqOH8Mw7D4feiKcVM5ZeR/UsX2PYAKLLBU1UbQBlk/rrdR1LRb1CqoYc+ZzU3ieATe7xi+tifJYx7YcHpax9DA4zy6tvlNs3oVivtHditQS6NrbAll+9u33VFiNNVRh7BbzHkusLaEWWPYjUSxTxyRt6bX5onAf61jr/VXurKyhYpGhSMVlZZSspQYV0lFBcqGlUcKdFoq6PdVu5T1bkArKcapimCG6oJOyxGALD6x9FVwTs+aJ4cPXzH3XC0+H4lFFiDG9Z5b0mH5ZIh+YXQqiaqZ5IF2tuL37JlYfCq2XLCRn3H/4rDjQww5Y7OJ+Y9ySuNKQ0F24XhUQnnkNyxouL7lRcNOw+pfFUBjjl/KQbXXRNJLeN/hVHUucRbusZozS4eI5HtMglIc1pvYl2a3+CarINCjCnQKIVgrLRacqKAd1FEo4FJDosSbuq/coo8gVdTppUpTRcqAZVVVGZBgKwPiHEMGfI6kltnHiaflPr9VwlXSS0UM8kxf1h1Wk9hJuD9CmYvkcDpZcZYtXdCNtIQXyjKB9SoeGMd6DG1HELIWEbQR2f93Ousd4boKKVwOOT3I+YluYpuFyROMlJUh+vfQlUc8x6gkGyp542MeXuyt7lYziz6yUa+Bgyt9fU+pTSVmTnqKQoi6czRPBQuteUbC4qKna0aqSbL3VMYz3Tclt1PKy26xKVmuqryLlFFDnOgpAorXX5VUOTJSE2QELhOv6fD+HuI0ZJNGfpn0VNXCbQdzZPwxjvd3nVzTsq6Ayx9MEeId1xD7P5jNIffo83kblUuFT0j3tdr9Dop2lmf1KxGf+7bGO5ufsg1Aciozqs2i6iJCFkAEyHMgAxSVPki9YhG+kOifxC5vdS8Ql35lLXvffVTS35EIIItU6apAidVTvuFUsVkCV7PIm1PD8kThe88o/xVYMRwiou3xt3WH8fh7v70Frrfm0VbxtGPFnvYeaq+LpJJpnF/0Cp8c7uOqq6p0rXva3Qd/Upwc4klZSg1OCITN07ZCPRPNkHKJpJXUyhSzkq/LFKqGpbuqjC8x0UXDbn9lXYRJThSz+Kya5EoJvKpUe6nR3UR0Ur7ohZBYnyF/2XCOA1eCULoKpgbMXCUs/QJGggH1XEErZL+G/kqmjMx8KxKmkheQ69kbeapqYvPoqsCKjjb+p/wDQKPJdNghI2T4IghSxlPw9qdRZSixW0ToiXJlLYapzw1SSF3IjlTY+7YuWE4myRwusIw+GZgNlxfhAZE4gdlXjJM76qJ+iugmnlUJil1TxqoVMsy9lfDDcc4iwqCVzRF1Os8H8zIPER+9guK+EYMYiD2OEVQwWa7s4fpcuIsLqKCeSCpgdHIOx7+oPcLDmMD9dlxLS08t2gaqpw5sZ0Kp6QCFvmsUwfr4ZUTNvnpcsp8jG85XftusxaUKp4/MveX+aFU8d0zEHhPrcy6qEqEgClqtEXEq/wT0r26rDa58LxdcIcQAtaC5cT1TJaZ2vZYx/4h31UTtECsyaUCqgpu6lTlCFUKnp3TOsNu58lh+J1GG1dLU0snTlp3h0bvIj/I91wJ7QqTiXDY52WZK3wzxX/hv/AOnksaw2ixSAwVULZWdr7tPm09iuKvZpXYeXzUBdUw75P9K3/wCSrasuJve4NiDoQfIhTO6srdNAmuEdr6ABYFgr5MCxieZmX36AxQt/2TR833Ka3OAfMA/unREIcroFBuiKuVlWRFiAVlZVlAyyqKIA6LC8TkpXjVVnEfUg+ZV8vUkJUZ0WZXTSrqdBSonVQFSxD8xt/VB4aLN0Ce664P4qqcAxKOrhcbfLKz9bPL7dlgeLw4jRxVMT8zHtBBCIzDZcW8AYbjWZ8kZin7Tx6O/5v1D6rGeCcRwmsbC+LrZvkfCM+a/m3dpXDPs86WSsxOMFw1ipbh1j+qW2n0auJJejh1bK7tE/+ip7hjB5AJz7rp3RbZFNGqZFojGUY1l5BZVkQjT3g91IyMp1NGqwhjSFI7xKMoIJh5TBAKUKOifJr8o8yrshHg/dZi54R3RNkCvYlxmaep/suaTwS6w3/V3asRxihwykkqKqobFFGLue42AXHPtqrq974cLaaSDbquH96/6fp/qm1VcHSPFXKHPN3uEjg53+8b3K4dx/FMFmD6WazfzRH5H/AFH+axbiWmx3hbE54fCRTyNkjO7HWTXWKe3NqNVTMDnWzhv1T8N87H1BupsMcNk2leOyj00RiFlKbFXTYy5wC4d4EbWMBeTqsc4Bjo2+FPoem8hOhARxVvmnYoEcVCqq0PV7lMQQTUFILpsXmQEZImbC59VLVOcibohGO35ldZlT1EkMkcsb8r2ODmnyIWN12P8AGMHvL3N6UHyQtOjSO/8Aveqhfuxw1CAIUkmUXVH77hctZEWFzJ6UsmaP0vFwfsgdAhIQmvJ3KjqXsO6ZiTvzBMroXDVEscqi2VOYXFCncqOm8bT5Lg/E6RkTMzwCFxbjdE6IhsgKrJQ6YuvonuuuquojIi9MKYggoxdPDIoy4hOqpD5J05K6izolXRNjzBXs8x/3Cv6Un8KfwkLj7ADQ18j2DQ+K/m090aj5QG79yqKlNVUU8BtZ8gb9iuIsPZHBWyZNeg7/AAagPCOTFoShZWaruH5kKguGqjAXhUcoaUMVybFT4iX90HBxTtArq/OPdM25BRGyrpc2QJxTlf4CtubXkEEGxGoKrsYjxHhgVZt14B7uf/V0Qay7Tfb/ACTZSHBw3acw+2qx+qbUYRUTscCyWjeR923XZN5M35XTzos1msUceeIOCyuQY5OYUWFQN1U7PDt8LN1HtyCapfnKeE4hHkHc3N+CDEJYoJ4A7wSuYXD1Ybp9rJrrFYJjV+HsXpXu/gwvcz/ceNvsUU1OOijFhzldotysOmDA5h/MmuauqwJ0rU+RqgeAny6KwWULKE9M3Ue3IIKT5k9ZU48w5A8nN5lMf4V3Tal8YkA/0kbo3fR3IJ3blmHmFdPOqjCzWIsjUuGiNU5e8uRlJUUpXVcQrrMs5RKZuotuQTVMLFEJ+idzCBV1dOHMFBO3HILD6Gatq4KeFt5JXhjR6lYP7H8MoyySvlmrCP8ARMHRiP3OpXHjfeeH6yio6Klp2gMcGNe0WETgbD9kHXAKKGqGpVQNGnm0XTY0dFkd5LpP/Sug/wDSuk/9KjppCflUFO+3ZdA+YXu5/UF0dfnaqiKxb4gU+ePYJ4d53V+R53V0CjpzBXfn7I6DqYnUVboS9tNCTocur/VcTcRe8VMlqdjfuXW/dCvz2Y4sZfw5j6oDLp5aftyEd0MrE7M/Wy6T/wBJXRf+kqKCT9BTYX/pXQf5LM9CR/muo7zXUde11nf5oPf5lHMe5V3W3KuT3Ud7OCfAum4InzCt5H4gVvzaUO6CcVRY9V0lJNTQlrWyPzvOtzpZPqpnbyFHXk1Z045im3ZtuU6rmG698k8171J+pe9S/qXvEn6lvdWRareNFC1ldNB8llTAdVJm804vKyFWWqI+EFO5D8CONz9GtJPopcBrYoTM+KzQL76281HqfAC4+gv/AETSXd9FMM4uO3whqsuydo7kAmxDzTn20WYpndSBC5Ky2RDUXDsnfj0VBLUvswfUqCikp8sVNEXP/Mf+qNDFDDmq5Oo79P5R9lS4u+ZxhpaEO9Rpl+6xqiqYKp5mYxvUJeMhu1Md2ClZlcfg6wXVC6i6gBXXC64tsut6Iy+iE/ooZru2TkCB2TnI6os5EfCEXN/W390CDsQfujp8IFzZUcMsTYmM+ZynnmorkSaqmoK/FC185MUPmfmd9Apax8EckeHU/hiHitb/ADVXiE9a8Plde23pdDRS5Xt31Hw2V0dUOV+VlFo4IopyITQ4I2WQudYKLB5Hj5gjglR2LVTcOVMzsrS3zPk0Dck+Si4Vo8kf9/UucXFpLI2NZcC+mbXZT4R7kxhfZwmaXQTga+X/ACkLhx1NieC4TUy08bnTUsbnXaDqRqqrhTA5v4mFUzvrE1e1ThqkwnEYH0kDY4Z4/kaLNa9nl9UHovCyRu7LKB2XVs4WChxqojk6nhf2sRa30UuLSTStlLWeHYbhO4iriLdYfshjlX0ul1rNvfQDf6p5BQlI72T7Hf8AdP353XdH0T+ysrcjyDrEIolbp7mx+pRleVZyiPjbrZUUVgNSV12D8qwAwyx1LSWeOoijkz3ADWjMBceZP3VfgfDVDVRCrrqiQaGRxs4HS2uTUBcdupWi9Mc0L6wdF2cPuAzU/TsuAK7Lw5gt+1M1VGMtbsvarUMrcPgeN4Zc376FX5bIPRQer22WZX5OQRCsrI83nVXQGiHI8r8r5GE90G31KDQs2Y6aBOdfYKirdg7f1OidV28lSYvPQzOlYMzXjLI06XG9wexHYr/tZRMY/JRyXdkOuUZXMdmuHDue6qcSfWVPVmsMo0aNmj0WB8UQUmF0FK42dHC0H6puO07z/FWPGGalkaH3zCy+qtyut0QgVdboGysnNVFJlmYSjVw+QRrov0hb8inprdE1ysiEQOTXcp3koZjoE93a6LkCrpsrm7Fe/O7tBROpUAaXjNsN/X0T5s5JJ3WYjYptXMPzlSnxv+qzrOroGyLr87WV7oGyuCr2V+Q5FSDZXNkCEXK/K/MqRwaLDfv8N+VuYkcO66zk43N/wA5G3PMVdyzOQdyKf25WV+YVrqx8kSj+AUAj+KFmcszldyugtO6f2V/hDUQonlof/rNLT9Cn/Fbz+C/wM+YLIjCsvr8equ5ZnLxKyA5W5FZVk5XtyzWThmR+C/4MXzBBP0a76fHcq5XiWq8XK6smjXle6ceRNk9B/pybe4T4yPw7cmOym6FT6J9SHNIt+BYrVWcrOVtUN1muo/mT7K6LkSiUFmW6i0DinFH+QHxaqxWVyyuTTbVbnkzdF2qzKy0CKKCJRaA1v0TgEfwbJsRN/jATh8FllKyuWUonkRomFHfkUOVuVrqU6p34eA4fJUCUtNiHAX+y4gwz3aVpto74z8FllKylW+Aboo8rq6vyj+YKSXU6IyLMj+DwfUshZNm/M/8AyXEUEdXRyZfmbqPtytzHxWVll9Vl9VZZUW2TRqE7fkFZHnD8wTxqraIhH8GknMbdPNR4tZpvqprZ3W2v+HZW9Vb1WZZkU3cIjfkPgJUR1T125H4R8GbRB580/sfw7K3wg3IWyuir87qNSb8z8I+DPSW/hSg+jwf6hHLra/3/ABrevLut13CJ1KJTj8MYUm7uZ/C8OXY37/yBF00oHUI7rRWRQ05WUad35H8LRX3/AB9uZ3Ct8ARQUHdP78j+Cf5E8+4R3VuV053On2Kcij+Cf5OyA8QTt07lfkeUPyJ3ZXR/mNFoiOQTPmCk3KvzHOJv92E7U8j+Af5DRactF3TTYp51+ADm7wtA5n+Z0X//xAAoEAEBAQACAgICAgICAwEAAAABABEhMRBBUWEgcYGRMKGxwUDR4fH/2gAIAQEAAT8QMRiFHueSwveG5mTCN0GPANN4lzZpGu0+XmGBDqKKuud7sDZtqzJtoJ7SYAFxRf3njg5sxoWvVgOI1BZcr0bvDezubGGh2ABsTZYo2EAGEXyVEjGJEwxeYsgj+J5NkS5OprUsOFxsZ4CPbpe4mRU1NxpCmzjIxt66Ilu7aJ1c+JnFxwHIQsbpHeZRiajHS5p3a6T4ycEKAsvmRLSAGsaQtsa5i4tGR6z75mBYlfVxNzHjNE3dYScF6YnBQkbBaOFgTPEZkYaiWlgnh7TXNDifIdS9W0Re7Ia24kjuKcZzIgG1YnEsVuRIqADUY/iFGcu8NidbH9NwLAYgDlmtjc511cDObSAwzFY8JzmeD+IcZeJ0jcg1a9E6JwcSPvwoaISoNFsTuk4Rh0wHdu8zeEs8Q4cLKa1rJbCM43UYp4kzgLFQ8hFlcsQTU1gOYH1EfUJ6gnUTqRMTSAMthYBKxJCJkQivi7KXbkrLOF8YjHVw5tNZ4seY8JVYYbNfI3se5h94T3N0kHm3wSBzcAWI7FbOiMm3RLYItkhcO7nC4ATmIHG+ML1BNkMB+7pztRw8HPkkBxHJniKNMFLplSyt+ax7h7SDbHM8ZWa3WmAg9WJsQzCJlyJ1PgPufSEYFyeOFoWhOU3fEvE16AeKchN3d6cbNn3cYOSy28CtXiGn+brW4hchWzvN3CEkpGy13aOxBHKn1VRmRZHEp6tOK3GhLcXmHkZbl/qNdRILDfc2dS6Q9w+MYZMp5wNs0U7gkAE22cSPGTEt6Aqxp3vUSLmFP6uumvhjwsY4jHEWwdyXVl0l9PVzW4kYmptlvxOrkwjuWlxJrjFk7dLjYk7gCOGcZFBkFl1JYxUklGxkgr1OucTtt7Kfv+lixzlD4e/mxADOND9nwytKhzNgLgvtMe5P2JWHJctzDZaSyOWMmMK4CchOMB97BMsZzwMJ4t98SKnP3ZCxIn1Fd9W0LVCQS9twS7e0h+99vwEtd5zvqAvTwyx3wdWvg4LmkwT95aDryZCyx3EPSPUfOfqcxelgXeLRy7JDxEOpd5Qu1mTL2JBjGxX3WyoNre/JAD4c0RYRs2DYwxvVgXZMi9jg2XiSh84DdjAd/uboZByG3AE3tycVi0yEN5cI6QTcYj8q4CT2txzB6t8ExqHRGC0FkQWXP7lfmbtheHU8AikXCwWssQQ4ZDQ+OaqQP78U+zxhS5G4d8Oo9yRpiBVOHcnDV+iBsmUDDub67gAIszB6fn9QsIQE5tzNXeJtN1aGJ+rCe+D/ABOSmGZsidbObjbIFFVI5jY308R9+C5CIBInFHHadgiPDcqSiZHdDMmHSB+oaAOf9QTIcfRxsGNO8/b8wLRAA/tP7MDJE8JVXjB3+oNDLjH6Zqad+jLP1x0/3kicDRvCJEk6AfWMhk83C3FgNYIU2XAy7NgJ1+FQPj4nzicFtPPozxgIzxnqAk+q54C90VDFIdgLk8yoviueV6Ob+FEXoB9DDLRYNzYcYdV+NO5PEmIaC0z1kYTex1f2tnbwMp2DuBq95XH85PlD9XKPJ+zFPiIlotkincyKy+RbfjCJEJseJMbuy5Y8nrzOFmjB1y6JdZ7fe+m3VaB/+xcWIwHeDNyJfvYwLh6PqQAPXMxGn4V/NyGRnjjrrUycLuvaF19TdDTU7ghHJOrLlYhQXkfnoQ5r4trerIyRpxKLfxfRfVOtSRg9WYcXwLAnGBq+AeN4+ALuhNwbI5I9xAnrHCfQUgRvhzpl7idTwBvQJl5P1ICOuQoAWBXOM5UwHSUJGNTx7cUgIM65P04hVC3r9w57Ax65s4NMBi185ygbGjqDBs0zJkjisEHgHUkI8S0Ti4+rPpYQZHd8DxPGfL+HYQGbhMWN3lylOvoPm+W5dgEB9xEg5HP161s3C7Pejc4JnRr2Ku5utO/cgLBfhcYC/IaOznL6e+lvSfA7B44uc6PfsHDQ5hBLaJ+cRwgM/lMNsIRpGsPWZKTLoirjMcx2Dd2dzsl7grG0gIc4LunC7Xb2KJ8BzJbeFnyzg+eB6bPAqGsx6tTiV5sLFBDg6KRbw3gt/wAH0LawlfJZI6Z1yeFq64h+Mn5FKurM9cRCLtrlbKu3W7PF2jBHLm2ZYzVGN1nHcZ4bhOiP3uy6i47EIEdifREj2cPo9Hczt3o4Ne9nR1hWaMub6aYFyELBevwG4RTbUykbmnUm0eGfFiAZV9LkNTtxyAS9NqHjV0l8DsHE5n4QWyQ4Iv0NYpQFVU9dOOXNLk+2PyxfidBxOXjtIM8Hh/fzD5LpjOPIdP7G39YDonEA8A84bnthLJ1uLEZM0cZjuDwZzDRUCoYyDUuMwRRTg3OXlPcsZ4ZJ1gAyzptMxLc5Afv+JtqLq+t1h6PT6lKu/S/hJ8k5RutzpgTBgvHxcpB3r02HkRYRL3rL9vNfF7yKwVv256dg7IHbS+BLZtBMavgMvHhZA27nvxeM2GqhluB4TweHxqLCWtxRwbpoP0C96gmypyewUHsYlxjmkDk+32vZJ/PPT8Q8/YQWRugA/wDAPrGzQMgIHaORPY2LMei+fEVcOLR0QNEYi+NlPqf/AOXLZmDPjyTM0SzG+5ql2zxtyUgSpFyADZMn0vnXbhQo8Y8PdlxYTaVhyvXcxUB6JVLAcSPDOqPntBcJM3uQRTxD5Dwhw9AePogENwa+EBv1Hj4bCzQoIdI3Q9H7ZkfLj6x3Emok/RBPcTdiFuJG7urFnhLcpLPad9XBM7TJvqENqrgJeQeDnuGe1n9p+iFTS+32yz33PnzGO+WwmpRln12jC/FX/sL6LntDES+Q6H9jBtyQCex/sMI/TVuXs6B+nNss/wC5/V+vhuSnAQvZ8xpaPfEsg0T0IWw9ZY2HgrYYFLpADtcJxx9JchXO222F8R8vwNTLsXSXgpy8A2bVA+2c3G9zc5n7MKR8txw4WY+I5+36NoO7Xz8WPa+UjtCJj6SR7uddAv8AU+kojP8ALDdJl1Fw1I1BtJ1fq4wz7IRgJ82QGP3KGEhweZjzZu59r2jI052QD56YsLlZHHift4h8+Pdung7dbXs4D5Wd9D4uwf5JXt2x4G7D6ZZefAJtpautuhr5ddT/AKtoqbx6CW0q3c5OTn5OILgO7nowsh+iOtTSYHDDhT+odcLT1kJ4WWe+SWwbQHJaYbH023ry73ZS1atfC8I8dU4HoN/liOM82xbG7Z52fAB6TkYbG/XlBBf4eSUkHA5+IaahD5Xg/snztZ+k3pLuMC50hXIkkfjY/wBDf2eJR1Fer4k+eL0PxdHgDwUl+jMsvAEvj2y0h9ef6oExGCjTz1PzPQQ+ELBQ6WkWKC1rpRwn0kseCQdF8c8RYYv5eIk+GAN1xgeBv9ONzZ1Zyy/hOkPk7h9WREePtWS/8S6+HPHyw+p5jm3M07+P39XW2nLHNJ95CeEp4Yfd7C3CitLrjsCELkfkLa4G5My+QU1e8u5snwel49IkjDOHyL6ANX4uYOyJ3wol/IMaDaGxVOuIIDwgn6ZcxUcweNsVdvH4ZSDiPmw3Svtz8yKZOEcfzJuP99ni/wBsZA/3XuoHk9cxt7T2yNeDxzYZ+AukNfTPjQu3FuXAR97Vh9OCwRu4B/cdpyL6WIAc5lA03kx09INZ8GxDg5+Z8TR9R/8ACj/51oNhPGo99R9xHicfeCKjsm4r/wB0mWtRT7Dbfc7YgZznLPTYX/mI9wfqd9+N48D4Mx4XwdorhyNCfCmATdDDPide38Of8S1ry/fPkYSUAsQf+gSOcP2S9bfZlu3BpbAy6skYj7skzw4iGsVvBGN95Ii1DttfU5g/MY9zLGOmLebfwSHr0NuZnvT+kHZFUEd7M/jU3rySCHXr6/FDX1FMe0AJ34g4H3dViLHqeCWo+rQIcC4ub3CKcLXcu/gMOl1vg6JfxNcXfoIZQnD0famus52cXwe382Xu7HH2QYTmUroc45wdPZYGD+5AZx2fhxdN+6Ndbdjt9DK9u32V8LgA53FaNGHZIYQ8sd2cjerJ/Db1wt7oJwiBP2Msn6QMXh+LEO1y4YPh9HzCqaeXbsqV4A+E6Ptt/nMIO98aFbhYSEAAtcz57YA5E/RcQb6vwQTgnhCOiIubS2meCt0GEnK5Srxek0uTqQu5t8F/EZ5H8pB0XFVTum6EHUH9wDhrOyt1AlkgV5yq/T+y6YxeF9iAQf3s/wCpjjnAgBz6A7kB6L4ZHoD9cXrAjWDR4claAQXAPsdTyS9UQfSnvJ8gH4/99h4d1Dr8nGrAuOTucn1NBAb0OmOM8/CNpBY1YAjn3ZzcI6LdfDOCTYBE5/D8Xvc/U/bMg8j22maCU25Ck71oUHIHI/g3A7eStcj2oJFBKNIXhnJhxsBl0P6u8mXNCQP0X/U2i79wsVMni2LOgrLn4unu5SBx6Zv2lr4tfDfKzCcOLiB6npxfCh3ze5E4xoH6mz/EpWpy2R9B3LyWPcSDhIQ4XrwKyIuvg6gLaZcJx2FdHVvEIBsS1Pa40dJU5IcXZufL5X3fp1v0bdqY/CMacr/axFOxw/smJloZw2DehtDGTVjMwi6gaO/CQlsfUGjG22N2JXcodXz8IMxl6tNLZEDq2QIHUdp7bgwMLG592TuHx6ljPvjiJQM56kn5w+n/AGuQBSv7YVyn6YXOK575T/fNqVOpVfAkhHhlKwce5eDJMuTgh/Fr8ReYDuKvdhcMbYL0E7Mk+LlloPUsVbRfLt+G+ALbUCQVzotfIBWX5b4yMTSHoyrE/DfVEbEvotKXeDuDAgHqUsM8TkuNRIdodHXPgGtn4ivBD6O2QGFsy/y69F+yPtv22R4u8cmc56E+DuxLkITriPREN/P/AOGkMWWXyXHtb6LfiCeGfgdhD6gdcsYLj8sYSYEfbftl+8d21NnGOR+5OerRDscWBY1tz8x8lk47z8AHtuPRn+E0Nhq+F5PwIPkbV8wfe/lD2WwzbXu3MuLA9LDJeJ1Lg92BHl6tCPVzEn+HIS4HjFxs53TOxTPGR+HPgDzgSCQISdLq1uRyD8QrKuDPmJJ526SzkvvghXl+2e/+EfONkPOSLUjGEUjT3jTYBPmwsAeYvm5wd9BzvmF6/wAX0j0epEUfxLWIzzjbifsvtukl3OLKch4nuTsX3Yuw53e4KD5tP08XqfzyNOmBvpDeNjG5P/ZJ+BEePONuI+638xmc+Dn3EwkuZnhcYtO3uDZBdttfU8epfiWedldH+gTQhD+fwfD1Kb0+c8DfstHpH0QnqHFAMGHKyGviJEO7qHJAp/mNCCH4ZBZ4LlDNVjN8EC5/s0fzbPnmzzlkfYv0WPhA2Z+++MyzDLHjbNe76ptPwTAYME+eeF8kiMY1gM2nB8cT/hz7sfMj5gPmPjJDCOtCbhTiebk2TLVu2x8rgv8AF3fqXqfLPGQ8+mVO5HKIv6kpxwC8jf8AX5DZP4YfNh82IGu2Bzs1xCZWFCepOLs8bluvBNv8zhn8GeDwzweB6S926I/X4ngnzh82HzYfNh8w6XYsNndo6nZ1PXmWsvYnmMZzzc0tr5H8Dyz9w/FsAAefzJ/Di4uJ39GTE5kxmUjXmDuNgbW83eb3PdftlhM8X8A8r+M/HSfPFxcXEnCGES2sb1kDDERz4nJ4G7f1df58j5PBLN2/Hf8ADxcXFqssrxAx3Quk8TWcax5/bd468HyeVl/zcXHkU6YwL5QpZWvD1JMbbMsPvVlGSnznln/n4t+Fvwht9peXxYraqDwZmeLpg4v1MnhmXk8sS7/4Gnxb8L//xAAvEQACAgEDBAAFAgYDAAAAAAABAgARAxAhMQQSIEEFMDJRYRMiFBVCcYGRJFKh/9oACAECAQE/AC0uHmLowgiw+JEOg1M7YEjDeCXDoPC9TK8CNEhG+pgMXwHOhEuAweB3nEOhjRYPEARjDANog8CIL0uXGiwatmQGiwi5FPB0owieoutzuncZvelRopglzqM1kIDVzPhRd+2HKcZtWInQ9aHoFtzDow2mM7aNLudggSMKOrCVFMyN2KxmHMWyliKAmXOHU0rGOxY12m4uPJj7GKkbiI3cAdG4MxEESoRKrQR+dcnMG4izrcyhO0miZkxk4yoO5nT5UxoyjGQ1VzdzoQMLIX/qBuz7nW9QoUjmxMQpF/toYgrwMUx+dcsTiCfE8VlGIse/8XHaozMXpSF+5idjKWck7bC/97TNgFAqdp0JBxGuO46GJpcJha4vMyc65RMcEfGGBBFgzrU7SQBQERyv9AMxZQMZIyAn2pEGEZSK2uIgRQo4Gq+HT9Q1bxOrW6ud165InEU76dZ3Y8rAoCPYMx9NhyGg3b+I/SYlWp0gHZsPfgp38MnTijUcFWmJj2LrlmM7RfqnTqO4Mw2BnxD4WnU/vU0339GZvh+XDlHcpWdQ79qAmdMhTBi7uaN+FC/D9ZJmKO42iCgINMswqWNAXF6UKbY2fsIxnQ5t+wnnj+86zJhVCMnv1P8Aj9/d/oH1HAMZSosbxcyn3LgNtp/H4u/t3gMGBIuBLuoYIBc/h0P1EwMFFKABC02B4gYzqMAy4BlBJYGnjpuI+PtXH+b0ZVb6gDD0q+iRFRkIBN6HoULXcG0rQwTF9UaEwGHTB1BxDIPTKR/n1OZmcPjwH8HwyqWFj1KlGG4VMVSDrh+qNGMB8GFXMZPaBACaAh6QqpLNR+3MMuEVrWlCbfaYq7uI/d7GhlwGGNF4mF1VwT6mTMW0sepQ9z9v3M28UH7hMghxQjXnS6qXozVBl+4i7jW5cMuK24hjQjUoRWxn8p7hYy/+TN05xuyk8Ts/M7IcZhwH8CChG8agMuOa45hH3MHMU0Qa9zNmVxQETOOxQD6E68WyN9xpc7jL0A3qHGP+w1OuNto3Nkwm5cuCfqRsljmWfC4ToNDqDUc+YEI8xL8KJHmpAjm/MSvCiFEbxr5Ih1HIjOI3hUx4FbCa58D8lPqEbmMNRomYrVGNyfkCHVPqEMbSoNAK+bj+qGNoBoflDwxcwwwjVvlnXDyYYxg1Pyf/xAAuEQACAgEEAQMDBAEFAQAAAAABAgARAwQQEjEhBSBBE0BhIjBRccEGQlKBkaH/2gAIAQMBAT8AUbDqHYGXG3HsBqHuGVsOp3D4inxDufYDuIRCYdhOUEfqA+PafcIJkHnY7jatxGh9gOwgj9wm9gdr2B2qKYTDt4i6bIwsYzUbEy9qRBANmu5UKwTjuvW1wLGl7aHRgA5HFgTBqnfwCP6qHAuVadAZ6n6YMYLoOuxBLl+YfE5TszqCGKfG4MJjCYE5uoj4QMIUGyZhQY2FuoicUTlyWvkzJnxZRkVXBJB8TIKYiAxfJj2IzQNLuCGL1ughHmHxPTdFkcnKq2i+CfzMTUysR4Amo02TK6N9W1sHoCp6nhfLhycP9jCq+RNBpXLg0BxPmZjeR/7OyGjMj37TE63SN3G8if6dzKcGbEHp+RYf0wA/xMePkAD2PEwonG3BPwBNXkzIwTEAFu2bj8fHn+Zh1V+GFNPWARqFs+fprc4wCo424wCcSI8TrdI3cbqYsrIwZGKsOiJo8/JEJPlgD/7MaoWDFz4HV1Nfyy5Ry03Bfhg0Oc4QfN1/My5WyOzsbJOwMaATjCZnwC/0x9O9XUArdO4/cbrbTYRk02Fg1EKKMyazPhBJF/mDX53bu5rOXMAn4BMKTgZUYeBte2LUEEXFIZfxUcfqO6R+4R+mOfgTQepvgHBhyT/6ImsxZcRAIImmwpzeh46nqFHOxXo/4nmAmXORr2HC0w/URT58QtZO6zIahy2KEAjTSplZj9MHxAdTwoYj+SJnPlYpDGjG07j4gWMlLsNBmKcqFQqYdQxhzuRVxd/qn4h8971NDqThyfg9w51CtwJMy+GI2R3Xpqg1LfKgx3DiwIBB6gwTjUuydxs/UG4lTEBzS+rE1ThSooUf4+ZnFZGHsxEA+fmVDUEDL/EZhUG2TqCAbVBtjynIi38eJnN5GlwAn43v2ico/Rgr2VtgamjmyxggyVsPfUbowGcoD7AaPs0ujbL5Nhf5qP6UlrWWh+RZMyIUdlPYP9e89QbCBCehPpt/xMRL+ROZgaXAYmtRVA5EV1MfqmFLr6hJFE0L/wCo7MzFiSSYP2BAZhcCPksVcH6eqip1D2dgJUre/cYJX2RAi/YAShL2vz9hcv2D7MCD2kfunZfsjsNyf322G5g/ebYbH7Btl/d//9k="/>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/estimate.svg b/apps/app/public/empty-state/estimate.svg
new file mode 100644
index 000000000..604b2f143
--- /dev/null
+++ b/apps/app/public/empty-state/estimate.svg
@@ -0,0 +1,19 @@
+<svg width="98" height="121" viewBox="0 0 98 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8707 74.5375C16.3076 72.9545 18.6808 73.4171 20.2598 74.5344C22.2919 75.9722 22.873 78.598 23.1728 80.9255C23.6803 84.8657 23.8304 90.4355 28.2986 92.0828C30.363 92.8439 32.7261 92.2154 34.4697 90.9796C36.3742 89.6297 37.5622 87.5534 38.3579 85.4014C39.3213 82.796 39.879 80.0089 40.3517 77.2785C40.8351 74.4863 41.1519 71.664 41.2941 68.8338C41.4333 66.0649 41.3427 63.3142 41.2327 60.5471C41.1467 58.3866 41.1139 56.1179 41.8437 54.052C42.5808 51.9655 44.2945 50.3785 46.5478 50.1692C48.7349 49.966 50.9875 50.8883 52.57 52.3768C56.3668 55.9484 56.5454 61.7791 57.3941 66.5679C57.8399 69.084 58.4917 71.63 59.8579 73.819C60.9816 75.6193 62.5432 77.1286 64.3419 78.2484C67.9699 80.507 72.5929 81.1661 76.6187 79.6144C80.5491 78.0995 83.713 74.7878 85.082 70.8073C85.4201 69.8243 85.6289 68.8088 85.7348 67.7756C85.7841 67.2952 85.0326 67.2986 84.9838 67.7756C84.5336 72.1666 81.7151 76.1433 77.8526 78.2259C73.8783 80.3689 69.0654 80.097 65.1824 77.8754C63.2735 76.7832 61.6129 75.2427 60.4591 73.364C59.0598 71.0857 58.4606 68.4301 58.0247 65.8227C57.2373 61.1135 56.8802 55.7066 53.3508 52.0908C50.6136 49.2866 45.5767 48.1613 42.635 51.2848C39.6059 54.501 40.5139 59.682 40.6106 63.6745C40.7523 69.5217 40.1494 75.3825 38.8131 81.0769C38.2314 83.5555 37.5623 86.1115 36.1024 88.2369C34.7681 90.1793 32.5875 91.6848 30.1594 91.6609C27.7378 91.637 26.0364 89.8572 25.1768 87.7354C24.2698 85.4969 24.2104 83.0793 23.8965 80.7163C23.6084 78.5472 23.0835 76.1467 21.4568 74.5592C20.1918 73.3248 18.3152 72.5301 16.5348 72.814C15.6794 72.9505 14.9208 73.3661 14.3396 74.0064C14.0153 74.3636 14.5449 74.8963 14.8707 74.5375Z" fill="#3F76FF"/>
+<path d="M55.4847 43.7299H38.3499C37.9179 43.7299 37.5664 43.3784 37.5664 42.9464C37.5664 42.5144 37.9179 42.1631 38.3499 42.1631H55.4847C55.9167 42.1631 56.268 42.5144 56.268 42.9464C56.268 43.3784 55.9167 43.7299 55.4847 43.7299Z" fill="#D4D4D4"/>
+<path d="M81.9847 89.2958H64.8499C64.4179 89.2958 64.0664 88.9443 64.0664 88.5123C64.0664 88.0803 64.4179 87.729 64.8499 87.729H81.9847C82.4167 87.729 82.768 88.0803 82.768 88.5123C82.768 88.9443 82.4167 89.2958 81.9847 89.2958Z" fill="#D4D4D4"/>
+<path d="M96.0159 120.34H78.8811C78.4491 120.34 78.0977 119.989 78.0977 119.557C78.0977 119.125 78.4491 118.773 78.8811 118.773H96.0159C96.4479 118.773 96.7993 119.125 96.7993 119.557C96.7993 119.989 96.4479 120.34 96.0159 120.34Z" fill="#D4D4D4"/>
+<path d="M17.9183 26.7069H0.78347C0.351487 26.7069 0 26.3554 0 25.9235C0 25.4915 0.351492 25.1401 0.78347 25.1401H17.9183C18.3503 25.1401 18.7016 25.4915 18.7016 25.9235C18.7016 26.3554 18.3503 26.7069 17.9183 26.7069Z" fill="#D4D4D4"/>
+<path d="M87.2283 111.248H9.56712C9.29059 111.248 9.06641 111.023 9.06641 110.747V36.6409C9.06641 36.3641 9.2906 36.1401 9.56712 36.1401C9.84364 36.1401 10.0678 36.3641 10.0678 36.6409V66.8782C10.0678 90.8296 29.4843 110.246 53.4358 110.246H87.2283C87.5048 110.246 87.729 110.47 87.729 110.747C87.729 111.024 87.5048 111.248 87.2283 111.248Z" fill="#D4D4D4"/>
+<path d="M25.9613 81.4652H8.82644C8.39446 81.4652 8.04297 81.1137 8.04297 80.6817C8.04297 80.2498 8.39446 79.8984 8.82644 79.8984H25.9613C26.3932 79.8984 26.7446 80.2498 26.7446 80.6817C26.7446 81.1137 26.3932 81.4652 25.9613 81.4652Z" fill="#D4D4D4"/>
+<path d="M14.8118 76.6085C16.0562 76.6085 17.065 75.5997 17.065 74.3553C17.065 73.1109 16.0562 72.1021 14.8118 72.1021C13.5674 72.1021 12.5586 73.1109 12.5586 74.3553C12.5586 75.5997 13.5674 76.6085 14.8118 76.6085Z" fill="#2E2E2E"/>
+<path d="M29.8431 94.1349C31.0875 94.1349 32.0963 93.1261 32.0963 91.8816C32.0963 90.6372 31.0875 89.6284 29.8431 89.6284C28.5986 89.6284 27.5898 90.6372 27.5898 91.8816C27.5898 93.1261 28.5986 94.1349 29.8431 94.1349Z" fill="#2E2E2E"/>
+<path d="M46.8587 52.0738C48.1031 52.0738 49.1119 51.065 49.1119 49.8206C49.1119 48.5762 48.1031 47.5674 46.8587 47.5674C45.6143 47.5674 44.6055 48.5762 44.6055 49.8206C44.6055 51.065 45.6143 52.0738 46.8587 52.0738Z" fill="#2E2E2E"/>
+<path d="M71.9017 82.1178C73.1461 82.1178 74.1549 81.109 74.1549 79.8646C74.1549 78.6201 73.1461 77.6113 71.9017 77.6113C70.6572 77.6113 69.6484 78.6201 69.6484 79.8646C69.6484 81.109 70.6572 82.1178 71.9017 82.1178Z" fill="#2E2E2E"/>
+<path d="M86.4368 70.1007C87.6812 70.1007 88.69 69.0919 88.69 67.8475C88.69 66.603 87.6812 65.5942 86.4368 65.5942C85.1924 65.5942 84.1836 66.603 84.1836 67.8475C84.1836 69.0919 85.1924 70.1007 86.4368 70.1007Z" fill="#2E2E2E"/>
+<path d="M82.1267 20.0406L86.2476 21.9926C84.5574 19.6339 83.101 15.95 82.3213 13.0186C81.0011 15.7492 78.873 19.0903 76.7664 21.0861L81.1217 19.9656C78.438 33.1184 68.3439 42.5608 56.7847 42.5608L56.6211 43.0359C68.6949 43.0359 79.3865 33.7244 82.1267 20.0406Z" fill="#2E2E2E"/>
+<path d="M69.6669 0H95.7042C96.8085 0 97.707 0.8985 97.707 2.00286C97.707 3.10723 96.8085 4.00573 95.7042 4.00573H69.6669C68.5626 4.00573 67.6641 3.10723 67.6641 2.00286C67.6641 0.8985 68.5626 0 69.6669 0Z" fill="#3F76FF"/>
+<path d="M87.2735 115.346C86.999 115.346 86.722 115.285 86.4582 115.162C85.8076 114.856 85.399 114.245 85.3658 113.527L85.0959 107.706C85.0612 106.958 85.4514 106.278 86.1144 105.931C86.7772 105.584 87.5586 105.651 88.153 106.105L92.1177 109.137C92.5944 109.502 92.8668 110.055 92.8648 110.655C92.8631 111.255 92.5873 111.806 92.1084 112.168L88.4136 114.958C88.0726 115.215 87.6757 115.346 87.2735 115.346Z" fill="#D4D4D4"/>
+<path d="M14.2019 37.1274C14.2019 37.402 14.1407 37.679 14.017 37.9428C13.7114 38.5934 13.1002 39.0019 12.3824 39.0352L6.56105 39.3051C5.8134 39.3398 5.13372 38.9496 4.78654 38.2865C4.43937 37.6237 4.50684 36.8423 4.96062 36.248L7.99279 32.2833C8.35708 31.8066 8.9106 31.5342 9.51009 31.5361C10.1106 31.5379 10.6616 31.8136 11.0235 32.2926L13.8131 35.9873C14.0703 36.3284 14.2019 36.7252 14.2019 37.1274Z" fill="#D4D4D4"/>
+<path d="M46.6797 31.9702C43.7154 31.2601 40.5482 31.9028 38.0143 33.5767C35.3571 35.332 33.5978 38.1427 33.0023 41.2566C31.7737 47.6809 35.5272 54.0986 41.4594 56.6556C47.6955 59.3435 55.114 57.5399 59.6426 52.5512C61.8873 50.0785 63.2901 46.9504 63.7125 43.6423C64.1286 40.3835 63.654 36.6235 61.6807 33.9037C59.7234 31.2058 56.464 30.3005 53.3163 29.8584C50.262 29.4294 46.2102 29.2429 44.5587 32.4757C44.2438 33.0921 44.0958 33.7563 44.1307 34.4476C44.155 34.9286 44.9062 34.9315 44.8818 34.4476C44.8055 32.9361 45.8132 31.6731 47.1049 30.9938C48.6018 30.2065 50.4074 30.2731 52.04 30.4486C54.9873 30.7654 58.3335 31.3306 60.459 33.5942C62.5762 35.8491 63.2109 39.2854 63.0795 42.2786C62.9423 45.4028 61.8658 48.4778 59.9796 50.9765C56.2574 55.9072 49.7451 58.253 43.754 56.6601C37.9165 55.1081 37.8402 51.6438 37.9365 45.5088C37.9879 42.2359 34.8963 37.0842 37.4205 34.9513C39.8919 32.8631 43.3172 31.9368 46.4801 32.6944C46.9499 32.807 47.1503 32.0829 46.6797 31.9702Z" fill="#3F76FF"/>
+</svg>
diff --git a/apps/app/public/empty-state/integration.svg b/apps/app/public/empty-state/integration.svg
new file mode 100644
index 000000000..d4f8ec5e8
--- /dev/null
+++ b/apps/app/public/empty-state/integration.svg
@@ -0,0 +1,15 @@
+<svg width="236" height="53" viewBox="0 0 236 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M195.448 46.8071H100.383C99.8783 46.8065 99.3948 46.6059 99.0382 46.2494C98.6816 45.8928 98.481 45.4093 98.4805 44.905V26.987H99.2413V44.905C99.2416 45.2076 99.362 45.4977 99.5759 45.7116C99.7899 45.9256 100.08 46.0459 100.383 46.0463H195.448C195.75 46.0459 196.04 45.9256 196.254 45.7116C196.468 45.4977 196.589 45.2076 196.589 44.905V26.8618H197.35V44.905C197.349 45.4093 197.149 45.8928 196.792 46.2494C196.435 46.6059 195.952 46.8065 195.448 46.8071Z" fill="#262626"/>
+<path d="M229.943 26.606H6.55078V27.3668H229.943V26.606Z" fill="#262626"/>
+<path d="M6.54403 33.4724C10.1582 33.4724 13.0881 30.5425 13.0881 26.9283C13.0881 23.3141 10.1582 20.3843 6.54403 20.3843C2.92986 20.3843 0 23.3141 0 26.9283C0 30.5425 2.92986 33.4724 6.54403 33.4724Z" fill="#3F76FF"/>
+<path d="M73.0636 33.4724C76.6777 33.4724 79.6076 30.5425 79.6076 26.9283C79.6076 23.3141 76.6777 20.3843 73.0636 20.3843C69.4494 20.3843 66.5195 23.3141 66.5195 26.9283C66.5195 30.5425 69.4494 33.4724 73.0636 33.4724Z" fill="#3F76FF"/>
+<path d="M118.189 52.7062C121.803 52.7062 124.733 49.7764 124.733 46.1622C124.733 42.548 121.803 39.6182 118.189 39.6182C114.574 39.6182 111.645 42.548 111.645 46.1622C111.645 49.7764 114.574 52.7062 118.189 52.7062Z" fill="#262626"/>
+<path d="M152.493 52.7062C156.107 52.7062 159.037 49.7764 159.037 46.1622C159.037 42.548 156.107 39.6182 152.493 39.6182C148.879 39.6182 145.949 42.548 145.949 46.1622C145.949 49.7764 148.879 52.7062 152.493 52.7062Z" fill="#D4D4D4"/>
+<path d="M135.853 33.4724C139.467 33.4724 142.397 30.5425 142.397 26.9283C142.397 23.3141 139.467 20.3843 135.853 20.3843C132.238 20.3843 129.309 23.3141 129.309 26.9283C129.309 30.5425 132.238 33.4724 135.853 33.4724Z" fill="#3F76FF"/>
+<path d="M229.009 33.4724C232.623 33.4724 235.553 30.5425 235.553 26.9283C235.553 23.3141 232.623 20.3843 229.009 20.3843C225.395 20.3843 222.465 23.3141 222.465 26.9283C222.465 30.5425 225.395 33.4724 229.009 33.4724Z" fill="#3F76FF"/>
+<path d="M196.962 33.4724C200.576 33.4724 203.506 30.5425 203.506 26.9283C203.506 23.3141 200.576 20.3843 196.962 20.3843C193.348 20.3843 190.418 23.3141 190.418 26.9283C190.418 30.5425 193.348 33.4724 196.962 33.4724Z" fill="#3F76FF"/>
+<path d="M26.8335 27.3682C26.7327 27.3682 26.6359 27.3281 26.5646 27.2568C26.4932 27.1855 26.4531 27.0887 26.4531 26.9878V8.20924C26.4537 7.70495 26.6543 7.22148 27.0109 6.86489C27.3675 6.5083 27.8509 6.30771 28.3552 6.30713H46.8723C46.9731 6.30713 47.0699 6.34721 47.1413 6.41856C47.2126 6.4899 47.2527 6.58666 47.2527 6.68755C47.2527 6.78845 47.2126 6.88521 47.1413 6.95656C47.0699 7.0279 46.9731 7.06798 46.8723 7.06798H28.3552C28.0527 7.06831 27.7626 7.18865 27.5486 7.40261C27.3346 7.61657 27.2143 7.90666 27.214 8.20924V26.9878C27.214 27.0887 27.1739 27.1855 27.1025 27.2568C27.0312 27.3281 26.9344 27.3682 26.8335 27.3682Z" fill="#262626"/>
+<path d="M47.7433 13.0881C51.3574 13.0881 54.2873 10.1582 54.2873 6.54404C54.2873 2.92987 51.3574 0 47.7433 0C44.1291 0 41.1992 2.92987 41.1992 6.54404C41.1992 10.1582 44.1291 13.0881 47.7433 13.0881Z" fill="#D4D4D4"/>
+<path d="M173.319 26.9878H172.559V8.20924C172.559 7.70495 172.76 7.22148 173.116 6.86489C173.473 6.5083 173.956 6.30771 174.461 6.30713H192.978V7.06798H174.461C174.158 7.06831 173.868 7.18865 173.654 7.40261C173.44 7.61657 173.32 7.90666 173.319 8.20924V26.9878Z" fill="#262626"/>
+<path d="M193.806 13.0881C197.42 13.0881 200.35 10.1582 200.35 6.54404C200.35 2.92987 197.42 0 193.806 0C190.192 0 187.262 2.92987 187.262 6.54404C187.262 10.1582 190.192 13.0881 193.806 13.0881Z" fill="#D4D4D4"/>
+</svg>
diff --git a/apps/app/public/empty-state/issue.svg b/apps/app/public/empty-state/issue.svg
new file mode 100644
index 000000000..98a420d75
--- /dev/null
+++ b/apps/app/public/empty-state/issue.svg
@@ -0,0 +1,15 @@
+<svg width="97" height="110" viewBox="0 0 97 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.748 110H9.8374C7.22926 109.997 4.72879 108.96 2.88456 107.115C1.04033 105.271 0.00294615 102.771 0 100.163V9.8374C0.00294615 7.22926 1.04033 4.72879 2.88456 2.88456C4.72879 1.04033 7.22926 0.00294615 9.8374 0H81.3901L96.5854 12.1116V100.163C96.5824 102.771 95.545 105.271 93.7008 107.115C91.8566 108.96 89.3561 109.997 86.748 110Z" fill="#E5E5E5"/>
+<path d="M9.83745 2.83199C7.98014 2.83409 6.1995 3.57283 4.88618 4.88615C3.57287 6.19946 2.83412 7.9801 2.83203 9.83741V100.163C2.83412 102.02 3.57287 103.801 4.88618 105.114C6.1995 106.427 7.98014 107.166 9.83745 107.168H86.748C88.6053 107.166 90.386 106.427 91.6993 105.114C93.0126 103.801 93.7514 102.02 93.7534 100.163V13.4759L80.3996 2.83199H9.83745Z" fill="white"/>
+<path d="M71.7873 29.0961H36.771C36.5559 29.0961 36.3428 29.0538 36.1441 28.9714C35.9453 28.8891 35.7647 28.7685 35.6126 28.6163C35.4605 28.4642 35.3398 28.2836 35.2575 28.0849C35.1752 27.8861 35.1328 27.6731 35.1328 27.458C35.1328 27.2428 35.1752 27.0298 35.2575 26.8311C35.3398 26.6323 35.4605 26.4517 35.6126 26.2996C35.7647 26.1475 35.9453 26.0268 36.1441 25.9445C36.3428 25.8621 36.5559 25.8198 36.771 25.8198H71.7873C72.0024 25.8198 72.2155 25.8621 72.4142 25.9445C72.613 26.0268 72.7936 26.1475 72.9457 26.2996C73.0978 26.4517 73.2185 26.6323 73.3008 26.8311C73.3831 27.0298 73.4255 27.2428 73.4255 27.458C73.4255 27.6731 73.3831 27.8861 73.3008 28.0849C73.2185 28.2836 73.0978 28.4642 72.9457 28.6163C72.7936 28.7685 72.613 28.8891 72.4142 28.9714C72.2155 29.0538 72.0024 29.0961 71.7873 29.0961Z" fill="#D4D4D4"/>
+<path d="M78.5448 34.625H36.771C36.3365 34.625 35.9198 34.4524 35.6126 34.1452C35.3054 33.838 35.1328 33.4213 35.1328 32.9868C35.1328 32.5523 35.3054 32.1356 35.6126 31.8284C35.9198 31.5212 36.3365 31.3486 36.771 31.3486H78.5448C78.9793 31.3486 79.396 31.5212 79.7032 31.8284C80.0104 32.1356 80.183 32.5523 80.183 32.9868C80.183 33.4213 80.0104 33.838 79.7032 34.1452C79.396 34.4524 78.9793 34.625 78.5448 34.625Z" fill="#D4D4D4"/>
+<path d="M71.7873 53.8737H36.771C36.3365 53.8737 35.9198 53.7011 35.6126 53.3939C35.3054 53.0867 35.1328 52.67 35.1328 52.2355C35.1328 51.8011 35.3054 51.3844 35.6126 51.0772C35.9198 50.77 36.3365 50.5974 36.771 50.5974H71.7873C72.2218 50.5974 72.6385 50.77 72.9457 51.0772C73.2529 51.3844 73.4255 51.8011 73.4255 52.2355C73.4255 52.67 73.2529 53.0867 72.9457 53.3939C72.6385 53.7011 72.2218 53.8737 71.7873 53.8737Z" fill="#D4D4D4"/>
+<path d="M78.5448 59.4026H36.771C36.3365 59.4026 35.9198 59.23 35.6126 58.9228C35.3054 58.6156 35.1328 58.1989 35.1328 57.7644C35.1328 57.33 35.3054 56.9133 35.6126 56.6061C35.9198 56.2988 36.3365 56.1263 36.771 56.1263H78.5448C78.9793 56.1263 79.396 56.2988 79.7032 56.6061C80.0104 56.9133 80.183 57.33 80.183 57.7644C80.183 58.1989 80.0104 58.6156 79.7032 58.9228C79.396 59.23 78.9793 59.4026 78.5448 59.4026Z" fill="#D4D4D4"/>
+<path d="M71.7873 78.6514H36.771C36.3365 78.6514 35.9198 78.4788 35.6126 78.1716C35.3054 77.8643 35.1328 77.4477 35.1328 77.0132C35.1328 76.5787 35.3054 76.162 35.6126 75.8548C35.9198 75.5476 36.3365 75.375 36.771 75.375H71.7873C72.2218 75.375 72.6385 75.5476 72.9457 75.8548C73.2529 76.162 73.4255 76.5787 73.4255 77.0132C73.4255 77.4477 73.2529 77.8643 72.9457 78.1716C72.6385 78.4788 72.2218 78.6514 71.7873 78.6514Z" fill="#D4D4D4"/>
+<path d="M78.5448 84.1803H36.771C36.3365 84.1803 35.9198 84.0077 35.6126 83.7004C35.3054 83.3932 35.1328 82.9766 35.1328 82.5421C35.1328 82.1076 35.3054 81.6909 35.6126 81.3837C35.9198 81.0765 36.3365 80.9039 36.771 80.9039H78.5448C78.9793 80.9039 79.396 81.0765 79.7032 81.3837C80.0104 81.6909 80.183 82.1076 80.183 82.5421C80.183 82.9766 80.0104 83.3932 79.7032 83.7004C79.396 84.0077 78.9793 84.1803 78.5448 84.1803Z" fill="#D4D4D4"/>
+<path d="M22.1846 36.0125C25.3824 36.0125 27.9747 33.4202 27.9747 30.2224C27.9747 27.0246 25.3824 24.4323 22.1846 24.4323C18.9868 24.4323 16.3945 27.0246 16.3945 30.2224C16.3945 33.4202 18.9868 36.0125 22.1846 36.0125Z" fill="#3F76FF"/>
+<path d="M21.6211 32.4311C21.4909 32.4314 21.3641 32.3892 21.2598 32.3111L21.2534 32.3062L19.8926 31.2653C19.7655 31.1677 19.6823 31.0236 19.6614 30.8646C19.6405 30.7057 19.6835 30.545 19.781 30.4178C19.8786 30.2906 20.0226 30.2073 20.1815 30.1862C20.3404 30.1652 20.5012 30.2081 20.6285 30.3055L21.5098 30.9814L23.5926 28.2642C23.6409 28.2012 23.7011 28.1483 23.7698 28.1086C23.8386 28.0689 23.9145 28.0431 23.9932 28.0327C24.0718 28.0223 24.1518 28.0275 24.2285 28.048C24.3052 28.0685 24.3771 28.1039 24.4401 28.1522L24.4273 28.1703L24.4406 28.1524C24.5677 28.2501 24.6508 28.3942 24.6718 28.5531C24.6928 28.712 24.6498 28.8727 24.5524 29L22.1026 32.1946C22.046 32.2682 21.9731 32.3278 21.8897 32.3687C21.8063 32.4096 21.7145 32.4307 21.6216 32.4304L21.6211 32.4311Z" fill="white"/>
+<path d="M22.7823 60.7901C25.9801 60.7901 28.5724 58.1978 28.5724 55C28.5724 51.8022 25.9801 49.2099 22.7823 49.2099C19.5845 49.2099 16.9922 51.8022 16.9922 55C16.9922 58.1978 19.5845 60.7901 22.7823 60.7901Z" fill="#D4D4D4"/>
+<path d="M22.1846 85.5677C25.3824 85.5677 27.9747 82.9754 27.9747 79.7776C27.9747 76.5798 25.3824 73.9875 22.1846 73.9875C18.9868 73.9875 16.3945 76.5798 16.3945 79.7776C16.3945 82.9754 18.9868 85.5677 22.1846 85.5677Z" fill="#D4D4D4"/>
+<path d="M96.2887 12.5014H84.3857C83.5168 12.5014 82.6834 12.1562 82.069 11.5418C81.4546 10.9273 81.1094 10.094 81.1094 9.22501V0.433652C81.1094 0.395162 81.1202 0.357449 81.1407 0.324842C81.1611 0.292236 81.1904 0.266054 81.225 0.249298C81.2597 0.232542 81.2983 0.22589 81.3366 0.230107C81.3748 0.234324 81.4111 0.249237 81.4413 0.273137L96.4158 12.1361C96.4492 12.1625 96.4735 12.1986 96.4853 12.2394C96.4972 12.2803 96.4961 12.3238 96.4821 12.3639C96.4681 12.4041 96.442 12.4389 96.4073 12.4635C96.3727 12.4882 96.3312 12.5014 96.2887 12.5014Z" fill="#E5E5E5"/>
+</svg>
diff --git a/apps/app/public/empty-state/label.svg b/apps/app/public/empty-state/label.svg
new file mode 100644
index 000000000..55241e251
--- /dev/null
+++ b/apps/app/public/empty-state/label.svg
@@ -0,0 +1,42 @@
+<svg width="179" height="122" viewBox="0 0 179 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64.8237 93.7455C89.413 93.7455 109.347 73.8119 109.347 49.2226C109.347 24.6333 89.413 4.69971 64.8237 4.69971C40.2344 4.69971 20.3008 24.6333 20.3008 49.2226C20.3008 73.8119 40.2344 93.7455 64.8237 93.7455Z" fill="#F2F2F2"/>
+<path d="M116.497 92.4296C121.153 92.4296 124.927 88.6552 124.927 83.9992C124.927 79.3433 121.153 75.5688 116.497 75.5688C111.841 75.5688 108.066 79.3433 108.066 83.9992C108.066 88.6552 111.841 92.4296 116.497 92.4296Z" fill="#F2F2F2"/>
+<path d="M144.235 119.127C143.954 119.675 143.54 120.145 143.032 120.494C142.523 120.843 141.937 121.06 141.324 121.127C141.009 121.16 141.102 121.641 141.414 121.609C142.091 121.532 142.739 121.292 143.301 120.907C143.864 120.523 144.324 120.007 144.64 119.404C144.675 119.349 144.688 119.284 144.676 119.221C144.664 119.157 144.628 119.101 144.576 119.063C144.522 119.026 144.456 119.013 144.393 119.025C144.329 119.037 144.272 119.074 144.235 119.127Z" fill="white"/>
+<path d="M100.432 106.656C79.1525 106.657 60.6376 90.7831 57.9023 69.1314L58.4251 69.0652C61.1265 90.4496 79.4159 106.128 100.433 106.129C102.218 106.129 104.002 106.017 105.774 105.792C128.954 102.864 145.429 81.6238 142.501 58.4441L143.024 58.3779C145.988 81.8459 129.308 103.351 105.84 106.315C104.046 106.542 102.24 106.656 100.432 106.656Z" fill="#262626"/>
+<path d="M101.577 115.468H93.1981C93.0191 115.469 92.8423 115.428 92.6811 115.351C92.5198 115.273 92.3782 115.16 92.2669 115.02C92.157 114.883 92.0794 114.723 92.04 114.552C92.0007 114.381 92.0005 114.204 92.0396 114.033C92.8346 110.524 92.7877 106.877 91.9026 103.389C91.8422 103.148 91.8594 102.895 91.9517 102.664C92.044 102.434 92.2067 102.238 92.4166 102.105C95.3152 100.31 98.4715 100.366 102.066 102.277C102.23 102.363 102.371 102.486 102.479 102.635C102.587 102.785 102.66 102.958 102.69 103.14C103.285 106.884 103.306 110.698 102.752 114.448C102.712 114.732 102.572 114.991 102.356 115.179C102.14 115.366 101.863 115.469 101.577 115.468Z" fill="#3F76FF"/>
+<path d="M63.3544 70.6825H54.9758C54.7967 70.6829 54.62 70.6428 54.4587 70.5651C54.2974 70.4874 54.1558 70.3742 54.0446 70.234C53.9346 70.0973 53.857 69.9376 53.8177 69.7667C53.7783 69.5958 53.7782 69.4182 53.8173 69.2472C54.6152 65.7262 54.5651 62.0659 53.671 58.568C53.6144 58.3377 53.6281 58.0957 53.7103 57.8733C53.7924 57.6508 53.9392 57.458 54.1319 57.3197C58.4402 54.2211 61.8332 54.311 64.2165 57.5874C64.324 57.7367 64.3954 57.9089 64.4251 58.0905C65.0619 61.9189 65.0971 65.8233 64.5295 69.6626C64.4901 69.9459 64.3493 70.2054 64.1332 70.3929C63.9172 70.5804 63.6405 70.6833 63.3544 70.6825Z" fill="#D4D4D4"/>
+<path d="M97.689 107.604H94.8067C94.6476 107.604 94.495 107.54 94.3826 107.428C94.2702 107.315 94.207 107.162 94.207 107.003C94.207 106.844 94.2702 106.691 94.3826 106.579C94.495 106.466 94.6476 106.403 94.8067 106.402H97.689C97.8484 106.402 98.0012 106.466 98.1139 106.578C98.2266 106.691 98.29 106.844 98.29 107.003C98.29 107.163 98.2266 107.316 98.1139 107.428C98.0012 107.541 97.8484 107.604 97.689 107.604Z" fill="white"/>
+<path d="M101.213 109.979H94.8067C94.6476 109.979 94.495 109.915 94.3826 109.803C94.2702 109.69 94.207 109.537 94.207 109.378C94.207 109.219 94.2702 109.066 94.3826 108.954C94.495 108.841 94.6476 108.778 94.8067 108.777H101.213C101.372 108.778 101.525 108.841 101.637 108.954C101.75 109.066 101.813 109.219 101.813 109.378C101.813 109.537 101.75 109.69 101.637 109.803C101.525 109.915 101.372 109.979 101.213 109.979Z" fill="white"/>
+<path d="M60.814 62.2903H57.9317C57.7726 62.29 57.62 62.2265 57.5076 62.1138C57.3952 62.0012 57.332 61.8485 57.332 61.6893C57.332 61.5302 57.3952 61.3775 57.5076 61.2648C57.62 61.1522 57.7726 61.0887 57.9317 61.0884H60.814C60.9732 61.0887 61.1257 61.1522 61.2381 61.2648C61.3506 61.3775 61.4137 61.5302 61.4137 61.6893C61.4137 61.8485 61.3506 62.0012 61.2381 62.1138C61.1257 62.2265 60.9732 62.29 60.814 62.2903Z" fill="white"/>
+<path d="M60.814 64.3977H57.9317C57.7726 64.3974 57.62 64.3339 57.5076 64.2212C57.3952 64.1086 57.332 63.9559 57.332 63.7968C57.332 63.6376 57.3952 63.4849 57.5076 63.3723C57.62 63.2596 57.7726 63.1961 57.9317 63.1958H60.814C60.9732 63.1961 61.1257 63.2596 61.2381 63.3723C61.3506 63.4849 61.4137 63.6376 61.4137 63.7968C61.4137 63.9559 61.3506 64.1086 61.2381 64.2212C61.1257 64.3339 60.9732 64.3974 60.814 64.3977Z" fill="white"/>
+<path d="M60.814 66.5061H57.9317C57.7726 66.5058 57.62 66.4423 57.5076 66.3296C57.3952 66.217 57.332 66.0643 57.332 65.9052C57.332 65.746 57.3952 65.5933 57.5076 65.4807C57.62 65.368 57.7726 65.3045 57.9317 65.3042H60.814C60.9732 65.3045 61.1257 65.368 61.2381 65.4807C61.3506 65.5933 61.4137 65.746 61.4137 65.9052C61.4137 66.0643 61.3506 66.217 61.2381 66.3296C61.1257 66.4423 60.9732 66.5058 60.814 66.5061Z" fill="white"/>
+<path d="M176.143 80.5809H149.36C148.642 80.5801 147.954 80.2946 147.446 79.787C146.939 79.2794 146.653 78.5913 146.652 77.8735V61.3773C146.653 60.6595 146.939 59.9714 147.446 59.4638C147.954 58.9562 148.642 58.6707 149.36 58.6699H176.143C176.861 58.6707 177.549 58.9562 178.057 59.4638C178.564 59.9714 178.85 60.6595 178.851 61.3773V77.8735C178.85 78.5913 178.564 79.2795 178.057 79.787C177.549 80.2946 176.861 80.5801 176.143 80.5809Z" fill="#E6E6E6"/>
+<path d="M165.525 78.4563H151.266C150.594 78.4555 149.949 78.1882 149.474 77.7128C148.999 77.2375 148.731 76.593 148.73 75.9207V63.3305C148.731 62.6582 148.999 62.0137 149.474 61.5384C149.949 61.063 150.594 60.7957 151.266 60.7949H174.284C174.957 60.7957 175.601 61.063 176.077 61.5384C176.552 62.0137 176.819 62.6582 176.82 63.3305V67.162C176.817 70.1564 175.626 73.0272 173.508 75.1445C171.391 77.2619 168.52 78.4529 165.525 78.4563Z" fill="white"/>
+<path d="M171.937 67.6877H153.511C153.352 67.6877 153.199 67.6244 153.086 67.5117C152.973 67.399 152.91 67.2461 152.91 67.0868C152.91 66.9274 152.973 66.7745 153.086 66.6618C153.199 66.5492 153.352 66.4858 153.511 66.4858H171.937C172.096 66.4858 172.249 66.5492 172.362 66.6618C172.474 66.7745 172.538 66.9274 172.538 67.0868C172.538 67.2461 172.474 67.399 172.362 67.5117C172.249 67.6244 172.096 67.6877 171.937 67.6877Z" fill="#E5E5E5"/>
+<path d="M156.392 70.0623H153.51C153.351 70.0619 153.198 69.9985 153.086 69.8858C152.973 69.7731 152.91 69.6205 152.91 69.4613C152.91 69.3021 152.973 69.1495 153.086 69.0368C153.198 68.9241 153.351 68.8607 153.51 68.8604H156.392C156.551 68.8607 156.704 68.9241 156.816 69.0368C156.929 69.1495 156.992 69.3021 156.992 69.4613C156.992 69.6205 156.929 69.7731 156.816 69.8858C156.704 69.9985 156.551 70.0619 156.392 70.0623Z" fill="#E5E5E5"/>
+<path d="M161.498 72.4377H153.511C153.352 72.4377 153.199 72.3744 153.086 72.2617C152.973 72.149 152.91 71.9962 152.91 71.8368C152.91 71.6774 152.973 71.5246 153.086 71.4119C153.199 71.2992 153.352 71.2358 153.511 71.2358H161.498C161.658 71.2358 161.81 71.2992 161.923 71.4119C162.036 71.5246 162.099 71.6774 162.099 71.8368C162.099 71.9962 162.036 72.149 161.923 72.2617C161.81 72.3744 161.658 72.4377 161.498 72.4377Z" fill="#E5E5E5"/>
+<path d="M145.748 64.0054C148.877 64.0054 151.414 61.4687 151.414 58.3396C151.414 55.2105 148.877 52.6738 145.748 52.6738C142.619 52.6738 140.082 55.2105 140.082 58.3396C140.082 61.4687 142.619 64.0054 145.748 64.0054Z" fill="#262626"/>
+<path d="M81.5586 15.2425C81.9337 13.3387 82.68 11.5274 83.7551 9.9121C84.8302 8.29676 86.2129 6.90898 87.8243 5.82801C91.0787 3.6449 95.067 2.84399 98.9119 3.60148C100.816 3.97655 102.627 4.72293 104.242 5.798C105.858 6.87307 107.245 8.25578 108.326 9.86718C109.407 11.4786 110.16 13.2871 110.542 15.1895C110.924 17.0919 110.928 19.051 110.553 20.9548L110.036 20.8529C110.766 17.1452 109.994 13.2991 107.889 10.1608C105.783 7.02254 102.518 4.84909 98.8101 4.1186C95.1023 3.38812 91.2563 4.16044 88.118 6.26567C84.9797 8.37091 82.8062 11.6366 82.0757 15.3443L81.5586 15.2425Z" fill="#262626"/>
+<path d="M87.1952 24.5625L78.8237 24.9092C78.6449 24.917 78.4666 24.8842 78.3022 24.8132C78.1379 24.7423 77.9917 24.635 77.8747 24.4996C77.7592 24.3676 77.6751 24.2112 77.6287 24.042C77.5823 23.8729 77.5748 23.6955 77.6068 23.523C78.2492 20.02 78.062 16.4152 77.0601 12.9975C76.9828 12.7361 76.9985 12.456 77.1046 12.2049C77.2106 11.9538 77.4005 11.7473 77.6418 11.6205C81.0707 9.83905 84.2836 9.74872 87.1907 11.3517C87.3431 11.4345 87.4756 11.5495 87.5789 11.6888C87.6823 11.828 87.754 11.9881 87.7892 12.1579C88.5458 15.8873 88.7273 19.7105 88.3271 23.4947C88.2994 23.7795 88.1695 24.0446 87.9614 24.2409C87.7533 24.4372 87.4811 24.5514 87.1952 24.5625Z" fill="#3F76FF"/>
+<path d="M86.875 19.0832L80.474 19.3483C80.3951 19.3517 80.3163 19.3394 80.2422 19.3123C80.168 19.2852 80.0999 19.2437 80.0418 19.1903C79.9837 19.1368 79.9367 19.0724 79.9034 19.0008C79.8702 18.9292 79.8514 18.8517 79.8482 18.7728C79.8449 18.6939 79.8572 18.6151 79.8844 18.541C79.9116 18.4669 79.9531 18.3988 80.0066 18.3407C80.0601 18.2827 80.1245 18.2357 80.1962 18.2025C80.2679 18.1694 80.3454 18.1507 80.4243 18.1475L86.8252 17.8824C86.9041 17.8791 86.9828 17.8914 87.0569 17.9185C87.131 17.9457 87.199 17.9872 87.2571 18.0406C87.3151 18.0941 87.3621 18.1584 87.3953 18.23C87.4285 18.3016 87.4473 18.3791 87.4505 18.4579C87.4538 18.5368 87.4415 18.6155 87.4143 18.6896C87.3872 18.7637 87.3457 18.8317 87.2922 18.8898C87.2388 18.9478 87.1744 18.9948 87.1028 19.028C87.0312 19.0612 86.9538 19.08 86.875 19.0832Z" fill="white"/>
+<path d="M86.7807 16.9753L80.3797 17.2404C80.2205 17.247 80.0651 17.1901 79.9479 17.0822C79.8306 16.9742 79.761 16.8241 79.7544 16.6649C79.7478 16.5056 79.8048 16.3503 79.9127 16.233C80.0206 16.1157 80.1707 16.0462 80.33 16.0396L86.7309 15.7744C86.8902 15.7678 87.0455 15.8248 87.1628 15.9327C87.2801 16.0407 87.3497 16.1908 87.3562 16.35C87.3628 16.5093 87.3059 16.6646 87.198 16.7819C87.09 16.8991 86.9399 16.9687 86.7807 16.9753Z" fill="white"/>
+<path d="M141.991 21.911H115.207C114.49 21.9102 113.801 21.6247 113.294 21.1171C112.786 20.6095 112.501 19.9214 112.5 19.2036V2.70741C112.501 1.98961 112.786 1.30144 113.294 0.793881C113.801 0.286319 114.49 0.000813734 115.207 0H141.991C142.709 0.000810943 143.397 0.286315 143.905 0.793877C144.412 1.30144 144.698 1.98961 144.698 2.70741V19.2036C144.698 19.9214 144.412 20.6095 143.905 21.1171C143.397 21.6247 142.709 21.9102 141.991 21.911Z" fill="#E6E6E6"/>
+<path d="M131.322 19.7849H117.063C116.391 19.7842 115.746 19.5168 115.271 19.0414C114.796 18.5661 114.528 17.9216 114.527 17.2493V4.6591C114.528 3.98685 114.796 3.34235 115.271 2.867C115.746 2.39165 116.391 2.12428 117.063 2.12354H140.081C140.754 2.12428 141.398 2.39166 141.873 2.86701C142.349 3.34236 142.616 3.98686 142.617 4.6591V8.49057C142.613 11.485 141.422 14.3558 139.305 16.4732C137.188 18.5905 134.317 19.7815 131.322 19.7849Z" fill="white"/>
+<path d="M137.827 9.01875H119.402C119.242 9.01875 119.089 8.95544 118.977 8.84274C118.864 8.73005 118.801 8.5772 118.801 8.41782C118.801 8.25845 118.864 8.1056 118.977 7.9929C119.089 7.88021 119.242 7.81689 119.402 7.81689H137.827C137.987 7.81689 138.14 7.88021 138.252 7.9929C138.365 8.1056 138.428 8.25845 138.428 8.41782C138.428 8.5772 138.365 8.73005 138.252 8.84274C138.14 8.95544 137.987 9.01875 137.827 9.01875Z" fill="#E5E5E5"/>
+<path d="M122.283 11.3943H119.4C119.241 11.394 119.089 11.3305 118.976 11.2178C118.864 11.1052 118.801 10.9525 118.801 10.7933C118.801 10.6342 118.864 10.4815 118.976 10.3688C119.089 10.2562 119.241 10.1927 119.4 10.1924H122.283C122.442 10.1927 122.594 10.2562 122.707 10.3688C122.819 10.4815 122.882 10.6342 122.882 10.7933C122.882 10.9525 122.819 11.1052 122.707 11.2178C122.594 11.3305 122.442 11.394 122.283 11.3943Z" fill="#E5E5E5"/>
+<path d="M127.389 13.7693H119.402C119.242 13.7693 119.09 13.706 118.977 13.5933C118.864 13.4806 118.801 13.3277 118.801 13.1683C118.801 13.009 118.864 12.8561 118.977 12.7434C119.09 12.6307 119.242 12.5674 119.402 12.5674H127.389C127.548 12.5677 127.701 12.6312 127.813 12.7438C127.925 12.8565 127.989 13.0092 127.989 13.1683C127.989 13.3275 127.925 13.4802 127.813 13.5928C127.701 13.7055 127.548 13.769 127.389 13.7693Z" fill="#E5E5E5"/>
+<path d="M115.658 24.7646C117.31 22.1071 116.495 18.6136 113.837 16.9616C111.18 15.3097 107.686 16.1248 106.034 18.7824C104.382 21.4399 105.197 24.9334 107.855 26.5854C110.512 28.2373 114.006 27.4222 115.658 24.7646Z" fill="#262626"/>
+<path d="M35.3719 65.9746C33.0473 59.8295 33.2591 53.0127 35.9607 47.0238C38.6622 41.0349 43.6322 36.3644 49.7773 34.0398C55.9224 31.7153 62.7392 31.9271 68.7281 34.6286C74.7171 37.3302 79.3875 42.3001 81.7121 48.4452L81.2191 48.6317C80.0926 45.6537 78.3906 42.9268 76.2102 40.6065C74.0298 38.2863 71.4138 36.4183 68.5115 35.1091C65.6091 33.7999 62.4773 33.0751 59.2949 32.9762C56.1125 32.8774 52.9418 33.4063 49.9638 34.5328C46.9858 35.6593 44.2588 37.3613 41.9386 39.5417C39.6184 41.7221 37.7503 44.3381 36.4411 47.2404C35.1319 50.1428 34.4072 53.2745 34.3083 56.457C34.2094 59.6394 34.7383 62.8101 35.8648 65.7881L35.3719 65.9746Z" fill="#262626"/>
+<path d="M57.0595 41.4373H48.6809C48.5019 41.4377 48.3251 41.3975 48.1638 41.3199C48.0025 41.2422 47.861 41.129 47.7497 40.9888C47.6397 40.8521 47.5622 40.6924 47.5228 40.5215C47.4834 40.3506 47.4833 40.173 47.5224 40.002C48.3155 36.5013 48.2707 32.8627 47.3914 29.3826C47.3291 29.1363 47.3482 28.8765 47.4459 28.642C47.5436 28.4075 47.7147 28.2109 47.9335 28.0818C50.9686 26.3151 54.2097 26.369 57.5666 28.2425C57.7256 28.3292 57.8626 28.451 57.9673 28.5986C58.072 28.7463 58.1415 28.9159 58.1707 29.0946C58.7682 32.8436 58.7898 36.6618 58.2346 40.4174C58.1952 40.7007 58.0544 40.9602 57.8384 41.1477C57.6223 41.3352 57.3456 41.4381 57.0595 41.4373Z" fill="#3F76FF"/>
+<path d="M53.1187 33.3123H50.2364C50.0773 33.3119 49.9247 33.2485 49.8123 33.1358C49.6999 33.0231 49.6367 32.8705 49.6367 32.7113C49.6367 32.5521 49.6999 32.3995 49.8123 32.2868C49.9247 32.1741 50.0773 32.1107 50.2364 32.1104H53.1187C53.2779 32.1107 53.4304 32.1741 53.5428 32.2868C53.6552 32.3995 53.7184 32.5521 53.7184 32.7113C53.7184 32.8705 53.6552 33.0231 53.5428 33.1358C53.4304 33.2485 53.2779 33.3119 53.1187 33.3123Z" fill="white"/>
+<path d="M56.6441 35.6868H50.2377C50.0783 35.6868 49.9254 35.6235 49.8127 35.5108C49.7 35.3981 49.6367 35.2452 49.6367 35.0858C49.6367 34.9264 49.7 34.7736 49.8127 34.6609C49.9254 34.5482 50.0783 34.4849 50.2377 34.4849H56.6441C56.8033 34.4852 56.9558 34.5487 57.0682 34.6613C57.1807 34.774 57.2438 34.9267 57.2438 35.0858C57.2438 35.245 57.1807 35.3977 57.0682 35.5103C56.9558 35.623 56.8033 35.6864 56.6441 35.6868Z" fill="white"/>
+<path d="M29.491 65.6424H2.70739C1.9896 65.6416 1.30143 65.3561 0.793869 64.8485C0.28631 64.341 0.000809544 63.6528 0 62.935V46.4388C0.000809544 45.7211 0.28631 45.0329 0.793869 44.5253C1.30143 44.0178 1.9896 43.7323 2.70739 43.7314H29.491C30.2088 43.7323 30.897 44.0178 31.4045 44.5253C31.9121 45.0329 32.1976 45.721 32.1984 46.4388V62.935C32.1976 63.6528 31.9121 64.341 31.4045 64.8485C30.897 65.3561 30.2088 65.6416 29.491 65.6424Z" fill="#E6E6E6"/>
+<path d="M18.8302 63.5188H4.57086C3.8986 63.518 3.25408 63.2507 2.77871 62.7753C2.30334 62.3 2.03593 61.6555 2.03516 60.9832V48.393C2.03593 47.7207 2.30334 47.0762 2.77871 46.6009C3.25408 46.1255 3.8986 45.8582 4.57086 45.8574H27.5891C28.2613 45.8582 28.9058 46.1255 29.3812 46.6009C29.8565 47.0762 30.1239 47.7207 30.1247 48.393V52.2245C30.1213 55.2189 28.9302 58.0897 26.8128 60.207C24.6954 62.3244 21.8246 63.5154 18.8302 63.5188Z" fill="white"/>
+<path d="M25.3509 52.7522H6.92515C6.76577 52.7522 6.61292 52.6888 6.50023 52.5761C6.38753 52.4634 6.32422 52.3106 6.32422 52.1512C6.32422 51.9918 6.38753 51.839 6.50023 51.7263C6.61292 51.6136 6.76577 51.5503 6.92515 51.5503H25.3509C25.5103 51.5503 25.6632 51.6136 25.7759 51.7263C25.8885 51.839 25.9519 51.9918 25.9519 52.1512C25.9519 52.3106 25.8885 52.4634 25.7759 52.5761C25.6632 52.6888 25.5103 52.7522 25.3509 52.7522Z" fill="#E5E5E5"/>
+<path d="M9.80619 55.1267H6.92392C6.76475 55.1264 6.61222 55.0629 6.49979 54.9503C6.38736 54.8376 6.32422 54.6849 6.32422 54.5258C6.32422 54.3666 6.38736 54.2139 6.49979 54.1013C6.61222 53.9886 6.76475 53.9251 6.92392 53.9248H9.80619C9.96536 53.9251 10.1179 53.9886 10.2303 54.1013C10.3427 54.2139 10.4059 54.3666 10.4059 54.5258C10.4059 54.6849 10.3427 54.8376 10.2303 54.9503C10.1179 55.0629 9.96536 55.1264 9.80619 55.1267Z" fill="#E5E5E5"/>
+<path d="M14.9111 57.5017H6.92392C6.76475 57.5014 6.61222 57.4379 6.49979 57.3253C6.38736 57.2126 6.32422 57.0599 6.32422 56.9008C6.32422 56.7416 6.38736 56.5889 6.49979 56.4763C6.61222 56.3636 6.76475 56.3001 6.92392 56.2998H14.9111C15.0704 56.2998 15.2233 56.3631 15.336 56.4758C15.4487 56.5885 15.512 56.7414 15.512 56.9008C15.512 57.0601 15.4487 57.213 15.336 57.3257C15.2233 57.4384 15.0704 57.5017 14.9111 57.5017Z" fill="#E5E5E5"/>
+<path d="M40.0524 67.9717C41.7044 65.3141 40.8892 61.8206 38.2317 60.1687C35.5741 58.5167 32.0806 59.3319 30.4286 61.9894C28.7767 64.6469 29.5919 68.1404 32.2494 69.7924C34.9069 71.4444 38.4004 70.6292 40.0524 67.9717Z" fill="#262626"/>
+<path d="M85.757 57.2463H77.3784C77.1994 57.2467 77.0226 57.2065 76.8613 57.1289C76.7 57.0512 76.5584 56.938 76.4472 56.7978C76.3372 56.6611 76.2597 56.5014 76.2203 56.3305C76.1809 56.1596 76.1808 55.982 76.2199 55.811C77.0116 52.3164 76.9683 48.6844 76.0935 45.2097C76.0315 44.96 76.0525 44.6969 76.1535 44.4602C76.2545 44.2235 76.4299 44.0263 76.6531 43.8983C80.7233 41.5684 83.9462 41.6327 86.5061 44.095C86.6855 44.2706 86.8036 44.4993 86.843 44.7473C87.465 48.5461 87.495 52.4183 86.9321 56.2264C86.8927 56.5097 86.7519 56.7692 86.5358 56.9567C86.3198 57.1442 86.0431 57.2471 85.757 57.2463Z" fill="#D4D4D4"/>
+<path d="M82.3921 49.3806H79.5099C79.3507 49.3803 79.1982 49.3168 79.0857 49.2042C78.9733 49.0915 78.9102 48.9388 78.9102 48.7797C78.9102 48.6205 78.9733 48.4678 79.0857 48.3552C79.1982 48.2425 79.3507 48.179 79.5099 48.1787H82.3921C82.5513 48.179 82.7038 48.2425 82.8163 48.3552C82.9287 48.4678 82.9918 48.6205 82.9918 48.7797C82.9918 48.9388 82.9287 49.0915 82.8163 49.2042C82.7038 49.3168 82.5513 49.3803 82.3921 49.3806Z" fill="white"/>
+<path d="M85.9175 51.7561H79.5111C79.3517 51.7561 79.1989 51.6928 79.0862 51.5801C78.9735 51.4674 78.9102 51.3145 78.9102 51.1552C78.9102 50.9958 78.9735 50.8429 79.0862 50.7302C79.1989 50.6175 79.3517 50.5542 79.5111 50.5542H85.9175C86.0767 50.5545 86.2292 50.618 86.3417 50.7307C86.4541 50.8433 86.5172 50.996 86.5172 51.1552C86.5172 51.3143 86.4541 51.467 86.3417 51.5797C86.2292 51.6923 86.0767 51.7558 85.9175 51.7561Z" fill="white"/>
+</svg>
diff --git a/apps/app/public/empty-state/module.svg b/apps/app/public/empty-state/module.svg
new file mode 100644
index 000000000..359b3e972
--- /dev/null
+++ b/apps/app/public/empty-state/module.svg
@@ -0,0 +1,31 @@
+<svg width="128" height="120" viewBox="0 0 128 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M94.6802 91.1239L30.1583 107.739C27.9696 108.3 25.6478 107.97 23.7022 106.821C21.7567 105.672 20.3462 103.799 19.7803 101.611L0.26717 25.8357C-0.293799 23.647 0.0363 21.3252 1.18505 19.3796C2.3338 17.434 4.20739 16.0236 6.39477 15.4577L66.4219 0L81.786 6.87801L100.808 80.7459C101.369 82.9345 101.039 85.2563 99.8899 87.2019C98.7412 89.1475 96.8676 90.5579 94.6802 91.1239Z" fill="#F5F5F5"/>
+<path d="M7.01089 17.8335C5.45321 18.2365 4.11898 19.2409 3.30093 20.6264C2.48288 22.0119 2.24781 23.6653 2.64729 25.2239L22.1604 101C22.5634 102.557 23.5678 103.892 24.9533 104.71C26.3388 105.528 27.9922 105.763 29.5508 105.363L94.0727 88.7481C95.6304 88.3451 96.9646 87.3407 97.7827 85.9552C98.6007 84.5697 98.8358 82.9163 98.4363 81.3577L79.7092 8.63441L66.2069 2.58984L7.01089 17.8335Z" fill="white"/>
+<path d="M81.6203 7.26892L71.6347 9.84033C70.9057 10.0281 70.132 9.9185 69.4838 9.53577C68.8356 9.15305 68.366 8.52849 68.1782 7.79951L66.279 0.424265C66.2707 0.391976 66.2717 0.357998 66.2818 0.326226C66.2919 0.294454 66.3108 0.266177 66.3362 0.244634C66.3617 0.223092 66.3927 0.209157 66.4257 0.204429C66.4587 0.199701 66.4923 0.20437 66.5228 0.217902L81.6481 6.93501C81.6817 6.94996 81.7099 6.97501 81.7287 7.0067C81.7475 7.03838 81.7559 7.07512 81.7528 7.11182C81.7498 7.14853 81.7354 7.18337 81.7117 7.21152C81.6879 7.23967 81.656 7.25973 81.6203 7.26892Z" fill="#F5F5F5"/>
+<path d="M76.3638 71.9795L46.9879 79.5441C46.8074 79.5906 46.6196 79.6011 46.435 79.575C46.2505 79.5488 46.0729 79.4866 45.9124 79.3919C45.752 79.2971 45.6117 79.1717 45.4997 79.0227C45.3877 78.8738 45.3062 78.7042 45.2597 78.5237C45.2132 78.3433 45.2027 78.1554 45.2289 77.9709C45.255 77.7863 45.3172 77.6088 45.412 77.4483C45.5067 77.2878 45.6322 77.1476 45.7811 77.0356C45.9301 76.9236 46.0996 76.842 46.2801 76.7955L75.656 69.2309C75.8365 69.1844 76.0243 69.1739 76.2089 69.2001C76.3934 69.2262 76.571 69.2884 76.7315 69.3832C76.8919 69.4779 77.0322 69.6033 77.1442 69.7523C77.2562 69.9013 77.3377 70.0708 77.3842 70.2513C77.4307 70.4318 77.4412 70.6196 77.415 70.8041C77.3889 70.9887 77.3267 71.1662 77.2319 71.3267C77.1372 71.4872 77.0118 71.6274 76.8628 71.7394C76.7138 71.8514 76.5443 71.933 76.3638 71.9795Z" fill="#CCCCCC"/>
+<path d="M83.236 75.1579L48.191 84.1824C47.8265 84.2762 47.4397 84.2215 47.1156 84.0301C46.7915 83.8387 46.5567 83.5265 46.4628 83.162C46.3689 82.7975 46.4237 82.4106 46.6151 82.0865C46.8065 81.7624 47.1187 81.5276 47.4832 81.4338L82.5282 72.4093C82.8925 72.3158 83.2791 72.3708 83.6029 72.5622C83.9268 72.7536 84.1614 73.0657 84.2552 73.43C84.349 73.7943 84.2943 74.1809 84.1032 74.5049C83.9121 74.8289 83.6002 75.0638 83.236 75.1579Z" fill="#CCCCCC"/>
+<path d="M35.0003 88.6551C37.7705 88.6551 40.0162 86.4094 40.0162 83.6392C40.0162 80.869 37.7705 78.6233 35.0003 78.6233C32.2301 78.6233 29.9844 80.869 29.9844 83.6392C29.9844 86.4094 32.2301 88.6551 35.0003 88.6551Z" fill="#E5E5E5"/>
+<path d="M73.2439 58.8528L34.2297 68.8957C33.1022 69.1846 31.9061 69.0144 30.9039 68.4225C29.9017 67.8307 29.1752 66.8654 28.8838 65.7386L20.7079 33.977C20.419 32.8495 20.5891 31.6534 21.181 30.6512C21.7729 29.649 22.7381 28.9225 23.865 28.6311L62.8791 18.5882C64.0067 18.2993 65.2027 18.4695 66.2049 19.0614C67.2072 19.6532 67.9337 20.6185 68.2251 21.7454L76.401 53.5069C76.6899 54.6344 76.5197 55.8304 75.9279 56.8327C75.336 57.8349 74.3707 58.5614 73.2439 58.8528Z" fill="white"/>
+<path d="M73.2439 58.8528L34.2297 68.8957C33.1022 69.1846 31.9061 69.0144 30.9039 68.4225C29.9017 67.8307 29.1752 66.8654 28.8838 65.7386L20.7079 33.977C20.419 32.8495 20.5891 31.6534 21.181 30.6512C21.7729 29.649 22.7381 28.9225 23.865 28.6311L62.8791 18.5882C64.0067 18.2993 65.2027 18.4695 66.2049 19.0614C67.2072 19.6532 67.9337 20.6185 68.2251 21.7454L76.401 53.5069C76.6899 54.6344 76.5197 55.8304 75.9279 56.8327C75.336 57.8349 74.3707 58.5614 73.2439 58.8528ZM23.9937 29.1313C22.9995 29.3884 22.1478 30.0295 21.6255 30.9138C21.1033 31.7981 20.9531 32.8534 21.208 33.8483L29.384 65.6098C29.6411 66.6041 30.2821 67.4558 31.1665 67.978C32.0508 68.5002 33.1061 68.6504 34.101 68.3955L73.1151 58.3526C74.1094 58.0955 74.9611 57.4545 75.4834 56.5701C76.0056 55.6858 76.1557 54.6305 75.9008 53.6356L67.7249 21.8741C67.4678 20.8798 66.8267 20.0281 65.9424 19.5059C65.0581 18.9836 64.0027 18.8335 63.0079 19.0884L23.9937 29.1313Z" fill="#E5E5E5"/>
+<path d="M60.904 29.2677L41.214 34.3362C41.0419 34.3842 40.8579 34.3651 40.6993 34.2828C40.5407 34.2004 40.4193 34.0608 40.3596 33.8924C40.3318 33.8044 40.3223 33.7116 40.3315 33.6198C40.3408 33.528 40.3687 33.439 40.4134 33.3583C40.4582 33.2776 40.519 33.2069 40.592 33.1505C40.665 33.094 40.7487 33.053 40.8381 33.03L60.8812 27.8706C61.6909 28.2808 61.4781 29.1199 60.904 29.2677Z" fill="#F5F5F5"/>
+<path d="M61.7946 32.7213L42.1046 37.7898C41.9325 37.8378 41.7485 37.8187 41.5899 37.7364C41.4313 37.654 41.3099 37.5144 41.2502 37.346C41.2225 37.258 41.2129 37.1652 41.2222 37.0734C41.2314 36.9816 41.2593 36.8926 41.3041 36.8119C41.3488 36.7312 41.4096 36.6605 41.4826 36.6041C41.5556 36.5476 41.6394 36.5066 41.7287 36.4836L61.7719 31.3242C62.5815 31.7345 62.3687 32.5735 61.7946 32.7213Z" fill="#F5F5F5"/>
+<path d="M63.5496 39.8075L33.4992 47.543C33.327 47.5911 33.1431 47.572 32.9845 47.4896C32.8259 47.4072 32.7044 47.2677 32.6448 47.0992C32.617 47.0112 32.6075 46.9184 32.6167 46.8266C32.626 46.7348 32.6538 46.6458 32.6986 46.5651C32.7434 46.4844 32.8041 46.4137 32.8771 46.3573C32.9501 46.3008 33.0339 46.2599 33.1233 46.2369L63.5271 38.4104C64.3368 38.8206 64.1237 39.6597 63.5496 39.8075Z" fill="#F5F5F5"/>
+<path d="M64.4363 43.2623L34.3859 50.9978C34.2137 51.0459 34.0298 51.0268 33.8712 50.9444C33.7126 50.862 33.5912 50.7225 33.5315 50.554C33.5037 50.466 33.4942 50.3733 33.5034 50.2815C33.5127 50.1896 33.5405 50.1007 33.5853 50.02C33.6301 49.9393 33.6908 49.8685 33.7639 49.8121C33.8369 49.7557 33.9206 49.7147 34.01 49.6917L64.4139 41.8652C65.2235 42.2755 65.0105 43.1146 64.4363 43.2623Z" fill="#F5F5F5"/>
+<path d="M65.327 46.715L35.2765 54.4505C35.1044 54.4985 34.9204 54.4794 34.7618 54.397C34.6032 54.3147 34.4818 54.1751 34.4221 54.0067C34.3943 53.9187 34.3848 53.8259 34.394 53.7341C34.4033 53.6423 34.4312 53.5533 34.4759 53.4726C34.5207 53.3919 34.5815 53.3212 34.6545 53.2647C34.7275 53.2083 34.8112 53.1673 34.9006 53.1443L65.3045 45.3179C66.1141 45.7281 65.9011 46.5672 65.327 46.715Z" fill="#F5F5F5"/>
+<path d="M66.2176 50.1693L36.1671 57.9048C35.995 57.9529 35.811 57.9338 35.6524 57.8514C35.4938 57.769 35.3724 57.6295 35.3127 57.461C35.285 57.373 35.2754 57.2803 35.2847 57.1884C35.2939 57.0966 35.3218 57.0076 35.3666 56.9269C35.4113 56.8462 35.4721 56.7755 35.5451 56.7191C35.6181 56.6626 35.7019 56.6217 35.7912 56.5987L66.1951 48.7722C67.0048 49.1825 66.7917 50.0215 66.2176 50.1693Z" fill="#F5F5F5"/>
+<path d="M67.1082 53.6225L37.0578 61.3579C36.8856 61.406 36.7017 61.3869 36.543 61.3045C36.3844 61.2221 36.263 61.0826 36.2034 60.9141C36.1756 60.8261 36.166 60.7334 36.1753 60.6416C36.1846 60.5497 36.2124 60.4608 36.2572 60.3801C36.302 60.2994 36.3627 60.2286 36.4357 60.1722C36.5087 60.1158 36.5925 60.0748 36.6818 60.0518L67.0857 52.2253C67.8954 52.6356 67.6823 53.4747 67.1082 53.6225Z" fill="#F5F5F5"/>
+<path d="M35.3731 85.3974C35.2639 85.4257 35.1484 85.4177 35.0441 85.3747L35.0376 85.372L33.6712 84.7927C33.6078 84.7659 33.5503 84.7268 33.502 84.6777C33.4537 84.6286 33.4156 84.5705 33.3897 84.5067C33.3639 84.4428 33.351 84.3745 33.3516 84.3056C33.3522 84.2368 33.3664 84.1687 33.3933 84.1053C33.4203 84.042 33.4595 83.9845 33.5086 83.9363C33.5578 83.8881 33.616 83.8501 33.6799 83.8243C33.7437 83.7986 33.8121 83.7858 33.8809 83.7865C33.9498 83.7872 34.0178 83.8015 34.0812 83.8286L34.9666 84.2052L36.1269 81.4757C36.1538 81.4124 36.1929 81.3551 36.242 81.3069C36.291 81.2587 36.3491 81.2207 36.4129 81.195C36.4767 81.1693 36.5449 81.1564 36.6136 81.157C36.6824 81.1576 36.7504 81.1718 36.8136 81.1987L36.8068 81.2167L36.8141 81.1987C36.9418 81.2532 37.0427 81.3562 37.0946 81.4849C37.1465 81.6137 37.1452 81.7578 37.091 81.8857L35.726 85.0949C35.6943 85.1689 35.6461 85.2346 35.5849 85.2869C35.5238 85.3393 35.4514 85.3768 35.3734 85.3967L35.3731 85.3974Z" fill="white"/>
+<path d="M119.422 120H52.7955C50.5361 119.998 48.3699 119.099 46.7723 117.501C45.1747 115.904 44.276 113.738 44.2734 111.478V33.2303C44.276 30.9709 45.1747 28.8048 46.7723 27.2071C48.3699 25.6095 50.5361 24.7108 52.7955 24.7083H114.781L127.944 35.2004V111.478C127.942 113.738 127.043 115.904 125.446 117.501C123.848 119.099 121.682 119.998 119.422 120Z" fill="#E5E5E5"/>
+<path d="M52.7992 27.1616C51.1902 27.1634 49.6477 27.8034 48.51 28.9411C47.3722 30.0788 46.7323 31.6214 46.7305 33.2303V111.478C46.7323 113.087 47.3722 114.63 48.51 115.767C49.6477 116.905 51.1902 117.545 52.7992 117.547H119.426C121.035 117.545 122.578 116.905 123.715 115.767C124.853 114.63 125.493 113.087 125.495 111.478V36.3824L113.926 27.1616H52.7992Z" fill="white"/>
+<path d="M106.468 49.914H76.134C75.7576 49.914 75.3966 49.7645 75.1305 49.4983C74.8644 49.2322 74.7148 48.8712 74.7148 48.4948C74.7148 48.1184 74.8644 47.7575 75.1305 47.4913C75.3966 47.2252 75.7576 47.0757 76.134 47.0757H106.468C106.845 47.0757 107.206 47.2252 107.472 47.4913C107.738 47.7575 107.887 48.1184 107.887 48.4948C107.887 48.8712 107.738 49.2322 107.472 49.4983C107.206 49.7645 106.845 49.914 106.468 49.914Z" fill="#3F76FF"/>
+<path d="M112.324 54.7035H76.136C75.7599 54.703 75.3995 54.5533 75.1337 54.2872C74.868 54.0211 74.7188 53.6604 74.7188 53.2844C74.7188 52.9083 74.868 52.5477 75.1337 52.2816C75.3995 52.0155 75.7599 51.8657 76.136 51.8652H112.324C112.511 51.865 112.696 51.9015 112.868 51.9727C113.04 52.0439 113.197 52.1484 113.329 52.2802C113.461 52.412 113.566 52.5685 113.637 52.7409C113.709 52.9132 113.745 53.0979 113.745 53.2844C113.745 53.4709 113.709 53.6556 113.637 53.8279C113.566 54.0002 113.461 54.1567 113.329 54.2885C113.197 54.4204 113.04 54.5248 112.868 54.5961C112.696 54.6673 112.511 54.7038 112.324 54.7035Z" fill="#3F76FF"/>
+<path d="M106.467 68.5391H76.1339C75.7575 68.5391 75.3966 68.6886 75.1305 68.9547C74.8643 69.2208 74.7148 69.5818 74.7148 69.9581C74.7148 70.3345 74.8643 70.6954 75.1305 70.9615C75.3966 71.2277 75.7575 71.3772 76.1339 71.3772H106.467C106.844 71.3772 107.204 71.2277 107.471 70.9615C107.737 70.6954 107.886 70.3345 107.886 69.9581C107.886 69.5818 107.737 69.2208 107.471 68.9547C107.204 68.6886 106.844 68.5391 106.467 68.5391Z" fill="#CCCCCC"/>
+<path d="M112.322 73.3296H76.1339C75.7575 73.3296 75.3966 73.4791 75.1305 73.7452C74.8643 74.0113 74.7148 74.3723 74.7148 74.7486C74.7148 75.125 74.8643 75.4859 75.1305 75.7521C75.3966 76.0182 75.7575 76.1677 76.1339 76.1677H112.322C112.698 76.1677 113.059 76.0182 113.325 75.7521C113.591 75.4859 113.741 75.125 113.741 74.7486C113.741 74.3723 113.591 74.0113 113.325 73.7452C113.059 73.4791 112.698 73.3296 112.322 73.3296Z" fill="#CCCCCC"/>
+<path d="M106.468 92.8427H76.134C75.7576 92.8427 75.3966 92.6932 75.1305 92.427C74.8644 92.1609 74.7148 91.7999 74.7148 91.4235C74.7148 91.0472 74.8644 90.6862 75.1305 90.4201C75.3966 90.1539 75.7576 90.0044 76.134 90.0044H106.468C106.845 90.0044 107.206 90.1539 107.472 90.4201C107.738 90.6862 107.887 91.0472 107.887 91.4235C107.887 91.7999 107.738 92.1609 107.472 92.427C107.206 92.6932 106.845 92.8427 106.468 92.8427Z" fill="#CCCCCC"/>
+<path d="M112.324 97.6327H76.136C75.7599 97.6322 75.3995 97.4825 75.1337 97.2164C74.868 96.9503 74.7188 96.5896 74.7188 96.2136C74.7188 95.8375 74.868 95.4769 75.1337 95.2108C75.3995 94.9447 75.7599 94.7949 76.136 94.7944H112.324C112.511 94.7942 112.696 94.8307 112.868 94.9019C113.04 94.9731 113.197 95.0776 113.329 95.2094C113.461 95.3412 113.566 95.4978 113.637 95.6701C113.709 95.8424 113.745 96.0271 113.745 96.2136C113.745 96.4001 113.709 96.5848 113.637 96.7571C113.566 96.9294 113.461 97.0859 113.329 97.2178C113.197 97.3496 113.04 97.454 112.868 97.5253C112.696 97.5965 112.511 97.633 112.324 97.6327Z" fill="#CCCCCC"/>
+<path d="M63.5003 55.9056C66.2705 55.9056 68.5162 53.6599 68.5162 50.8897C68.5162 48.1195 66.2705 45.8738 63.5003 45.8738C60.7301 45.8738 58.4844 48.1195 58.4844 50.8897C58.4844 53.6599 60.7301 55.9056 63.5003 55.9056Z" fill="#3F76FF"/>
+<path d="M63.0003 52.8029C62.8874 52.8031 62.7776 52.7666 62.6873 52.6989L62.6817 52.6947L61.5029 51.7929C61.4481 51.7511 61.4022 51.6989 61.3676 51.6393C61.333 51.5798 61.3106 51.5139 61.3015 51.4456C61.2924 51.3774 61.2968 51.308 61.3146 51.2414C61.3324 51.1748 61.3631 51.1124 61.405 51.0578C61.4469 51.0031 61.4992 50.9572 61.5589 50.9228C61.6185 50.8884 61.6844 50.866 61.7527 50.8571C61.821 50.8481 61.8904 50.8527 61.9569 50.8706C62.0234 50.8886 62.0858 50.9194 62.1403 50.9614L62.9039 51.547L64.7082 49.1931C64.75 49.1385 64.8022 49.0927 64.8617 49.0583C64.9212 49.0239 64.987 49.0016 65.0552 48.9925C65.1233 48.9835 65.1926 48.988 65.259 49.0058C65.3255 49.0236 65.3877 49.0543 65.4423 49.0961L65.4313 49.1118L65.4428 49.0962C65.5529 49.1808 65.6249 49.3057 65.6431 49.4433C65.6612 49.581 65.624 49.7203 65.5396 49.8305L63.4174 52.598C63.3683 52.6617 63.3052 52.7133 63.2329 52.7488C63.1607 52.7842 63.0812 52.8025 63.0007 52.8023L63.0003 52.8029Z" fill="white"/>
+<path d="M69.0312 72.354C69.0315 73.0128 68.9019 73.6651 68.65 74.2739C68.3981 74.8826 68.0288 75.4357 67.5631 75.9016C67.0973 76.3676 66.5444 76.7372 65.9358 76.9895C65.3272 77.2417 64.6749 77.3716 64.0161 77.3716C63.973 77.3725 63.9299 77.3708 63.887 77.3665C62.9008 77.3412 61.9439 77.0256 61.1361 76.4592C60.3283 75.8928 59.7055 75.1007 59.3456 74.1821C58.9857 73.2635 58.9047 72.2592 59.1128 71.2948C59.3209 70.3304 59.8087 69.4488 60.5153 68.7603C61.2219 68.0718 62.1159 67.6069 63.0853 67.4239C64.0548 67.241 65.0567 67.3479 65.9657 67.7315C66.8746 68.1151 67.6503 68.7582 68.1956 69.5804C68.7408 70.4026 69.0315 71.3674 69.0312 72.354Z" fill="#CCCCCC"/>
+<path d="M63.5003 98.8348C66.2705 98.8348 68.5162 96.5891 68.5162 93.8189C68.5162 91.0487 66.2705 88.803 63.5003 88.803C60.7301 88.803 58.4844 91.0487 58.4844 93.8189C58.4844 96.5891 60.7301 98.8348 63.5003 98.8348Z" fill="#CCCCCC"/>
+<path d="M127.689 35.5378H117.377C116.625 35.5378 115.903 35.2388 115.37 34.7065C114.838 34.1742 114.539 33.4523 114.539 32.6995V25.0836C114.539 25.0503 114.548 25.0176 114.566 24.9894C114.584 24.9611 114.609 24.9385 114.639 24.9239C114.669 24.9094 114.703 24.9037 114.736 24.9073C114.769 24.911 114.8 24.9239 114.827 24.9446L127.799 35.2214C127.828 35.2442 127.849 35.2755 127.859 35.3109C127.869 35.3462 127.868 35.3839 127.856 35.4187C127.844 35.4535 127.822 35.4837 127.792 35.505C127.762 35.5263 127.726 35.5378 127.689 35.5378Z" fill="#CCCCCC"/>
+</svg>
diff --git a/apps/app/public/empty-state/my-issues.svg b/apps/app/public/empty-state/my-issues.svg
new file mode 100644
index 000000000..98a420d75
--- /dev/null
+++ b/apps/app/public/empty-state/my-issues.svg
@@ -0,0 +1,15 @@
+<svg width="97" height="110" viewBox="0 0 97 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.748 110H9.8374C7.22926 109.997 4.72879 108.96 2.88456 107.115C1.04033 105.271 0.00294615 102.771 0 100.163V9.8374C0.00294615 7.22926 1.04033 4.72879 2.88456 2.88456C4.72879 1.04033 7.22926 0.00294615 9.8374 0H81.3901L96.5854 12.1116V100.163C96.5824 102.771 95.545 105.271 93.7008 107.115C91.8566 108.96 89.3561 109.997 86.748 110Z" fill="#E5E5E5"/>
+<path d="M9.83745 2.83199C7.98014 2.83409 6.1995 3.57283 4.88618 4.88615C3.57287 6.19946 2.83412 7.9801 2.83203 9.83741V100.163C2.83412 102.02 3.57287 103.801 4.88618 105.114C6.1995 106.427 7.98014 107.166 9.83745 107.168H86.748C88.6053 107.166 90.386 106.427 91.6993 105.114C93.0126 103.801 93.7514 102.02 93.7534 100.163V13.4759L80.3996 2.83199H9.83745Z" fill="white"/>
+<path d="M71.7873 29.0961H36.771C36.5559 29.0961 36.3428 29.0538 36.1441 28.9714C35.9453 28.8891 35.7647 28.7685 35.6126 28.6163C35.4605 28.4642 35.3398 28.2836 35.2575 28.0849C35.1752 27.8861 35.1328 27.6731 35.1328 27.458C35.1328 27.2428 35.1752 27.0298 35.2575 26.8311C35.3398 26.6323 35.4605 26.4517 35.6126 26.2996C35.7647 26.1475 35.9453 26.0268 36.1441 25.9445C36.3428 25.8621 36.5559 25.8198 36.771 25.8198H71.7873C72.0024 25.8198 72.2155 25.8621 72.4142 25.9445C72.613 26.0268 72.7936 26.1475 72.9457 26.2996C73.0978 26.4517 73.2185 26.6323 73.3008 26.8311C73.3831 27.0298 73.4255 27.2428 73.4255 27.458C73.4255 27.6731 73.3831 27.8861 73.3008 28.0849C73.2185 28.2836 73.0978 28.4642 72.9457 28.6163C72.7936 28.7685 72.613 28.8891 72.4142 28.9714C72.2155 29.0538 72.0024 29.0961 71.7873 29.0961Z" fill="#D4D4D4"/>
+<path d="M78.5448 34.625H36.771C36.3365 34.625 35.9198 34.4524 35.6126 34.1452C35.3054 33.838 35.1328 33.4213 35.1328 32.9868C35.1328 32.5523 35.3054 32.1356 35.6126 31.8284C35.9198 31.5212 36.3365 31.3486 36.771 31.3486H78.5448C78.9793 31.3486 79.396 31.5212 79.7032 31.8284C80.0104 32.1356 80.183 32.5523 80.183 32.9868C80.183 33.4213 80.0104 33.838 79.7032 34.1452C79.396 34.4524 78.9793 34.625 78.5448 34.625Z" fill="#D4D4D4"/>
+<path d="M71.7873 53.8737H36.771C36.3365 53.8737 35.9198 53.7011 35.6126 53.3939C35.3054 53.0867 35.1328 52.67 35.1328 52.2355C35.1328 51.8011 35.3054 51.3844 35.6126 51.0772C35.9198 50.77 36.3365 50.5974 36.771 50.5974H71.7873C72.2218 50.5974 72.6385 50.77 72.9457 51.0772C73.2529 51.3844 73.4255 51.8011 73.4255 52.2355C73.4255 52.67 73.2529 53.0867 72.9457 53.3939C72.6385 53.7011 72.2218 53.8737 71.7873 53.8737Z" fill="#D4D4D4"/>
+<path d="M78.5448 59.4026H36.771C36.3365 59.4026 35.9198 59.23 35.6126 58.9228C35.3054 58.6156 35.1328 58.1989 35.1328 57.7644C35.1328 57.33 35.3054 56.9133 35.6126 56.6061C35.9198 56.2988 36.3365 56.1263 36.771 56.1263H78.5448C78.9793 56.1263 79.396 56.2988 79.7032 56.6061C80.0104 56.9133 80.183 57.33 80.183 57.7644C80.183 58.1989 80.0104 58.6156 79.7032 58.9228C79.396 59.23 78.9793 59.4026 78.5448 59.4026Z" fill="#D4D4D4"/>
+<path d="M71.7873 78.6514H36.771C36.3365 78.6514 35.9198 78.4788 35.6126 78.1716C35.3054 77.8643 35.1328 77.4477 35.1328 77.0132C35.1328 76.5787 35.3054 76.162 35.6126 75.8548C35.9198 75.5476 36.3365 75.375 36.771 75.375H71.7873C72.2218 75.375 72.6385 75.5476 72.9457 75.8548C73.2529 76.162 73.4255 76.5787 73.4255 77.0132C73.4255 77.4477 73.2529 77.8643 72.9457 78.1716C72.6385 78.4788 72.2218 78.6514 71.7873 78.6514Z" fill="#D4D4D4"/>
+<path d="M78.5448 84.1803H36.771C36.3365 84.1803 35.9198 84.0077 35.6126 83.7004C35.3054 83.3932 35.1328 82.9766 35.1328 82.5421C35.1328 82.1076 35.3054 81.6909 35.6126 81.3837C35.9198 81.0765 36.3365 80.9039 36.771 80.9039H78.5448C78.9793 80.9039 79.396 81.0765 79.7032 81.3837C80.0104 81.6909 80.183 82.1076 80.183 82.5421C80.183 82.9766 80.0104 83.3932 79.7032 83.7004C79.396 84.0077 78.9793 84.1803 78.5448 84.1803Z" fill="#D4D4D4"/>
+<path d="M22.1846 36.0125C25.3824 36.0125 27.9747 33.4202 27.9747 30.2224C27.9747 27.0246 25.3824 24.4323 22.1846 24.4323C18.9868 24.4323 16.3945 27.0246 16.3945 30.2224C16.3945 33.4202 18.9868 36.0125 22.1846 36.0125Z" fill="#3F76FF"/>
+<path d="M21.6211 32.4311C21.4909 32.4314 21.3641 32.3892 21.2598 32.3111L21.2534 32.3062L19.8926 31.2653C19.7655 31.1677 19.6823 31.0236 19.6614 30.8646C19.6405 30.7057 19.6835 30.545 19.781 30.4178C19.8786 30.2906 20.0226 30.2073 20.1815 30.1862C20.3404 30.1652 20.5012 30.2081 20.6285 30.3055L21.5098 30.9814L23.5926 28.2642C23.6409 28.2012 23.7011 28.1483 23.7698 28.1086C23.8386 28.0689 23.9145 28.0431 23.9932 28.0327C24.0718 28.0223 24.1518 28.0275 24.2285 28.048C24.3052 28.0685 24.3771 28.1039 24.4401 28.1522L24.4273 28.1703L24.4406 28.1524C24.5677 28.2501 24.6508 28.3942 24.6718 28.5531C24.6928 28.712 24.6498 28.8727 24.5524 29L22.1026 32.1946C22.046 32.2682 21.9731 32.3278 21.8897 32.3687C21.8063 32.4096 21.7145 32.4307 21.6216 32.4304L21.6211 32.4311Z" fill="white"/>
+<path d="M22.7823 60.7901C25.9801 60.7901 28.5724 58.1978 28.5724 55C28.5724 51.8022 25.9801 49.2099 22.7823 49.2099C19.5845 49.2099 16.9922 51.8022 16.9922 55C16.9922 58.1978 19.5845 60.7901 22.7823 60.7901Z" fill="#D4D4D4"/>
+<path d="M22.1846 85.5677C25.3824 85.5677 27.9747 82.9754 27.9747 79.7776C27.9747 76.5798 25.3824 73.9875 22.1846 73.9875C18.9868 73.9875 16.3945 76.5798 16.3945 79.7776C16.3945 82.9754 18.9868 85.5677 22.1846 85.5677Z" fill="#D4D4D4"/>
+<path d="M96.2887 12.5014H84.3857C83.5168 12.5014 82.6834 12.1562 82.069 11.5418C81.4546 10.9273 81.1094 10.094 81.1094 9.22501V0.433652C81.1094 0.395162 81.1202 0.357449 81.1407 0.324842C81.1611 0.292236 81.1904 0.266054 81.225 0.249298C81.2597 0.232542 81.2983 0.22589 81.3366 0.230107C81.3748 0.234324 81.4111 0.249237 81.4413 0.273137L96.4158 12.1361C96.4492 12.1625 96.4735 12.1986 96.4853 12.2394C96.4972 12.2803 96.4961 12.3238 96.4821 12.3639C96.4681 12.4041 96.442 12.4389 96.4073 12.4635C96.3727 12.4882 96.3312 12.5014 96.2887 12.5014Z" fill="#E5E5E5"/>
+</svg>
diff --git a/apps/app/public/empty-state/page.svg b/apps/app/public/empty-state/page.svg
new file mode 100644
index 000000000..2b0e88fcf
--- /dev/null
+++ b/apps/app/public/empty-state/page.svg
@@ -0,0 +1,21 @@
+<svg width="145" height="140" viewBox="0 0 145 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M80.0936 50.2539H48.8101C48.1252 50.256 47.4489 50.1018 46.8326 49.8031C46.2163 49.5045 45.6762 49.0691 45.2535 48.5303C44.8231 47.9864 44.5225 47.3514 44.3745 46.6738C44.2265 45.9961 44.2352 45.2936 44.3997 44.6198C47.2829 32.5432 47.2828 19.9576 44.3995 7.88101C44.2351 7.20721 44.2266 6.50478 44.3745 5.82718C44.5225 5.14958 44.8231 4.51466 45.2534 3.97073C45.6761 3.43186 46.2162 2.99651 46.8325 2.69783C47.4489 2.39914 48.1252 2.24498 48.8101 2.24709H80.0936C81.1737 2.2502 82.2176 2.63659 83.0395 3.33747C83.8613 4.03834 84.4076 5.00817 84.5812 6.07424C86.6401 19.4463 86.6401 33.0547 84.5812 46.4268C84.4076 47.4928 83.8613 48.4627 83.0395 49.1636C82.2176 49.8644 81.1737 50.2508 80.0936 50.2539Z" fill="#E5E5E5"/>
+<path d="M48.8067 4.60109C48.4778 4.59998 48.153 4.67391 47.8569 4.81724C47.5609 4.96058 47.3015 5.16954 47.0984 5.42824C46.8892 5.69329 46.7433 6.00256 46.6716 6.33251C46.6 6.66246 46.6046 7.0044 46.685 7.33233C49.6545 19.7697 49.6545 32.7315 46.6852 45.1689C46.6047 45.4968 46.6001 45.8387 46.6717 46.1685C46.7432 46.4984 46.8891 46.8077 47.0983 47.0726C47.3013 47.3314 47.5609 47.5406 47.8569 47.684C48.1529 47.8273 48.4778 47.9013 48.8067 47.9002H80.0902C80.6089 47.9004 81.1108 47.7164 81.5066 47.3811C81.9023 47.0458 82.1663 46.5809 82.2513 46.0693C84.2736 32.9342 84.2736 19.567 82.2513 6.432C82.1663 5.92031 81.9023 5.45543 81.5066 5.12014C81.1108 4.78484 80.6089 4.60091 80.0902 4.60108L48.8067 4.60109Z" fill="white"/>
+<path d="M73.2662 15.9196H56.8499C56.2258 15.9189 55.6275 15.6707 55.1863 15.2295C54.745 14.7882 54.4968 14.1899 54.4961 13.5658V12.646C54.4968 12.022 54.745 11.4237 55.1863 10.9824C55.6275 10.5411 56.2258 10.2929 56.8499 10.2922H73.2662C73.8902 10.2929 74.4885 10.5411 74.9298 10.9824C75.371 11.4237 75.6193 12.022 75.6199 12.646V13.5659C75.6192 14.1899 75.371 14.7882 74.9298 15.2295C74.4885 15.6707 73.8902 15.9189 73.2662 15.9196Z" fill="#E5E5E5"/>
+<path d="M73.2662 27.5422H56.8499C56.2258 27.5415 55.6275 27.2933 55.1863 26.852C54.745 26.4107 54.4968 25.8124 54.4961 25.1884V24.2686C54.4968 23.6445 54.745 23.0462 55.1863 22.6049C55.6275 22.1637 56.2258 21.9155 56.8499 21.9148H73.2662C73.8902 21.9155 74.4885 22.1637 74.9298 22.6049C75.371 23.0462 75.6193 23.6445 75.6199 24.2686V25.1884C75.6193 25.8124 75.371 26.4107 74.9298 26.852C74.4885 27.2933 73.8902 27.5415 73.2662 27.5422Z" fill="#E5E5E5"/>
+<path d="M73.2662 39.1645H56.8499C56.2258 39.1638 55.6275 38.9156 55.1863 38.4743C54.745 38.0331 54.4968 37.4348 54.4961 36.8107V35.8909C54.4968 35.2668 54.745 34.6685 55.1863 34.2273C55.6275 33.786 56.2258 33.5378 56.8499 33.5371H73.2662C73.8902 33.5378 74.4885 33.786 74.9298 34.2273C75.371 34.6685 75.6193 35.2668 75.6199 35.8909V36.8107C75.6193 37.4347 75.371 38.0331 74.9298 38.4743C74.4885 38.9156 73.8902 39.1638 73.2662 39.1645Z" fill="#E5E5E5"/>
+<path d="M138.937 80.0698H107.654C106.969 80.0719 106.293 79.9177 105.676 79.6191C105.06 79.3204 104.52 78.8851 104.097 78.3462C103.667 77.8023 103.366 77.1673 103.218 76.4897C103.07 75.812 103.079 75.1096 103.243 74.4357C106.127 62.3592 106.127 49.7735 103.243 37.6969C103.079 37.0231 103.07 36.3207 103.218 35.6431C103.366 34.9655 103.667 34.3306 104.097 33.7867C104.52 33.2478 105.06 32.8124 105.676 32.5137C106.293 32.2151 106.969 32.0609 107.654 32.063H138.937C140.017 32.0661 141.061 32.4525 141.883 33.1534C142.705 33.8543 143.251 34.8241 143.425 35.8902C145.484 49.2622 145.484 62.8706 143.425 76.2427C143.251 77.3088 142.705 78.2786 141.883 78.9795C141.061 79.6803 140.017 80.0667 138.937 80.0698Z" fill="#E5E5E5"/>
+<path d="M107.65 34.4168C107.322 34.4157 106.997 34.4896 106.701 34.6329C106.405 34.7762 106.145 34.9852 105.942 35.2439C105.733 35.509 105.587 35.8182 105.515 36.1482C105.444 36.4781 105.448 36.8201 105.529 37.148C108.498 49.5854 108.498 62.5472 105.529 74.9846C105.448 75.3124 105.444 75.6543 105.515 75.9842C105.587 76.3141 105.733 76.6233 105.942 76.8883C106.145 77.1471 106.405 77.3563 106.701 77.4997C106.997 77.643 107.322 77.717 107.65 77.7159H138.934C139.453 77.716 139.955 77.5321 140.35 77.1968C140.746 76.8615 141.01 76.3966 141.095 75.8849C143.117 62.7499 143.117 49.3827 141.095 36.2477C141.01 35.736 140.746 35.2711 140.35 34.9358C139.955 34.6005 139.453 34.4166 138.934 34.4167L107.65 34.4168Z" fill="white"/>
+<path d="M76.5633 114.005H45.2798C44.5652 114.007 43.8596 113.846 43.2166 113.535C42.5736 113.223 42.0102 112.769 41.5692 112.207C41.1204 111.639 40.8069 110.977 40.6525 110.271C40.4982 109.564 40.5071 108.831 40.6786 108.129C43.5546 96.0824 43.5546 83.528 40.6784 71.4816C40.507 70.779 40.4982 70.0465 40.6525 69.3399C40.8068 68.6333 41.1203 67.9713 41.5691 67.4041C42.0101 66.8419 42.5736 66.3877 43.2166 66.0761C43.8596 65.7644 44.5652 65.6036 45.2798 65.6057H76.5633C77.6901 65.6091 78.7792 66.0124 79.6366 66.7437C80.4939 67.475 81.0638 68.4869 81.2448 69.5992C83.3067 82.991 83.3067 96.6196 81.2448 110.011C81.0638 111.124 80.4939 112.136 79.6366 112.867C78.7792 113.598 77.6901 114.002 76.5633 114.005Z" fill="#F5F5F5"/>
+<path d="M132.11 51.6198H115.694C115.07 51.6191 114.471 51.3709 114.03 50.9297C113.589 50.4884 113.341 49.8901 113.34 49.266V48.3462C113.341 47.7222 113.589 47.1239 114.03 46.6826C114.471 46.2413 115.07 45.9931 115.694 45.9924H132.11C132.734 45.9931 133.332 46.2413 133.774 46.6826C134.215 47.1239 134.463 47.7222 134.464 48.3462V49.2661C134.463 49.8901 134.215 50.4884 133.774 50.9297C133.332 51.3709 132.734 51.6191 132.11 51.6198Z" fill="#E5E5E5"/>
+<path d="M132.11 63.2424H115.694C115.07 63.2417 114.471 62.9935 114.03 62.5522C113.589 62.1109 113.341 61.5126 113.34 60.8886V59.9688C113.341 59.3447 113.589 58.7464 114.03 58.3051C114.471 57.8639 115.07 57.6157 115.694 57.615H132.11C132.734 57.6157 133.332 57.8639 133.774 58.3051C134.215 58.7464 134.463 59.3447 134.464 59.9688V60.8886C134.463 61.5126 134.215 62.1109 133.774 62.5522C133.332 62.9935 132.734 63.2417 132.11 63.2424Z" fill="#E5E5E5"/>
+<path d="M61.0036 98.6664C65.987 98.6664 70.0268 94.6266 70.0268 89.6433C70.0268 84.6599 65.987 80.6201 61.0036 80.6201C56.0203 80.6201 51.9805 84.6599 51.9805 89.6433C51.9805 94.6266 56.0203 98.6664 61.0036 98.6664Z" fill="white"/>
+<path d="M65.3195 88.4663H62.181V85.3278C62.181 85.0157 62.057 84.7163 61.8363 84.4956C61.6156 84.2749 61.3162 84.1509 61.0041 84.1509C60.6919 84.1509 60.3926 84.2749 60.1719 84.4956C59.9511 84.7163 59.8271 85.0157 59.8271 85.3278V88.4663H56.6887C56.3765 88.4663 56.0771 88.5903 55.8564 88.811C55.6357 89.0317 55.5117 89.3311 55.5117 89.6432C55.5117 89.9554 55.6357 90.2547 55.8564 90.4755C56.0771 90.6962 56.3765 90.8202 56.6887 90.8202H59.8271V93.9587C59.8271 94.2708 59.9511 94.5702 60.1719 94.7909C60.3926 95.0116 60.6919 95.1356 61.0041 95.1356C61.3162 95.1356 61.6156 95.0116 61.8363 94.7909C62.057 94.5702 62.181 94.2708 62.181 93.9587V90.8202H65.3195C65.6317 90.8202 65.931 90.6962 66.1517 90.4755C66.3725 90.2547 66.4964 89.9554 66.4964 89.6432C66.4964 89.3311 66.3725 89.0317 66.1517 88.811C65.931 88.5903 65.6317 88.4663 65.3195 88.4663Z" fill="#E5E5E5"/>
+<path d="M72.3792 6.6693H55.9021C55.4341 6.66877 54.9853 6.4826 54.6544 6.15164C54.3234 5.82068 54.1372 5.37195 54.1367 4.90389V1.7654C54.1372 1.29735 54.3234 0.848619 54.6544 0.517657C54.9853 0.186694 55.4341 0.000527486 55.9021 0H72.3792C72.8473 0.000527486 73.296 0.186694 73.6269 0.517657C73.9579 0.848619 74.1441 1.29735 74.1446 1.7654V4.90389C74.1441 5.37195 73.9579 5.82068 73.6269 6.15164C73.296 6.4826 72.8473 6.66877 72.3792 6.6693Z" fill="#CCCCCC"/>
+<path d="M132.02 36.8773H115.543C115.075 36.8768 114.626 36.6906 114.295 36.3596C113.964 36.0287 113.778 35.58 113.777 35.1119V31.9734C113.778 31.5054 113.964 31.0566 114.295 30.7257C114.626 30.3947 115.075 30.2085 115.543 30.208H132.02C132.488 30.2085 132.937 30.3947 133.268 30.7257C133.599 31.0566 133.785 31.5054 133.785 31.9734V35.1119C133.785 35.58 133.599 36.0287 133.268 36.3596C132.937 36.6906 132.488 36.8768 132.02 36.8773Z" fill="#CCCCCC"/>
+<path d="M31.6843 139.656L2.79513 127.653C2.16188 127.392 1.59648 126.99 1.14194 126.478C0.687406 125.965 0.35571 125.356 0.172095 124.696C-0.0166774 124.029 -0.0506717 123.327 0.0726878 122.645C0.196047 121.962 0.47351 121.317 0.883962 120.758C8.18011 110.712 13.009 99.0892 14.9799 86.8306C15.0866 86.1453 15.3482 85.4934 15.7449 84.9244C16.1415 84.3555 16.6627 83.8845 17.2688 83.5473C17.8659 83.2118 18.5317 83.017 19.2155 82.9777C19.8992 82.9383 20.5829 83.0555 21.2146 83.3202L50.1038 95.3232C51.1 95.7404 51.9158 96.4978 52.4058 97.4604C52.8958 98.4229 53.0283 99.5281 52.7796 100.579C49.5502 113.718 44.3289 126.285 37.2969 137.843C36.7276 138.761 35.8509 139.447 34.8231 139.779C33.7952 140.111 32.6829 140.067 31.6843 139.656Z" fill="#E5E5E5"/>
+<path d="M20.3118 85.494C20.0085 85.3668 19.6801 85.3104 19.3518 85.3292C19.0234 85.348 18.7036 85.4414 18.4168 85.6024C18.122 85.7669 17.8685 85.9965 17.6758 86.2737C17.483 86.551 17.3561 86.8685 17.3045 87.2022C15.2747 99.827 10.3015 111.797 2.78737 122.143C2.58727 122.415 2.45183 122.729 2.39136 123.061C2.33089 123.393 2.34699 123.735 2.43843 124.059C2.52665 124.376 2.68612 124.669 2.90448 124.915C3.12283 125.161 3.39442 125.354 3.69858 125.479L32.5878 137.482C33.0667 137.681 33.6008 137.704 34.0949 137.546C34.5891 137.388 35.0111 137.06 35.286 136.621C42.1932 125.267 47.322 112.923 50.4942 100.017C50.612 99.5118 50.5466 98.9812 50.3098 98.5198C50.073 98.0583 49.68 97.6958 49.2009 97.497L20.3118 85.494Z" fill="white"/>
+<path d="M35.6957 112.213L20.5358 105.915C19.9598 105.675 19.5025 105.216 19.2643 104.639C19.0261 104.062 19.0265 103.414 19.2653 102.838L19.6182 101.988C19.8583 101.412 20.317 100.955 20.8938 100.717C21.4707 100.479 22.1184 100.479 22.695 100.718L37.8548 107.017C38.4308 107.257 38.8881 107.715 39.1263 108.292C39.3645 108.869 39.3641 109.517 39.1253 110.093L38.7724 110.943C38.5323 111.519 38.0736 111.976 37.4968 112.214C36.92 112.452 36.2722 112.452 35.6957 112.213Z" fill="#3F76FF"/>
+<path d="M31.2387 122.946L16.0788 116.648C15.5027 116.408 15.0455 115.949 14.8073 115.372C14.5691 114.795 14.5695 114.148 14.8083 113.571L15.1612 112.722C15.4013 112.146 15.86 111.688 16.4368 111.45C17.0136 111.212 17.6614 111.212 18.2379 111.451L33.3978 117.75C33.9738 117.99 34.4311 118.449 34.6693 119.025C34.9075 119.602 34.9071 120.25 34.6683 120.826L34.3154 121.676C34.0753 122.252 33.6166 122.709 33.0398 122.947C32.463 123.186 31.8152 123.185 31.2387 122.946Z" fill="#3F76FF"/>
+<path d="M41.7713 97.1291C41.5444 97.1289 41.3196 97.0848 41.1094 96.9994L25.8336 90.8233C25.3998 90.6474 25.0536 90.3066 24.8708 89.8758C24.688 89.4449 24.6836 88.9591 24.8585 88.525L26.035 85.6153C26.2105 85.1812 26.5513 84.8347 26.9823 84.6519C27.4133 84.4691 27.8993 84.4649 28.3334 84.6404L43.6092 90.8164C44.0429 90.9924 44.3892 91.3331 44.5719 91.764C44.7547 92.1949 44.7592 92.6806 44.5843 93.1148L43.4078 96.0245C43.2756 96.3504 43.0494 96.6295 42.7579 96.8262C42.4664 97.023 42.123 97.1284 41.7713 97.1291Z" fill="#CCCCCC"/>
+</svg>
diff --git a/apps/app/public/empty-state/project.svg b/apps/app/public/empty-state/project.svg
new file mode 100644
index 000000000..b89854909
--- /dev/null
+++ b/apps/app/public/empty-state/project.svg
@@ -0,0 +1,23 @@
+<svg width="248" height="138" viewBox="0 0 248 138" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M240.118 0.431519H7.28681C5.35488 0.433631 3.50268 1.20203 2.1366 2.56811C0.770513 3.9342 0.00211246 5.7864 0 7.71833V130.553C0.00211246 132.485 0.770513 134.337 2.1366 135.703C3.50268 137.069 5.35488 137.838 7.28681 137.84H240.118C242.05 137.838 243.902 137.069 245.268 135.703C246.634 134.337 247.402 132.485 247.405 130.553V7.71833C247.402 5.7864 246.634 3.9342 245.268 2.56811C243.902 1.20203 242.05 0.433631 240.118 0.431519ZM246.711 130.553C246.709 132.301 246.014 133.977 244.778 135.213C243.542 136.449 241.866 137.144 240.118 137.146H7.28681C5.53877 137.144 3.86278 136.449 2.62672 135.213C1.39067 133.977 0.695564 132.301 0.693982 130.553V7.71833C0.695564 5.97029 1.39067 4.2943 2.62672 3.05824C3.86278 1.82219 5.53877 1.12708 7.28681 1.1255H240.118C241.866 1.12708 243.542 1.82219 244.778 3.05824C246.014 4.2943 246.709 5.97029 246.711 7.71833V130.553Z" fill="#E5E5E5"/>
+<path d="M228.671 20.3383H18.7415C18.6495 20.3383 18.5612 20.3017 18.4962 20.2366C18.4311 20.1716 18.3945 20.0833 18.3945 19.9913C18.3945 19.8993 18.4311 19.811 18.4962 19.7459C18.5612 19.6809 18.6495 19.6443 18.7415 19.6443H228.671C228.763 19.6443 228.851 19.6809 228.916 19.7459C228.981 19.811 229.018 19.8993 229.018 19.9913C229.018 20.0833 228.981 20.1716 228.916 20.2366C228.851 20.3017 228.763 20.3383 228.671 20.3383Z" fill="#E5E5E5"/>
+<path d="M78.0814 122.919C77.9893 122.919 77.9011 122.883 77.836 122.818C77.7709 122.753 77.7344 122.664 77.7344 122.572V8.41231C77.7344 8.32029 77.7709 8.23203 77.836 8.16695C77.9011 8.10188 77.9893 8.06532 78.0814 8.06532C78.1734 8.06532 78.2616 8.10188 78.3267 8.16695C78.3918 8.23203 78.4284 8.32029 78.4284 8.41231V122.572C78.4284 122.664 78.3918 122.753 78.3267 122.818C78.2616 122.883 78.1734 122.919 78.0814 122.919Z" fill="#E5E5E5"/>
+<path d="M130.464 122.919C130.372 122.919 130.284 122.883 130.219 122.818C130.154 122.753 130.117 122.664 130.117 122.572V8.41231C130.117 8.32029 130.154 8.23203 130.219 8.16695C130.284 8.10188 130.372 8.06532 130.464 8.06532C130.556 8.06532 130.644 8.10188 130.71 8.16695C130.775 8.23203 130.811 8.32029 130.811 8.41231V122.572C130.811 122.664 130.775 122.753 130.71 122.818C130.644 122.883 130.556 122.919 130.464 122.919Z" fill="#E5E5E5"/>
+<path d="M182.867 122.919C182.774 122.919 182.686 122.883 182.621 122.818C182.556 122.753 182.52 122.664 182.52 122.572V8.41231C182.52 8.32029 182.556 8.23203 182.621 8.16695C182.686 8.10188 182.774 8.06532 182.867 8.06532C182.959 8.06532 183.047 8.10188 183.112 8.16695C183.177 8.23203 183.214 8.32029 183.214 8.41231V122.572C183.214 122.664 183.177 122.753 183.112 122.818C183.047 122.883 182.959 122.919 182.867 122.919Z" fill="#E5E5E5"/>
+<path d="M44.385 56.1539H31.706C31.292 56.1535 30.8951 55.9888 30.6024 55.6961C30.3097 55.4033 30.145 55.0064 30.1445 54.5925V39.6303C30.145 39.2164 30.3097 38.8194 30.6024 38.5267C30.8951 38.234 31.292 38.0693 31.706 38.0689H44.385C44.799 38.0693 45.1959 38.234 45.4886 38.5267C45.7814 38.8194 45.946 39.2164 45.9465 39.6303V54.5925C45.946 55.0065 45.7814 55.4033 45.4886 55.6961C45.1959 55.9888 44.799 56.1535 44.385 56.1539Z" fill="#A3A3A3"/>
+<path d="M62.4436 98.8338H49.7646C49.3506 98.8334 48.9537 98.6687 48.661 98.376C48.3682 98.0833 48.2036 97.6864 48.2031 97.2724V82.3103C48.2036 81.8963 48.3682 81.4994 48.661 81.2066C48.9537 80.9139 49.3506 80.7493 49.7646 80.7488H62.4436C62.8576 80.7493 63.2545 80.9139 63.5472 81.2066C63.84 81.4994 64.0046 81.8963 64.0051 82.3103V97.2724C64.0046 97.6864 63.84 98.0833 63.5472 98.376C63.2545 98.6687 62.8576 98.8334 62.4436 98.8338Z" fill="#A3A3A3"/>
+<path d="M103.369 65.1756H90.6904C90.2764 65.1752 89.8795 65.0105 89.5867 64.7178C89.294 64.4251 89.1294 64.0282 89.1289 63.6142V48.6521C89.1294 48.2381 89.294 47.8412 89.5867 47.5485C89.8795 47.2557 90.2764 47.0911 90.6904 47.0906H103.369C103.783 47.0911 104.18 47.2557 104.473 47.5485C104.766 47.8412 104.93 48.2381 104.931 48.6521V63.6142C104.93 64.0282 104.766 64.4251 104.473 64.7178C104.18 65.0105 103.783 65.1752 103.369 65.1756Z" fill="#A3A3A3"/>
+<path d="M156.475 48.8671H143.796C143.382 48.8666 142.985 48.7019 142.692 48.4092C142.399 48.1165 142.235 47.7196 142.234 47.3056V32.3435C142.235 31.9295 142.399 31.5326 142.692 31.2399C142.985 30.9472 143.382 30.7825 143.796 30.782H156.475C156.889 30.7825 157.286 30.9472 157.578 31.2399C157.871 31.5326 158.036 31.9295 158.036 32.3435V47.3056C158.036 47.7196 157.871 48.1165 157.578 48.4092C157.286 48.702 156.889 48.8666 156.475 48.8671Z" fill="#A3A3A3"/>
+<path d="M205.389 48.8671H192.71C192.296 48.8666 191.899 48.7019 191.606 48.4092C191.314 48.1165 191.149 47.7196 191.148 47.3056V32.3435C191.149 31.9295 191.314 31.5326 191.606 31.2399C191.899 30.9472 192.296 30.7825 192.71 30.782H205.389C205.803 30.7825 206.2 30.9472 206.493 31.2399C206.785 31.5326 206.95 31.9295 206.95 32.3435V47.3056C206.95 47.7196 206.785 48.1165 206.493 48.4092C206.2 48.702 205.803 48.8666 205.389 48.8671Z" fill="#A3A3A3"/>
+<path d="M227.948 53.031H215.268C214.855 53.0306 214.458 52.8659 214.165 52.5732C213.872 52.2804 213.707 51.8835 213.707 51.4696V36.5074C213.707 36.0935 213.872 35.6966 214.165 35.4038C214.458 35.1111 214.855 34.9465 215.268 34.946H227.948C228.362 34.9465 228.758 35.1111 229.051 35.4038C229.344 35.6966 229.509 36.0935 229.509 36.5074V51.4696C229.509 51.8836 229.344 52.2804 229.051 52.5732C228.758 52.8659 228.362 53.0306 227.948 53.031Z" fill="#E5E5E5"/>
+<path d="M217.877 79.7493H205.198C204.784 79.7488 204.387 79.5841 204.095 79.2914C203.802 78.9987 203.637 78.6018 203.637 78.1878V63.2257C203.637 62.8117 203.802 62.4148 204.095 62.1221C204.387 61.8293 204.784 61.6647 205.198 61.6642H217.877C218.291 61.6647 218.688 61.8293 218.981 62.1221C219.274 62.4148 219.438 62.8117 219.439 63.2257V78.1878C219.438 78.6018 219.274 78.9987 218.981 79.2914C218.688 79.5841 218.291 79.7488 217.877 79.7493Z" fill="#E5E5E5"/>
+<path d="M174.869 74.1975H162.19C161.776 74.197 161.379 74.0323 161.087 73.7396C160.794 73.4469 160.629 73.05 160.629 72.636V57.6739C160.629 57.2599 160.794 56.863 161.087 56.5703C161.379 56.2775 161.776 56.1129 162.19 56.1124H174.869C175.283 56.1129 175.68 56.2775 175.973 56.5703C176.266 56.863 176.43 57.2599 176.431 57.6739V72.636C176.43 73.05 176.266 73.4469 175.973 73.7396C175.68 74.0323 175.283 74.197 174.869 74.1975Z" fill="#F5F5F5"/>
+<path d="M150.233 79.7493H137.554C137.14 79.7488 136.743 79.5841 136.45 79.2914C136.157 78.9987 135.993 78.6018 135.992 78.1878V63.2257C135.993 62.8117 136.157 62.4148 136.45 62.1221C136.743 61.8293 137.14 61.6647 137.554 61.6642H150.233C150.647 61.6647 151.044 61.8293 151.336 62.1221C151.629 62.4148 151.794 62.8117 151.794 63.2257V78.1878C151.794 78.6018 151.629 78.9987 151.336 79.2914C151.044 79.5841 150.647 79.7488 150.233 79.7493Z" fill="#E5E5E5"/>
+<path d="M97.1233 103.345H84.4443C84.0303 103.344 83.6334 103.18 83.3407 102.887C83.0479 102.594 82.8833 102.197 82.8828 101.783V86.8211C82.8833 86.4071 83.0479 86.0102 83.3407 85.7175C83.6334 85.4247 84.0303 85.2601 84.4443 85.2596H97.1233C97.5373 85.2601 97.9342 85.4247 98.2269 85.7175C98.5196 86.0102 98.6843 86.4071 98.6848 86.8211V101.783C98.6843 102.197 98.5196 102.594 98.2269 102.887C97.9342 103.18 97.5373 103.344 97.1233 103.345Z" fill="#E5E5E5"/>
+<path d="M32.9397 83.5662H20.2607C19.8467 83.5658 19.4498 83.4011 19.1571 83.1084C18.8643 82.8156 18.6997 82.4188 18.6992 82.0048V67.0426C18.6997 66.6287 18.8643 66.2318 19.1571 65.939C19.4498 65.6463 19.8467 65.4816 20.2607 65.4812H32.9397C33.3537 65.4816 33.7506 65.6463 34.0433 65.939C34.3361 66.2318 34.5007 66.6287 34.5012 67.0426V82.0048C34.5007 82.4188 34.3361 82.8156 34.0433 83.1084C33.7506 83.4011 33.3537 83.5658 32.9397 83.5662Z" fill="#F5F5F5"/>
+<path d="M68.6897 56.1539H56.0107C55.5967 56.1535 55.1998 55.9888 54.9071 55.6961C54.6143 55.4033 54.4497 55.0064 54.4492 54.5925V39.6303C54.4497 39.2164 54.6143 38.8194 54.9071 38.5267C55.1998 38.234 55.5967 38.0693 56.0107 38.0689H68.6897C69.1037 38.0693 69.5006 38.234 69.7933 38.5267C70.0861 38.8194 70.2507 39.2164 70.2512 39.6303V54.5925C70.2507 55.0065 70.0861 55.4033 69.7933 55.6961C69.5006 55.9888 69.1037 56.1535 68.6897 56.1539Z" fill="#E5E5E5"/>
+<path d="M58.2954 14.6582H38.5169C38.1488 14.6582 37.7957 14.5119 37.5354 14.2516C37.2751 13.9913 37.1289 13.6383 37.1289 13.2702C37.1289 12.9021 37.2751 12.5491 37.5354 12.2888C37.7957 12.0285 38.1488 11.8822 38.5169 11.8822H58.2954C58.6635 11.8822 59.0165 12.0285 59.2768 12.2888C59.5371 12.5491 59.6833 12.9021 59.6833 13.2702C59.6833 13.6383 59.5371 13.9913 59.2768 14.2516C59.0165 14.5119 58.6635 14.6582 58.2954 14.6582Z" fill="#D4D4D4"/>
+<path d="M114.159 14.6582H94.3802C94.012 14.6582 93.659 14.5119 93.3987 14.2516C93.1384 13.9913 92.9922 13.6383 92.9922 13.2702C92.9922 12.9021 93.1384 12.5491 93.3987 12.2888C93.659 12.0285 94.012 11.8822 94.3802 11.8822H114.159C114.527 11.8822 114.88 12.0285 115.14 12.2888C115.4 12.5491 115.547 12.9021 115.547 13.2702C115.547 13.6383 115.4 13.9913 115.14 14.2516C114.88 14.5119 114.527 14.6582 114.159 14.6582Z" fill="#D4D4D4"/>
+<path d="M166.557 14.6582H146.779C146.41 14.6582 146.057 14.5119 145.797 14.2516C145.537 13.9913 145.391 13.6383 145.391 13.2702C145.391 12.9021 145.537 12.5491 145.797 12.2888C146.057 12.0285 146.41 11.8822 146.779 11.8822H166.557C166.925 11.8822 167.278 12.0285 167.539 12.2888C167.799 12.5491 167.945 12.9021 167.945 13.2702C167.945 13.6383 167.799 13.9913 167.539 14.2516C167.278 14.5119 166.925 14.6582 166.557 14.6582Z" fill="#D4D4D4"/>
+<path d="M215.491 14.6582H195.712C195.344 14.6582 194.991 14.5119 194.731 14.2516C194.47 13.9913 194.324 13.6383 194.324 13.2702C194.324 12.9021 194.47 12.5491 194.731 12.2888C194.991 12.0285 195.344 11.8822 195.712 11.8822H215.491C215.859 11.8822 216.212 12.0285 216.472 12.2888C216.732 12.5491 216.879 12.9021 216.879 13.2702C216.879 13.6383 216.732 13.9913 216.472 14.2516C216.212 14.5119 215.859 14.6582 215.491 14.6582Z" fill="#D4D4D4"/>
+</svg>
diff --git a/apps/app/public/empty-state/view.svg b/apps/app/public/empty-state/view.svg
new file mode 100644
index 000000000..478cf6e09
--- /dev/null
+++ b/apps/app/public/empty-state/view.svg
@@ -0,0 +1,26 @@
+<svg width="135" height="120" viewBox="0 0 135 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.211 78.2037C106.147 88.8519 99.8959 99.8645 89.2477 102.801L46.1649 114.683C35.5168 117.619 24.5041 111.368 21.5675 100.72L5.31721 41.7963C2.3806 31.1481 8.63205 20.1355 19.2802 17.1988L62.363 5.31722C73.0112 2.3806 84.0238 8.63205 86.9605 19.2802L103.211 78.2037Z" fill="white"/>
+<path d="M106.933 91.6999C107.814 94.8943 105.938 98.1981 102.744 99.0791L32.6688 118.405C29.4743 119.286 26.1705 117.41 25.2895 114.216L1.59516 28.3001C0.714179 25.1057 2.58962 21.8019 5.78407 20.9209L75.8592 1.59517C79.0536 0.71418 82.3574 2.58962 83.2384 5.78407L106.933 91.6999ZM26.3326 112.378C27.2136 115.573 30.5174 117.448 33.7119 116.567L100.906 98.036C104.101 97.155 105.976 93.8512 105.095 90.6568L82.1953 7.62159C81.3143 4.42714 78.0105 2.5517 74.8161 3.43269L7.62161 21.964C4.42716 22.845 2.55172 26.1488 3.4327 29.3432L26.3326 112.378Z" fill="#F1F1F1"/>
+<path d="M63.8785 43.6712L43.4131 49.3153C43.1244 49.3946 42.816 49.3561 42.5557 49.2083C42.2953 49.0605 42.1042 48.8154 42.0243 48.5269L36.3802 28.0615C36.3009 27.7728 36.3394 27.4645 36.4872 27.2041C36.635 26.9437 36.88 26.7526 37.1686 26.6727L57.634 21.0286C57.9227 20.9494 58.231 20.9878 58.4914 21.1356C58.7518 21.2834 58.9429 21.5285 59.0228 21.817L64.6669 42.2824C64.7461 42.5711 64.7076 42.8795 64.5598 43.1398C64.412 43.4002 64.167 43.5913 63.8785 43.6712ZM37.2886 27.1082C37.1155 27.1561 36.9685 27.2708 36.8798 27.427C36.7911 27.5832 36.768 27.7682 36.8156 27.9414L42.4597 48.4069C42.5076 48.58 42.6223 48.727 42.7785 48.8157C42.9347 48.9043 43.1197 48.9274 43.293 48.8799L63.7584 43.2358C63.9315 43.1879 64.0785 43.0732 64.1672 42.917C64.2559 42.7608 64.279 42.5757 64.2314 42.4025L58.5873 21.9371C58.5394 21.764 58.4247 21.617 58.2685 21.5283C58.1123 21.4396 57.9273 21.4165 57.754 21.4641L37.2886 27.1082Z" fill="#E5E5E5"/>
+<path d="M58.6848 47.7962L38.2194 53.4402C37.9596 53.5116 37.682 53.4769 37.4477 53.3439C37.2134 53.2109 37.0414 52.9904 36.9695 52.7307L31.3254 32.2653C31.254 32.0054 31.2887 31.7279 31.4217 31.4936C31.5547 31.2593 31.7752 31.0873 32.0349 31.0154L52.5003 25.3713C52.7601 25.2999 53.0377 25.3346 53.272 25.4676C53.5063 25.6006 53.6783 25.8211 53.7502 26.0808L59.3943 46.5462C59.4657 46.8061 59.431 47.0836 59.298 47.3179C59.165 47.5522 58.9445 47.7242 58.6848 47.7962Z" fill="#3F76FF"/>
+<path d="M82.4 50.5902L25.2891 66.3406L25.8977 68.5475L83.0087 52.7971L82.4 50.5902Z" fill="#F1F1F1"/>
+<path d="M83.986 56.3446L26.875 72.095L27.4837 74.3019L84.5946 58.5515L83.986 56.3446Z" fill="#F1F1F1"/>
+<path d="M85.5719 62.0987L28.4609 77.8491L29.0696 80.0561L86.1806 64.3057L85.5719 62.0987Z" fill="#F1F1F1"/>
+<path d="M88.3571 72.2262L31.2461 87.9766L31.8547 90.1835L88.9657 74.4331L88.3571 72.2262Z" fill="#F1F1F1"/>
+<path d="M89.9469 77.9805L32.8359 93.731L33.4446 95.9379L90.5556 80.1875L89.9469 77.9805Z" fill="#F1F1F1"/>
+<path d="M91.5407 83.7345L34.4297 99.4849L35.0383 101.692L92.1493 85.9414L91.5407 83.7345Z" fill="#F1F1F1"/>
+<path d="M134.664 115.674C134.664 117.884 132.873 119.674 130.664 119.674H53.9727C51.7635 119.674 49.9727 117.884 49.9727 115.674V22.5513C49.9727 20.3421 51.7635 18.5513 53.9727 18.5513H130.664C132.873 18.5513 134.664 20.3421 134.664 22.5513V115.674Z" fill="white"/>
+<path d="M134.664 113.674C134.664 116.988 131.978 119.674 128.664 119.674H55.9727C52.6589 119.674 49.9727 116.988 49.9727 113.674V24.5513C49.9727 21.2376 52.6589 18.5513 55.9727 18.5513H128.664C131.978 18.5513 134.664 21.2376 134.664 24.5513V113.674ZM51.4667 112.18C51.4667 115.494 54.153 118.18 57.4667 118.18H127.17C130.483 118.18 133.17 115.494 133.17 112.18V26.0454C133.17 22.7316 130.483 20.0454 127.17 20.0454H57.4667C54.153 20.0454 51.4667 22.7316 51.4667 26.0454V112.18Z" fill="#E5E5E5"/>
+<path d="M119.242 62.0229H70.8203V64.3123H119.242V62.0229Z" fill="#3F76FF"/>
+<path d="M119.242 67.9751H70.8203V70.2645H119.242V67.9751Z" fill="#3F76FF"/>
+<path d="M119.242 73.9272H70.8203V76.2166H119.242V73.9272Z" fill="#3F76FF"/>
+<path d="M66.8847 64.9965C67.7099 64.9965 68.3788 64.3275 68.3788 63.5024C68.3788 62.6772 67.7099 62.0083 66.8847 62.0083C66.0596 62.0083 65.3906 62.6772 65.3906 63.5024C65.3906 64.3275 66.0596 64.9965 66.8847 64.9965Z" fill="#3F76FF"/>
+<path d="M119.242 36.3743H70.8203V38.6636H119.242V36.3743Z" fill="#E5E5E5"/>
+<path d="M119.242 42.3264H70.8203V44.6158H119.242V42.3264Z" fill="#E5E5E5"/>
+<path d="M119.242 48.2791H70.8203V50.5684H119.242V48.2791Z" fill="#E5E5E5"/>
+<path d="M66.8847 39.0995C67.7099 39.0995 68.3788 38.4306 68.3788 37.6054C68.3788 36.7803 67.7099 36.1113 66.8847 36.1113C66.0596 36.1113 65.3906 36.7803 65.3906 37.6054C65.3906 38.4306 66.0596 39.0995 66.8847 39.0995Z" fill="#E5E5E5"/>
+<path d="M119.242 87.9204H70.8203V90.2098H119.242V87.9204Z" fill="#E5E5E5"/>
+<path d="M119.242 93.8723H70.8203V96.1617H119.242V93.8723Z" fill="#E5E5E5"/>
+<path d="M119.242 99.8247H70.8203V102.114H119.242V99.8247Z" fill="#E5E5E5"/>
+<path d="M66.8847 90.6456C67.7099 90.6456 68.3788 89.9767 68.3788 89.1516C68.3788 88.3264 67.7099 87.6575 66.8847 87.6575C66.0596 87.6575 65.3906 88.3264 65.3906 89.1516C65.3906 89.9767 66.0596 90.6456 66.8847 90.6456Z" fill="#E5E5E5"/>
+</svg>
diff --git a/apps/app/services/web-waitlist.service.ts b/apps/app/services/web-waitlist.service.ts
new file mode 100644
index 000000000..b56906bba
--- /dev/null
+++ b/apps/app/services/web-waitlist.service.ts
@@ -0,0 +1,22 @@
+// services
+import APIService from "services/api.service";
+
+// types
+import { IWebWaitListResponse } from "types";
+
+class WebWailtListServices extends APIService {
+  constructor() {
+    const origin = typeof window !== "undefined" ? window.location.origin || "" : "";
+    super(origin);
+  }
+
+  async create({ email }: { email: string }): Promise<IWebWaitListResponse> {
+    return this.post(`/api/web-waitlist`, { email: email })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default new WebWailtListServices();
diff --git a/apps/app/styles/command-pallette.css b/apps/app/styles/command-pallette.css
index a421eeba9..12cfe18eb 100644
--- a/apps/app/styles/command-pallette.css
+++ b/apps/app/styles/command-pallette.css
@@ -27,13 +27,13 @@
   font-size: 0.75rem;
   line-height: 1rem;
   border-radius: 0.25rem;
-  background-color: rgba(var(--color-bg-base));
+  background-color: rgba(var(--color-background-100));
 }
 
 [cmdk-item]:hover {
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
 
 [cmdk-item][aria-selected="true"] {
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 418ed9d1d..41169e968 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -87,10 +87,10 @@
 }
 
 .MuiButtonBase-root svg {
-  fill: rgb(var(--color-text-base)) !important;
+  fill: rgb(var(--color-text-100)) !important;
 }
 
 .MuiButtonBase-root.Mui-selected,
 .MuiButtonBase-root:hover {
-  background-color: rgb(var(--color-bg-base)) !important;
+  background-color: rgb(var(--color-background-100)) !important;
 }
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 75692e97b..9b3f1f990 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -17,68 +18,112 @@
   }
 
   :root {
-    --color-bg-base: 255, 255, 255;
-    --color-bg-surface-1: 249, 250, 251;
-    --color-bg-surface-2: 243, 244, 246;
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
 
-    --color-border: 229, 231, 235;
-    --color-bg-sidebar: 255, 255, 255;
-    --color-accent: 63, 118, 255;
+    /* default theme- light */
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
 
-    --color-text-base: 3, 7, 18;
-    --color-text-secondary: 55, 65, 81;
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+
+    --color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
+    --color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
+    --color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
+    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
+    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
   }
 
   [data-theme="light"] {
-    --color-bg-base: 255, 255, 255;
-    --color-bg-surface-1: 249, 250, 251;
-    --color-bg-surface-2: 243, 244, 246;
+    color-scheme: light !important;
 
-    --color-border: 229, 231, 235;
-    --color-bg-sidebar: 255, 255, 255;
-    --color-accent: 63, 118, 255;
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
 
-    --color-text-base: 3, 7, 18;
-    --color-text-secondary: 55, 65, 81;
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
+    --color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
+    --color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
+    --color-sidebar-text-200: 58, 58, 58; /* secondary sidebar text */
+    --color-sidebar-text-300: 82, 82, 82; /* tertiary sidebar text */
+    --color-sidebar-text-400: 163, 163, 163; /* sidebar placeholder text */
+
+    --color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
   }
 
   [data-theme="dark"] {
-    --color-bg-base: 25, 27, 27;
-    --color-bg-surface-1: 29, 30, 32;
-    --color-bg-surface-2: 39, 42, 45;
+    color-scheme: dark !important;
 
-    --color-border: 46, 50, 52;
-    --color-bg-sidebar: 19, 20, 22;
-    --color-accent: 60, 133, 217;
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
 
-    --color-text-base: 233, 244, 252;
-    --color-text-secondary: 142, 148, 146;
+    --color-text-100: 241, 241, 241; /* primary text */
+    --color-text-200: 115, 115, 115; /* secondary text */
+    --color-text-300: 163, 163, 163; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    --color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
+    --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
+    --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
+    --color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
+    --color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
+    --color-sidebar-text-400: 82, 82, 82; /* sidebar placeholder text */
+
+    --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
   }
 
   [data-theme="light-contrast"] {
-    --color-bg-base: 250, 250, 250;
-    --color-bg-surface-1: 250, 250, 250;
-    --color-bg-surface-2: 206, 212, 218;
-
-    --color-border: 0, 0, 0;
-    --color-bg-sidebar: 255, 255, 255;
-    --color-accent: 63, 118, 255;
-
-    --color-text-base: 0, 0, 0;
-    --color-text-secondary: 0, 0, 0;
+    color-scheme: light !important;
   }
 
   [data-theme="dark-contrast"] {
-    --color-bg-base: 25, 27, 27;
-    --color-bg-surface-1: 31, 32, 35;
-    --color-bg-surface-2: 39, 42, 45;
-
-    --color-border: 255, 255, 255;
-    --color-bg-sidebar: 19, 20, 22;
-    --color-accent: 60, 133, 217;
-
-    --color-text-base: 255, 255, 255;
-    --color-text-secondary: 142, 148, 146;
     color-scheme: dark !important;
   }
 }
@@ -97,7 +142,7 @@
 }
 
 body {
-  color: rgba(var(--color-text-base));
+  color: rgba(var(--color-text-100));
 }
 
 /* scrollbar style */
@@ -117,12 +162,12 @@ body {
 
 .horizontal-scroll-enable::-webkit-scrollbar-track {
   height: 7px;
-  background-color: rgba(var(--color-bg-base));
+  background-color: rgba(var(--color-background-100));
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {
@@ -136,7 +181,7 @@ body {
 
 .vertical-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-bg-surface-1));
+  background-color: rgba(var(--color-background-90));
 }
 /* end scrollbar style */
 
@@ -194,7 +239,7 @@ body {
 
 .progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-bg-sidebar));
+  color: rgba(var(--color-sidebar-background-100));
 }
 
 /* end react datepicker styling */
@@ -211,3 +256,9 @@ body {
 .bp4-popover2-transition-container {
   z-index: 1 !important;
 }
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-400));
+}
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index 2c45fda44..1ba4ba649 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -1,15 +1,15 @@
 .react-datepicker-wrapper input::placeholder {
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
   opacity: 1;
 }
 
 .react-datepicker-wrapper input:-ms-input-placeholder {
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
 }
 
 .react-datepicker-wrapper .react-datepicker__close-icon::after {
   background: transparent;
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
 }
 
 .react-datepicker-popper {
@@ -18,7 +18,7 @@
 
 .react-datepicker-wrapper {
   position: relative;
-  background-color: rgba(var(--color-bg-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
 }
 
 .react-datepicker-wrapper,
@@ -28,21 +28,21 @@
 
 .react-datepicker {
   font-family: "Inter" !important;
-  background-color: rgba(var(--color-bg-base)) !important;
-  border: 1px solid rgba(var(--color-border)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
+  border: 1px solid rgba(var(--color-background-80)) !important;
 }
 
 .react-datepicker__month-container {
   width: 300px;
-  background-color: rgba(var(--color-bg-base)) !important;
-  color: rgba(var(--color-text-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
+  color: rgba(var(--color-text-100)) !important;
   border-radius: 10px !important;
-  /* border: 1px solid rgba(var(--color-border)) !important; */
+  /* border: 1px solid rgba(var(--color-background-80)) !important; */
 }
 
 .react-datepicker__header {
   border-radius: 10px !important;
-  background-color: rgba(var(--color-bg-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
   border: none !important;
 }
 
@@ -51,24 +51,24 @@
 }
 
 .react-datepicker__triangle {
-  border-color: rgba(var(--color-bg-base)) transparent transparent transparent !important;
+  border-color: rgba(var(--color-background-100)) transparent transparent transparent !important;
 }
 
 .react-datepicker__triangle:before {
-  border-bottom-color: rgba(var(--color-border)) !important;
+  border-bottom-color: rgba(var(--color-background-80)) !important;
 }
 .react-datepicker__triangle:after {
-  border-bottom-color: rgba(var(--color-bg-base)) !important;
+  border-bottom-color: rgba(var(--color-background-100)) !important;
 }
 
 .react-datepicker__current-month {
   font-weight: 500 !important;
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__month {
   border-collapse: collapse;
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day-names {
@@ -81,7 +81,7 @@
 }
 
 .react-datepicker__day-name {
-  color: rgba(var(--color-text-secondary)) !important;
+  color: rgba(var(--color-text-200)) !important;
 }
 
 .react-datepicker__week {
@@ -91,7 +91,7 @@
 }
 
 .react-datepicker__day {
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day {
@@ -100,8 +100,8 @@
 }
 
 .react-datepicker__day:hover {
-  background-color: rgba(var(--color-bg-surface-2)) !important;
-  color: rgba(var(--color-text-base)) !important;
+  background-color: rgba(var(--color-background-80)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day--selected,
@@ -113,7 +113,7 @@
 .react-datepicker__day--disabled,
 .react-datepicker__day--disabled:hover {
   background: transparent !important;
-  color: rgba(var(--color-text-secondary)) !important;
+  color: rgba(var(--color-text-200)) !important;
   cursor: default;
 }
 
@@ -122,7 +122,7 @@
 }
 
 .react-datepicker__day--highlighted {
-  background-color: rgba(var(--color-bg-surface-2)) !important;
+  background-color: rgba(var(--color-background-80)) !important;
 }
 
 .react-datepicker__day--keyboard-selected {
@@ -132,13 +132,13 @@
 
 .react-datepicker__day--in-range-start,
 .react-datepicker__day--in-range-end {
-  background-color: rgba(var(--color-bg-accent)) !important;
+  background-color: rgba(var(--color-primary-100)) !important;
   color: white !important;
 }
 
 .react-datepicker__day--in-range:not(.react-datepicker__day--in-range-start):not(
     .react-datepicker__day--in-range-end
   ) {
-  background-color: rgba(var(--color-accent)) !important;
+  background-color: rgba(var(--color-primary-100)) !important;
   color: white !important;
 }
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index cc9863e90..dbb4b940c 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -1,14 +1,4 @@
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
-
-    return `rgb(var(${variableName}))`;
-  };
-}
-
-function convertToRGB(variableName) {
-  return `rgb(var(${variableName}))`;
-}
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
 
 module.exports = {
   darkMode: "class",
@@ -16,33 +6,145 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: {
-          accent: withOpacity("--color-accent"),
-          base: withOpacity("--color-bg-base"),
-        },
-      },
-      borderColor: {
-        brand: {
-          base: withOpacity("--color-border"),
-          "surface-1": withOpacity("--color-bg-surface-1"),
-          "surface-2": withOpacity("--color-bg-surface-2"),
-        },
-      },
-      backgroundColor: {
-        brand: {
-          base: withOpacity("--color-bg-base"),
-          "surface-1": withOpacity("--color-bg-surface-1"),
-          "surface-2": withOpacity("--color-bg-surface-2"),
-          sidebar: withOpacity("--color-bg-sidebar"),
+        custom: {
+          primary: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-primary-10"),
+            20: convertToRGB("--color-primary-20"),
+            30: convertToRGB("--color-primary-30"),
+            40: convertToRGB("--color-primary-40"),
+            50: convertToRGB("--color-primary-50"),
+            60: convertToRGB("--color-primary-60"),
+            70: convertToRGB("--color-primary-70"),
+            80: convertToRGB("--color-primary-80"),
+            90: convertToRGB("--color-primary-90"),
+            100: convertToRGB("--color-primary-100"),
+            200: convertToRGB("--color-primary-200"),
+            300: convertToRGB("--color-primary-300"),
+            400: convertToRGB("--color-primary-400"),
+            500: convertToRGB("--color-primary-500"),
+            600: convertToRGB("--color-primary-600"),
+            700: convertToRGB("--color-primary-700"),
+            800: convertToRGB("--color-primary-800"),
+            900: convertToRGB("--color-primary-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
+          },
+          background: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
+          text: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-text-100"),
+          },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-100"),
+          },
+          sidebar: {
+            background: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
+            text: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-100"),
+            },
+          },
           backdrop: "#131313",
         },
       },
-      textColor: {
-        brand: {
-          base: withOpacity("--color-text-base"),
-          secondary: withOpacity("--color-text-secondary"),
-        },
-      },
       keyframes: {
         leftToaster: {
           "0%": { left: "-20rem" },
@@ -56,22 +158,22 @@ module.exports = {
       typography: ({ theme }) => ({
         brand: {
           css: {
-            "--tw-prose-body": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-p": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-headings": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-lead": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-links": `${convertToRGB("--color-accent")}`,
-            "--tw-prose-bold": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-counters": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-bullets": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-hr": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-quotes": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-quote-borders": `${convertToRGB("--color-border")}`,
-            "--tw-prose-code": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-pre-code": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-pre-bg": `${convertToRGB("--color-bg-base")}`,
-            "--tw-prose-th-borders": `${convertToRGB("--color-border")}`,
-            "--tw-prose-td-borders": `${convertToRGB("--color-border")}`,
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border"),
+            "--tw-prose-td-borders": convertToRGB("--color-border"),
           },
         },
       }),
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index a8dcce3bc..c66734c93 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -15,6 +15,7 @@ export * from "./importer";
 export * from "./inbox";
 export * from "./analytics";
 export * from "./calendar";
+export * from "./waitlist";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index eaa75b75a..d5810b4d3 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -29,16 +29,13 @@ export interface IUser {
 }
 
 export interface ICustomTheme {
-  accent: string;
-  bgBase: string;
-  bgSurface1: string;
-  bgSurface2: string;
-  border: string;
+  background: string;
+  text: string;
+  primary: string;
+  sidebarBackground: string;
+  sidebarText: string;
   darkPalette: boolean;
   palette: string;
-  sidebar: string;
-  textBase: string;
-  textSecondary: string;
 }
 
 export interface ICurrentUserResponse extends IUser {
diff --git a/apps/app/types/waitlist.d.ts b/apps/app/types/waitlist.d.ts
new file mode 100644
index 000000000..3c199ad07
--- /dev/null
+++ b/apps/app/types/waitlist.d.ts
@@ -0,0 +1,3 @@
+export interface IWebWaitListResponse {
+  status: string;
+}
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index 6d468c637..2e060abdd 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -14,6 +14,7 @@ export interface IWorkspace {
   readonly created_by: string;
   readonly updated_by: string;
   company_size: number | null;
+  total_issues: number | null;
 }
 
 export interface IWorkspaceLite {
diff --git a/docker-compose-hub.yml b/docker-compose-hub.yml
index 63f196300..48e424d19 100644
--- a/docker-compose-hub.yml
+++ b/docker-compose-hub.yml
@@ -1,5 +1,38 @@
 version: "3.8"
 
+x-api-and-worker-env:
+        &api-and-worker-env
+        DEBUG: ${DEBUG}
+        SENTRY_DSN: ${SENTRY_DSN}
+        DJANGO_SETTINGS_MODULE: plane.settings.production
+        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
+        REDIS_URL: redis://plane-redis:6379/
+        EMAIL_HOST: ${EMAIL_HOST}
+        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
+        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
+        EMAIL_PORT: ${EMAIL_PORT}
+        EMAIL_FROM: ${EMAIL_FROM}
+        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
+        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
+        AWS_REGION: ${AWS_REGION}
+        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
+        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
+        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
+        WEB_URL: ${WEB_URL}
+        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
+        DISABLE_COLLECTSTATIC: 1
+        DOCKERIZED: 1
+        OPENAI_API_BASE: ${OPENAI_API_BASE}
+        OPENAI_API_KEY: ${OPENAI_API_KEY}
+        GPT_ENGINE: ${GPT_ENGINE}
+        SECRET_KEY: ${SECRET_KEY}
+        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
+        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
+        USE_MINIO: ${USE_MINIO}
+        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
+
 services:
         plane-web:
                 container_name: planefrontend
@@ -10,12 +43,14 @@ services:
                         - .env
                 environment:
                         NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: 0
-                        NEXT_PUBLIC_GITHUB_APP_NAME: 0
-                        NEXT_PUBLIC_GITHUB_ID: 0
-                        NEXT_PUBLIC_SENTRY_DSN: 0
-                        NEXT_PUBLIC_ENABLE_OAUTH: 0
-                        NEXT_PUBLIC_ENABLE_SENTRY: 0
+                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
+                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
+                        NEXT_PUBLIC_GITHUB_ID: "0"
+                        NEXT_PUBLIC_SENTRY_DSN: "0"
+                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
+                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
+                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
+                        NEXT_PUBLIC_TRACK_EVENTS: "0"
                 depends_on:
                         - plane-api
                         - plane-worker
@@ -28,70 +63,20 @@ services:
                 env_file:
                         - .env
                 environment:
-                        DEBUG: ${DEBUG}
-                        SENTRY_DSN: ${SENTRY_DSN}
-                        DJANGO_SETTINGS_MODULE: plane.settings.production
-                        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-                        REDIS_URL: redis://plane-redis:6379/
-                        EMAIL_HOST: ${EMAIL_HOST}
-                        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-                        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-                        EMAIL_PORT: ${EMAIL_PORT}
-                        EMAIL_FROM: ${EMAIL_FROM}
-                        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-                        AWS_REGION: ${AWS_REGION}
-                        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-                        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-                        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-                        WEB_URL: ${WEB_URL}
-                        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-                        DISABLE_COLLECTSTATIC: 1
-                        DOCKERIZED: 1
-                        OPENAI_API_KEY: ${OPENAI_API_KEY}
-                        GPT_ENGINE: ${GPT_ENGINE}
-                        SECRET_KEY: ${SECRET_KEY}
-                        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-                        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-                        USE_MINIO: ${USE_MINIO}
+                        <<: *api-and-worker-env
                 depends_on:
                         - plane-db
                         - plane-redis
 
         plane-worker:
-                container_name: planerqworker
+                container_name: planebgworker
                 image: makeplane/plane-worker:latest
                 restart: always
                 command: ./bin/worker
                 env_file:
                         - .env
                 environment:
-                        DEBUG: ${DEBUG}
-                        SENTRY_DSN: ${SENTRY_DSN}
-                        DJANGO_SETTINGS_MODULE: plane.settings.production
-                        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-                        REDIS_URL: redis://plane-redis:6379/
-                        EMAIL_HOST: ${EMAIL_HOST}
-                        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-                        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-                        EMAIL_PORT: ${EMAIL_PORT}
-                        EMAIL_FROM: ${EMAIL_FROM}
-                        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-                        AWS_REGION: ${AWS_REGION}
-                        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-                        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-                        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-                        WEB_URL: ${WEB_URL}
-                        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-                        DISABLE_COLLECTSTATIC: 1
-                        DOCKERIZED: 1
-                        OPENAI_API_KEY: ${OPENAI_API_KEY}
-                        GPT_ENGINE: ${GPT_ENGINE}
-                        SECRET_KEY: ${SECRET_KEY}
-                        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-                        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-                        USE_MINIO: ${USE_MINIO}
+                        <<: *api-and-worker-env
                 depends_on:
                         - plane-api
                         - plane-db
@@ -102,14 +87,15 @@ services:
                 image: postgres:15.2-alpine
                 restart: always
                 command: postgres -c 'max_connections=1000'
+                volumes:
+                        - pgdata:/var/lib/postgresql/data
                 env_file:
                         - .env
                 environment:
                         POSTGRES_USER: ${PGUSER}
                         POSTGRES_DB: ${PGDATABASE}
                         POSTGRES_PASSWORD: ${PGPASSWORD}
-                volumes:
-                        - pgdata:/var/lib/postgresql/data
+                        PGDATA: /var/lib/postgresql/data
 
         plane-redis:
                 container_name: plane-redis
@@ -121,9 +107,10 @@ services:
         plane-minio:
                 container_name: plane-minio
                 image: minio/minio
+                restart: always
+                command: server /export --console-address ":9090"
                 volumes:
                         - uploads:/export
-                command: server /export --console-address ":9090"
                 env_file:
                         - .env
                 environment:
@@ -133,23 +120,18 @@ services:
         createbuckets:
                 image: minio/mc
                 entrypoint: >
-                  /bin/sh -c "
-                  /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY;
-                  /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME;
-                  /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME;
-                  exit 0;
-                  "
+                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
                 env_file:
                         - .env
                 depends_on:
                         - plane-minio
 
-# Comment this if you already have a reverse proxy running
+        # Comment this if you already have a reverse proxy running
         plane-proxy:
                 container_name: planeproxy
                 image: makeplane/plane-proxy:latest
                 ports:
-                - ${NGINX_PORT}:80
+                        - ${NGINX_PORT}:80
                 env_file:
                         - .env
                 environment:
@@ -159,7 +141,6 @@ services:
                         - plane-web
                         - plane-api
 
-
 volumes:
         pgdata:
         redisdata:
diff --git a/docker-compose.yml b/docker-compose.yml
index 496ee434d..8a52d3c36 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,7 @@
 version: "3.8"
 
-x-api-and-worker-env: &api-and-worker-env
+x-api-and-worker-env:
+        &api-and-worker-env
         DEBUG: ${DEBUG}
         SENTRY_DSN: ${SENTRY_DSN}
         DJANGO_SETTINGS_MODULE: plane.settings.production
@@ -23,6 +24,7 @@ x-api-and-worker-env: &api-and-worker-env
         GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
         DISABLE_COLLECTSTATIC: 1
         DOCKERIZED: 1
+        OPENAI_API_BASE: ${OPENAI_API_BASE}
         OPENAI_API_KEY: ${OPENAI_API_KEY}
         GPT_ENGINE: ${GPT_ENGINE}
         SECRET_KEY: ${SECRET_KEY}
@@ -40,7 +42,7 @@ services:
                         args:
                                 NEXT_PUBLIC_API_BASE_URL: http://localhost:8000
                 restart: always
-                command: [ "/usr/local/bin/start.sh" ]
+                command: /usr/local/bin/start.sh
                 env_file:
                         - .env
                 environment:
@@ -57,7 +59,6 @@ services:
                         - plane-api
                         - plane-worker
 
-
         plane-api:
                 container_name: planebackend
                 build:
@@ -127,14 +128,13 @@ services:
         createbuckets:
                 image: minio/mc
                 entrypoint: >
-                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; 
-                        /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; 
-                        /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
                 env_file:
                         - .env
                 depends_on:
                         - plane-minio
 
+        # Comment this if you already have a reverse proxy running
         plane-proxy:
                 container_name: planeproxy
                 build:
diff --git a/turbo.json b/turbo.json
index 1eba6fc9a..0d50233d6 100644
--- a/turbo.json
+++ b/turbo.json
@@ -20,7 +20,9 @@
     "NEXT_PUBLIC_SESSION_RECORDER_KEY",
     "NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS",
     "NEXT_PUBLIC_SLACK_CLIENT_ID",
-    "NEXT_PUBLIC_SLACK_CLIENT_SECRET"
+    "NEXT_PUBLIC_SLACK_CLIENT_SECRET",
+    "NEXT_PUBLIC_SUPABASE_URL",
+    "NEXT_PUBLIC_SUPABASE_ANON_KEY"
   ],
   "pipeline": {
     "build": {