diff --git a/lib/screens/dashboard/components/file_info_card.dart b/lib/screens/dashboard/components/file_info_card.dart
new file mode 100644
index 0000000..85e6d43
--- /dev/null
+++ b/lib/screens/dashboard/components/file_info_card.dart
@@ -0,0 +1,115 @@
+import 'package:admin/models/MyFiles.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../../../constants.dart';
+
+class FileInfoCard extends StatelessWidget {
+  const FileInfoCard({
+    Key key,
+    @required this.info,
+  }) : super(key: key);
+
+  final CloudStorageInfo info;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(defaultPadding),
+      decoration: BoxDecoration(
+        color: secondaryColor,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Container(
+                padding: EdgeInsets.all(defaultPadding * 0.75),
+                height: 40,
+                width: 40,
+                decoration: BoxDecoration(
+                  color: info.color.withOpacity(0.1),
+                  borderRadius: const BorderRadius.all(Radius.circular(10)),
+                ),
+                child: SvgPicture.asset(
+                  info.svgSrc,
+                  color: info.color,
+                ),
+              ),
+              Icon(Icons.more_vert, color: Colors.white54)
+            ],
+          ),
+          Text(
+            info.title,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+          ProgressLine(
+            color: info.color,
+            percentage: info.percentage,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                "${info.numOfFiels} Files",
+                style: Theme.of(context)
+                    .textTheme
+                    .caption
+                    .copyWith(color: Colors.white70),
+              ),
+              Text(
+                info.totalStorage,
+                style: Theme.of(context)
+                    .textTheme
+                    .caption
+                    .copyWith(color: Colors.white),
+              ),
+            ],
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class ProgressLine extends StatelessWidget {
+  const ProgressLine({
+    Key key,
+    this.color = primaryColor,
+    @required this.percentage,
+  }) : super(key: key);
+
+  final Color color;
+  final int percentage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Container(
+          width: double.infinity,
+          height: 5,
+          decoration: BoxDecoration(
+            color: color.withOpacity(0.1),
+            borderRadius: BorderRadius.all(Radius.circular(10)),
+          ),
+        ),
+        LayoutBuilder(
+          builder: (context, constraints) => Container(
+            width: constraints.maxWidth * (percentage / 100),
+            height: 5,
+            decoration: BoxDecoration(
+              color: color,
+              borderRadius: BorderRadius.all(Radius.circular(10)),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/dashboard/components/my_fiels.dart b/lib/screens/dashboard/components/my_fiels.dart
new file mode 100644
index 0000000..3e91a4e
--- /dev/null
+++ b/lib/screens/dashboard/components/my_fiels.dart
@@ -0,0 +1,51 @@
+import 'package:admin/models/MyFiles.dart';
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+import 'file_info_card.dart';
+
+class MyFiels extends StatelessWidget {
+  const MyFiels({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              "My Files",
+              style: Theme.of(context).textTheme.subtitle1,
+            ),
+            ElevatedButton.icon(
+              style: TextButton.styleFrom(
+                padding: EdgeInsets.symmetric(
+                  horizontal: defaultPadding * 1.5,
+                  vertical: defaultPadding,
+                ),
+              ),
+              onPressed: () {},
+              icon: Icon(Icons.add),
+              label: Text("Add New"),
+            ),
+          ],
+        ),
+        SizedBox(height: defaultPadding),
+        GridView.builder(
+          shrinkWrap: true,
+          itemCount: demoMyFiels.length,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 4,
+            crossAxisSpacing: defaultPadding,
+            childAspectRatio: 1.4,
+          ),
+          itemBuilder: (context, index) =>
+              FileInfoCard(info: demoMyFiels[index]),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/screens/dashboard/components/recent_files.dart b/lib/screens/dashboard/components/recent_files.dart
new file mode 100644
index 0000000..a9d8b5b
--- /dev/null
+++ b/lib/screens/dashboard/components/recent_files.dart
@@ -0,0 +1,77 @@
+import 'package:admin/models/RecentFile.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../../constants.dart';
+
+class RecentFiles extends StatelessWidget {
+  const RecentFiles({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(defaultPadding),
+      decoration: BoxDecoration(
+        color: secondaryColor,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "Recent Files",
+            style: Theme.of(context).textTheme.subtitle1,
+          ),
+          SizedBox(
+            width: double.infinity,
+            child: DataTable(
+              horizontalMargin: 0,
+              columnSpacing: defaultPadding,
+              columns: [
+                DataColumn(
+                  label: Text("File Name"),
+                ),
+                DataColumn(
+                  label: Text("Date"),
+                ),
+                DataColumn(
+                  label: Text("Size"),
+                ),
+              ],
+              rows: List.generate(
+                demoRecentFiles.length,
+                (index) => recentFileDataRow(demoRecentFiles[index]),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+DataRow recentFileDataRow(RecentFile fileInfo) {
+  return DataRow(
+    cells: [
+      DataCell(
+        Row(
+          children: [
+            SvgPicture.asset(
+              fileInfo.icon,
+              height: 30,
+              width: 30,
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
+              child: Text(fileInfo.title),
+            ),
+          ],
+        ),
+      ),
+      DataCell(Text(fileInfo.date)),
+      DataCell(Text(fileInfo.size)),
+    ],
+  );
+}
diff --git a/lib/screens/dashboard/dashboard_screen.dart b/lib/screens/dashboard/dashboard_screen.dart
index a780e77..7b4a3ec 100644
--- a/lib/screens/dashboard/dashboard_screen.dart
+++ b/lib/screens/dashboard/dashboard_screen.dart
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import '../../constants.dart';
 import 'components/header.dart';
+import 'components/my_fiels.dart';
+import 'components/recent_files.dart';
 import 'components/storage_details.dart';
 
 class DashboardScreen extends StatelessWidget {
@@ -19,9 +21,12 @@ class DashboardScreen extends StatelessWidget {
               children: [
                 Expanded(
                   flex: 5,
-                  child: Container(
-                    height: 500,
-                    color: Colors.white,
+                  child: Column(
+                    children: [
+                      MyFiels(),
+                      SizedBox(height: defaultPadding),
+                      RecentFiles()
+                    ],
                   ),
                 ),
                 SizedBox(width: defaultPadding),