diff --git a/src/router/index.ts b/src/router/index.ts
index 8f3579d..5f80785 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,6 +47,11 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '',
                 name: 'installer.index',
+                component: () => import('@/views/Installer/HYP.vue'),
+            },
+            {
+                path: '',
+                name: 'installer.legacy',
                 component: () => import('@/views/Installer/Index.vue'),
             },
         ],
diff --git a/src/typings/hyp.ts b/src/typings/hyp.ts
new file mode 100644
index 0000000..b60e412
--- /dev/null
+++ b/src/typings/hyp.ts
@@ -0,0 +1,138 @@
+export interface HYPGame {
+    biz: string
+    biz_extra: string
+    display: {
+        background: {
+            link: string
+            url: string
+        }
+        icon: {
+            hover_url: string
+            link: string
+            url: string
+        }
+        language: string
+        logo: {
+            link: string
+            url: string
+        }
+        name: string
+        subtitle: string
+        thumbnail: {
+            link: string
+            url: string
+        }
+        title: string
+    }
+    display_status: string
+    id: string
+    reservation?: {
+        link: string
+    }
+}
+
+export interface HYPType {
+    game_channel_sdks: Array<{
+        channel_sdk_pkg: {
+            decompressed_size: string
+            md5: string
+            size: string
+            url: string
+        }
+        game: {
+            biz: string
+            biz_extra: string
+            id: string
+        }
+        pkg_version_file_name: string
+        version: string
+    }>
+    game_packages: Array<{
+        game: {
+            biz: string
+            biz_extra: string
+            id: string
+        }
+        main: {
+            major: {
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }
+            patches: Array<{
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }>
+        }
+        pre_download: {
+            major?: {
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }
+            patches: Array<{
+                audio_pkgs: Array<{
+                    decompressed_size: string
+                    language: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                game_pkgs: Array<{
+                    decompressed_size: string
+                    md5: string
+                    size: string
+                    url: string
+                }>
+                res_list_url: string
+                version: string
+            }>
+        }
+    }>
+    games: HYPGame[]
+    last_modified: string
+}
+
+export interface HYPGameItem extends HYPGame {
+    game_channel_sdks: HYPType['game_channel_sdks']
+    game_packages: HYPType['game_packages']
+    biz_short: string
+    biz_region: string
+}
diff --git a/src/views/Installer/HYP.vue b/src/views/Installer/HYP.vue
new file mode 100644
index 0000000..33a4431
--- /dev/null
+++ b/src/views/Installer/HYP.vue
@@ -0,0 +1,189 @@
+el-message
+<template>
+    <Layout full-height>
+        <template #title>
+            <div class="teleport-title">PC 端更新包列表</div>
+        </template>
+        <template #actions>
+            <router-link :to="{ name: 'installer.legacy' }">
+                <el-button type="info" plain>返回旧版启动器</el-button>
+            </router-link>
+        </template>
+        <div v-elloading="loading" :class="$style.page">
+            <el-scrollbar>
+                <el-tabs
+                    :model-value="($route.query.type || 'hk4e_cn').toString()"
+                    @update:model-value="
+                        $router.replace({ query: { type: $event === 'hk4e_cn' ? undefined : $event } })
+                    "
+                >
+                    <el-tab-pane v-for="i in computedData" :key="i.biz_extra" :name="i.biz_extra">
+                        <template #label>
+                            <span :class="$style.bizName">
+                                {{ i.display.name }}
+                                <el-tag v-if="i.biz_region === 'global'" size="small" type="primary">国际</el-tag>
+                                <el-tag v-else-if="i.biz_region === 'bili'" size="small" class="el-tag--pink">
+                                    BiliBili
+                                </el-tag>
+                            </span>
+                        </template>
+                        <div style="margin: 0 20px">
+                            <el-alert v-if="hypResult?.last_modified" type="info" :show-icon="false" :closable="false">
+                                数据更新于 {{ dayjs(hypResult.last_modified).format('YYYY-MM-DD HH:mm:ss') }}
+                            </el-alert>
+                        </div>
+                        <HYPCard v-if="i.game_packages?.length > 0" :item="i" />
+                        <el-empty v-else description="暂无更新包" />
+                    </el-tab-pane>
+                </el-tabs>
+                <div v-if="!loading"></div>
+            </el-scrollbar>
+        </div>
+    </Layout>
+</template>
+
+<script lang="ts">
+import '@/styles/actions.scss'
+import { ref, onMounted, defineComponent, watch, computed } from 'vue'
+import {
+    faBoxOpen,
+    faFileAudio,
+    faAngleRight,
+    faHashtag,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+    faCodeMerge,
+} from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { ElNotification } from 'element-plus'
+import dayjs from 'dayjs'
+library.add(
+    faBoxOpen,
+    faAngleRight,
+    faFileAudio,
+    faHashtag,
+    faCodeMerge,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+)
+import { vLoading } from 'element-plus/es/components/loading/src/directive'
+import 'element-plus/theme-chalk/el-loading.css'
+import 'element-plus/theme-chalk/el-notification.css'
+import { urls } from './urls'
+import { useRoute } from 'vue-router'
+import { apibase } from '@/utils/apibase'
+import { HYPGameItem, HYPType } from '@/typings/hyp'
+import HYPCard from './HYPCard.vue'
+export default defineComponent({
+    name: 'InstallerHyp',
+    directives: {
+        elloading: vLoading,
+    },
+    components: {
+        HYPCard,
+    },
+    setup() {
+        const loading = ref(true)
+        const route = useRoute()
+        const hypResult = ref<HYPType | null>(null)
+        const load = async () => {
+            loading.value = true
+            return fetch(await apibase('/v2/hyp/packages'))
+                .then((res) => {
+                    return res.json()
+                })
+                .then((res) => {
+                    loading.value = false
+                    hypResult.value = res
+                })
+                .catch((err) => {
+                    ElNotification.error({
+                        title: '出错了',
+                        message: err.message,
+                    })
+                })
+        }
+        onMounted(load)
+        const basename = (path: string) => {
+            const pathArr = path.split('/')
+            return pathArr[pathArr.length - 1]
+        }
+        const formatSize = (size: number) => {
+            if (size < 1024) {
+                return `${size}B`
+            } else if (size < 1024 * 1024) {
+                return `${(size / 1024).toFixed(2)}KB`
+            } else if (size < 1024 * 1024 * 1024) {
+                return `${(size / 1024 / 1024).toFixed(2)}MB`
+            } else {
+                return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`
+            }
+        }
+        const sortBy = ['hk4e', 'hkrpg', 'bh3', 'nap']
+        const computedData = computed(() => {
+            return hypResult.value?.games
+                .map((i) => {
+                    return {
+                        ...i,
+                        game_packages: hypResult.value?.game_packages.filter((j) => j.game.id === i.id),
+                        game_channel_sdks: hypResult.value?.game_channel_sdks.filter((j) => j.game.id === i.id),
+                        biz_short: i.biz_extra.split('_')[0],
+                        biz_region: i.biz_extra.split('_')[1],
+                    } as HYPGameItem
+                })
+                .sort((a, b) => {
+                    const biz_first_a = a.biz_extra.split('_')[0]
+                    const biz_first_b = b.biz_extra.split('_')[0]
+                    return sortBy.indexOf(biz_first_a) - sortBy.indexOf(biz_first_b)
+                })
+        })
+        return {
+            loading,
+            basename,
+            formatSize,
+            urls,
+            hypResult,
+            computedData,
+            dayjs,
+        }
+    },
+})
+</script>
+<style lang="scss" module>
+.page {
+    height: 100%;
+    background: var(--c-background);
+    :global {
+        .el-tabs__nav-scroll {
+            padding: 0 20px;
+        }
+    }
+}
+.bizName {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    :global {
+        .el-tag--small {
+            height: 16px;
+            padding: 0 3px;
+        }
+        .el-tag--pink {
+            --el-tag-border-color: #fb7299;
+            --el-tag-text-color: #fb7299;
+        }
+    }
+
+    :global(.dark) & {
+        :global {
+            .el-tag--pink {
+                opacity: 0.7;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/Installer/HYPCard.vue b/src/views/Installer/HYPCard.vue
new file mode 100644
index 0000000..3fda889
--- /dev/null
+++ b/src/views/Installer/HYPCard.vue
@@ -0,0 +1,352 @@
+<template>
+    <div :class="$style.hypCard">
+        <el-card v-if="(item?.game_channel_sdks?.length || 0) > 0" class="title-card" header="SDK（渠道服专用）">
+            <a
+                v-for="sdk in item?.game_channel_sdks"
+                class="d-link"
+                :href="sdk.channel_sdk_pkg.url"
+                target="_blank"
+                rel="noreferrer"
+            >
+                <div class="icon">
+                    <fa-icon icon="house-laptop"></fa-icon>
+                </div>
+                <div class="center">
+                    <div class="name">{{ sdk.version }}.zip</div>
+                    <div class="meta">
+                        <span> <fa-icon icon="file-zipper" /> {{ formatSize(Number(sdk.channel_sdk_pkg.size)) }}</span>
+                        <span> <fa-icon icon="database" /> {{ formatSize(Number(sdk.channel_sdk_pkg.size)) }}</span>
+                        <span> <fa-icon icon="hashtag" /> {{ sdk.channel_sdk_pkg.md5 }} </span>
+                    </div>
+                </div>
+                <div class="right">
+                    <fa-icon icon="angle-right"></fa-icon>
+                </div>
+            </a>
+        </el-card>
+        <template v-for="game in item?.game_packages">
+            <template v-for="m in ['pre_download', 'main'] as const">
+                <div v-if="game[m] && game[m].major" :key="m">
+                    <el-card
+                        class="title-card"
+                        :header="`${m === 'main' ? '最新版本' : '预下载'}：${game[m].major?.version}`"
+                    >
+                        <a
+                            v-if="game[m].major?.game_pkgs.length === 1"
+                            class="d-link"
+                            :href="game[m].major?.game_pkgs[0].url"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <div class="icon">
+                                <fa-icon icon="box-open"></fa-icon>
+                            </div>
+                            <div class="center">
+                                <div class="name">{{ basename(game[m].major?.game_pkgs[0].url || '') }}</div>
+                                <div class="meta">
+                                    <span>
+                                        <fa-icon icon="file-zipper" />
+                                        {{ formatSize(Number(game[m].major?.game_pkgs[0].size)) }}
+                                    </span>
+                                    <span>
+                                        <fa-icon icon="database" />
+                                        {{ formatSize(Number(game[m].major?.game_pkgs[0].decompressed_size)) }}
+                                    </span>
+                                    <span> <fa-icon icon="hashtag" /> {{ game[m].major?.game_pkgs[0].md5 }} </span>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <fa-icon icon="angle-right"></fa-icon>
+                            </div>
+                        </a>
+                        <div v-else class="d-seg">
+                            <div class="d-text">
+                                <div class="icon">
+                                    <fa-icon icon="code-merge"></fa-icon>
+                                </div>
+                                <div class="center">
+                                    <div class="name">分卷包</div>
+                                    <div class="meta">
+                                        <span>
+                                            <fa-icon icon="file-zipper" /> 共
+                                            {{
+                                                formatSize(
+                                                    game[m].major?.game_pkgs.reduce((a, b) => a + Number(b.size), 0) ||
+                                                        0,
+                                                )
+                                            }}
+                                        </span>
+                                        <span>
+                                            <fa-icon icon="database" /> 共
+                                            {{
+                                                formatSize(
+                                                    game[m].major?.game_pkgs.reduce(
+                                                        (a, b) => a + Number(b.decompressed_size),
+                                                        0,
+                                                    ) || 0,
+                                                )
+                                            }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="seg-list">
+                                <a
+                                    v-for="i in game[m].major?.game_pkgs"
+                                    :key="i.url"
+                                    :href="i.url"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    class="d-link d-small"
+                                >
+                                    <div class="icon">
+                                        <fa-icon icon="box-open"></fa-icon>
+                                    </div>
+                                    <div class="center">
+                                        <div class="meta meta-slim">
+                                            <span class="seg-name">{{ basename(i.url) }}</span>
+                                            <span style="width: 250px"> <fa-icon icon="hashtag" /> {{ i.md5 }} </span>
+                                            <span>
+                                                <fa-icon icon="file-zipper" /> {{ formatSize(Number(i.size)) }}
+                                            </span>
+                                            <span>
+                                                <fa-icon icon="database" />
+                                                {{ formatSize(Number(i.decompressed_size)) }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="right">
+                                        <fa-icon icon="angle-right"></fa-icon>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <el-divider v-if="game[m].major?.audio_pkgs && (game[m].major?.audio_pkgs?.length || 0) > 0"
+                            >语音包</el-divider
+                        >
+                        <a
+                            v-for="i in game[m].major?.audio_pkgs"
+                            :key="i.md5"
+                            class="d-link list-link"
+                            :href="i.url"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <div class="icon">
+                                <fa-icon icon="file-audio"></fa-icon>
+                            </div>
+                            <div class="center">
+                                <div class="name">{{ basename(i.url) }}</div>
+                                <div class="meta">
+                                    <span> <fa-icon icon="file-zipper" /> {{ formatSize(Number(i.size)) }}</span>
+                                    <span>
+                                        <fa-icon icon="database" /> {{ formatSize(Number(i.decompressed_size)) }}</span
+                                    >
+                                    <span> <fa-icon icon="hashtag" /> {{ i.md5 }} </span>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <fa-icon icon="angle-right"></fa-icon>
+                            </div>
+                        </a>
+                    </el-card>
+                    <el-card v-for="z in game[m].patches" :key="z.version" class="title-card" header="增量包">
+                        <a
+                            v-for="i in z.game_pkgs"
+                            :key="i.url"
+                            class="d-link"
+                            :href="i.url"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <div class="icon">
+                                <fa-icon icon="calendar-plus"></fa-icon>
+                            </div>
+                            <div class="center">
+                                <div class="name">{{ basename(i.url) }}</div>
+                                <div class="meta">
+                                    <span> <fa-icon icon="file-zipper" /> {{ formatSize(Number(i.size)) }}</span>
+                                    <span>
+                                        <fa-icon icon="database" /> {{ formatSize(Number(i.decompressed_size)) }}</span
+                                    >
+                                    <span> <fa-icon icon="hashtag" /> {{ i.md5 }} </span>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <fa-icon icon="angle-right"></fa-icon>
+                            </div>
+                        </a>
+                        <el-divider v-if="z.audio_pkgs.length > 0">语音包</el-divider>
+                        <a
+                            v-for="i in z.audio_pkgs"
+                            :key="i.url"
+                            class="d-link list-link"
+                            :href="i.url"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            <div class="icon">
+                                <fa-icon icon="file-audio"></fa-icon>
+                            </div>
+                            <div class="center">
+                                <div class="name">{{ basename(i.url) }}</div>
+                                <div class="meta">
+                                    <span> <fa-icon icon="file-zipper" /> {{ formatSize(Number(i.size)) }}</span>
+                                    <span>
+                                        <fa-icon icon="database" /> {{ formatSize(Number(i.decompressed_size)) }}</span
+                                    >
+                                    <span> <fa-icon icon="hashtag" /> {{ i.md5 }} </span>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <fa-icon icon="angle-right"></fa-icon>
+                            </div>
+                        </a>
+                    </el-card>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import '@/styles/actions.scss'
+import { defineComponent } from 'vue'
+import {
+    faBoxOpen,
+    faFileAudio,
+    faAngleRight,
+    faHashtag,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+    faCodeMerge,
+} from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { HYPGameItem } from '@/typings/hyp'
+library.add(
+    faBoxOpen,
+    faAngleRight,
+    faFileAudio,
+    faHashtag,
+    faCodeMerge,
+    faDatabase,
+    faFileZipper,
+    faCalendarPlus,
+    faHouseLaptop,
+)
+export default defineComponent({
+    name: 'HYPCard',
+    props: {
+        item: Object as () => HYPGameItem,
+    },
+    setup() {
+        const basename = (path: string) => {
+            const pathArr = path.split('/')
+            return pathArr[pathArr.length - 1]
+        }
+        const formatSize = (size: number) => {
+            if (size < 1024) {
+                return `${size}B`
+            } else if (size < 1024 * 1024) {
+                return `${(size / 1024).toFixed(2)}KB`
+            } else if (size < 1024 * 1024 * 1024) {
+                return `${(size / 1024 / 1024).toFixed(2)}MB`
+            } else {
+                return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`
+            }
+        }
+        return {
+            basename,
+            formatSize,
+        }
+    },
+})
+</script>
+<style lang="scss" module>
+.hyp-card {
+    :global(.dark) & {
+        --el-bg-color: var(--el-bg-color-overlay);
+    }
+    :global {
+        .title-card {
+            margin: 20px;
+        }
+        .d-link,
+        .d-text {
+            display: block;
+            text-decoration: none;
+            border-radius: 5px;
+            color: var(--c-text);
+            box-sizing: border-box;
+            position: relative;
+            display: flex;
+            align-items: center;
+            transition: all 0.3s;
+
+            .icon {
+                font-size: 27px;
+                height: 100%;
+                float: left;
+                line-height: 53px;
+                width: 53px;
+                text-align: center;
+            }
+
+            .right {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                opacity: 0.8;
+                line-height: 53px;
+                padding-right: 15px;
+            }
+
+            .meta {
+                opacity: 0.7;
+                font-size: 12px;
+                span {
+                    margin-right: 10px;
+                    min-width: 80px;
+                    display: inline-block;
+                }
+            }
+            &.d-small {
+                height: 35px;
+                margin-top: 12px;
+                .icon,
+                .right {
+                    font-size: 16px;
+                    line-height: 33px;
+                }
+            }
+        }
+        .d-link {
+            border: 1px solid var(--c-border);
+            height: 55px;
+            &:hover {
+                color: #0079cc;
+                border-color: #0079cc;
+            }
+            &.list-link {
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+:global(.m) .hyp-card {
+    :global {
+        .title-card {
+            margin: 20px 0;
+            .name {
+                max-width: 60vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/Installer/Index.vue b/src/views/Installer/Index.vue
index 659d6e4..36f3383 100644
--- a/src/views/Installer/Index.vue
+++ b/src/views/Installer/Index.vue
@@ -3,7 +3,11 @@
         <template #title>
             <div class="teleport-title">PC 端更新包列表</div>
         </template>
-        <template #actions></template>
+        <template #actions>
+            <router-link :to="{ name: 'installer.index' }">
+                <el-button type="info" plain>转到米哈游启动器</el-button>
+            </router-link>
+        </template>
         <div v-elloading="loading" :class="$style.page">
             <el-scrollbar>
                 <el-tabs