diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 0d51af71d..0c13d8bcf 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
             {(provided, snapshot) => (
               <div
                 className={`relative h-full overflow-y-auto p-1  ${
-                  snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : ""
+                  snapshot.isDraggingOver ? "bg-brand-base/20" : ""
                 } ${!isCollapsed ? "hidden" : "block"}`}
                 ref={provided.innerRef}
                 {...provided.droppableProps}
@@ -96,10 +96,12 @@ export const SingleBoard: React.FC<Props> = ({
                     <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-surface-2 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-brand-base p-2 text-xs`}
                     >
                       This board is ordered by{" "}
-                      {replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
+                      {replaceUnderscoreIfSnakeCase(
+                        orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+                      )}
                     </div>
                   </>
                 )}
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 453a3bc19..b36008c77 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -261,7 +261,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className={`mb-3 rounded bg-brand-surface-1 shadow ${
+        className={`mb-3 rounded bg-brand-base shadow ${
           snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
         }`}
         ref={provided.innerRef}
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index c661f5de5..b78c6512f 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -436,8 +436,8 @@ export const IssuesView: React.FC<Props> = ({
             <div
               className={`${
                 trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-              } fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${
-                snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
+              } fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-red-500/20 p-3 text-xs font-medium italic text-red-500 ${
+                snapshot.isDraggingOver ? "bg-red-500/100 text-white" : ""
               } duration-200`}
               ref={provided.innerRef}
               {...provided.droppableProps}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 529adeeaf..c1e6afaab 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -44,7 +44,6 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
 } from "constants/fetch-keys";
-import { DIVIDER } from "@blueprintjs/core/lib/esm/common/classes";
 
 type Props = {
   type?: string;
@@ -217,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base bg-brand-surface-1 last:border-b-0"
+        className="flex items-center justify-between gap-2 border-b border-brand-base px-4 py-2.5 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -269,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base text-brand-secondary px-3 py-1 text-xs shadow-sm">
+            <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
@@ -278,7 +277,7 @@ export const SingleListIssue: React.FC<Props> = ({
               {issue.label_details.map((label) => (
                 <span
                   key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border border-brand-base text-brand-secondary px-2 py-0.5 text-xs"
+                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
                 >
                   <span
                     className="h-1.5 w-1.5  rounded-full"
@@ -310,7 +309,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.link && (
-            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-gray-500">
                   <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
@@ -320,10 +319,10 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-gray-500">
-                  <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index 5e71063a3..c7cfbd820 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -211,9 +211,7 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="bg-brand-surface-1 px-4 py-2.5 text-sm text-brand-secondary">
-                    No issues.
-                  </p>
+                  <p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p>
                 )
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 521c011fb..57e546ef4 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -244,7 +244,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
             activityItem.field !== "link" &&
             activityItem.field !== "estimate"
           ) {
-            value = <span className="text-gray-600">created this issue.</span>;
+            value = <span className="text-brand-secondary">created this issue.</span>;
           } else if (activityItem.field === "state") {
             value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
           } else if (activityItem.field === "labels") {
@@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                 <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-1"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-base"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                       <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-1 ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-base ring-white">
                               {activityItem.field ? (
                                 activityDetails[activityItem.field as keyof typeof activityDetails]
                                   ?.icon
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index fe6fb189e..eb20f7040 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -52,18 +52,18 @@ export const ViewPrioritySelect: React.FC<Props> = ({
       customButton={
         <button
           type="button"
-          className={`grid h-6 w-6 place-items-center rounded border border-brand-base ${
+          className={`grid h-6 w-6 place-items-center rounded border ${
             isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
           } items-center shadow-sm ${
             issue.priority === "urgent"
-              ? "text-red-600"
+              ? "border-red-500/20 bg-red-500/20 text-red-500"
               : issue.priority === "high"
-              ? "text-orange-500"
+              ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
               : issue.priority === "medium"
-              ? "text-yellow-500"
+              ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
               : issue.priority === "low"
-              ? "bg-green-100 text-green-500"
-              : ""
+              ? "border-green-500/20 bg-green-500/20 text-green-500"
+              : "border-brand-base"
           }`}
         >
           <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 089025a23..4b8fbcc99 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -230,89 +230,87 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   }, [createPageBlock, updatePageBlock, data, handleSubmit]);
 
   return (
-    <div>
-      <form
-        className="divide-y rounded-[10px] border shadow"
-        onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
-      >
-        <div className="pt-2">
-          <div className="flex justify-between">
-            <Input
-              id="name"
-              name="name"
-              placeholder="Title"
-              register={register}
-              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
-              autoComplete="off"
-              maxLength={255}
-            />
-          </div>
-          <div className="page-block-section relative -mt-2 text-gray-500">
-            <Controller
-              name="description"
-              control={control}
-              render={({ field: { value } }) => (
-                <RemirrorRichTextEditor
-                  value={
-                    !value || (typeof value === "object" && Object.keys(value).length === 0)
-                      ? watch("description_html")
-                      : value
-                  }
-                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                  placeholder="Write something..."
-                  customClassName="text-sm"
-                  noBorder
-                  borderOnFocus={false}
-                />
+    <form
+      className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
+      onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
+    >
+      <div className="pt-2">
+        <div className="flex justify-between">
+          <Input
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
+            autoComplete="off"
+            maxLength={255}
+          />
+        </div>
+        <div className="page-block-section relative -mt-2 text-brand-secondary">
+          <Controller
+            name="description"
+            control={control}
+            render={({ field: { value } }) => (
+              <RemirrorRichTextEditor
+                value={
+                  !value || (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("description_html")
+                    : value
+                }
+                onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                placeholder="Write something..."
+                customClassName="text-sm"
+                noBorder
+                borderOnFocus={false}
+              />
+            )}
+          />
+          <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-1 ${
+                iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
+              }`}
+              onClick={handleAutoGenerateDescription}
+              disabled={iAmFeelingLucky}
+            >
+              {iAmFeelingLucky ? (
+                "Generating response..."
+              ) : (
+                <>
+                  <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                </>
               )}
-            />
-            <div className="m-2 mt-6 ml-2 flex">
+            </button>
+            {data && (
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100 ${
-                  iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
-                }`}
-                onClick={handleAutoGenerateDescription}
-                disabled={iAmFeelingLucky}
+                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                onClick={() => {
+                  onClose();
+                  setGptAssistantModal();
+                }}
               >
-                {iAmFeelingLucky ? (
-                  "Generating response..."
-                ) : (
-                  <>
-                    <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
-                  </>
-                )}
+                <SparklesIcon className="h-4 w-4" />
+                AI
               </button>
-              {data && (
-                <button
-                  type="button"
-                  className="-mr-2 ml-4 flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100"
-                  onClick={() => {
-                    onClose();
-                    setGptAssistantModal();
-                  }}
-                >
-                  <SparklesIcon className="h-4 w-4" />
-                  AI
-                </button>
-              )}
-            </div>
+            )}
           </div>
         </div>
-        <div className="flex items-center justify-end gap-2 p-4">
-          <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-          <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
-            {data
-              ? isSubmitting
-                ? "Updating..."
-                : "Update block"
-              : isSubmitting
-              ? "Adding..."
-              : "Add block"}
-          </PrimaryButton>
-        </div>
-      </form>
-    </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 p-4">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? "Updating..."
+              : "Update block"
+            : isSubmitting
+            ? "Adding..."
+            : "Add block"}
+        </PrimaryButton>
+      </div>
+    </form>
   );
 };
diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index b57729003..58aa21c07 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -47,9 +47,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   const { setToastAlert } = useToast();
 
   const { data: people } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
@@ -67,7 +67,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
     if (!workspaceSlug || !projectId) return;
 
     mutate<IPage[]>(
-      ALL_PAGES_LIST(projectId as string),
+      ALL_PAGES_LIST(projectId.toString()),
       (prevData) =>
         (prevData ?? []).map((p) => {
           if (p.id === page.id) p.is_favorite = true;
@@ -77,7 +77,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
     mutate<IPage[]>(
-      MY_PAGES_LIST(projectId as string),
+      MY_PAGES_LIST(projectId.toString()),
       (prevData) =>
         (prevData ?? []).map((p) => {
           if (p.id === page.id) p.is_favorite = true;
@@ -87,17 +87,17 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
     mutate<IPage[]>(
-      FAVORITE_PAGES_LIST(projectId as string),
-      (prevData) => [page, ...(prevData as IPage[])],
+      FAVORITE_PAGES_LIST(projectId.toString()),
+      (prevData) => [page, ...(prevData ?? [])],
       false
     );
 
     pagesService
-      .addPageToFavorites(workspaceSlug as string, projectId as string, {
+      .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
         page: page.id,
       })
       .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -117,7 +117,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
     if (!workspaceSlug || !projectId) return;
 
     mutate<IPage[]>(
-      ALL_PAGES_LIST(projectId as string),
+      ALL_PAGES_LIST(projectId.toString()),
       (prevData) =>
         (prevData ?? []).map((p) => {
           if (p.id === page.id) p.is_favorite = false;
@@ -127,7 +127,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
     mutate<IPage[]>(
-      MY_PAGES_LIST(projectId as string),
+      MY_PAGES_LIST(projectId.toString()),
       (prevData) =>
         (prevData ?? []).map((p) => {
           if (p.id === page.id) p.is_favorite = false;
@@ -137,15 +137,15 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
     mutate<IPage[]>(
-      FAVORITE_PAGES_LIST(projectId as string),
+      FAVORITE_PAGES_LIST(projectId.toString()),
       (prevData) => (prevData ?? []).filter((p) => p.id !== page.id),
       false
     );
 
     pagesService
-      .removePageFromFavorites(workspaceSlug as string, projectId as string, page.id)
+      .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
       .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -165,25 +165,25 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
     if (!workspaceSlug || !projectId) return;
 
     mutate<IPage[]>(
-      ALL_PAGES_LIST(projectId as string),
+      ALL_PAGES_LIST(projectId.toString()),
       (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
       false
     );
     mutate<IPage[]>(
-      MY_PAGES_LIST(projectId as string),
+      MY_PAGES_LIST(projectId.toString()),
       (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
       false
     );
     mutate<IPage[]>(
-      FAVORITE_PAGES_LIST(projectId as string),
+      FAVORITE_PAGES_LIST(projectId.toString()),
       (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
       false
     );
 
     pagesService
-      .patchPage(workspaceSlug as string, projectId as string, page.id, formData)
+      .patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData)
       .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
       });
   };
 
@@ -202,7 +202,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       {pages ? (
         pages.length > 0 ? (
           viewType === "list" ? (
-            <ul role="list" className="divide-y">
+            <ul role="list" className="divide-y divide-brand-base">
               {pages.map((page) => (
                 <SinglePageListItem
                   key={page.id}
@@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </ul>
           ) : viewType === "detailed" ? (
-            <div className="divide-y rounded-[10px] border border-brand-base bg-brand-surface-2">
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
               {pages.map((page) => (
                 <SinglePageDetailedItem
                   key={page.id}
@@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </div>
           ) : (
-            <div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
+            <div className="rounded-[10px] border border-brand-base">
               {pages.map((page) => (
                 <SinglePageDetailedItem
                   key={page.id}
@@ -261,6 +261,11 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
           <Loader.Item height="40px" />
           <Loader.Item height="40px" />
         </Loader>
+      ) : viewType === "detailed" ? (
+        <Loader className="space-y-4">
+          <Loader.Item height="150px" />
+          <Loader.Item height="150px" />
+        </Loader>
       ) : (
         <Loader className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           <Loader.Item height="150px" />
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 3d61722ec..147a256b6 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -300,15 +300,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
             </div>
           ) : (
             <div
-              className={`group relative ${
-                snapshot.isDragging ? "rounded-md border-2 border-theme bg-white p-6 shadow-lg" : ""
+              className={`group relative text-brand-secondary ${
+                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-1 p-6 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
               <button
                 type="button"
-                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-gray-100 group-hover:!flex"
+                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-1 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
@@ -316,12 +316,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-0 hidden items-center gap-2 bg-white  pl-4 group-hover:!flex ${
+                className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
                 {block.issue && block.sync && (
-                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
+                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-1 py-1 px-1.5 text-xs">
                     {isSyncing ? (
                       <ArrowPathIcon className="h-3 w-3 animate-spin" />
                     ) : (
@@ -332,8 +332,8 @@ 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-gray-100 ${
-                    iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
@@ -348,7 +348,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-gray-100"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -356,7 +356,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-gray-100"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -364,7 +364,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-gray-100"
+                      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"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -404,7 +404,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
               </div>
               <div
                 className={`flex items-start gap-2 ${
-                  snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
+                  snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
                 }`}
               >
                 <div
@@ -417,19 +417,19 @@ 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-gray-100 px-1.5 py-1 text-xs">
-                            <LayerDiagonalIcon height="16" width="16" color="black" />
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs">
+                            <LayerDiagonalIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
                       </div>
                     )}
-                    <h3 className="max-w-[1000px] overflow-hidden text-base font-medium">
+                    <h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
                       {block.name}
                     </h3>
                   </div>
                   {block?.description_stripped.length > 0 && (
-                    <p className="mt-3 h-5 truncate text-sm font-normal text-gray-500">
+                    <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
                       {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 c43aed195..0c065d47f 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -52,7 +52,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
         <a className="block p-4">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <p className="mr-2 truncate font-medium">{truncateText(page.name, 75)}</p>
+              <p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
@@ -175,7 +175,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
+          <div className="relative mt-2 space-y-2 text-sm text-brand-secondary">
             {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 a60e90729..a06681fd1 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -51,11 +51,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 hover:bg-brand-surface-1">
+          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-base">
             <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-base font-medium text-gray-800">
+                <p className="mr-2 truncate text-sm text-brand-base">
                   {truncateText(page.name, 75)}
                 </p>
                 {page.label_details.length > 0 &&
@@ -64,16 +64,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       key={label.id}
                       className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
                       style={{
-                        backgroundColor: `${
-                          label?.color && label.color !== "" ? label.color : "#000000"
-                        }20`,
+                        backgroundColor: `${label?.color}20`,
                       }}
                     >
                       <span
                         className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                         style={{
-                          backgroundColor:
-                            label?.color && label.color !== "" ? label.color : "#000000",
+                          backgroundColor: label?.color,
                         }}
                       />
                       {label.name}
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 8309b4441..0705f53a0 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -60,7 +60,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-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg focus:outline-none"
             >
               {options.map((option) => (
                 <div className="relative p-1" key={option.id}>
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index 73e7e316c..b9f718e15 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -121,9 +121,9 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
                 noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
               } ${
                 bg === "primary"
-                  ? "bg-brand-sidebar"
-                  : bg === "secondary"
                   ? "bg-brand-surface-1"
+                  : bg === "secondary"
+                  ? "bg-brand-sidebar"
                   : "bg-brand-base"
               }`}
             >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 50dac117f..3bdc2a878 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -142,7 +142,7 @@ const IssueDetailsPage: NextPage = () => {
           <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
             <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-1 p-2 text-xs">
+                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-base p-2 text-xs">
                   <Link
                     href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
                       issueDetails.parent
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index f4545ec30..78dedbadc 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -310,7 +310,7 @@ const SinglePage: NextPage = () => {
       }
     >
       {pageDetails ? (
-        <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-surface-1 p-4">
+        <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-base p-4">
           <div className="flex items-center justify-between gap-2 px-3">
             <button
               type="button"
@@ -331,7 +331,7 @@ const SinglePage: NextPage = () => {
                     return (
                       <div
                         key={label.id}
-                        className="group flex items-center gap-1 cursor-pointer 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-brand-base 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 });
@@ -389,13 +389,13 @@ const SinglePage: NextPage = () => {
                 />
               )}
             </div>
-            <div className="flex items-center gap-6">
+            <div className="flex items-center gap-6 text-brand-secondary">
               <Tooltip
                 tooltipContent={`Last updated at ${renderShortTime(
                   pageDetails.updated_at
                 )} on ${renderShortDate(pageDetails.updated_at)}`}
               >
-                <p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p>
+                <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
               </Tooltip>
               <button className="flex items-center gap-2" onClick={handleCopyText}>
                 <LinkIcon className="h-4 w-4" />
@@ -418,7 +418,7 @@ const SinglePage: NextPage = () => {
                             }}
                           />
                         ) : (
-                          <ColorPalletteIcon height={16} width={16} color="#000000" />
+                          <ColorPalletteIcon height={16} width={16} />
                         )}
                       </Popover.Button>
 
@@ -486,7 +486,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 placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 "
+              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
               role="textbox"
             />
           </div>
@@ -515,7 +515,7 @@ const SinglePage: NextPage = () => {
                 {!createBlockForm && (
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4"
+                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-1"
                     onClick={handleNewBlock}
                   >
                     <PlusIcon className="h-3 w-3" />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 9f65011e7..8dcb636a1 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -25,7 +25,7 @@ import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "compone
 import { Input, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
+import {ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // types
 import { IPage, TPageViewProps } from "types";
 import type { NextPage } from "next";
@@ -148,7 +148,6 @@ const ProjectPages: NextPage = () => {
       });
   };
 
-
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
       case "Recent":
@@ -191,7 +190,7 @@ const ProjectPages: NextPage = () => {
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="w-4 h-4" />
+            <PlusIcon className="h-4 w-4" />
             Create Page
           </PrimaryButton>
         }
@@ -199,13 +198,13 @@ const ProjectPages: NextPage = () => {
         <div className="space-y-4">
           <form
             onSubmit={handleSubmit(createPage)}
-            className="flex items-center relative justify-between gap-2 mb-12 rounded-[6px] border border-gray-200 bg-white p-2 shadow"
+            className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"
           >
             <Input
               type="text"
               name="name"
               register={register}
-              className="border-none font-medium flex break-all text-xl outline-none focus:ring-0"
+              className="flex break-all border-none text-xl font-medium outline-none focus:ring-0"
               placeholder="Title"
             />
             {watch("name") !== "" && (
@@ -235,7 +234,7 @@ const ProjectPages: NextPage = () => {
                 }
               }}
             >
-              <Tab.List as="div" className="flex items-center justify-between mb-6">
+              <Tab.List as="div" className="mb-6 flex items-center justify-between">
                 <div className="flex gap-4">
                   {["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
                     (tab, index) => (
@@ -245,7 +244,7 @@ const ProjectPages: NextPage = () => {
                           `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-surface-2 hover:bg-brand-surface-1"
+                              : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
                           }`
                         }
                       >
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 7e4137273..c7c316c26 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -176,17 +176,17 @@
 
 /* react datepicker styling */
 .react-datepicker-wrapper input::placeholder {
-  color: #000;
+  color: rgba(var(--color-text-secondary));
   opacity: 1;
 }
 
 .react-datepicker-wrapper input:-ms-input-placeholder {
-  color: #000;
+  color: rgba(var(--color-text-secondary));
 }
 
 .react-datepicker-wrapper .react-datepicker__close-icon::after {
   background: transparent;
-  color: #000;
+  color: rgba(var(--color-text-secondary));
 }
 
 .react-datepicker-popper {
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index ddb9fb4ad..732e4be00 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -18,7 +18,7 @@ module.exports = {
         secondary: "white",
         brand: {
           accent: withOpacity("--color-accent"),
-          base: withOpacity("--color-border"),
+          base: withOpacity("--color-bg-base"),
         },
       },
       borderColor: {