diff --git a/lib/main.dart b/lib/main.dart
index d933a3bd7..917430a6c 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -8,6 +8,7 @@ import 'package:myapp/photo_provider.dart';
 import 'package:myapp/photo_sync_manager.dart';
 import 'package:myapp/ui/gallery.dart';
 import 'package:myapp/ui/loading_widget.dart';
+import 'package:myapp/ui/search_page.dart';
 import 'package:photo_manager/photo_manager.dart';
 import 'package:provider/provider.dart';
 
@@ -41,22 +42,7 @@ class MyApp extends StatelessWidget {
         builder: (context, snapshot) {
           Widget body;
           if (snapshot.hasData) {
-            body = Container(
-              child: Column(
-                children: <Widget>[
-                  TextField(
-                    decoration: InputDecoration(
-                      border: InputBorder.none,
-                      hintText: 'Search "Paris"',
-                      contentPadding: const EdgeInsets.all(12.0),
-                    ),
-                  ),
-                  Flexible(
-                    child: Gallery(),
-                  )
-                ],
-              ),
-            );
+            body = HomeWidget();
           } else if (snapshot.hasError) {
             logger.e(snapshot.error);
             body = Text("Error!");
@@ -78,3 +64,42 @@ class MyApp extends StatelessWidget {
         });
   }
 }
+
+class HomeWidget extends StatelessWidget {
+  const HomeWidget({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Column(
+        children: <Widget>[
+          Hero(
+              child: TextField(
+                readOnly: true,
+                onTap: () {
+                  logger.i("Tapped");
+                  Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (BuildContext context) {
+                        return SearchPage();
+                      },
+                    ),
+                  );
+                },
+                decoration: InputDecoration(
+                  border: InputBorder.none,
+                  hintText: 'Search "Paris"',
+                  contentPadding: const EdgeInsets.all(12.0),
+                ),
+              ),
+              tag: "search"),
+          Flexible(
+            child: Gallery(),
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/search_page.dart b/lib/ui/search_page.dart
new file mode 100644
index 000000000..6dd6e6082
--- /dev/null
+++ b/lib/ui/search_page.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class SearchPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Hero(
+          tag: "search",
+          flightShuttleBuilder: (BuildContext flightContext,
+                  Animation<double> animation,
+                  HeroFlightDirection flightDirection,
+                  BuildContext fromHeroContext,
+                  BuildContext toHeroContext) =>
+              Material(child: toHeroContext.widget),
+          child: TextField(
+            autofocus: true,
+            decoration: InputDecoration(
+              border: InputBorder.none,
+              hintText: 'Search your photos',
+              contentPadding: const EdgeInsets.all(0.0),
+            ),
+          ),
+        ),
+        actions: <Widget>[
+          // action button
+          IconButton(
+            icon: Icon(Icons.search),
+            onPressed: () {},
+          )
+        ],
+      ),
+    );
+  }
+}