diff --git a/src/app/helper.tsx b/src/app/helper.tsx
index 743b87c..2ef1d56 100644
--- a/src/app/helper.tsx
+++ b/src/app/helper.tsx
@@ -218,19 +218,26 @@ export default function Home() {
   }, []);
 
   // 换肤/换背景相关
+  const [skinOpen, setSkinOpen] = useState(false);
+  const [bgOpen, setBgOpen] = useState(false);
 
   return (
-    <main className="w-full h-full bg-blue-200">
+    // TODO: 背景状态
+    <main className="w-full h-full bg-[url('http://picdown.jchysoft.com/live2d/beijing/bj1%20%281%29.webp')] bg-center bg-cover">
       {typeof window !== "undefined" &&
         typeof window.Live2DCubismCore !== "undefined" && (
           <div className="flex w-full flex-col h-full items-center justify-center relative text-white">
             {/* live2d */}
+            {/* TODO: live2d模型状态 */}
             <canvas className="w-full " id="canvas"></canvas>
 
             {/* 角色信息 */}
             <div className="absolute left-[4vw] top-8 bg-gradient-to-r from-start-color to-end-color rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
               <div className="w-10 h-10 rounded-full bg-white"></div>
               <div className="text-xl">昵称</div>
+              {/* <div className="flex flex-col justify-evenly">
+                <div className="text-xs">亲密度</div>
+              </div> */}
             </div>
 
             {/* 消息泡泡 */}
@@ -243,7 +250,7 @@ export default function Home() {
               {opList.map((item) => (
                 <div
                   key={item.id}
-                  className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
+                  className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center p-1"
                 >
                   <div className="w-6 h-6 overflow-hidden">
                     <img
@@ -258,8 +265,26 @@ export default function Home() {
               ))}
             </div>
 
-            {/* 皮肤/背景列表 */}
-            <SkinOrBgList type="skin" list={fakeList} />
+            {/* 皮肤列表 */}
+            {skinOpen && (
+              <SkinOrBgList
+                type="skin"
+                list={fakeList}
+                onSelect={(type, selectedItem) => {
+                  console.log("选中的新的皮肤", type, selectedItem);
+                }}
+              />
+            )}
+            {/* 背景列表 */}
+            {bgOpen && (
+              <SkinOrBgList
+                type="bg"
+                list={fakeList2}
+                onSelect={(type, selectedItem) => {
+                  console.log("选中的新的背景", type, selectedItem);
+                }}
+              />
+            )}
 
             {/* 底部换肤 & 换背景 */}
             <div className="absolute w-[90vw] bottom-14 left-1/2 -translate-x-1/2 flex flex-nowrap items-center justify-between">
@@ -267,6 +292,10 @@ export default function Home() {
                 className="w-12 h-12 overflow-hidden"
                 onClick={() => {
                   console.log("换肤");
+                  if (bgOpen && !skinOpen) {
+                    setBgOpen(false);
+                  }
+                  setSkinOpen(!skinOpen);
                 }}
               >
                 <img
@@ -279,6 +308,10 @@ export default function Home() {
                 className="w-12 h-12 overflow-hidden"
                 onClick={() => {
                   console.log("换背景");
+                  if (skinOpen && !bgOpen) {
+                    setSkinOpen(false);
+                  }
+                  setBgOpen(!bgOpen);
                 }}
               >
                 <img
@@ -347,34 +380,73 @@ export default function Home() {
 }
 
 const fakeList = [
-  { id: 1, src: "", name: "皮肤1" },
-  { id: 2, src: "", name: "皮肤2" },
-  { id: 3, src: "", name: "皮肤3" },
-  { id: 4, src: "", name: "皮肤4" },
-  { id: 5, src: "", name: "皮肤5" },
-  { id: 6, src: "", name: "皮肤6" },
-  { id: 7, src: "", name: "皮肤7" },
-  { id: 8, src: "", name: "皮肤8" },
-  { id: 9, src: "", name: "皮肤9" },
-  { id: 10, src: "", name: "皮肤10" },
+  { id: 1, src: "", name: "皮肤1", state: 1 },
+  { id: 2, src: "", name: "皮肤2", state: 1 },
+  { id: 3, src: "", name: "皮肤3", state: 0 },
+  { id: 4, src: "", name: "皮肤4", state: 0 },
+  { id: 5, src: "", name: "皮肤5", state: 0 },
+  { id: 6, src: "", name: "皮肤6", state: 0 },
+  { id: 7, src: "", name: "皮肤7", state: 0 },
+  { id: 8, src: "", name: "皮肤8", state: 0 },
+  { id: 9, src: "", name: "皮肤9", state: 0 },
+  { id: 10, src: "", name: "皮肤10", state: 0 },
+];
+const fakeList2 = [
+  { id: 1, src: "", name: "背景1", state: 1 },
+  { id: 2, src: "", name: "背景2", state: 1 },
+  { id: 3, src: "", name: "背景3", state: 0 },
+  { id: 4, src: "", name: "背景4", state: 0 },
+  { id: 5, src: "", name: "背景5", state: 0 },
+  { id: 6, src: "", name: "背景6", state: 0 },
+  { id: 7, src: "", name: "背景7", state: 0 },
+  { id: 8, src: "", name: "背景8", state: 0 },
+  { id: 9, src: "", name: "背景9", state: 0 },
+  { id: 10, src: "", name: "背景10", state: 0 },
 ];
 
-type listItem = { id: number; src: string; name: string };
+type listItem = { id: number; src: string; name: string; state: number };
 export const SkinOrBgList = ({
   type,
   list,
+  onSelect,
 }: {
   type: "skin" | "bg";
   list: listItem[];
+  onSelect: (type: "skin" | "bg", item: listItem) => void;
 }) => {
+  function handleSelect(selectedItem: listItem) {
+    if (selectedItem.state == 0) {
+      console.log("未解锁，不可用");
+      // TODO: 解锁操作
+      return;
+    }
+    onSelect(type, selectedItem);
+  }
+
   return (
     <div className="absolute left-1/2 -translate-x-1/2 bottom-24 mb-4 w-[90vw] h-32 bg-white bg-opacity-30 rounded-2xl py-4 px-6 flex flex-nowrap gap-2 overflow-x-auto">
       {list.map((item) => (
         <div
+          onClick={() => handleSelect(item)}
           key={item.id}
-          className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0"
+          className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0 relative overflow-hidden"
         >
           {item.name}
+          <img
+            className="absolute top-0 left-0 w-full h-full object-cover"
+            src="https://iconfont.alicdn.com/p/illus/preview_image/eZQFvSX6g8f1/70d91c51-e6b0-408c-84c5-50174d24a059.png"
+            alt={`${item.name}图片`}
+          />
+          {item.state == 0 && (
+            <>
+              <div className="absolute top-0 left-0 w-full h-full bg-white bg-opacity-30"></div>
+              <img
+                className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 z-10 w-1/2 h-auto"
+                src="http://picdown.jchysoft.com/uiIcon/weijiesuo.png"
+                alt="未解锁"
+              />
+            </>
+          )}
         </div>
       ))}
     </div>