diff --git a/notes/assets/icons/folder.png b/notes/assets/icons/folder.png
new file mode 100644
index 0000000..daca38f
Binary files /dev/null and b/notes/assets/icons/folder.png differ
diff --git a/notes/lib/components/folderCard.dart b/notes/lib/components/folderCard.dart
new file mode 100644
index 0000000..48a2452
--- /dev/null
+++ b/notes/lib/components/folderCard.dart
@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:notes/constants/image_constants.dart';
+import 'package:notes/model/folderData.dart';
+class FolderCard extends StatelessWidget {
+  FolderCard({ this.data,this.isList}) ;
+  final bool isList;
+  final FolderData data;
+  final String str='Updated on : ';
+
+
+
+  @override
+  Widget build(BuildContext context) {
+
+    return Card(
+      elevation:8,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(isList?12:6))),
+
+      child: Flex(
+        direction: isList?Axis.horizontal: Axis.vertical,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisSize: MainAxisSize.max,
+
+
+
+        children: [
+          if(!isList)SizedBox(height: 5,width: 4,),
+          if(!isList)Image.asset(ImageConstants.kFolder,height: isList? 40: 80,),
+
+          Container(
+            color: isList? Colors.white:Color(0xffE6E6E6),
+            width: MediaQuery.of(context).size.width-50,
+
+
+            height: 54,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              mainAxisSize: MainAxisSize.max,
+
+              children: [
+                SizedBox(width: 4,),
+                if(isList)Image.asset(ImageConstants.kFolder,height: 32,),
+
+
+
+
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+
+                    Text(
+                      data.title,
+
+                      style: TextStyle(
+                        fontSize: isList?22:18,
+                        fontWeight: FontWeight.bold,
+
+                      ),
+                    ),
+                    Text(
+                      isList?str+data.date:data.date,
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: Colors.grey[700]
+
+                      ),
+                    )
+                  ],
+                ),
+                SizedBox(width: 2,),
+                SizedBox(width: 2,),
+
+                Icon(
+                    Icons.more_vert,
+                  color: Color(0xffDE6FA1),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/notes/lib/constants/image_constants.dart b/notes/lib/constants/image_constants.dart
index c51a916..c9a9a64 100644
--- a/notes/lib/constants/image_constants.dart
+++ b/notes/lib/constants/image_constants.dart
@@ -15,5 +15,6 @@ class ImageConstants {
   static String kReportIssue='assets/icons/new_releases-24px.png';
   static String kPrivacy='assets/icons/privacy_tip-24px.png';
   static String kUpdate='assets/icons/system_update-24px.png';
+  static String kFolder='assets/icons/folder.png';
 
 }
diff --git a/notes/lib/model/folderData.dart b/notes/lib/model/folderData.dart
new file mode 100644
index 0000000..8fa6e88
--- /dev/null
+++ b/notes/lib/model/folderData.dart
@@ -0,0 +1,6 @@
+class FolderData {
+  String title;
+  String date;
+
+  FolderData({this.title, this.date});
+}
\ No newline at end of file
diff --git a/notes/lib/routes/documents.dart b/notes/lib/routes/documents.dart
index c155f23..f7cd4ff 100644
--- a/notes/lib/routes/documents.dart
+++ b/notes/lib/routes/documents.dart
@@ -1,14 +1,124 @@
 import 'package:flutter/material.dart';
+import 'package:notes/components/folderCard.dart';
+import 'package:notes/components/header.dart';
+import 'package:notes/constants/text_style_constants.dart';
+import 'package:notes/model/folderData.dart';
 class Documents extends StatefulWidget {
   @override
   _DocumentsState createState() => _DocumentsState();
 }
 
 class _DocumentsState extends State<Documents> {
+  List _list=[];
+  bool isList=true;// to check list view or grid view
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+
+
+    List data=[
+     FolderData(title:'Open source',date: '8 sep 2019'),
+      FolderData(title:'Open source',date: '15 sep 2019'),
+      FolderData(title:'Open source',date: '7 sep 2019'),
+      FolderData(title:'Open source',date: '9 sep 2019'),
+      FolderData(title:'Open source',date: '10 sep 2019'),
+
+    ];// sample data
+    data.forEach((element) { _list.add(element);});// updating _list
+
+
+  }
   @override
   Widget build(BuildContext context) {
-    return Container(
-      child: Text('document'),
+    return Scaffold(
+        appBar: header(
+            Text('DOCUMENT', style: TextStyleConstants.kAppbarTextStyle),
+            SizedBox(width: 2,)
+        ),
+        body: Padding(
+          padding: const EdgeInsets.only(left: 17,right: 17,top: 10),
+          child: Column(
+            children: [
+            Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+
+              children: [
+              Text(
+                'SUBJECT (${_list.length})',
+                style: TextStyle(
+                    fontSize: 25,
+                    color: Colors.black,
+                    fontWeight: FontWeight.w500,
+                    fontFamily: 'Manrope'
+
+                ),
+              ),
+              Row(
+                children: [
+                  GestureDetector(
+                    onTap:(){ if(!isList){setState(() {
+                      isList=true;
+                    });}},
+                    child: Container(
+                      padding: EdgeInsets.all(5),
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.all(Radius.circular(10)),
+                          color: isList?Color(0xFFb56eff):Colors.white
+
+
+
+                      ),
+                      child: Icon(
+                        Icons.view_agenda,
+                        size: 25,
+                        color: isList?Colors.white: Color(0xff67349C),
+                      ),
+                    ),
+                  ),
+                  SizedBox(
+                      width: 5.0
+                  ),
+                  GestureDetector(
+                    onTap: (){ if(isList){setState(() {
+                      isList=false;
+                    });}},
+                    child: Container(
+                      padding: EdgeInsets.all(5),
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.all(Radius.circular(10)),
+                          color: !isList?Color(0xFFb56eff):Colors.white
+
+
+
+                      ),
+                      child: Icon(
+                        Icons.view_module,
+                        size: 25,
+                        color: !isList?Colors.white: Color(0xff67349C),
+                      ),
+                    ),
+                  ),
+                ],
+              )
+            ],
+          ),
+              SizedBox(height: 10,),
+              Flexible(
+                    child: new GridView.count(
+                      crossAxisCount: isList?1:2,
+                      childAspectRatio: isList?3.5:1.0,
+                      padding: const EdgeInsets.all(4.0),
+                      mainAxisSpacing: 6.0,
+                      crossAxisSpacing: 6.0,
+                      children: _list.map((e) => FolderCard(isList: isList,data: e,)).toList(),
+                    ),
+          ),
+       ]),
+    )
+
+
     );
   }
 }
+