diff --git a/shared/src/commonMain/composeResources/drawable/bg_login.png b/shared/src/commonMain/composeResources/drawable/bg_login.png
new file mode 100644
index 0000000..155efeb
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/bg_login.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/bg_login_fullscreen.png b/shared/src/commonMain/composeResources/drawable/bg_login_fullscreen.png
new file mode 100644
index 0000000..dfa5339
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/bg_login_fullscreen.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/bg_userinfo_guide.png b/shared/src/commonMain/composeResources/drawable/bg_userinfo_guide.png
new file mode 100644
index 0000000..03bc3b8
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/bg_userinfo_guide.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/bg_welcome.png b/shared/src/commonMain/composeResources/drawable/bg_welcome.png
new file mode 100644
index 0000000..f1b538f
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/bg_welcome.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_arrow_right.png b/shared/src/commonMain/composeResources/drawable/ic_arrow_right.png
new file mode 100644
index 0000000..2a978c4
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_arrow_right.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_connect_tip.png b/shared/src/commonMain/composeResources/drawable/ic_connect_tip.png
new file mode 100644
index 0000000..a001c0f
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_connect_tip.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_domain_hand_left.png b/shared/src/commonMain/composeResources/drawable/ic_domain_hand_left.png
new file mode 100644
index 0000000..183d3eb
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_domain_hand_left.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_domain_hand_right.png b/shared/src/commonMain/composeResources/drawable/ic_domain_hand_right.png
new file mode 100644
index 0000000..2372497
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_domain_hand_right.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_uapp_checked.png b/shared/src/commonMain/composeResources/drawable/ic_uapp_checked.png
new file mode 100644
index 0000000..69208ba
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_uapp_checked.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_uapp_uncheck.png b/shared/src/commonMain/composeResources/drawable/ic_uapp_uncheck.png
new file mode 100644
index 0000000..691e952
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_uapp_uncheck.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_left.png b/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_left.png
new file mode 100644
index 0000000..ec4dfed
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_left.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_right.png b/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_right.png
new file mode 100644
index 0000000..bcce0f2
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_unuse_hand_right.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_use_hand_left.png b/shared/src/commonMain/composeResources/drawable/ic_use_hand_left.png
new file mode 100644
index 0000000..df1b10c
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_use_hand_left.png differ
diff --git a/shared/src/commonMain/composeResources/drawable/ic_use_hand_right.png b/shared/src/commonMain/composeResources/drawable/ic_use_hand_right.png
new file mode 100644
index 0000000..b00f103
Binary files /dev/null and b/shared/src/commonMain/composeResources/drawable/ic_use_hand_right.png differ
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt
index 959e681..1ea7bd4 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt
@@ -1,5 +1,6 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -8,11 +9,16 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.bg_userinfo_guide
+import ring.shared.generated.resources.ic_connect_tip
 
 @Composable
 fun ConnectionGuideScreen(
@@ -23,116 +29,74 @@ fun ConnectionGuideScreen(
             .fillMaxSize()
             .background(Color(0xFFF5F5F5))
     ) {
+
+        Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
+
         Column(
             modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = 24.dp),
+                .fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Spacer(modifier = Modifier.height(80.dp))
-            
+            Spacer(modifier = Modifier.height(62.dp))
+
             // 标题
             Text(
                 text = "连接您的Acti戒指",
                 fontSize = 24.sp,
                 fontWeight = FontWeight.Medium,
-                color = Color(0xFF333333),
+                color = Color(0xFF484848),
                 textAlign = TextAlign.Center,
                 modifier = Modifier.fillMaxWidth()
             )
-            
-            Spacer(modifier = Modifier.height(40.dp))
-            
+
+            Spacer(modifier = Modifier.height(22.dp))
+
             // 说明文字
             Text(
                 text = "将您的戒指连接到充电器，并继续下一步。请确保您的手机已启用蓝牙功能。",
-                fontSize = 16.sp,
-                color = Color(0xFF666666),
+                fontSize = 20.sp,
+                color = Color(0xff484848),
                 textAlign = TextAlign.Center,
                 lineHeight = 24.sp,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(horizontal = 16.dp)
+                    .padding(horizontal = 44.dp)
             )
-            
-            Spacer(modifier = Modifier.height(60.dp))
-            
-            // 戒指和充电器图片占位符
-            Box(
-                modifier = Modifier
-                    .size(280.dp)
-                    .background(
-                        Color.White,
-                        RoundedCornerShape(20.dp)
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    // 戒指图标
-                    Text(
-                        text = "💍",
-                        fontSize = 80.sp
-                    )
-                    
-                    Spacer(modifier = Modifier.height(20.dp))
-                    
-                    // 连接线
-                    Box(
-                        modifier = Modifier
-                            .width(60.dp)
-                            .height(4.dp)
-                            .background(
-                                Color(0xFF007AFF),
-                                RoundedCornerShape(2.dp)
-                            )
-                    )
-                    
-                    Spacer(modifier = Modifier.height(20.dp))
-                    
-                    // 充电器图标
-                    Box(
-                        modifier = Modifier
-                            .size(80.dp)
-                            .background(
-                                Color(0xFF333333),
-                                RoundedCornerShape(40.dp)
-                            ),
-                        contentAlignment = Alignment.Center
-                    ) {
-                        Text(
-                            text = "⚡",
-                            fontSize = 40.sp,
-                            color = Color.White
-                        )
-                    }
-                }
-            }
-            
+
             Spacer(modifier = Modifier.weight(1f))
-            
+
+            Image(
+                painterResource(Res.drawable.ic_connect_tip),
+                contentDescription = null,
+                modifier = Modifier.fillMaxWidth().height(375.dp),
+                contentScale = ContentScale.Crop
+            )
+
+            Spacer(modifier = Modifier.height(53.dp))
+
+
             // 下一步按钮
             Button(
                 onClick = onNextClick,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(56.dp),
-                shape = RoundedCornerShape(28.dp),
+                    .height(51.dp)
+                    .padding(horizontal = 36.dp),
+                shape = RoundedCornerShape(30.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = Color(0xFF007AFF),
+                    containerColor = Color(0x8098999B),
                     contentColor = Color.White
                 )
             ) {
                 Text(
                     text = "下一步",
                     fontSize = 18.sp,
-                    fontWeight = FontWeight.Medium
+                    fontWeight = FontWeight.Medium,
+                    color = Color.Black
                 )
             }
-            
-            Spacer(modifier = Modifier.height(40.dp))
+
+            Spacer(modifier = Modifier.height(53.dp))
         }
     }
 }
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt
index 384b325..976972d 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt
@@ -1,20 +1,43 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.bg_userinfo_guide
+import ring.shared.generated.resources.ic_domain_hand_left
+import ring.shared.generated.resources.ic_domain_hand_right
 
 @Composable
 fun DominantHandScreen(
@@ -22,7 +45,8 @@ fun DominantHandScreen(
     onHandSelected: (Hand) -> Unit = {}
 ) {
     var selectedHand by remember { mutableStateOf<Hand?>(null) }
-    
+    Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -35,30 +59,30 @@ fun DominantHandScreen(
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             Spacer(modifier = Modifier.height(80.dp))
-            
+
             // 标题
             Text(
                 text = "惯用手",
                 fontSize = 24.sp,
                 fontWeight = FontWeight.Medium,
                 color = Color(0xFF333333),
-                textAlign = TextAlign.Center,
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
-            
+
             Spacer(modifier = Modifier.height(16.dp))
-            
+
             // 副标题
             Text(
                 text = "请选择您的惯用手",
-                fontSize = 16.sp,
-                color = Color(0xFF666666),
-                textAlign = TextAlign.Center,
+                fontSize = 12.sp,
+                color = Color(0xFF484848),
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
-            
+
             Spacer(modifier = Modifier.height(80.dp))
-            
+
             // 选择区域
             Row(
                 modifier = Modifier.fillMaxWidth(),
@@ -74,7 +98,7 @@ fun DominantHandScreen(
                     },
                     modifier = Modifier.weight(1f)
                 )
-                
+
                 // 右手选项
                 HandOptionCard(
                     hand = Hand.RIGHT,
@@ -86,29 +110,32 @@ fun DominantHandScreen(
                     modifier = Modifier.weight(1f)
                 )
             }
-            
+
             Spacer(modifier = Modifier.weight(1f))
-            
+
             // 下一步按钮
             Button(
                 onClick = onNextClick,
                 enabled = selectedHand != null,
                 modifier = Modifier
                     .fillMaxWidth()
+                    .padding(horizontal = 12.dp)
                     .height(56.dp),
                 shape = RoundedCornerShape(28.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = if (selectedHand != null) Color(0xFF007AFF) else Color(0xFFCCCCCC),
-                    contentColor = Color.White
+                    containerColor = if (selectedHand != null) Color(0x8098999B) else Color(
+                        0xFFCCCCCC
+                    ),
+                    contentColor = Color.Black
                 )
             ) {
                 Text(
-                    text = "下一步",
-                    fontSize = 18.sp,
+                    text = "完成",
+                    fontSize = 16.sp,
                     fontWeight = FontWeight.Medium
                 )
             }
-            
+
             Spacer(modifier = Modifier.height(40.dp))
         }
     }
@@ -123,63 +150,53 @@ private fun HandOptionCard(
 ) {
     Card(
         modifier = modifier
-            .height(200.dp)
-            .clickable { onClick() },
-        shape = RoundedCornerShape(20.dp),
-        colors = CardDefaults.cardColors(
-            containerColor = if (isSelected) Color(0xFFE3F2FD) else Color.White
-        ),
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) { onClick() },
+        colors = CardDefaults.cardColors().copy(containerColor = Color.Transparent),
         elevation = CardDefaults.cardElevation(
-            defaultElevation = if (isSelected) 8.dp else 4.dp
+            defaultElevation = 0.dp
         )
     ) {
-        Box(
+        Card(
             modifier = Modifier
-                .fillMaxSize()
-                .then(
-                    if (isSelected) {
-                        Modifier.border(
-                            width = 2.dp,
-                            color = Color(0xFF007AFF),
-                            shape = RoundedCornerShape(20.dp)
-                        )
-                    } else {
-                        Modifier
-                    }
-                ),
-            contentAlignment = Alignment.Center
+                .fillMaxWidth()
+                .height(208.dp)
+                .clip(RoundedCornerShape(20.dp)),
+            colors = CardDefaults.cardColors()
+                .copy(containerColor = if (isSelected) Color(0xE1484848) else Color(0x41484848)),
         ) {
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center
-            ) {
-                // 手部图标占位符
-                Box(
-                    modifier = Modifier
-                        .size(100.dp)
-                        .background(
-                            if (isSelected) Color(0xFF007AFF) else Color(0xFFE5E5E5),
-                            RoundedCornerShape(50.dp)
-                        ),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Text(
-                        text = if (hand == Hand.LEFT) "✋" else "🤚",
-                        fontSize = 48.sp,
-                        color = if (isSelected) Color.White else Color(0xFF666666)
+            Spacer(Modifier.weight(1f))
+            if (hand == Hand.LEFT) {
+                Image(
+                    painterResource(Res.drawable.ic_domain_hand_left),
+                    contentDescription = null,
+                    modifier = Modifier.align(
+                        Alignment.CenterHorizontally
+                    )
+                )
+            } else {
+                Image(
+                    painterResource(Res.drawable.ic_domain_hand_right),
+                    contentDescription = null,
+                    modifier = Modifier.align(
+                        Alignment.CenterHorizontally
                     )
-                }
-                
-                Spacer(modifier = Modifier.height(20.dp))
-                
-                Text(
-                    text = if (hand == Hand.LEFT) "左手" else "右手",
-                    fontSize = 18.sp,
-                    fontWeight = FontWeight.Medium,
-                    color = if (isSelected) Color(0xFF007AFF) else Color(0xFF333333)
                 )
             }
+            Spacer(Modifier.weight(1f))
         }
+
+        Text(
+            if (hand == Hand.LEFT) "左手" else "右手",
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 8.dp),
+            textAlign = TextAlign.Center,
+            fontSize = 16.sp,
+            fontWeight = FontWeight.Medium,
+        )
     }
 }
 
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt
index 2f8f79f..7c53a17 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt
@@ -1,5 +1,6 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -13,7 +14,11 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.ic_arrow_right
+import ring.shared.generated.resources.bg_userinfo_guide
 
 data class PersonalInfo(
     val gender: String = "",
@@ -29,12 +34,13 @@ fun PersonalInfoScreen(
     onHeightClick: () -> Unit = {}
 ) {
     var personalInfo by remember { mutableStateOf(PersonalInfo()) }
-    
+
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(Color(0xFFF5F5F5))
     ) {
+        Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
+
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -47,8 +53,8 @@ fun PersonalInfoScreen(
                 text = "个人信息完善",
                 fontSize = 24.sp,
                 fontWeight = FontWeight.Medium,
-                color = Color(0xFF333333),
-                textAlign = TextAlign.Center,
+                color = Color(0xFF484848),
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
             
@@ -58,12 +64,12 @@ fun PersonalInfoScreen(
             Text(
                 text = "完善您的个人信息以便更好的服务",
                 fontSize = 16.sp,
-                color = Color(0xFF666666),
-                textAlign = TextAlign.Center,
+                color = Color(0xFF484848),
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
             
-            Spacer(modifier = Modifier.height(60.dp))
+            Spacer(modifier = Modifier.height(122.dp))
             
             // 性别选项
             PersonalInfoItem(
@@ -97,11 +103,12 @@ fun PersonalInfoScreen(
                 onClick = onNextClick,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(56.dp),
-                shape = RoundedCornerShape(28.dp),
+                    .padding(horizontal = 12.dp)
+                    .height(51.dp),
+                shape = RoundedCornerShape(30.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = Color(0xFF007AFF),
-                    contentColor = Color.White
+                    containerColor = Color(0xff98999b),
+                    contentColor = Color.Black
                 )
             ) {
                 Text(
@@ -126,18 +133,15 @@ private fun PersonalInfoItem(
         modifier = Modifier
             .fillMaxWidth()
             .clickable { onClick() },
-        shape = RoundedCornerShape(16.dp),
+        shape = RoundedCornerShape(0.dp),
         colors = CardDefaults.cardColors(
-            containerColor = Color.White
+            containerColor = Color.Transparent
         ),
-        elevation = CardDefaults.cardElevation(
-            defaultElevation = 2.dp
-        )
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 20.dp, vertical = 20.dp),
+                .padding(vertical = 12.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             Text(
@@ -156,14 +160,21 @@ private fun PersonalInfoItem(
                     modifier = Modifier.padding(end = 8.dp)
                 )
             }
-            
-//            Icon(
-//                imageVector = Icons.Default.KeyboardArrowRight,
-//                contentDescription = "展开",
-//                tint = Color(0xFF999999),
-//                modifier = Modifier.size(24.dp)
-//            )
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            Image(painterResource(Res.drawable.ic_arrow_right),
+                contentDescription = null,
+                modifier = Modifier
+                    .size(10.dp)
+            )
+
         }
+
+        HorizontalDivider(
+            color = Color(0x8067707F),
+            thickness = 1.dp,
+        )
     }
 }
 
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt
index 6bbcd0f..a2d49a8 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt
@@ -1,5 +1,6 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -8,11 +9,16 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.bg_login
+import ring.shared.generated.resources.bg_login_fullscreen
 
 @Composable
 fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String) -> Unit = { _, _ -> }) {
@@ -26,51 +32,38 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                 .fillMaxSize()
                 .background(Color(0xFFF5F5F5)),
     ) {
+        Image(painterResource(Res.drawable.bg_login_fullscreen),contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+
+        Image(painterResource(Res.drawable.bg_login),contentDescription = null, modifier = Modifier.fillMaxWidth().height(375.dp), contentScale = ContentScale.Crop)
+
         Column(
             modifier =
                 Modifier
                     .fillMaxSize()
-                    .padding(horizontal = 24.dp),
+                    .padding(horizontal = 23.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Spacer(modifier = Modifier.height(120.dp))
-
-            // 戒指图片占位符
-            Box(
-                modifier =
-                    Modifier
-                        .size(160.dp)
-                        .background(
-                            Color(0xFFE5E5E5),
-                            RoundedCornerShape(80.dp),
-                        ),
-                contentAlignment = Alignment.Center,
-            ) {
-                Text(
-                    text = "💍",
-                    fontSize = 64.sp,
-                )
-            }
 
-            Spacer(modifier = Modifier.height(40.dp))
+            Spacer(modifier = Modifier.height(210.dp))
 
             // 欢迎标题
             Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.Start,
             ) {
                 Text(
                     text = "Hi，",
-                    fontSize = 28.sp,
+                    fontSize = 32.sp,
                     fontWeight = FontWeight.Medium,
-                    color = Color(0xFF333333),
+                    color = Color(0xFF484848),
                     textAlign = TextAlign.Center,
                 )
 
                 Text(
                     text = "欢迎来到Acti",
-                    fontSize = 28.sp,
+                    fontSize = 32.sp,
                     fontWeight = FontWeight.Medium,
-                    color = Color(0xFF333333),
+                    color = Color(0xFF484848),
                     textAlign = TextAlign.Center,
                 )
             }
@@ -89,7 +82,7 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                     modifier = Modifier.padding(bottom = 8.dp),
                 )
 
-                OutlinedTextField(
+                TextField(
                     value = phoneNumber,
                     onValueChange = { phoneNumber = it },
                     placeholder = {
@@ -98,15 +91,16 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                             color = Color(0xFF999999),
                         )
                     },
-                    modifier = Modifier.fillMaxWidth(),
-                    shape = RoundedCornerShape(12.dp),
                     colors =
-                        OutlinedTextFieldDefaults.colors(
-                            focusedBorderColor = Color(0xFF007AFF),
-                            unfocusedBorderColor = Color(0xFFE5E5E5),
-                            focusedContainerColor = Color.White,
-                            unfocusedContainerColor = Color.White,
-                        ),
+                        TextFieldDefaults.colors().copy(focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent),
+                    modifier = Modifier.fillMaxWidth(),
+//                    colors =
+//                        TextField.colors(
+//                            focusedBorderColor = Color.White,
+//                            unfocusedBorderColor = Color.White,
+//                            focusedContainerColor = Color.White,
+//                            unfocusedContainerColor = Color.White,
+//                        ),
                     singleLine = true,
                 )
             }
@@ -129,42 +123,38 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                     modifier = Modifier.fillMaxWidth(),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    OutlinedTextField(
-                        value = verificationCode,
-                        onValueChange = { verificationCode = it },
-                        placeholder = {
-                            Text(
-                                text = "请输入验证码",
-                                color = Color(0xFF999999),
-                            )
-                        },
-                        modifier = Modifier.weight(1f),
-                        shape = RoundedCornerShape(12.dp),
-                        colors =
-                            OutlinedTextFieldDefaults.colors(
-                                focusedBorderColor = Color(0xFF007AFF),
-                                unfocusedBorderColor = Color(0xFFE5E5E5),
-                                focusedContainerColor = Color.White,
-                                unfocusedContainerColor = Color.White,
-                            ),
-                        singleLine = true,
-                    )
-
-                    Spacer(modifier = Modifier.width(12.dp))
-
-                    TextButton(
-                        onClick = {
-                            if (phoneNumber.isNotEmpty()) {
-                                isCodeSent = true
-                            }
-                        },
-                        enabled = phoneNumber.isNotEmpty(),
-                    ) {
-                        Text(
-                            text = if (isCodeSent) "重新发送验证码" else "获取验证码",
-                            fontSize = 14.sp,
-                            color = if (phoneNumber.isNotEmpty()) Color(0xFF007AFF) else Color(0xFF999999),
+                    Box{
+                        TextField(
+                            value = verificationCode,
+                            onValueChange = { verificationCode = it },
+                            placeholder = {
+                                Text(
+                                    text = "请输入验证码",
+                                    color = Color(0xFF999999),
+                                )
+                            },
+                            colors =
+                                TextFieldDefaults.colors().copy(focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent),
+                            modifier = Modifier.fillMaxWidth(),
+                            singleLine = true,
                         )
+
+                        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
+                            TextButton(
+                                onClick = {
+                                    if (phoneNumber.isNotEmpty()) {
+                                        isCodeSent = true
+                                    }
+                                },
+                                enabled = phoneNumber.isNotEmpty(),
+                            ) {
+                                Text(
+                                    text = if (isCodeSent) "重新发送验证码" else "获取验证码",
+                                    fontSize = 14.sp,
+                                    color = if (phoneNumber.isNotEmpty()) Color(0xFF007AFF) else Color(0xFF999999),
+                                )
+                            }
+                        }
                     }
                 }
             }
@@ -189,13 +179,14 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                 modifier =
                     Modifier
                         .fillMaxWidth()
-                        .height(56.dp),
-                shape = RoundedCornerShape(28.dp),
+                        .height(51.dp)
+                        .padding(horizontal = 13.dp),
+                shape = RoundedCornerShape(30.dp),
                 colors =
                     ButtonDefaults.buttonColors(
                         containerColor =
                             if (phoneNumber.isNotEmpty() && verificationCode.isNotEmpty()) {
-                                Color(0xFF007AFF)
+                                Color(0x8098999B)
                             } else {
                                 Color(0xFFCCCCCC)
                             },
@@ -205,6 +196,7 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
                 Text(
                     text = "登录",
                     fontSize = 18.sp,
+                    color = Color.Black,
                     fontWeight = FontWeight.Medium,
                 )
             }
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt
index 3fe7040..5445528 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt
@@ -1,5 +1,6 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -15,19 +16,21 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.bg_userinfo_guide
+import ring.shared.generated.resources.ic_unuse_hand_left
+import ring.shared.generated.resources.ic_unuse_hand_right
+import ring.shared.generated.resources.ic_use_hand_left
+import ring.shared.generated.resources.ic_use_hand_right
 
 enum class Hand {
     LEFT, RIGHT
 }
 
-enum class Finger {
-    THUMB, INDEX, MIDDLE, RING, PINKY
-}
-
 data class WearingPosition(
     val hand: Hand,
-    val finger: Finger
 )
 
 @Composable
@@ -42,6 +45,7 @@ fun WearingFingerScreen(
             .fillMaxSize()
             .background(Color(0xFFF5F5F5))
     ) {
+        Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -55,8 +59,8 @@ fun WearingFingerScreen(
                 text = "佩戴手指",
                 fontSize = 24.sp,
                 fontWeight = FontWeight.Medium,
-                color = Color(0xFF333333),
-                textAlign = TextAlign.Center,
+                color = Color.Black,
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
             
@@ -65,9 +69,9 @@ fun WearingFingerScreen(
             // 副标题
             Text(
                 text = "请选择您佩戴Acti戒指的手指",
-                fontSize = 16.sp,
-                color = Color(0xFF666666),
-                textAlign = TextAlign.Center,
+                fontSize = 12.sp,
+                color = Color.Black,
+                textAlign = TextAlign.Start,
                 modifier = Modifier.fillMaxWidth()
             )
             
@@ -82,8 +86,8 @@ fun WearingFingerScreen(
                 HandSelector(
                     hand = Hand.LEFT,
                     selectedPosition = selectedPosition,
-                    onFingerClick = { finger ->
-                        val position = WearingPosition(Hand.LEFT, finger)
+                    onFingerClick = {
+                        val position = WearingPosition(Hand.LEFT)
                         selectedPosition = position
                         onFingerSelected(position)
                     }
@@ -93,13 +97,25 @@ fun WearingFingerScreen(
                 HandSelector(
                     hand = Hand.RIGHT,
                     selectedPosition = selectedPosition,
-                    onFingerClick = { finger ->
-                        val position = WearingPosition(Hand.RIGHT, finger)
+                    onFingerClick = {
+                        val position = WearingPosition(Hand.RIGHT)
                         selectedPosition = position
                         onFingerSelected(position)
                     }
                 )
             }
+            val text = selectedPosition?.hand?.let {if (it == Hand.LEFT){
+                "您已选择佩戴在左手"
+            }else{
+                "您已选择佩戴在右手"
+            }}?:""
+
+
+            Text(text,
+                fontSize = 16.sp,
+                color = Color(0xFF999999),
+                modifier = Modifier.padding(top = 16.dp)
+            )
             
             Spacer(modifier = Modifier.weight(1f))
             
@@ -109,11 +125,12 @@ fun WearingFingerScreen(
                 enabled = selectedPosition != null,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(56.dp),
-                shape = RoundedCornerShape(28.dp),
+                    .padding(horizontal = 12.dp)
+                    .height(51.dp),
+                shape = RoundedCornerShape(30.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = if (selectedPosition != null) Color(0xFF007AFF) else Color(0xFFCCCCCC),
-                    contentColor = Color.White
+                    containerColor = if (selectedPosition != null) Color(0x8098999B) else Color(0xFFCCCCCC),
+                    contentColor = Color.Black
                 )
             ) {
                 Text(
@@ -132,7 +149,7 @@ fun WearingFingerScreen(
 private fun HandSelector(
     hand: Hand,
     selectedPosition: WearingPosition?,
-    onFingerClick: (Finger) -> Unit
+    onFingerClick: () -> Unit
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally
@@ -142,51 +159,25 @@ private fun HandSelector(
             modifier = Modifier
                 .size(140.dp, 180.dp)
                 .background(
-                    Color.White,
+                    Color.Transparent,
                     RoundedCornerShape(20.dp)
-                )
-                .border(
-                    width = 2.dp,
-                    color = Color(0xFFE5E5E5),
-                    shape = RoundedCornerShape(20.dp)
-                ),
-            contentAlignment = Alignment.Center
+                ).clickable {
+                    onFingerClick.invoke()
+                },
+            contentAlignment = Alignment.Center,
         ) {
-            // 简化的手部表示
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center
-            ) {
-                // 拇指
-                FingerButton(
-                    finger = Finger.THUMB,
-                    isSelected = selectedPosition?.hand == hand && selectedPosition.finger == Finger.THUMB,
-                    onClick = { onFingerClick(Finger.THUMB) },
-                    modifier = Modifier.offset(x = if (hand == Hand.LEFT) 20.dp else (-20).dp)
-                )
-                
-                Spacer(modifier = Modifier.height(8.dp))
-                
-                // 其他四个手指
-                Row(
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
-                ) {
-                    listOf(Finger.INDEX, Finger.MIDDLE, Finger.RING, Finger.PINKY).forEach { finger ->
-                        FingerButton(
-                            finger = finger,
-                            isSelected = selectedPosition?.hand == hand && selectedPosition.finger == finger,
-                            onClick = { onFingerClick(finger) }
-                        )
-                    }
+            if ( selectedPosition?.hand == hand){
+                if (hand == Hand.LEFT){
+                    Image(painterResource(Res.drawable.ic_use_hand_left),contentDescription = null)
+                }else{
+                    Image(painterResource(Res.drawable.ic_use_hand_right),contentDescription = null)
+
                 }
-                
-                // 显示戒指图标在选中的手指上
-                if (selectedPosition?.hand == hand) {
-                    Text(
-                        text = "💍",
-                        fontSize = 16.sp,
-                        modifier = Modifier.padding(top = 4.dp)
-                    )
+            }else{
+                if (hand == Hand.LEFT){
+                    Image(painterResource(Res.drawable.ic_unuse_hand_left),contentDescription = null)
+                }else{
+                    Image(painterResource(Res.drawable.ic_unuse_hand_right),contentDescription = null)
                 }
             }
         }
@@ -203,32 +194,6 @@ private fun HandSelector(
     }
 }
 
-@Composable
-private fun FingerButton(
-    finger: Finger,
-    isSelected: Boolean,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    Box(
-        modifier = modifier
-            .size(20.dp, 40.dp)
-            .clip(RoundedCornerShape(10.dp))
-            .background(
-                if (isSelected) Color(0xFF007AFF) else Color(0xFFE5E5E5)
-            )
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
-        if (isSelected) {
-            Text(
-                text = "💍",
-                fontSize = 12.sp
-            )
-        }
-    }
-}
-
 @Composable
 @Preview
 fun WearingFingerScreenPreview() {
diff --git a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt
index 5ccc7b8..b4f9406 100644
--- a/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt
+++ b/shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt
@@ -1,6 +1,8 @@
 package com.whitefish.ring.ui.guide
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.*
@@ -8,11 +10,17 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ring.shared.generated.resources.Res
+import ring.shared.generated.resources.bg_welcome
+import ring.shared.generated.resources.ic_uapp_checked
+import ring.shared.generated.resources.ic_uapp_uncheck
 
 @Composable
 fun WelcomeScreen(onStartClick: () -> Unit = {}) {
@@ -24,21 +32,23 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
                 .fillMaxSize()
                 .background(Color(0xFFF5F5F5)),
     ) {
+
+        Image(painterResource(Res.drawable.bg_welcome),contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
+
         Column(
             modifier =
                 Modifier
                     .fillMaxSize()
-                    .padding(horizontal = 24.dp),
+                    .padding(horizontal = 36.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Spacer(modifier = Modifier.height(120.dp))
+            Spacer(modifier = Modifier.height(21.dp))
 
             // 主标题
             Text(
                 text = "Acti",
-                fontSize = 48.sp,
-                fontWeight = FontWeight.Bold,
-                color = Color(0xFF333333),
+                fontSize = 64.sp,
+                color = Color(0xFF484848),
                 textAlign = TextAlign.Center,
             )
 
@@ -47,9 +57,9 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
             // 副标题
             Text(
                 text = "赋能每一个动作",
-                fontSize = 18.sp,
+                fontSize = 36.sp,
                 fontWeight = FontWeight.Normal,
-                color = Color(0xFF666666),
+                color = Color(0xFF484848),
                 textAlign = TextAlign.Center,
             )
 
@@ -58,106 +68,76 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
             // 英文副标题
             Text(
                 text = "Empower Every Move",
-                fontSize = 16.sp,
+                fontSize = 24.sp,
                 fontWeight = FontWeight.Normal,
-                color = Color(0xFF999999),
+                color = Color(0xFF484848),
                 textAlign = TextAlign.Center,
             )
 
+
             Spacer(modifier = Modifier.weight(1f))
 
-            // 戒指图片占位符
-            Box(
+
+            // 立即使用按钮
+            Button(
+                onClick = onStartClick,
+                enabled = isChecked,
                 modifier =
                     Modifier
-                        .size(200.dp)
-                        .background(
-                            Color(0xFFE5E5E5),
-                            RoundedCornerShape(16.dp),
-                        ),
-                contentAlignment = Alignment.Center,
+                        .fillMaxWidth()
+                        .height(51.dp),
+                shape = RoundedCornerShape(30.dp),
+                colors =
+                    ButtonDefaults.buttonColors(
+                        containerColor = if (isChecked) Color(0xFF87919F) else Color(0xFFCCCCCC),
+                        contentColor = Color.White,
+                    ),
             ) {
                 Text(
-                    text = "💍",
-                    fontSize = 80.sp,
+                    text = "立即使用",
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Medium,
                 )
             }
 
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.height(9.dp))
 
             // 协议同意checkbox
             Row(
                 modifier =
                     Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 16.dp),
+                        .fillMaxWidth(),
                 verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center
             ) {
-                Checkbox(
-                    checked = isChecked,
-                    onCheckedChange = { isChecked = it },
-                    colors =
-                        CheckboxDefaults.colors(
-                            checkedColor = Color(0xFF007AFF),
-                        ),
-                )
+                UAPPCheckBox(isChecked, modifier = Modifier.size(15.dp)){
+                    isChecked = !isChecked
+                }
 
                 Spacer(modifier = Modifier.width(8.dp))
 
                 Text(
-                    text = "我已阅读并同意",
-                    fontSize = 14.sp,
-                    color = Color(0xFF666666),
-                )
-
-                Text(
-                    text = "《用户协议》",
-                    fontSize = 14.sp,
-                    color = Color(0xFF007AFF),
-                )
-
-                Text(
-                    text = "和",
-                    fontSize = 14.sp,
-                    color = Color(0xFF666666),
-                )
-
-                Text(
-                    text = "《隐私政策》",
-                    fontSize = 14.sp,
-                    color = Color(0xFF007AFF),
+                    text = "我已阅读井同意《用户隐私协议》和《用户注册协议》",
+                    fontSize = 12.sp,
+                    color = Color(0xFF6636363),
                 )
             }
 
-            Spacer(modifier = Modifier.height(24.dp))
+            Spacer(modifier = Modifier.height(300.dp))
 
-            // 立即使用按钮
-            Button(
-                onClick = onStartClick,
-                enabled = isChecked,
-                modifier =
-                    Modifier
-                        .fillMaxWidth()
-                        .height(56.dp),
-                shape = RoundedCornerShape(28.dp),
-                colors =
-                    ButtonDefaults.buttonColors(
-                        containerColor = if (isChecked) Color(0xFF007AFF) else Color(0xFFCCCCCC),
-                        contentColor = Color.White,
-                    ),
-            ) {
-                Text(
-                    text = "立即使用",
-                    fontSize = 18.sp,
-                    fontWeight = FontWeight.Medium,
-                )
-            }
-
-            Spacer(modifier = Modifier.height(40.dp))
         }
     }
 }
 
+@Composable
+fun UAPPCheckBox(checked: Boolean, modifier: Modifier, onClick: () -> Unit){
+    if (checked){
+        Image(painterResource(Res.drawable.ic_uapp_checked), contentDescription = null, modifier = modifier.clickable { onClick.invoke() })
+    }else{
+        Image(painterResource(Res.drawable.ic_uapp_uncheck), contentDescription = null, modifier = modifier.clickable { onClick.invoke() })
+    }
+}
+
 @Composable
 @Preview
 fun WelcomeScreenPreview() {