diff --git a/apps/space/core/components/account/auth-forms/auth-header.tsx b/apps/space/core/components/account/auth-forms/auth-header.tsx
index 95a539ddfc2..f75dccecf5f 100644
--- a/apps/space/core/components/account/auth-forms/auth-header.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-header.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 // helpers
 import { EAuthModes } from "@/types/auth";
 
 type TAuthHeader = {
   authMode: EAuthModes;
-  children: ReactNode;
 };
 
 type TAuthHeaderContent = {
@@ -30,7 +29,7 @@ const Titles: TAuthHeaderDetails = {
 };
 
 export const AuthHeader: FC<TAuthHeader> = (props) => {
-  const { authMode, children } = props;
+  const { authMode } = props;
 
   const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
     if (mode) {
@@ -38,7 +37,7 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
     }
 
     return {
-      header: "Comment or react to work itemss",
+      header: "Comment or react to work items",
       subHeader: "Use plane to add your valuable inputs to features.",
     };
   };
@@ -47,11 +46,10 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
 
   return (
     <>
-      <div className="space-y-1 text-center">
-        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-onboarding-text-100">{header}</h3>
-        <p className="text-xs sm:text-sm md:text-base font-medium text-onboarding-text-400">{subHeader}</p>
+      <div className="flex flex-col gap-1">
+        <span className="text-2xl font-semibold text-custom-text-100 leading-7">{header}</span>
+        <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
       </div>
-      {children}
     </>
   );
 };
diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/core/components/account/auth-forms/auth-root.tsx
index 2ce944a2589..653c97cc73a 100644
--- a/apps/space/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-root.tsx
@@ -2,10 +2,14 @@
 
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 // plane imports
+import { API_BASE_URL } from "@plane/constants";
 import { SitesAuthService } from "@plane/services";
 import { IEmailCheckData } from "@plane/types";
