diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx
index 8c2429c0eb..f398383196 100644
--- a/packages/app/src/components/login-modal/index.tsx
+++ b/packages/app/src/components/login-modal/index.tsx
@@ -11,7 +11,7 @@ interface LoginModalProps {
 
 export const LoginModal = ({ open, onClose }: LoginModalProps) => {
   return (
-    <Modal open={open} onClose={onClose}>
+    <Modal open={open} onClose={onClose} data-testid="login-modal">
       <ModalWrapper width={620} height={334}>
         <Header>
           <ModalCloseButton
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx
index c800c31aee..66b093e64c 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx
@@ -1,5 +1,6 @@
 import { useModal } from '@/providers/global-modal-provider';
 import { styled } from '@/styles';
+import { AffineIcon } from '../../icons/icons';
 import {
   WorkspaceItemAvatar,
   LoginItemWrapper,
@@ -9,9 +10,12 @@ import {
 export const LoginItem = () => {
   const { triggerLoginModal } = useModal();
   return (
-    <LoginItemWrapper onClick={() => triggerLoginModal()}>
+    <LoginItemWrapper
+      onClick={() => triggerLoginModal()}
+      data-testid="open-login-modal"
+    >
       <WorkspaceItemAvatar alt="AFFiNE" src={''}>
-        A
+        <AffineIcon />
       </WorkspaceItemAvatar>
       <WorkspaceItemContent>
         <Name title="AFFiNE">AFFiNE</Name>
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
index e03a85ddfd..3c7d6bc3be 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -4,7 +4,7 @@ import { SelectorPopperContent } from './SelectorPopperContent';
 import { useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceType } from '@pathfinder/data-services';
-
+import { AffineIcon } from '../icons/icons';
 export const WorkspaceSelector = () => {
   const [isShow, setIsShow] = useState(false);
   const { currentWorkspace, workspacesMeta, currentWorkspaceId, user } =
@@ -21,7 +21,9 @@ export const WorkspaceSelector = () => {
       onVisibleChange={setIsShow}
     >
       <SelectorWrapper data-testid="current-workspace">
-        <Avatar alt="Affine" src={currentWorkspace?.meta.avatar || ''} />
+        <Avatar alt="Affine" src={currentWorkspace?.meta.avatar || ''}>
+          <AffineIcon />
+        </Avatar>
         <WorkspaceName>
           {currentWorkspace?.meta.name ||
             (workspaceMeta?.type === WorkspaceType.Private && user
diff --git a/packages/app/src/components/workspace-slider-bar/icons/icons.tsx b/packages/app/src/components/workspace-slider-bar/icons/icons.tsx
new file mode 100644
index 0000000000..2fee60b0f5
--- /dev/null
+++ b/packages/app/src/components/workspace-slider-bar/icons/icons.tsx
@@ -0,0 +1,27 @@
+export const AffineIcon = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="39"
+        height="39"
+        rx="19.5"
+        stroke="#6880FF"
+        fill="#FFF"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.6303 8.79688L11.2559 29.8393H15.5752L20.2661 15.2858L24.959 29.8393H29.2637L21.8881 8.79688H18.6303Z"
+        fill="#6880FF"
+      />
+    </svg>
+  );
+};
diff --git a/tests/contact-us.spec.ts b/tests/contact-us.spec.ts
index c6a05382db..bda0d52c30 100644
--- a/tests/contact-us.spec.ts
+++ b/tests/contact-us.spec.ts
@@ -5,18 +5,10 @@ loadPage();
 
 test.describe('Open contact us', () => {
   test('Click about us', async ({ page }) => {
-    page.waitForTimeout(1000);
     const currentWorkspace = page.getByTestId('current-workspace');
     await currentWorkspace.click();
-
-    await page
-      .getByRole('tooltip', {
-        name: 'A AFFiNE Log in to sync with affine About AFFiNE',
-      })
-      .locator('div')
-      .filter({ hasText: 'About AFFiNE' })
-      .nth(2)
-      .click();
+    page.waitForTimeout(1000);
+    await page.getByText('About AFFiNE').click();
 
     const contactUsModal = page.locator(
       '[data-testid=contact-us-modal-content]'
@@ -24,7 +16,6 @@ test.describe('Open contact us', () => {
     await expect(contactUsModal).toContainText('AFFiNE Community');
   });
   test('Click right-bottom corner contact icon', async ({ page }) => {
-    page.waitForTimeout(1000);
     const faqIcon = page.locator('[data-testid=faq-icon]');
     const box = await faqIcon.boundingBox();
     await expect(box?.x).not.toBeUndefined();
diff --git a/tests/login.spec.ts b/tests/login.spec.ts
new file mode 100644
index 0000000000..c1c41abae4
--- /dev/null
+++ b/tests/login.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Login Flow', () => {
+  test('Open Login Modal', async ({ page }) => {
+    await page.getByTestId('current-workspace').click();
+    await page.waitForTimeout(800);
+    // why don't we use waitForSelector, It seems that waitForSelector not stable?
+    await page.getByTestId('open-login-modal').click();
+    await page.waitForTimeout(800);
+    await page
+      .getByRole('heading', { name: 'Currently not logged in' })
+      .click();
+  });
+});