diff --git a/assets/icons/pencil.png b/assets/icons/pencil.png
new file mode 100644
index 000000000..d61854969
Binary files /dev/null and b/assets/icons/pencil.png differ
diff --git a/lib/constants.dart b/lib/constants.dart
index 6085138cb..2ad79f7b1 100644
--- a/lib/constants.dart
+++ b/lib/constants.dart
@@ -1,4 +1,5 @@
 const homeScreenTitleKey = "bm_hm_title";
+const drawBadgeScreen = "bm_db_screen";
 
 //path to all the animation assets used
 const String animation = 'assets/animations/ic_anim_animation.gif';
diff --git a/lib/main.dart b/lib/main.dart
index 049db2d0e..2609cf8f4 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,19 +1,24 @@
+import 'package:badgemagic/providers/cardsprovider.dart';
+import 'package:badgemagic/providers/drawbadge_provider.dart';
 import 'package:badgemagic/providers/getitlocator.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
+import 'package:badgemagic/view/draw_badge_screen.dart';
 import 'package:badgemagic/view/homescreen.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import 'package:badgemagic/providers/cardsprovider.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:provider/provider.dart';
 
 void main() {
   setupLocator();
+  WidgetsFlutterBinding.ensureInitialized();
   runApp(MultiProvider(
     providers: [
       ChangeNotifierProvider<CardProvider>(
           create: (context) => getIt<CardProvider>()),
       ChangeNotifierProvider<InlineImageProvider>(
           create: (context) => getIt<InlineImageProvider>()),
+      ChangeNotifierProvider<DrawBadgeProvider>(
+          create: (context) => getIt<DrawBadgeProvider>()),
     ],
     child: const MyApp(),
   ));
@@ -36,6 +41,7 @@ class MyApp extends StatelessWidget {
           initialRoute: '/',
           routes: {
             '/': (context) => const HomeScreen(),
+            '/drawBadge': (context) => const DrawBadge(),
           },
         );
       },
diff --git a/lib/providers/drawbadge_provider.dart b/lib/providers/drawbadge_provider.dart
new file mode 100644
index 000000000..b08a434e9
--- /dev/null
+++ b/lib/providers/drawbadge_provider.dart
@@ -0,0 +1,34 @@
+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 172444fb1..a9cf3432f 100644
--- a/lib/providers/getitlocator.dart
+++ b/lib/providers/getitlocator.dart
@@ -1,4 +1,5 @@
 import 'package:badgemagic/providers/cardsprovider.dart';
+import 'package:badgemagic/providers/drawbadge_provider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:get_it/get_it.dart';
 
@@ -7,4 +8,5 @@ final GetIt getIt = GetIt.instance;
 void setupLocator() {
   getIt.registerLazySingleton<CardProvider>(() => CardProvider());
   getIt.registerLazySingleton<InlineImageProvider>(() => InlineImageProvider());
+  getIt.registerLazySingleton<DrawBadgeProvider>(() => DrawBadgeProvider());
 }
