diff --git a/examples/demo_base/lib/screens/home/home_screen.dart b/examples/demo_base/lib/screens/home/home_screen.dart
index f00cd6c..8e7ba99 100644
--- a/examples/demo_base/lib/screens/home/home_screen.dart
+++ b/examples/demo_base/lib/screens/home/home_screen.dart
@@ -12,43 +12,42 @@ class HomeScreen extends StatelessWidget {
     return Scaffold(
       body: Box(
         styleSheet: StyleSheet(
-          width: {Breakpoints.xs: '500'},
-          flexDirection: {Breakpoints.xs: 'row'},
-          crossAxisAlignment: {Breakpoints.xs: 'center'}, // alignItems
+          flexDirection: {Breakpoints.xs: 'column'},
+          crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
           mainAxisAlignment: {Breakpoints.xs: 'flex-start'}, // justifyContent
           backgroundColor: {Breakpoints.xs: bg},
-          margin: {Breakpoints.xs: 50},
-          paddingVertical: {Breakpoints.xs: 50},
-          paddingHorizontal: {Breakpoints.xs: 50},
-          paddingBottom: {Breakpoints.xs: 100},
         ),
         children: [
           Text(
-            'Box 01',
+            'Header',
             styleSheet: StyleSheet(
-              // width: {Breakpoints.xs: 50},
               height: {Breakpoints.xs: '50'},
+              paddingVertical: {Breakpoints.xs: 10},
+              paddingHorizontal: {Breakpoints.xs: 50},
               backgroundColor: {Breakpoints.xs: theme.colors.primary.x400},
             ),
           ),
-          Text(
-            'Box 02',
+          FlatList(
+            crossAxisCount: const {
+              Breakpoints.sm: 1,
+              Breakpoints.md: 2,
+            },
             styleSheet: StyleSheet(
-              flex: {Breakpoints.xs: 2},
-              // width: {Breakpoints.xs: 50},
-              height: {Breakpoints.xs: '50'},
-              backgroundColor: {Breakpoints.xs: theme.colors.accent.x400},
+              paddingHorizontal: {Breakpoints.xs: 50},
+              flex: {Breakpoints.xs: 1},
+              crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
+              backgroundColor: {Breakpoints.xs: theme.colors.primary.x200},
             ),
+            data: const [1, 2, 3, 4, 5],
+            itemBuilder: (context, index) {
+              return Text(
+                'Olaa $index',
+                styleSheet: StyleSheet(backgroundColor: {
+                  Breakpoints.xs: theme.colors.neutral.x500,
+                }),
+              );
+            },
           ),
-          Text(
-            'Box 03',
-            styleSheet: StyleSheet(
-              flex: {Breakpoints.xs: 3},
-              // width: {Breakpoints.xs: 50},
-              height: {Breakpoints.xs: '50'},
-              backgroundColor: {Breakpoints.xs: theme.colors.positive.x400},
-            ),
-          )
         ],
       ),
     );
diff --git a/lib/components.dart b/lib/components.dart
index ecd6510..bf036c3 100644
--- a/lib/components.dart
+++ b/lib/components.dart
@@ -6,5 +6,6 @@ export 'package:provider/provider.dart';
 export 'components/provider/provider.dart';
 export 'components/box/box.dart';
 export 'components/text/text.dart';
+export 'components/flatlist/flatlist.dart';
 export 'core/breakpoints/breakpoints.dart';
 export 'core/stylesheet/stylesheet.dart';
diff --git a/lib/components/box/box.dart b/lib/components/box/box.dart
index 4f248ea..a9b63f7 100644
--- a/lib/components/box/box.dart
+++ b/lib/components/box/box.dart
@@ -5,20 +5,25 @@ import 'package:skynexui_components/components/box/flutter/child_decorator.dart'
 class Box extends StatelessWidget {
   final List<Widget>? children;
   final StyleSheet styleSheet;
+  final BoxBaseStyles? externalStyles;
 
   const Box({
     Key? key,
     this.children = const [],
     this.styleSheet = const StyleSheet(),
+    this.externalStyles,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     var activeBreakpoint = getActiveBreakpoint(context);
-    var styles = BoxBaseStyles(
+    BoxBaseStyles styles = BoxBaseStyles(
       activeBreakpoint: activeBreakpoint,
       styleSheet: styleSheet,
     );
+    if (externalStyles != null) {
+      styles = externalStyles as BoxBaseStyles;
+    }
 
     return DefaultTextStyle.merge(
       style: TextStyle(
diff --git a/lib/components/flatlist/flatlist.dart b/lib/components/flatlist/flatlist.dart
new file mode 100644
index 0000000..2945ac7
--- /dev/null
+++ b/lib/components/flatlist/flatlist.dart
@@ -0,0 +1,67 @@
+import 'package:skynexui_components/components.dart';
+import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
+
+class FlatList<DataList> extends StatelessWidget {
+  final List<DataList> data;
+  final StyleSheet styleSheet;
+  final Map<Breakpoints, int> crossAxisCount;
+  final Widget Function(BuildContext, int) itemBuilder;
+
+  BoxBaseStyles _boxStyles(
+    StyleSheet styleSheet,
+    Breakpoints activeBreakpoint,
+  ) {
+    var boxStyles = BoxBaseStyles(
+      activeBreakpoint: activeBreakpoint,
+      styleSheet: styleSheet,
+    );
+    boxStyles.padding = 0;
+    boxStyles.paddingLeft = 0;
+    boxStyles.paddingRight = 0;
+    boxStyles.paddingTop = 0;
+    boxStyles.paddingBottom = 0;
+
+    return boxStyles;
+  }
+
+  const FlatList({
+    Key? key,
+    required this.data,
+    required this.itemBuilder,
+    this.crossAxisCount = const {
+      Breakpoints.xs: 1,
+    },
+    this.styleSheet = const StyleSheet(),
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var activeBreakpoint = getActiveBreakpoint(context);
+    var styles = BoxBaseStyles(
+      activeBreakpoint: activeBreakpoint,
+      styleSheet: styleSheet,
+    );
+
+    return Box(
+      externalStyles: _boxStyles(styleSheet, activeBreakpoint),
+      children: [
+        GridView.builder(
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount:
+                resolveValueForBreakpoint(crossAxisCount, activeBreakpoint),
+            crossAxisSpacing: 5,
+            mainAxisSpacing: 5,
+          ),
+          padding: EdgeInsets.only(
+            left: styles.paddingLeft,
+            right: styles.paddingRight,
+            top: styles.paddingTop,
+            bottom: styles.paddingBottom,
+          ),
+          itemCount: data.length,
+          itemBuilder: itemBuilder,
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/core/stylesheet/stylesheet.dart b/lib/core/stylesheet/stylesheet.dart
index b49157b..da60696 100644
--- a/lib/core/stylesheet/stylesheet.dart
+++ b/lib/core/stylesheet/stylesheet.dart
@@ -15,6 +15,7 @@ const Map<Breakpoints, int?> defaultIntEmptyValue = {
 const Map<Breakpoints, double> defaultDoubleZeroValue = {
   Breakpoints.xs: 0,
 };
+
 const Map<Breakpoints, double?> defaultDoubleEmptyValue = {
   Breakpoints.xs: null,
 };
@@ -44,7 +45,7 @@ class StyleSheet {
   final Map<Breakpoints, String?> backgroundColor;
   final Map<Breakpoints, String?> color;
   final Map<Breakpoints, String?> height;
-  final Map<Breakpoints, String?> width; 
+  final Map<Breakpoints, String?> width;
 // %%[CODER_END]:StyleSheet_attributes%%
 
   const StyleSheet({
@@ -72,7 +73,7 @@ class StyleSheet {
     this.backgroundColor = defaultStringEmptyValue,
     this.color = defaultStringEmptyValue,
     this.height = defaultStringEmptyValue,
-    this.width = defaultStringEmptyValue, 
+    this.width = defaultStringEmptyValue,
 // %%[CODER_END]:StyleSheet_constructor%%
   });
 }