diff --git a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets
index 6b014010ed9f6daf84eff9e2051f333d7433bd9f..bd99fdb26b6ef5e4f66bdebeb3b520593f417e4d 100644
--- a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets
+++ b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets
@@ -22,13 +22,15 @@ import deviceInfo from '@ohos.deviceInfo';
 import Constant from '../../common/constant';
 import accessibility from '@ohos.accessibility';
 import common from '@ohos.app.ability.common';
+import display from '@ohos.display';
 let anmDuration: number = 800;
 let TAG = '[DeviceManagerUI:DeviceSelect]==>';
 
 enum StatusType {
   Unbound = 0,
   TrustBinding = 1,
-  Binding = 2
+  BBinding = 2,
+  BindingFailed = 3,
 }
 
 let customData: Record<string, string | number> = {
@@ -102,9 +104,8 @@ class BindTargetData {
   public deviceId: string = '';
 }
 
-@Entry
-@Component
-export struct Index {
+@CustomDialog
+export struct DeviceSelectCustomDialog {
   @State showPhone: Visibility = Visibility.Visible;
   @State showFlag: Visibility = Visibility.Visible;
   @State deviceSelectSession : UIExtensionContentSession | undefined = undefined;
@@ -122,33 +123,20 @@ export struct Index {
   @State bundleName: string = '';
   @State moduleName: string = '';
   @State abilityName: string = '';
-  @State isLandscape: boolean = true;
+  @State isLandscape: boolean = false;
   @State isListNum: number = 5;
   @State discCapability: string = 'oop';
   @State networIdMatchLen: number = -1;
   listener = mediaquery.matchMediaSync('(orientation: landscape)');
   dmInstance: distributedDeviceManager.DeviceManager | undefined = undefined;
-  context = getContext(this) as common.UIAbilityContext
+  context = getContext(this) as common.UIAbilityContext;
   bindParam: Record<string, string | number | Context | Resource> = {};
-  scroller: Scroller = new Scroller()
-
-  @Builder
-  CustomBuilder() {
-    Column() {
-      Stack() {
-        Image($r('app.media.iocn_phone_self')).width(54).draggable(false)
-        Image($r('app.media.phone')).width(30).draggable(false)
-      }
-      .width(54)
-      .height(54)
-      .borderRadius(54)
-    }
-    .width(68)
-    .height(92)
-  }
+  scroller: Scroller = new Scroller();
+  controller?: CustomDialogController;
 
   cancel() {
     this.dmInstance!.stopDiscovering();
+    this.showFlag = Visibility.Hidden
     try {
       console.log(TAG + 'terminateSelf');
       this.deviceSelectSession = AppStorage.get<UIExtensionContentSession>('deviceSelectSession');
@@ -316,15 +304,47 @@ export struct Index {
     this.dmInstance = distributedDeviceManager.createDeviceManager(bundleName);
   }
 
-  calcPositionX(index: number): number {
-    let angle = -160 + (index * 160 / this.isListNum)
+  calcPositionX(index: number, distance?: number): number {
+    let angleOne = 160 / this.deviceList.length
+    let angle = 0
+    let angleStart = 0
+    if((this.deviceList.length & 1) == 1) {
+      angleStart = -90
+    } else {
+      angleStart = -90 - (angleOne / 2)
+    }
+    if((index & 1) == 1) {
+      angle = angleStart + ((Math.floor(index / 2) + 1) * angleOne)
+    } else {
+      angle = angleStart - (Math.floor(index / 2) * angleOne)
+    }
+
     let radian = angle * Math.PI / 180
+    if(distance) {
+      return this.centerX + Math.cos(radian) * (this.radius - 48)
+    }
     return this.centerX + Math.cos(radian) * this.radius
   }
 
-  calcPositionY(index: number): number {
-    let angle = -160 + (index * 160 / this.isListNum)
+  calcPositionY(index: number, distance?: number): number {
+    let angleOne = 160 / this.deviceList.length
+    let angle = 0
+    let angleStart = 0
+    if((this.deviceList.length & 1) == 1) {
+      angleStart = -90
+    } else {
+      angleStart = -90 - (angleOne / 2)
+    }
+    if((index & 1) == 1) {
+      angle = angleStart + ((Math.floor(index / 2) + 1) * angleOne)
+    } else {
+      angle = angleStart - (Math.floor(index / 2) * angleOne)
+    }
+
     let radian = angle * Math.PI / 180
+    if(distance) {
+      return this.centerY + Math.sin(radian) * (this.radius - 48)
+    }
     return this.centerY + Math.sin(radian) * this.radius
   }
 
@@ -345,7 +365,7 @@ export struct Index {
 
   bindTarget(item: Data, index: number) {
     this.currentDevice = item
-    if (item.status == 0) {
+    if (item.status == 0 || item.status == 3 || item.status == 2) {
       try {
         this.bindParam = {
           'bindType': 1,
@@ -358,14 +378,26 @@ export struct Index {
         };
         this.dmInstance!.bindTarget(item.device.deviceId, this.bindParam,
           (err: BusinessError, data: BindTargetData) => {
+            this.showPhone = Visibility.Visible
             if (err) {
+              this.deviceList[index].status = StatusType.BindingFailed
+              this.deviceList.push(new Data())
+              this.deviceList.splice(this.deviceList.length - 1, 1)
               console.error('======bindTarget errCode:' + err.code + ',errMessage:' + err.message);
+              if(err.code == 0) {
+                promptAction.showToast({ message: $r('app.string.pin_code_failed') })
+              }
               return;
             }
           });
       } catch (err) {
         let e: BusinessError = err as BusinessError;
         console.error('bindTarget errCode:' + e.code + ',errMessage:' + e.message);
+        this.deviceList[index].status = StatusType.BindingFailed
+        this.deviceList.push(new Data())
+        this.deviceList.splice(this.deviceList.length - 1, 1)
+        this.showPhone = Visibility.Visible
+        promptAction.showToast({ message: $r('app.string.connection_failed') })
       }
     } else {
       try {
@@ -391,15 +423,27 @@ export struct Index {
     }
   }
 
+  initRotation() {
+    let rotation: number = display.getDefaultDisplaySync().orientation
+    if (rotation == 0 || rotation == 2) {
+      this.isLandscape = false
+      this.isListNum = 5
+    } else {
+      this.isLandscape = true
+      this.isListNum = 8
+    }
+  }
+
   aboutToAppear(): void {
     this.listener.on('change', this.onPortrait.bind(this))
     this.initPickParms()
+    this.initRotation()
     this.deviceSelectSession = AppStorage.get<UIExtensionContentSession>('deviceSelectSession');
     this.devListInfo();
   }
 
   aboutToDisappear(): void {
-    this.listener.off('change', this.onPortrait)
+    this.listener.off('change', this.onPortrait.bind(this))
   }
 
   build() {
@@ -419,67 +463,81 @@ export struct Index {
           .onClick(() => {
             this.cancel()
           })
-      }.justifyContent(FlexAlign.SpaceBetween)
+      }
+      .justifyContent(FlexAlign.SpaceBetween)
       .width('100%')
 
       if (this.deviceList.length <= this.isListNum) {
         ForEach(this.deviceList, (item: Data, index: number) => {
           Column() {
             Stack() {
-              Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_ball_online') :
-              $r('app.media.icon_ball')).width(54)
-              Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(30)
+              Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_background_light') : $r('app.media.icon_background')).width(48).draggable(false)
+              Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(26).draggable(false)
             }
-            .width(54)
-            .height(54)
-            .borderRadius(54)
-
-            Text(item.device.deviceName)
-            .fontSize(12)
-            .textAlign(TextAlign.Center)
+            .width(48)
+            .height(48)
+            .borderRadius(48)
+            .onClick(() => {
+              if (item.status == StatusType.TrustBinding) {
+                this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName)
+              }
+            })
+            .onDrop((event: DragEvent, extraParams?: string | undefined) => {
+              if(item.status == StatusType.TrustBinding){
+                this.showPhone = Visibility.Visible
+                this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName)
+              }else{
+                this.bindTarget(item, index)
+              }
+              console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams));
+            })
           }
-          .width(68)
-          .height(92)
           .position({
-            x: this.calcPositionX(index) - 34,
-            y: this.calcPositionY(index) - 46
+            x: this.calcPositionX(index) - 24,
+            y: this.calcPositionY(index) - 24
           })
-          .onClick(() => {
-            if (item.status == StatusType.TrustBinding) {
-              this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName)
+          Column() {
+            Text(item.device.deviceName)
+              .fontSize(11)
+              .textAlign(TextAlign.Center)
+              .maxLines(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed ? 1 : 2)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+              .fontColor('#000000')
+            if(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed) {
+              Text(item.status == StatusType.TrustBinding ? $r('app.string.trust') : $r('app.string.connection_failed'))
+              .fontSize(10)
+              .textAlign(TextAlign.Center)
+              .maxLines(item.status ? 1 : 2)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+              .fontColor(item.status == StatusType.TrustBinding ? $r('sys.color.ohos_id_color_text_secondary') : '#E84026')
             }
-          })
-          .onDrop((event: DragEvent, extraParams?: string | undefined) => {
-            this.showPhone = Visibility.Visible
-            this.bindTarget(item, index)
-            console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams));
+          }
+          .width(72)
+          .height(30)
+          .position({
+            x: this.calcPositionX(index) - 36,
+            y: this.calcPositionY(index) + 32
           })
         })
         Column() {
           Stack() {
-            Image($r('app.media.iocn_phone_self')).width(54).draggable(false)
-            Image($r('app.media.phone')).width(30).draggable(false)
+            Image($r("app.media.icon_background")).width(48).draggable(false)
+            Image($r("app.media.phone")).width(26).draggable(false)
           }
-          .width(54)
-          .height(54)
-          .borderRadius(54)
-
-          Text($r('app.string.local_machine'))
-            .fontSize(12)
-            .textAlign(TextAlign.Center)
+          .width(48)
+          .height(48)
+          .borderRadius(48)
+          .margin({ bottom: 8 })
         }
-        .width(68)
-        .height(92)
         .position({
-          x: this.centerX - 34,
-          y: this.centerY - 46
+          x: this.centerX - 24,
+          y: this.centerY - 24
         })
         .visibility(this.showPhone)
         .draggable(true)
         .onDragStart((event) => {
           this.showPhone = Visibility.Hidden
           console.info('======onDrop onDragStart:' + JSON.stringify(event));
-          return this.CustomBuilder()
         })
         .onDragEnter((event: DragEvent, extraParams?: string | undefined) => {
           this.showPhone = Visibility.Hidden
@@ -494,27 +552,48 @@ export struct Index {
         .onDragEnd((event: DragEvent, extraParams?: string | undefined) => {
           console.info('======onDrop onDragEnd:' + JSON.stringify(event), JSON.stringify(extraParams));
         })
+        Column() {
+          Text($r("app.string.local_machine"))
+            .fontSize(11)
+            .textAlign(TextAlign.Center)
+        }
+        .width(72)
+        .height(30)
+        .visibility(this.showPhone)
+        .position({
+          x: this.centerX - 36,
+          y: this.centerY + 32
+        })
       } else {
         Grid(this.scroller) {
           ForEach(this.deviceList, (item: Data, index: number) => {
             GridItem() {
               Column() {
                 Stack() {
-                  Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_ball_online') :
-                  $r('app.media.icon_ball')).width(54).draggable(false)
-                  Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad'))
-                  .width(30)
-                  .draggable(false)
+                  Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_background_light') : $r('app.media.icon_background')).width(48).draggable(false)
+                  Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(26).draggable(false)
                 }
-                .width(54)
-                .height(54)
-                .borderRadius(54)
+                .width(48)
+                .height(48)
+                .borderRadius(48)
+                .margin({ bottom: 8 })
 
                 Text(item.device.deviceName)
-                .fontSize(12)
-                .textAlign(TextAlign.Center)
+                  .fontSize(11)
+                  .textAlign(TextAlign.Center)
+                  .maxLines(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed ? 1 : 2)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .fontColor('#000000')
+                if(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed) {
+                  Text(item.status == StatusType.TrustBinding ? $r('app.string.trust') : $r('app.string.connection_failed'))
+                    .fontSize(10)
+                    .textAlign(TextAlign.Center)
+                    .maxLines(item.status ? 1 : 2)
+                    .textOverflow({ overflow: TextOverflow.Ellipsis })
+                    .fontColor(item.status == StatusType.TrustBinding ? $r('sys.color.ohos_id_color_text_secondary') : '#E84026')
+                }
               }
-              .width(68)
+              .width(72)
               .height(92)
               .onClick(() => {
                 if (item.status == StatusType.TrustBinding) {
@@ -544,7 +623,7 @@ export struct Index {
           })
         }
         .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
-        .columnsGap(10)
+        .columnsGap(2)
         .rowsGap(10)
         .friction(0.6)
         .enableScrollInteraction(true)
@@ -562,11 +641,11 @@ export struct Index {
       this.showPhone = Visibility.Visible
       console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams));
     })
-    .width('100%')
-    .height('100%')
+    .width(this.isLandscape ? '70%' : '100%')
+    .height(this.isLandscape ? '90%' : '60%')
     .backgroundColor(Color.White)
     .borderRadius({ topLeft: 20, topRight: 20 })
-    .padding({ bottom: 0, left: 10, right: 10 })
+    .padding({ bottom : 8, left: 10, right: 10, top: 0 })
     .onClick(() => {
       if (this.isAutoCancel) {
         this.cancel();
@@ -575,16 +654,38 @@ export struct Index {
     .onAreaChange((oldValue, newValue) => {
       this.centerX = Number(newValue.width) / 2
       if (this.isLandscape) {
-        this.radius = Number(newValue.height) - 90
-        this.centerY = Number(newValue.height) - 20
+        this.radius = Number(newValue.height) - 132
+        this.centerY = Number(newValue.height) - 60
       } else {
         this.radius = Math.min(Number(newValue.width), Number(newValue.height)) * 0.4
         this.centerY = this.radius + 90
       }
     })
     .visibility(this.showFlag)
-    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
-      .combine(TransitionEffect.translate({ y: 100 })))
+  }
+}
+
+@Entry
+@Component
+struct dialogPlusPage {
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: DeviceSelectCustomDialog(),
+    autoCancel: false,
+    alignment: DialogAlignment.Bottom,
+    offset: { dx: 0, dy: 0 },
+    customStyle: true,
+    maskColor: $r('sys.color.ohos_id_color_mask_thin')
+  });
+
+  aboutToAppear() {
+    console.log(TAG + 'aboutToAppear execute')
+  }
+
+  aboutToDisappear() {
+    console.log(TAG + 'aboutToDisappear executed')
+  }
 
+  build() {
+    Column(this.dialogController.open())
   }
 }
\ No newline at end of file
diff --git a/display/entry/src/main/resources/base/element/string.json b/display/entry/src/main/resources/base/element/string.json
index c4de811ed68319d93c2c118d467224790c7a7b8c..c6b35ed17b897c0f132c2001464266b34ed1eb9d 100644
--- a/display/entry/src/main/resources/base/element/string.json
+++ b/display/entry/src/main/resources/base/element/string.json
@@ -104,6 +104,18 @@
         {
             "name":"dm_password_error",
             "value":"Incorrect password. Connection failed."
+        },
+        {
+            "name": "trust",
+            "value": " Trusted"
+        },
+        {
+            "name": "connection_failed",
+            "value": "Connection Failed"
+        },
+        {
+            "name": "pin_code_failed",
+            "value": "PIN code failed and the connection failed"
         }
     ]
 }
\ No newline at end of file
diff --git a/display/entry/src/main/resources/zh_CN/element/string.json b/display/entry/src/main/resources/zh_CN/element/string.json
index eee4e696c98987132ac88f216f04a1c28d4a99e4..213bfc9485a91b25728deef306328aa51ba2af18 100644
--- a/display/entry/src/main/resources/zh_CN/element/string.json
+++ b/display/entry/src/main/resources/zh_CN/element/string.json
@@ -108,6 +108,18 @@
         {
             "name":"local_machine",
             "value":"本机"
+        },
+        {
+            "name": "trust",
+            "value": "已信任"
+        },
+        {
+            "name": "connection_failed",
+            "value": "连接失败"
+        },
+        {
+            "name": "pin_code_failed",
+            "value": "PIN码验证不通过，连接失败"
         }
     ]
 }
\ No newline at end of file