diff --git a/client/.fvmrc b/client/.fvmrc
index 4efffa7..062f393 100644
--- a/client/.fvmrc
+++ b/client/.fvmrc
@@ -1,3 +1,4 @@
 {
-  "flutter": "3.22.1"
+  "flutter": "3.22.1",
+  "flavors": {}
 }
\ No newline at end of file
diff --git a/client/android/app/build.gradle b/client/android/app/build.gradle
index 4922222..bbbf733 100644
--- a/client/android/app/build.gradle
+++ b/client/android/app/build.gradle
@@ -10,7 +10,7 @@ if (localPropertiesFile.exists()) {
 
 def flutterRoot = localProperties.getProperty('flutter.sdk')
 if (flutterRoot == null) {
-    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
+    throw GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
 }
 
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
@@ -52,7 +52,7 @@ android {
 
     // ----- END flavorDimensions (autogenerated by flutter_flavorizr) -----
 
-   compileSdkVersion 33
+   compileSdkVersion 34
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
@@ -69,7 +69,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.xmartlabs.simon_ai"
-        minSdkVersion 21
+        minSdkVersion 26
         targetSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
diff --git a/client/android/app/src/main/AndroidManifest.xml b/client/android/app/src/main/AndroidManifest.xml
index af53bcf..0b060fb 100644
--- a/client/android/app/src/main/AndroidManifest.xml
+++ b/client/android/app/src/main/AndroidManifest.xml
@@ -1,5 +1,10 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.xmartlabs.simon_ai">
     <application android:label="@string/app_name" android:icon="@mipmap/ic_launcher">
+
+        <uses-native-library android:name="libOpenCL.so" android:required="false" />
+        <uses-native-library android:name="libOpenCL-car.so" android:required="false" />
+        <uses-native-library android:name="libOpenCL-pixel.so" android:required="false" />
+        
         <activity android:name=".MainActivity" android:exported="true" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
diff --git a/client/android/build.gradle b/client/android/build.gradle
index c3b1e6b..86b45f3 100644
--- a/client/android/build.gradle
+++ b/client/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.6.10'
+    ext.kotlin_version = '2.0.0'
     repositories {
         google()
         mavenCentral()
diff --git a/client/assets/models/hand_landmarks_detector.tflite b/client/assets/models/hand_landmarks_detector.tflite
new file mode 100644
index 0000000..ea8b0c1
Binary files /dev/null and b/client/assets/models/hand_landmarks_detector.tflite differ
diff --git a/client/ios/Podfile.lock b/client/ios/Podfile.lock
index bc969c6..867177a 100644
--- a/client/ios/Podfile.lock
+++ b/client/ios/Podfile.lock
@@ -21,6 +21,28 @@ PODS:
   - sqflite (0.0.3):
     - Flutter
     - FlutterMacOS
+  - TensorFlowLiteC (2.12.0):
+    - TensorFlowLiteC/Core (= 2.12.0)
+  - TensorFlowLiteC/Core (2.12.0)
+  - TensorFlowLiteC/CoreML (2.12.0):
+    - TensorFlowLiteC/Core
+  - TensorFlowLiteC/Metal (2.12.0):
+    - TensorFlowLiteC/Core
+  - TensorFlowLiteSwift (2.12.0):
+    - TensorFlowLiteSwift/Core (= 2.12.0)
+  - TensorFlowLiteSwift/Core (2.12.0):
+    - TensorFlowLiteC (= 2.12.0)
+  - TensorFlowLiteSwift/CoreML (2.12.0):
+    - TensorFlowLiteC/CoreML (= 2.12.0)
+    - TensorFlowLiteSwift/Core (= 2.12.0)
+  - TensorFlowLiteSwift/Metal (2.12.0):
+    - TensorFlowLiteC/Metal (= 2.12.0)
+    - TensorFlowLiteSwift/Core (= 2.12.0)
+  - tflite_flutter (0.0.1):
+    - Flutter
+    - TensorFlowLiteSwift (= 2.12.0)
+    - TensorFlowLiteSwift/CoreML (= 2.12.0)
+    - TensorFlowLiteSwift/Metal (= 2.12.0)
 
 DEPENDENCIES:
   - app_settings (from `.symlinks/plugins/app_settings/ios`)
@@ -33,6 +55,12 @@ DEPENDENCIES:
   - permission_handler_apple (from `.symlinks/plugins/permission_handler_apple/ios`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sqflite (from `.symlinks/plugins/sqflite/darwin`)
+  - tflite_flutter (from `.symlinks/plugins/tflite_flutter/ios`)
+
+SPEC REPOS:
+  trunk:
+    - TensorFlowLiteC
+    - TensorFlowLiteSwift
 
 EXTERNAL SOURCES:
   app_settings:
@@ -55,6 +83,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
   sqflite:
     :path: ".symlinks/plugins/sqflite/darwin"
+  tflite_flutter:
+    :path: ".symlinks/plugins/tflite_flutter/ios"
 
 SPEC CHECKSUMS:
   app_settings: 017320c6a680cdc94c799949d95b84cb69389ebc
@@ -67,6 +97,9 @@ SPEC CHECKSUMS:
   permission_handler_apple: 9878588469a2b0d0fc1e048d9f43605f92e6cec2
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec
+  TensorFlowLiteC: 20785a69299185a379ba9852b6625f00afd7984a
+  TensorFlowLiteSwift: 3a4928286e9e35bdd3e17970f48e53c80d25e793
+  tflite_flutter: 9433d086a3060431bbc9f3c7c20d017db0e72d08
 
 PODFILE CHECKSUM: 2890ea34b9e9ffb3bc0e2dccd6c1c1d3f8a39969
 
diff --git a/client/ios/Runner/Info.plist b/client/ios/Runner/Info.plist
index 3515f47..2e51a20 100644
--- a/client/ios/Runner/Info.plist
+++ b/client/ios/Runner/Info.plist
@@ -56,4 +56,4 @@
     <key>UIViewControllerBasedStatusBarAppearance</key>
     <false/>
   </dict>
-</plist>
\ No newline at end of file
+</plist>
diff --git a/client/lib/core/di/di_provider.dart b/client/lib/core/di/di_provider.dart
index 2e413e2..83a1c63 100644
--- a/client/lib/core/di/di_provider.dart
+++ b/client/lib/core/di/di_provider.dart
@@ -1,6 +1,7 @@
 import 'package:get_it/get_it.dart';
 import 'package:simon_ai/core/di/app_providers_module.dart';
 import 'package:simon_ai/core/di/di_repository_module.dart';
+import 'package:simon_ai/core/di/di_utils_mobile_module.dart';
 import 'package:simon_ai/core/di/di_utils_module.dart';
 
 abstract class DiProvider {
@@ -10,6 +11,8 @@ abstract class DiProvider {
     // Setup app providers have to be done first
     await AppProvidersModule().setupModule(_instance);
     UtilsDiModule().setupModule(_instance);
+    // TODO add conditional import when having web support
+    PlatformUtilsDiModule().setupModule(_instance);
     RepositoryDiModule().setupModule(_instance);
     await _instance.allReady();
   }
diff --git a/client/lib/core/di/di_utils_mobile_module.dart b/client/lib/core/di/di_utils_mobile_module.dart
new file mode 100644
index 0000000..2a01b7e
--- /dev/null
+++ b/client/lib/core/di/di_utils_mobile_module.dart
@@ -0,0 +1,25 @@
+import 'package:get_it/get_it.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+
+class PlatformUtilsDiModule {
+  PlatformUtilsDiModule._privateConstructor();
+
+  static final PlatformUtilsDiModule _instance =
+      PlatformUtilsDiModule._privateConstructor();
+
+  factory PlatformUtilsDiModule() => _instance;
+
+  void setupModule(GetIt locator) {
+    locator._setupUtilsModule();
+  }
+}
+
+extension _GetItUseCaseDiModuleExtensions on GetIt {
+  void _setupUtilsModule() {
+    registerLazySingleton<KeyPointsMobileManager>(KeyPointsMobileManager.new);
+    registerLazySingleton<KeyPointsManager>(
+      () => get<KeyPointsMobileManager>(),
+    );
+  }
+}
diff --git a/client/lib/core/manager/keypoints/hand_tracking_classifier.dart b/client/lib/core/manager/keypoints/hand_tracking_classifier.dart
new file mode 100644
index 0000000..bf3de96
--- /dev/null
+++ b/client/lib/core/manager/keypoints/hand_tracking_classifier.dart
@@ -0,0 +1,162 @@
+import 'dart:io';
+import 'dart:math';
+
+import 'package:image/image.dart' as img;
+import 'package:simon_ai/core/common/logger.dart';
+import 'package:simon_ai/core/manager/keypoints/image_utils.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+import 'package:simon_ai/gen/assets.gen.dart';
+import 'package:tflite_flutter/tflite_flutter.dart';
+
+class HandTrackingClassifier {
+  final bool _logInit = true;
+  final bool _logResultTime = false;
+
+  final int modelInputSize = 224;
+  final String modelName = Assets.models.handLandmarksDetector;
+
+  late Interpreter _interpreter;
+  Interpreter get interpreter => _interpreter;
+
+  Map<int, Object> outputs = {};
+  late Tensor outputTensor;
+
+  final stopwatch = Stopwatch();
+
+  HandTrackingClassifier({Interpreter? interpreter}) {
+    loadModel(interpreter: interpreter);
+  }
+
+  Future<Interpreter> _createModelInterpreter() {
+    final options = InterpreterOptions()..threads = 4;
+    if (Platform.isAndroid) {
+      options.addDelegate(
+        GpuDelegateV2(
+          options: GpuDelegateOptionsV2(
+            isPrecisionLossAllowed: false,
+            inferencePriority1: 2,
+          ),
+        ),
+      );
+    }
+    return Interpreter.fromAsset(
+      modelName,
+      options: options,
+    );
+  }
+
+  Future<void> loadModel({Interpreter? interpreter}) async {
+    try {
+      _interpreter = interpreter ?? await _createModelInterpreter();
+
+      if (_logInit && interpreter == null) {
+        final inputTensors = _interpreter.getInputTensors();
+        final outputTensors = _interpreter.getOutputTensors();
+        for (final tensor in outputTensors) {
+          Logger.d('Output Tensor: $tensor');
+        }
+        for (final tensor in inputTensors) {
+          Logger.d('Input Tensor: $tensor');
+        }
+        Logger.d('Interpreter loaded successfully');
+      }
+      outputTensor = _interpreter.getOutputTensors().first;
+    } catch (error) {
+      Logger.e('Error while creating interpreter: $error', error);
+    }
+  }
+
+  Future<HandLandmarksResultData> performOperations(img.Image image) async {
+    stopwatch.start();
+
+    final inputImage = ImageUtils.getProcessedImage(image, modelInputSize);
+    stopwatch.stop();
+    final processImageTime = stopwatch.elapsedMilliseconds;
+
+    stopwatch.start();
+    _runModel(inputImage);
+    final result = parseLandmarkData(image);
+
+    stopwatch.stop();
+    final processModelTime = stopwatch.elapsedMilliseconds;
+
+    if (_logResultTime) {
+      Logger.d('Process image time $processImageTime, '
+          'processModelTime: $processModelTime');
+    }
+
+    stopwatch.reset();
+    return result;
+  }
+
+  void _runModel(img.Image inputImage) {
+    final imageMatrix = List.generate(
+      inputImage.height,
+      (y) => List.generate(
+        inputImage.width,
+        (x) {
+          final pixel = inputImage.getPixel(x, y);
+          // Normalize pixel values to [0, 1]
+          return [pixel.r / 255.0, pixel.g / 255.0, pixel.b / 255.0];
+        },
+      ),
+    );
+    final inputs = [imageMatrix];
+    outputs = <int, Object>{
+      // Output 0: Presence of a hand in the image. A float scalar value.
+      0: [List<double>.filled(outputTensor.shape[1], 0.0)],
+      // Output 1: 21 3D screen landmarks normalized by image size.
+      // Represented as a 1x63 tensor.Only valid when the presence score
+      // (Output 0) is above a certain threshold.
+      1: [List<double>.filled(outputTensor.shape.first, 0.0)],
+      // Output 2: Handedness of the predicted hand. A float scalar value.
+      // Only valid when the presence score (Output 0) is above a certain
+      // threshold.
+      2: [List<double>.filled(outputTensor.shape.first, 0.0)],
+      // Output 3: 21 3D world landmarks based on the GHUM hand model.
+      // Represented as a 1x63 tensor.
+      // Only valid when the presence score (Output 0) is above a
+      // certain threshold.
+      3: [List<double>.filled(outputTensor.shape[1], 0.0)],
+    };
+    interpreter.runForMultipleInputs([inputs], outputs);
+  }
+
+  HandLandmarksResultData parseLandmarkData(img.Image image) {
+    final data = (outputs.values.first as List<List<double>>).first;
+    final confidence =
+        (outputs.values.elementAt(1) as List<List<double>>).first.first;
+    final result = <double>[];
+    double x;
+    double y;
+    double z;
+
+    final padSize = max(image.height, image.width);
+    final padY = max(0, (image.width - image.height) / 2);
+    final padX = max(0, (image.height - image.width) / 2);
+
+    const landmarksOutputDimensions = 63;
+
+    for (var i = 0; i < landmarksOutputDimensions; i += 3) {
+      final double padXRatio = padX / padSize;
+      final double padYRatio = padY / padSize;
+
+      final double normalizedPadX = padXRatio * modelInputSize;
+      final double normalizedPadY = padYRatio * modelInputSize;
+
+      final double adjustedModelInputSizeX =
+          modelInputSize - (2 * normalizedPadX);
+      final double adjustedModelInputSizeY =
+          modelInputSize - (2 * normalizedPadY);
+
+      final double normalizedDataX = data[0 + i] - normalizedPadX;
+      final double normalizedDataY = data[1 + i] - normalizedPadY;
+
+      x = (normalizedDataX / adjustedModelInputSizeX) * image.width;
+      y = (normalizedDataY / adjustedModelInputSizeY) * image.height;
+      z = data[2 + i];
+      result.addAll([y, x, z]);
+    }
+    return (confidence: confidence, keyPoints: result);
+  }
+}
diff --git a/client/lib/core/manager/keypoints/hand_tracking_isolate.dart b/client/lib/core/manager/keypoints/hand_tracking_isolate.dart
new file mode 100644
index 0000000..9eb1dcb
--- /dev/null
+++ b/client/lib/core/manager/keypoints/hand_tracking_isolate.dart
@@ -0,0 +1,67 @@
+import 'dart:io';
+import 'dart:isolate';
+
+import 'package:camera/camera.dart';
+import 'package:image/image.dart' as img;
+import 'package:simon_ai/core/common/logger.dart';
+import 'package:simon_ai/core/manager/keypoints/image_utils.dart';
+import 'package:tflite_flutter/tflite_flutter.dart';
+
+import 'package:simon_ai/core/manager/keypoints/hand_tracking_classifier.dart';
+
+class HandTrackingIsolateUtils {
+  static const _logTimes = false;
+
+  final ReceivePort _receivePort = ReceivePort();
+  late SendPort _sendPort;
+
+  SendPort get sendPort => _sendPort;
+
+  Future<void> start() async {
+    await Isolate.spawn<SendPort>(
+      entryPoint,
+      _receivePort.sendPort,
+      debugName: 'MoveNetIsolate',
+    );
+
+    _sendPort = await _receivePort.first;
+  }
+
+  static void entryPoint(SendPort sendPort) {
+    final port = ReceivePort();
+    sendPort.send(port.sendPort);
+
+    port.listen((data) {
+      if (data is IsolateData) {
+        final classifier = HandTrackingClassifier(
+          interpreter: Interpreter.fromAddress(data.interpreterAddress),
+        );
+        final stopwatch = Stopwatch()..start();
+        var image = ImageUtils.convertCameraImage(data.cameraImage)!;
+        if (Platform.isAndroid) {
+          image = img.copyRotate(image, angle: 270);
+          image = img.flipHorizontal(image);
+        }
+        stopwatch.stop();
+        final elapsedToProcessImage = stopwatch.elapsedMilliseconds;
+        stopwatch.start();
+
+        classifier.performOperations(image).then((result) {
+          data.responsePort.send(result);
+
+          if (_logTimes) {
+            Logger.d('Process image $elapsedToProcessImage ms, process model '
+                '${stopwatch.elapsedMilliseconds}ms');
+          }
+        });
+      }
+    });
+  }
+}
+
+/// Bundles data to pass between Isolate
+typedef IsolateData = ({
+  CameraImage cameraImage,
+  int interpreterAddress,
+  SendPort responsePort,
+});
diff --git a/client/lib/core/manager/keypoints/hand_tracking_points.dart b/client/lib/core/manager/keypoints/hand_tracking_points.dart
new file mode 100644
index 0000000..c5c2cd9
--- /dev/null
+++ b/client/lib/core/manager/keypoints/hand_tracking_points.dart
@@ -0,0 +1,36 @@
+import 'dart:ui';
+
+// The order is important, it follows the model order
+enum HandLandmark {
+  wrist,
+  thumbCmc,
+  thumbMcp,
+  thumbIp,
+  thumbTip,
+  indexFingerMcp,
+  indexFingerPip,
+  indexFingerDip,
+  indexFingerTip,
+  middleFingerMcp,
+  middleFingerPip,
+  middleFingerDip,
+  middleFingerTip,
+  ringFingerMcp,
+  ringFingerPip,
+  ringFingerDip,
+  ringFingerTip,
+  pinkyMcp,
+  pinkyPip,
+  pinkyDip,
+  pinkyTip,
+}
+
+typedef KeyPointData = ({
+  double x,
+  double y,
+  double z,
+});
+
+extension MoveNetPointDataExtensions on KeyPointData {
+  Offset getOffset(Size size) => Offset(x, y);
+}
diff --git a/client/lib/core/manager/keypoints/image_utils.dart b/client/lib/core/manager/keypoints/image_utils.dart
new file mode 100644
index 0000000..56a872c
--- /dev/null
+++ b/client/lib/core/manager/keypoints/image_utils.dart
@@ -0,0 +1,129 @@
+import 'dart:io';
+import 'dart:math';
+
+import 'package:camera/camera.dart';
+import 'package:flutter/foundation.dart';
+import 'package:image/image.dart' as img;
+import 'package:path_provider/path_provider.dart';
+import 'package:simon_ai/core/common/logger.dart';
+
+class ImageUtils {
+  /// Converts a [CameraImage] in YUV420 format to [img.Image] in RGB format
+  static img.Image? convertCameraImage(CameraImage cameraImage) {
+    if (cameraImage.format.group == ImageFormatGroup.yuv420) {
+      return convertYUV420ToImage(cameraImage);
+    } else if (cameraImage.format.group == ImageFormatGroup.bgra8888) {
+      return convertBGRA8888ToImage(cameraImage);
+    } else {
+      return null;
+    }
+  }
+
+  /// Converts a [CameraImage] in BGRA888 format to [img.Image] in RGB format
+  static img.Image convertBGRA8888ToImage(CameraImage cameraImage) =>
+      img.Image.fromBytes(
+        width: cameraImage.planes.first.width!,
+        height: cameraImage.planes.first.height!,
+        bytes: cameraImage.planes.first.bytes.buffer,
+        order: img.ChannelOrder.bgra,
+      );
+
+  /// Converts a [CameraImage] in YUV420 format to [img.Image] in RGB format
+  static img.Image convertYUV420ToImage(CameraImage cameraImage) {
+    final width = cameraImage.width;
+    final height = cameraImage.height;
+
+    final uvRowStride = cameraImage.planes[1].bytesPerRow;
+    final uvPixelStride = cameraImage.planes[1].bytesPerPixel!;
+
+    final image = img.Image(width: width, height: height);
+
+    for (var w = 0; w < width; w++) {
+      for (var h = 0; h < height; h++) {
+        final uvIndex =
+            uvPixelStride * (w / 2).floor() + uvRowStride * (h / 2).floor();
+        final index = h * width + w;
+
+        final y = cameraImage.planes.first.bytes[index];
+        final u = cameraImage.planes[1].bytes[uvIndex];
+        final v = cameraImage.planes[2].bytes[uvIndex];
+
+        // Compute RGB values per formula above.
+        int r = (y + v * 1436 / 1024 - 179).round();
+        int g = (y - u * 46549 / 131072 + 44 - v * 93604 / 131072 + 91).round();
+        int b = (y + u * 1814 / 1024 - 227).round();
+
+        r = r.clamp(0, 255);
+        g = g.clamp(0, 255);
+        b = b.clamp(0, 255);
+
+        image.setPixelRgb(w, h, r, g, b);
+      }
+    }
+    return image;
+  }
+
+  /// Convert a single YUV pixel to RGB
+  static int yuv2rgb(int y, int u, int v) {
+    // Convert yuv pixel to rgb
+    var r = (y + v * 1436 / 1024 - 179).round();
+    var g = (y - u * 46549 / 131072 + 44 - v * 93604 / 131072 + 91).round();
+    var b = (y + u * 1814 / 1024 - 227).round();
+
+    // Clipping RGB values to be inside boundaries [ 0 , 255 ]
+    r = r.clamp(0, 255);
+    g = g.clamp(0, 255);
+    b = b.clamp(0, 255);
+
+    return 0xff000000 |
+        ((b << 16) & 0xff0000) |
+        ((g << 8) & 0xff00) |
+        (r & 0xff);
+  }
+
+  static Future<void> saveImage(img.Image image, [int i = 0]) async {
+    final jpeg = img.encodeJpg(image);
+    final appDir = await getTemporaryDirectory();
+    final appPath = appDir.path;
+    final fileOnDevice = File('$appPath/out$i.jpg');
+    await fileOnDevice.writeAsBytes(jpeg, flush: true);
+    if (kDebugMode) {
+      Logger.d('Saved $appPath/out$i.jpg');
+    }
+  }
+
+  static img.Image getProcessedImage(img.Image inputImage, int modelInputSize) {
+    final padSize = max(inputImage.height, inputImage.width);
+
+    final paddedImage = img.Image(width: padSize, height: padSize);
+
+    final int offsetX = (padSize - inputImage.width) ~/ 2;
+    final int offsetY = (padSize - inputImage.height) ~/ 2;
+
+    for (int x = 0; x < inputImage.width; x++) {
+      for (int y = 0; y < inputImage.height; y++) {
+        final int paddedX = x + offsetX;
+        final int paddedY = y + offsetY;
+        if (paddedX < paddedImage.width && paddedY < paddedImage.height) {
+          final pixel = inputImage.getPixelSafe(x, y);
+          final color = img.ColorFloat16.rgba(
+            pixel.r.toInt(),
+            pixel.g.toInt(),
+            pixel.b.toInt(),
+            pixel.a.toInt(),
+          );
+          paddedImage.setPixel(paddedX, paddedY, color);
+        } else {
+          throw ArgumentError(
+            'Pixel coordinates are out of bounds for the padded image.',
+          );
+        }
+      }
+    }
+    return img.copyResize(
+      paddedImage,
+      width: modelInputSize,
+      height: modelInputSize,
+    );
+  }
+}
diff --git a/client/lib/core/manager/keypoints/keypoints_manager.dart b/client/lib/core/manager/keypoints/keypoints_manager.dart
new file mode 100644
index 0000000..ebbdf25
--- /dev/null
+++ b/client/lib/core/manager/keypoints/keypoints_manager.dart
@@ -0,0 +1,7 @@
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+
+abstract class KeyPointsManager {
+  Future<HandLandmarksData?> processFrame(dynamic newFrame);
+
+  Future<void> init();
+}
diff --git a/client/lib/core/manager/keypoints/keypoints_manager_mobile.dart b/client/lib/core/manager/keypoints/keypoints_manager_mobile.dart
new file mode 100644
index 0000000..9c82789
--- /dev/null
+++ b/client/lib/core/manager/keypoints/keypoints_manager_mobile.dart
@@ -0,0 +1,75 @@
+import 'dart:async';
+import 'dart:isolate';
+
+import 'package:simon_ai/core/common/logger.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager.dart';
+import 'package:simon_ai/core/manager/keypoints/hand_tracking_classifier.dart';
+import 'package:simon_ai/core/manager/keypoints/hand_tracking_isolate.dart';
+import 'package:simon_ai/core/manager/keypoints/hand_tracking_points.dart';
+
+typedef HandLandmarksData = ({
+  double confidence,
+  List<KeyPointData> keyPoints,
+});
+
+typedef HandLandmarksResultData = ({
+  double confidence,
+  List<double> keyPoints,
+});
+
+class KeyPointsMobileManager implements KeyPointsManager {
+  late HandTrackingClassifier classifier;
+  late HandTrackingIsolateUtils isolate;
+  var _currentFrame = 0;
+  var _lastCurrentFrame = 0;
+
+  @override
+  Future<void> init() async {
+    isolate = HandTrackingIsolateUtils();
+    await isolate.start();
+    classifier = HandTrackingClassifier();
+
+    Timer.periodic(const Duration(seconds: 1), (timer) {
+      final currentFrame = _currentFrame;
+      Logger.d('FPS: ${currentFrame - _lastCurrentFrame}');
+      _lastCurrentFrame = currentFrame;
+    });
+  }
+
+  @override
+  Future<HandLandmarksData> processFrame(
+    dynamic newFrame,
+  ) async {
+    final resultData = await _inference(newFrame);
+    _currentFrame++;
+    final processedKeyPoints = _processKeypoints(resultData.keyPoints);
+    return (confidence: resultData.confidence, keyPoints: processedKeyPoints);
+  }
+
+  Future<HandLandmarksResultData> _inference(dynamic newFrame) async {
+    final responsePort = ReceivePort();
+    final IsolateData isolateData = (
+      cameraImage: newFrame,
+      interpreterAddress: classifier.interpreter.address,
+      responsePort: responsePort.sendPort
+    );
+    isolate.sendPort.send(isolateData);
+    return await responsePort.first;
+  }
+
+  List<KeyPointData> _processKeypoints(List<double>? keypoints) {
+    final result = <KeyPointData>[];
+    if (keypoints != null &&
+        keypoints.length == (HandLandmark.values.length * 3)) {
+      for (var i = 0; i < HandLandmark.values.length * 3; i += 3) {
+        final KeyPointData keyPointData = (
+          x: keypoints[i + 1],
+          y: keypoints[i + 0],
+          z: keypoints[i + 2],
+        );
+        result.add(keyPointData);
+      }
+    }
+    return result;
+  }
+}
diff --git a/client/lib/gen/assets.gen.dart b/client/lib/gen/assets.gen.dart
index bd63c9a..f45d26f 100644
--- a/client/lib/gen/assets.gen.dart
+++ b/client/lib/gen/assets.gen.dart
@@ -35,10 +35,22 @@ class $AssetsImagesGen {
       [check, estrella, reloj, backgroundGreenProp, backgroundRedProp];
 }
 
+class $AssetsModelsGen {
+  const $AssetsModelsGen();
+
+  /// File path: assets/models/hand_landmarks_detector.tflite
+  String get handLandmarksDetector =>
+      'assets/models/hand_landmarks_detector.tflite';
+
+  /// List of all assets
+  List<String> get values => [handLandmarksDetector];
+}
+
 class Assets {
   Assets._();
 
   static const $AssetsImagesGen images = $AssetsImagesGen();
+  static const $AssetsModelsGen models = $AssetsModelsGen();
 }
 
 class AssetGenImage {
diff --git a/client/lib/ui/camera_hand/camera_hand_cubit.dart b/client/lib/ui/camera_hand/camera_hand_cubit.dart
new file mode 100644
index 0000000..01d8a1e
--- /dev/null
+++ b/client/lib/ui/camera_hand/camera_hand_cubit.dart
@@ -0,0 +1,53 @@
+import 'dart:async';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:simon_ai/core/di/di_provider.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+import 'package:simon_ai/ui/extensions/stream_extensions.dart';
+
+part 'camera_hand_state.dart';
+
+part 'camera_hand_cubit.freezed.dart';
+
+class CameraHandCubit extends Cubit<CameraHandState> {
+  final KeyPointsManager _keyPointsManager = DiProvider.get();
+  bool _initializedFirstFrame = false;
+  final StreamController<dynamic> _movementStreamController =
+      StreamController<dynamic>.broadcast();
+
+  late Stream<dynamic> _movenetStream;
+  late Stream<dynamic> _newFrameStream;
+  final _frameController = StreamController<dynamic>.broadcast();
+
+  CameraHandCubit() : super(const CameraHandState.state()) {
+    _movenetStream = _movementStreamController.stream;
+
+    unawaited(_initializeStream());
+  }
+
+  void onNewFrame(dynamic frame) {
+    _frameController.add(frame);
+  }
+
+  Future<void> _processNewFrame(dynamic newFrame) async {
+    // Wait the transition time
+    if (!_initializedFirstFrame) {
+      await Future.delayed(const Duration(milliseconds: 1000));
+      _initializedFirstFrame = true;
+    }
+
+    final result = await _keyPointsManager.processFrame(newFrame);
+    _movementStreamController.add(result);
+  }
+
+  Future<void> _initializeStream() async {
+    await _keyPointsManager.init();
+    _newFrameStream = _frameController.stream;
+    emit(state.copyWith(movenetResultStream: _movenetStream));
+    // ignore: no-empty-block
+    _newFrameStream.discardWhileProcessing(_processNewFrame).listen((event) {
+      // TODO add implementation for after-processing frame
+    });
+  }
+}
diff --git a/client/lib/ui/camera_hand/camera_hand_cubit.freezed.dart b/client/lib/ui/camera_hand/camera_hand_cubit.freezed.dart
new file mode 100644
index 0000000..8714256
--- /dev/null
+++ b/client/lib/ui/camera_hand/camera_hand_cubit.freezed.dart
@@ -0,0 +1,303 @@
+// coverage:ignore-file
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint
+// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark
+
+part of 'camera_hand_cubit.dart';
+
+// **************************************************************************
+// FreezedGenerator
+// **************************************************************************
+
+T _$identity<T>(T value) => value;
+
+final _privateConstructorUsedError = UnsupportedError(
+    'It seems like you constructed your class using `MyClass._()`. This constructor is only meant to be used by freezed and you are not supposed to need it nor use it.\nPlease check the documentation here for more information: /~https://github.com/rrousselGit/freezed#adding-getters-and-methods-to-our-models');
+
+/// @nodoc
+mixin _$CameraHandState {
+  ({double confidence, List<({double x, double y, double z})> keyPoints})?
+      get handData => throw _privateConstructorUsedError;
+  Stream<dynamic>? get movenetResultStream =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult when<TResult extends Object?>({
+    required TResult Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)
+        state,
+  }) =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult? whenOrNull<TResult extends Object?>({
+    TResult? Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)?
+        state,
+  }) =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult maybeWhen<TResult extends Object?>({
+    TResult Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)?
+        state,
+    required TResult orElse(),
+  }) =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult map<TResult extends Object?>({
+    required TResult Function(_CameraHandState value) state,
+  }) =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult? mapOrNull<TResult extends Object?>({
+    TResult? Function(_CameraHandState value)? state,
+  }) =>
+      throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult maybeMap<TResult extends Object?>({
+    TResult Function(_CameraHandState value)? state,
+    required TResult orElse(),
+  }) =>
+      throw _privateConstructorUsedError;
+
+  @JsonKey(ignore: true)
+  $CameraHandStateCopyWith<CameraHandState> get copyWith =>
+      throw _privateConstructorUsedError;
+}
+
+/// @nodoc
+abstract class $CameraHandStateCopyWith<$Res> {
+  factory $CameraHandStateCopyWith(
+          CameraHandState value, $Res Function(CameraHandState) then) =
+      _$CameraHandStateCopyWithImpl<$Res, CameraHandState>;
+  @useResult
+  $Res call(
+      {({
+        double confidence,
+        List<({double x, double y, double z})> keyPoints
+      })? handData,
+      Stream<dynamic>? movenetResultStream});
+}
+
+/// @nodoc
+class _$CameraHandStateCopyWithImpl<$Res, $Val extends CameraHandState>
+    implements $CameraHandStateCopyWith<$Res> {
+  _$CameraHandStateCopyWithImpl(this._value, this._then);
+
+  // ignore: unused_field
+  final $Val _value;
+  // ignore: unused_field
+  final $Res Function($Val) _then;
+
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? handData = freezed,
+    Object? movenetResultStream = freezed,
+  }) {
+    return _then(_value.copyWith(
+      handData: freezed == handData
+          ? _value.handData
+          : handData // ignore: cast_nullable_to_non_nullable
+              as ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })?,
+      movenetResultStream: freezed == movenetResultStream
+          ? _value.movenetResultStream
+          : movenetResultStream // ignore: cast_nullable_to_non_nullable
+              as Stream<dynamic>?,
+    ) as $Val);
+  }
+}
+
+/// @nodoc
+abstract class _$$CameraHandStateImplCopyWith<$Res>
+    implements $CameraHandStateCopyWith<$Res> {
+  factory _$$CameraHandStateImplCopyWith(_$CameraHandStateImpl value,
+          $Res Function(_$CameraHandStateImpl) then) =
+      __$$CameraHandStateImplCopyWithImpl<$Res>;
+  @override
+  @useResult
+  $Res call(
+      {({
+        double confidence,
+        List<({double x, double y, double z})> keyPoints
+      })? handData,
+      Stream<dynamic>? movenetResultStream});
+}
+
+/// @nodoc
+class __$$CameraHandStateImplCopyWithImpl<$Res>
+    extends _$CameraHandStateCopyWithImpl<$Res, _$CameraHandStateImpl>
+    implements _$$CameraHandStateImplCopyWith<$Res> {
+  __$$CameraHandStateImplCopyWithImpl(
+      _$CameraHandStateImpl _value, $Res Function(_$CameraHandStateImpl) _then)
+      : super(_value, _then);
+
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? handData = freezed,
+    Object? movenetResultStream = freezed,
+  }) {
+    return _then(_$CameraHandStateImpl(
+      handData: freezed == handData
+          ? _value.handData
+          : handData // ignore: cast_nullable_to_non_nullable
+              as ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })?,
+      movenetResultStream: freezed == movenetResultStream
+          ? _value.movenetResultStream
+          : movenetResultStream // ignore: cast_nullable_to_non_nullable
+              as Stream<dynamic>?,
+    ));
+  }
+}
+
+/// @nodoc
+
+class _$CameraHandStateImpl implements _CameraHandState {
+  const _$CameraHandStateImpl({this.handData, this.movenetResultStream = null});
+
+  @override
+  final ({
+    double confidence,
+    List<({double x, double y, double z})> keyPoints
+  })? handData;
+  @override
+  @JsonKey()
+  final Stream<dynamic>? movenetResultStream;
+
+  @override
+  String toString() {
+    return 'CameraHandState.state(handData: $handData, movenetResultStream: $movenetResultStream)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _$CameraHandStateImpl &&
+            (identical(other.handData, handData) ||
+                other.handData == handData) &&
+            (identical(other.movenetResultStream, movenetResultStream) ||
+                other.movenetResultStream == movenetResultStream));
+  }
+
+  @override
+  int get hashCode => Object.hash(runtimeType, handData, movenetResultStream);
+
+  @JsonKey(ignore: true)
+  @override
+  @pragma('vm:prefer-inline')
+  _$$CameraHandStateImplCopyWith<_$CameraHandStateImpl> get copyWith =>
+      __$$CameraHandStateImplCopyWithImpl<_$CameraHandStateImpl>(
+          this, _$identity);
+
+  @override
+  @optionalTypeArgs
+  TResult when<TResult extends Object?>({
+    required TResult Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)
+        state,
+  }) {
+    return state(handData, movenetResultStream);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult? whenOrNull<TResult extends Object?>({
+    TResult? Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)?
+        state,
+  }) {
+    return state?.call(handData, movenetResultStream);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult maybeWhen<TResult extends Object?>({
+    TResult Function(
+            ({
+              double confidence,
+              List<({double x, double y, double z})> keyPoints
+            })? handData,
+            Stream<dynamic>? movenetResultStream)?
+        state,
+    required TResult orElse(),
+  }) {
+    if (state != null) {
+      return state(handData, movenetResultStream);
+    }
+    return orElse();
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult map<TResult extends Object?>({
+    required TResult Function(_CameraHandState value) state,
+  }) {
+    return state(this);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult? mapOrNull<TResult extends Object?>({
+    TResult? Function(_CameraHandState value)? state,
+  }) {
+    return state?.call(this);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult maybeMap<TResult extends Object?>({
+    TResult Function(_CameraHandState value)? state,
+    required TResult orElse(),
+  }) {
+    if (state != null) {
+      return state(this);
+    }
+    return orElse();
+  }
+}
+
+abstract class _CameraHandState implements CameraHandState {
+  const factory _CameraHandState(
+      {final ({
+        double confidence,
+        List<({double x, double y, double z})> keyPoints
+      })? handData,
+      final Stream<dynamic>? movenetResultStream}) = _$CameraHandStateImpl;
+
+  @override
+  ({double confidence, List<({double x, double y, double z})> keyPoints})?
+      get handData;
+  @override
+  Stream<dynamic>? get movenetResultStream;
+  @override
+  @JsonKey(ignore: true)
+  _$$CameraHandStateImplCopyWith<_$CameraHandStateImpl> get copyWith =>
+      throw _privateConstructorUsedError;
+}
diff --git a/client/lib/ui/camera_hand/camera_hand_screen.dart b/client/lib/ui/camera_hand/camera_hand_screen.dart
new file mode 100644
index 0000000..2f67f36
--- /dev/null
+++ b/client/lib/ui/camera_hand/camera_hand_screen.dart
@@ -0,0 +1,45 @@
+// ignore_for_file: unused-files, unused-code
+import 'package:auto_route/auto_route.dart';
+import 'package:design_system/extensions/context_extensions.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:simon_ai/ui/camera_hand/camera_hand_cubit.dart';
+import 'package:simon_ai/ui/widgets/camera/camera_widget.dart';
+
+@RoutePage()
+class CameraHandScreen extends StatelessWidget {
+  const CameraHandScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) => BlocProvider(
+        create: (_) => CameraHandCubit(),
+        child: _CameraHandContentScreen(),
+      );
+}
+
+class _CameraHandContentScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) =>
+      BlocBuilder<CameraHandCubit, CameraHandState>(
+        builder: (context, state) => Scaffold(
+          backgroundColor: context.theme.colorScheme.secondary,
+          appBar: AppBar(
+            title: const Text('Camera Hand Tracking'),
+          ),
+          body: SafeArea(
+            child: Stack(
+              children: [
+                CameraWidget(
+                  width: 480,
+                  height: 640,
+                  enableBorderRadius: true,
+                  onNewFrame: (dynamic frame) =>
+                      context.read<CameraHandCubit>().onNewFrame(frame),
+                  movenetStream: state.movenetResultStream,
+                ),
+              ],
+            ),
+          ),
+        ),
+      );
+}
diff --git a/client/lib/ui/camera_hand/camera_hand_state.dart b/client/lib/ui/camera_hand/camera_hand_state.dart
new file mode 100644
index 0000000..5d3aa84
--- /dev/null
+++ b/client/lib/ui/camera_hand/camera_hand_state.dart
@@ -0,0 +1,9 @@
+part of 'camera_hand_cubit.dart';
+
+@freezed
+class CameraHandState with _$CameraHandState {
+  const factory CameraHandState.state({
+    HandLandmarksData? handData,
+    @Default(null) Stream<dynamic>? movenetResultStream,
+  }) = _CameraHandState;
+}
diff --git a/client/lib/ui/extensions/stream_extensions.dart b/client/lib/ui/extensions/stream_extensions.dart
new file mode 100644
index 0000000..74dc657
--- /dev/null
+++ b/client/lib/ui/extensions/stream_extensions.dart
@@ -0,0 +1,35 @@
+import 'dart:async';
+
+extension StreamExtensions<T> on Stream<T> {
+  Stream<R> discardWhileProcessing<R>(FutureOr<R> Function(T) asyncMapper) {
+    T? lastUnprocessedValue;
+    var isProcessing = false;
+    // Define a separate async function to process the value.
+    Future<void> processValue(T value, EventSink<R> sink) async {
+      sink.add(await asyncMapper(value));
+      T? lastValue;
+      while (lastUnprocessedValue != null) {
+        lastValue = lastUnprocessedValue;
+        lastUnprocessedValue = null;
+        sink.add(await asyncMapper(lastValue as T));
+      }
+    }
+
+    return transform(
+      StreamTransformer<T, R>.fromHandlers(
+        handleData: (T value, EventSink<R> sink) {
+          if (!isProcessing) {
+            isProcessing = true;
+            // Execute async work in a separate function.
+            processValue(value, sink).then((_) => isProcessing = false);
+          } else {
+            lastUnprocessedValue = value;
+          }
+        },
+        handleError: (Object error, StackTrace stackTrace, EventSink<R> sink) =>
+            sink.addError(error, stackTrace),
+        handleDone: (EventSink<R> sink) => sink.close(),
+      ),
+    );
+  }
+}
diff --git a/client/lib/ui/hand/hand_drawing_widget.dart b/client/lib/ui/hand/hand_drawing_widget.dart
new file mode 100644
index 0000000..cf38625
--- /dev/null
+++ b/client/lib/ui/hand/hand_drawing_widget.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/widgets.dart';
+import 'package:simon_ai/ui/hand/hand_model_widget.dart';
+import 'package:simon_ai/ui/hand/hand_drawing_widget_mobile.dart';
+
+class HandDrawingWidget extends StatefulWidget with HandModelWidget {
+  final double width;
+  final double height;
+  @override
+  final Stream<dynamic> movenetStream;
+
+  HandDrawingWidget({
+    required this.width,
+    required this.height,
+    required this.movenetStream,
+    super.key,
+  });
+
+  @override
+  HandPlatformWidgetState createState() => HandPlatformWidgetState();
+}
diff --git a/client/lib/ui/hand/hand_drawing_widget_mobile.dart b/client/lib/ui/hand/hand_drawing_widget_mobile.dart
new file mode 100644
index 0000000..aa997de
--- /dev/null
+++ b/client/lib/ui/hand/hand_drawing_widget_mobile.dart
@@ -0,0 +1,23 @@
+import 'package:design_system/extensions/context_extensions.dart';
+import 'package:flutter/material.dart';
+import 'package:simon_ai/ui/hand/hand_render_painter.dart';
+import 'package:simon_ai/ui/hand/hand_model_widget.dart';
+import 'package:simon_ai/ui/hand/hand_drawing_widget.dart';
+
+class HandPlatformWidgetState extends State<HandDrawingWidget>
+    with HandModelWidgetState<HandDrawingWidget> {
+  @override
+  Widget build(BuildContext context) => Container(
+        decoration: BoxDecoration(
+          color: context.theme.colorScheme.surface,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        height: widget.height,
+        width: widget.width,
+        child: CustomPaint(
+          foregroundPainter: HandRenderPainter(
+            keypoints ?? const (confidence: 0.0, keyPoints: []),
+          ),
+        ),
+      );
+}
diff --git a/client/lib/ui/hand/hand_model_widget.dart b/client/lib/ui/hand/hand_model_widget.dart
new file mode 100644
index 0000000..4fee795
--- /dev/null
+++ b/client/lib/ui/hand/hand_model_widget.dart
@@ -0,0 +1,36 @@
+import 'dart:async';
+
+import 'package:flutter/widgets.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+
+mixin HandModelWidget implements StatefulWidget {
+  abstract final Stream<dynamic>? movenetStream;
+}
+
+mixin HandModelWidgetState<T extends HandModelWidget> implements State<T> {
+  StreamSubscription? _keypointsSubscription;
+
+  HandLandmarksData? keypoints;
+
+  void _initKeypointsStream() {
+    final stream = widget.movenetStream;
+    if (stream != null &&
+        (_keypointsSubscription == null || _keypointsSubscription!.isPaused)) {
+      _keypointsSubscription = stream.listen((keypoints) {
+        setState(() {
+          this.keypoints = keypoints;
+        });
+      });
+    }
+  }
+
+  @override
+  void initState() => _initKeypointsStream();
+
+  @override
+  void didUpdateWidget(covariant HandModelWidget oldWidget) =>
+      _initKeypointsStream();
+
+  @override
+  void dispose() => _keypointsSubscription?.cancel();
+}
diff --git a/client/lib/ui/hand/hand_render_painter.dart b/client/lib/ui/hand/hand_render_painter.dart
new file mode 100644
index 0000000..26fb388
--- /dev/null
+++ b/client/lib/ui/hand/hand_render_painter.dart
@@ -0,0 +1,93 @@
+import 'dart:ui';
+
+import 'package:dartx/dartx.dart';
+import 'package:flutter/material.dart';
+import 'package:simon_ai/core/common/config.dart';
+import 'package:simon_ai/core/manager/keypoints/hand_tracking_points.dart';
+import 'package:simon_ai/core/manager/keypoints/keypoints_manager_mobile.dart';
+
+class HandRenderPainter extends CustomPainter {
+  static const _drawKeypoints = Config.debugMode;
+  static const _scoreThreshold = 0.6;
+
+  late HandLandmarksData keypointsData;
+
+  final _pointGreen = Paint()
+    ..color = Colors.green
+    ..strokeCap = StrokeCap.round
+    ..strokeWidth = 8;
+
+  final _edge = Paint()
+    ..color = const Color(0xFFA1E0E3)
+    ..style = PaintingStyle.stroke
+    ..strokeWidth = 6;
+
+  final _drawableBodyEdges = [
+    const Pair(HandLandmark.wrist, HandLandmark.thumbCmc),
+    const Pair(HandLandmark.thumbCmc, HandLandmark.thumbMcp),
+    const Pair(HandLandmark.thumbMcp, HandLandmark.thumbIp),
+    const Pair(HandLandmark.thumbIp, HandLandmark.thumbTip),
+    const Pair(HandLandmark.wrist, HandLandmark.indexFingerMcp),
+    const Pair(HandLandmark.indexFingerMcp, HandLandmark.indexFingerPip),
+    const Pair(HandLandmark.indexFingerPip, HandLandmark.indexFingerDip),
+    const Pair(HandLandmark.indexFingerDip, HandLandmark.indexFingerTip),
+    const Pair(HandLandmark.indexFingerMcp, HandLandmark.middleFingerMcp),
+    const Pair(HandLandmark.middleFingerMcp, HandLandmark.middleFingerPip),
+    const Pair(HandLandmark.middleFingerPip, HandLandmark.middleFingerDip),
+    const Pair(HandLandmark.middleFingerDip, HandLandmark.middleFingerTip),
+    const Pair(HandLandmark.middleFingerMcp, HandLandmark.ringFingerMcp),
+    const Pair(HandLandmark.ringFingerMcp, HandLandmark.ringFingerPip),
+    const Pair(HandLandmark.ringFingerPip, HandLandmark.ringFingerDip),
+    const Pair(HandLandmark.ringFingerDip, HandLandmark.ringFingerTip),
+    const Pair(HandLandmark.ringFingerMcp, HandLandmark.pinkyMcp),
+    const Pair(HandLandmark.wrist, HandLandmark.pinkyMcp),
+    const Pair(HandLandmark.pinkyMcp, HandLandmark.pinkyPip),
+    const Pair(HandLandmark.pinkyPip, HandLandmark.pinkyDip),
+    const Pair(HandLandmark.pinkyDip, HandLandmark.pinkyTip),
+  ];
+
+  HandRenderPainter(this.keypointsData);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (keypointsData.confidence > _scoreThreshold) {
+      if (keypointsData.keyPoints.length == HandLandmark.values.length) {
+        drawBody(canvas, size, _edge);
+      }
+      if (_drawKeypoints) {
+        drawKeyPoints(canvas, size);
+      }
+    }
+  }
+
+  void drawKeyPoints(Canvas canvas, Size size) {
+    final pointsGreen = <Offset>[];
+    for (final point in keypointsData.keyPoints) {
+      pointsGreen.add(point.getOffset(size));
+    }
+    canvas.drawPoints(PointMode.points, pointsGreen, _pointGreen);
+  }
+
+  @override
+  bool shouldRepaint(covariant HandRenderPainter oldDelegate) =>
+      keypointsData != oldDelegate.keypointsData;
+
+  void drawBodyLine(
+    Canvas canvas,
+    Size size,
+    Pair<HandLandmark, HandLandmark> line,
+    Paint paint,
+  ) {
+    canvas.drawLine(
+      keypointsData.keyPoints[line.first.index].getOffset(size),
+      keypointsData.keyPoints[line.second.index].getOffset(size),
+      paint,
+    );
+  }
+
+  void drawBody(Canvas canvas, Size size, Paint paint) {
+    for (final points in _drawableBodyEdges) {
+      drawBodyLine(canvas, size, Pair(points.first, points.second), paint);
+    }
+  }
+}
diff --git a/client/lib/ui/router/app_router.dart b/client/lib/ui/router/app_router.dart
index 797a7f8..813b4ac 100644
--- a/client/lib/ui/router/app_router.dart
+++ b/client/lib/ui/router/app_router.dart
@@ -1,5 +1,6 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:simon_ai/core/repository/session_repository.dart';
+import 'package:simon_ai/ui/camera_hand/camera_hand_screen.dart';
 import 'package:simon_ai/ui/game_screen/game_screen.dart';
 import 'package:simon_ai/ui/onboarding/onboarding_handler_screen.dart';
 import 'package:simon_ai/ui/onboarding/register_user_email/register_user_screen.dart';
