diff --git a/assets/icons/postman collections.zip b/assets/icons/postman collections.zip
deleted file mode 100644
index 99260808e..000000000
Binary files a/assets/icons/postman collections.zip and /dev/null differ
diff --git a/lib/bademagic_module/utils/byte_array_utils.dart b/lib/bademagic_module/utils/byte_array_utils.dart
index 287b7154f..015694c5b 100644
--- a/lib/bademagic_module/utils/byte_array_utils.dart
+++ b/lib/bademagic_module/utils/byte_array_utils.dart
@@ -28,3 +28,56 @@ List<int> hexStringToByteArray(String hexString) {
   logger.d(data.length);
   return data;
 }
+
+List<List<int>> byteArrayToBinaryArray(List<int> byteArray) {
+  List<List<int>> binaryArray = List.generate(11, (_) => []);
+
+  int rowIndex = 0;
+  for (int byte in byteArray) {
+    List<int> binaryRepresentation = [];
+    for (int i = 7; i >= 0; i--) {
+      binaryRepresentation.add((byte >> i) & 1);
+    }
+
+    binaryArray[rowIndex].addAll(binaryRepresentation);
+
+    rowIndex = (rowIndex + 1) % 11;
+  }
+
+  logger.d(
+      "binaryArray: $binaryArray"); // Use print instead of logger for standalone example
+  return binaryArray;
+}
+
+String hexToBin(String hex) {
+  // Convert hex to binary string
+  String binaryString = BigInt.parse(hex, radix: 16).toRadixString(2);
+
+  // Pad the binary string with leading zeros if necessary to ensure it's a multiple of 8 bits
+  int paddingLength = (8 - (binaryString.length % 8)) % 8;
+  binaryString = binaryString.padLeft(binaryString.length + paddingLength, '0');
+  logger.d("binaryString: $binaryString");
+  return binaryString;
+}
+
+List<List<int>> binaryStringTo2DList(String binaryString) {
+  int maxHeight = 11;
+  List<List<int>> binary2DList = List.generate(maxHeight, (_) => []);
+
+  for (int x = 0; x < binaryString.length; x++) {
+    int a = 0;
+    for (int y = a; y < 11; y++) {
+      for (int z = 0; z < 8; z++) {
+        binary2DList[y].add(int.parse(binaryString[x++]));
+        if (x >= binaryString.length) {
+          break;
+        }
+      }
+      if (x >= binaryString.length) {
+        break;
+      }
+    }
+  }
+  logger.d("binary2DList: $binary2DList");
+  return binary2DList;
+}
diff --git a/lib/bademagic_module/utils/converters.dart b/lib/bademagic_module/utils/converters.dart
index 75fe40d8d..883f221aa 100644
--- a/lib/bademagic_module/utils/converters.dart
+++ b/lib/bademagic_module/utils/converters.dart
@@ -3,6 +3,7 @@ import 'package:badgemagic/bademagic_module/utils/byte_array_utils.dart';
 import 'package:badgemagic/bademagic_module/utils/data_to_bytearray_converter.dart';
 import 'package:badgemagic/bademagic_module/utils/file_helper.dart';
 import 'package:badgemagic/bademagic_module/utils/image_utils.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:get_it/get_it.dart';
 