+import { OAuthOptions } from "@plane/ui";
 // components
 import {
   AuthHeader,
@@ -13,7 +17,6 @@ import {
   AuthEmailForm,
   AuthUniqueCodeForm,
   AuthPasswordForm,
-  OAuthOptions,
   TermsAndConditions,
 } from "@/components/account";
 // helpers
@@ -27,6 +30,11 @@ import {
 import { useInstance } from "@/hooks/store";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
+// assets
+import GithubLightLogo from "/public/logos/github-black.png";
+import GithubDarkLogo from "/public/logos/github-dark.svg";
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+import GoogleLogo from "/public/logos/google-logo.svg";
 
 const authService = new SitesAuthService();
 
@@ -36,6 +44,7 @@ export const AuthRoot: FC = observer(() => {
   const emailParam = searchParams.get("email") || undefined;
   const error_code = searchParams.get("error_code") || undefined;
   const nextPath = searchParams.get("next_path") || undefined;
+  const next_path = searchParams.get("next_path");
   // states
   const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
@@ -43,6 +52,7 @@ export const AuthRoot: FC = observer(() => {
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
   // hooks
+  const { resolvedTheme } = useTheme();
   const { config } = useInstance();
 
   useEffect(() => {
@@ -146,12 +156,54 @@ export const AuthRoot: FC = observer(() => {
       });
   };
 
+  const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+
+  const OAuthConfig = [
+    {
+      id: "google",
+      text: `${content} with Google`,
+      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${content} with GitHub`,
+      icon: (
+        <Image
+          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${content} with GitLab`,
+      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+  ];
+
   return (
-    <div className="relative flex flex-col space-y-6">
-      <AuthHeader authMode={authMode}>
+    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
         {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
           <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
         )}
+        <AuthHeader authMode={authMode} />
+        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
+
         {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
         {authStep === EAuthSteps.UNIQUE_CODE && (
           <AuthUniqueCodeForm
@@ -182,9 +234,8 @@ export const AuthRoot: FC = observer(() => {
             }}
           />
         )}
-        {isOAuthEnabled && <OAuthOptions />}
         <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
-      </AuthHeader>
+      </div>
     </div>
   );
 });
diff --git a/apps/web/ce/components/global/product-updates-header.tsx b/apps/web/ce/components/global/product-updates-header.tsx
index 776d9667dd7..418a940a7e3 100644
--- a/apps/web/ce/components/global/product-updates-header.tsx
+++ b/apps/web/ce/components/global/product-updates-header.tsx
@@ -1,10 +1,8 @@
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useTranslation } from "@plane/i18n";
+import { PlaneLogo } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
-// assets
-import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 // package.json
 import packageJson from "package.json";
 
@@ -23,7 +21,7 @@ export const ProductUpdatesHeader = observer(() => {
         </div>
       </div>
       <div className="flex flex-shrink-0 items-center gap-8">
-        <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
+        <PlaneLogo className="h-6 w-auto text-custom-text-100" />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 6bc52e2bd2c..7e361b2515f 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -1,12 +1,9 @@
-import Image from "next/image";
 import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { getButtonStyling } from "@plane/ui";
+import { getButtonStyling, PlaneLogo } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
-// assets
-import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 
 export const ProductUpdatesFooter = () => {
   const { t } = useTranslation();
@@ -60,7 +57,7 @@ export const ProductUpdatesFooter = () => {
           "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
         )}
       >
-        <Image src={PlaneLogo} alt="Plane" width={12} height={12} />
+        <PlaneLogo className="h-4 w-auto text-custom-text-100" />
         {t("powered_by_plane_pages")}
       </a>
     </div>
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index 577f5acd0b1..da3dbe3d13f 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -167,7 +167,7 @@ export const WorkspaceDetails: FC = observer(() => {
                   />
                 </div>
               ) : (
-                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-[#026292] p-4 uppercase text-white">
                   {currentWorkspace?.name?.charAt(0) ?? "N"}
                 </div>
               )}
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
index 97d22630736..f15c0b3e493 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -49,7 +49,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
           <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
             <span
               className={`relative flex h-8 w-8 flex-shrink-0 items-center  justify-center p-2 text-base uppercase font-medium border-custom-border-200 ${
-                !workspace?.logo_url && "rounded-md bg-custom-primary-500 text-white"
+                !workspace?.logo_url && "rounded-md bg-[#026292] text-white"
               }`}
             >
               {workspace?.logo_url && workspace.logo_url !== "" ? (
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index c711870d4d7..42d7d465485 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -11,7 +11,7 @@ import useSWRImmutable from "swr/immutable";
 // ui
 import { LogOut } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button, getButtonStyling, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
+import { Button, getButtonStyling, PlaneLogo, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
 import { LogoSpinner } from "@/components/common";
@@ -150,7 +150,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
         <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
           <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
             <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
-              <Image src={planeLogo} height={26} className="h-[26px]" alt="Plane logo" />
+              <PlaneLogo className="h-9 w-auto text-custom-text-100" />
             </div>
             <div className="relative flex items-center gap-2">
               <div className="text-sm font-medium">{currentUser?.email}</div>
diff --git a/apps/web/public/empty-state/pages/navigation-pane/assets-dark.webp b/apps/web/public/empty-state/pages/navigation-pane/assets-dark.webp
index e454d6dc17d..c6bc05e2371 100644
Binary files a/apps/web/public/empty-state/pages/navigation-pane/assets-dark.webp and b/apps/web/public/empty-state/pages/navigation-pane/assets-dark.webp differ
diff --git a/apps/web/public/empty-state/pages/navigation-pane/assets-light.webp b/apps/web/public/empty-state/pages/navigation-pane/assets-light.webp
index c3c4585d061..1e3982924cb 100644
Binary files a/apps/web/public/empty-state/pages/navigation-pane/assets-light.webp and b/apps/web/public/empty-state/pages/navigation-pane/assets-light.webp differ
diff --git a/apps/web/public/empty-state/pages/navigation-pane/outline-dark.webp b/apps/web/public/empty-state/pages/navigation-pane/outline-dark.webp
index dcd26c3950b..fca82f16b31 100644
Binary files a/apps/web/public/empty-state/pages/navigation-pane/outline-dark.webp and b/apps/web/public/empty-state/pages/navigation-pane/outline-dark.webp differ
diff --git a/apps/web/public/empty-state/pages/navigation-pane/outline-light.webp b/apps/web/public/empty-state/pages/navigation-pane/outline-light.webp
index e92cc6ae7bb..6870e6ccfe4 100644
Binary files a/apps/web/public/empty-state/pages/navigation-pane/outline-light.webp and b/apps/web/public/empty-state/pages/navigation-pane/outline-light.webp differ
diff --git a/apps/web/public/empty-state/project/name-filter.svg b/apps/web/public/empty-state/project/name-filter.svg
index a1e89c9a045..ec632283702 100644
--- a/apps/web/public/empty-state/project/name-filter.svg
+++ b/apps/web/public/empty-state/project/name-filter.svg
@@ -1,39 +1,39 @@
-<svg width="206" height="217" viewBox="0 0 206 217" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="103" cy="102.5" r="102.5" fill="url(#paint0_linear_8013_110289)"/>
-<path d="M153 64.75H53C46.0964 64.75 40.5 70.3464 40.5 77.25V139.75C40.5 146.654 46.0964 152.25 53 152.25H153C159.904 152.25 165.5 146.654 165.5 139.75V77.25C165.5 70.3464 159.904 64.75 153 64.75Z" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M128 152.25V52.25C128 48.9348 126.683 45.7554 124.339 43.4112C121.995 41.067 118.815 39.75 115.5 39.75H90.5C87.1848 39.75 84.0054 41.067 81.6612 43.4112C79.317 45.7554 78 48.9348 78 52.25V152.25" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
-<g filter="url(#filter0_ddd_8013_110289)">
-<circle cx="103.754" cy="173.828" r="31" fill="#3A5BC7"/>
-<path d="M102.074 185.584C109.493 185.584 115.508 179.57 115.508 172.151C115.508 164.732 109.493 158.717 102.074 158.717C94.6553 158.717 88.641 164.732 88.641 172.151C88.641 179.57 94.6553 185.584 102.074 185.584Z" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M118.866 188.942L111.646 181.722" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="205" height="217" viewBox="0 0 205 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_854_167632)"/>
+<path d="M152.5 64.75H52.5C45.5964 64.75 40 70.3464 40 77.25V139.75C40 146.654 45.5964 152.25 52.5 152.25H152.5C159.404 152.25 165 146.654 165 139.75V77.25C165 70.3464 159.404 64.75 152.5 64.75Z" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M127.5 152.25V52.25C127.5 48.9348 126.183 45.7554 123.839 43.4112C121.495 41.067 118.315 39.75 115 39.75H90C86.6848 39.75 83.5054 41.067 81.1612 43.4112C78.817 45.7554 77.5 48.9348 77.5 52.25V152.25" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_854_167632)">
+<circle cx="103.254" cy="173.828" r="31" fill="#006399"/>
+<path d="M101.575 185.582C108.994 185.582 115.008 179.568 115.008 172.149C115.008 164.73 108.994 158.715 101.575 158.715C94.1555 158.715 88.1412 164.73 88.1412 172.149C88.1412 179.568 94.1555 185.582 101.575 185.582Z" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M118.366 188.94L111.146 181.72" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
-<filter id="filter0_ddd_8013_110289" x="64.7539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ddd_854_167632" x="64.2539" y="137.828" width="78" height="79" 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"/>
-<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8013_110289"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_854_167632"/>
 <feOffset dy="2"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8013_110289"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_854_167632"/>
 <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"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8013_110289"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_854_167632"/>
 <feOffset dy="3"/>
 <feGaussianBlur stdDeviation="6"/>
 <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.055 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_8013_110289" result="effect2_dropShadow_8013_110289"/>
+<feBlend mode="normal" in2="effect1_dropShadow_854_167632" result="effect2_dropShadow_854_167632"/>
 <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"/>
-<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8013_110289"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_854_167632"/>
 <feOffset dy="4"/>
 <feGaussianBlur stdDeviation="8"/>
 <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.078 0"/>
-<feBlend mode="normal" in2="effect2_dropShadow_8013_110289" result="effect3_dropShadow_8013_110289"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8013_110289" result="shape"/>
+<feBlend mode="normal" in2="effect2_dropShadow_854_167632" result="effect3_dropShadow_854_167632"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_854_167632" result="shape"/>
 </filter>
-<linearGradient id="paint0_linear_8013_110289" x1="103" y1="0" x2="103" y2="207.52" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_854_167632" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
 <stop stop-color="#F7F7F7"/>
 <stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
 </linearGradient>