diff --git a/index.html b/index.html
index 62fc1fe..2573495 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>test-ssg</title>
-	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_70xz405a1wg.css" />
+	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_cf4g5f65ci.css" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/pages/my-account/orders.vue b/src/pages/my-account/orders.vue
index f1de261..4858c82 100644
--- a/src/pages/my-account/orders.vue
+++ b/src/pages/my-account/orders.vue
@@ -1,8 +1,6 @@
 <template>
 	<div class="orders">
-		<tip-box>
-			<router-link class="link" to="/">Browse products</router-link>
-		</tip-box>
+		<tip-box type="warning" title="No order has been made yet." />
 	</div>
 </template>
 <script setup lang="ts">
diff --git a/src/pages/my-account/subscriptions.vue b/src/pages/my-account/subscriptions.vue
new file mode 100644
index 0000000..b630702
--- /dev/null
+++ b/src/pages/my-account/subscriptions.vue
@@ -0,0 +1,15 @@
+<template>
+	<div class="subscriptions">
+		<tip-box type="success" title="You have no active subscriptions." />
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import tipBox from './tip-box.vue'
+</script>
+
+<style scoped lang="less">
+	.subscriptions {
+		width: 100%;
+	}
+</style>
diff --git a/src/pages/my-account/tip-box.vue b/src/pages/my-account/tip-box.vue
index ab35cb4..4da705f 100644
--- a/src/pages/my-account/tip-box.vue
+++ b/src/pages/my-account/tip-box.vue
@@ -1,12 +1,20 @@
 <template>
 	<div class="tip-box">
-		<span class="iconfont icon-info"></span>
-		<div class="tip">No order has been made yet.</div>
-		<slot></slot>
+		<span class="iconfont" :class="[`icon-${type}`]"></span>
+		<div class="tip">{{ title }}</div>
+		<router-link v-if="isShowLink" class="link" to="/">Browse products</router-link>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	const props = defineProps({
+		type: {
+			default: 'warning',
+			type: String as () => 'success' | 'warning'
+		},
+		title: { default: '', type: String },
+		isShowLink: { default: true, type: Boolean }
+	})
 </script>
 
 <style scoped lang="less">
@@ -18,12 +26,16 @@
 		display: flex;
 		align-items: center;
 		padding: 0 20px;
-		> .tip {
-			flex: 1;
-		}
 		> * {
 			color: #fff;
 			font-size: 16px;
 		}
+		> .iconfont {
+			margin-right: 10px;
+			font-size: 18px;
+		}
+		> .tip {
+			flex: 1;
+		}
 	}
 </style>
diff --git a/src/routes.ts b/src/routes.ts
index bd3eb1b..aa1e013 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -49,6 +49,10 @@ export const routes: RouteRecordRaw[] = [
 						path: 'orders',
 						component: () => import('./pages/my-account/orders.vue'),
 					},
+					{
+						path: 'subscriptions',
+						component: () => import('./pages/my-account/subscriptions.vue'),
+					},
 					{
 						path: ':pathMatch(.*)*',
 						component: () => import('./pages/my-account/welcome.vue'),
