diff --git a/src/pages/tools/starbucks.tsx b/src/pages/tools/starbucks.tsx
new file mode 100644
index 0000000..8a16fc8
--- /dev/null
+++ b/src/pages/tools/starbucks.tsx
@@ -0,0 +1,71 @@
+import dayjs from 'dayjs'
+import HighText from "../../components/HighText";
+import { useOutletContext } from "react-router-dom";
+import { RefObject, useState } from "react";
+import BaseCard from "../../components/BaseCard";
+import { RadioGroup, Radio } from '@chakra-ui/react';
+
+export default function Chapanda() {
+  const [highLight, ref]:[highLight: boolean, ref: RefObject<HTMLDivElement>] = useOutletContext();
+
+  const [type, setType] = useState('1')
+
+  return (
+    <div>
+      <RadioGroup className='border rounded-xl grid grid-cols-2 divide-x mb-4' value={type} onChange={(v)=>{setType(v)}}>
+        <div className='px-3 py-2 flex-1 w-full'>
+          <Radio colorScheme='red' value={'1'}>
+            啡快
+          </Radio>
+        </div>
+        <div className='px-3 py-2 flex-1 w-full'>
+          <Radio colorScheme='green' value={'2'}>
+            外带
+          </Radio>
+        </div>
+      </RadioGroup>
+      <BaseCard ref={ref}>
+        <div className={`w-50 ${!highLight&&'h-100'} p-3 flex flex-col bg-white`}>
+          <div className={`py-1 text-center ${type==='1'?'bg-black text-white':'bg-white text-zinc-900'} font-bold text-xl`}>
+            <HighText show={highLight} text='取餐码' eg='啡快 57076' />
+          </div>
+          <div className='flex justify-between'>
+            <div className="text-md">
+              <HighText show={highLight} text='取餐口令' eg='1.烤红薯' />
+            </div>
+            <div className="text-md font-bold">
+              <HighText show={highLight} text='数量' eg='1of1' />
+            </div>
+          </div>
+          <div className="text-md font-bold">
+            <HighText show={highLight} text='数量' eg='瑞星黑金VIP女士' />
+          </div>
+          <div className="text-[1.4rem] font-bold">
+            <HighText show={highLight} text='属性' eg='大/冰' />
+          </div>
+          <div className="text-[1.4rem] font-bold">
+            <HighText show={highLight} text='餐品' eg='抹茶可碎星冰乐' />
+          </div>
+          <div className="text-[0.95rem] font-bold">
+            <HighText show={highLight} text='英文' eg='G/GreenTeaChipFrap' />
+          </div>
+          <div className="text-[1.4rem] font-bold ml-4">
+            <HighText show={highLight} text='客制化(可换行)' eg='1 Pump榛果' />
+          </div>
+          <div className="flex-1"></div>
+          <div className='text-xs text-center'>
+            <HighText show={highLight} text='小尾巴' eg='建议尽快享用,风味更佳' inputed />
+          </div>
+          <div className='flex gap-6 justify-center items-center'>
+            <div className='text-xs'>
+              <HighText show={highLight} text='日期' eg={dayjs().format('YYYY/MM/DD')} inputed />
+            </div>
+            <div className='text-[0.9rem] font-bold'>
+              <HighText show={highLight} text='时间' eg={dayjs().format('HH:mm')} inputed />
+            </div>
+          </div>
+        </div>
+      </BaseCard>
+    </div>
+  )
+}
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 1ffc182..c43d8a0 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -12,9 +12,9 @@ const hot = ['#FEE2E2','#DC2626']
 const list = {
   done: [
     {
-      name: ['人生四格', '50mm*150mm'],
-      logo: '/images/rssg.webp',
-      url: '/tools/rssg',
+      name: ['星巴克', '咖啡标签'],
+      logo: '/images/starbucks.png',
+      url: '/tools/starbucks',
       tag: '新上线',
       tag_color: ['#dcfce7','#16a34a']
     },
@@ -22,8 +22,15 @@ const list = {
       name: ['人生二格', '85mm*54mm 明信片'],
       logo: '/images/rslg.webp',
       url: '/tools/rseg',
-      tag: '新上线',
-      tag_color: ['#dcfce7','#16a34a']
+      tag: '热门',
+      tag_color: hot
+    },
+    {
+      name: ['人生四格', '50mm*150mm'],
+      logo: '/images/rssg.webp',
+      url: '/tools/rssg',
+      tag: '',
+      tag_color: []
     },
     {
       name: ['Instagram', '三寸 小卡/透卡'],
@@ -139,10 +146,6 @@ const list = {
     },
   ],
   todo: [
-    {
-      name: ['星巴克', '咖啡标签'],
-      logo: '/images/starbucks.png',
-    },
     {
       name: ['茶颜悦色', '奶茶标签'],
       logo: '/images/sexytea.png',