diff --git a/apps/rebreak-native/components/profile/AvatarCropSheet.tsx b/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
index 4ec524e..5d8c6d6 100644
--- a/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
+++ b/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
@@ -134,8 +134,17 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
           </View>
 
           <View style={styles.body}>
-            <View style={[styles.cropFrame, { width: CROP_SIZE, height: CROP_SIZE }]}>
-              <View style={styles.cropOverflow}>
+            <View
+              style={[
+                styles.cropFrame,
+                {
+                  width: CROP_SIZE,
+                  height: CROP_SIZE,
+                  borderRadius: CROP_SIZE / 2,
+                },
+              ]}
+            >
+              <View style={[styles.cropOverflow, { borderRadius: CROP_SIZE / 2 }]}>
                 <GestureDetector gesture={composed}>
                   <Animated.View style={imageStyle}>
                     {imageUri ? (
@@ -149,10 +158,13 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
                 </GestureDetector>
               </View>
 
-              <View style={styles.cornerTL} />
-              <View style={styles.cornerTR} />
-              <View style={styles.cornerBL} />
-              <View style={styles.cornerBR} />
+              <View
+                pointerEvents="none"
+                style={[
+                  styles.ringOverlay,
+                  { borderRadius: CROP_SIZE / 2 },
+                ]}
+              />
             </View>
 
             <Text style={[styles.hint, { color: colors.textMuted }]}>
@@ -179,8 +191,7 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
   );
 }
 
-const CORNER = 18;
-const BORDER = 2.5;
+const RING_BORDER = 2;
 
 const styles = StyleSheet.create({
   container: {
@@ -214,7 +225,6 @@ const styles = StyleSheet.create({
     gap: 20,
   },
   cropFrame: {
-    borderRadius: 12,
     overflow: 'hidden',
     position: 'relative',
     backgroundColor: '#111',
@@ -224,49 +234,14 @@ const styles = StyleSheet.create({
     height: '100%',
     overflow: 'hidden',
   },
-  cornerTL: {
+  ringOverlay: {
     position: 'absolute',
     top: 0,
     left: 0,
-    width: CORNER,
-    height: CORNER,
-    borderTopWidth: BORDER,
-    borderLeftWidth: BORDER,
-    borderColor: '#fff',
-    borderTopLeftRadius: 12,
-  },
-  cornerTR: {
-    position: 'absolute',
-    top: 0,
     right: 0,
-    width: CORNER,
-    height: CORNER,
-    borderTopWidth: BORDER,
-    borderRightWidth: BORDER,
-    borderColor: '#fff',
-    borderTopRightRadius: 12,
-  },
-  cornerBL: {
-    position: 'absolute',
     bottom: 0,
-    left: 0,
-    width: CORNER,
-    height: CORNER,
-    borderBottomWidth: BORDER,
-    borderLeftWidth: BORDER,
-    borderColor: '#fff',
-    borderBottomLeftRadius: 12,
-  },
-  cornerBR: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    width: CORNER,
-    height: CORNER,
-    borderBottomWidth: BORDER,
-    borderRightWidth: BORDER,
-    borderColor: '#fff',
-    borderBottomRightRadius: 12,
+    borderWidth: RING_BORDER,
+    borderColor: 'rgba(255,255,255,0.85)',
   },
   hint: {
     fontSize: 12,