diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts
index b98a8bfaa..31906e1b7 100644
--- a/packages/app/src/components/loading/styled.ts
+++ b/packages/app/src/components/loading/styled.ts
@@ -1,19 +1,22 @@
 import { styled } from '@/styles';
 
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-export const StyledLoadingWrapper = styled.div<{ size?: number }>(
-  ({ size = 40 }) => {
-    return {
-      width: size * 4,
-      height: size * 4,
-      position: 'relative',
-    };
-  }
-);
+export const StyledLoadingWrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return !['size'].includes(prop);
+  },
+})<{ size?: number }>(({ size = 40 }) => {
+  return {
+    width: size * 4,
+    height: size * 4,
+    position: 'relative',
+  };
+});
 export const StyledLoading = styled.div`
   position: absolute;
   left: 25%;
-  top: 25%;
+  top: 50%;
+  transform: rotateX(55deg) rotateZ(-45deg);
   @keyframes slide {
     0% {
       transform: translate(var(--sx), var(--sy));
diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index 2501f13ba..d31767b81 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -51,7 +51,7 @@ const FavoriteTag = ({
         style={{
           color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
         }}
-        className="favorite-button"
+        className={favorite ? '' : 'favorite-button'}
       >
         {favorite ? (
           <FavouritedIcon data-testid="favourited-icon" />
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 3621d22e4..08372b52b 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -55,7 +55,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                       router.replace(`/workspace/${item.id}`);
                       onClose();
                     }}
-                    active={item.id === currentWorkspace.room}
+                    active={item.id === currentWorkspace?.room}
                     key={index}
                   >
                     <span style={{ width: '100px' }}>
diff --git a/packages/app/src/hooks/use-ensure-workspace.ts b/packages/app/src/hooks/use-ensure-workspace.ts
index 93140dd92..ce1fed074 100644
--- a/packages/app/src/hooks/use-ensure-workspace.ts
+++ b/packages/app/src/hooks/use-ensure-workspace.ts
@@ -1,8 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-const defaultOutLineWorkspaceId = 'affine';
-// 'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {
@@ -35,9 +33,8 @@ export const useEnsureWorkspace = () => {
     //   return;
     // }
 
-    const workspaceId = user
-      ? (router.query.workspaceId as string) || workspaceList[0]?.id
-      : (router.query.workspaceId as string) || defaultOutLineWorkspaceId;
+    const workspaceId =
+      (router.query.workspaceId as string) || workspaceList[0]?.id;
 
     loadWorkspace(workspaceId).finally(() => {
       console.log('workspaceId: ', workspaceId);
diff --git a/packages/app/src/providers/app-state-provider/Provider.tsx b/packages/app/src/providers/app-state-provider/Provider.tsx
index 40a3f8775..e0a833d81 100644
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@@ -22,35 +22,29 @@ export const AppStateProvider = ({
   const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
 
   useEffect(() => {
-    const init = async () => {
+    const initState = async () => {
       const dataCenter = await getDataCenter();
 
+      // Ensure datacenter has at least one workspace
       if (dataCenter.workspaces.length === 0) {
         await createDefaultWorkspace(dataCenter);
       }
 
-      const currentWorkspace = await dataCenter.loadWorkspace(
-        dataCenter.workspaces[0].id
-      );
-      const currentMetaWorkSpace = dataCenter.workspaces.find(item => {
-        return item.id === currentWorkspace.room;
-      });
-
       setAppState({
         dataCenter,
         user: (await dataCenter.getUserInfo()) || null,
         workspaceList: dataCenter.workspaces,
-        currentWorkspaceId: dataCenter.workspaces[0].id,
-        currentWorkspace,
-        pageList: currentWorkspace.meta.pageMetas as PageMeta[],
+        currentWorkspaceId: '',
+        currentWorkspace: null,
+        pageList: [],
         currentPage: null,
         editor: null,
         synced: true,
-        currentMetaWorkSpace: currentMetaWorkSpace ?? null,
+        currentMetaWorkSpace: null,
       });
     };
 
-    init();
+    initState();
   }, []);
 
   useEffect(() => {
@@ -95,6 +89,8 @@ export const AppStateProvider = ({
 
   const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
   loadWorkspace.current = async (workspaceId: string) => {
+    console.log('loadWorkspace');
+
     const { dataCenter, workspaceList, currentWorkspaceId, currentWorkspace } =
       appState;
     if (!workspaceList.find(v => v.id === workspaceId)) {
@@ -114,7 +110,7 @@ export const AppStateProvider = ({
       currentWorkspace: workspace,
       currentWorkspaceId: workspaceId,
       currentMetaWorkSpace: currentMetaWorkSpace ?? null,
-      pageList: currentWorkspace.meta.pageMetas as PageMeta[],
+      pageList: currentWorkspace?.meta.pageMetas as PageMeta[],
       currentPage: null,
       editor: null,
     });
diff --git a/packages/app/src/providers/app-state-provider/interface.ts b/packages/app/src/providers/app-state-provider/interface.ts
index 4e5ec6a9b..ca178781f 100644
--- a/packages/app/src/providers/app-state-provider/interface.ts
+++ b/packages/app/src/providers/app-state-provider/interface.ts
@@ -19,7 +19,7 @@ export type AppStateValue = {
   dataCenter: DataCenter;
   user: User | null;
   workspaceList: WorkspaceInfo[];
-  currentWorkspace: StoreWorkspace;
+  currentWorkspace: StoreWorkspace | null;
   currentMetaWorkSpace: WorkspaceInfo | null;
   currentWorkspaceId: string;
   pageList: PageMeta[];
diff --git a/packages/app/src/ui/table/styles.ts b/packages/app/src/ui/table/styles.ts
index 009888e8b..ab1a2629d 100644
--- a/packages/app/src/ui/table/styles.ts
+++ b/packages/app/src/ui/table/styles.ts
@@ -9,7 +9,7 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
       tableLayout,
       width: '100%',
       borderCollapse: 'separate',
-      borderSpacing: '0 25px',
+      borderSpacing: '0',
     };
   }
 );
@@ -52,7 +52,6 @@ export const StyledTableHead = styled.thead(() => {
 
 export const StyledTableRow = styled.tr(({ theme }) => {
   return {
-    marginBottom: '25px',
     td: {
       transition: 'background .15s',
     },