diff --git a/lib/providers/imageprovider.dart b/lib/providers/imageprovider.dart
index 23d0fb113..a5d774ab3 100644
--- a/lib/providers/imageprovider.dart
+++ b/lib/providers/imageprovider.dart
@@ -6,10 +6,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 class InlineImageProvider extends ChangeNotifier {
+  //boolean variable to check for isCacheInitialized
+  bool isCacheInitialized = false;
+
   //list of vectors
   List<String> vectors = [];
 
-  //initializes the list of vectors
   //uses the AssetManifest class to load the list of assets
   Future<void> initVectors() async {
     try {
diff --git a/lib/view/draw_badge_screen.dart b/lib/view/draw_badge_screen.dart
new file mode 100644
index 000000000..7051232b5
--- /dev/null
+++ b/lib/view/draw_badge_screen.dart
@@ -0,0 +1,147 @@
+import 'package:badgemagic/constants.dart';
+import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/view/widgets/common_scaffold_widget.dart';
+import 'package:badgemagic/virtualbadge/view/draw_badge.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get_it/get_it.dart';
+import 'package:provider/provider.dart';
+
+class DrawBadge extends StatefulWidget {
+  const DrawBadge({super.key});
+
+  @override
+  State<DrawBadge> createState() => _DrawBadgeState();
+}
+
+class _DrawBadgeState extends State<DrawBadge> {
+  DrawBadgeProvider cellStateToggle = GetIt.instance<DrawBadgeProvider>();
+
+  @override
+  void initState() {
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.landscapeLeft,
+    ]);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.landscapeRight,
+    ]);
+    cellStateToggle.resetGrid();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    DrawBadgeProvider drawToggle = Provider.of<DrawBadgeProvider>(context);
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
+    return CommonScaffold(
+      title: 'BadgeMagic',
+      body: Column(
+        children: [
+          Container(
+            margin: EdgeInsets.symmetric(vertical: 20.h, horizontal: 20.w),
+            padding: EdgeInsets.all(10.dg),
+            height: 400.h,
+            width: 500.w,
+            decoration: BoxDecoration(
+              color: Colors.black,
+              border: Border.all(color: Colors.black),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: const BMBadge(),
+          ),
+          SizedBox(
+            height: 55.h,
+          ),
+          Row(
+            children: [
+              TextButton(
+                onPressed: () {
+                  setState(() {
+                    drawToggle.toggleIsDrawing(true);
+                  });
+                },
+                child: Column(
+                  children: [
+                    Icon(
+                      Icons.edit,
+                      color:
+                          drawToggle.getIsDrawing() ? Colors.red : Colors.black,
+                    ),
+                    Text(
+                      'Draw',
+                      style: TextStyle(
+                        color: drawToggle.isDrawing ? Colors.red : Colors.black,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              TextButton(
+                onPressed: () {
+                  setState(() {
+                    drawToggle.toggleIsDrawing(false);
+                  });
+                },
+                child: Column(
+                  children: [
+                    Icon(
+                      Icons.delete,
+                      color: drawToggle.isDrawing ? Colors.black : Colors.red,
+                    ),
+                    Text(
+                      'Erase',
+                      style: TextStyle(
+                        color: drawToggle.isDrawing ? Colors.black : Colors.red,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              TextButton(
+                onPressed: () {
+                  setState(() {
+                    drawToggle.resetGrid();
+                  });
+                },
+                child: const Column(
+                  children: [
+                    Icon(
+                      Icons.refresh,
+                      color: Colors.black,
+                    ),
+                    Text(
+                      'Reset',
+                      style: TextStyle(color: Colors.black),
+                    )
+                  ],
+                ),
+              ),
+              TextButton(
+                onPressed: () {},
+                child: const Column(
+                  children: [
+                    Icon(
+                      Icons.save,
+                      color: Colors.black,
+                    ),
+                    Text('Save', style: TextStyle(color: Colors.black))
+                  ],
+                ),
+              ),
+            ],
+          )
+        ],
+      ),
+      key: const Key(drawBadgeScreen),
+    );
+  }
+}
diff --git a/lib/view/homescreen.dart b/lib/view/homescreen.dart
index d20da1c57..b6227f763 100644
--- a/lib/view/homescreen.dart
+++ b/lib/view/homescreen.dart
@@ -5,12 +5,14 @@ import 'package:badgemagic/providers/badge_message_provider.dart';
 import 'package:badgemagic/providers/cardsprovider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:badgemagic/view/special_text_field.dart';
+import 'package:badgemagic/view/widgets/common_scaffold_widget.dart';
 import 'package:badgemagic/view/widgets/homescreentabs.dart';
 import 'package:badgemagic/view/widgets/speedial.dart';
 import 'package:badgemagic/view/widgets/vectorview.dart';
-import 'package:badgemagic/virtualbadge/view/badgeui.dart';
+import 'package:badgemagic/virtualbadge/view/badge_home_view.dart';
 import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get_it/get_it.dart';
 import 'package:provider/provider.dart';
@@ -29,19 +31,38 @@ class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
   InlineImageProvider inlineImageProvider =
       GetIt.instance<InlineImageProvider>();
   Converters converters = Converters();
-
   bool isPrefixIconClicked = false;
 
   @override
   void initState() {
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+    ]);
     _startImageCaching();
     super.initState();
 
     _tabController = TabController(length: 3, vsync: this);
   }
 
+  @override
+  void dispose() {
+    _tabController.dispose();
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.landscapeRight,
+    ]);
+    super.dispose();
+  }
+
   Future<void> _startImageCaching() async {
-    await inlineImageProvider.generateImageCache();
+    if (!inlineImageProvider.isCacheInitialized) {
+      await inlineImageProvider.generateImageCache();
+      setState(() {
+        inlineImageProvider.isCacheInitialized = true;
+      });
+    }
   }
 
   @override
@@ -54,113 +75,105 @@ class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
     });
 
     return DefaultTabController(
-      length: 3,
-      child: Scaffold(
-        appBar: AppBar(
-          backgroundColor: Colors.red,
-          title: const Text(
-            key: Key(homeScreenTitleKey),
-            'Badge Magic',
-            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
-          ),
-          centerTitle: true,
-        ),
-        body: SafeArea(
-          child: SingleChildScrollView(
-            child: Column(
-              children: [
-                const BMBadge(),
-                Container(
-                  margin: EdgeInsets.all(15.w),
-                  child: Material(
-                    borderRadius: BorderRadius.circular(10.r),
-                    elevation: 10,
-                    child: ExtendedTextField(
-                      onChanged: (value) {
-                        inlineImageProvider.controllerListener();
-                      },
-                      controller: inlineImageProvider.getController(),
-                      specialTextSpanBuilder: MySpecialTextSpanBuilder(),
-                      decoration: InputDecoration(
-                        border: OutlineInputBorder(
-                          borderRadius: BorderRadius.circular(10.r),
-                        ),
-                        prefixIcon: IconButton(
-                          onPressed: () {
-                            setState(() {
-                              isPrefixIconClicked = !isPrefixIconClicked;
-                            });
-                          },
-                          icon: const Icon(Icons.tag_faces_outlined),
-                        ),
-                        focusedBorder: const OutlineInputBorder(
-                          borderSide: BorderSide(color: Colors.red),
+        length: 3,
+        child: CommonScaffold(
+          title: 'BadgeMagic',
+          body: SafeArea(
+            child: SingleChildScrollView(
+              child: Column(
+                children: [
+                  const BMBadgeHome(),
+                  Container(
+                    margin: EdgeInsets.all(15.w),
+                    child: Material(
+                      borderRadius: BorderRadius.circular(10.r),
+                      elevation: 10,
+                      child: ExtendedTextField(
+                        onChanged: (value) {
+                          inlineImageProvider.controllerListener();
+                        },
+                        controller: inlineImageProvider.getController(),
+                        specialTextSpanBuilder: MySpecialTextSpanBuilder(),
+                        decoration: InputDecoration(
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(10.r),
+                          ),
+                          prefixIcon: IconButton(
+                            onPressed: () {
+                              setState(() {
+                                isPrefixIconClicked = !isPrefixIconClicked;
+                              });
+                            },
+                            icon: const Icon(Icons.tag_faces_outlined),
+                          ),
+                          focusedBorder: const OutlineInputBorder(
+                            borderSide: BorderSide(color: Colors.red),
+                          ),
                         ),
                       ),
                     ),
                   ),
-                ),
-                Visibility(
-                    visible: isPrefixIconClicked,
-                    child: Container(
-                      height: 99.h,
-                      decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(10.r),
-                        color: Colors.grey.shade200,
-                      ),
-                      margin: EdgeInsets.symmetric(horizontal: 15.w),
-                      padding: EdgeInsets.symmetric(
-                          vertical: 10.h, horizontal: 10.w),
-                      child: const VectorGridView(),
-                    )),
-                TabBar(
-                  indicatorSize: TabBarIndicatorSize.label,
-                  controller: _tabController,
-                  tabs: const [
-                    Tab(text: 'Speed'),
-                    Tab(text: 'Animation'),
-                    Tab(text: 'Effects'),
-                  ],
-                ),
-                SizedBox(
-                  height: 230.h, // Adjust the height dynamically
-                  child: TabBarView(
-                    physics: const NeverScrollableScrollPhysics(),
+                  Visibility(
+                      visible: isPrefixIconClicked,
+                      child: Container(
+                        height: 99.h,
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(10.r),
+                          color: Colors.grey.shade200,
+                        ),
+                        margin: EdgeInsets.symmetric(horizontal: 15.w),
+                        padding: EdgeInsets.symmetric(
+                            vertical: 10.h, horizontal: 10.w),
+                        child: const VectorGridView(),
+                      )),
+                  TabBar(
+                    indicatorSize: TabBarIndicatorSize.label,
                     controller: _tabController,
-                    children: const [
-                      RadialDial(),
-                      AnimationTab(),
-                      EffectTab(),
+                    tabs: const [
+                      Tab(text: 'Speed'),
+                      Tab(text: 'Animation'),
+                      Tab(text: 'Effects'),
                     ],
                   ),
-                ),
-                Container(
-                  padding: EdgeInsets.symmetric(vertical: 20.h),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      GestureDetector(
-                        onTap: () {
-                          badgeData.checkAndTransfer();
-                        },
-                        child: Container(
-                          padding: EdgeInsets.symmetric(
-                              horizontal: 20.w, vertical: 8.h),
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(10.r),
-                            color: Colors.grey.shade400,
+                  SizedBox(
+                    height: 230.h, // Adjust the height dynamically
+                    child: TabBarView(
+                      physics: const NeverScrollableScrollPhysics(),
+                      controller: _tabController,
+                      children: const [
+                        RadialDial(),
+                        AnimationTab(),
+                        EffectTab(),
+                      ],
+                    ),
+                  ),
+                  Container(
+                    padding: EdgeInsets.symmetric(vertical: 20.h),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        GestureDetector(
+                          onTap: () {
+                            badgeData.checkAndTransfer();
+                          },
+                          child: Container(
+                            padding: EdgeInsets.symmetric(
+                                horizontal: 20.w, vertical: 8.h),
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(10.r),
+                              color: Colors.grey.shade400,
+                            ),
+                            child: const Text('Transfer'),
                           ),
-                          child: const Text('Transfer'),
                         ),
-                      ),
-                    ],
+                      ],
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           ),
-        ),
-      ),
-    );
+          scaffoldKey: const Key(homeScreenTitleKey),
+        ));
   }
 }
diff --git a/lib/view/widgets/common_scaffold_widget.dart b/lib/view/widgets/common_scaffold_widget.dart
new file mode 100644
index 000000000..77a2ffa69
--- /dev/null
+++ b/lib/view/widgets/common_scaffold_widget.dart
@@ -0,0 +1,38 @@
+import 'package:badgemagic/view/widgets/navigation_drawer.dart';
+import 'package:flutter/material.dart';
+
+class CommonScaffold extends StatelessWidget {
+  final String title;
+  final Widget body;
+  final Key? scaffoldKey;
+
+  const CommonScaffold(
+      {super.key, required this.body, required this.title, this.scaffoldKey});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        leading: Builder(builder: (context) {
+          return IconButton(
+            onPressed: () {
+              Scaffold.of(context).openDrawer();
+            },
+            icon: const Icon(
+              Icons.menu,
+              color: Colors.white,
+            ),
+          );
+        }),
+        backgroundColor: Colors.red,
+        title: Text(
+          key: scaffoldKey,
+          title,
+          style: const TextStyle(color: Colors.white),
+        ),
+      ),
+      drawer: const BMDrawer(),
+      body: body,
+    );
+  }
+}
diff --git a/lib/view/widgets/navigation_drawer.dart b/lib/view/widgets/navigation_drawer.dart
new file mode 100644
index 000000000..46962b608
--- /dev/null
+++ b/lib/view/widgets/navigation_drawer.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class BMDrawer extends StatelessWidget {
+  const BMDrawer({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: <Widget>[
+          const DrawerHeader(
+            decoration: BoxDecoration(
+              color: Colors.red,
+            ),
+            child: Center(
+              child: Text(
+                'Badge Magic',
+                style: TextStyle(
+                  color: Colors.white,
+                  fontSize: 24,
+                ),
+              ),
+            ),
+          ),
+          ListTile(
+            leading: const Icon(Icons.edit),
+            title: const Text('Create Badges'),
+            onTap: () {
+              Navigator.pushNamed(context, '/');
+            },
+          ),
+          ListTile(
+            leading: const Icon(Icons.draw_outlined),
+            title: const Text('Draw Clipart'),
+            onTap: () {
+              Navigator.pushNamed(context, '/drawBadge');
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/virtualbadge/view/badge_home_view.dart b/lib/virtualbadge/view/badge_home_view.dart
new file mode 100644
index 000000000..ca94ddd93
--- /dev/null
+++ b/lib/virtualbadge/view/badge_home_view.dart
@@ -0,0 +1,28 @@
+import 'package:badgemagic/virtualbadge/widgets/badge_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class BMBadgeHome extends StatefulWidget {
+  const BMBadgeHome({super.key});
+
+  @override
+  State<BMBadgeHome> createState() => _BMBadgeHomeState();
+}
+
+class _BMBadgeHomeState extends State<BMBadgeHome> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: 8.h, left: 15.w, right: 15.w),
+      padding: EdgeInsets.all(8.dg),
+      height: 100.h,
+      width: 500.w,
+      decoration: BoxDecoration(
+        color: Colors.black,
+        border: Border.all(color: Colors.black),
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: const BadgeWidget(),
+    );
+  }
+}
diff --git a/lib/virtualbadge/view/badge_painter.dart b/lib/virtualbadge/view/badge_painter.dart
new file mode 100644
index 000000000..717a50a20
--- /dev/null
+++ b/lib/virtualbadge/view/badge_painter.dart
@@ -0,0 +1,46 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+class BadgePainter extends CustomPainter {
+  final List<List<bool>> grid;
+
+  BadgePainter({required this.grid});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    double cellWidth = size.width / grid[0].length;
+    double cellHeight = size.height / grid.length;
+
+    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
+          ..style = PaintingStyle.fill;
+
+        final Path path = Path()
+          ..moveTo(col * cellWidth, row * cellHeight)
+          ..lineTo(col * cellWidth + cellWidth * 0.4, row * cellHeight)
+          ..lineTo(col * cellWidth + cellWidth * 0.655,
+              row * cellHeight + cellHeight)
+          ..lineTo(
+              col * cellWidth + cellWidth * 0.25, row * cellHeight + cellHeight)
+          ..close();
+
+        const double radians = math.pi / 4;
+        canvas.save();
+        canvas.translate((col + 0.5) * cellWidth, (row + 0.5) * cellHeight);
+        canvas.rotate(radians);
+        canvas.translate(-(col + 0.5) * cellWidth, -(row + 0.5) * cellHeight);
+
+        canvas.drawPath(path, paint);
+        canvas.restore();
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}
diff --git a/lib/virtualbadge/view/badgeui.dart b/lib/virtualbadge/view/badgeui.dart
deleted file mode 100644
index d95f30326..000000000
--- a/lib/virtualbadge/view/badgeui.dart
+++ /dev/null
@@ -1,51 +0,0 @@
-import 'package:badgemagic/virtualbadge/view/cell.dart';
-import 'package:flutter/material.dart';
-
-class BMBadge extends StatefulWidget {
-  const BMBadge({
-    super.key,
-  });
-
-  @override
-  State<BMBadge> createState() => _VirtualBadgeState();
-}
-
-class _VirtualBadgeState extends State<BMBadge> {
-  List<bool> selectedCells = List.filled(11 * 44, false);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
-      padding: const EdgeInsets.all(10),
-      width: MediaQuery.of(context).size.width,
-      height: MediaQuery.of(context).size.height * 0.127,
-      decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(15), color: Colors.black),
-      child: GridView.builder(
-        physics: const NeverScrollableScrollPhysics(),
-        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 44,
-        ),
-        itemCount: 11 * 44,
-        itemBuilder: (context, index) {
-          return SizedBox(
-            width: 12,
-            height: 12,
-            child: GestureDetector(
-              onTap: () {
-                setState(() {
-                  selectedCells[index] = !selectedCells[index];
-                });
-              },
-              child: Cell(
-                index: index,
-                isSelected: selectedCells[index],
-              ),
-            ),
-          );
-        },
-      ),
-    );
-  }
-}
diff --git a/lib/virtualbadge/view/cell.dart b/lib/virtualbadge/view/cell.dart
deleted file mode 100644
index 5260e18c5..000000000
--- a/lib/virtualbadge/view/cell.dart
+++ /dev/null
@@ -1,57 +0,0 @@
-import 'package:flutter/material.dart';
-import 'dart:math' as math;
-
-class Cell extends StatefulWidget {
-  final int index;
-  final bool isSelected;
-  const Cell({super.key, required this.index, required this.isSelected});
-
-  @override
-  State<Cell> createState() => _CellState();
-}
-
-class _CellState extends State<Cell> {
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      size: const Size(10, 10), // Set your desired size
-      painter: TiltedParallelogramPainter(
-          index: widget.index, isSelected: widget.isSelected),
-    );
-  }
-}
-
-class TiltedParallelogramPainter extends CustomPainter {
-  final int index;
-  final bool isSelected;
-  TiltedParallelogramPainter(
-      {Key? key, required this.index, required this.isSelected});
-  @override
-  void paint(
-    Canvas canvas,
-    Size size,
-  ) {
-    final Paint paint = Paint()
-      ..color = isSelected ? Colors.red : Colors.grey.shade600
-      ..style = PaintingStyle.fill;
-
-    final Path path = Path()
-      ..moveTo(0, 0)
-      ..lineTo(size.width * 0.4, 0)
-      ..lineTo(size.width * 0.655, size.height)
-      ..lineTo(size.width * 0.25, size.height)
-      ..close();
-
-    const double radians = math.pi / 4;
-    canvas.translate(size.width / 2, size.height / 2);
-    canvas.rotate(radians);
-    canvas.translate(-size.width / 2, -size.height / 2);
-
-    canvas.drawPath(path, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return true;
-  }
-}
diff --git a/lib/virtualbadge/view/draw_badge.dart b/lib/virtualbadge/view/draw_badge.dart
new file mode 100644
index 000000000..b3bf0c2ae
--- /dev/null
+++ b/lib/virtualbadge/view/draw_badge.dart
@@ -0,0 +1,39 @@
+import 'package:badgemagic/providers/drawbadge_provider.dart';
+import 'package:badgemagic/virtualbadge/widgets/badge_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+
+class BMBadge extends StatefulWidget {
+  const BMBadge({super.key});
+
+  @override
+  State<BMBadge> createState() => _BMBadgeState();
+}
+
+class _BMBadgeState extends State<BMBadge> {
+  DrawBadgeProvider cellStateToggle = GetIt.instance<DrawBadgeProvider>();
+  static const int rows = 11;
+  static const int cols = 44;
+
+  void _handlePanUpdate(DragUpdateDetails details) {
+    RenderBox renderBox = context.findRenderObject() as RenderBox;
+    Offset localPosition = renderBox.globalToLocal(details.globalPosition);
+    double cellWidth = renderBox.size.width / cols;
+    double cellHeight = renderBox.size.height / rows;
+
+    int col = (localPosition.dx / cellWidth).clamp(0, cols - 1).toInt();
+    int row = (localPosition.dy / cellHeight).clamp(0, rows - 1).toInt();
+
+    setState(() {
+      cellStateToggle.updateGrid(row, col);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onPanUpdate: _handlePanUpdate,
+      child: const BadgeWidget(),
+    );
+  }
+}
diff --git a/lib/virtualbadge/widgets/badge_widget.dart b/lib/virtualbadge/widgets/badge_widget.dart
new file mode 100644
index 000000000..217e0d3d9
--- /dev/null
+++ b/lib/virtualbadge/widgets/badge_widget.dart
@@ -0,0 +1,25 @@
+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;
+
+  const BadgeWidget({super.key});
+
+  @override
+  State<BadgeWidget> createState() => _BadgeWidgetState();
+}
+
+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()),
+    );
+  }
+}