diff --git a/client/ios/Podfile.lock b/client/ios/Podfile.lock
index aedb1a88..e15b2ecc 100644
--- a/client/ios/Podfile.lock
+++ b/client/ios/Podfile.lock
@@ -8,10 +8,13 @@ PODS:
     - Flutter
     - OrderedSet (~> 5.0)
   - OrderedSet (5.0.0)
+  - url_launcher (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_inappwebview (from `.symlinks/plugins/flutter_inappwebview/ios`)
+  - url_launcher (from `.symlinks/plugins/url_launcher/ios`)
 
 SPEC REPOS:
   trunk:
@@ -22,11 +25,14 @@ EXTERNAL SOURCES:
     :path: Flutter
   flutter_inappwebview:
     :path: ".symlinks/plugins/flutter_inappwebview/ios"
+  url_launcher:
+    :path: ".symlinks/plugins/url_launcher/ios"
 
 SPEC CHECKSUMS:
   Flutter: 434fef37c0980e73bb6479ef766c45957d4b510c
   flutter_inappwebview: bfd58618f49dc62f2676de690fc6dcda1d6c3721
   OrderedSet: aaeb196f7fef5a9edf55d89760da9176ad40b93c
+  url_launcher: 6fef411d543ceb26efce54b05a0a40bfd74cbbef
 
 PODFILE CHECKSUM: aafe91acc616949ddb318b77800a7f51bffa2a4c
 
diff --git a/client/lib/test-server.dart b/client/lib/test-server.dart
deleted file mode 100644
index c492167e..00000000
--- a/client/lib/test-server.dart
+++ /dev/null
@@ -1,184 +0,0 @@
-// ignore: file_names
-import 'package:fixnum/fixnum.dart';
-import 'package:grpc/grpc.dart';
-import 'package:pr12er/protos/google/protobuf/timestamp.pb.dart';
-import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
-
-import 'protos/pkg/pr12er/service.pbgrpc.dart';
-
-class GreeterService extends Pr12erServiceBase {
-  @override
-  Future<HelloResponse> getHello(ServiceCall call, HelloRequest request) async {
-    return HelloResponse()..body = 'Hello, ${request.body}';
-  }
-
-  @override
-  Future<GetVideosResponse> getVideos(
-      ServiceCall call, GetVideosRequest request) async {
-    final List<Video> videos = <Video>[
-      Video(
-          id: 1,
-          link: "https://youtu.be/L3hz57whyNw",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "유재준",
-          title: "Generative Adversarial Nets",
-          category: Category.CATEGORY_VISION,
-          publishedDate: Timestamp()..seconds = Int64(1492300850)),
-      Video(
-          id: 1,
-          link: "https://youtu.be/RRwaz0fBQ0Y",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "엄태웅",
-          title: "Deformable Convolutional Networks",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/_Dp8u97_rQ0",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "곽근봉",
-          title:
-              "Learning Phrase Representations using RNN Encoder-Decoder for Statistical Machine Translation",
-          category: Category.CATEGORY_NLP),
-      Video(
-          id: 1,
-          link: "https://youtu.be/1jGr_OFyfa0",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "전태균",
-          title:
-              "Image Super-Resolution using Deep Convolutional Neural Networks",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/V7_cNTfm2i8",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "김성훈",
-          title: "Playing Atari with Deep Reinforcement Learning",
-          category: Category.CATEGORY_UNSPECIFIED),
-      Video(
-          id: 1,
-          link: "https://youtu.be/2wbDiZCWQtY",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "서기호",
-          title: "Neural Turing Machines",
-          category: Category.CATEGORY_UNSPECIFIED),
-      Video(
-          id: 1,
-          link: "https://youtu.be/YF6nLVDlznE",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "김승일",
-          title: "Deep Photo Style Transfer",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/jbnjzyJDldA",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "정동준",
-          title:
-              "Reverse Classification Accuracy: Predicting Segmentation Performance in the Absence of Ground Truth",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/tOItokBZSfU",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "정영재",
-          title: "Distilling the Knowledge in a Neural Network",
-          category: Category.CATEGORY_UNSPECIFIED),
-      Video(
-          id: 1,
-          link: "https://youtu.be/KYA-GEhObIs",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "차준범",
-          title: "Auto-Encoding Variational Bayes",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/kcPAGIgBGRs",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "이진원",
-          title:
-              "Faster R-CNN: Towards Real-time Object Detection with Region Proposal Networks",
-          category: Category.CATEGORY_VISION),
-      Video(
-          id: 1,
-          link: "https://youtu.be/n2J7giHrS-Y",
-          numberOfLike: Int64(10),
-          numberOfViews: Int64(100),
-          presenter: "유재준",
-          title: "Domain Adversarial Training of Neural Network",
-          category: Category.CATEGORY_VISION),
-    ];
-
-    final GetVideosResponse response = GetVideosResponse(videos: videos);
-    // ignore: avoid_print
-    print(response);
-    return response;
-  }
-
-  @override
-  Future<GetDetailsResponse> getDetails(
-      ServiceCall call, GetDetailsRequest request) async {
-    // TODO: implement getDetails
-    final response = GetDetailsResponse(
-        detail: Detail(paper: <Paper>[
-      Paper(
-          absract:
-              "We propose a new framework for estimating generative models via an adversarial process, in which we simultaneously train two models: a generative model G that captures the data distribution, and a discriminative model D that estimates the probability that a sample came from the training data rather than G. The training procedure for G is to maximize the probability of D making a mistake. This framework corresponds to a minimax two-player game. In the space of arbitrary functions G and D, a unique solution exists, with G recovering the training data distribution and D equal to 1/2 everywhere. In the case where G and D are defined by multilayer perceptrons, the entire system can be trained with backpropagation. There is no need for any Markov chains or unrolled approximate inference networks during either training or generation of samples. Experiments demonstrate the potential of the framework through qualitative and quantitative evaluation of the generated samples.",
-          repositories: <Repository>[
-            Repository(
-              framework: Framework.FRAMEWORK_TENSORFLOW,
-              owner: "goodfeli",
-            ),
-            Repository(
-              framework: Framework.FRAMEWORK_PYTORCH,
-              owner: "eriklindernoren",
-            ),
-            Repository(
-                framework: Framework.FRAMEWORK_TENSORFLOW,
-                owner: "google-research"),
-            Repository(
-                framework: Framework.FRAMEWORK_PYTORCH,
-                owner: "eriklindernoren")
-          ])
-    ], sameAuthorPapers: <Paper>[
-      Paper(
-          title:
-              "On distinguishability criteria for estimating generative models",
-          authors: <String>["Ian J. Goodfellow"],
-          pubDate: Timestamp(seconds: Int64(1432189960)))
-    ], relevantPapers: <Paper>[
-      Paper(
-        title:
-            "Learning to Efficiently Sample from Diffusion Probabilistic Models",
-        authors: <String>["Daniel Watson"],
-        pubDate: Timestamp(seconds: Int64(1623047560)),
-      )
-    ]));
-
-    // ignore: avoid_print
-    print(response);
-
-    return response;
-  }
-}
-
-Future<void> main(List<String> args) async {
-  final server = Server(
-    [GreeterService()],
-    const <Interceptor>[],
-    CodecRegistry(codecs: const [GzipCodec(), IdentityCodec()]),
-  );
-  await server.serve(port: 9000);
-  // ignore: avoid_print
-  print('Server listening on port ${server.port}...');
-}
diff --git a/client/lib/utils/formatter.dart b/client/lib/utils/formatter.dart
deleted file mode 100644
index 060cb4de..00000000
--- a/client/lib/utils/formatter.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-String reformatNumbers(int number) {
-  double copyNumber = number.toDouble();
-  int magnitude = 0;
-
-  while (copyNumber.abs() >= 1000) {
-    magnitude += 1;
-    // ignore: parameter_assignments
-    copyNumber /= 1000;
-  }
-
-  String numberString = copyNumber.toString();
-  if (numberString.substring(numberString.length - 2) == ".0") {
-    numberString = numberString.substring(0, numberString.length - 2);
-  }
-
-  return numberString + ['', 'K', 'M', 'G', 'T', 'P'][magnitude];
-}
diff --git a/client/lib/widgets/detail/header.dart b/client/lib/widgets/detail/header.dart
index 6d874459..98c71296 100644
--- a/client/lib/widgets/detail/header.dart
+++ b/client/lib/widgets/detail/header.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
-import 'package:pr12er/utils/formatter.dart';
 
 // ignore: must_be_immutable
 class HeaderWidget extends StatelessWidget {
@@ -43,12 +42,12 @@ class HeaderWidget extends StatelessWidget {
       const SizedBox(width: 8),
       const Icon(Icons.remove_red_eye),
       const SizedBox(width: 8),
-      Text(reformatNumbers(video.numberOfViews.toInt()),
+      Text(NumberFormat.compact().format(video.numberOfViews),
           style: const TextStyle(fontSize: 18)),
       const SizedBox(width: 15),
       getLikeIcon(),
       const SizedBox(width: 8),
-      Text(reformatNumbers(video.numberOfLike.toInt()),
+      Text(NumberFormat.compact().format(video.numberOfLike),
           style: const TextStyle(fontSize: 18)),
     ];
   }
diff --git a/client/lib/widgets/detail/youtube.dart b/client/lib/widgets/detail/youtube.dart
index 0159f6c8..dade2576 100644
--- a/client/lib/widgets/detail/youtube.dart
+++ b/client/lib/widgets/detail/youtube.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+// import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+import 'package:youtube_player_iframe/youtube_player_iframe.dart';
 
 class YoutubeWidget extends StatefulWidget {
   final String youtubeId;
@@ -22,15 +23,13 @@ class _DetailState extends State<YoutubeWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return YoutubePlayerBuilder(
-      player: YoutubePlayer(
-        controller: _controller,
+    return YoutubePlayerControllerProvider(
+      // Provides controller to all the widget below it.
+      controller: _controller,
+      child: const YoutubePlayerIFrame(
+        // ignore: avoid_redundant_argument_values
+        aspectRatio: 16 / 9,
       ),
-      builder: (context, player) {
-        return Column(
-          children: [player],
-        );
-      },
     );
   }
 }
diff --git a/client/pubspec.lock b/client/pubspec.lock
index 69c81d24..985290a4 100644
--- a/client/pubspec.lock
+++ b/client/pubspec.lock
@@ -233,6 +233,11 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   frontend_server_client:
     dependency: transitive
     description:
@@ -413,6 +418,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.0"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   pool:
     dependency: transitive
     description:
@@ -593,6 +605,48 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  url_launcher:
+    dependency: transitive
+    description:
+      name: url_launcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.6"
+  url_launcher_linux:
+    dependency: transitive
+    description:
+      name: url_launcher_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
+  url_launcher_macos:
+    dependency: transitive
+    description:
+      name: url_launcher_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
+  url_launcher_platform_interface:
+    dependency: transitive
+    description:
+      name: url_launcher_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.3"
+  url_launcher_web:
+    dependency: transitive
+    description:
+      name: url_launcher_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
+  url_launcher_windows:
+    dependency: transitive
+    description:
+      name: url_launcher_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   vector_math:
     dependency: transitive
     description:
@@ -649,6 +703,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "8.0.0"
+  youtube_player_iframe:
+    dependency: "direct main"
+    description:
+      name: youtube_player_iframe
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.22.2"
+  flutter: ">=2.0.0"
diff --git a/client/pubspec.yaml b/client/pubspec.yaml
index fc8f7ab3..d519526e 100644
--- a/client/pubspec.yaml
+++ b/client/pubspec.yaml
@@ -30,6 +30,7 @@ dependencies:
   protobuf: ^2.0.0
   provider: ^5.0.0
   youtube_player_flutter: ^8.0.0
+  youtube_player_iframe: ^2.0.0
 
 dev_dependencies:
   build_runner: ^2.0.4
diff --git a/client/test/utils/formatter_test.dart b/client/test/utils/formatter_test.dart
deleted file mode 100644
index b80ac348..00000000
--- a/client/test/utils/formatter_test.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'package:flutter_test/flutter_test.dart';
-import 'package:pr12er/utils/formatter.dart';
-
-void main() {
-  group("format numbers", () {
-    test('format 1,000 to 1K', () {
-      expect(reformatNumbers(1000), "1K");
-    });
-    test('format 10,000 to 10K', () {
-      expect(reformatNumbers(10000), "10K");
-    });
-    test('format 100,000 to 100K', () {
-      expect(reformatNumbers(100000), "100K");
-    });
-    test('format 1,000,000 to 1M', () {
-      expect(reformatNumbers(1000000), "1M");
-    });
-    test('format 1,100 to 1.1K', () {
-      expect(reformatNumbers(1100), "1.1K");
-    });
-  });
-}
diff --git a/server/pkg/pr12er/messages.pb.go b/server/pkg/pr12er/messages.pb.go
index 0007c6c9..bb0bcb56 100644
--- a/server/pkg/pr12er/messages.pb.go
+++ b/server/pkg/pr12er/messages.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
 // 	protoc-gen-go v1.26.0
-// 	protoc        v3.17.1
+// 	protoc        v3.17.0
 // source: pkg/pr12er/messages.proto
 
 package pr12er
diff --git a/server/pkg/pr12er/metadata.pb.go b/server/pkg/pr12er/metadata.pb.go
index 72f3a4be..e643f456 100644
--- a/server/pkg/pr12er/metadata.pb.go
+++ b/server/pkg/pr12er/metadata.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
 // 	protoc-gen-go v1.26.0
-// 	protoc        v3.17.1
+// 	protoc        v3.17.0
 // source: pkg/pr12er/metadata.proto
 
 package pr12er
diff --git a/server/pkg/pr12er/service.pb.go b/server/pkg/pr12er/service.pb.go
index d54a3d88..64715936 100644
--- a/server/pkg/pr12er/service.pb.go
+++ b/server/pkg/pr12er/service.pb.go
@@ -1,7 +1,7 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
 // 	protoc-gen-go v1.26.0
-// 	protoc        v3.17.1
+// 	protoc        v3.17.0
 // source: pkg/pr12er/service.proto
 
 package pr12er