diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
new file mode 100644
index 0000000..3512836
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for the project PothGula
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**  
+<!--A clear and concise description of what the problem is.-->
+
+**Describe the solution you'd like**  
+<!--A clear and concise description of what you want to happen.-->
+
+**Describe alternatives you've considered**  
+<!--A clear and concise description of any alternative solutions or features you've considered.-->
+
+**Additional context**  
+<!--Add any other context or screenshots about the feature request here.-->
+
+**Would you like to work on the issue?**
+
+<!--Let us know if this issue should be assigned to you or tell us who you think could help to solve this issue.-->
diff --git a/.github/ISSUE_TEMPLATE/let-s-report-a-bug.md b/.github/ISSUE_TEMPLATE/let-s-report-a-bug.md
new file mode 100644
index 0000000..a92124c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/let-s-report-a-bug.md
@@ -0,0 +1,38 @@
+---
+name: Let's report a bug
+about: Report a bug which you have noticed, to help us improve PothGula
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+Please follow the issue template to **report a bug** 
+
+**Actual Behaviour**
+
+<!--Please state here what is currently happening.-->
+
+**Expected Behaviour**
+
+<!--State here what the feature should enable the user to do.-->
+
+**Steps to reproduce it**
+
+<!--Add steps to reproduce bugs or add information on the place where the feature should be implemented. Add links to a sample deployment or code.-->
+
+**LogCat for the issue**
+
+<!--Provide logs for the crash here.-->
+
+**Screenshots of the issue**
+
+<!--Where-ever possible add a screenshot of the issue.-->
+
+-   Device: (e.g. iPhone6)
+-   OS: (e.g. iOS8.1)
+-   Flutter version: 
+
+**Would you like to work on the issue?**
+
+<!--Let us know if this issue should be assigned to you or tell us who you think could help to solve this issue.-->
diff --git a/assets/fonts/Oxygen-Bold.ttf b/assets/fonts/Oxygen-Bold.ttf
new file mode 100755
index 0000000..7a897d0
Binary files /dev/null and b/assets/fonts/Oxygen-Bold.ttf differ
diff --git a/assets/fonts/Oxygen-Light.ttf b/assets/fonts/Oxygen-Light.ttf
new file mode 100755
index 0000000..fff3a68
Binary files /dev/null and b/assets/fonts/Oxygen-Light.ttf differ
diff --git a/assets/fonts/Oxygen-Regular.ttf b/assets/fonts/Oxygen-Regular.ttf
new file mode 100755
index 0000000..c32446f
Binary files /dev/null and b/assets/fonts/Oxygen-Regular.ttf differ
diff --git a/assets/images/gamperliya.jpg b/assets/images/gamperliya.jpg
new file mode 100755
index 0000000..e315d87
Binary files /dev/null and b/assets/images/gamperliya.jpg differ
diff --git a/assets/images/kaliyugaya.jpg b/assets/images/kaliyugaya.jpg
new file mode 100755
index 0000000..3536b78
Binary files /dev/null and b/assets/images/kaliyugaya.jpg differ
diff --git a/assets/images/lila.jpg b/assets/images/lila.jpg
new file mode 100755
index 0000000..3866ee1
Binary files /dev/null and b/assets/images/lila.jpg differ
diff --git a/assets/images/logo.png b/assets/images/logo.png
new file mode 100755
index 0000000..a4a6dcc
Binary files /dev/null and b/assets/images/logo.png differ
diff --git a/assets/images/madolduwa.jpg b/assets/images/madolduwa.jpg
new file mode 100755
index 0000000..da9dd45
Binary files /dev/null and b/assets/images/madolduwa.jpg differ
diff --git a/lib/main.dart b/lib/main.dart
index 19e9520..35fb8af 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:poth_gula/screens/home_screen.dart';
 
