diff --git a/flutter/lib/common/widgets/peercard_widget.dart b/flutter/lib/common/widgets/peercard_widget.dart
index 2e9c1c080..e3bc81af2 100644
--- a/flutter/lib/common/widgets/peercard_widget.dart
+++ b/flutter/lib/common/widgets/peercard_widget.dart
@@ -77,7 +77,7 @@ class _PeerCardState extends State<_PeerCard>
             child: ListTile(
               contentPadding: const EdgeInsets.only(left: 12),
               subtitle: Text('${peer.username}@${peer.hostname}'),
-              title: Text(peer.id),
+              title: Text(formatID(peer.id)),
               leading: Container(
                   padding: const EdgeInsets.all(6),
                   color: str2color('${peer.id}${peer.platform}', 0x7f),
diff --git a/flutter/lib/desktop/pages/connection_page.dart b/flutter/lib/desktop/pages/connection_page.dart
index 6e1eac814..ad8e430f4 100644
--- a/flutter/lib/desktop/pages/connection_page.dart
+++ b/flutter/lib/desktop/pages/connection_page.dart
@@ -60,7 +60,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
                 children: [
                   Row(
                     children: [
-                      getSearchBarUI(context),
+                      _buildRemoteIDTextField(context),
                     ],
                   ).marginOnly(top: 22),
                   SizedBox(height: 12),
@@ -97,9 +97,9 @@ class _ConnectionPageState extends State<ConnectionPage> {
     connect(context, id, isFileTransfer: isFileTransfer);
   }
 
-  /// UI for the search bar.
+  /// UI for the remote ID TextField.
   /// Search for a peer and connect to it if the id exists.
-  Widget getSearchBarUI(BuildContext context) {
+  Widget _buildRemoteIDTextField(BuildContext context) {
     RxBool ftHover = false.obs;
     RxBool ftPressed = false.obs;
     RxBool connHover = false.obs;
diff --git a/flutter/lib/mobile/pages/connection_page.dart b/flutter/lib/mobile/pages/connection_page.dart
index 1377088c7..edc2f5f6d 100644
--- a/flutter/lib/mobile/pages/connection_page.dart
+++ b/flutter/lib/mobile/pages/connection_page.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common/formatter/id_formatter.dart';
 import 'package:flutter_hbb/mobile/pages/file_manager_page.dart';
 import 'package:get/get.dart';
 import 'package:provider/provider.dart';
@@ -38,7 +39,7 @@ class ConnectionPage extends StatefulWidget implements PageShape {
 /// State for the connection page.
 class _ConnectionPageState extends State<ConnectionPage> {
   /// Controller for the id input bar.
-  final _idController = TextEditingController();
+  final _idController = IDTextEditingController();
 
   /// Update url. If it's not null, means an update is available.
   var _updateUrl = '';
@@ -49,9 +50,9 @@ class _ConnectionPageState extends State<ConnectionPage> {
     if (_idController.text.isEmpty) {
       () async {
         final lastRemoteId = await bind.mainGetLastRemoteId();
-        if (lastRemoteId != _idController.text) {
+        if (lastRemoteId != _idController.id) {
           setState(() {
-            _idController.text = lastRemoteId;
+            _idController.id = lastRemoteId;
           });
         }
       }();
@@ -72,8 +73,8 @@ class _ConnectionPageState extends State<ConnectionPage> {
         mainAxisSize: MainAxisSize.max,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
-          getUpdateUI(),
-          getSearchBarUI(),
+          _buildUpdateUI(),
+          _buildRemoteIDTextField(),
           Expanded(
               child: PeerTabPage(
             tabs: [
@@ -95,7 +96,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
   /// Callback for the connect button.
   /// Connects to the selected peer.
   void onConnect() {
-    var id = _idController.text.trim();
+    var id = _idController.id;
     connect(id);
   }
 
@@ -132,7 +133,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
 
   /// UI for software update.
   /// If [_updateUrl] is not empty, shows a button to update the software.
-  Widget getUpdateUI() {
+  Widget _buildUpdateUI() {
     return _updateUrl.isEmpty
         ? const SizedBox(height: 0)
         : InkWell(
@@ -152,9 +153,9 @@ class _ConnectionPageState extends State<ConnectionPage> {
                         color: Colors.white, fontWeight: FontWeight.bold))));
   }
 
-  /// UI for the search bar.
+  /// UI for the remote ID TextField.
   /// Search for a peer and connect to it if the id exists.
-  Widget getSearchBarUI() {
+  Widget _buildRemoteIDTextField() {
     final w = SizedBox(
       height: 84,
       child: Padding(
@@ -197,6 +198,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
                       ),
                     ),
                     controller: _idController,
+                    inputFormatters: [IDTextInputFormatter()],
                   ),
                 ),
               ),