@@ -12,6 +13,7 @@ class Converters {
   DataToByteArrayConverter converter = DataToByteArrayConverter();
   ImageUtils imageUtils = ImageUtils();
   FileHelper fileHelper = FileHelper();
+  DrawBadgeProvider badgeList = GetIt.instance.get<DrawBadgeProvider>();
 
   int controllerLength = 0;
 
@@ -23,10 +25,8 @@ class Converters {
         var key = controllerData.imageCache.keys.toList()[index];
         if (key is List) {
           String filename = key[0];
-          logger.d("Filename: $filename");
           List<List<int>>? image = await fileHelper.readFromFile(filename);
-          logger.d("Image: $image");
-          hexStrings = convertBitmapToLEDHex(image!, true);
+          hexStrings += convertBitmapToLEDHex(image!, true);
           x += 5;
         } else {
           List<String> hs =
@@ -43,6 +43,22 @@ class Converters {
     return hexStrings;
   }
 
+  void badgeAnimation(String message) async {
+    if (message == "") {
+      //geerate a 2d list with all values as 0
+      List<List<int>> image =
+          List.generate(11, (i) => List.generate(44, (j) => 0));
+      badgeList.setNewGrid(image);
+      badgeList.startAnimation();
+    } else {
+      List<String> hexStrings = await messageTohex(message);
+      List<int> byteArray = hexStringToByteArray(hexStrings.join());
+      List<List<int>> binaryArray = byteArrayToBinaryArray(byteArray);
+      badgeList.setNewGrid(binaryArray);
+      badgeList.startAnimation();
+    }
+  }
+
   //function to convert the bitmap to the LED hex format
   //it takes the 2D list of pixels and converts it to the LED hex format
   static List<String> convertBitmapToLEDHex(
@@ -145,7 +161,6 @@ class Converters {
 
       allHexs.add(lineHex.toString()); // Store completed hexadecimal line
     }
-    logger.d("All hexs: $allHexs");
     return allHexs; // Return list of hexadecimal strings
   }
 }
diff --git a/lib/bademagic_module/utils/image_utils.dart b/lib/bademagic_module/utils/image_utils.dart
index 62107bb14..097755f63 100644
--- a/lib/bademagic_module/utils/image_utils.dart
+++ b/lib/bademagic_module/utils/image_utils.dart
@@ -1,6 +1,5 @@
 import 'dart:ui' as ui;
 import 'dart:ui';
-import 'package:badgemagic/bademagic_module/utils/byte_array_utils.dart';
 import 'package:badgemagic/bademagic_module/utils/converters.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -222,7 +221,6 @@ class ImageUtils {
         }
       }
     }
-    logger.d("Pixel Array generated = $pixelArray");
     return Converters.convertBitmapToLEDHex(pixelArray, false);
   }
 }
diff --git a/lib/badge_animation/ani_right.dart b/lib/badge_animation/ani_right.dart
new file mode 100644
index 000000000..2da0b7985
--- /dev/null
+++ b/lib/badge_animation/ani_right.dart
@@ -0,0 +1,32 @@
+import 'package:badgemagic/badge_animation/animation_abstract.dart';
+
+class RightAnimation extends BadgeAnimation {
+  @override
+  void animation(
+      List<List<bool>> grid,
+      List<List<int>> newGrid,
+      int animationIndex,
+      bool validMarquee,
+      bool flashLEDOn,
+      int currentcountFrame,
+      int i,
+      int j,
+      int newHeight,
+      int newWidth,
+      int badgeHeight,
+      int badgeWidth) {
+    // Calculate the scroll offset to move from left to right
+    int scrollOffset = animationIndex % (newWidth + badgeWidth);
+
+    // Get the corresponding column in the new grid based on the reversed scroll position
+    int sourceCol = newWidth - scrollOffset + j;
+
+    // If sourceCol is within bounds of the new grid, display it, else blank space
+    if (sourceCol >= 0 && sourceCol < newWidth) {
+      grid[i][j] =
+          validMarquee || flashLEDOn && newGrid[i % newHeight][sourceCol] == 1;
+    } else {
+      validMarquee ? grid[i][j] = true : grid[i][j] = false;
+    }
+  }
+}
diff --git a/lib/badge_animation/anim_left.dart b/lib/badge_animation/anim_left.dart
new file mode 100644
index 000000000..4b6869cfd
--- /dev/null
+++ b/lib/badge_animation/anim_left.dart
@@ -0,0 +1,33 @@
+import 'package:badgemagic/badge_animation/animation_abstract.dart';
+
+class LeftAnimation extends BadgeAnimation {
+  @override
+  void animation(
+      List<List<bool>> grid,
+      List<List<int>> newGrid,
+      int animationIndex,
+      bool validMarquee,
+      bool flashLEDOn,
+      int currentcountFrame,
+      int i,
+      int j,
+      int newHeight,
+      int newWidth,
+      int badgeHeight,
+      int badgeWidth) {
+    // Calculate how much of the new grid is currently visible in the grid
+    int scrollOffset = animationIndex % (newWidth + badgeWidth);
+
+    // Get the corresponding column in the new grid based on the scroll position
+    int sourceCol = j + scrollOffset - badgeWidth;
+
+    // If sourceCol is negative, display blank space (off-screen part of the grid)
+    if (sourceCol >= 0 && sourceCol < newWidth) {
+      // Ensure flashLEDOn and validMarquee effects are applied
+      grid[i][j] =
+          validMarquee || flashLEDOn && newGrid[i % newHeight][sourceCol] == 1;
+    } else {
+      validMarquee ? grid[i][j] = true : grid[i][j] = false;
+    }
+  }
+}
diff --git a/lib/badge_animation/animation_abstract.dart b/lib/badge_animation/animation_abstract.dart
new file mode 100644
index 000000000..a14bf1e92
--- /dev/null
+++ b/lib/badge_animation/animation_abstract.dart
@@ -0,0 +1,15 @@
+abstract class BadgeAnimation {
+  void animation(
+      List<List<bool>> grid,
+      List<List<int>> newGrid,
+      int animationIndex,
+      bool validMarquee,
+      bool flashLEDOn,
+      int currentcountFrame,
+      int i,
+      int j,
+      int newHeight,
+      int newWidth,
+      int badgeHeight,
+      int badgeWidth);
+}
diff --git a/lib/constants.dart b/lib/constants.dart
index 2ad79f7b1..cae597664 100644
--- a/lib/constants.dart
+++ b/lib/constants.dart
@@ -15,3 +15,15 @@ const String aniRight = 'assets/animations/ic_anim_right.gif';
 const String effFlash = 'assets/effects/ic_effect_flash.gif';
 const String effInvert = 'assets/effects/ic_effect_invert.gif';
 const String effMarque = 'assets/effects/ic_effect_marquee.gif';
+
+//constants for the animation speed
+const Duration aniBaseSpeed = Duration(microseconds: 200000); // in uS
+const Duration aniMarqueSpeed = Duration(microseconds: 100000); // in uS
+const Duration aniFlashSpeed = Duration(microseconds: 500000); // in uS
+
+// Function to calculate animation speed based on speed level
+int aniSpeedStrategy(int speedLevel) {
+  int speedInMicroseconds = aniBaseSpeed.inMicroseconds -
+      (speedLevel * aniBaseSpeed.inMicroseconds ~/ 8);
+  return speedInMicroseconds;
+}
diff --git a/lib/main.dart b/lib/main.dart
index 2609cf8f4..ba31fc99d 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,5 +1,5 @@
 import 'package:badgemagic/providers/cardsprovider.dart';
-import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/providers/getitlocator.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:badgemagic/view/draw_badge_screen.dart';
diff --git a/lib/providers/badgeview_provider.dart b/lib/providers/badgeview_provider.dart
new file mode 100644
index 000000000..6453a174a
--- /dev/null
+++ b/lib/providers/badgeview_provider.dart
@@ -0,0 +1,205 @@
+import 'dart:async';
+
+import 'package:badgemagic/bademagic_module/utils/byte_array_utils.dart';
+import 'package:badgemagic/badge_animation/ani_right.dart';
+import 'package:badgemagic/badge_animation/anim_left.dart';
+import 'package:badgemagic/badge_animation/animation_abstract.dart';
+import 'package:badgemagic/constants.dart';
+import 'package:badgemagic/providers/cardsprovider.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+
+class DrawBadgeProvider extends ChangeNotifier {
+  CardProvider cardData = GetIt.instance<CardProvider>();
+  int countFrame = 0;
+  int animationIndex = 0;
+  int lastFrame = 0;
+  AnimationController? _controller;
+  int animationSpeed = aniBaseSpeed.inMilliseconds;
+  int counter = 0;
+  Timer? timer;
+  //List that contains the state of each cell of the badge for home view
+  List<List<bool>> homeViewGrid =
+      List.generate(11, (i) => List.generate(44, (j) => false));
+
+  //List that contains the state of each cell of the badge for draw view
+  List<List<bool>> drawViewGrid =
+      List.generate(11, (i) => List.generate(44, (j) => false));
+
+  //getter for the drawViewGrid
+  List<List<bool>> getDrawViewGrid() => drawViewGrid;
+
+  //setter for the drawViewGrid
+  void setDrawViewGrid(List<List<bool>> newGrid) {
+    drawViewGrid = newGrid;
+    notifyListeners();
+  }
+
+  BadgeAnimation? currentAnimation;
+
+  //function to update the state of the cell
+  void updateGrid(int row, int col) {
+    homeViewGrid[row][col] = isDrawing;
+    notifyListeners();
+  }
+
+  //function to reset the state of the cell
+  void resetGrid() {
+    homeViewGrid = List.generate(11, (i) => List.generate(44, (j) => false));
+    notifyListeners();
+  }
+
+  //function to get the state of the cell
+  List<List<bool>> getGrid() => homeViewGrid;
+
+  //boolean variable to check for isDrawing on Draw badge screen
+  bool isDrawing = true;
+
+  //function to toggle the isDrawing variable
+  void toggleIsDrawing(bool drawing) {
+    isDrawing = drawing;
+    notifyListeners();
+  }
+
+  //function to calculate duration for the animation
+  void calculateDuration() {
+    int newSpeed = aniSpeedStrategy(cardData.getOuterValue() - 1);
+    if (newSpeed != animationSpeed) {
+      animationSpeed = newSpeed;
+      timer?.cancel();
+      startTimer();
+    }
+  }
+
+  //function to get the isDrawing variable
+  bool getIsDrawing() => isDrawing;
+
+  List<List<int>> newGrid =
+      List.generate(11, (i) => List.generate(44, (j) => 0));
+
+  //getter for newGrid
+  List<List<int>> getNewGrid() => newGrid;
+
+  //setter for newGrid
+  void setNewGrid(List<List<int>> newGrid) {
+    this.newGrid = newGrid;
+    notifyListeners();
+  }
+
+  void initializeAnimation(TickerProvider vsync) {
+    _controller = AnimationController(
+      vsync: vsync,
+      duration: const Duration(days: 1000),
+    )..addListener(() {
+        setAnimationMode();
+        changeGridValue(newGrid);
+        calculateDuration();
+      });
+    startTimer();
+    _controller!.repeat();
+  }
+
+  void startTimer() {
+    logger.i("Timer started");
+    logger.i("Animation speed: $animationSpeed");
+    timer =
+        Timer.periodic(Duration(microseconds: animationSpeed), (Timer timer) {
+      animationIndex++;
+    });
+  }
+
+  void startAnimation() {
+    animationIndex = 0;
+    _controller!.forward();
+  }
+
+  void setAnimationMode() {
+    switch (cardData.getAnimationIndex()) {
+      //add cases from 0 to 8
+      case 0:
+        currentAnimation = LeftAnimation();
+        break;
+      case 1:
+        currentAnimation = RightAnimation();
+        break;
+      case 2:
+        // currentAnimation = UpAnimation();
+        break;
+      case 3:
+        // currentAnimation = DownAnimation();
+        break;
+      case 4:
+        // currentAnimation = FixedAnimation();
+        break;
+      case 5:
+        // currentAnimation = SnowFlakeAnimation();
+        break;
+      case 6:
+        currentAnimation = null;
+        break;
+      case 7:
+        currentAnimation = null;
+        break;
+      case 8:
+        currentAnimation = null;
+        break;
+      default:
+        currentAnimation = LeftAnimation();
+        break;
+    }
+  }
+
+  void changeGridValue(List<List<int>> newGrid) {
+    int badgeWidth = homeViewGrid[0].length;
+    int badgeHeight = homeViewGrid.length;
+    int newHeight = newGrid.length;
+    int newWidth = newGrid[0].length;
+
+    // Process grid
+    for (int i = 0; i < badgeHeight; i++) {
+      // bool matchFrame = false;
+
+      for (int j = 0; j < badgeWidth; j++) {
+        bool flashLEDOn = true;
+
+        if (cardData.getEffectIndex(1) == 1) {
+          int aIFlash = animationIndex % 2;
+          flashLEDOn = aIFlash == 0;
+        }
+
+        bool validMarquee = false;
+
+        if (cardData.getEffectIndex(2) == 1) {
+          int aIMarquee = animationIndex ~/ 2;
+          validMarquee =
+              (i == 0 || j == 0 || i == badgeHeight - 1 || j == badgeWidth - 1);
+
+          if (validMarquee) {
+            if ((i == 0 || j == badgeWidth - 1) &&
+                !(i == badgeHeight - 1 && j == badgeWidth - 1)) {
+              validMarquee = (i + j) % 4 == (aIMarquee % 4);
+            } else {
+              validMarquee = (i + j - 1) % 4 == (3 - (aIMarquee % 4));
+            }
+          }
+        }
+        if (currentAnimation != null) {
+          currentAnimation!.animation(
+              homeViewGrid,
+              newGrid,
+              animationIndex,
+              validMarquee,
+              flashLEDOn,
+              countFrame,
+              i,
+              j,
+              newHeight,
+              newWidth,
+              badgeHeight,
+              badgeWidth);
+        }
+      }
+      notifyListeners();
+    }
+  }
+}
diff --git a/lib/providers/drawbadge_provider.dart b/lib/providers/drawbadge_provider.dart
deleted file mode 100644
index b08a434e9..000000000
--- a/lib/providers/drawbadge_provider.dart
+++ /dev/null
@@ -1,34 +0,0 @@
-import 'package:flutter/material.dart';
-
-class DrawBadgeProvider extends ChangeNotifier {
-  //List that contains the state of each cell of the badge
-  List<List<bool>> grid =
-      List.generate(11, (i) => List.generate(44, (j) => false));
-
-  //function to update the state of the cell
-  void updateGrid(int row, int col) {
-    grid[row][col] = isDrawing;
-    notifyListeners();
-  }
-
-  //function to reset the state of the cell
-  void resetGrid() {
-    grid = List.generate(11, (i) => List.generate(44, (j) => false));
-    notifyListeners();
-  }
-
-  //function to get the state of the cell
-  List<List<bool>> getGrid() => grid;
-
-  //boolean variable to check for isDrawing on Draw badge screen
-  bool isDrawing = true;
-
-  //function to toggle the isDrawing variable
-  void toggleIsDrawing(bool drawing) {
-    isDrawing = drawing;
-    notifyListeners();
-  }
-
-  //function to get the isDrawing variable
-  bool getIsDrawing() => isDrawing;
-}
diff --git a/lib/providers/getitlocator.dart b/lib/providers/getitlocator.dart
index a9cf3432f..c6dd3e09d 100644
--- a/lib/providers/getitlocator.dart
+++ b/lib/providers/getitlocator.dart
@@ -1,5 +1,5 @@
 import 'package:badgemagic/providers/cardsprovider.dart';