diff --git a/client/lib/ui/router/app_router.gr.dart b/client/lib/ui/router/app_router.gr.dart
index f795340..007610c 100644
--- a/client/lib/ui/router/app_router.gr.dart
+++ b/client/lib/ui/router/app_router.gr.dart
@@ -21,6 +21,12 @@ abstract class _$AppRouter extends RootStackRouter {
         child: const AuthenticatedSectionRouter(),
       );
     },
+    CameraHandRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const CameraHandScreen(),
+      );
+    },
     EmptyRouteRoute.name: (routeData) {
       return AutoRoutePage<dynamic>(
         routeData: routeData,
@@ -92,6 +98,20 @@ class AuthenticatedSectionRoute extends PageRouteInfo<void> {
   static const PageInfo<void> page = PageInfo<void>(name);
 }
 
+/// generated route for
+/// [CameraHandScreen]
+class CameraHandRoute extends PageRouteInfo<void> {
+  const CameraHandRoute({List<PageRouteInfo>? children})
+      : super(
+          CameraHandRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'CameraHandRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}
+
 /// generated route for
 /// [EmptyRouterPage]
 class EmptyRouteRoute extends PageRouteInfo<void> {
diff --git a/client/lib/ui/widgets/camera/camera_mobile_widget.dart b/client/lib/ui/widgets/camera/camera_mobile_widget.dart
new file mode 100644
index 0000000..fb38a51
--- /dev/null
+++ b/client/lib/ui/widgets/camera/camera_mobile_widget.dart
@@ -0,0 +1,88 @@
+// ignore_for_file: unused_field
+
+import 'dart:io';
+
+import 'package:camera/camera.dart';
+import 'package:flutter/material.dart';
+import 'package:simon_ai/core/common/logger.dart';
+import 'package:simon_ai/ui/hand/hand_render_painter.dart';
+import 'package:simon_ai/ui/hand/hand_model_widget.dart';
+import 'package:simon_ai/ui/widgets/camera/camera_widget.dart';
+
+class CameraPlatformWidgetState extends State<CameraWidget>
+    with WidgetsBindingObserver, HandModelWidgetState<CameraWidget> {
+  CameraController? _cameraController;
+
+  CameraPlatformWidgetState();
+
+  @override
+  void initState() {
+    WidgetsBinding.instance.addObserver(this);
+    _loadCamera();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _cameraController?.dispose();
+    super.dispose();
+  }
+
+  Future<void> _loadCamera() async {
+    final cameras = await availableCameras();
+    _cameraController = CameraController(
+      cameras.lastWhere(
+        (camera) => camera.lensDirection == CameraLensDirection.front,
+      ),
+      ResolutionPreset.medium,
+      enableAudio: false,
+      imageFormatGroup: Platform.isAndroid
+          ? ImageFormatGroup.yuv420
+          : ImageFormatGroup.unknown,
+    );
+    await _cameraController!.initialize().then((value) {
+      if (!mounted) {
+        return;
+      } else {
+        _cameraController!.startImageStream(widget.onNewFrame);
+        // ignore: no-empty-block
+        setState(() {
+          // Camera initialized and started streaming
+        });
+      }
+    }).catchError((Object e) {
+      Logger.w(e, 'Camera initialization error');
+    });
+  }
+
+  @override
+  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
+    switch (state) {
+      case AppLifecycleState.paused:
+        await _cameraController?.stopImageStream();
+        break;
+      case AppLifecycleState.resumed:
+        if (_cameraController != null &&
+            !_cameraController!.value.isStreamingImages) {
+          await _cameraController!.startImageStream(widget.onNewFrame);
+        }
+        break;
+      case AppLifecycleState.detached:
+      case AppLifecycleState.inactive:
+      case AppLifecycleState.hidden:
+        break;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_cameraController == null || !_cameraController!.value.isInitialized) {
+      return Container();
+    }
+    return CustomPaint(
+      foregroundPainter:
+          HandRenderPainter(keypoints ?? (confidence: 0.0, keyPoints: [])),
+      child: CameraPreview(_cameraController!),
+    );
+  }
+}
diff --git a/client/lib/ui/widgets/camera/camera_widget.dart b/client/lib/ui/widgets/camera/camera_widget.dart
new file mode 100644
index 0000000..4f66f08
--- /dev/null
+++ b/client/lib/ui/widgets/camera/camera_widget.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:simon_ai/ui/hand/hand_model_widget.dart';
+import 'package:simon_ai/ui/widgets/camera/camera_mobile_widget.dart'
+    if (dart.library.html) 'package:simon_ai/ui/widgets/camera/camera_web_widget.dart';
+
+class CameraWidget extends StatefulWidget with HandModelWidget {
+  final double width;
+  final double height;
+  final bool enableBorderRadius;
+  final ValueChanged<dynamic> onNewFrame;
+  @override
+  final Stream<dynamic>? movenetStream;
+
+  const CameraWidget({
+    required this.width,
+    required this.height,
+    required this.enableBorderRadius,
+    required this.onNewFrame,
+    this.movenetStream,
+    super.key,
+  });
+
+  @override
+  CameraPlatformWidgetState createState() => CameraPlatformWidgetState();
+}
diff --git a/client/pubspec.lock b/client/pubspec.lock
index 95b35f2..3f09a4a 100644
--- a/client/pubspec.lock
+++ b/client/pubspec.lock
@@ -661,7 +661,7 @@ packages:
     source: hosted
     version: "4.0.2"
   image:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: image
       sha256: "2237616a36c0d69aef7549ab439b833fb7f9fb9fc861af2cc9ac3eedddd69ca8"
@@ -1016,10 +1016,18 @@ packages:
     dependency: transitive
     description:
       name: pubspec_parse
-      sha256: c799b721d79eb6ee6fa56f00c04b472dcd44a30d258fac2174a6ec57302678f8
+      sha256: c63b2876e58e194e4b0828fcb080ad0e06d051cb607a6be51a9e084f47cb9367
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.0"
+    version: "1.2.3"
+  quiver:
+    dependency: transitive
+    description:
+      name: quiver
+      sha256: b1c1ac5ce6688d77f65f3375a9abb9319b3cb32486bdc7a1e0fdf004d7ba4e47
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.2.1"
   rxdart:
     dependency: "direct main"
     description:
@@ -1217,6 +1225,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.0"
+  tflite_flutter:
+    dependency: "direct main"
+    description:
+      name: tflite_flutter
+      sha256: ffb8651fdb116ab0131d6dc47ff73883e0f634ad1ab12bb2852eef1bbeab4a6a
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.10.4"
   time:
     dependency: transitive
     description:
diff --git a/client/pubspec.yaml b/client/pubspec.yaml
index abdf7d5..afed769 100644
--- a/client/pubspec.yaml
+++ b/client/pubspec.yaml
@@ -35,6 +35,7 @@ dependencies:
   freezed_annotation: 2.4.1
   get_it: 7.7.0
   google_fonts: 6.2.1
+  image: 4.2.0
   intl: 0.19.0
   json_annotation: 4.9.0
   logger: 2.3.0
@@ -44,6 +45,7 @@ dependencies:
   sqflite: 2.3.3+1
   stack_trace: 1.11.1
   stock: 1.1.1
+  tflite_flutter: 0.10.4
   hive: 2.2.3
   path_provider: 2.1.3
   path_drawing: 1.0.1
@@ -71,6 +73,7 @@ flutter:
   uses-material-design: true
   assets:
     - assets/images/
+    - assets/models/
     - environments/
 
 flutter_gen: