diff --git a/spx-gui/src/apis/common/index.ts b/spx-gui/src/apis/common/index.ts
index c6eaf2de5..55b684f16 100644
--- a/spx-gui/src/apis/common/index.ts
+++ b/spx-gui/src/apis/common/index.ts
@@ -33,4 +33,9 @@ export type FileCollection = {
   [path: string]: UniversalUrl
 }
 
+/** Get time string for spx-backend APIs */
+export function timeStringify(time: number) {
+  return new Date(time).toISOString()
+}
+
 export const client = new Client()
diff --git a/spx-gui/src/apis/project.ts b/spx-gui/src/apis/project.ts
index 4f0e65a0f..b0361a4ba 100644
--- a/spx-gui/src/apis/project.ts
+++ b/spx-gui/src/apis/project.ts
@@ -1,5 +1,6 @@
+import dayjs from 'dayjs'
 import type { FileCollection, ByPage, PaginationParams } from './common'
-import { client, IsPublic, ownerAll } from './common'
+import { client, IsPublic, ownerAll, timeStringify } from './common'
 import { ApiException, ApiExceptionCode } from './common/exception'
 
 export { IsPublic, ownerAll }
@@ -105,6 +106,14 @@ export type ListProjectParams = PaginationParams & {
   owner?: string
   /** Filter projects by name pattern */
   keyword?: string
+  /** Filter projects that were created after this timestamp */
+  createdAfter?: string
+  /** Filter projects that gained new likes after this timestamp */
+  likesReceivedAfter?: string
+  /** Filter projects that were remixed after this timestamp */
+  remixesReceivedAfter?: string
+  /** If filter projects created by followees of logged-in user */
+  fromFollowees?: boolean
   /** Field by which to order the results */
   orderBy?: 'cTime' | 'uTime' | 'likeCount' | 'remixCount' | 'recentLikeCount' | 'recentRemixCount'
   /** Order in which to sort the results */
@@ -125,6 +134,49 @@ export async function getProject(owner: string, name: string) {
   return __adaptProjectData(await client.get(`/project/${encode(owner, name)}`))
 }
 
+export enum ExploreOrder {
+  MostLikes = 'likes',
+  MostRemixes = 'remix',
+  FollowingCreated = 'following'
+}
+
+export type ExploreParams = {
+  order: ExploreOrder
+  count: number
+}
+
+/** Get project list for explore purpose */
+export async function exploreProjects({ order, count }: ExploreParams) {
+  // count within the last month
+  const countAfter = timeStringify(dayjs().subtract(1, 'month').valueOf())
+  const p: ListProjectParams = {
+    isPublic: IsPublic.public,
+    owner: ownerAll,
+    pageSize: count,
+    pageIndex: 1
+  }
+  switch (order) {
+    case ExploreOrder.MostLikes:
+      p.likesReceivedAfter = countAfter
+      p.orderBy = 'recentLikeCount'
+      p.sortOrder = 'desc'
+      break
+    case ExploreOrder.MostRemixes:
+      p.remixesReceivedAfter = countAfter
+      p.orderBy = 'recentRemixCount'
+      p.sortOrder = 'desc'
+      break
+    case ExploreOrder.FollowingCreated:
+      p.fromFollowees = true
+      p.createdAfter = countAfter
+      p.orderBy = 'cTime'
+      p.sortOrder = 'desc'
+      break
+  }
+  const listResult = await listProject(p)
+  return listResult.data
+}
+
 /**
  * Check if given project liked by current logged-in user.
  * If not logged in, `false` will be returned.
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
new file mode 100644
index 000000000..ad56bed8d
--- /dev/null
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -0,0 +1,47 @@
+<!-- Simple header component for pages like search & explore -->
+
+<template>
+  <section class="header">
+    <CenteredWrapper class="header-content">
+      <h1 class="title">
+        <slot></slot>
+      </h1>
+      <label class="options">
+        <slot name="options"></slot>
+      </label>
+    </CenteredWrapper>
+  </section>
+</template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>
+
+<style lang="scss" scoped>
+@import '@/utils/utils';
+
+.header {
+  flex: 0 0 auto;
+  background-color: var(--ui-color-grey-100);
+}
+
+.header-content {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+
+  .title {
+    flex: 1 1 0;
+    @include text-ellipsis;
+    line-height: 26px;
+    font-size: 16px;
+    color: var(--ui-color-title);
+  }
+
+  .options {
+    flex: 0 0 auto;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 462b8bc6d..05c65f8be 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -2,7 +2,9 @@
   <NavbarWrapper centered>
     <template #left>
       <NavbarDropdown>
-        <template #trigger> Create(TODO) </template>
+        <template #trigger>
+          <UIIcon type="plus" />
+        </template>
         <UIMenu>
           <NavbarNewProjectItem />
           <NavbarOpenProjectItem />
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
new file mode 100644
index 000000000..554622bd8
--- /dev/null
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -0,0 +1,80 @@
+<!-- Project list as a section -->
+
+<template>
+  <section>
+    <header class="header">
+      <h2 class="title">
+        <slot name="title"></slot>
+      </h2>
+      <RouterLink class="link" :to="linkTo">
+        <slot name="link"></slot>
+        <UIIcon class="link-icon" type="arrowRightSmall" />
+      </RouterLink>
+    </header>
+    <ul class="projects">
+      <UILoading v-if="queryRet.isLoading.value" :mask="false" />
+      <!-- TODO: simpler UIError & UIEmpty here -->
+      <UIError v-else-if="queryRet.error.value != null" :retry="queryRet.refetch">
+        {{ $t(queryRet.error.value.userMessage) }}
+      </UIError>
+      <UIEmpty
+        v-else-if="queryRet.data.value != null && queryRet.data.value.length === 0"
+        size="large"
+      />
+      <template v-else-if="queryRet.data.value != null">
+        <slot></slot>
+      </template>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { QueryRet } from '@/utils/exception'
+import { UIIcon, UILoading, UIError, UIEmpty } from '@/components/ui'
+
+defineProps<{
+  linkTo: string
+  queryRet: QueryRet<unknown[]>
+}>()
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .title {
+    line-height: 28px;
+    font-size: 20px;
+    color: var(--ui-color-title);
+  }
+
+  .link {
+    display: flex;
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+  }
+
+  .link-icon {
+    margin-left: 8px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.projects {
+  padding: 20px 0;
+  margin-bottom: 12px;
+
+  // same height as `ProjectItem`, to prevent layout shift
+  min-height: 260px;
+  position: relative;
+
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  gap: 20px;
+}
+</style>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index 88f673f44..d27004a89 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!userStore.userInfo" class="sign-in">
-    <UIButton :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
+    <UIButton type="secondary" :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
       $t({ en: 'Sign in', zh: '登录' })
     }}</UIButton>
   </div>
@@ -37,14 +37,18 @@ const { isOnline } = useNetwork()
 <style lang="scss" scoped>
 .sign-in,
 .avatar {
+  margin: 0 8px;
   height: 100%;
   display: flex;
   align-items: center;
 }
 
+.sign-in {
+  white-space: nowrap;
+}
+
 .avatar {
-  margin-right: 8px;
-  padding: 0 24px;
+  padding: 0 16px;
 
   &:hover {
     background-color: var(--ui-color-primary-600);
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 797a5bf86..cca0f6816 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -72,6 +72,7 @@ withDefaults(
 .right {
   flex-basis: 30%;
   display: flex;
+  gap: 8px;
 }
 
 .center {
diff --git a/spx-gui/src/components/project/item/ProjectItem.vue b/spx-gui/src/components/project/item/ProjectItem.vue
index 58b68e05f..f929375c1 100644
--- a/spx-gui/src/components/project/item/ProjectItem.vue
+++ b/spx-gui/src/components/project/item/ProjectItem.vue
@@ -128,18 +128,16 @@ const handleRemove = useMessageHandle(
 </script>
 
 <style lang="scss" scoped>
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+@import '@/utils/utils';
 
 .project-item {
   width: 240px;
+  flex: 0 0 auto;
   overflow: hidden;
   border-radius: var(--ui-border-radius-2);
   border: 1px solid var(--ui-color-grey-400);
   background-color: var(--ui-color-grey-100);
+  transition: 0.1s;
 }
 
 .link {
@@ -159,6 +157,8 @@ const handleRemove = useMessageHandle(
   }
 
   .options {
+    opacity: 0;
+    visibility: hidden;
     position: absolute;
     top: 8px;
     right: 8px;
@@ -171,7 +171,7 @@ const handleRemove = useMessageHandle(
     color: var(--ui-color-grey-800);
     background-color: var(--ui-color-grey-100);
     cursor: pointer;
-    transition: 0.3s;
+    transition: 0.1s;
 
     &:hover {
       color: var(--ui-color-grey-100);
@@ -191,6 +191,14 @@ const handleRemove = useMessageHandle(
   }
 }
 
+.project-item:hover {
+  box-shadow: 0px 4px 12px 0px rgba(36, 41, 47, 0.08);
+  .options {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
 .info {
   padding: var(--ui-gap-middle);
 
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 0b661eee4..bdf91115a 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -101,6 +101,7 @@ const slots = useSlots()
 }
 
 .size-large {
+  width: 100%;
   flex-direction: column;
   gap: 12px;
 
diff --git a/spx-gui/src/components/ui/error/UIError.vue b/spx-gui/src/components/ui/error/UIError.vue
index ee41a5ef7..253b978b3 100644
--- a/spx-gui/src/components/ui/error/UIError.vue
+++ b/spx-gui/src/components/ui/error/UIError.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ui-error">
     <img :src="defaultErrorImg" />
-    <h5 class="error">
+    <h5 class="message">
       <slot></slot>
     </h5>
     <button v-if="retry != null" class="retry" @click="retry">{{ retryText }}</button>
@@ -32,7 +32,7 @@ const retryText = computed(() => config.error?.retryText ?? 'Retry')
   justify-content: center;
 }
 
-.error {
+.message {
   margin-top: 12px;
   font-size: 16px;
   line-height: 26px;
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 5d4dad28c..1ca6f43b7 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -37,6 +37,7 @@ import volumeOff from './volume-off.svg?raw'
 import statePublic from './state-public.svg?raw'
 import statePrivate from './state-private.svg?raw'
 import heart from './heart.svg?raw'
+import arrowRightSmall from './arrow-right-small.svg?raw'
 
 const typeIconMap = {
   file,
@@ -70,7 +71,8 @@ const typeIconMap = {
   volumeOff,
   statePublic,
   statePrivate,
-  heart
+  heart,
+  arrowRightSmall
 }
 
 export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/ui/icons/arrow-right-small.svg b/spx-gui/src/components/ui/icons/arrow-right-small.svg
new file mode 100644
index 000000000..b55a94e26
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/arrow-right-small.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M17.255 10.5903L13.9225 13.9228C13.76 14.0853 13.5467 14.1669 13.3333 14.1669C13.12 14.1669 12.9066 14.0853 12.7441 13.9228C12.4183 13.597 12.4183 13.0702 12.7441 12.7444L14.6549 10.8336H3.33333C2.8725 10.8336 2.5 10.4603 2.5 10.0003C2.5 9.54028 2.8725 9.16694 3.33333 9.16694H14.6549L12.7441 7.25613C12.4183 6.9303 12.4183 6.40358 12.7441 6.07775C13.07 5.75192 13.5967 5.75192 13.9225 6.07775L17.255 9.41027C17.3325 9.48777 17.3934 9.57938 17.4359 9.68187C17.5201 9.88521 17.5201 10.1153 17.4359 10.3187C17.3934 10.4212 17.3325 10.5128 17.255 10.5903Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index 253607acf..534c296db 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/spx-gui/src/pages/community/explore.vue
@@ -1,20 +1,104 @@
 <template>
-  <section class="header">
-    <CenteredWrapper>Explore</CenteredWrapper>
-  </section>
-  <CenteredWrapper>Projects</CenteredWrapper>
+  <CommunityHeader>
+    {{ $t({ en: 'Explore', zh: '发现' }) }}
+    <template #options>
+      <UITagRadioGroup v-model:value="order">
+        <UITagRadio :value="Order.MostLikes">
+          {{ $t({ en: 'Most recent likes', zh: '最近最受喜欢' }) }}
+        </UITagRadio>
+        <UITagRadio :value="Order.MostRemixes">
+          {{ $t({ en: 'Most recent remixes', zh: '最近最多改编' }) }}
+        </UITagRadio>
+        <UITagRadio :value="Order.FollowingCreated">
+          {{ $t({ en: 'My following created', zh: '我关注的人创作' }) }}
+        </UITagRadio>
+      </UITagRadioGroup>
+    </template>
+  </CommunityHeader>
+  <CenteredWrapper class="main">
+    <UILoading v-if="isLoading" />
+    <UIError v-else-if="error != null" class="error" :retry="refetch">
+      {{ $t(error.userMessage) }}
+    </UIError>
+    <div v-else-if="projects != null && projects.length === 0" class="empty">
+      <UIEmpty size="large" />
+    </div>
+    <ul v-else-if="projects != null" class="projects">
+      <ProjectItem v-for="project in projects" :key="project.id" :project="project" />
+    </ul>
+  </CenteredWrapper>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRouteQuery } from '@/utils/route'
+import { useQuery } from '@/utils/exception'
+import { exploreProjects, ExploreOrder as Order } from '@/apis/project'
+import { UITagRadioGroup, UITagRadio, UILoading, UIError, UIEmpty } from '@/components/ui'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityHeader from '@/components/community/CommunityHeader.vue'
+import ProjectItem from '@/components/project/item/ProjectItem.vue'
+
+const queryParams = useRouteQuery<'o'>()
+
+const defaultOrder = Order.MostLikes
+
+const order = computed<Order>({
+  get() {
+    const orderStr = queryParams.get('o')
+    if (orderStr == null || orderStr === '') return defaultOrder
+    if (!Object.values(Order).includes(orderStr as Order)) return defaultOrder
+    return orderStr as Order
+  },
+  set(o) {
+    queryParams.set('o', o === defaultOrder ? null : o)
+  }
+})
+
+const maxCount = 50
+
+const {
+  data: projects,
+  isLoading,
+  error,
+  refetch
+} = useQuery(
+  () => {
+    // TODO: login prompt for unauthenticated users
+    return exploreProjects({
+      order: order.value,
+      count: maxCount
+    })
+  },
+  {
+    en: 'Failed to list projects',
+    zh: '获取项目列表失败'
+  }
+)
 </script>
 
 <style lang="scss" scoped>
-.header {
-  height: 72px;
+.main {
+  flex: 1 1 0;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.error,
+.empty {
+  flex: 1 1 0;
+  display: flex;
+
+  border-radius: var(--ui-border-radius-2);
+  background: var(--ui-color-grey-100);
+}
+
+.projects {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--ui-color-grey-100);
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 20px;
 }
 </style>
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/pages/community/home.vue
index 01ef0394a..918acc73d 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/spx-gui/src/pages/community/home.vue
@@ -1,57 +1,168 @@
 <template>
-  <CenteredWrapper>
-    <h1>Public</h1>
-    <ul v-if="projects != null" class="projects">
+  <CenteredWrapper class="main">
+    <ProjectsSection v-if="userStore.isSignedIn" :link-to="myProjectsRoute" :query-ret="myProjects">
+      <template #title>
+        {{
+          $t({
+            en: 'My projects',
+            zh: '我的项目'
+          })
+        }}
+      </template>
+      <template #link>
+        {{
+          $t({
+            en: 'View all',
+            zh: '查看所有'
+          })
+        }}
+      </template>
       <ProjectItem
-        v-for="project in projects"
+        v-for="project in myProjects.data.value"
         :key="project.id"
+        context="mine"
         :project="project"
-        context="public"
-      ></ProjectItem>
-    </ul>
-    <h1>Mine</h1>
-    <ul v-if="projects != null" class="projects">
+      />
+    </ProjectsSection>
+    <ProjectsSection :link-to="communityLikingRoute" :query-ret="communityLikingProjects">
+      <template #title>
+        {{
+          $t({
+            en: 'The community is liking',
+            zh: '大家喜欢的'
+          })
+        }}
+      </template>
+      <template #link>
+        {{
+          $t({
+            en: 'View more',
+            zh: '查看更多'
+          })
+        }}
+      </template>
       <ProjectItem
-        v-for="project in projects"
+        v-for="project in communityLikingProjects.data.value"
         :key="project.id"
         :project="project"
-        context="mine"
-      ></ProjectItem>
-    </ul>
-    <h1>To Edit</h1>
-    <ul v-if="projects != null" class="projects">
+      />
+    </ProjectsSection>
+    <ProjectsSection :link-to="communityRemixingRoute" :query-ret="communityRemixingProjects">
+      <template #title>
+        {{
+          $t({
+            en: 'The community is remixing',
+            zh: '大家在改编'
+          })
+        }}
+      </template>
+      <template #link>
+        {{
+          $t({
+            en: 'View more',
+            zh: '查看更多'
+          })
+        }}
+      </template>
+      <ProjectItem
+        v-for="project in communityRemixingProjects.data.value"
+        :key="project.id"
+        :project="project"
+      />
+    </ProjectsSection>
+    <ProjectsSection
+      v-if="userStore.isSignedIn"
+      :link-to="followingCreatedRoute"
+      :query-ret="followingCreatedProjects"
+    >
+      <template #title>
+        {{
+          $t({
+            en: 'Users I follow are creating',
+            zh: '我关注的人在创作'
+          })
+        }}
+      </template>
+      <template #link>
+        {{
+          $t({
+            en: 'View more',
+            zh: '查看更多'
+          })
+        }}
+      </template>
       <ProjectItem
-        v-for="project in projects"
+        v-for="project in followingCreatedProjects.data.value"
         :key="project.id"
         :project="project"
-        context="edit"
-      ></ProjectItem>
-    </ul>
+      />
+    </ProjectsSection>
   </CenteredWrapper>
 </template>
 
 <script setup lang="ts">
-import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import { computed } from 'vue'
 import { useQuery } from '@/utils/exception'
-import { listProject } from '@/apis/project'
+import { ExploreOrder, exploreProjects, listProject } from '@/apis/project'
+import { getExploreRoute, getUserPageRoute } from '@/router'
+import { useUserStore } from '@/stores'
+import ProjectsSection from '@/components/community/ProjectsSection.vue'
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 import ProjectItem from '@/components/project/item/ProjectItem.vue'
 
-const { data: projects } = useQuery(
+const numInRow = 5 // at most 5 projects in a row, depending on the screen width
+
+const userStore = useUserStore()
+
+const myProjectsRoute = computed(() => {
+  if (userStore.userInfo == null) return ''
+  return getUserPageRoute(userStore.userInfo.name, 'projects')
+})
+
+const myProjects = useQuery(
+  async () => {
+    if (userStore.userInfo == null) return []
+    const { data: projects } = await listProject({
+      pageIndex: 1,
+      pageSize: numInRow,
+      orderBy: 'uTime',
+      sortOrder: 'desc'
+    })
+    return projects
+  },
+  { en: 'Failed to load projects', zh: '加载失败' }
+)
+
+const communityLikingRoute = getExploreRoute(ExploreOrder.MostLikes)
+
+const communityLikingProjects = useQuery(
+  () => exploreProjects({ order: ExploreOrder.MostLikes, count: numInRow }),
+  { en: 'Failed to load projects', zh: '加载失败' }
+)
+
+const communityRemixingRoute = getExploreRoute(ExploreOrder.MostRemixes)
+
+const communityRemixingProjects = useQuery(
+  () => exploreProjects({ order: ExploreOrder.MostRemixes, count: numInRow }),
+  { en: 'Failed to load projects', zh: '加载失败' }
+)
+
+const followingCreatedRoute = computed(() => {
+  if (userStore.userInfo == null) return ''
+  return getExploreRoute(ExploreOrder.FollowingCreated)
+})
+
+const followingCreatedProjects = useQuery(
   async () => {
-    const { data: projects } = await listProject()
-    return projects.slice(0, 4)
+    if (userStore.userInfo == null) return []
+    return exploreProjects({ order: ExploreOrder.FollowingCreated, count: numInRow })
   },
-  { en: 'Failed to load projects', zh: '加载项目失败' }
+  { en: 'Failed to load projects', zh: '加载失败' }
 )
 </script>
 
 <style lang="scss" scoped>
-.projects {
-  padding: 20px 0;
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 20px;
+.main {
+  margin-top: 8px;
 }
 </style>
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index 94fba696e..c4cde9973 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -1,17 +1,15 @@
 <template>
-  <section class="header">
-    <CenteredWrapper class="header-content">
-      <h1 class="title">
-        <template v-if="titleForResult != null">
-          <!-- TODO: support vnode as i18n message to simplify such case -->
-          {{ $t(titleForResult.prefix) }}<span class="keyword">{{ keyword }}</span
-          >{{ $t(titleForResult.suffix) }}
-        </template>
-        <template v-else>
-          {{ $t(titleForNoResult) }}
-        </template>
-      </h1>
-      <label class="order">
+  <CommunityHeader>
+    <template v-if="titleForResult != null">
+      <!-- TODO: support vnode as i18n message to simplify such case -->
+      {{ $t(titleForResult.prefix) }}<span class="keyword">{{ keyword }}</span
+      >{{ $t(titleForResult.suffix) }}
+    </template>
+    <template v-else>
+      {{ $t(titleForNoResult) }}
+    </template>
+    <template #options>
+      <label>
         {{
           $t({
             en: 'Sort by',
@@ -21,29 +19,29 @@
         <UISelect v-model:value="order">
           <UISelectOption :value="Order.RecentlyUpdated">{{
             $t({
-              en: 'Recently Updated',
+              en: 'Recently updated',
               zh: '最近更新'
             })
           }}</UISelectOption>
-          <UISelectOption :value="Order.MostlyLiked">{{
+          <UISelectOption :value="Order.MostLikes">{{
             $t({
-              en: 'Mostly Liked',
+              en: 'Most likes',
               zh: '最受喜欢'
             })
           }}</UISelectOption>
-          <UISelectOption :value="Order.MostlyRemixed">{{
+          <UISelectOption :value="Order.MostRemixes">{{
             $t({
-              en: 'Mostly Remixed',
-              zh: '改编最多'
+              en: 'Most remixes',
+              zh: '最多改编'
             })
           }}</UISelectOption>
         </UISelect>
       </label>
-    </CenteredWrapper>
-  </section>
+    </template>
+  </CommunityHeader>
   <CenteredWrapper class="main">
     <UILoading v-if="isLoading" />
-    <UIError v-else-if="error != null" :retry="refetch">
+    <UIError v-else-if="error != null" class="error" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <div v-else-if="result?.data.length === 0" class="empty">
@@ -74,42 +72,43 @@ import {
   UIEmpty
 } from '@/components/ui'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+import CommunityHeader from '@/components/community/CommunityHeader.vue'
 import ProjectItem from '@/components/project/item/ProjectItem.vue'
 
-const params = useRouteQuery<'q' | 'p' | 'o'>()
+const queryParams = useRouteQuery<'q' | 'p' | 'o'>()
 
-const keyword = computed(() => params.get('q') ?? '')
+const keyword = computed(() => queryParams.get('q') ?? '')
 
-const pageSize = 8 // 2 rows
+const pageSize = 8 // 2 rows, TODO: responsive layout
 const defaultPage = 1
 const page = computed<number>({
   get() {
-    const pageStr = params.get('p')
+    const pageStr = queryParams.get('p')
     if (pageStr == null || pageStr === '') return defaultPage
     const page = parseInt(pageStr)
     return isNaN(page) ? defaultPage : page
   },
   set(p) {
-    params.set('p', p === defaultPage ? null : p.toString())
+    queryParams.set('p', p === defaultPage ? null : p.toString())
   }
 })
 
 enum Order {
   RecentlyUpdated = 'update',
-  MostlyLiked = 'likes',
-  MostlyRemixed = 'remix'
+  MostLikes = 'likes',
+  MostRemixes = 'remix'
 }
 const defaultOrder = Order.RecentlyUpdated
 
 const order = computed<Order>({
   get() {
-    const orderStr = params.get('o')
+    const orderStr = queryParams.get('o')
     if (orderStr == null || orderStr === '') return defaultOrder
     if (!Object.values(Order).includes(orderStr as Order)) return defaultOrder
     return orderStr as Order
   },
   set(o) {
-    params.set({
+    queryParams.set({
       o: o === defaultOrder ? null : o,
       p: null
     })
@@ -131,11 +130,11 @@ const listParams = computed<ListProjectParams>(() => {
       p.orderBy = 'uTime'
       p.sortOrder = 'desc'
       break
-    case Order.MostlyLiked:
+    case Order.MostLikes:
       p.orderBy = 'likeCount'
       p.sortOrder = 'desc'
       break
-    case Order.MostlyRemixed:
+    case Order.MostRemixes:
       p.orderBy = 'remixCount'
       p.sortOrder = 'desc'
       break
@@ -173,29 +172,8 @@ const titleForNoResult = computed(() => ({
 </script>
 
 <style lang="scss" scoped>
-.header {
-  flex: 0 0 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--ui-color-grey-100);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-
-  .title {
-    color: var(--ui-color-title);
-    font-size: 16px;
-    line-height: 26px;
-
-    .keyword {
-      color: var(--ui-color-primary-main);
-    }
-  }
+.keyword {
+  color: var(--ui-color-primary-main);
 }
 
 .main {
@@ -206,6 +184,7 @@ const titleForNoResult = computed(() => ({
   gap: 20px;
 }
 
+.error,
 .empty {
   flex: 1 1 0;
   display: flex;
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index f9e269f46..6304c3155 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -45,7 +45,7 @@ const userStore = useUserStore()
 watchEffect(() => {
   // This will be called on mount and whenever userStore changes,
   // which are the cases when userStore.signOut() is called
-  if (!userStore.hasSignedIn()) {
+  if (!userStore.isSignedIn) {
     userStore.signInWithRedirection()
   }
 })
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index 1e8bc5f1c..818b8e1ba 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import type { ExploreOrder } from './apis/project'
 
 export function getProjectEditorRoute(projectName: string) {
   return `/editor/${projectName}`
@@ -25,6 +26,10 @@ export function getSearchRoute(keyword: string = '') {
   return keyword !== '' ? `/search?q=${encodeURIComponent(keyword)}` : '/search'
 }
 
+export function getExploreRoute(order?: ExploreOrder) {
+  return order == null ? '/explore' : `/explore?o=${encodeURIComponent(order)}`
+}
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
diff --git a/spx-gui/src/stores/user.ts b/spx-gui/src/stores/user.ts
index 394e8dc17..861f5b6a2 100644
--- a/spx-gui/src/stores/user.ts
+++ b/spx-gui/src/stores/user.ts
@@ -45,9 +45,9 @@ export const useUserStore = defineStore('spx-user', {
   }),
   actions: {
     async getFreshAccessToken(): Promise<string | null> {
-      if (this.isAccessTokenValid()) return this.accessToken
+      if (this.isAccessTokenValid) return this.accessToken
 
-      if (this.isRefreshTokenValid()) {
+      if (this.isRefreshTokenValid) {
         try {
           const tokenResp = await casdoorSdk.pkce.refreshAccessToken(this.refreshToken!)
           this.setToken(tokenResp)
@@ -58,7 +58,7 @@ export const useUserStore = defineStore('spx-user', {
 
         // Due to js-pkce's lack of error handling, we must check if the access token is valid after calling `PKCE.refreshAccessToken`.
         // The token might still be invalid if, e.g., the server has already revoked the refresh token.
-        if (this.isAccessTokenValid()) return this.accessToken
+        if (this.isAccessTokenValid) return this.accessToken
       }
 
       this.signOut()
@@ -82,35 +82,35 @@ export const useUserStore = defineStore('spx-user', {
       this.accessTokenExpiresAt = null
       this.refreshTokenExpiresAt = null
     },
-    hasSignedIn() {
-      return this.isAccessTokenValid() || this.isRefreshTokenValid()
+    async consumeCurrentUrl() {
+      const tokenResp = await casdoorSdk.pkce.exchangeForAccessToken(window.location.href)
+      this.setToken(tokenResp)
     },
-    isAccessTokenValid() {
+    signInWithRedirection() {
+      casdoorSdk.signinWithRedirection()
+    }
+  },
+  getters: {
+    isAccessTokenValid(state): boolean {
       const delta = 60 * 1000 // 1 minute
       return !!(
-        this.accessToken &&
-        (this.accessTokenExpiresAt === null || this.accessTokenExpiresAt - delta > Date.now())
+        state.accessToken &&
+        (state.accessTokenExpiresAt === null || state.accessTokenExpiresAt - delta > Date.now())
       )
     },
-    isRefreshTokenValid() {
+    isRefreshTokenValid(state): boolean {
       const delta = 60 * 1000 // 1 minute
       return !!(
-        this.refreshToken &&
-        (this.refreshTokenExpiresAt === null || this.refreshTokenExpiresAt - delta > Date.now())
+        state.refreshToken &&
+        (state.refreshTokenExpiresAt === null || state.refreshTokenExpiresAt - delta > Date.now())
       )
     },
-    async consumeCurrentUrl() {
-      const tokenResp = await casdoorSdk.pkce.exchangeForAccessToken(window.location.href)
-      this.setToken(tokenResp)
+    isSignedIn(): boolean {
+      return this.isAccessTokenValid || this.isRefreshTokenValid
     },
-    signInWithRedirection() {
-      casdoorSdk.signinWithRedirection()
-    }
-  },
-  getters: {
-    userInfo: (state) => {
-      if (!state.accessToken) return null
-      return parseJwt(state.accessToken) as UserInfo
+    userInfo(state): UserInfo | null {
+      if (!this.isSignedIn) return null
+      return parseJwt(state.accessToken!) as UserInfo
     }
   },
   persist: true
diff --git a/spx-gui/src/utils/utils.scss b/spx-gui/src/utils/utils.scss
new file mode 100644
index 000000000..ce57a72d2
--- /dev/null
+++ b/spx-gui/src/utils/utils.scss
@@ -0,0 +1,5 @@
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}