-import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:get_it/get_it.dart';
 
diff --git a/lib/view/draw_badge_screen.dart b/lib/view/draw_badge_screen.dart
index aff778a8f..e0713ce89 100644
--- a/lib/view/draw_badge_screen.dart
+++ b/lib/view/draw_badge_screen.dart
@@ -1,6 +1,6 @@
 import 'package:badgemagic/bademagic_module/utils/file_helper.dart';
 import 'package:badgemagic/constants.dart';
-import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/view/widgets/common_scaffold_widget.dart';
 import 'package:badgemagic/virtualbadge/view/draw_badge.dart';
 import 'package:flutter/material.dart';
diff --git a/lib/view/homescreen.dart b/lib/view/homescreen.dart
index 5d6a0739c..53710abfe 100644
--- a/lib/view/homescreen.dart
+++ b/lib/view/homescreen.dart
@@ -1,9 +1,12 @@
+import 'dart:async';
+
+import 'package:badgemagic/bademagic_module/utils/byte_array_utils.dart';
 import 'package:badgemagic/bademagic_module/utils/converters.dart';
 import 'package:badgemagic/bademagic_module/utils/image_utils.dart';
 import 'package:badgemagic/constants.dart';
 import 'package:badgemagic/providers/badge_message_provider.dart';
 import 'package:badgemagic/providers/cardsprovider.dart';
