diff --git a/src/renderer/components.d.ts b/src/renderer/components.d.ts
index 3e56ff1..ac454ba 100644
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -18,9 +18,11 @@ declare module 'vue' {
     DetectedIDECardList: typeof import('./src/components/DetectedIDECardList.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NButton: typeof import('naive-ui')['NButton']
+    NButtonGroup: typeof import('naive-ui')['NButtonGroup']
     NCard: typeof import('naive-ui')['NCard']
     NCode: typeof import('naive-ui')['NCode']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
     NFloatButton: typeof import('naive-ui')['NFloatButton']
diff --git a/src/renderer/src/CodeLaunchpadApp.vue b/src/renderer/src/CodeLaunchpadApp.vue
index b80faad..de601d0 100644
--- a/src/renderer/src/CodeLaunchpadApp.vue
+++ b/src/renderer/src/CodeLaunchpadApp.vue
@@ -25,6 +25,7 @@ function handleUpdateValue(key: string): void {
   <div class="codeLaunchpad-container">
     <n-menu
       v-model:value="activeKey"
+      class="codeLaunchpad-menu"
       :options="codeLaunchpadMenuOptions"
       mode="horizontal"
       @update:value="handleUpdateValue"
@@ -38,9 +39,15 @@ function handleUpdateValue(key: string): void {
 <style lang="scss" scoped>
 div.codeLaunchpad-container {
   display: flex;
+  flex: 0 1;
   flex-direction: column;
   overflow: hidden;
   width: 100vw;
   height: 100vh;
+
+  .codeLaunchpad-menu {
+    height: 40px;
+    min-height: 40px;
+  }
 }
 </style>
diff --git a/src/renderer/src/components-code-launchpad/ProjectCard.vue b/src/renderer/src/components-code-launchpad/ProjectCard.vue
new file mode 100644
index 0000000..678476c
--- /dev/null
+++ b/src/renderer/src/components-code-launchpad/ProjectCard.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { IdeProjectDto } from '@my-type/ide-projects'
+import { computed } from 'vue'
+import { toProductDisplayName } from '@my-type/jetbrains-state-tools'
+
+const props = defineProps<{
+  project: IdeProjectDto
+}>()
+
+// 计算属性，返回一个将显示在该卡片上的项目标签列表
+const ideTags = computed(() => {
+  const tags: string[] = []
+  // 如果项目路径拥有 vscode-remote:// 协议，即是 VSCode Remote 项目
+  if (props.project.path.startsWith('vscode-remote://')) tags.push('VS Code 远程')
+  // 项目使用的 IDE
+  for (const ide of props.project.ide) {
+    // 不重复添加 VSCode
+    if (ide === 'VSC' && tags.length === 0) tags.push('VS Code')
+    if (ide !== 'VSC') tags.push(toProductDisplayName(ide) as string)
+  }
+  // 如果项目路径包含 wsl+ 或 wsl.，则认为是在 Windows Subsystem of Linux 中开发的项目
+  if (props.project.path.includes('wsl+') || props.project.path.includes('wsl.')) tags.push('WSL')
+  return tags
+})
+</script>
+
+<template>
+  <n-card>
+    <n-flex justify="left">
+      <n-h4>{{ project.name }}</n-h4>
+      <n-tag v-for="tag in ideTags" :key="tag" round :type="tag === 'WSL' ? 'primary' : 'info'">
+        {{ tag }}
+      </n-tag>
+    </n-flex>
+    <n-ellipsis>{{ project.path }}</n-ellipsis>
+  </n-card>
+</template>
+
+<style scoped></style>
diff --git a/src/renderer/src/pages-code-launchpad/Projects.vue b/src/renderer/src/pages-code-launchpad/Projects.vue
index d879ed0..bf3687d 100644
--- a/src/renderer/src/pages-code-launchpad/Projects.vue
+++ b/src/renderer/src/pages-code-launchpad/Projects.vue
@@ -1,5 +1,53 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ProjectCard from '@renderer/components-code-launchpad/ProjectCard.vue'
+import { useProjects } from '@renderer/stores'
+import { computed, onMounted, ref } from 'vue'
 
-<template></template>
+const projects = useProjects()
 
-<style scoped></style>
+const ide = ref<'VSCode' | 'JetBrains'>('VSCode')
+
+// 此 switch-case 结构已经触及所有情况
+// eslint-disable-next-line vue/return-in-computed-property
+const reverseProjects = computed(() => {
+  switch (ide.value) {
+    case 'VSCode':
+      return projects.vscodeProjects.toReversed()
+    case 'JetBrains':
+      return projects.jetBrainsProjects.toReversed()
+  }
+})
+
+onMounted(() => {
+  if (projects.vscodeProjects.length === 0) {
+    projects.getVSCodeProjects()
+  }
+  if (projects.jetBrainsProjects.length === 0) {
+    projects.getJetBrainsProjects()
+  }
+})
+</script>
+
+<template>
+  <n-button-group class="ide-button-group">
+    <n-button type="primary" secondary round @click="() => (ide = 'VSCode')">VS Code</n-button>
+    <n-button type="primary" secondary round @click="() => (ide = 'JetBrains')">JetBrains</n-button>
+  </n-button-group>
+  <n-flex size="small" vertical>
+    <div v-for="project of reverseProjects" :key="project.path" class="project-card">
+      <ProjectCard :project />
+    </div>
+  </n-flex>
+</template>
+
+<style scoped>
+.ide-button-group {
+  margin-bottom: 8px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.project-card {
+  margin: 0 4px;
+}
+</style>
diff --git a/src/renderer/src/stores.ts b/src/renderer/src/stores.ts
index 059d6f5..0bd93d5 100644
--- a/src/renderer/src/stores.ts
+++ b/src/renderer/src/stores.ts
@@ -7,6 +7,7 @@ import type {
   keyboardShortcut,
   screenPosition
 } from '@my-type/settings'
+import { IdeProjectDto } from '@my-type/ide-projects'
 
 export const useSettings = defineStore('settings', () => {
   const isStayInTray = ref(false)
@@ -101,3 +102,18 @@ export const useIDEs = defineStore('IDEs', () => {
 
   return { ides, versions, getIDEs, checkIDEs, getVersions, checkVersions }
 })
+
+export const useProjects = defineStore('projects', () => {
+  const vscodeProjects = ref<IdeProjectDto[]>([])
+  const jetBrainsProjects = ref<IdeProjectDto[]>([])
+
+  async function getVSCodeProjects(): Promise<void> {
+    vscodeProjects.value = await window.codeLaunchpad._getVSCodeProjects()
+  }
+
+  async function getJetBrainsProjects(): Promise<void> {
+    jetBrainsProjects.value = await window.codeLaunchpad._getJetBrainsProjects()
+  }
+
+  return { vscodeProjects, jetBrainsProjects, getVSCodeProjects, getJetBrainsProjects }
+})