-void main() => runApp(MyApp());
+void main() => runApp(
+  MaterialApp(
+    title: 'PothGula',
+    home: HomeScreen(),
+  ),
+);
 
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    // TODO: implement build
-    return null;
-  }
-}
\ No newline at end of file
+ThemeData appTheme = ThemeData(
+    primaryColor: Colors.blue
+);
\ No newline at end of file
diff --git a/lib/manager/database.dart b/lib/manager/database.dart
new file mode 100644
index 0000000..e69de29
diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart
new file mode 100644
index 0000000..65bea51
--- /dev/null
+++ b/lib/screens/home_screen.dart
@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import 'package:poth_gula/widgets/custom_choice_chips.dart';
+import 'package:poth_gula/widgets/custom_popup_button.dart';
+import 'package:poth_gula/widgets/custom_shape_clipper.dart';
+
+class HomeScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: <Widget>[
+          HomeScreenTopPart(),
+        ],
+      ),
+    );
+  }
+}
+
+Color firstColor = Color(0xFF2F80ED);
+Color secondColor = Color(0xFF56CCF2);
+
+List<String> searchArea = ['Colombo', 'Koswatte', 'Nawala'];
+
+class HomeScreenTopPart extends StatefulWidget {
+  @override
+  _HomeScreenTopPartState createState() => _HomeScreenTopPartState();
+}
+
+class _HomeScreenTopPartState extends State<HomeScreenTopPart> {
+  var selectedArea = 0;
+  var isShareSelected = true;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: <Widget>[
+        ClipPath(
+          clipper: CustomShapeClipper(),
+          child: Container(
+            height: 400.0,
+            decoration: BoxDecoration(
+                gradient: LinearGradient(colors: [firstColor, secondColor])),
+            child: Column(
+              children: <Widget>[
+                SizedBox(height: 50.0),
+                Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: Row(
+                    children: <Widget>[
+                      Icon(
+                        Icons.location_on,
+                        color: Colors.white,
+                      ),
+                      SizedBox(
+                        width: 16.0,
+                      ),
+                      CustomPopupMenuButton(searchArea),
+                      // have to capture the selectedItem from the CustomPopupMenuButton
+                      Spacer(),
+                      Icon(Icons.location_searching, color: Colors.white)
+                    ],
+                  ),
+                ),
+                SizedBox(
+                  height: 37.0,
+                ),
+                Text(
+                  'What would\nyou want to read?',
+                  style: TextStyle(fontSize: 24.0, color: Colors.white),
+                  textAlign: TextAlign.center,
+                ),
+                SizedBox(
+                  height: 30.0,
+                ),
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 32.0),
+                  child: Material(
+                    elevation: 5.0,
+                    borderRadius: BorderRadius.all(Radius.circular(30.0)),
+                    child: TextField(
+                      controller: TextEditingController(text: "Gamperaliya"),
+                      style: TextStyle(color: Colors.black54, fontSize: 16.0),
+                      cursorColor: Colors.blue[900],
+                      decoration: InputDecoration(
+                          contentPadding: EdgeInsets.symmetric(
+                              horizontal: 32.0, vertical: 14.0),
+                          suffixIcon: Material(
+                            elevation: 2.0,
+                            borderRadius:
+                            BorderRadius.all(Radius.circular(30.0)),
+                            child: Icon(
+                              Icons.search,
+                              color: Colors.black,
+                            ),
+                          ),
+                          border: InputBorder.none),
+                    ),
+                  ),
+                ),
+                SizedBox(
+                  height: 21.0,
+                ),
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: <Widget>[
+                    InkWell(
+                      child: CustomChoiceChip(
+                          Icons.donut_large, "Share", isShareSelected),
+                      onTap: () {
+                        setState(() {
+                          isShareSelected = true;
+                        });
+                      },
+                    ),
+                    SizedBox(
+                      width: 20.0,
+                    ),
+                    InkWell(
+                      child: CustomChoiceChip(
+                          Icons.donut_large, "Exchage", !isShareSelected),
+                      onTap: () {
+                        setState(() {
+                          isShareSelected = false;
+                        });
+                      },
+                    ),
+                  ],
+                )
+              ],
+            ),
+          ),
+        )
+      ],
+    );
+  }
+}
diff --git a/lib/widgets/custom_choice_chips.dart b/lib/widgets/custom_choice_chips.dart
new file mode 100644
index 0000000..f4a5725
--- /dev/null
+++ b/lib/widgets/custom_choice_chips.dart
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+class CustomChoiceChip extends StatefulWidget {
+  final IconData icon;
+  final String text;
+  final bool isSelected;
+
+  CustomChoiceChip(this.icon, this.text, this.isSelected);
+
+  @override
+  _CustomChoiceChipState createState() => _CustomChoiceChipState();
+}
+
+class _CustomChoiceChipState extends State<CustomChoiceChip> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 8.0),
+      decoration: widget.isSelected ? BoxDecoration(
+          color: Colors.white.withOpacity(0.15),
+          borderRadius: BorderRadius.all(Radius.circular(20.0))) : null,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Icon(
+            widget.icon,
+            size: 20.0,
+            color: Colors.white,
+          ),
+          SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.text,
+              style: TextStyle(color: Colors.white, fontSize: 14.0))
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/custom_popup_button.dart b/lib/widgets/custom_popup_button.dart
new file mode 100644
index 0000000..9a5588a
--- /dev/null
+++ b/lib/widgets/custom_popup_button.dart
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+
+var _dropdownLabelStyle = TextStyle(color: Colors.white, fontSize: 16.0);
+var _dropdownMenuItemStyle = TextStyle(color: Colors.black, fontSize: 16.0);
+var selectedItemFromMenu = 0;
+
+class CustomPopupMenuButton extends StatefulWidget {
+  final List<String> popupMenuItemList;
+
+  CustomPopupMenuButton(this.popupMenuItemList);
+
+  @override
+  _CustomPopupMenuButtonState createState() => _CustomPopupMenuButtonState();
+}
+
+class _CustomPopupMenuButtonState extends State<CustomPopupMenuButton>{
+  @override
+  void initState() {
+    super.initState();
+
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => PopupMenuButton(
+      onSelected: (int index){
+        setState(() {
+          selectedItemFromMenu = index;
+        });
+      },
+      child: Row(
+        children: <Widget>[
+          Text(widget.popupMenuItemList[selectedItemFromMenu],
+              style: _dropdownLabelStyle),
+          Icon(
+            Icons.keyboard_arrow_down,
+            color: Colors.white,
+          )
+        ],
+      ),
+      itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
+        PopupMenuItem(
+          child: Text(
+            widget.popupMenuItemList[0],
+            style: _dropdownMenuItemStyle,
+          ),
+          value: 0,
+        ),
+        PopupMenuItem(
+          child: Text(
+            widget.popupMenuItemList[1],
+            style: _dropdownMenuItemStyle,
+          ),
+          value: 1,
+        )
+      ]);
+}
diff --git a/lib/widgets/custom_shape_clipper.dart b/lib/widgets/custom_shape_clipper.dart
new file mode 100644
index 0000000..b3e66a9
--- /dev/null
+++ b/lib/widgets/custom_shape_clipper.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+class  CustomShapeClipper extends CustomClipper<Path>{
+  @override
+  getClip(Size size) {
+
+    final Path path = Path();
+    path.lineTo(0.0, size.height);
+
+    var firstEndPoint = Offset(size.width*0.5, size.height-30.0);
+    var firstControllPoint = Offset(size.width*0.25, size.height-50.0);
+    path.quadraticBezierTo(firstControllPoint.dx, firstControllPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
+
+    var secondEndPoint = Offset(size.width, size.height-80.0);
+    var secondControllPoint = Offset(size.width*0.75, size.height-10.0);
+    path.quadraticBezierTo(secondControllPoint.dx, secondControllPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
+
+    path.lineTo(size.width, 0.0);
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper oldClipper) => false;
+
+}
\ No newline at end of file
diff --git a/pubspec.yaml b/pubspec.yaml
index 5994bd8..521fb95 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -37,9 +37,11 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #  - images/a_dot_burr.jpeg
-  #  - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/gamperliya.jpg
+    - assets/images/kaliyugaya.jpg
+    - assets/images/lila.jpg
+    - assets/images/madolduwa.jpg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.io/assets-and-images/#resolution-aware.
@@ -51,18 +53,14 @@ flutter:
   # in this "flutter" section. Each entry in this list should have a
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
-  # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
+  fonts:
+    - family: Oxygen
+      fonts:
+        - asset: assets/fonts/Oxygen-Regular.ttf
+        - asset: assets/fonts/Oxygen-Light.ttf
+        - asset: assets/fonts/Oxygen-Bold.ttf
+          style: italic
+
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.io/custom-fonts/#from-packages