diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
index 741a44e9c..1f9db203d 100644
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/apps/app/components/workspace/activity-graph.tsx
@@ -118,7 +118,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                     } h-4 w-4 rounded ${
                       isActive
                         ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
-                        : "bg-brand-base"
+                        : "bg-brand-surface-2"
                     }`}
                   />
                 </Tooltip>
@@ -127,7 +127,7 @@ 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-base" />
+            <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" />
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
index 7439bf9cb..e34f1a939 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -55,10 +55,10 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
           ))}
         </CustomMenu>
       </div>
-      <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-8 pl-4">
+      <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
         <ResponsiveContainer width="100%" height={250}>
           <LineChart data={data}>
-            <CartesianGrid stroke="#e2e2e280" />
+            <CartesianGrid stroke="#858e9660" />
             <XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
             <YAxis dataKey="completed_count" allowDecimals={false} />
             <Tooltip content={<CustomTooltip />} />
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
index 3325040de..9cf7b4295 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -36,10 +36,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
     <div>
       <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
       {issues ? (
-        <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4 text-sm h-[calc(100%-2.25rem)]">
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-brand-base bg-brand-base 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-600 bg-opacity-20" : "bg-brand-surface-1"
+              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-brand-surface-2"
             }`}
           >
             <h4 className="capitalize">{type}</h4>
@@ -83,11 +83,11 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
               })
             ) : (
               <div className="grid h-full place-items-center">
-                <div className="flex flex-col items-center gap-4 my-5">
+                <div className="my-5 flex flex-col items-center gap-4">
                   <LayerDiagonalIcon height={60} width={60} />
-                  <span>
+                  <span className="text-brand-secondary">
                     No issues found. Use{" "}
-                    <pre className="inline rounded bg-brand-surface-1 px-2 py-1">C</pre> shortcut to
+                    <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
                     create a new issue
                   </span>
                 </div>
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index eedcdd6f3..d65e80c4a 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -69,7 +69,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
         />
         <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
         <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#858e96">
           {value} issues
         </text>
       </g>
@@ -79,7 +79,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
   return (
     <div>
       <h3 className="mb-2 font-semibold">Issues by States</h3>
-      <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4">
+      <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
         <ResponsiveContainer width="100%" height={320}>
           <PieChart>
             <Pie
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 59c9fd55f..6117ec2a1 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-sidebar lg:grid-cols-3">
+  <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="flex">
         <div className="basis-1/2 p-4">
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 5e46cac57..adf893f88 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -21,7 +21,7 @@ import type { NextPage } from "next";
 import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
 
 const WorkspacePage: NextPage = () => {
-   const [month, setMonth] = useState(new Date().getMonth() + 1);
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -42,7 +42,7 @@ const WorkspacePage: NextPage = () => {
       <div className="h-full w-full">
         <div className="flex flex-col gap-8">
           <div
-            className="flex flex-col bg-brand-sidebar justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-brand-muted-1 md:flex-row md:items-center md:py-3"
+            className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3"
             // style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
           >
             <p className="font-semibold">
@@ -55,7 +55,7 @@ const WorkspacePage: NextPage = () => {
               <a
                 href="https://github.com/makeplane/plane"
                 target="_blank"
-                className="rounded-md border-2 border-brand-base font-medium px-3 py-1.5 text-sm duration-300"
+                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