diff --git a/frontend/appflowy_flutter/lib/core/frameless_window.dart b/frontend/appflowy_flutter/lib/core/frameless_window.dart
index fcd955fc93..c322da97aa 100644
--- a/frontend/appflowy_flutter/lib/core/frameless_window.dart
+++ b/frontend/appflowy_flutter/lib/core/frameless_window.dart
@@ -127,7 +127,7 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
         onPressed: () => context
             .read<HomeSettingBloc>()
             .add(const HomeSettingEvent.collapseMenu()),
-        iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+        iconPadding: const EdgeInsets.all(4.0),
         icon: context.read<HomeSettingBloc>().state.isMenuCollapsed
             ? const FlowySvg(FlowySvgs.show_menu_s)
             : const FlowySvg(FlowySvgs.hide_menu_m),
diff --git a/frontend/appflowy_flutter/lib/plugins/database/board/board.dart b/frontend/appflowy_flutter/lib/plugins/database/board/board.dart
index 86851c4bbb..f8fb18a561 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/board/board.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/board/board.dart
@@ -19,7 +19,7 @@ class BoardPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.board_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.board_s;
+  FlowySvgData get icon => FlowySvgs.icon_board_s;
 
   @override
   PluginType get pluginType => PluginType.board;
diff --git a/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart b/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart
index 861d9f4303..54667d5f69 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart
@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class CalendarPluginBuilder extends PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class CalendarPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.calendar_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.date_s;
+  FlowySvgData get icon => FlowySvgs.icon_calendar_s;
 
   @override
   PluginType get pluginType => PluginType.calendar;
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart
index 1f8816d92b..b43c425a9d 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart
@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class GridPluginBuilder implements PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class GridPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.grid_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.grid_s;
+  FlowySvgData get icon => FlowySvgs.icon_grid_s;
 
   @override
   PluginType get pluginType => PluginType.grid;
