diff --git a/flutter_hbb/lib/common.dart b/flutter_hbb/lib/common.dart
index d424e7e85..a14bd9c1a 100644
--- a/flutter_hbb/lib/common.dart
+++ b/flutter_hbb/lib/common.dart
@@ -17,9 +17,16 @@ class HexColor extends Color {
   }
 }
 
+class MyTheme {
+  static const Color grayBg = Color(0xFFEEEEEE);
+  static const Color white = Color(0xFFFFFFFF);
+}
+
+typedef F1 = void Function(Pointer<Utf8>);
+
 // https://juejin.im/post/6844903864852807694
 class FfiModel with ChangeNotifier {
-  var _connectRemote;
+  F1 _connectRemote;
 
   FfiModel() {
     initialzeFFI();
@@ -39,8 +46,8 @@ class FfiModel with ChangeNotifier {
         : DynamicLibrary.process();
     final initialize = dylib.lookupFunction<Void Function(Pointer<Utf8>),
         void Function(Pointer<Utf8>)>('initialize');
-    _connectRemote = dylib.lookupFunction<Void Function(Pointer<Utf8>),
-        void Function(Pointer<Utf8>)>('connect_remote');
+    _connectRemote = dylib
+        .lookupFunction<Void Function(Pointer<Utf8>), F1>('connect_remote');
     final dir = (await getApplicationDocumentsDirectory()).path;
     initialize(Utf8.toUtf8(dir));
     notifyListeners();
diff --git a/flutter_hbb/lib/home_page.dart b/flutter_hbb/lib/home_page.dart
index c96f307f0..7c076bdad 100644
--- a/flutter_hbb/lib/home_page.dart
+++ b/flutter_hbb/lib/home_page.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'common.dart';
 
 class HomePage extends StatefulWidget {
@@ -11,112 +12,106 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
+  final idController = TextEditingController();
+  FfiModel ffi;
 
   @override
   Widget build(BuildContext context) {
+    ffi = Provider.of<FfiModel>(context);
+
     // This method is rerun every time setState is called
     return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
-            ),
-          ],
+        appBar: AppBar(
+          title: Text(widget.title),
         ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: Icon(Icons.add),
-      ),
-    );
+        body: Container(
+          child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              mainAxisSize: MainAxisSize.max,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: <Widget>[
+                getSearchBarUI(),
+                Expanded(child: Container())
+              ]),
+          color: MyTheme.grayBg,
+          padding: const EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
+        ));
+  }
+
+  void onConnect() {
+    ffi.connect(idController.text);
   }
 
   Widget getSearchBarUI() {
     return Padding(
-      padding: const EdgeInsets.only(top: 8.0, left: 18),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: <Widget>[
-          Container(
-            width: MediaQuery.of(context).size.width * 0.75,
-            height: 64,
-            child: Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 8),
-              child: Container(
-                decoration: BoxDecoration(
-                  color: HexColor('#F8FAFB'),
-                  borderRadius: const BorderRadius.only(
-                    bottomRight: Radius.circular(13.0),
-                    bottomLeft: Radius.circular(13.0),
-                    topLeft: Radius.circular(13.0),
-                    topRight: Radius.circular(13.0),
-                  ),
-                ),
-                child: Row(
-                  children: <Widget>[
-                    Expanded(
-                      child: Container(
-                        padding: const EdgeInsets.only(left: 16, right: 16),
-                        child: TextFormField(
-                          style: TextStyle(
-                            fontFamily: 'WorkSans',
-                            fontWeight: FontWeight.bold,
-                            fontSize: 16,
-                            color: Color(0xFF00B6F0),
-                          ),
-                          keyboardType: TextInputType.text,
-                          decoration: InputDecoration(
-                            labelText: 'Search for course',
-                            border: InputBorder.none,
-                            helperStyle: TextStyle(
-                              fontWeight: FontWeight.bold,
-                              fontSize: 16,
-                              color: HexColor('#B9BABC'),
-                            ),
-                            labelStyle: TextStyle(
-                              fontWeight: FontWeight.w600,
-                              fontSize: 16,
-                              letterSpacing: 0.2,
-                              color: HexColor('#B9BABC'),
-                            ),
-                          ),
-                          onEditingComplete: () {},
-                        ),
-                      ),
-                    ),
-                    SizedBox(
-                      width: 60,
-                      height: 60,
-                      child: Icon(Icons.search, color: HexColor('#B9BABC')),
-                    )
-                  ],
-                ),
+      padding: const EdgeInsets.only(top: 8.0),
+      child: Container(
+        height: 84,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 8, bottom: 8),
+          child: Container(
+            decoration: BoxDecoration(
+              color: MyTheme.white,
+              borderRadius: const BorderRadius.only(
+                bottomRight: Radius.circular(13.0),
+                bottomLeft: Radius.circular(13.0),
+                topLeft: Radius.circular(13.0),
+                topRight: Radius.circular(13.0),
               ),
             ),
+            child: Row(
+              children: <Widget>[
+                Expanded(
+                  child: Container(
+                    padding: const EdgeInsets.only(left: 16, right: 16),
+                    child: TextFormField(
+                      style: TextStyle(
+                        fontFamily: 'WorkSans',
+                        fontWeight: FontWeight.bold,
+                        fontSize: 30,
+                        color: Color(0xFF00B6F0),
+                      ),
+                      keyboardType: TextInputType.text,
+                      decoration: InputDecoration(
+                        labelText: 'Remote ID',
+                        border: InputBorder.none,
+                        helperStyle: TextStyle(
+                          fontWeight: FontWeight.bold,
+                          fontSize: 16,
+                          color: HexColor('#B9BABC'),
+                        ),
+                        labelStyle: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          fontSize: 16,
+                          letterSpacing: 0.2,
+                          color: HexColor('#B9BABC'),
+                        ),
+                      ),
+                      autofocus: false,
+                      controller: idController,
+                    ),
+                  ),
+                ),
+                SizedBox(
+                  width: 60,
+                  height: 60,
+                  child: IconButton(
+                    icon: Icon(Icons.arrow_forward,
+                        color: HexColor('#B9BABC'), size: 45),
+                    onPressed: onConnect,
+                  ),
+                )
+              ],
+            ),
           ),
-          const Expanded(
-            child: SizedBox(),
-          )
-        ],
+        ),
       ),
     );
   }
+
+  @override
+  void dispose() {
+    idController.dispose();
+    super.dispose();
+  }
 }
diff --git a/flutter_hbb/lib/main.dart b/flutter_hbb/lib/main.dart
index 959de8fbe..de0f03e07 100644
--- a/flutter_hbb/lib/main.dart
+++ b/flutter_hbb/lib/main.dart
@@ -4,10 +4,10 @@ import 'common.dart';
 import 'home_page.dart';
 
 void main() {
-  runApp(_App());
+  runApp(App());
 }
 
-class _App extends StatelessWidget {
+class App extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var ffi = FfiModel();
diff --git a/flutter_hbb/test/widget_test.dart b/flutter_hbb/test/widget_test.dart
index 8a8415e94..3e7534740 100644
--- a/flutter_hbb/test/widget_test.dart
+++ b/flutter_hbb/test/widget_test.dart
@@ -13,7 +13,7 @@ import 'package:flutter_hbb/main.dart';
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(MyApp());
+    await tester.pumpWidget(App());
 
     // Verify that our counter starts at 0.
     expect(find.text('0'), findsOneWidget);