-import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:badgemagic/view/special_text_field.dart';
 import 'package:badgemagic/view/widgets/common_scaffold_widget.dart';
@@ -26,6 +29,7 @@ class HomeScreen extends StatefulWidget {
 }
 
 class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
+  final ValueNotifier<String> textNotifier = ValueNotifier<String>('');
   late final TabController _tabController;
   BadgeMessageProvider badgeData = BadgeMessageProvider();
   ImageUtils imageUtils = ImageUtils();
@@ -34,19 +38,31 @@ class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
   Converters converters = Converters();
   DrawBadgeProvider drawBadgeProvider = GetIt.instance<DrawBadgeProvider>();
   bool isPrefixIconClicked = false;
+  int textfieldLength = 0;
 
   @override
   void initState() {
+    inlineImageProvider.getController().addListener(_controllerListner);
     drawBadgeProvider.resetGrid();
     SystemChrome.setPreferredOrientations([
       DeviceOrientation.portraitUp,
     ]);
+    drawBadgeProvider.initializeAnimation(this);
     _startImageCaching();
     super.initState();
 
     _tabController = TabController(length: 3, vsync: this);
   }
 
+  void _controllerListner() {
+    logger
+        .d('Controller Listener : ${inlineImageProvider.getController().text}');
+    converters.badgeAnimation(inlineImageProvider.getController().text.isEmpty
+        ? ""
+        : inlineImageProvider.getController().text);
+    inlineImageProvider.controllerListener();
+  }
+
   @override
   void dispose() {
     _tabController.dispose();
@@ -92,9 +108,7 @@ class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
                       borderRadius: BorderRadius.circular(10.r),
                       elevation: 10,
                       child: ExtendedTextField(
-                        onChanged: (value) {
-                          inlineImageProvider.controllerListener();
-                        },
+                        onChanged: (value) {},
                         controller: inlineImageProvider.getController(),
                         specialTextSpanBuilder: MySpecialTextSpanBuilder(),
                         decoration: InputDecoration(
diff --git a/lib/virtualbadge/view/badge_home_view.dart b/lib/virtualbadge/view/badge_home_view.dart
index ca94ddd93..95e7ac2bc 100644
--- a/lib/virtualbadge/view/badge_home_view.dart
+++ b/lib/virtualbadge/view/badge_home_view.dart
@@ -1,6 +1,8 @@
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/virtualbadge/widgets/badge_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:provider/provider.dart';
 
 class BMBadgeHome extends StatefulWidget {
   const BMBadgeHome({super.key});
@@ -12,6 +14,7 @@ class BMBadgeHome extends StatefulWidget {
 class _BMBadgeHomeState extends State<BMBadgeHome> {
   @override
   Widget build(BuildContext context) {
+    final grid = Provider.of<DrawBadgeProvider>(context).getGrid();
     return Container(
       margin: EdgeInsets.only(top: 8.h, left: 15.w, right: 15.w),
       padding: EdgeInsets.all(8.dg),
@@ -22,7 +25,9 @@ class _BMBadgeHomeState extends State<BMBadgeHome> {
         border: Border.all(color: Colors.black),
         borderRadius: BorderRadius.circular(10),
       ),
-      child: const BadgeWidget(),
+      child: BadgeWidget(
+        grid: grid,
+      ),
     );
   }
 }
diff --git a/lib/virtualbadge/view/badge_painter.dart b/lib/virtualbadge/view/badge_painter.dart
index 717a50a20..f9fc66e2f 100644
--- a/lib/virtualbadge/view/badge_painter.dart
+++ b/lib/virtualbadge/view/badge_painter.dart
@@ -15,7 +15,9 @@ class BadgePainter extends CustomPainter {
     for (int row = 0; row < grid.length; row++) {
       for (int col = 0; col < grid[row].length; col++) {
         final Paint paint = Paint()
-          ..color = grid[row][col] ? Colors.red : Colors.grey.shade600
+          ..color = grid[row][col]
+              ? const Color.fromARGB(255, 255, 0, 0)
+              : Colors.grey.shade900
           ..style = PaintingStyle.fill;
 
         final Path path = Path()
diff --git a/lib/virtualbadge/view/draw_badge.dart b/lib/virtualbadge/view/draw_badge.dart
index b3bf0c2ae..228da4583 100644
--- a/lib/virtualbadge/view/draw_badge.dart
+++ b/lib/virtualbadge/view/draw_badge.dart
@@ -1,7 +1,8 @@
-import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/providers/badgeview_provider.dart';
 import 'package:badgemagic/virtualbadge/widgets/badge_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
+import 'package:provider/provider.dart';
 
 class BMBadge extends StatefulWidget {
   const BMBadge({super.key});
@@ -31,9 +32,12 @@ class _BMBadgeState extends State<BMBadge> {
 
   @override
   Widget build(BuildContext context) {
+    final grid = Provider.of<DrawBadgeProvider>(context).getDrawViewGrid();
     return GestureDetector(
       onPanUpdate: _handlePanUpdate,
-      child: const BadgeWidget(),
+      child: BadgeWidget(
+        grid: grid,
+      ),
     );
   }
 }
diff --git a/lib/virtualbadge/widgets/badge_widget.dart b/lib/virtualbadge/widgets/badge_widget.dart
index 217e0d3d9..f03d5ec96 100644
--- a/lib/virtualbadge/widgets/badge_widget.dart
+++ b/lib/virtualbadge/widgets/badge_widget.dart
@@ -1,13 +1,12 @@
-import 'package:badgemagic/providers/drawbadge_provider.dart';
 import 'package:badgemagic/virtualbadge/view/badge_painter.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 
 class BadgeWidget extends StatefulWidget {
   static const int rows = 11;
   static const int cols = 44;
+  final List<List<bool>> grid;
 
-  const BadgeWidget({super.key});
+  const BadgeWidget({super.key, required this.grid});
 
   @override
   State<BadgeWidget> createState() => _BadgeWidgetState();
@@ -16,10 +15,9 @@ class BadgeWidget extends StatefulWidget {
 class _BadgeWidgetState extends State<BadgeWidget> {
   @override
   Widget build(BuildContext context) {
-    DrawBadgeProvider cellStateToggle = Provider.of<DrawBadgeProvider>(context);
     return CustomPaint(
       size: const Size(400, 480),
-      painter: BadgePainter(grid: cellStateToggle.getGrid()),
+      painter: BadgePainter(grid: widget.grid),
     );
   }
 }
diff --git a/pubspec.lock b/pubspec.lock
index 0258121a0..48ec17c3b 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -5,18 +5,23 @@ packages:
     dependency: transitive
     description:
       name: _fe_analyzer_shared
-      sha256: "0b2f2bd91ba804e53a61d757b986f89f1f9eaed5b11e4b2f5a2468d86d6c9fc7"
+      sha256: f256b0c0ba6c7577c15e2e4e114755640a875e885099367bf6e012b19314c834
       url: "https://pub.dev"
     source: hosted
-    version: "67.0.0"
+    version: "72.0.0"
+  _macros:
+    dependency: transitive
+    description: dart
+    source: sdk
+    version: "0.3.2"
   analyzer:
     dependency: transitive
     description:
       name: analyzer
-      sha256: "37577842a27e4338429a1cbc32679d508836510b056f1eedf0c8d20e39c1383d"
+      sha256: b652861553cd3990d8ed361f7979dc6d7053a9ac8843fa73820ab68ce5410139
       url: "https://pub.dev"
     source: hosted
-    version: "6.4.1"
+    version: "6.7.0"
   args:
     dependency: transitive
     description:
@@ -77,10 +82,10 @@ packages:
     dependency: transitive
     description:
       name: crypto
-      sha256: ff625774173754681d66daaf4a448684fb04b78f902da9cb3d308c19cc5e8bab
+      sha256: ec30d999af904f33454ba22ed9a86162b35e52b44ac4807d1d93c288041d7d27
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.3"
+    version: "3.0.5"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -125,10 +130,10 @@ packages:
     dependency: transitive
     description:
       name: ffi
-      sha256: "493f37e7df1804778ff3a53bd691d8692ddf69702cf4c1c1096a2e41b4779e21"
+      sha256: "16ed7b077ef01ad6170a3d0c57caa4a112a38d7a2ed5602e0aca9ca6f3d98da6"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   file:
     dependency: transitive
     description:
@@ -274,6 +279,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.4.0"
+  macros:
+    dependency: transitive
+    description:
+      name: macros
+      sha256: "0acaed5d6b7eab89f63350bccd82119e6c602df0f391260d0e32b5e23db79536"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2-main.4"
   matcher:
     dependency: transitive
     description:
@@ -342,10 +355,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: "490539678396d4c3c0b06efdaab75ae60675c3e0c66f72bc04c2e2c1e0e2abeb"
+      sha256: "6f01f8e37ec30b07bc424b4deabac37cacb1bc7e2e515ad74486039918a37eb7"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.9"
+    version: "2.2.10"
   path_provider_foundation:
     dependency: transitive
     description:
@@ -600,5 +613,5 @@ packages:
     source: hosted
     version: "3.1.2"
 sdks:
-  dart: ">=3.4.0 <4.0.0"
-  flutter: ">=3.22.0"
+  dart: ">=3.5.0 <4.0.0"
+  flutter: ">=3.24.0"