diff --git a/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart b/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart
index cd709e2154..e415aaa12e 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart
@@ -44,7 +44,7 @@ class DatabaseDocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.databaseDocument;
diff --git a/frontend/appflowy_flutter/lib/plugins/document/document.dart b/frontend/appflowy_flutter/lib/plugins/document/document.dart
index cb48cd1bba..b13ce1221c 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/document.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/document.dart
@@ -37,7 +37,7 @@ class DocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.document;
@@ -148,7 +148,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
               ? [
                   DocumentCollaborators(
                     key: ValueKey('collaborators_${view.id}'),
-                    width: 150,
+                    width: 120,
                     height: 32,
                     view: view,
                   ),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
index aac0713a7d..60211b9024 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
@@ -1,14 +1,17 @@
 import 'dart:ui';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
 
 const String kLocalImagesKey = 'local_images';
 
 List<String> get builtInAssetImages => [
-      "assets/images/app_flowy_abstract_cover_1.jpg",
-      "assets/images/app_flowy_abstract_cover_2.jpg",
+      'assets/images/built_in_cover_images/m_cover_image_1.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_2.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_3.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_4.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_5.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_6.jpg',
     ];
 
 class ColorOption {
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
index 7e576363cd..e8d04d7161 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
@@ -155,7 +155,7 @@ class _DesktopCoverState extends State<DesktopCover> {
         );
       case CoverType.asset:
         return Image.asset(
-          widget.coverDetails!,
+          PageStyleCoverImageType.builtInImagePath(detail),
           fit: BoxFit.cover,
         );
       case CoverType.color:
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
index 3a22909744..3ac9067b89 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
@@ -28,8 +28,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:string_validator/string_validator.dart';
 
-import 'cover_editor.dart';
-
 const double kCoverHeight = 250.0;
 const double kIconHeight = 60.0;
 const double kToolbarHeight = 40.0; // with padding to the top
@@ -296,7 +294,7 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
           leftIconSize: const Size.square(18),
           onTap: () => widget.onIconOrCoverChanged(
             cover: PlatformExtension.isDesktopOrWeb
-                ? (CoverType.asset, builtInAssetImages.first)
+                ? (CoverType.asset, '1')
                 : (CoverType.color, '0xffe8e0ff'),
           ),
           useIntrinsicWidth: true,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart
index d97e6a5bc6..664e2143b6 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart
@@ -191,7 +191,13 @@ class EditorMigration {
     } else {
       switch (coverType) {
         case CoverType.asset:
-          // The new version does not support the asset cover.
+          extra = {
+            ViewExtKeys.coverKey: {
+              ViewExtKeys.coverTypeKey:
+                  PageStyleCoverImageType.builtInImage.toString(),
+              ViewExtKeys.coverValueKey: coverDetails,
+            },
+          };
           break;
         case CoverType.color:
           extra = {
diff --git a/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart b/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
index 4835c795ba..ca32823d65 100644
--- a/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
+++ b/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
@@ -41,10 +41,10 @@ class ViewExtKeys {
 extension ViewExtension on ViewPB {
   Widget defaultIcon() => FlowySvg(
         switch (layout) {
-          ViewLayoutPB.Board => FlowySvgs.board_s,
-          ViewLayoutPB.Calendar => FlowySvgs.calendar_s,
-          ViewLayoutPB.Grid => FlowySvgs.grid_s,
-          ViewLayoutPB.Document => FlowySvgs.document_s,
+          ViewLayoutPB.Board => FlowySvgs.icon_board_s,
+          ViewLayoutPB.Calendar => FlowySvgs.icon_calendar_s,
+          ViewLayoutPB.Grid => FlowySvgs.icon_grid_s,
+          ViewLayoutPB.Document => FlowySvgs.icon_document_s,
           ViewLayoutPB.Chat => FlowySvgs.chat_ai_page_s,
           _ => FlowySvgs.document_s,
         },
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart
index 1e6279f304..a3cb50fd06 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart
@@ -134,15 +134,22 @@ class FavoriteHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
-      onTap: onPressed,
-      margin: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 7.0),
-      leftIcon: const FlowySvg(
-        FlowySvgs.favorite_header_icon_s,
-        blendMode: null,
+    return SizedBox(
+      height: HomeSizes.newPageSectionHeight,
+      child: FlowyButton(
+        onTap: onPressed,
+        margin: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 3.0),
+        leftIcon: const FlowySvg(
+          FlowySvgs.favorite_header_icon_m,
+          blendMode: null,
+        ),
+        leftIconSize: const Size.square(24.0),
+        iconPadding: 8.0,
+        text: FlowyText.regular(
+          LocaleKeys.sideBar_favorites.tr(),
+          lineHeight: 1.15,
+        ),
       ),
-      iconPadding: 10.0,
-      text: FlowyText.regular(LocaleKeys.sideBar_favorites.tr()),
     );
   }
 }
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart
index c5042c4de4..d73060d0b3 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
@@ -11,6 +12,7 @@ class FolderHeader extends StatefulWidget {
     required this.addButtonTooltip,
     required this.onPressed,
     required this.onAdded,
+    required this.isExpanded,
   });
 
   final String title;
@@ -18,6 +20,7 @@ class FolderHeader extends StatefulWidget {
   final String addButtonTooltip;
   final VoidCallback onPressed;
   final VoidCallback onAdded;
+  final bool isExpanded;
 
   @override
   State<FolderHeader> createState() => _FolderHeaderState();
@@ -34,24 +37,42 @@ class _FolderHeaderState extends State<FolderHeader> {
 
   @override
   Widget build(BuildContext context) {
-    return MouseRegion(
-      onEnter: (_) => isHovered.value = true,
-      onExit: (_) => isHovered.value = false,
-      child: FlowyButton(
-        onTap: widget.onPressed,
-        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-        rightIcon: ValueListenableBuilder(
-          valueListenable: isHovered,
-          builder: (context, onHover, child) =>
-              Opacity(opacity: onHover ? 1 : 0, child: child),
-          child: FlowyIconButton(
-            tooltipText: widget.addButtonTooltip,
-            icon: const FlowySvg(FlowySvgs.view_item_add_s),
-            onPressed: widget.onAdded,
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: MouseRegion(
+        onEnter: (_) => isHovered.value = true,
+        onExit: (_) => isHovered.value = false,
+        child: FlowyButton(
+          onTap: widget.onPressed,
+          margin: const EdgeInsets.only(left: 6.0, right: 4.0),
+          rightIcon: ValueListenableBuilder(
+            valueListenable: isHovered,
+            builder: (context, onHover, child) =>
+                Opacity(opacity: onHover ? 1 : 0, child: child),
+            child: FlowyIconButton(
+              width: 24,
+              iconPadding: const EdgeInsets.all(4.0),
+              tooltipText: widget.addButtonTooltip,
+              icon: const FlowySvg(FlowySvgs.view_item_add_s),
+              onPressed: widget.onAdded,
+            ),
+          ),
+          iconPadding: 10.0,
+          text: Row(
+            children: [
+              FlowyText(
+                widget.title,
+                lineHeight: 1.15,
+              ),
+              const HSpace(4.0),
+              FlowySvg(
+                widget.isExpanded
+                    ? FlowySvgs.workspace_drop_down_menu_show_s
+                    : FlowySvgs.workspace_drop_down_menu_hide_s,
+              ),
+            ],
           ),
         ),
-        iconPadding: 10.0,
-        text: FlowyText(widget.title),
       ),
     );
   }
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart
index bd83e06934..c957a664c2 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart
@@ -76,6 +76,7 @@ class _SectionFolderState extends State<SectionFolder> {
   Widget _buildHeader(BuildContext context) {
     return FolderHeader(
       title: widget.title,
+      isExpanded: context.watch<FolderBloc>().state.isExpanded,
       expandButtonTooltip: widget.expandButtonTooltip,
       addButtonTooltip: widget.addButtonTooltip,
       onPressed: () =>
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart
index 6c16609a33..8af1c0eb9e 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart
@@ -1,8 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class SidebarFooter extends StatelessWidget {
@@ -31,12 +35,20 @@ class SidebarTrashButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ValueListenableBuilder(
-      valueListenable: getIt<MenuSharedState>().notifier,
-      builder: (context, value, child) {
-        return MouseRegion(
-          cursor: SystemMouseCursors.click,
-          child: GestureDetector(
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: ValueListenableBuilder(
+        valueListenable: getIt<MenuSharedState>().notifier,
+        builder: (context, value, child) {
+          return FlowyButton(
+            leftIcon: const FlowySvg(FlowySvgs.sidebar_footer_trash_m),
+            leftIconSize: const Size.square(24.0),
+            iconPadding: 8.0,
+            margin: const EdgeInsets.all(4.0),
+            text: FlowyText.regular(
+              LocaleKeys.trash_text.tr(),
+              lineHeight: 1.15,
+            ),
             onTap: () {
               getIt<MenuSharedState>().latestOpenView = null;
               getIt<TabsBloc>().add(
@@ -45,10 +57,9 @@ class SidebarTrashButton extends StatelessWidget {
                 ),
               );
             },
-            child: const FlowySvg(FlowySvgs.sidebar_footer_trash_s),
-          ),
-        );
-      },
+          );
+        },
+      ),
     );
   }
 }
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
index c7dc54126e..240a660966 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
@@ -23,8 +23,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 class SidebarTopMenu extends StatelessWidget {
   const SidebarTopMenu({
     super.key,
+    required this.isSidebarOnHover,
   });
 
+  final ValueNotifier<bool> isSidebarOnHover;
+
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
@@ -80,17 +83,26 @@ class SidebarTopMenu extends StatelessWidget {
       ],
     );
 
-    return Padding(
-      padding: const EdgeInsets.only(top: 12.0),
-      child: FlowyTooltip(
-        richMessage: textSpan,
-        child: FlowyIconButton(
-          width: 24,
-          onPressed: () => context
-              .read<HomeSettingBloc>()
-              .add(const HomeSettingEvent.collapseMenu()),
-          iconPadding: const EdgeInsets.all(2),
-          icon: const FlowySvg(FlowySvgs.hide_menu_s),
+    return ValueListenableBuilder(
+      valueListenable: isSidebarOnHover,
+      builder: (_, value, ___) => Opacity(
+        opacity: value ? 1 : 0,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 12.0, right: 4.0),
+          child: FlowyTooltip(
+            richMessage: textSpan,
+            child: Listener(
+              onPointerDown: (_) => context
+                  .read<HomeSettingBloc>()
+                  .add(const HomeSettingEvent.collapseMenu()),
+              child: FlowyIconButton(
+                width: 24,
+                onPressed: () {},
+                iconPadding: const EdgeInsets.all(4),
+                icon: const FlowySvg(FlowySvgs.hide_menu_s),
+              ),
+            ),
+          ),
         ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart
index 0e49c2acd6..c27f259b68 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart
@@ -25,22 +25,21 @@ class SidebarFolder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    const sectionPadding = 16.0;
     return ValueListenableBuilder(
       valueListenable: getIt<MenuSharedState>().notifier,
       builder: (context, value, child) {
         return Column(
           children: [
+            const VSpace(4.0),
             // favorite
             BlocBuilder<FavoriteBloc, FavoriteState>(
               builder: (context, state) {
                 if (state.views.isEmpty) {
                   return const SizedBox.shrink();
                 }
-                return Padding(
-                  padding: const EdgeInsets.only(top: 16.0, bottom: 10),
-                  child: FavoriteFolder(
-                    views: state.views.map((e) => e.item).toList(),
-                  ),
+                return FavoriteFolder(
+                  views: state.views.map((e) => e.item).toList(),
                 );
               },
             ),
@@ -56,18 +55,18 @@ class SidebarFolder extends StatelessWidget {
                   children: isCollaborativeWorkspace
                       ? [
                           // public
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PublicSectionFolder(views: state.section.publicViews),
 
                           // private
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PrivateSectionFolder(
                             views: state.section.privateViews,
                           ),
                         ]
                       : [
                           // personal
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PersonalSectionFolder(
                             views: state.section.publicViews,
                           ),
@@ -75,6 +74,7 @@ class SidebarFolder extends StatelessWidget {
                 );
               },
             ),
+            const VSpace(200),
           ],
         );
       },
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart
index f58a1d43c9..b0b7b17483 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart
@@ -18,20 +18,20 @@ class SidebarNewPageButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 12),
+      padding: const EdgeInsets.symmetric(horizontal: 8),
       height: HomeSizes.newPageSectionHeight,
       child: FlowyButton(
         onTap: () async => _createNewPage(context),
         leftIcon: const FlowySvg(
-          FlowySvgs.new_app_s,
+          FlowySvgs.new_app_m,
           blendMode: null,
         ),
-        iconPadding: 10.0,
-        text: SizedBox(
-          height: 18.0,
-          child: FlowyText.regular(
-            LocaleKeys.newPageText.tr(),
-          ),
+        leftIconSize: const Size.square(24.0),
+        margin: const EdgeInsets.only(left: 4.0),
+        iconPadding: 8.0,
+        text: FlowyText.regular(
+          LocaleKeys.newPageText.tr(),
+          lineHeight: 1.15,
         ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart
index 20c2338ebc..3e3610a653 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart
@@ -1,12 +1,9 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/af_focus_manager.dart';
-import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/hotkeys.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:appflowy_backend/log.dart';
@@ -16,6 +13,7 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
 
@@ -51,13 +49,15 @@ class UserSettingButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox.square(
-      dimension: HomeSizes.workspaceSectionHeight,
+      dimension: 24.0,
       child: FlowyTooltip(
         message: LocaleKeys.settings_menu_open.tr(),
         child: FlowyButton(
           onTap: () => showSettingsDialog(context, userProfile),
+          margin: EdgeInsets.zero,
           text: const FlowySvg(
             FlowySvgs.settings_s,
+            opacity: 0.7,
           ),
         ),
       ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
index 31cdf73685..c7d8e3fbc2 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
@@ -189,7 +189,8 @@ class _Sidebar extends StatefulWidget {
 class _SidebarState extends State<_Sidebar> {
   final _scrollController = ScrollController();
   Timer? _scrollDebounce;
-  bool isScrolling = false;
+  bool _isScrolling = false;
+  final _isHovered = ValueNotifier(false);
 
   @override
   void initState() {
@@ -202,79 +203,101 @@ class _SidebarState extends State<_Sidebar> {
     _scrollDebounce?.cancel();
     _scrollController.removeListener(_onScrollChanged);
     _scrollController.dispose();
+    _isHovered.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 12);
+    const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 8);
     final userState = context.read<UserWorkspaceBloc>().state;
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceContainerHighest,
-        border: Border(
-          right: BorderSide(color: Theme.of(context).dividerColor),
-        ),
-      ),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          // top menu
-          const Padding(padding: menuHorizontalInset, child: SidebarTopMenu()),
-          // user or workspace, setting
-          Container(
-            height: HomeSizes.workspaceSectionHeight,
-            padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
-            child:
-                // if the workspaces are empty, show the user profile instead
-                userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty
-                    ? SidebarWorkspace(userProfile: widget.userProfile)
-                    : SidebarUser(userProfile: widget.userProfile),
+    return MouseRegion(
+      onEnter: (_) => _isHovered.value = true,
+      onExit: (_) => _isHovered.value = false,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          border: Border(
+            right: BorderSide(color: Theme.of(context).dividerColor),
           ),
-          if (FeatureFlag.search.isOn) ...[
-            const VSpace(6),
-            Container(
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // top menu
+            Padding(
               padding: menuHorizontalInset,
-              height: HomeSizes.searchSectionHeight,
-              child: const _SidebarSearchButton(),
+              child: SidebarTopMenu(
+                isSidebarOnHover: _isHovered,
+              ),
             ),
-          ],
-          // new page button
-          const SidebarNewPageButton(),
-          // scrollable document list
-          Expanded(
-            child: Padding(
+            // user or workspace, setting
+            Container(
+              height: HomeSizes.workspaceSectionHeight,
               padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
-              child: SingleChildScrollView(
-                padding: const EdgeInsets.only(right: 6),
-                controller: _scrollController,
-                physics: const ClampingScrollPhysics(),
-                child: SidebarFolder(
-                  userProfile: widget.userProfile,
-                  isHoverEnabled: !isScrolling,
+              child:
+                  // if the workspaces are empty, show the user profile instead
+                  userState.isCollabWorkspaceOn &&
+                          userState.workspaces.isNotEmpty
+                      ? SidebarWorkspace(userProfile: widget.userProfile)
+                      : SidebarUser(userProfile: widget.userProfile),
+            ),
+            if (FeatureFlag.search.isOn) ...[
+              const VSpace(6),
+              Container(
+                padding: menuHorizontalInset,
+                height: HomeSizes.searchSectionHeight,
+                child: const _SidebarSearchButton(),
+              ),
+            ],
+            const VSpace(6.0),
+            // new page button
+            const SidebarNewPageButton(),
+            // scrollable document list
+            const VSpace(12.0),
+            const Padding(
+              padding: EdgeInsets.symmetric(horizontal: 12.0),
+              child: Divider(
+                color: Color(0x1E1F2329),
+                height: 0.5,
+              ),
+            ),
+            Expanded(
+              child: Padding(
+                padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.only(right: 6),
+                  controller: _scrollController,
+                  physics: const ClampingScrollPhysics(),
+                  child: SidebarFolder(
+                    userProfile: widget.userProfile,
+                    isHoverEnabled: !_isScrolling,
+                  ),
                 ),
               ),
             ),
-          ),
-          const VSpace(10),
-          // trash
-          const Padding(
-            padding: menuHorizontalInset,
-            child: Divider(height: 1.0, color: Color(0x141F2329)),
-          ),
-          const VSpace(14),
-          const Padding(
-            padding: menuHorizontalInset,
-            child: SidebarFooter(),
-          ),
-          const VSpace(10),
-        ],
+
+            // trash
+            Padding(
+              padding: menuHorizontalInset +
+                  const EdgeInsets.symmetric(horizontal: 4.0),
+              child: const Divider(height: 1.0, color: Color(0x141F2329)),
+            ),
+            const VSpace(8),
+            Padding(
+              padding: menuHorizontalInset +
+                  const EdgeInsets.symmetric(horizontal: 4.0),
+              child: const SidebarFooter(),
+            ),
+            const VSpace(14),
+          ],
+        ),
       ),
     );
   }
 
   void _onScrollChanged() {
-    setState(() => isScrolling = true);
+    setState(() => _isScrolling = true);
 
     _scrollDebounce?.cancel();
     _scrollDebounce =
@@ -283,7 +306,7 @@ class _SidebarState extends State<_Sidebar> {
 
   void _setScrollStopped() {
     if (mounted) {
-      setState(() => isScrolling = false);
+      setState(() => _isScrolling = false);
     }
   }
 }
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart
index d179c4ce0f..6f96e6abc2 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart
@@ -15,13 +15,17 @@ class WorkspaceIcon extends StatefulWidget {
     required this.iconSize,
     required this.fontSize,
     required this.onSelected,
+    this.borderRadius = 4,
+    this.emojiSize,
   });
 
   final UserWorkspacePB workspace;
   final double iconSize;
   final bool enableEdit;
   final double fontSize;
+  final double? emojiSize;
   final void Function(EmojiPickerResult) onSelected;
+  final double borderRadius;
 
   @override
   State<WorkspaceIcon> createState() => _WorkspaceIconState();
@@ -38,18 +42,22 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
             alignment: Alignment.center,
             child: FlowyText.emoji(
               widget.workspace.icon,
-              fontSize: widget.iconSize,
+              fontSize: widget.emojiSize ?? widget.iconSize,
             ),
           )
         : Container(
             alignment: Alignment.center,
             width: widget.iconSize,
-            height: min(widget.iconSize, 26),
+            height: min(widget.iconSize, 24),
             decoration: BoxDecoration(
               color: ColorGenerator(widget.workspace.name).toColor(),
-              borderRadius: BorderRadius.circular(4),
+              borderRadius: BorderRadius.circular(widget.borderRadius),
+              border: Border.all(
+                color: const Color(0xa1717171),
+                width: 0.5,
+              ),
             ),
-            child: FlowyText(
+            child: FlowyText.semibold(
               widget.workspace.name.isEmpty
                   ? ''
                   : widget.workspace.name.substring(0, 1),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart
index d1a09afc28..1dddce8ac6 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart
@@ -1,4 +1,3 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
@@ -49,7 +48,9 @@ class _SidebarWorkspaceState extends State<SidebarWorkspace> {
               ),
             ),
             UserSettingButton(userProfile: widget.userProfile),
+            const HSpace(8.0),
             const NotificationButton(),
+            const HSpace(10.0),
           ],
         );
       },
@@ -203,12 +204,14 @@ class _SidebarSwitchWorkspaceButtonState
           height: 30,
           child: Row(
             children: [
-              const HSpace(6.0),
+              const HSpace(4.0),
               WorkspaceIcon(
                 workspace: widget.currentWorkspace,
-                iconSize: 16,
-                fontSize: 10,
+                iconSize: 24,
+                fontSize: 16,
+                emojiSize: 18,
                 enableEdit: false,
+                borderRadius: 8.0,
                 onSelected: (result) => context.read<UserWorkspaceBloc>().add(
                       UserWorkspaceEvent.updateWorkspaceIcon(
                         widget.currentWorkspace.workspaceId,
@@ -216,23 +219,16 @@ class _SidebarSwitchWorkspaceButtonState
                       ),
                     ),
               ),
-              const HSpace(10),
+              const HSpace(8),
               Flexible(
                 child: FlowyText.medium(
                   widget.currentWorkspace.name,
                   overflow: TextOverflow.ellipsis,
                   withTooltip: true,
+                  fontSize: 15.0,
                 ),
               ),
               const HSpace(4),
-              ValueListenableBuilder(
-                valueListenable: _isWorkSpaceMenuExpanded,
-                builder: (context, value, _) => FlowySvg(
-                  value
-                      ? FlowySvgs.workspace_drop_down_menu_hide_s
-                      : FlowySvgs.workspace_drop_down_menu_show_s,
-                ),
-              ),
             ],
           ),
         ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart
index 1cfff3c6e6..3fa23c8f1c 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart
@@ -50,10 +50,12 @@ class ViewAddButton extends StatelessWidget {
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.bottomWithLeftAligned,
       actions: _actions,
-      offset: const Offset(0, 4),
+      offset: const Offset(0, 8),
+      constraints: const BoxConstraints(
+        minWidth: 200,
+      ),
       buildChild: (popover) {
         return FlowyIconButton(
-          hoverColor: Colors.transparent,
           width: 24,
           icon: const FlowySvg(FlowySvgs.view_item_add_s),
           onPressed: () {
@@ -122,7 +124,7 @@ class ViewImportActionWrapper extends ActionCell {
   final DocumentPluginBuilder pluginBuilder;
 
   @override
-  Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.import_s);
+  Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.icon_import_s);
 
   @override
   String get name => LocaleKeys.moreAction_import.tr();
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart
index 1e58b7703f..cdbbd76e33 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart
@@ -422,20 +422,19 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
 
   Widget _buildViewItem(bool onHover, [bool isSelected = false]) {
     final children = [
+      const HSpace(2),
       // expand icon or placeholder
       widget.leftIconBuilder?.call(context, widget.view) ?? _buildLeftIcon(),
+      const HSpace(2),
       // icon
       _buildViewIconButton(),
       const HSpace(6),
-      // const SizedBox(
-      //   width: 6.0,
-      //   height: 1,
-      // ),
       // title
       Expanded(
         child: FlowyText.regular(
           widget.view.name,
           overflow: TextOverflow.ellipsis,
+          lineHeight: 1.1,
         ),
       ),
     ];
@@ -447,10 +446,10 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
       } else {
         // ··· more action button
         children.add(_buildViewMoreActionButton(context));
-        children.add(const HSpace(8.0));
         // only support add button for document layout
         if (widget.view.layout == ViewLayoutPB.Document) {
           // + button
+          children.add(const HSpace(8.0));
           children.add(_buildViewAddButton(context));
         }
         children.add(const HSpace(4.0));
@@ -500,8 +499,9 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
         ? FlowyText.emoji(
             widget.view.icon.value,
             fontSize: 16.0,
+            lineHeight: 1.4,
           )
-        : widget.view.defaultIcon();
+        : Opacity(opacity: 0.6, child: widget.view.defaultIcon());
 
     return AppFlowyPopover(
       offset: const Offset(20, 0),
@@ -545,16 +545,18 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
       return HSpace(widget.leftPadding);
     }
 
-    final child = GestureDetector(
-      child: FlowySvg(
-        widget.isExpanded
-            ? FlowySvgs.view_item_expand_s
-            : FlowySvgs.view_item_unexpand_s,
-        size: const Size.square(16.0),
+    final child = FlowyHover(
+      child: GestureDetector(
+        child: FlowySvg(
+          widget.isExpanded
+              ? FlowySvgs.view_item_expand_s
+              : FlowySvgs.view_item_unexpand_s,
+          size: const Size.square(16.0),
+        ),
+        onTap: () => context
+            .read<ViewBloc>()
+            .add(ViewEvent.setIsExpanded(!widget.isExpanded)),
       ),
-      onTap: () => context
-          .read<ViewBloc>()
-          .add(ViewEvent.setIsExpanded(!widget.isExpanded)),
     );
 
     if (widget.isHovered != null) {
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
index 4201ec5396..55503cd38d 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
@@ -91,13 +91,16 @@ class FlowyNavigation extends StatelessWidget {
               turns: const AlwaysStoppedAnimation(180 / 360),
               child: FlowyTooltip(
                 richMessage: textSpan,
-                child: FlowyIconButton(
-                  width: 24,
-                  onPressed: () => context
+                child: Listener(
+                  onPointerDown: (event) => context
                       .read<HomeSettingBloc>()
                       .add(const HomeSettingEvent.collapseMenu()),
-                  iconPadding: const EdgeInsets.all(2),
-                  icon: const FlowySvg(FlowySvgs.hide_menu_s),
+                  child: FlowyIconButton(
+                    width: 24,
+                    onPressed: () {},
+                    iconPadding: const EdgeInsets.all(4),
+                    icon: const FlowySvg(FlowySvgs.hide_menu_s),
+                  ),
                 ),
               ),
             ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart
index 08f421951b..e28ebfb1c2 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart
@@ -4,7 +4,6 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/settings/notifications/notification_settings_cubit.dart';
-import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/notifications/notification_dialog.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -43,9 +42,10 @@ class NotificationButton extends StatelessWidget {
                       popupBuilder: (_) =>
                           NotificationDialog(views: views, mutex: mutex),
                       child: SizedBox.square(
-                        dimension: HomeSizes.workspaceSectionHeight,
+                        dimension: 24.0,
                         child: FlowyButton(
                           useIntrinsicWidth: true,
+                          margin: EdgeInsets.zero,
                           text:
                               _buildNotificationIcon(context, state.hasUnreads),
                         ),
@@ -62,8 +62,11 @@ class NotificationButton extends StatelessWidget {
   Widget _buildNotificationIcon(BuildContext context, bool hasUnreads) {
     return Stack(
       children: [
-        const FlowySvg(
-          FlowySvgs.notification_s,
+        const Center(
+          child: FlowySvg(
+            FlowySvgs.notification_s,
+            opacity: 0.7,
+          ),
         ),
         if (hasUnreads)
           Positioned(
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart
index 970ee82631..68e8073db3 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart
@@ -33,8 +33,9 @@ class ViewFavoriteButton extends StatelessWidget {
               child: Padding(
                 padding: const EdgeInsets.all(6),
                 child: FlowySvg(
-                  isFavorite ? FlowySvgs.unfavorite_s : FlowySvgs.favorite_s,
+                  isFavorite ? FlowySvgs.favorited_s : FlowySvgs.favorite_s,
                   size: const Size.square(18),
+                  blendMode: null,
                 ),
               ),
             ),
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
index 1c8c8d20ff..fde71f9150 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
@@ -2,14 +2,14 @@ import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/tasks/rust_sdk.dart';
+import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:device_info_plus/device_info_plus.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -21,9 +21,8 @@ class QuestionBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const SizedBox(
-      width: 30,
-      height: 30,
+    return const SizedBox.square(
+      dimension: 36.0,
       child: BubbleActionList(),
     );
   }
@@ -61,24 +60,55 @@ class _BubbleActionListState extends State<BubbleActionList> {
     );
     actions.add(FlowyVersionDescription());
 
+    final (color, borderColor, shadowColor, iconColor) =
+        Theme.of(context).isLightMode
+            ? (
+                Colors.white,
+                const Color(0x2D454849),
+                const Color(0x14000000),
+                Colors.black,
+              )
+            : (
+                const Color(0xFF242B37),
+                const Color(0x2DFFFFFF),
+                const Color(0x14000000),
+                Colors.white,
+              );
+
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.topWithRightAligned,
       actions: actions,
       offset: const Offset(0, -8),
       buildChild: (controller) {
-        return FlowyTextButton(
-          '?',
-          tooltip: LocaleKeys.questionBubble_help.tr(),
-          fontWeight: FontWeight.w600,
-          fontColor: fontColor,
-          fillColor: fillColor,
-          hoverColor: Theme.of(context).colorScheme.primary,
-          mainAxisAlignment: MainAxisAlignment.center,
-          radius: Corners.s10Border,
-          onPressed: () {
-            toggle();
-            controller.show();
-          },
+        return FlowyTooltip(
+          message: LocaleKeys.questionBubble_help.tr(),
+          child: MouseRegion(
+            cursor: SystemMouseCursors.click,
+            child: GestureDetector(
+              child: Container(
+                padding: const EdgeInsets.all(10.0),
+                decoration: ShapeDecoration(
+                  color: color,
+                  shape: RoundedRectangleBorder(
+                    side: BorderSide(width: 0.50, color: borderColor),
+                    borderRadius: BorderRadius.circular(18),
+                  ),
+                  shadows: [
+                    BoxShadow(
+                      color: shadowColor,
+                      blurRadius: 20,
+                      offset: const Offset(0, 8),
+                    ),
+                  ],
+                ),
+                child: FlowySvg(
+                  FlowySvgs.help_center_s,
+                  color: iconColor,
+                ),
+              ),
+              onTap: () => controller.show(),
+            ),
+          ),
         );
       },
       onClosed: toggle,
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart
index d4103cc6bf..6abc789223 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart
@@ -245,9 +245,10 @@ class HoverButton extends StatelessWidget {
                 HSpace(ActionListSizes.itemHPadding),
               ],
               Expanded(
-                child: FlowyText.medium(
+                child: FlowyText.regular(
                   name,
                   overflow: TextOverflow.visible,
+                  lineHeight: 1.15,
                 ),
               ),
               if (rightIcon != null) ...[
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart
index b3eddfb52b..18dc91de58 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart
@@ -33,6 +33,7 @@ class ViewTitleBar extends StatelessWidget {
             return const SizedBox.shrink();
           }
           return SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
             child: SizedBox(
               height: 24,
               child: Row(children: _buildViewTitles(context, ancestors)),
@@ -165,11 +166,14 @@ class _ViewTitleState extends State<_ViewTitle> {
   Widget _buildUnEditableViewTitle(BuildContext context, ViewTitleState state) {
     return Listener(
       onPointerDown: (_) => context.read<TabsBloc>().openPlugin(widget.view),
-      child: FlowyButton(
-        useIntrinsicWidth: true,
-        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-        onTap: () {},
-        text: _buildIconAndName(state),
+      child: SizedBox(
+        height: 32.0,
+        child: FlowyButton(
+          useIntrinsicWidth: true,
+          margin: const EdgeInsets.symmetric(horizontal: 6.0),
+          onTap: () {},
+          text: _buildIconAndName(state, false),
+        ),
       ),
     );
   }
@@ -194,15 +198,18 @@ class _ViewTitleState extends State<_ViewTitle> {
           emoji: state.icon,
         );
       },
-      child: FlowyButton(
-        useIntrinsicWidth: true,
-        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-        text: _buildIconAndName(state),
+      child: SizedBox(
+        height: 32.0,
+        child: FlowyButton(
+          useIntrinsicWidth: true,
+          margin: const EdgeInsets.symmetric(horizontal: 6.0),
+          text: _buildIconAndName(state, true),
+        ),
       ),
     );
   }
 
-  Widget _buildIconAndName(ViewTitleState state) {
+  Widget _buildIconAndName(ViewTitleState state, bool isEditable) {
     return SingleChildScrollView(
       child: Row(
         children: [
@@ -211,10 +218,10 @@ class _ViewTitleState extends State<_ViewTitle> {
               state.icon,
               fontSize: 14.0,
             ),
-            const HSpace(6.0),
+            const HSpace(4.0),
           ],
-          ConstrainedBox(
-            constraints: const BoxConstraints(),
+          Opacity(
+            opacity: isEditable ? 1.0 : 0.5,
             child: FlowyText.regular(
               state.name,
               overflow: TextOverflow.ellipsis,
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
index 8f7120fa84..81142383c1 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
@@ -6,19 +6,19 @@ const _white = Color(0xFFFFFFFF);
 const _lightHover = Color(0xFFe0f8FF);
 const _lightSelector = Color(0xFFf2fcFF);
 const _lightBg1 = Color(0xFFf7f8fc);
-const _lightBg2 = Color(0xFFedeef2);
+const _lightBg2 = Color(0x0F1F2329);
 const _lightShader1 = Color(0xFF333333);
 const _lightShader3 = Color(0xFF828282);
 const _lightShader5 = Color(0xFFe0e0e0);
 const _lightShader6 = Color(0xFFf2f2f2);
 const _lightMain1 = Color(0xFF00bcf0);
 const _lightTint9 = Color(0xFFe1fbFF);
-const _darkShader1 = Color(0xE5FFFFFF);
+const _darkShader1 = Color(0xFF131720);
 const _darkShader2 = Color(0xFF1A202C);
 const _darkShader3 = Color(0xFF363D49);
 const _darkShader5 = Color(0xFFBBC3CD);
 const _darkShader6 = Color(0xFFF2F2F2);
-const _darkMain1 = Color(0x19FFFFFF);
+const _darkMain1 = Color(0xFF00BCF0);
 const _darkMain2 = Color(0xFF00BCF0);
 const _darkInput = Color(0xFF282E3A);
 
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart
index 10065b3dc7..d5d04ddb98 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart
@@ -166,7 +166,6 @@ class FlowyText extends StatelessWidget {
         text,
         maxLines: maxLines,
         textAlign: textAlign,
-        strutStyle: strutStyle,
         style: textStyle,
       );
     } else {
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart
index 57874fad64..382b18fc0e 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart
@@ -25,6 +25,7 @@ class FlowyTooltip extends StatelessWidget {
     final isLightMode = Theme.of(context).brightness == Brightness.light;
     return Tooltip(
       margin: margin,
+      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
       decoration: BoxDecoration(
         color: isLightMode ? const Color(0xE5171717) : const Color(0xE5E5E5E5),
         borderRadius: BorderRadius.circular(8.0),
diff --git a/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart b/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
index baf08538b8..aa70ee9d1f 100644
--- a/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
+++ b/frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
@@ -23,6 +23,7 @@ class FlowySvg extends StatelessWidget {
     this.size,
     this.color,
     this.blendMode = BlendMode.srcIn,
+    this.opacity = 1.0,
   });
 
   /// The data for the flowy svg. Will be generated by the generator in this
@@ -46,11 +47,16 @@ class FlowySvg extends StatelessWidget {
   /// svg widget.
   final BlendMode? blendMode;
 
+  /// The opacity of the svg
+  ///
+  /// The default value is 1.0
+  final double opacity;
+
   @override
   Widget build(BuildContext context) {
-    final iconColor = color ?? Theme.of(context).iconTheme.color;
+    final iconColor =
+        (color ?? Theme.of(context).iconTheme.color)?.withOpacity(opacity);
     final textScaleFactor = MediaQuery.textScalerOf(context).scale(1);
-
     return Transform.scale(
       scale: textScaleFactor,
       child: SizedBox(
diff --git a/frontend/resources/flowy_icons/16x/favorited.svg b/frontend/resources/flowy_icons/16x/favorited.svg
new file mode 100644
index 0000000000..a17f7548cd
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/favorited.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2967 2.63248L11.6167 5.27248C11.7967 5.63998 12.2767 5.99248 12.6817 6.05998L15.0742 6.45748C16.6042 6.71248 16.9642 7.82248 15.8617 8.91748L14.0017 10.7775C13.6867 11.0925 13.5142 11.7 13.6117 12.135L14.1442 14.4375C14.5642 16.26 13.5967 16.965 11.9842 16.0125L9.7417 14.685C9.3367 14.445 8.6692 14.445 8.2567 14.685L6.0142 16.0125C4.4092 16.965 3.4342 16.2525 3.8542 14.4375L4.3867 12.135C4.4842 11.7 4.3117 11.0925 3.9967 10.7775L2.1367 8.91748C1.0417 7.82248 1.3942 6.71248 2.9242 6.45748L5.3167 6.05998C5.7142 5.99248 6.1942 5.63998 6.3742 5.27248L7.6942 2.63248C8.4142 1.19998 9.5842 1.19998 10.2967 2.63248Z" fill="#FFBA00"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/help_center.svg b/frontend/resources/flowy_icons/16x/help_center.svg
new file mode 100644
index 0000000000..52766922e9
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/help_center.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_859_40861)">
+<path d="M8.00207 15.9668C3.84348 15.9668 0.472656 12.596 0.472656 8.43737C0.472656 4.27878 3.84348 0.907959 8.00207 0.907959C12.1607 0.907959 15.5315 4.27878 15.5315 8.43737C15.5315 12.596 12.1607 15.9668 8.00207 15.9668ZM8.00207 15.0256C11.6407 15.0256 14.5903 12.076 14.5903 8.43737C14.5903 4.79878 11.6407 1.84914 8.00207 1.84914C4.36348 1.84914 1.41383 4.79878 1.41383 8.43737C1.41383 12.076 4.36348 15.0256 8.00207 15.0256Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
+<path d="M7.96863 12.6016C7.78728 12.6016 7.61337 12.5295 7.48513 12.4013C7.3569 12.2731 7.28486 12.0992 7.28486 11.9178C7.28486 11.7365 7.3569 11.5626 7.48513 11.4343C7.61337 11.3061 7.78728 11.2341 7.96863 11.2341C8.14997 11.2341 8.32389 11.3061 8.45212 11.4343C8.58035 11.5626 8.65239 11.7365 8.65239 11.9178C8.65239 12.0992 8.58035 12.2731 8.45212 12.4013C8.32389 12.5295 8.14997 12.6016 7.96863 12.6016ZM6.12016 7.2157C6.05257 7.21522 5.98585 7.20044 5.92438 7.17233C5.86292 7.14423 5.80809 7.10344 5.76351 7.05263C5.71893 7.00183 5.68561 6.94217 5.66572 6.87757C5.64584 6.81297 5.63986 6.7449 5.64816 6.67782C5.67922 6.41194 5.72863 6.19453 5.79639 6.02559C5.91127 5.74558 6.08998 5.49629 6.31828 5.29759C6.55006 5.08809 6.82166 4.92741 7.11686 4.82512C7.41609 4.72254 7.73043 4.671 8.04675 4.67265C8.70557 4.67265 9.25381 4.86653 9.69239 5.25476C10.131 5.64159 10.3507 6.15829 10.3507 6.803C10.3507 7.09288 10.2943 7.35547 10.1813 7.59076C10.0693 7.82653 9.83028 8.12017 9.46463 8.47123C9.09804 8.82276 8.85616 9.07265 8.73616 9.22135C8.61183 9.3793 8.51973 9.56014 8.4651 9.75359C8.43216 9.86229 8.40863 9.99076 8.39592 10.1385C8.37334 10.3879 8.17286 10.5856 7.92251 10.5856C7.85592 10.5852 7.79014 10.5709 7.72937 10.5436C7.66861 10.5164 7.6142 10.4768 7.5696 10.4273C7.52501 10.3778 7.49122 10.3196 7.47039 10.2564C7.44956 10.1931 7.44215 10.1262 7.44863 10.0599C7.4651 9.88865 7.49004 9.73947 7.52486 9.61241C7.58933 9.37006 7.68722 9.15829 7.81804 8.97712C7.94839 8.79547 8.18369 8.52912 8.52392 8.17759C8.86463 7.82653 9.08392 7.57053 9.18275 7.41194C9.27969 7.25241 9.38181 6.99312 9.38181 6.67782C9.38181 6.36253 9.21569 6.10606 8.99216 5.86323C8.76722 5.62041 8.4411 5.49853 8.01333 5.49853C7.17851 5.49853 6.7051 5.92817 6.59404 6.78747C6.56251 7.02935 6.3658 7.2157 6.12204 7.2157H6.12016Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
+</g>
+<defs>
+<clipPath id="clip0_859_40861">
+<rect width="16" height="16" fill="white" transform="translate(0 0.4375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/icon_board.svg b/frontend/resources/flowy_icons/16x/icon_board.svg
new file mode 100644
index 0000000000..9133d535b5
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/icon_board.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.89999 13.8666L5.89999 3.36531L5.89999 2.1333H3.59999C2.49542 2.1333 1.59999 3.02874 1.59999 4.1333L1.59999 11.8666C1.59999 12.9712 2.49542 13.8666 3.59999 13.8666H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.89999 2.1333V12.6346V13.8666H10.2V12.6346V2.1333H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2 2.1333V12.6346V13.8666H12.5C13.6046 13.8666 14.5 12.9712 14.5 11.8666V4.1333C14.5 3.02873 13.6046 2.1333 12.5 2.1333H10.2Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/icon_calendar.svg b/frontend/resources/flowy_icons/16x/icon_calendar.svg
new file mode 100644
index 0000000000..ca65315d3c
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/icon_calendar.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5522 1.33329C11.5522 1.02954 11.3059 0.783295 11.0022 0.783295C10.6984 0.783295 10.4522 1.02954 10.4522 1.33329V2.01127H5.75V1.33341C5.75 1.02965 5.50376 0.783409 5.2 0.783409C4.89624 0.783409 4.65 1.02965 4.65 1.33341V2.01127H3.66667C2.19391 2.01127 1 3.20518 1 4.67794V12C1 13.4727 2.19391 14.6666 3.66667 14.6666H12.3333C13.8061 14.6666 15 13.4727 15 12V4.67794C15 3.20518 13.8061 2.01127 12.3333 2.01127H11.5522V1.33329ZM10.4522 3.11127V3.48019C10.4522 3.78394 10.6984 4.03019 11.0022 4.03019C11.3059 4.03019 11.5522 3.78394 11.5522 3.48019V3.11127H12.3333C13.1986 3.11127 13.9 3.81269 13.9 4.67794V5.85763H2.1V4.67794C2.1 3.81269 2.80142 3.11127 3.66667 3.11127H4.65V3.4803C4.65 3.78406 4.89624 4.0303 5.2 4.0303C5.50376 4.0303 5.75 3.78406 5.75 3.4803V3.11127H10.4522ZM2.1 6.95763V12C2.1 12.8652 2.80142 13.5666 3.66667 13.5666H12.3333C13.1986 13.5666 13.9 12.8652 13.9 12V6.95763H2.1Z" fill="#171717"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/icon_document.svg b/frontend/resources/flowy_icons/16x/icon_document.svg
new file mode 100644
index 0000000000..75acd9a2a3
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/icon_document.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9024 6.7V10.2122C13.9024 13.6321 13.0245 15 10.0489 15H5.84803C2.87244 15 2 13.6321 2 10.2122V6.10841C2 2.68856 3.19024 1.32062 6.16583 1.32062H8.78861" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8503 6.6332C13.9081 6.69759 13.8624 6.8 13.7759 6.8H11.419C9.63363 6.8 8.79428 6.02268 8.79428 3.95962V1.52225C8.79428 1.33882 9.0206 1.25215 9.14312 1.38866L13.8503 6.6332Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/icon_grid.svg b/frontend/resources/flowy_icons/16x/icon_grid.svg
new file mode 100644
index 0000000000..a167a4a6ad
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/icon_grid.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 2.6H12.8C13.4075 2.6 13.9 3.09249 13.9 3.7V5.31699H6.75V2.6ZM6.75 6.41699H13.9V9.58256H6.75V6.41699ZM5.65 9.58256V6.41699H2.1V9.58256H5.65ZM2.1 10.6826H5.65V13.4H3.2C2.59249 13.4 2.1 12.9075 2.1 12.3V10.6826ZM6.75 10.6826H13.9V12.3C13.9 12.9075 13.4075 13.4 12.8 13.4H6.75V10.6826ZM5.65 2.6V5.31699H2.1V3.7C2.1 3.09249 2.59249 2.6 3.2 2.6H5.65ZM1 3.7C1 2.48497 1.98497 1.5 3.2 1.5H12.8C14.015 1.5 15 2.48497 15 3.7V12.3C15 13.515 14.015 14.5 12.8 14.5H3.2C1.98497 14.5 1 13.515 1 12.3V3.7Z" fill="#171717"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/icon_import.svg b/frontend/resources/flowy_icons/16x/icon_import.svg
new file mode 100644
index 0000000000..bc8d7c7b72
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/icon_import.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2701 5.93359C13.9185 6.14536 15 7.40916 15 10.1758V10.2646C15 13.3182 13.6831 14.5411 10.3946 14.5411H5.60536C2.31687 14.5411 1 13.3182 1 10.2646V10.1758C1 7.42965 2.06674 6.16586 4.67105 5.94043" stroke="#171717" stroke-width="1.0247" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 1.33334V9.92001" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2323 8.43359L7.99896 10.6669L5.76562 8.43359" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_hide.svg b/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_hide.svg
index d264b4734e..f6c5884f5b 100644
--- a/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_hide.svg
+++ b/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_hide.svg
@@ -1,8 +1,3 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1_598_58130" maskUnits="userSpaceOnUse" x="1.33203" y="3" width="8" height="5" fill="black">
-<rect fill="white" x="1.33203" y="3" width="8" height="5"/>
-<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z"/>
-</mask>
-<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z" fill="#171717"/>
-<path d="M7.62074 7.62796L7.67966 7.56904L7.62074 7.62796ZM8.20999 7.62796L8.15107 7.56904H8.15107L8.20999 7.62796ZM4.9987 5.00592L4.93977 4.947C4.9554 4.93137 4.9766 4.92259 4.9987 4.92259C5.0208 4.92259 5.042 4.93137 5.05762 4.947L4.9987 5.00592ZM2.37666 7.62796L2.31773 7.56904L2.37666 7.62796ZM1.7874 7.62796L1.84633 7.56904L1.7874 7.62796ZM1.7874 7.03871L1.84633 7.09763L1.7874 7.03871ZM4.70407 4.12204L4.64514 4.06311V4.06311L4.70407 4.12204ZM5.29333 4.12204L5.2344 4.18096L5.2344 4.18096L5.29333 4.12204ZM8.20999 7.03871L8.26892 6.97978L8.20999 7.03871ZM7.67966 7.56904C7.80984 7.69921 8.02089 7.69921 8.15107 7.56904L8.26892 7.68689C8.07366 7.88215 7.75707 7.88215 7.56181 7.68689L7.67966 7.56904ZM5.05762 4.947L7.67966 7.56904L7.56181 7.68689L4.93977 5.06485L5.05762 4.947ZM2.31773 7.56904L4.93977 4.947L5.05762 5.06485L2.43558 7.68689L2.31773 7.56904ZM1.84633 7.56904C1.9765 7.69921 2.18756 7.69921 2.31773 7.56904L2.43558 7.68689C2.24032 7.88215 1.92374 7.88215 1.72848 7.68689L1.84633 7.56904ZM1.84633 7.09763C1.71615 7.22781 1.71615 7.43886 1.84633 7.56904L1.72848 7.68689C1.53322 7.49163 1.53322 7.17504 1.72848 6.97978L1.84633 7.09763ZM4.763 4.18096L1.84633 7.09763L1.72848 6.97978L4.64514 4.06311L4.763 4.18096ZM4.9987 4.08333C4.91029 4.08333 4.82551 4.11845 4.763 4.18096L4.64514 4.06311C4.73891 3.96935 4.86609 3.91667 4.9987 3.91667V4.08333ZM5.2344 4.18096C5.17189 4.11845 5.0871 4.08333 4.9987 4.08333V3.91667C5.13131 3.91667 5.25848 3.96935 5.35225 4.06311L5.2344 4.18096ZM8.15107 7.09763L5.2344 4.18096L5.35225 4.06311L8.26892 6.97978L8.15107 7.09763ZM8.15107 7.56904C8.28124 7.43886 8.28124 7.22781 8.15107 7.09763L8.26892 6.97978C8.46418 7.17504 8.46418 7.49163 8.26892 7.68689L8.15107 7.56904Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_598_58130)"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 9.5L8.67929 6.07071C8.71834 6.03166 8.71834 5.96834 8.67929 5.92929L5.25 2.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
 </svg>
diff --git a/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_show.svg b/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_show.svg
index 4682de7aa7..80ce09be81 100644
--- a/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_show.svg
+++ b/frontend/resources/flowy_icons/16x/workspace_drop_down_menu_show.svg
@@ -1,8 +1,3 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1_628_27017" maskUnits="userSpaceOnUse" x="0.667969" y="4" width="8" height="5" fill="black">
-<rect fill="white" x="0.667969" y="4" width="8" height="5"/>
-<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z"/>
-</mask>
-<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z" fill="#171717"/>
-<path d="M2.37926 4.37204L2.32034 4.43096L2.37926 4.37204ZM1.79001 4.37204L1.84893 4.43096H1.84893L1.79001 4.37204ZM5.0013 6.99408L5.06023 7.053C5.0446 7.06863 5.0234 7.07741 5.0013 7.07741C4.9792 7.07741 4.958 7.06863 4.94238 7.053L5.0013 6.99408ZM7.62334 4.37204L7.68227 4.43096L7.62334 4.37204ZM8.2126 4.37204L8.15367 4.43096L8.2126 4.37204ZM8.2126 4.96129L8.15367 4.90237L8.2126 4.96129ZM5.29593 7.87796L5.35486 7.93689V7.93689L5.29593 7.87796ZM4.70667 7.87796L4.7656 7.81904L4.7656 7.81904L4.70667 7.87796ZM1.79001 4.96129L1.73108 5.02022L1.79001 4.96129ZM2.32034 4.43096C2.19016 4.30079 1.97911 4.30079 1.84893 4.43096L1.73108 4.31311C1.92634 4.11785 2.24293 4.11785 2.43819 4.31311L2.32034 4.43096ZM4.94238 7.053L2.32034 4.43096L2.43819 4.31311L5.06023 6.93515L4.94238 7.053ZM7.68227 4.43096L5.06023 7.053L4.94238 6.93515L7.56442 4.31311L7.68227 4.43096ZM8.15367 4.43096C8.0235 4.30079 7.81244 4.30079 7.68227 4.43096L7.56442 4.31311C7.75968 4.11785 8.07626 4.11785 8.27152 4.31311L8.15367 4.43096ZM8.15367 4.90237C8.28385 4.77219 8.28385 4.56114 8.15367 4.43096L8.27152 4.31311C8.46678 4.50837 8.46678 4.82496 8.27152 5.02022L8.15367 4.90237ZM5.237 7.81904L8.15367 4.90237L8.27152 5.02022L5.35486 7.93689L5.237 7.81904ZM5.0013 7.91667C5.08971 7.91667 5.17449 7.88155 5.237 7.81904L5.35486 7.93689C5.26109 8.03065 5.13391 8.08333 5.0013 8.08333V7.91667ZM4.7656 7.81904C4.82811 7.88155 4.9129 7.91667 5.0013 7.91667V8.08333C4.86869 8.08333 4.74152 8.03065 4.64775 7.93689L4.7656 7.81904ZM1.84893 4.90237L4.7656 7.81904L4.64775 7.93689L1.73108 5.02022L1.84893 4.90237ZM1.84893 4.43096C1.71876 4.56114 1.71876 4.77219 1.84893 4.90237L1.73108 5.02022C1.53582 4.82496 1.53582 4.50837 1.73108 4.31311L1.84893 4.43096Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_628_27017)"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 5.5L5.92929 8.92929C5.96834 8.96834 6.03166 8.96834 6.07071 8.92929L9.5 5.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
 </svg>
diff --git a/frontend/resources/flowy_icons/24x/favorite_header_icon.svg b/frontend/resources/flowy_icons/24x/favorite_header_icon.svg
new file mode 100644
index 0000000000..5b0ddbb6c5
--- /dev/null
+++ b/frontend/resources/flowy_icons/24x/favorite_header_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2967 5.63248L14.6167 8.27248C14.7967 8.63998 15.2767 8.99248 15.6817 9.05998L18.0742 9.45748C19.6042 9.71248 19.9642 10.8225 18.8617 11.9175L17.0017 13.7775C16.6867 14.0925 16.5142 14.7 16.6117 15.135L17.1442 17.4375C17.5642 19.26 16.5967 19.965 14.9842 19.0125L12.7417 17.685C12.3367 17.445 11.6692 17.445 11.2567 17.685L9.0142 19.0125C7.4092 19.965 6.4342 19.2525 6.8542 17.4375L7.3867 15.135C7.4842 14.7 7.3117 14.0925 6.9967 13.7775L5.1367 11.9175C4.0417 10.8225 4.3942 9.71248 5.9242 9.45748L8.3167 9.05998C8.7142 8.99248 9.1942 8.63998 9.3742 8.27248L10.6942 5.63248C11.4142 4.19998 12.5842 4.19998 13.2967 5.63248Z" fill="#FFBA00"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/24x/new_app.svg b/frontend/resources/flowy_icons/24x/new_app.svg
new file mode 100644
index 0000000000..77b11173d8
--- /dev/null
+++ b/frontend/resources/flowy_icons/24x/new_app.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.75" y="3.75" width="16.5" height="16.5" rx="8.25" fill="#00BCF0"/>
+<rect x="11.3984" y="7.5" width="1.3" height="9" rx="0.65" fill="white"/>
+<rect x="16.5" y="11.4" width="1.3" height="9" rx="0.65" transform="rotate(90 16.5 11.4)" fill="white"/>
+</svg>
diff --git a/frontend/resources/flowy_icons/24x/sidebar_footer_trash.svg b/frontend/resources/flowy_icons/24x/sidebar_footer_trash.svg
new file mode 100644
index 0000000000..02122ae127
--- /dev/null
+++ b/frontend/resources/flowy_icons/24x/sidebar_footer_trash.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M18 8.48665C15.78 8.26665 13.5467 8.15332 11.32 8.15332C10 8.15332 8.68 8.21999 7.36 8.35332L6 8.48665" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.66797 7.81325L9.81464 6.93992C9.9213 6.30659 10.0013 5.83325 11.128 5.83325H12.8746C14.0013 5.83325 14.088 6.33325 14.188 6.94659L14.3346 7.81325" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5669 10.5933L16.1336 17.3066C16.0603 18.3533 16.0003 19.1666 14.1403 19.1666H9.86026C8.00026 19.1666 7.94026 18.3533 7.86693 17.3066L7.43359 10.5933" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.8867 15.5H13.1067" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.332 12.8333H13.6654" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>