From 7e497b0f4943356a15e4bfbe448cd4adccbcbf09 Mon Sep 17 00:00:00 2001
From: Kumaraguru1081 <62003632+Kumaraguru1081@users.noreply.github.com>
Date: Fri, 3 Apr 2020 17:09:38 +0530
Subject: [PATCH] Committed the UI Kit Source for 3.0.0.0 release (#44)

* Committed the UI Kit Source for 3.0.0.0 release
---
 EssentialUIKit.Android/Assets/UIFontIcons.ttf | Bin 29208 -> 34544 bytes
 .../EssentialUIKit.Android.csproj             |  13 +-
 EssentialUIKit.Android/MainActivity.cs        |   7 +-
 .../Properties/AndroidManifest.xml            |   2 +-
 .../Resources/drawable/Visa.png               | Bin 0 -> 897 bytes
 EssentialUIKit.UWP/App.xaml.cs                |   3 +-
 EssentialUIKit.UWP/Assets/UIFontIcons.ttf     | Bin 29208 -> 34544 bytes
 EssentialUIKit.UWP/EssentialUIKit.UWP.csproj  |   8 +-
 EssentialUIKit.UWP/scale-100/Visa.png         | Bin 0 -> 897 bytes
 EssentialUIKit.iOS/AppDelegate.cs             |   6 +-
 EssentialUIKit.iOS/EssentialUIKit.iOS.csproj  |  10 +-
 EssentialUIKit.iOS/Resources/UIFontIcons.ttf  | Bin 29208 -> 34544 bytes
 EssentialUIKit.iOS/Resources/Visa.png         | Bin 0 -> 897 bytes
 EssentialUIKit/AppLayout/TemplateList.xml     |  63 +-
 EssentialUIKit/AppLayout/Views/HomePage.xaml  |  42 +-
 .../AppLayout/Views/HomePage.xaml.cs          |   6 +
 EssentialUIKit/AppLayout/Views/Styles.xaml    |   2 +-
 .../AppLayout/Views/TemplatePage.xaml         |  12 +-
 .../AppLayout/Views/TemplatePage.xaml.cs      |  10 +-
 .../Behaviors/Detail/SelectedIndexBehavior.cs | 108 ++++
 .../Behaviors/EntryMaskedBehavior.cs          | 130 ++++
 .../Behaviors/ItemTemplateButtonBehavior.cs   |   4 +-
 .../Behaviors/Shopping/CartBehavior.cs        |   2 -
 EssentialUIKit/Controls/CountryComboBox.cs    | 253 ++++++++
 .../Controls/SearchableArticleList.cs         |  35 ++
 .../Controls/SearchableDataTable.cs           |  35 ++
 .../Controls/SearchableEventList.cs           |  36 ++
 EssentialUIKit/Controls/SearchableFAQList.cs  |   5 +-
 .../Controls/SearchableFileExploreList.cs     |  40 ++
 EssentialUIKit/Controls/SearchableListView.cs |   4 +-
 .../Controls/SearchableSuggestionList.cs      |   5 +-
 EssentialUIKit/Controls/SfPopupView.cs        |   3 -
 EssentialUIKit/Controls/TapAnimationGrid.cs   |   5 +-
 .../Converters/BooleanToColorConverter.cs     |   6 +
 .../Converters/BooleanToStringConverter.cs    |  11 +
 EssentialUIKit/Data/navigation.json           | 118 +++-
 EssentialUIKit/Data/notification.json         |  32 +-
 EssentialUIKit/Data/timeline.json             |  77 +++
 .../DataService/CompanyHistoryDataService.cs  |  65 ++
 .../DataService/DailyTimelineDataService.cs   |  70 +++
 .../ECommerceNotificationDataService.cs       |  65 ++
 .../DataService/FileExploreDataService.cs     |  65 ++
 EssentialUIKit/EssentialUIKit.csproj          |  19 +-
 EssentialUIKit/Images/CaloriesEaten.svg       |   6 +
 EssentialUIKit/Images/HeartRate.svg           |   5 +
 EssentialUIKit/Images/SleepDuration.svg       |   4 +
 EssentialUIKit/Images/WaterConsumed.svg       |   4 +
 EssentialUIKit/Models/Article.cs              |  50 +-
 EssentialUIKit/Models/Catalog/EventList.cs    | 100 +++
 EssentialUIKit/Models/Catalog/Travel.cs       |  82 +++
 EssentialUIKit/Models/Dashboard/Calorie.cs    |  30 +
 .../Models/Dashboard/CaloriesCard.cs          |  73 +++
 EssentialUIKit/Models/Dashboard/Event.cs      |  47 ++
 .../Models/Dashboard/Transaction.cs           | 100 +++
 .../Models/Dashboard/TransactionChartData.cs  |  56 ++
 EssentialUIKit/Models/Detail/Address.cs       |  34 ++
 EssentialUIKit/Models/Detail/DataTable.cs     |  55 ++
 EssentialUIKit/Models/Detail/RoomDetail.cs    | 160 +++++
 EssentialUIKit/Models/HealthProfile.cs        |  53 ++
 EssentialUIKit/Models/Navigation/File.cs      |  35 ++
 EssentialUIKit/Models/Navigation/Movie.cs     |  19 +
 .../ECommerceNotificationsListModel.cs        |  85 +++
 EssentialUIKit/Models/Profile.cs              |  19 +-
 EssentialUIKit/Models/Transaction/Card.cs     |  54 ++
 .../ViewModels/About/AboutUsViewModel.cs      |   2 -
 .../ArticleParallaxHeaderPageViewModel.cs     |   7 +-
 .../ArticleWithCommentsPageViewModel.cs       |   5 +-
 .../Article/MyArticlePageViewModel.cs         |   1 -
 .../Bookmarks/BookmarksViewModel.cs           |   2 -
 .../ViewModels/Bookmarks/CartPageViewModel.cs |   2 -
 .../ViewModels/Bookmarks/WishlistViewModel.cs |   2 -
 .../Catalog/ArticleCardViewModel.cs           | 184 ++++++
 .../Catalog/ArticleListViewModel.cs           |   2 -
 .../Catalog/CatalogPageViewModel.cs           |   3 -
 .../Catalog/CategoryPageViewModel.cs          |   6 -
 .../ViewModels/Catalog/EventListViewModel.cs  | 230 +++++++
 .../Catalog/NavigationTravelPageViewModel.cs  | 316 ++++++++++
 .../Catalog/ProductHomePageViewModel.cs       |   2 -
 .../ViewModels/Chat/ChatMessageViewModel.cs   |   2 -
 .../ViewModels/Chat/RecentChatViewModel.cs    |   2 -
 .../ContactUs/ContactUsViewModel.cs           |   2 -
 .../Dashboard/CompanyHistoryViewModel.cs      |  76 +++
 .../Dashboard/DailyCaloriesReportViewModel.cs | 230 +++++++
 .../Dashboard/DailyTimelineViewModel.cs       |  36 ++
 .../ViewModels/Dashboard/MyWalletViewModel.cs | 573 ++++++++++++++++++
 .../Dashboard/StockOverviewViewModel.cs       |   1 -
 .../Detail/ArticleDetailPageViewModel.cs      |   1 -
 .../ViewModels/Detail/DataTableViewModel.cs   | 237 ++++++++
 .../ViewModels/Detail/DetailPageViewModel.cs  |   6 +-
 .../ViewModels/Detail/DetailViewModel.cs      |   2 -
 .../ViewModels/Detail/EventDetailViewModel.cs | 156 +++++
 .../ViewModels/Detail/MyAddressViewModel.cs   | 110 ++++
 .../Detail/RoomBookingPageViewModel.cs        | 530 ++++++++++++++++
 .../ViewModels/Forms/AddCardViewModel.cs      |   4 +-
 .../ViewModels/Forms/AddContactViewModel.cs   |  71 +--
 .../BusinessRegistrationFormViewModel.cs      |  78 +--
 .../ViewModels/Forms/LoginViewModel.cs        |   4 +-
 .../Forms/LoginWithSocialIconViewModel.cs     | 157 +++++
 .../Forms/ResetPasswordViewModel.cs           |   4 +-
 .../Navigation/FileExploreViewModel.cs        |  68 +++
 .../Navigation/MoviesPageViewModel.cs         | 199 +++++-
 .../Navigation/SuggestionViewModel.cs         |  11 +-
 .../ECommerceNotificationViewModel.cs         | 113 ++++
 .../Profile/ContactProfileViewModel.cs        |   2 +-
 .../Profile/HealthProfileViewModel.cs         | 124 ++++
 .../Shopping/CheckoutPageViewModel.cs         |   4 +-
 .../Social/SocialProfileViewModel.cs          | 114 ++--
 .../Transaction/CheckoutPageViewModel.cs      |   4 +-
 .../Transaction/MyCardsViewModel.cs           | 118 ++++
 EssentialUIKit/Views/Article/Styles.xaml      |   1 -
 .../Views/Catalog/ArticleCardPage.xaml        | 173 ++++++
 .../Views/Catalog/ArticleCardPage.xaml.cs     | 113 ++++
 .../Views/Catalog/EventListPage.xaml          | 240 ++++++++
 .../Views/Catalog/EventListPage.xaml.cs       | 108 ++++
 .../Views/Catalog/NavigationTravelPage.xaml   | 289 +++++++++
 .../Catalog/NavigationTravelPage.xaml.cs      |  18 +
 EssentialUIKit/Views/Catalog/Styles.xaml      |  69 ++-
 .../Views/Dashboard/CompanyHistoryPage.xaml   |  66 ++
 .../Dashboard/CompanyHistoryPage.xaml.cs      |  23 +
 .../Dashboard/DailyCaloriesReportPage.xaml    | 245 ++++++++
 .../Dashboard/DailyCaloriesReportPage.xaml.cs | 116 ++++
 .../Views/Dashboard/DailyTimeLinePage.xaml    | 101 +++
 .../Views/Dashboard/DailyTimeLinePage.xaml.cs |  23 +
 .../Views/Dashboard/MyWalletPage.xaml         | 169 ++++++
 .../Views/Dashboard/MyWalletPage.xaml.cs      |  22 +
 .../Selectors/CompanyHistoryDataSelectors.cs  |  44 ++
 EssentialUIKit/Views/Dashboard/Styles.xaml    |  51 +-
 .../Templates/CompanyHistoryTemplates.xaml    |  42 ++
 .../Templates/CompanyHistoryTemplates.xaml.cs |  21 +
 .../Views/Detail/BookingFeedbackView.xaml     |  62 ++
 .../Views/Detail/BookingFeedbackView.xaml.cs  |  21 +
 .../Views/Detail/DataTablePage.xaml           | 196 ++++++
 .../Views/Detail/DataTablePage.xaml.cs        | 101 +++
 .../Views/Detail/EventDetailPage.xaml         | 150 +++++
 .../Views/Detail/EventDetailPage.xaml.cs      |  18 +
 .../Views/Detail/MyAddressPage.xaml           | 138 +++++
 .../Views/Detail/MyAddressPage.xaml.cs        |  21 +
 .../Views/Detail/RoomBookingPage.xaml         | 443 ++++++++++++++
 .../Views/Detail/RoomBookingPage.xaml.cs      |  19 +
 EssentialUIKit/Views/Detail/Styles.xaml       | 127 +++-
 .../Views/Detail/Templates/EventTemplate.xaml |  38 ++
 .../Detail/Templates/EventTemplate.xaml.cs    |  18 +
 .../Views/Forms/AddCardPage.xaml.cs           |   3 +-
 .../Views/Forms/AddContactPage.xaml           |  38 +-
 .../Views/Forms/AddProfilePage.xaml           |   9 +-
 .../Views/Forms/AddProfilePage.xaml.cs        |   5 +-
 .../Forms/BusinessRegistrationFormPage.xaml   |  59 +-
 .../Views/Forms/ContactEmailEntry.xaml.cs     |   8 +-
 .../Views/Forms/LoginEmailEntry.xaml          |  68 +++
 .../Views/Forms/LoginEmailEntry.xaml.cs       |  22 +
 .../Views/Forms/LoginWithSocialIconPage.xaml  | 178 ++++++
 .../Forms/LoginWithSocialIconPage.xaml.cs     |  21 +
 EssentialUIKit/Views/Forms/Styles.xaml        |  41 +-
 EssentialUIKit/Views/Forms/TabbedForm.xaml    |   2 +-
 .../Views/Navigation/ContactsPage.xaml        |  81 +--
 .../Views/Navigation/DocumentsListPage.xaml   |  81 +--
 EssentialUIKit/Views/Navigation/FAQPage.xaml  |  87 +--
 .../Views/Navigation/FileExploreGridPage.xaml | 192 ++++++
 .../Navigation/FileExploreGridPage.xaml.cs    | 112 ++++
 .../Views/Navigation/FileExploreListPage.xaml | 212 +++++++
 .../Navigation/FileExploreListPage.xaml.cs    | 112 ++++
 .../Views/Navigation/MoviesListPage.xaml      |   4 +-
 .../Views/Navigation/MoviesPage.xaml          | 211 +++++++
 .../Views/Navigation/MoviesPage.xaml.cs       |  19 +
 .../Views/Navigation/NamesListPage.xaml       |   6 +-
 .../Navigation/NavigationTileCardPage.xaml    |   4 +-
 .../Views/Navigation/PhotosPage.xaml          |   2 +-
 .../Views/Navigation/RestaurantPage.xaml      |   6 +-
 .../Views/Navigation/SongsPage.xaml           |   7 +-
 .../Views/Navigation/SongsPlayListPage.xaml   |   3 +-
 EssentialUIKit/Views/Navigation/Styles.xaml   |  22 +-
 .../Views/Navigation/SuggestionPage.xaml      |   5 +-
 .../ECommerceNotificationPage.xaml            | 145 +++++
 .../ECommerceNotificationPage.xaml.cs         |  24 +
 EssentialUIKit/Views/Notification/Styles.xaml |   4 +
 .../Views/Profile/HealthProfilePage.xaml      | 200 ++++++
 .../Views/Profile/HealthProfilePage.xaml.cs   |  22 +
 EssentialUIKit/Views/Profile/Styles.xaml      |  20 +
 .../Views/Settings/SettingPage.xaml           |   2 +-
 .../Views/Settings/SettingPage.xaml.cs        |   7 +-
 .../Social/SocialProfileWithCardPage.xaml     |   4 +-
 .../SocialProfileWithConnectionsPage.xaml     |   2 +-
 .../SocialProfileWithInterestsPage.xaml       |   6 +-
 .../Social/SocialProfileWithMessagePage.xaml  | 376 ++++++++++++
 .../SocialProfileWithMessagePage.xaml.cs      |  22 +
 EssentialUIKit/Views/Social/Styles.xaml       |  21 +
 .../Templates/ArticleActivityTemplate.xaml    |  51 ++
 .../Templates/ArticleActivityTemplate.xaml.cs |  39 ++
 .../Templates/ArticleListTemplate.xaml.cs     |   7 +-
 .../Templates/ArticleTileTemplate.xaml.cs     |   7 +-
 .../Templates/BookingReviewTemplate.xaml      | 127 ++++
 .../Templates/BookingReviewTemplate.xaml.cs   |  22 +
 .../Views/Templates/EventListTemplate.xaml    | 106 ++++
 .../Views/Templates/EventListTemplate.xaml.cs |  19 +
 .../Views/Templates/ExpenseChartTemplate.xaml | 154 +++++
 .../Templates/ExpenseChartTemplate.xaml.cs    |  22 +
 .../Templates/NavigationListTemplate.xaml.cs  |   8 +-
 .../Templates/NavigationTileTemplate.xaml.cs  |   8 +-
 .../Templates/OrderHistoryTemplate.xaml.cs    |   8 +-
 .../Templates/ProductListTemplate.xaml.cs     |   7 +-
 .../Templates/ProductTileTemplate.xaml.cs     |   7 +-
 .../Views/Templates/ReviewTemplate.xaml.cs    |   8 +-
 .../Views/Templates/SocialIconTemplate.xaml   |  31 +
 .../Templates/SocialIconTemplate.xaml.cs      |  19 +
 EssentialUIKit/Views/Templates/Styles.xaml    |  82 ++-
 .../Templates/WishlistItemTemplate.xaml.cs    |   8 +-
 .../Views/Transaction/MyCardsPage.xaml        | 148 +++++
 .../Views/Transaction/MyCardsPage.xaml.cs     |  21 +
 EssentialUIKit/Views/Transaction/Styles.xaml  |  24 +
 209 files changed, 12266 insertions(+), 679 deletions(-)
 create mode 100644 EssentialUIKit.Android/Resources/drawable/Visa.png
 create mode 100644 EssentialUIKit.UWP/scale-100/Visa.png
 create mode 100644 EssentialUIKit.iOS/Resources/Visa.png
 create mode 100644 EssentialUIKit/Behaviors/Detail/SelectedIndexBehavior.cs
 create mode 100644 EssentialUIKit/Behaviors/EntryMaskedBehavior.cs
 create mode 100644 EssentialUIKit/Controls/CountryComboBox.cs
 create mode 100644 EssentialUIKit/Controls/SearchableArticleList.cs
 create mode 100644 EssentialUIKit/Controls/SearchableDataTable.cs
 create mode 100644 EssentialUIKit/Controls/SearchableEventList.cs
 create mode 100644 EssentialUIKit/Controls/SearchableFileExploreList.cs
 create mode 100644 EssentialUIKit/Data/timeline.json
 create mode 100644 EssentialUIKit/DataService/CompanyHistoryDataService.cs
 create mode 100644 EssentialUIKit/DataService/DailyTimelineDataService.cs
 create mode 100644 EssentialUIKit/DataService/ECommerceNotificationDataService.cs
 create mode 100644 EssentialUIKit/DataService/FileExploreDataService.cs
 create mode 100644 EssentialUIKit/Images/CaloriesEaten.svg
 create mode 100644 EssentialUIKit/Images/HeartRate.svg
 create mode 100644 EssentialUIKit/Images/SleepDuration.svg
 create mode 100644 EssentialUIKit/Images/WaterConsumed.svg
 create mode 100644 EssentialUIKit/Models/Catalog/EventList.cs
 create mode 100644 EssentialUIKit/Models/Catalog/Travel.cs
 create mode 100644 EssentialUIKit/Models/Dashboard/Calorie.cs
 create mode 100644 EssentialUIKit/Models/Dashboard/CaloriesCard.cs
 create mode 100644 EssentialUIKit/Models/Dashboard/Event.cs
 create mode 100644 EssentialUIKit/Models/Dashboard/Transaction.cs
 create mode 100644 EssentialUIKit/Models/Dashboard/TransactionChartData.cs
 create mode 100644 EssentialUIKit/Models/Detail/Address.cs
 create mode 100644 EssentialUIKit/Models/Detail/DataTable.cs
 create mode 100644 EssentialUIKit/Models/Detail/RoomDetail.cs
 create mode 100644 EssentialUIKit/Models/HealthProfile.cs
 create mode 100644 EssentialUIKit/Models/Navigation/File.cs
 create mode 100644 EssentialUIKit/Models/Notification/ECommerceNotificationsListModel.cs
 create mode 100644 EssentialUIKit/Models/Transaction/Card.cs
 create mode 100644 EssentialUIKit/ViewModels/Catalog/ArticleCardViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Catalog/EventListViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Catalog/NavigationTravelPageViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Dashboard/CompanyHistoryViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Dashboard/DailyCaloriesReportViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Dashboard/DailyTimelineViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Dashboard/MyWalletViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Detail/DataTableViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Detail/EventDetailViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Detail/MyAddressViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Detail/RoomBookingPageViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Forms/LoginWithSocialIconViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Navigation/FileExploreViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Notification/ECommerceNotificationViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Profile/HealthProfileViewModel.cs
 create mode 100644 EssentialUIKit/ViewModels/Transaction/MyCardsViewModel.cs
 create mode 100644 EssentialUIKit/Views/Catalog/ArticleCardPage.xaml
 create mode 100644 EssentialUIKit/Views/Catalog/ArticleCardPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Catalog/EventListPage.xaml
 create mode 100644 EssentialUIKit/Views/Catalog/EventListPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml
 create mode 100644 EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml
 create mode 100644 EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml
 create mode 100644 EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml
 create mode 100644 EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/MyWalletPage.xaml
 create mode 100644 EssentialUIKit/Views/Dashboard/MyWalletPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/Selectors/CompanyHistoryDataSelectors.cs
 create mode 100644 EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml
 create mode 100644 EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/BookingFeedbackView.xaml
 create mode 100644 EssentialUIKit/Views/Detail/BookingFeedbackView.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/DataTablePage.xaml
 create mode 100644 EssentialUIKit/Views/Detail/DataTablePage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/EventDetailPage.xaml
 create mode 100644 EssentialUIKit/Views/Detail/EventDetailPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/MyAddressPage.xaml
 create mode 100644 EssentialUIKit/Views/Detail/MyAddressPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/RoomBookingPage.xaml
 create mode 100644 EssentialUIKit/Views/Detail/RoomBookingPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Forms/LoginEmailEntry.xaml
 create mode 100644 EssentialUIKit/Views/Forms/LoginEmailEntry.xaml.cs
 create mode 100644 EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml
 create mode 100644 EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml
 create mode 100644 EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Navigation/FileExploreListPage.xaml
 create mode 100644 EssentialUIKit/Views/Navigation/FileExploreListPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Navigation/MoviesPage.xaml
 create mode 100644 EssentialUIKit/Views/Navigation/MoviesPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml
 create mode 100644 EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Profile/HealthProfilePage.xaml
 create mode 100644 EssentialUIKit/Views/Profile/HealthProfilePage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml
 create mode 100644 EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml.cs
 create mode 100644 EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Templates/EventListTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Templates/EventListTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Templates/SocialIconTemplate.xaml
 create mode 100644 EssentialUIKit/Views/Templates/SocialIconTemplate.xaml.cs
 create mode 100644 EssentialUIKit/Views/Transaction/MyCardsPage.xaml
 create mode 100644 EssentialUIKit/Views/Transaction/MyCardsPage.xaml.cs

diff --git a/EssentialUIKit.Android/Assets/UIFontIcons.ttf b/EssentialUIKit.Android/Assets/UIFontIcons.ttf
index bc9d5030f71ac95feafe9594efdb04785d244e28..443072d2f033f18f08c9f1e67626f92e107ca1ce 100644
GIT binary patch
delta 5163
zcmai2dyHIF89(Qq`<}UT=XGahpLZwIWh$i|WHQ|;P^O5q6kEEqyKMvnhIZO5-Q5{>
zmrxqx)c8+DOiIScl4w#wz#6KM)X+*WEQu&lVrybTAsVV;z(iw%78=7&{e9=ol+q&H
zdEI-S-{bfDzVFQZJN(Rdl_ukiF`MmYf(>ojQn+UI)U7u&#+RaX>-MQ?<DdWj*IkS$
zf57t}cTGOL^QY$z{)sUaZC`(VqE_9J35zGucM_kK6KF8U)vdTcg3pqPskyylxWRh+
z@fn+}Z?8W2!2;G2&!h3kRCVw22ESjq3Y{hzhNi1iweu_If6mx9A%HU8sL#%A``shY
zG4?GiAnK1D$=x(AC5F_Ab%(xrk9+-D7E&>nvA6cUO*>!s73ah`Jeo|QR$Qd%xH7~-
ztvLTG-*R-4U(Z_y`BkmMO4@l1ohn`!^zN3{>&jE!t?Vmo1KY@MW1HA0yPa)jTi95u
zA-<m~jh3DnSt!4_>d|ZWU-!)FD_7rt!<rj*9yQfhCz`Yg6EBNNG70xZ!FBZk?nerS
z@48B^fZL)Q34SYnzGAonAERKn5&j>}xzgX?-`CsQlgXr0sbn%9*ECfX3OW>3Xqv9;
zreT>@C={|owq<igXu3(yVJ8xC-DW5pcH%KjH%!yELm?*|aomWDMhE>EfGZk}rc(Hh
z(G`y;;)z5e=?@NK<DMRD>m?KMSk#R;;jnF)x~{1Lf?<JB*tYGS-oAcxg>2K%<(62`
ziA1AV2=kgT%yb<&Q4`9~LJ&d-&47du(2d2g6~rPb!{IP)Fu=Af)5L1fQ3zGl5>aeU
zyN4{xFf>(B6t2+r7>t3CM^$Kw0nwy!U>z>k(2b_1X+lVQsW25;AmT=$WisJ;UMiJN
zr!r}}G7yZc5`iA7WrxEsPSi9ET2eTqod&Iis&^!(HQ?E<dk-+MB;o2_%=07JN~9Dk
z6(ZSuw(073U<pWo3yQ-L@Puhuw(?p>Puk*B`rALayZztJ5U~ed#w5#HJVM`i&<zp{
zmH-fhO6$@H)3*3uI|jrERc(^$jm{Vrl3+Y27Qk);Ps;%5J?uN|S@v5##$SgzBA3Vs
zyzo8j`Py~7q63P?r{3x#A2)yEKL2rhQy=lQVny>K1Kj0)9N$*9ps(hYa4}u1sHKrS
z?ww+~;`n;r9RxM3L^e?gl?qW<&=mzE=Q_f;<({GP(7k?naK}yjIG|4&Yq|=<!Pgvy
zRq;sPSCqpScQ-HZKYelk<=u_X?*7E;pFg{KiEv-zT+<94RIx*V0&XBRftFlJ%K`AZ
zb_4JZW<w)119KXITwi?JHcX+B%ZU~m7)`tn(Hfv6ND=S_(`exY7S@_z5V6e$w=A&5
z(4Ga4h-1VT0v?ydvt=*#6N;*-HlftIjlaJcxF=o#ewswE8o&?>B)tIw9>JLc3)o8x
z#VrLE7XSwuO>+=B>hP1o+I#td?&nc*6{*}B{bE1X{rJbTuDPi1GoPA6<aSuiB4$by
z5D_RO8j#ABmW6%>BBF{`C}NSI;Igf%T)~6pU?7brQ<F6U+hV*P!WtwxrUF#xKo?m(
zE(0AlRGJh}tS~tPs}rXYg2SC>GPyJg1zN|9%ZS!4^H((thRG}$Xk&1KAwwtFEOb@G
zDF~8tD9&}HL0C7@1p#C<BynL_rrjsWyrBFNWL^gn|Ad_Yfs3WwuoqC)sDQWlD&bMr
zg4^zM(3nTG(u);6CP!TSzz?22-F~mNaAT%*X2NKlxY4@!S5e;he_hQV1FvLg=wTTo
zx6pN%2A5^&x@cEEyPv;P9xDeB2z*LRZ(Q1N*@)BK5t48;=RylHkQy$V^SP_0+VANd
zEjmK;!HybOG*Ii(A<fWbV}gPM<;NO?T+}i==lQ%?;iX(YH=J_^{dlpGF346lv5Xhe
zm1Gfq5(O(K*4%j~#|!Va;UbeFcOw;2G6bQ6Ku;J2M1c<&-fkknMPrGimr7?cJ-t12
zrPH35K-M6*fgm6r(DcL;D;^=c5Ldufpq21SJf^h?g?57ANrvqvnjr2Fy(}wDl|u|K
zyh$z(WdinWW_kg5h^VXx<i6{Lt^+P?gbio}RKXHUQDYzld#G)Y=EJtcI^v3DJCPU!
z%Q#qF7Ae`GAwGq|BhdVUY)}S~Po@OJaGR7SAv>uP3a3+4Q=l?JA_b{p7L^YHW1)2t
z6#(`O*@9{c&<GbwwWn}5%wAz^*vOA?S3yn!iwedvWU!Io5ot_G8+liOyQp3F?Fvu3
z!t<Nplkf#dRVoNxQA!0n=NjpX>6<*y^YD7XauqSU<ozY>l@tPnm?v~nu<j<adCF!8
zLhDE@MLjM{9$}3w8H*zv!zYG*tTW`ooZ~22$f(W8s<S%gsrm{ENKpKP4=5DjW<}8c
zAuj|s9;!4d_;8_0i$>=2kCE9B$LS>jW-ZQM!E5&twva_$A|WB!i&wlq%%AQ`{kSX#
zWpG3<3NCeC%6$usrqFv##$!kxhX$6+XzKAmweA|nD8x~Oz4k0Y5yCDHWIX#J{c8Gh
z=s?Oqc<EisPNJqnO$Gykh<5n#rH@f@h=eD@2I1N=7az#+TGaq!9H8bG9s81-<q<(F
zh*6eh+u1&jGXcEp8rcF|J?v#GzCXwZcmXaiRSaJ@ytJF~s1S0B*<!^(Of3~MBLx6o
zOcF)9zH5Eq8V50`6LXZ87Gb;~Ly$lOOsX<bgrdBZ{6Wo43<3^OVM9#GJW2pEt1C+T
z?|x5@-wijN@be>{L>!1Xy_vL^AX-zh3uuZed7Ug)Wi=3FL#jBHQ!)opP787`@08(E
zK5_(Q$aum_gTZt(Nb=T@KE#K*k-o`qw0a0AL`O2IL<m)=a(7^vEFToPSSpAqq%79L
zMOfo?qyyMSg&L4i<q}p%4!Ui~$~YGHQkfpYF}5J1#G)QT0UZ{c)}Nz;Ir1Y;0h%XG
z78ot!^kh<ABB<7lXzQffm!bf0!O1VP3J$dY;MG>7C$rj5du}>c=qpuv)0!Li{Jvr(
zQ|LvRsi06s`6Y9AM{uboa7V=w&Jm*ZP|w}Xgk+4g1lb`JUPZ?PSs=;Tp(EsC@-Qwi
z3@^IKaxiQd2N!vg3UWN59@!<>6~z-p)l6?+U;n_sK!5vPI(kLvd_@+MbsoPD?4}|D
zc7vs80v$$h+`{F#NgTVn0%AYss1pXcsA|M6H~_7IKVVmgMaMiZ=|!VMB%BQ8(zh;u
zr}fI(p_ae1uSuuK2r_{b1FG5<?0}^-a1O%K&RB)crLh>IcNjUo+i&3vg?(_;;*U~^
zMByJ^AwakrAvAm|HznvtenrPQ#ArZ?YWNOkj3#^!#$XC5h@GU8kQ%>ugj8`N54;d_
z!y%Ip)hEp%b)y5GJmS#-4>u_s`Mf0DKqv})N_)ZnvVbFQLbel9BO2;?P3)A|Mji-U
zfDjYN*C7quMy#fYBL7uDM4_|Qm53&>Y)oWbMHX0U(N`%UDA`z69Qf!=nLn_#tD~+0
z2TFC#1VN|6d9K{W$3EIG4m1}}DpxPgAD8KX(g0V$^OGm#VYHKtHT{@!2m%-+g%m(z
z7P}SyQ%tjc4F8qzypbNsYp4u0&vgrK#q}e@*-{pDqLOo6NSKX{c*Rl{pQ4v7jpSlk
z->hI{ESW3i(2`SLSh94(p{0v2o<6M{YAtMAbAOeOwx3t7209|a9}{qc1B}82GTv!c
z`;Ky%FO<uR_m&$<Sch9AMlT(Wkb$x~KnLIvZIs(<$~-ho`(0ITSZ3?@+g7yR-WF}1
zC^w!%yhqFc^c_0ICzJ3hi2%CA__@PnT#ZKgqcd8!_`Gy57~z66l-<B;{9p16rjXsF
z@y>|@Ohb|8;w-O?<YBb5kzUSuI*~W|6)b=1RG$C(%{TL0X}8<oSoxQg3Oi4YOW!z^
zKYxDl+fl)yt=~+(JGg#(eR_6tZP$a7)tT}2YwOc<vZZs|Ix*$(^{u~6-Hz{(>0Ej}
za!?)anq}i`JzFd9=h*tz1Jlbe;)m0R`FLw>{d+0Cfp6ru@lAY`-_AGlEjYA~^Q}kU
zs;^S^7-J9Zo|~)9gxBt#tlhk~F<GCf&1hSutK0X8bq`P3>+1DgleN*w2WPbn4^D5N
z(7(KUdb&1aeQBmv-LtbgJD1!vv#UD2dtY^KcYS(WeP++>M7?2du1)Qp-cg$|ZyDRT
L;imeI8VvP6&9hOz

delta 416
zcmey+%QWK&V?6^S0|NsWLjwadgMxpszL9ONmlXp8qXtkkEIBu^;7!KcL<R<?6+r&6
z^qk7H{W2Mc85meN7#K2+WTYmhh)?>y9w>JKh|My90vw?%-az&mAXdr9EvWz*1T?P!
zWM)o&a$@c3q(cl0%mqNfX}O6Nx&@4}OgcbGpn(hud5O8H@nJu1GBD(v0a_YbkY8N#
z=BQT?14F(FkpFSw8f9lMu#17NUOVIX`gneuuMFHQK)nnMx9lQgk!j{1%s+s94hANW
zC=h^r>cynMz&TlnF_O_^a}J{o<K!z$;=G%H5-dOnRPfwm@(-rPj0}@EFi!*O+Z@Ak
zG-I-6;}et2<ovwipw#rzoW!C~Pq+NM60isoGc2{JI5R&_!BEctDmvM*DUdO9^5iCE
y@l1wfhJ1!RhGK?L22TbzFuQ~ybMo0HZJ>&uO)D6^CNFB9ve~D_l8F`MSOx%|F>nO{

diff --git a/EssentialUIKit.Android/EssentialUIKit.Android.csproj b/EssentialUIKit.Android/EssentialUIKit.Android.csproj
index 59ec515..0150bb0 100755
--- a/EssentialUIKit.Android/EssentialUIKit.Android.csproj
+++ b/EssentialUIKit.Android/EssentialUIKit.Android.csproj
@@ -39,10 +39,11 @@
     <ErrorReport>prompt</ErrorReport>
     <WarningLevel>4</WarningLevel>
     <AndroidManagedSymbols>true</AndroidManagedSymbols>
-    <AndroidUseSharedRuntime>false</AndroidUseSharedRuntime>    
+    <AndroidUseSharedRuntime>false</AndroidUseSharedRuntime>
   </PropertyGroup>
   <ItemGroup>
     <Reference Include="Mono.Android" />
+    <Reference Include="Mono.Android.Export" />
     <Reference Include="System" />
     <Reference Include="System.Core" />
     <Reference Include="System.Xml.Linq" />
@@ -74,6 +75,9 @@
       <Version>17.4.0.44</Version>
     </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfComboBox" Version="17.4.0.44" />
+    <PackageReference Include="Syncfusion.Xamarin.SfGauge">
+      <Version>17.4.0.44</Version>
+    </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfMaps" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfParallaxView">
       <Version>17.4.0.44</Version>
@@ -90,7 +94,7 @@
     <PackageReference Include="Syncfusion.Xamarin.SfTabView">
       <Version>17.4.0.44</Version>
     </PackageReference>
-    <PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
+    <PackageReference Include="Xamarin.Forms" Version="4.3.0.991250" />
     <PackageReference Include="Xamarin.Android.Support.Design" Version="28.0.0.1" />
     <PackageReference Include="Xamarin.Android.Support.v7.AppCompat" Version="28.0.0.1" />
     <PackageReference Include="Xamarin.Android.Support.v4" Version="28.0.0.1" />
@@ -110,11 +114,11 @@
     <Compile Include="SplashScreenActivity.cs" />
   </ItemGroup>
   <ItemGroup>
-    <AndroidAsset Include="Assets\UIFontIcons.ttf" />
     <AndroidAsset Include="Assets\Montserrat-Bold.ttf" />
     <AndroidAsset Include="Assets\Montserrat-Medium.ttf" />
     <AndroidAsset Include="Assets\Montserrat-Regular.ttf" />
     <AndroidAsset Include="Assets\Montserrat-SemiBold.ttf" />
+    <AndroidAsset Include="Assets\UIFontIcons.ttf" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
     <None Include="Properties\AndroidManifest.xml">
@@ -267,6 +271,9 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\ReSchedule.png" />
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Visa.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
   <Import Project="..\build\tools\Syncfusion.CodeAnalysis.StyleCop\tools\StyleCop.MsBuild.targets" Condition="Exists('..\build\tools\Syncfusion.CodeAnalysis.StyleCop\tools\StyleCop.MsBuild.targets')" />
   <Target Name="BeforeBuild" Condition=" $(SetVersion) == true ">
diff --git a/EssentialUIKit.Android/MainActivity.cs b/EssentialUIKit.Android/MainActivity.cs
index 08c7dc6..258d867 100644
--- a/EssentialUIKit.Android/MainActivity.cs
+++ b/EssentialUIKit.Android/MainActivity.cs
@@ -2,6 +2,7 @@
 using Android.Content.PM;
 using Android.OS;
 using Android.Views;
+using Xamarin.Forms;
 using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
 
 namespace EssentialUIKit.Droid
@@ -16,12 +17,14 @@ protected override void OnCreate(Bundle savedInstanceState)
 
             base.OnCreate(savedInstanceState);
 
-            Xamarin.Forms.Forms.Init(this, savedInstanceState);
+            Forms.SetFlags("CollectionView_Experimental");
+
+            Forms.Init(this, savedInstanceState);
 
             Syncfusion.XForms.Android.PopupLayout.SfPopupLayoutRenderer.Init();
 
             Syncfusion.XForms.Android.Core.Core.Init(this);
-
+            
             this.LoadApplication(new App());
 
             // Change the status bar color
diff --git a/EssentialUIKit.Android/Properties/AndroidManifest.xml b/EssentialUIKit.Android/Properties/AndroidManifest.xml
index dbd8b3a..65a58a4 100644
--- a/EssentialUIKit.Android/Properties/AndroidManifest.xml
+++ b/EssentialUIKit.Android/Properties/AndroidManifest.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="7" android:versionName="6.0" package="com.syncfusion.xamarin.uikit" android:installLocation="internalOnly">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="8" android:versionName="6.1" package="com.syncfusion.xamarin.uikit" android:installLocation="internalOnly">
 	<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
 	<application android:label="Essential UI Kit"></application>
 </manifest>
\ No newline at end of file
diff --git a/EssentialUIKit.Android/Resources/drawable/Visa.png b/EssentialUIKit.Android/Resources/drawable/Visa.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ea8f9e7ebd39fc563c617222a89b21d6b8f760e
GIT binary patch
literal 897
zcmV-{1AhF8P)<h;3K|Lk000e1NJLTq001oj000jN1^@s6aDGOo00001b5ch_0Itp)
z=>Px&J4r-AR7eetmRo4fVI0Tb*V#78DW@!lG>4M3F-mhNF1V1ym2e@E!kw6q<Zywe
z#?2%b%2E^;i;1L7Zk#EnWXzVetmQa1pYQuVzqj9>_Z@!q-S7MR{=U!i{twUd{Fm(N
z>e`-2B$k5yz{d-UeaU39$&2_GQtxrvSv=>^ucGAzy$-G1JoE;_H-Y6~5*Q6W0sY1)
zycfxtz(0;+H<%2Pp|J{IYv73lromtv_yBwy&zJ(CS?vs+@X26=(?pNiICu$YlGsBW
zF|TEOH95R`u-SoeIQZ=b)O#2D5b)jgud7d8<}}fbK_3f`FIYF)AybHT(Qiz#MwBye
zx0fHl<8Pt9@3a{V?Ct6`aKDUBhu&1@5q%cw)#Q<ZEA0aLpdZi@Sr6)fk1f7%yu|VD
zl#4tZ-Qjd|px3)zBfO7#<O-*Y4h{N+NbmWF)AJPIZ*yaAIsQ>|D!M)Cw3Mg~+0rZ#
z1{aY^O(a+GW`2d*Kj~(-VH%uY^cwT*0DU9f%C(Teq0n1DU=8vp#%Y6Q2aN&X8?ZPb
z7sWvn$XfS>HX8ok^=>+SBD#NaW_u1<U_Q%ekIg_n3H0Rs9$RVNtc<Z1Slov60`E*9
zU$H@Oojg7&t*1<*6f}54;6KSa0#gAm3%aFZH7K5%Kt7aq=lDx=r!%(0m$+JVnGJ)_
ziF#YDXPJIJ*b6k558X`a947mt)Hbp%`m7sp!{*G&n2McI^q#BV!ZUjTzQOfG7iUcv
z1bP#IHn0yJi(`O4247O24|qtn_zba+P4}Onq2<tO&M52H$^^ZmQGbk@Xxg}0fv)9d
z@deTs>^I>*a#8BYif3l`>jR(-6)*e_v@?<4pB!zBZ4CVy=IDf925&$C&|8=fEbau7
z`WTt`k374_K0mlQ$6Z&)1Ms|dzIyek^MG#rZ_!M1JXjN%%Bkl?c;q}4@ik;>O!}W9
zjzt+m`r>pv`Xi}IeY7Ir*QlRIH**P03tqomzM>D3?gOn7SlrFMsKW?cE1<nYnR?Z{
z{w|x4zCOvBV+;P2{uA}-4I|A3g+QO|cA#bQ0M9G3JX)Swf_5D(^s-I}eA*u~f#Sy>
XcjEVWD%Z6900000NkvXXu0mjfC=|4#

literal 0
HcmV?d00001

diff --git a/EssentialUIKit.UWP/App.xaml.cs b/EssentialUIKit.UWP/App.xaml.cs
index c13275f..1dae0b7 100644
--- a/EssentialUIKit.UWP/App.xaml.cs
+++ b/EssentialUIKit.UWP/App.xaml.cs
@@ -60,6 +60,7 @@ protected override void OnLaunched(LaunchActivatedEventArgs e)
                 {
                     typeof(Syncfusion.XForms.UWP.Buttons.SfButtonRenderer).GetTypeInfo().Assembly,
                     typeof(Syncfusion.XForms.UWP.Buttons.SfCheckBoxRenderer).GetTypeInfo().Assembly,
+                    typeof(Syncfusion.SfChart.XForms.UWP.SfChartRenderer).GetTypeInfo().Assembly,
                     typeof(Syncfusion.XForms.UWP.Border.SfBorderRenderer).GetTypeInfo().Assembly,
                     typeof(Syncfusion.XForms.UWP.Graphics.SfGradientViewRenderer).GetTypeInfo().Assembly,
                     typeof(Syncfusion.ListView.XForms.UWP.SfListViewRenderer).GetTypeInfo().Assembly,
@@ -75,7 +76,7 @@ protected override void OnLaunched(LaunchActivatedEventArgs e)
                     typeof(Syncfusion.SfMaps.XForms.UWP.SfMapsRenderer).GetTypeInfo().Assembly,
                     typeof(Syncfusion.XForms.UWP.ProgressBar.SfLinearProgressRenderer).GetTypeInfo().Assembly
                 };
-
+                Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
                 Xamarin.Forms.Forms.Init(e, assembliesToInclude);
 
                 if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
diff --git a/EssentialUIKit.UWP/Assets/UIFontIcons.ttf b/EssentialUIKit.UWP/Assets/UIFontIcons.ttf
index bc9d5030f71ac95feafe9594efdb04785d244e28..443072d2f033f18f08c9f1e67626f92e107ca1ce 100644
GIT binary patch
delta 5163
zcmai2dyHIF89(Qq`<}UT=XGahpLZwIWh$i|WHQ|;P^O5q6kEEqyKMvnhIZO5-Q5{>
zmrxqx)c8+DOiIScl4w#wz#6KM)X+*WEQu&lVrybTAsVV;z(iw%78=7&{e9=ol+q&H
zdEI-S-{bfDzVFQZJN(Rdl_ukiF`MmYf(>ojQn+UI)U7u&#+RaX>-MQ?<DdWj*IkS$
zf57t}cTGOL^QY$z{)sUaZC`(VqE_9J35zGucM_kK6KF8U)vdTcg3pqPskyylxWRh+
z@fn+}Z?8W2!2;G2&!h3kRCVw22ESjq3Y{hzhNi1iweu_If6mx9A%HU8sL#%A``shY
zG4?GiAnK1D$=x(AC5F_Ab%(xrk9+-D7E&>nvA6cUO*>!s73ah`Jeo|QR$Qd%xH7~-
ztvLTG-*R-4U(Z_y`BkmMO4@l1ohn`!^zN3{>&jE!t?Vmo1KY@MW1HA0yPa)jTi95u
zA-<m~jh3DnSt!4_>d|ZWU-!)FD_7rt!<rj*9yQfhCz`Yg6EBNNG70xZ!FBZk?nerS
z@48B^fZL)Q34SYnzGAonAERKn5&j>}xzgX?-`CsQlgXr0sbn%9*ECfX3OW>3Xqv9;
zreT>@C={|owq<igXu3(yVJ8xC-DW5pcH%KjH%!yELm?*|aomWDMhE>EfGZk}rc(Hh
z(G`y;;)z5e=?@NK<DMRD>m?KMSk#R;;jnF)x~{1Lf?<JB*tYGS-oAcxg>2K%<(62`
ziA1AV2=kgT%yb<&Q4`9~LJ&d-&47du(2d2g6~rPb!{IP)Fu=Af)5L1fQ3zGl5>aeU
zyN4{xFf>(B6t2+r7>t3CM^$Kw0nwy!U>z>k(2b_1X+lVQsW25;AmT=$WisJ;UMiJN
zr!r}}G7yZc5`iA7WrxEsPSi9ET2eTqod&Iis&^!(HQ?E<dk-+MB;o2_%=07JN~9Dk
z6(ZSuw(073U<pWo3yQ-L@Puhuw(?p>Puk*B`rALayZztJ5U~ed#w5#HJVM`i&<zp{
zmH-fhO6$@H)3*3uI|jrERc(^$jm{Vrl3+Y27Qk);Ps;%5J?uN|S@v5##$SgzBA3Vs
zyzo8j`Py~7q63P?r{3x#A2)yEKL2rhQy=lQVny>K1Kj0)9N$*9ps(hYa4}u1sHKrS
z?ww+~;`n;r9RxM3L^e?gl?qW<&=mzE=Q_f;<({GP(7k?naK}yjIG|4&Yq|=<!Pgvy
zRq;sPSCqpScQ-HZKYelk<=u_X?*7E;pFg{KiEv-zT+<94RIx*V0&XBRftFlJ%K`AZ
zb_4JZW<w)119KXITwi?JHcX+B%ZU~m7)`tn(Hfv6ND=S_(`exY7S@_z5V6e$w=A&5
z(4Ga4h-1VT0v?ydvt=*#6N;*-HlftIjlaJcxF=o#ewswE8o&?>B)tIw9>JLc3)o8x
z#VrLE7XSwuO>+=B>hP1o+I#td?&nc*6{*}B{bE1X{rJbTuDPi1GoPA6<aSuiB4$by
z5D_RO8j#ABmW6%>BBF{`C}NSI;Igf%T)~6pU?7brQ<F6U+hV*P!WtwxrUF#xKo?m(
zE(0AlRGJh}tS~tPs}rXYg2SC>GPyJg1zN|9%ZS!4^H((thRG}$Xk&1KAwwtFEOb@G
zDF~8tD9&}HL0C7@1p#C<BynL_rrjsWyrBFNWL^gn|Ad_Yfs3WwuoqC)sDQWlD&bMr
zg4^zM(3nTG(u);6CP!TSzz?22-F~mNaAT%*X2NKlxY4@!S5e;he_hQV1FvLg=wTTo
zx6pN%2A5^&x@cEEyPv;P9xDeB2z*LRZ(Q1N*@)BK5t48;=RylHkQy$V^SP_0+VANd
zEjmK;!HybOG*Ii(A<fWbV}gPM<;NO?T+}i==lQ%?;iX(YH=J_^{dlpGF346lv5Xhe
zm1Gfq5(O(K*4%j~#|!Va;UbeFcOw;2G6bQ6Ku;J2M1c<&-fkknMPrGimr7?cJ-t12
zrPH35K-M6*fgm6r(DcL;D;^=c5Ldufpq21SJf^h?g?57ANrvqvnjr2Fy(}wDl|u|K
zyh$z(WdinWW_kg5h^VXx<i6{Lt^+P?gbio}RKXHUQDYzld#G)Y=EJtcI^v3DJCPU!
z%Q#qF7Ae`GAwGq|BhdVUY)}S~Po@OJaGR7SAv>uP3a3+4Q=l?JA_b{p7L^YHW1)2t
z6#(`O*@9{c&<GbwwWn}5%wAz^*vOA?S3yn!iwedvWU!Io5ot_G8+liOyQp3F?Fvu3
z!t<Nplkf#dRVoNxQA!0n=NjpX>6<*y^YD7XauqSU<ozY>l@tPnm?v~nu<j<adCF!8
zLhDE@MLjM{9$}3w8H*zv!zYG*tTW`ooZ~22$f(W8s<S%gsrm{ENKpKP4=5DjW<}8c
zAuj|s9;!4d_;8_0i$>=2kCE9B$LS>jW-ZQM!E5&twva_$A|WB!i&wlq%%AQ`{kSX#
zWpG3<3NCeC%6$usrqFv##$!kxhX$6+XzKAmweA|nD8x~Oz4k0Y5yCDHWIX#J{c8Gh
z=s?Oqc<EisPNJqnO$Gykh<5n#rH@f@h=eD@2I1N=7az#+TGaq!9H8bG9s81-<q<(F
zh*6eh+u1&jGXcEp8rcF|J?v#GzCXwZcmXaiRSaJ@ytJF~s1S0B*<!^(Of3~MBLx6o
zOcF)9zH5Eq8V50`6LXZ87Gb;~Ly$lOOsX<bgrdBZ{6Wo43<3^OVM9#GJW2pEt1C+T
z?|x5@-wijN@be>{L>!1Xy_vL^AX-zh3uuZed7Ug)Wi=3FL#jBHQ!)opP787`@08(E
zK5_(Q$aum_gTZt(Nb=T@KE#K*k-o`qw0a0AL`O2IL<m)=a(7^vEFToPSSpAqq%79L
zMOfo?qyyMSg&L4i<q}p%4!Ui~$~YGHQkfpYF}5J1#G)QT0UZ{c)}Nz;Ir1Y;0h%XG
z78ot!^kh<ABB<7lXzQffm!bf0!O1VP3J$dY;MG>7C$rj5du}>c=qpuv)0!Li{Jvr(
zQ|LvRsi06s`6Y9AM{uboa7V=w&Jm*ZP|w}Xgk+4g1lb`JUPZ?PSs=;Tp(EsC@-Qwi
z3@^IKaxiQd2N!vg3UWN59@!<>6~z-p)l6?+U;n_sK!5vPI(kLvd_@+MbsoPD?4}|D
zc7vs80v$$h+`{F#NgTVn0%AYss1pXcsA|M6H~_7IKVVmgMaMiZ=|!VMB%BQ8(zh;u
zr}fI(p_ae1uSuuK2r_{b1FG5<?0}^-a1O%K&RB)crLh>IcNjUo+i&3vg?(_;;*U~^
zMByJ^AwakrAvAm|HznvtenrPQ#ArZ?YWNOkj3#^!#$XC5h@GU8kQ%>ugj8`N54;d_
z!y%Ip)hEp%b)y5GJmS#-4>u_s`Mf0DKqv})N_)ZnvVbFQLbel9BO2;?P3)A|Mji-U
zfDjYN*C7quMy#fYBL7uDM4_|Qm53&>Y)oWbMHX0U(N`%UDA`z69Qf!=nLn_#tD~+0
z2TFC#1VN|6d9K{W$3EIG4m1}}DpxPgAD8KX(g0V$^OGm#VYHKtHT{@!2m%-+g%m(z
z7P}SyQ%tjc4F8qzypbNsYp4u0&vgrK#q}e@*-{pDqLOo6NSKX{c*Rl{pQ4v7jpSlk
z->hI{ESW3i(2`SLSh94(p{0v2o<6M{YAtMAbAOeOwx3t7209|a9}{qc1B}82GTv!c
z`;Ky%FO<uR_m&$<Sch9AMlT(Wkb$x~KnLIvZIs(<$~-ho`(0ITSZ3?@+g7yR-WF}1
zC^w!%yhqFc^c_0ICzJ3hi2%CA__@PnT#ZKgqcd8!_`Gy57~z66l-<B;{9p16rjXsF
z@y>|@Ohb|8;w-O?<YBb5kzUSuI*~W|6)b=1RG$C(%{TL0X}8<oSoxQg3Oi4YOW!z^
zKYxDl+fl)yt=~+(JGg#(eR_6tZP$a7)tT}2YwOc<vZZs|Ix*$(^{u~6-Hz{(>0Ej}
za!?)anq}i`JzFd9=h*tz1Jlbe;)m0R`FLw>{d+0Cfp6ru@lAY`-_AGlEjYA~^Q}kU
zs;^S^7-J9Zo|~)9gxBt#tlhk~F<GCf&1hSutK0X8bq`P3>+1DgleN*w2WPbn4^D5N
z(7(KUdb&1aeQBmv-LtbgJD1!vv#UD2dtY^KcYS(WeP++>M7?2du1)Qp-cg$|ZyDRT
L;imeI8VvP6&9hOz

delta 416
zcmey+%QWK&V?6^S0|NsWLjwadgMxpszL9ONmlXp8qXtkkEIBu^;7!KcL<R<?6+r&6
z^qk7H{W2Mc85meN7#K2+WTYmhh)?>y9w>JKh|My90vw?%-az&mAXdr9EvWz*1T?P!
zWM)o&a$@c3q(cl0%mqNfX}O6Nx&@4}OgcbGpn(hud5O8H@nJu1GBD(v0a_YbkY8N#
z=BQT?14F(FkpFSw8f9lMu#17NUOVIX`gneuuMFHQK)nnMx9lQgk!j{1%s+s94hANW
zC=h^r>cynMz&TlnF_O_^a}J{o<K!z$;=G%H5-dOnRPfwm@(-rPj0}@EFi!*O+Z@Ak
zG-I-6;}et2<ovwipw#rzoW!C~Pq+NM60isoGc2{JI5R&_!BEctDmvM*DUdO9^5iCE
y@l1wfhJ1!RhGK?L22TbzFuQ~ybMo0HZJ>&uO)D6^CNFB9ve~D_l8F`MSOx%|F>nO{

diff --git a/EssentialUIKit.UWP/EssentialUIKit.UWP.csproj b/EssentialUIKit.UWP/EssentialUIKit.UWP.csproj
index 79e634e..fb4c193 100644
--- a/EssentialUIKit.UWP/EssentialUIKit.UWP.csproj
+++ b/EssentialUIKit.UWP/EssentialUIKit.UWP.csproj
@@ -157,6 +157,7 @@
     <Content Include="scale-100\ReSchedule.png" />
     <Content Include="scale-100\TimeZone.png" />
     <Content Include="scale-100\ViewMode.png" />
+    <Content Include="scale-100\Visa.png" />
   </ItemGroup>
   <ItemGroup>
     <ApplicationDefinition Include="App.xaml">
@@ -194,6 +195,9 @@
       <Version>17.4.0.44</Version>
     </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfComboBox" Version="17.4.0.44" />
+    <PackageReference Include="Syncfusion.Xamarin.SfGauge">
+      <Version>17.4.0.44</Version>
+    </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfMaps" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfParallaxView">
       <Version>17.4.0.44</Version>
@@ -210,7 +214,7 @@
     <PackageReference Include="Syncfusion.Xamarin.SfTabView">
       <Version>17.4.0.44</Version>
     </PackageReference>
-    <PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
+    <PackageReference Include="Xamarin.Forms" Version="4.3.0.991250" />
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.1.5" />
   </ItemGroup>
   <ItemGroup>
@@ -220,11 +224,11 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
-    <Content Include="Assets\UIFontIcons.ttf" />
     <Content Include="Assets\Montserrat-Bold.ttf" />
     <Content Include="Assets\Montserrat-Medium.ttf" />
     <Content Include="Assets\Montserrat-Regular.ttf" />
     <Content Include="Assets\Montserrat-SemiBold.ttf" />
+    <Content Include="Assets\UIFontIcons.ttf" />
     <None Include="EssentialUIKit.UWP_TemporaryKey.pfx" />
   </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
diff --git a/EssentialUIKit.UWP/scale-100/Visa.png b/EssentialUIKit.UWP/scale-100/Visa.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ea8f9e7ebd39fc563c617222a89b21d6b8f760e
GIT binary patch
literal 897
zcmV-{1AhF8P)<h;3K|Lk000e1NJLTq001oj000jN1^@s6aDGOo00001b5ch_0Itp)
z=>Px&J4r-AR7eetmRo4fVI0Tb*V#78DW@!lG>4M3F-mhNF1V1ym2e@E!kw6q<Zywe
z#?2%b%2E^;i;1L7Zk#EnWXzVetmQa1pYQuVzqj9>_Z@!q-S7MR{=U!i{twUd{Fm(N
z>e`-2B$k5yz{d-UeaU39$&2_GQtxrvSv=>^ucGAzy$-G1JoE;_H-Y6~5*Q6W0sY1)
zycfxtz(0;+H<%2Pp|J{IYv73lromtv_yBwy&zJ(CS?vs+@X26=(?pNiICu$YlGsBW
zF|TEOH95R`u-SoeIQZ=b)O#2D5b)jgud7d8<}}fbK_3f`FIYF)AybHT(Qiz#MwBye
zx0fHl<8Pt9@3a{V?Ct6`aKDUBhu&1@5q%cw)#Q<ZEA0aLpdZi@Sr6)fk1f7%yu|VD
zl#4tZ-Qjd|px3)zBfO7#<O-*Y4h{N+NbmWF)AJPIZ*yaAIsQ>|D!M)Cw3Mg~+0rZ#
z1{aY^O(a+GW`2d*Kj~(-VH%uY^cwT*0DU9f%C(Teq0n1DU=8vp#%Y6Q2aN&X8?ZPb
z7sWvn$XfS>HX8ok^=>+SBD#NaW_u1<U_Q%ekIg_n3H0Rs9$RVNtc<Z1Slov60`E*9
zU$H@Oojg7&t*1<*6f}54;6KSa0#gAm3%aFZH7K5%Kt7aq=lDx=r!%(0m$+JVnGJ)_
ziF#YDXPJIJ*b6k558X`a947mt)Hbp%`m7sp!{*G&n2McI^q#BV!ZUjTzQOfG7iUcv
z1bP#IHn0yJi(`O4247O24|qtn_zba+P4}Onq2<tO&M52H$^^ZmQGbk@Xxg}0fv)9d
z@deTs>^I>*a#8BYif3l`>jR(-6)*e_v@?<4pB!zBZ4CVy=IDf925&$C&|8=fEbau7
z`WTt`k374_K0mlQ$6Z&)1Ms|dzIyek^MG#rZ_!M1JXjN%%Bkl?c;q}4@ik;>O!}W9
zjzt+m`r>pv`Xi}IeY7Ir*QlRIH**P03tqomzM>D3?gOn7SlrFMsKW?cE1<nYnR?Z{
z{w|x4zCOvBV+;P2{uA}-4I|A3g+QO|cA#bQ0M9G3JX)Swf_5D(^s-I}eA*u~f#Sy>
XcjEVWD%Z6900000NkvXXu0mjfC=|4#

literal 0
HcmV?d00001

diff --git a/EssentialUIKit.iOS/AppDelegate.cs b/EssentialUIKit.iOS/AppDelegate.cs
index a8979d2..bdf0a51 100644
--- a/EssentialUIKit.iOS/AppDelegate.cs
+++ b/EssentialUIKit.iOS/AppDelegate.cs
@@ -16,7 +16,9 @@
 using Syncfusion.XForms.iOS.PopupLayout;
 using Syncfusion.XForms.iOS.ProgressBar;
 using Syncfusion.XForms.iOS.TabView;
+using Syncfusion.SfGauge.XForms.iOS;
 using UIKit;
+using Xamarin.Forms;
 
 namespace EssentialUIKit.iOS
 {
@@ -33,6 +35,7 @@ public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsAppli
         // You have 17 seconds to return from this method, or iOS will terminate your application.
         public override bool FinishedLaunching(UIApplication app, NSDictionary options)
         {
+            Forms.SetFlags("CollectionView_Experimental");
             global::Xamarin.Forms.Forms.Init();
             this.LoadApplication(new App());
             SfButtonRenderer.Init();
@@ -54,7 +57,8 @@ public override bool FinishedLaunching(UIApplication app, NSDictionary options)
             SfTabViewRenderer.Init();
             SfCalendarRenderer.Init();
             SfLinearProgressBarRenderer.Init();
-            SfChartRenderer.Init();     
+            SfChartRenderer.Init();
+            SfGaugeRenderer.Init();
 
             ////UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
             ////if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
diff --git a/EssentialUIKit.iOS/EssentialUIKit.iOS.csproj b/EssentialUIKit.iOS/EssentialUIKit.iOS.csproj
index 73ef08f..ae21051 100644
--- a/EssentialUIKit.iOS/EssentialUIKit.iOS.csproj
+++ b/EssentialUIKit.iOS/EssentialUIKit.iOS.csproj
@@ -118,10 +118,10 @@
     <BundleResource Include="Resources\Montserrat-Medium.ttf" />
     <BundleResource Include="Resources\Montserrat-Regular.ttf" />
     <BundleResource Include="Resources\Montserrat-SemiBold.ttf" />
+    <Compile Include="Renderers\CalenderDatePickerRenderer.cs" />
     <BundleResource Include="Resources\UIFontIcons.ttf">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </BundleResource>
-    <Compile Include="Renderers\CalenderDatePickerRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">
@@ -160,6 +160,9 @@
       <Version>17.4.0.44</Version>
     </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfComboBox" Version="17.4.0.44" />
+    <PackageReference Include="Syncfusion.Xamarin.SfGauge">
+      <Version>17.4.0.44</Version>
+    </PackageReference>
     <PackageReference Include="Syncfusion.Xamarin.SfMaps" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfParallaxView">
       <Version>17.4.0.44</Version>
@@ -176,7 +179,7 @@
     <PackageReference Include="Syncfusion.Xamarin.SfTabView">
       <Version>17.4.0.44</Version>
     </PackageReference>
-    <PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
+    <PackageReference Include="Xamarin.Forms" Version="4.3.0.991250" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
@@ -420,6 +423,9 @@
   <ItemGroup>
     <BundleResource Include="Resources\ViewMode.png" />
   </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\Visa.png" />
+  </ItemGroup>
   <Import Project="..\build\tools\Syncfusion.CodeAnalysis.StyleCop\tools\StyleCop.MsBuild.targets" Condition="Exists('..\build\tools\Syncfusion.CodeAnalysis.StyleCop\tools\StyleCop.MsBuild.targets')" />
   <Target Name="_VerifyBuildSignature" />
   <Target Name="BeforeBuild" Condition=" $(SetVersion) == true ">
diff --git a/EssentialUIKit.iOS/Resources/UIFontIcons.ttf b/EssentialUIKit.iOS/Resources/UIFontIcons.ttf
index bc9d5030f71ac95feafe9594efdb04785d244e28..443072d2f033f18f08c9f1e67626f92e107ca1ce 100644
GIT binary patch
delta 5163
zcmai2dyHIF89(Qq`<}UT=XGahpLZwIWh$i|WHQ|;P^O5q6kEEqyKMvnhIZO5-Q5{>
zmrxqx)c8+DOiIScl4w#wz#6KM)X+*WEQu&lVrybTAsVV;z(iw%78=7&{e9=ol+q&H
zdEI-S-{bfDzVFQZJN(Rdl_ukiF`MmYf(>ojQn+UI)U7u&#+RaX>-MQ?<DdWj*IkS$
zf57t}cTGOL^QY$z{)sUaZC`(VqE_9J35zGucM_kK6KF8U)vdTcg3pqPskyylxWRh+
z@fn+}Z?8W2!2;G2&!h3kRCVw22ESjq3Y{hzhNi1iweu_If6mx9A%HU8sL#%A``shY
zG4?GiAnK1D$=x(AC5F_Ab%(xrk9+-D7E&>nvA6cUO*>!s73ah`Jeo|QR$Qd%xH7~-
ztvLTG-*R-4U(Z_y`BkmMO4@l1ohn`!^zN3{>&jE!t?Vmo1KY@MW1HA0yPa)jTi95u
zA-<m~jh3DnSt!4_>d|ZWU-!)FD_7rt!<rj*9yQfhCz`Yg6EBNNG70xZ!FBZk?nerS
z@48B^fZL)Q34SYnzGAonAERKn5&j>}xzgX?-`CsQlgXr0sbn%9*ECfX3OW>3Xqv9;
zreT>@C={|owq<igXu3(yVJ8xC-DW5pcH%KjH%!yELm?*|aomWDMhE>EfGZk}rc(Hh
z(G`y;;)z5e=?@NK<DMRD>m?KMSk#R;;jnF)x~{1Lf?<JB*tYGS-oAcxg>2K%<(62`
ziA1AV2=kgT%yb<&Q4`9~LJ&d-&47du(2d2g6~rPb!{IP)Fu=Af)5L1fQ3zGl5>aeU
zyN4{xFf>(B6t2+r7>t3CM^$Kw0nwy!U>z>k(2b_1X+lVQsW25;AmT=$WisJ;UMiJN
zr!r}}G7yZc5`iA7WrxEsPSi9ET2eTqod&Iis&^!(HQ?E<dk-+MB;o2_%=07JN~9Dk
z6(ZSuw(073U<pWo3yQ-L@Puhuw(?p>Puk*B`rALayZztJ5U~ed#w5#HJVM`i&<zp{
zmH-fhO6$@H)3*3uI|jrERc(^$jm{Vrl3+Y27Qk);Ps;%5J?uN|S@v5##$SgzBA3Vs
zyzo8j`Py~7q63P?r{3x#A2)yEKL2rhQy=lQVny>K1Kj0)9N$*9ps(hYa4}u1sHKrS
z?ww+~;`n;r9RxM3L^e?gl?qW<&=mzE=Q_f;<({GP(7k?naK}yjIG|4&Yq|=<!Pgvy
zRq;sPSCqpScQ-HZKYelk<=u_X?*7E;pFg{KiEv-zT+<94RIx*V0&XBRftFlJ%K`AZ
zb_4JZW<w)119KXITwi?JHcX+B%ZU~m7)`tn(Hfv6ND=S_(`exY7S@_z5V6e$w=A&5
z(4Ga4h-1VT0v?ydvt=*#6N;*-HlftIjlaJcxF=o#ewswE8o&?>B)tIw9>JLc3)o8x
z#VrLE7XSwuO>+=B>hP1o+I#td?&nc*6{*}B{bE1X{rJbTuDPi1GoPA6<aSuiB4$by
z5D_RO8j#ABmW6%>BBF{`C}NSI;Igf%T)~6pU?7brQ<F6U+hV*P!WtwxrUF#xKo?m(
zE(0AlRGJh}tS~tPs}rXYg2SC>GPyJg1zN|9%ZS!4^H((thRG}$Xk&1KAwwtFEOb@G
zDF~8tD9&}HL0C7@1p#C<BynL_rrjsWyrBFNWL^gn|Ad_Yfs3WwuoqC)sDQWlD&bMr
zg4^zM(3nTG(u);6CP!TSzz?22-F~mNaAT%*X2NKlxY4@!S5e;he_hQV1FvLg=wTTo
zx6pN%2A5^&x@cEEyPv;P9xDeB2z*LRZ(Q1N*@)BK5t48;=RylHkQy$V^SP_0+VANd
zEjmK;!HybOG*Ii(A<fWbV}gPM<;NO?T+}i==lQ%?;iX(YH=J_^{dlpGF346lv5Xhe
zm1Gfq5(O(K*4%j~#|!Va;UbeFcOw;2G6bQ6Ku;J2M1c<&-fkknMPrGimr7?cJ-t12
zrPH35K-M6*fgm6r(DcL;D;^=c5Ldufpq21SJf^h?g?57ANrvqvnjr2Fy(}wDl|u|K
zyh$z(WdinWW_kg5h^VXx<i6{Lt^+P?gbio}RKXHUQDYzld#G)Y=EJtcI^v3DJCPU!
z%Q#qF7Ae`GAwGq|BhdVUY)}S~Po@OJaGR7SAv>uP3a3+4Q=l?JA_b{p7L^YHW1)2t
z6#(`O*@9{c&<GbwwWn}5%wAz^*vOA?S3yn!iwedvWU!Io5ot_G8+liOyQp3F?Fvu3
z!t<Nplkf#dRVoNxQA!0n=NjpX>6<*y^YD7XauqSU<ozY>l@tPnm?v~nu<j<adCF!8
zLhDE@MLjM{9$}3w8H*zv!zYG*tTW`ooZ~22$f(W8s<S%gsrm{ENKpKP4=5DjW<}8c
zAuj|s9;!4d_;8_0i$>=2kCE9B$LS>jW-ZQM!E5&twva_$A|WB!i&wlq%%AQ`{kSX#
zWpG3<3NCeC%6$usrqFv##$!kxhX$6+XzKAmweA|nD8x~Oz4k0Y5yCDHWIX#J{c8Gh
z=s?Oqc<EisPNJqnO$Gykh<5n#rH@f@h=eD@2I1N=7az#+TGaq!9H8bG9s81-<q<(F
zh*6eh+u1&jGXcEp8rcF|J?v#GzCXwZcmXaiRSaJ@ytJF~s1S0B*<!^(Of3~MBLx6o
zOcF)9zH5Eq8V50`6LXZ87Gb;~Ly$lOOsX<bgrdBZ{6Wo43<3^OVM9#GJW2pEt1C+T
z?|x5@-wijN@be>{L>!1Xy_vL^AX-zh3uuZed7Ug)Wi=3FL#jBHQ!)opP787`@08(E
zK5_(Q$aum_gTZt(Nb=T@KE#K*k-o`qw0a0AL`O2IL<m)=a(7^vEFToPSSpAqq%79L
zMOfo?qyyMSg&L4i<q}p%4!Ui~$~YGHQkfpYF}5J1#G)QT0UZ{c)}Nz;Ir1Y;0h%XG
z78ot!^kh<ABB<7lXzQffm!bf0!O1VP3J$dY;MG>7C$rj5du}>c=qpuv)0!Li{Jvr(
zQ|LvRsi06s`6Y9AM{uboa7V=w&Jm*ZP|w}Xgk+4g1lb`JUPZ?PSs=;Tp(EsC@-Qwi
z3@^IKaxiQd2N!vg3UWN59@!<>6~z-p)l6?+U;n_sK!5vPI(kLvd_@+MbsoPD?4}|D
zc7vs80v$$h+`{F#NgTVn0%AYss1pXcsA|M6H~_7IKVVmgMaMiZ=|!VMB%BQ8(zh;u
zr}fI(p_ae1uSuuK2r_{b1FG5<?0}^-a1O%K&RB)crLh>IcNjUo+i&3vg?(_;;*U~^
zMByJ^AwakrAvAm|HznvtenrPQ#ArZ?YWNOkj3#^!#$XC5h@GU8kQ%>ugj8`N54;d_
z!y%Ip)hEp%b)y5GJmS#-4>u_s`Mf0DKqv})N_)ZnvVbFQLbel9BO2;?P3)A|Mji-U
zfDjYN*C7quMy#fYBL7uDM4_|Qm53&>Y)oWbMHX0U(N`%UDA`z69Qf!=nLn_#tD~+0
z2TFC#1VN|6d9K{W$3EIG4m1}}DpxPgAD8KX(g0V$^OGm#VYHKtHT{@!2m%-+g%m(z
z7P}SyQ%tjc4F8qzypbNsYp4u0&vgrK#q}e@*-{pDqLOo6NSKX{c*Rl{pQ4v7jpSlk
z->hI{ESW3i(2`SLSh94(p{0v2o<6M{YAtMAbAOeOwx3t7209|a9}{qc1B}82GTv!c
z`;Ky%FO<uR_m&$<Sch9AMlT(Wkb$x~KnLIvZIs(<$~-ho`(0ITSZ3?@+g7yR-WF}1
zC^w!%yhqFc^c_0ICzJ3hi2%CA__@PnT#ZKgqcd8!_`Gy57~z66l-<B;{9p16rjXsF
z@y>|@Ohb|8;w-O?<YBb5kzUSuI*~W|6)b=1RG$C(%{TL0X}8<oSoxQg3Oi4YOW!z^
zKYxDl+fl)yt=~+(JGg#(eR_6tZP$a7)tT}2YwOc<vZZs|Ix*$(^{u~6-Hz{(>0Ej}
za!?)anq}i`JzFd9=h*tz1Jlbe;)m0R`FLw>{d+0Cfp6ru@lAY`-_AGlEjYA~^Q}kU
zs;^S^7-J9Zo|~)9gxBt#tlhk~F<GCf&1hSutK0X8bq`P3>+1DgleN*w2WPbn4^D5N
z(7(KUdb&1aeQBmv-LtbgJD1!vv#UD2dtY^KcYS(WeP++>M7?2du1)Qp-cg$|ZyDRT
L;imeI8VvP6&9hOz

delta 416
zcmey+%QWK&V?6^S0|NsWLjwadgMxpszL9ONmlXp8qXtkkEIBu^;7!KcL<R<?6+r&6
z^qk7H{W2Mc85meN7#K2+WTYmhh)?>y9w>JKh|My90vw?%-az&mAXdr9EvWz*1T?P!
zWM)o&a$@c3q(cl0%mqNfX}O6Nx&@4}OgcbGpn(hud5O8H@nJu1GBD(v0a_YbkY8N#
z=BQT?14F(FkpFSw8f9lMu#17NUOVIX`gneuuMFHQK)nnMx9lQgk!j{1%s+s94hANW
zC=h^r>cynMz&TlnF_O_^a}J{o<K!z$;=G%H5-dOnRPfwm@(-rPj0}@EFi!*O+Z@Ak
zG-I-6;}et2<ovwipw#rzoW!C~Pq+NM60isoGc2{JI5R&_!BEctDmvM*DUdO9^5iCE
y@l1wfhJ1!RhGK?L22TbzFuQ~ybMo0HZJ>&uO)D6^CNFB9ve~D_l8F`MSOx%|F>nO{

diff --git a/EssentialUIKit.iOS/Resources/Visa.png b/EssentialUIKit.iOS/Resources/Visa.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ea8f9e7ebd39fc563c617222a89b21d6b8f760e
GIT binary patch
literal 897
zcmV-{1AhF8P)<h;3K|Lk000e1NJLTq001oj000jN1^@s6aDGOo00001b5ch_0Itp)
z=>Px&J4r-AR7eetmRo4fVI0Tb*V#78DW@!lG>4M3F-mhNF1V1ym2e@E!kw6q<Zywe
z#?2%b%2E^;i;1L7Zk#EnWXzVetmQa1pYQuVzqj9>_Z@!q-S7MR{=U!i{twUd{Fm(N
z>e`-2B$k5yz{d-UeaU39$&2_GQtxrvSv=>^ucGAzy$-G1JoE;_H-Y6~5*Q6W0sY1)
zycfxtz(0;+H<%2Pp|J{IYv73lromtv_yBwy&zJ(CS?vs+@X26=(?pNiICu$YlGsBW
zF|TEOH95R`u-SoeIQZ=b)O#2D5b)jgud7d8<}}fbK_3f`FIYF)AybHT(Qiz#MwBye
zx0fHl<8Pt9@3a{V?Ct6`aKDUBhu&1@5q%cw)#Q<ZEA0aLpdZi@Sr6)fk1f7%yu|VD
zl#4tZ-Qjd|px3)zBfO7#<O-*Y4h{N+NbmWF)AJPIZ*yaAIsQ>|D!M)Cw3Mg~+0rZ#
z1{aY^O(a+GW`2d*Kj~(-VH%uY^cwT*0DU9f%C(Teq0n1DU=8vp#%Y6Q2aN&X8?ZPb
z7sWvn$XfS>HX8ok^=>+SBD#NaW_u1<U_Q%ekIg_n3H0Rs9$RVNtc<Z1Slov60`E*9
zU$H@Oojg7&t*1<*6f}54;6KSa0#gAm3%aFZH7K5%Kt7aq=lDx=r!%(0m$+JVnGJ)_
ziF#YDXPJIJ*b6k558X`a947mt)Hbp%`m7sp!{*G&n2McI^q#BV!ZUjTzQOfG7iUcv
z1bP#IHn0yJi(`O4247O24|qtn_zba+P4}Onq2<tO&M52H$^^ZmQGbk@Xxg}0fv)9d
z@deTs>^I>*a#8BYif3l`>jR(-6)*e_v@?<4pB!zBZ4CVy=IDf925&$C&|8=fEbau7
z`WTt`k374_K0mlQ$6Z&)1Ms|dzIyek^MG#rZ_!M1JXjN%%Bkl?c;q}4@ik;>O!}W9
zjzt+m`r>pv`Xi}IeY7Ir*QlRIH**P03tqomzM>D3?gOn7SlrFMsKW?cE1<nYnR?Z{
z{w|x4zCOvBV+;P2{uA}-4I|A3g+QO|cA#bQ0M9G3JX)Swf_5D(^s-I}eA*u~f#Sy>
XcjEVWD%Z6900000NkvXXu0mjfC=|4#

literal 0
HcmV?d00001

diff --git a/EssentialUIKit/AppLayout/TemplateList.xml b/EssentialUIKit/AppLayout/TemplateList.xml
index d1ea381..94ebddc 100644
--- a/EssentialUIKit/AppLayout/TemplateList.xml
+++ b/EssentialUIKit/AppLayout/TemplateList.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Samples>
 
-  <Category Icon="log-in.png" Name="Forms" Description="Get the user’s details to authenticate, create a profile, and enter credit card information for online payment portal.">
+  <Category Icon="log-in.png" Name="Forms" IsUpdated="True" Description="Get the user’s details to authenticate, create a profile, and enter credit card information for online payment portal.">
     <Page Name="Simple Login Page" Description="If you want a simple and clean authentication form, just add this page to your application. Email validation is done within this form." PageName="Views.Forms.SimpleLoginPage"/>
     <Page Name="Simple Sign Up Page" Description="This is a supporting form for a simple login page that can be modified to match any of your login pages on the fly. Email validation is done in this form." PageName="Views.Forms.SimpleSignUpPage"/>
     <Page Name="Simple Reset Password Page" Description="This page is used for resetting a password with existing credentials or signing up if the user doesn’t have credentials yet." PageName="Views.Forms.SimpleResetPasswordPage"/>
@@ -15,23 +15,31 @@
     <Page Name="Add Card Page" Description="This page allows users to enter their credit card information to be used in an online payment portal." PageName="Views.Forms.AddCardPage"/>
     <Page Name="Add Profile Page" Description="This page allows users to add a new entry to their contacts with additional information such as name and phone number." PageName="Views.Forms.AddProfilePage"/>
     <Page Name="Business Registration Form Page"  Description="This page allows users to add business details such as name, email address, and phone number." PageName="Views.Forms.BusinessRegistrationFormPage"/>
+    <Page Name="Login with Social Icon Page" IsNew="True" Description="Add this page to your application if you want a login page with social network icons. Email validation is done within the form." PageName="Views.Forms.LoginWithSocialIconPage"/> 
   </Category>
 
-  <Category Icon="catalog.png" Name="Catalog" Description="Let the users select from the list of items that includes titles, brief descriptions, and photos.">
+  <Category Icon="catalog.png" Name="Catalog" IsUpdated="True" Description="Let the users select from the list of items that includes titles, brief descriptions, and photos.">
     <Page Name="Category Tile Page" Description="Displaying an image with a title is a scenario in most applications, and this page categorizes product images and provides a title for the category." PageName="Views.Catalog.CategoryTilePage"/>
     <Page Name="Catalog Tile Page" Description="In any e-commerce application, showcasing a product with a rating and other details is mandatory. This page showcases a set of products with a short description, price, and user rating. " PageName="Views.Catalog.CatalogTilePage"/>
     <Page Name="Catalog List Page" Description="Displaying an image with some information is a scenario in many applications, and this page showcases product images with their titles, prices, and discounted prices." PageName="Views.Catalog.CatalogListPage"/>
     <Page Name="Article List Page" Description="This page displays featured articles with a rotator on top and the remaining stories displayed as a list. Each list card carries the image, title, author name, created date, and estimated time to read the article." PageName="Views.Catalog.ArticleListPage"/>
     <Page Name="Article Tile Page" Description="This page displays featured articles with a rotator on top and the remaining stories displayed as tiles. Each tile card contains the image, title, author name, created date, and estimated time to read the article." PageName="Views.Catalog.ArticleTilePage"/>
     <Page Name="Product Home Page" Description="This page displays featured articles with a rotator at the top and the remaining stories displayed as tiles. Each tile card contains an image, title, author’s name, created date, and estimated time to read the article." PageName="Views.Catalog.ProductHomePage"/>
+    <Page Name="Event List Page" IsNew="True" Description="This page shows a list of events in a tabbed view with different sections for displaying the name of the event, the event month and date, and the venue for the event." PageName="Views.Catalog.EventListPage"/>
+    <Page Name="Article Card Page" IsNew="True" Description="This page shows articles as cards containing a picture, title, author, publication date, and time needed to read the article." PageName="Views.Catalog.ArticleCardPage"/>
+    <Page Name="Navigation Travel Page" IsNew="True" Description="This page shows a card view of travel destinations, plus top locations and the best places." PageName="Views.Catalog.NavigationTravelPage"/>
   </Category>
 
-  <Category Icon="detail.png" Name="Detail" Description="Display detailed and relevant information with random layouts.">
+  <Category Icon="detail.png" IsUpdated="True" Name="Detail" Description="Display detailed and relevant information with random layouts.">
     <Page Name="Product Detail Page"  Description="This page showcases the complete details of a product with a rotator control to provide different images of the product, available size variants, product description, price, discount, and reviews." PageName="Views.Detail.DetailPage"/>
     <Page Name="Feedback Detail Page" Description="This page displays the full-page product image and user feedback consisting of a short description and rating." PageName="Views.Detail.FeedbackDetailPage"/>
     <Page Name="Article Detail Page"  Description="This page displays an article with the title, image, and text." PageName="Views.Detail.ArticleDetailPage"/>
+    <Page Name="Event Detail Page" IsNew="True" Description="This page shows event details, featuring a picture, event name, venue, time, and an option to join the event." PageName="Views.Detail.EventDetailPage"/>
+    <Page Name="Data Table Page" IsNew="True" Description="This page shows a table of all teams playing, their rankings, the number of players, and how many points each team has. It also shows the team win/loss record as well." PageName="Views.Detail.DataTablePage"/>
+    <Page Name="My Address Page" IsNew="True"  Description="This page displays saved address." PageName="Views.Detail.MyAddressPage"/>
+    <Page Name="Room Booking Page" IsNew="True" Description="This page displays resort images in a rotator and allows users to pick dates, the number of guests, and the number of beds in a combo box. The page also allows users to select the price for one night, choose a resort location, and view customer feedback." PageName="Views.Detail.RoomBookingPage"/>
   </Category>
-
+  
   <Category Icon="chat.png" Name="Chat" Description="Exchange messages with users or customers inside your app and manage multiple conversations at once.">
     <Page Name="Recent Chat Page" Description="This page displays a recent conversation in a chat application. The neatly designed page allows you to access the chat information of a user by tapping the user history." PageName="Views.Chat.RecentChatPage" />
     <Page Name="Chat Conversation Page" Description="This page displays a recent conversation with a contact in a chat application. The page provides options to send files, images, or any other attachments as well as text messages." PageName="Views.Chat.ChatMessagePage" />
@@ -63,17 +71,20 @@
     <Page Name="Navigation List Card Page" Description="This page displays items in a list. Each card carries an image, description, and the overall rating of an item. " PageName="Views.Navigation.NavigationListCardPage"/>
     <Page Name="Navigation Tile Card Page" Description="This page displays items in a tile layout. Each tile contains an image, description, and the overall rating of an item." PageName="Views.Navigation.NavigationTileCardPage"/>
     <Page Name="Songs Page"  Description="This page displays items in a tile layout. Each tile contains an image, the name of a song, and its composer." PageName="Views.Navigation.SongsPage"/>
-    <Page Name="FAQs Page" IsNew="True" Description="This page displays items in an expander layout. Each item contains a question and answer for a  FAQ section." PageName="Views.Navigation.FAQPage"/>
-    <Page Name="Contacts List" IsNew="True" Description="This page displays a list of contacts and avatars." PageName="Views.Navigation.ContactsPage"/>
-    <Page Name="Songs Play List" IsNew="True" Description="This page displays items in a tile layout. Each tile contains the name of a song and its composer, and a menu icon." PageName="Views.Navigation.SongsPlayListPage"/>
-    <Page Name="Movies List" IsNew="True" Description="This page displays items in a tile layout. Each tile contains the name, year of release, and ratings of a movie." PageName="Views.Navigation.MoviesListPage"/>
-    <Page Name="Names List" IsNew="True" Description="This page displays group names as a list." PageName="Views.Navigation.NamesListPage"/>
-    <Page Name="Restaurant Page" IsNew="True" Description="This page displays Restaurant lists, items description, Offers and an overall rating." PageName="Views.Navigation.RestaurantPage"/>
-    <Page Name="Icon Names List " IsNew="True" Description="The icon names list page displays contact lists with icons and a Next option." PageName="Views.Navigation.IconNamesListPage"/>
-    <Page Name="Suggestion Page" IsNew="True" Description="A suggestion page shows profile names, profile IDs, and an option to let viewers follow accounts." PageName="Views.Navigation.SuggestionPage"/>
-    <Page Name="App Usage Page" IsNew="True" Description="This page shows the usage of apps, displaying the app names, progress bars, and progress bar values." PageName="Views.Navigation.AppUsagePage"/>
-    <Page Name="Documents List Page" IsNew="True" Description="This page shows a list of documents, displaying the name of the document, the size of the document, and the time it was last updated." PageName="Views.Navigation.DocumentsListPage"/>
-    <Page Name="Selectable Name Page " IsNew="True" Description="This page shows a selectable list of names with grouping." PageName="Views.Navigation.SelectableNamePage"/>
+    <Page Name="FAQs Page" Description="This page displays items in an expander layout. Each item contains a question and answer for a  FAQ section." PageName="Views.Navigation.FAQPage"/>
+    <Page Name="Contacts List" Description="This page displays a list of contacts and avatars." PageName="Views.Navigation.ContactsPage"/>
+    <Page Name="Songs Play List" Description="This page displays items in a tile layout. Each tile contains the name of a song and its composer, and a menu icon." PageName="Views.Navigation.SongsPlayListPage"/>
+    <Page Name="Movies List" Description="This page displays items in a tile layout. Each tile contains the name, year of release, and ratings of a movie." PageName="Views.Navigation.MoviesListPage"/>
+    <Page Name="Names List" Description="This page displays group names as a list." PageName="Views.Navigation.NamesListPage"/>
+    <Page Name="Restaurant Page" Description="This page displays Restaurant lists, items description, Offers and an overall rating." PageName="Views.Navigation.RestaurantPage"/>
+    <Page Name="Icon Names List " Description="The icon names list page displays contact lists with icons and a Next option." PageName="Views.Navigation.IconNamesListPage"/>
+    <Page Name="Suggestion Page" Description="A suggestion page shows profile names, profile IDs, and an option to let viewers follow accounts." PageName="Views.Navigation.SuggestionPage"/>
+    <Page Name="App Usage Page" Description="This page shows the usage of apps, displaying the app names, progress bars, and progress bar values." PageName="Views.Navigation.AppUsagePage"/>
+    <Page Name="Documents List Page" Description="This page shows a list of documents, displaying the name of the document, the size of the document, and the time it was last updated." PageName="Views.Navigation.DocumentsListPage"/>
+    <Page Name="Selectable Name Page " Description="This page shows a selectable list of names with grouping." PageName="Views.Navigation.SelectableNamePage"/>
+    <Page Name="Movies Page " IsNew="True" Description="This page shows a list of movies organized by now showing, trailers, and upcoming releases." PageName="Views.Navigation.MoviesPage"/>
+    <Page Name="File Explorer List Page" IsNew="True" Description="This page displays files, folders, folder names, and information such as date, time, and the number of items in folders." PageName="Views.Navigation.FileExploreListPage"/>
+    <Page Name="File Explorer Grid Page" IsNew="True" Description="This page shows a list of folders in a grid view that includes the name of the folder and the number of items in it." PageName="Views.Navigation.FileExploreGridPage"/>
   </Category>
 
   <Category Icon="on-boarding.png" Name="Onboarding" Description="Get your users started with a new app or experience with step-by--step instructions.">
@@ -94,12 +105,13 @@
     <Page Name="Something Went Wrong Page" Description="This page is used to show when an error occurs, but the actual error is undetermined." PageName="Views.ErrorAndEmpty.SomethingWentWrongPage"/>
   </Category>
   
-  <Category Icon="transaction.png" Name="Transaction" Description="Pages for communicating the status of a purchase through an online shop to the user. This category includes pages for successful payments and payment failures.">
+  <Category Icon="transaction.png" IsUpdated="True" Name="Transaction" Description="Pages for communicating the status of a purchase through an online shop to the user. This category includes pages for successful payments and payment failures.">
     <Page Name="Checkout Page" Description="This page provides options to choose between different addresses to deliver a product to and receives payment information from the user. " PageName="Views.Transaction.CheckoutPage"/>
     <Page Name="Payment Success Page"  Description="This page notifies users about their successful payments." PageName="Views.Transaction.PaymentSuccessPage"/>
     <Page Name="Payment Failure Page"  Description="This page notifies users about their failed payments." PageName="Views.Transaction.PaymentFailurePage"/>
     <Page Name="Delivery Page" Description="View delivery information like address and price details" PageName="Views.Transaction.DeliveryPage" Platform="UWP"/>
     <Page Name="Payment Page" Description="View card and payment details" PageName="Views.Transaction.PaymentPage" Platform="UWP"/>
+    <Page Name="Saved Cards Page" IsNew="True" Description="This page displays saved cards." PageName="Views.Transaction.MyCardsPage" />
   </Category>
   
   <Category Icon="bookmark.png" Name="Bookmark" Description="Interfaces for users to save shopping items, articles, or pages they’d like to return to later. Users can add or remove items they’ve saved as needed.">
@@ -113,26 +125,32 @@
     <Page Name="My Orders Page" Description="This page displays the list of the user’s recent orders." PageName="Views.History.MyOrdersPage"/>
   </Category>
 
-  <Category Icon="social.png" Name="Social" Description="Layouts for social media profile pages with different features, such as follower counts, profile pictures, biographical information, and related profiles.">
+  <Category Icon="social.png" IsUpdated="True" Name="Social" Description="Layouts for social media profile pages with different features, such as follower counts, profile pictures, biographical information, and related profiles.">
     <Page Name="Social Profile with Connections Page" Description="This page displays a social media profile page with links to other profiles that the user may be interested in." PageName="Views.Social.SocialProfileWithConnectionsPage"/>
     <Page Name="Social Profile with Card Page" Description="This page displays a social media profile with a user’s image, location, and biographical information presented on a card." PageName="Views.Social.SocialProfileWithCardPage"/>
     <Page Name="Social Profile with Interest Page" Description="This page displays a social media profile with a user’s image, location, interests, and biographical information presented on a card." PageName="Views.Social.SocialProfileWithInterestsPage"/>
+    <Page Name="Social Profile with Message Page" IsNew="True" Description="This page displays a social media profile page with links to other profiles that may be of interest to the user. It also features follow and message buttons, plus profile background images." PageName="Views.Social.SocialProfileWithMessagePage"/>
   </Category>
 
-  <Category Icon="profile.png" Name="Profile" Description="Display various user profiles related to an article, chat user, and more.">
+  <Category Icon="profile.png" IsUpdated="True" Name="Profile" Description="Display various user profiles related to an article, chat user, and more.">
     <Page Name="Author Profile Page" Description="This page displays the author’s profile image and name, which can be edited by the author. A night mode switch is present to provide an effective reading display in dark settings." PageName="Views.Profile.ProfilePage"/>
     <Page Name="Contacts Page" Description="This page displays a contact’s profile in a chat application. It displays the contact’s profile picture, mail ID, contact number, and recent media files that have been shared with that contact. " PageName="Views.Profile.ContactProfilePage" />
     <Page Name="Chat Profile Page" Description="This page displays the user’s profile in a chat application. It displays their profile picture, mail ID, contact number, notifications, and help options. " PageName="Views.Profile.ChatProfilePage" />
     <Page Name="Master Page" Description="This page displays an interactive burger menu of article pages. If you are working with a master-details page for articles, this page will be the master page for navigating across the application." PageName="Views.Profile.MasterPage"/>
+    <Page Name="Health Profile Page" IsNew="True" Description="This page shows health details including age, weight, height, calories eaten, heart rate, water consumed, and sleep duration." PageName="Views.Profile.HealthProfilePage"/>
   </Category>
 
   <Category Icon="tracking.png" Name="Tracking" Description="Displays various trackings like train status, product delivery status, and more.">
-    <Page Name="Prodcut Delivery Tracking Page" Description="This page displays a live train’s present status with the estimated time of arrival at a specified destination." PageName="Views.Tracking.ProductDeliveryTrackingPage"/>
+    <Page Name="Product Delivery Tracking Page" Description="This page displays a live train’s present status with the estimated time of arrival at a specified destination." PageName="Views.Tracking.ProductDeliveryTrackingPage"/>
   </Category>
 
-  <Category Icon="dashboard.png" Name="Dashboard" Description="A beautifully presented interface relevant to common real-world use cases.">
+  <Category Icon="dashboard.png" Name="Dashboard" IsUpdated="True" Description="A beautifully presented interface relevant to common real-world use cases.">
     <Page Name="Stock Overview Page" Description="This page displays a dashboard for stock market data visualization." PageName="Views.Dashboard.StockOverviewPage"/>
     <Page Name="Health Care Page"  Description="This page displays a dashboard for health-care data visualization." PageName="Views.Dashboard.HealthCarePage"/>
+    <Page Name="Daily Calories Report Page" IsNew="True" Description="This page displays a dashboard visualizing a daily calorie report." PageName="Views.Dashboard.DailyCaloriesReportPage"/>
+    <Page Name="Daily Timeline Page" IsNew="True" Description="This page displays a daily dashboard in the form a timeline of event details." PageName="Views.Dashboard.DailyTimelinePage"/>
+    <Page Name="Company History Page" IsNew="True" Description="This page shows a business history dashboard of accomplishments and their year." PageName="Views.Dashboard.CompanyHistoryPage"/>
+    <Page Name="My Wallet Page" IsNew="True" Description="This page shows income and expense charts as well as transaction details such as name, description, amount, and date." PageName="Views.Dashboard.MyWalletPage"/>
   </Category>
 
   <Category Icon="setting.png" Name="Settings" Description="Display various types of settings pages.">
@@ -141,8 +159,9 @@
   </Category>
 
   <Category Icon="notification.png" Name="Notification" IsUpdated="True" Description="Display various types of notification pages.">
-    <Page Name="Task Notification Page" IsNew="True" Description="This page displays notifications for tasks, showing descriptions, task IDs, and times." PageName="Views.Notification.TaskNotificationPage"/>
-    <Page Name="Social Notification Page" IsNew="True" Description="This page displays social media notifications, containing a list of recent notifications and a list of earlier ones." PageName="Views.Notification.SocialNotificationPage"/>
+    <Page Name="Task Notification Page" Description="This page displays notifications for tasks, showing descriptions, task IDs, and times." PageName="Views.Notification.TaskNotificationPage"/>
+    <Page Name="Social Notification Page" Description="This page displays social media notifications, containing a list of recent notifications and a list of earlier ones." PageName="Views.Notification.SocialNotificationPage"/>
+    <Page Name="E-commerce Notification Page" IsNew="True" Description="This page displays e-commerce notifications that include description and time." PageName="Views.Notification.ECommerceNotificationPage"/>
   </Category>
    
   <!--<Category Name="Shopping" Description="Simple shopping flow, fetturing catalog detail, cart detail and product checkout.">
diff --git a/EssentialUIKit/AppLayout/Views/HomePage.xaml b/EssentialUIKit/AppLayout/Views/HomePage.xaml
index da2e0a4..7ef2d71 100644
--- a/EssentialUIKit/AppLayout/Views/HomePage.xaml
+++ b/EssentialUIKit/AppLayout/Views/HomePage.xaml
@@ -217,13 +217,23 @@
                                                   iOS=10}"
                         HasShadow="False" />
 
-                    <Button
-                        x:Name="SettingsIcon"
-                        Grid.Row="1"
-                        Clicked="ShowSettings"
-                        HorizontalOptions="EndAndExpand"
-                        Style="{StaticResource ActionBarSettingIconStyle}"
-                        VerticalOptions="Start" />
+                    <StackLayout Grid.Row="1" Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
+                        <Button
+                            x:Name="CodeViewerIcon" 
+                            Text="&#xe753;"
+                            FontSize="16"
+                            Clicked="GotoCodeViewer"
+                            Style="{StaticResource ActionBarSettingIconStyle}"
+                            VerticalOptions="Start" />
+
+                        <Button
+                            x:Name="SettingsIcon" 
+                            Clicked="ShowSettings" 
+                            Style="{StaticResource ActionBarSettingIconStyle}"
+                            VerticalOptions="Start" />
+                    </StackLayout>
+
+                   
 
                 </Grid>
             </ListView.Header>
@@ -251,12 +261,18 @@
                 Text="{StaticResource HomePageTitle}"
                 VerticalOptions="CenterAndExpand" />
 
-            <Button
-                Grid.Row="1"
-                Clicked="ShowSettings"
-                HorizontalOptions="EndAndExpand"
-                Style="{StaticResource ActionBarSettingIconStyle}"
-                VerticalOptions="CenterAndExpand" />
+            <StackLayout Grid.Row="1" Spacing="0" Orientation="Horizontal" HorizontalOptions="End">
+                <Button
+                    Text="&#xe753;" FontSize="16"
+                    Clicked="GotoCodeViewer"
+                    Style="{StaticResource ActionBarSettingIconStyle}"
+                    VerticalOptions="Start" />
+
+                <Button
+                    Clicked="ShowSettings"
+                    Style="{StaticResource ActionBarSettingIconStyle}"
+                    VerticalOptions="CenterAndExpand" />
+            </StackLayout>
 
             <Frame
                 Grid.Row="2"
diff --git a/EssentialUIKit/AppLayout/Views/HomePage.xaml.cs b/EssentialUIKit/AppLayout/Views/HomePage.xaml.cs
index 8252032..a9a4ed5 100644
--- a/EssentialUIKit/AppLayout/Views/HomePage.xaml.cs
+++ b/EssentialUIKit/AppLayout/Views/HomePage.xaml.cs
@@ -130,6 +130,7 @@ private void ListView_OnScrollChanged(object sender, ScrollChangedEventArgs e)
                 BrandName.Opacity = (scrollValue + 75) / 75;
                 ActionBar.IsVisible = false;
                 SettingsIcon.TranslationY = scrollValue * -1;
+                CodeViewerIcon.TranslationY = scrollValue * -1;
             }
         }
 
@@ -149,6 +150,11 @@ private void ShowSettings(object sender, EventArgs e)
             SettingsView.Show();
         }
 
+        private void GotoCodeViewer(object sender, EventArgs e)
+        {
+            Device.OpenUri(new Uri("https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms"));
+        }
+
         #endregion
     }
 }
\ No newline at end of file
diff --git a/EssentialUIKit/AppLayout/Views/Styles.xaml b/EssentialUIKit/AppLayout/Views/Styles.xaml
index aaf014a..af31ac1 100644
--- a/EssentialUIKit/AppLayout/Views/Styles.xaml
+++ b/EssentialUIKit/AppLayout/Views/Styles.xaml
@@ -22,7 +22,7 @@
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="Text" Value="&#xe72b;" />
         <Setter Property="Padding" Value="{OnPlatform Default=8, UWP=6}" />
-        <Setter Property="Margin" Value="8" />
+        <Setter Property="Margin" Value="4,8" />
         <Setter Property="HeightRequest" Value="{OnPlatform Default=32, UWP=40}" />
         <Setter Property="WidthRequest" Value="{OnPlatform Default=32, UWP=40}" />
     </Style>
diff --git a/EssentialUIKit/AppLayout/Views/TemplatePage.xaml b/EssentialUIKit/AppLayout/Views/TemplatePage.xaml
index 2c012f6..3384485 100644
--- a/EssentialUIKit/AppLayout/Views/TemplatePage.xaml
+++ b/EssentialUIKit/AppLayout/Views/TemplatePage.xaml
@@ -46,7 +46,7 @@
 
         <graphics:SfGradientView Grid.Row="0" Grid.RowSpan="3" />
 
-        <StackLayout
+        <StackLayout Spacing="0"
             x:Name="ActionBarContent"
             Grid.Row="1"
             HorizontalOptions="FillAndExpand"
@@ -62,9 +62,17 @@
                 Text="{Binding SelectedCategory.Name}"
                 VerticalOptions="CenterAndExpand" />
 
+            <Button
+                Clicked="GotoCodeViewer"
+                HorizontalOptions="End"
+                Text="&#xe753;"
+                FontSize="16"
+                Style="{StaticResource ActionBarSettingIconStyle}"
+                VerticalOptions="CenterAndExpand" />
+
             <Button
                 Clicked="ShowSettings"
-                HorizontalOptions="EndAndExpand"
+                HorizontalOptions="End"
                 Style="{StaticResource ActionBarSettingIconStyle}"
                 VerticalOptions="CenterAndExpand" />
         </StackLayout>
diff --git a/EssentialUIKit/AppLayout/Views/TemplatePage.xaml.cs b/EssentialUIKit/AppLayout/Views/TemplatePage.xaml.cs
index 296e653..3025eb9 100644
--- a/EssentialUIKit/AppLayout/Views/TemplatePage.xaml.cs
+++ b/EssentialUIKit/AppLayout/Views/TemplatePage.xaml.cs
@@ -1,5 +1,4 @@
 using System;
-using System.Reflection;
 using EssentialUIKit.AppLayout.Models;
 using EssentialUIKit.AppLayout.ViewModels;
 using Xamarin.Forms;
@@ -28,7 +27,7 @@ public partial class TemplatePage
         public TemplatePage(Category selectedCategory)
         {
             InitializeComponent();
-            ((TemplatePageViewModel)BindingContext).SelectedCategory = selectedCategory;
+            ((TemplatePageViewModel) BindingContext).SelectedCategory = selectedCategory;
         }
 
         #endregion
@@ -98,6 +97,11 @@ private void ListView_OnSelectionChanged(object sender, SelectedItemChangedEvent
             Navigation.PushAsync(new TemplateHostPage(e.SelectedItem as Template));
         }
 
-        #endregion
+       private void GotoCodeViewer(object sender, EventArgs e)
+        {
+            Device.OpenUri(new Uri("https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms"));
+        }
+
+       #endregion
     }
 }
\ No newline at end of file
diff --git a/EssentialUIKit/Behaviors/Detail/SelectedIndexBehavior.cs b/EssentialUIKit/Behaviors/Detail/SelectedIndexBehavior.cs
new file mode 100644
index 0000000..9632a7e
--- /dev/null
+++ b/EssentialUIKit/Behaviors/Detail/SelectedIndexBehavior.cs
@@ -0,0 +1,108 @@
+using System;
+using System.Windows.Input;
+using Syncfusion.XForms.ComboBox;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Behaviors
+{
+    /// <summary>
+    /// This class extends the behavior of the SfComboBox to invoke a command when an event occurs.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class SelectedIndexBehavior: Behavior<SfComboBox>
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the CommandProperty, and it is a bindable property.
+        /// </summary>
+        
+        public static readonly BindableProperty CommandProperty =
+            BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(SelectedIndexBehavior));
+
+        /// <summary>
+        /// Gets or sets the Command.
+        /// </summary>
+        public ICommand Command
+        {
+            get { return (ICommand)GetValue(CommandProperty); }
+            set { this.SetValue(CommandProperty, value); }
+        }
+
+        public SfComboBox ComboBox { get; private set; }
+
+        #endregion
+
+        #region Method
+
+        /// <summary>
+        /// Invoked when adding SfComboBox to the view.
+        /// </summary>
+        /// <param name="comboBox">comboBox Control</param>
+        protected override void OnAttachedTo(SfComboBox comboBox)
+        {
+            if (comboBox != null)
+            {
+                base.OnAttachedTo(comboBox);
+                this.ComboBox = comboBox;
+                comboBox.BindingContextChanged += this.OnBindingContextChanged;
+                comboBox.SelectionChanged += ComboBox_SelectionChanged;
+            }
+        }
+
+        /// <summary>
+        /// Invoked when exit from the view.
+        /// </summary>
+        /// <param name="comboBox">comboBox Control</param>
+        protected override void OnDetachingFrom(SfComboBox comboBox)
+        {
+            if (comboBox != null)
+            {
+                base.OnDetachingFrom(comboBox);
+                comboBox.BindingContextChanged -= this.OnBindingContextChanged;
+                comboBox.SelectionChanged -= this.ComboBox_SelectionChanged;
+                this.ComboBox = null;
+            }
+        }
+
+        /// <summary>
+        /// Invoked when comboBox Control binding context is changed.
+        /// </summary>
+        protected override void OnBindingContextChanged()
+        {
+            base.OnBindingContextChanged();
+            this.BindingContext = this.ComboBox.BindingContext;
+        }
+
+        /// <summary>
+        /// Invoked when selection is changed.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Selection Changed Event Args</param>
+        private void ComboBox_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e)
+        {            
+            if (this.Command == null)
+            {
+                return;
+            }
+            
+            if (this.Command.CanExecute(e.Value))
+            {
+                this.Command.Execute(e.Value);
+            }
+        }
+
+        /// <summary>
+        /// Invoked when binding context is changed.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void OnBindingContextChanged(object sender, EventArgs e)
+        {
+            this.OnBindingContextChanged();
+        }
+        #endregion
+
+    }
+}
diff --git a/EssentialUIKit/Behaviors/EntryMaskedBehavior.cs b/EssentialUIKit/Behaviors/EntryMaskedBehavior.cs
new file mode 100644
index 0000000..fe2e4d3
--- /dev/null
+++ b/EssentialUIKit/Behaviors/EntryMaskedBehavior.cs
@@ -0,0 +1,130 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using EssentialUIKit.Controls;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Behaviors
+{
+    /// <summary>
+    /// This class extends the behavior of the EntryBehavior control to invoke a command when an event occurs.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class EntryMaskedBehavior : Behavior<Entry>
+    {
+        #region Fields
+
+        IDictionary<int, char> positions;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the mask format of the entry.
+        /// </summary>
+        public string Mask
+        {
+            get { return (string)GetValue(MaskProperty); }
+            set { this.SetValue(MaskProperty, value); }
+        }
+
+        /// <summary>
+        /// Property used to bind mask for entry to validate the user input. 
+        /// </summary>
+        public static readonly BindableProperty MaskProperty =
+          BindableProperty.Create(nameof(Mask), typeof(string), typeof(EntryMaskedBehavior), "",BindingMode.Default,
+              null, OnMaskChanged);
+
+        public string Prefix
+        {
+            get { return (string)GetValue(PrefixProperty); }
+            set { this.SetValue(PrefixProperty, value); }
+        }
+
+        /// <summary>
+        /// Property used to set prefix text for entry field. 
+        /// </summary>
+        public static readonly BindableProperty PrefixProperty =
+          BindableProperty.Create(nameof(Prefix), typeof(string), typeof(EntryMaskedBehavior), "", BindingMode.Default,
+              null, OnPrefixChanged);
+
+        #endregion
+
+        #region Methods
+
+        private static void OnMaskChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+            (bindable as EntryMaskedBehavior).SetPositions();
+        }
+
+        private static void OnPrefixChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+        }
+
+        protected override void OnAttachedTo(Entry entry)
+        {
+            entry.TextChanged += OnEntryTextChanged;
+            entry.Focused += OnEntryFocused;
+            base.OnAttachedTo(entry);
+        }
+
+        private void OnEntryFocused(object sender, FocusEventArgs e)
+        {
+            (sender as Entry).Text = Prefix;
+        }
+
+        protected override void OnDetachingFrom(Entry entry)
+        {
+            entry.TextChanged -= OnEntryTextChanged;
+            entry.Focused -= OnEntryFocused;
+            base.OnDetachingFrom(entry);
+        }
+
+        void SetPositions()
+        {
+            if (string.IsNullOrEmpty(Mask))
+            {
+                positions = null;
+                return;
+            }
+
+            var list = new Dictionary<int, char>();
+            for (var i = 0; i < Mask.Length; i++)
+                if (Mask[i] != 'X')
+                    list.Add(i, Mask[i]);
+
+            positions = list;
+        }
+
+        private void OnEntryTextChanged(object sender, TextChangedEventArgs args)
+        {
+            var entry = sender as Entry;
+
+            var text = entry.Text;
+
+            if (string.IsNullOrWhiteSpace(text) || positions == null)
+                return;
+
+            if (text.Length > Mask.Length)
+            {
+                entry.Text = text.Remove(text.Length - 1);
+                return;
+            }
+
+            foreach (var position in positions)
+                if (text.Length >= position.Key + 1)
+                {
+                    var value = position.Value.ToString();
+                    if (text.Substring(position.Key, 1) != value)
+                        text = text.Insert(position.Key, value);
+                }
+
+            if (entry.Text != text)
+                entry.Text = text;
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Behaviors/ItemTemplateButtonBehavior.cs b/EssentialUIKit/Behaviors/ItemTemplateButtonBehavior.cs
index 662d82a..998f7b2 100644
--- a/EssentialUIKit/Behaviors/ItemTemplateButtonBehavior.cs
+++ b/EssentialUIKit/Behaviors/ItemTemplateButtonBehavior.cs
@@ -1,9 +1,7 @@
-using EssentialUIKit.Models;
-using Syncfusion.ListView.XForms;
+using Syncfusion.ListView.XForms;
 using Syncfusion.XForms.Buttons;
 using System;
 using System.Collections.Generic;
-using System.Text;
 using System.Threading.Tasks;
 using System.Windows.Input;
 using Xamarin.Forms;
diff --git a/EssentialUIKit/Behaviors/Shopping/CartBehavior.cs b/EssentialUIKit/Behaviors/Shopping/CartBehavior.cs
index 720e726..2e479e0 100644
--- a/EssentialUIKit/Behaviors/Shopping/CartBehavior.cs
+++ b/EssentialUIKit/Behaviors/Shopping/CartBehavior.cs
@@ -1,6 +1,4 @@
 using System;
-using System.Collections.Generic;
-using System.Text;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
diff --git a/EssentialUIKit/Controls/CountryComboBox.cs b/EssentialUIKit/Controls/CountryComboBox.cs
new file mode 100644
index 0000000..70fb80f
--- /dev/null
+++ b/EssentialUIKit/Controls/CountryComboBox.cs
@@ -0,0 +1,253 @@
+using EssentialUIKit.Models;
+using Syncfusion.XForms.ComboBox;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Controls
+{
+    [Preserve(AllMembers = true)]
+    public class CountryComboBox : SfComboBox, INotifyPropertyChanged
+    {
+        #region Fields
+        
+        private object country;
+
+        private string phoneNumberPlaceHolder = "Phone Number";
+
+        private string phoneNumber;
+
+        private string city;
+
+        private object state;
+
+        private string[] states;
+
+        private string countryCode;
+
+        #endregion
+
+        #region Constructor
+        public CountryComboBox()
+        {
+            BindingContext = this;
+
+            Countries = new List<CountryModel>();
+            Countries.Add(new CountryModel()
+            {
+                Country = "Australia",
+                States = new string[] { "Tasmania", "Victoria", "Queensland", "Northen Territory" }
+            });
+            Countries.Add(new CountryModel()
+            {
+                Country = "Brazil",
+                States = new string[] { "Bahia", "Ceara", "Goias", "Maranhao" }
+            });
+            Countries.Add(new CountryModel()
+            {
+                Country = "Canada",
+                States = new string[] { "Manitoba", "Ontario", "Quebec", "Yukon" }
+            });
+            Countries.Add(new CountryModel()
+            {
+                Country = "India",
+                States = new string[] { "Assam", "Gujarat", "Haryana", "Tamil Nadu" }
+            });
+            Countries.Add(new CountryModel()
+            {
+                Country = "USA",
+                States = new string[] { "California", "Florida", "New York", "Washington" }
+            });
+
+            DataSource = Countries;
+            this.SetBinding(SfComboBox.SelectedItemProperty, "Country",BindingMode.TwoWay);
+            DisplayMemberPath = "Country";
+            Watermark = "Select Country";
+            this.VerticalOptions = LayoutOptions.CenterAndExpand;
+        }
+        #endregion
+
+        #region Properties
+        /// <summary>
+        /// Gets or sets the property that bounds with a ComboBox that gets the Country from user.
+        /// </summary>
+        public object Country
+        {
+            get { return country; }
+            set
+            {
+                country = value;
+                UpdateStateAndPhoneNumberFormat();
+            }
+        }
+
+        /// <summary>
+        /// Gets or set the string property, that represents the phone number format based on country. 
+        /// </summary>
+        public string PhoneNumberPlaceHolder
+        {
+            get { return phoneNumberPlaceHolder; }
+            set
+            {
+                phoneNumberPlaceHolder = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or set the string property, that represents the phone number based on country. 
+        /// </summary>
+        public string PhoneNumber
+        {
+            get { return phoneNumber; }
+            set
+            {
+                phoneNumber = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+       
+        /// <summary>
+        /// Gets or sets the string property, which holds the contry code based on user input. 
+        /// </summary>
+        public string CountryCode
+        {
+            get { return countryCode; }
+            set 
+            {
+                countryCode = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+
+        /// <summary>
+        /// Gets or set the string property, that represents the user given city. 
+        /// </summary>
+        public string City
+        {
+            get { return city; }
+            set
+            {
+                city = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the property that bounds with a ComboBox that gets the State from user.
+        /// </summary>
+        public object State
+        {
+            get { return state; }
+            set
+            {
+                state = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets array collection that contains states based on country selection. 
+        /// </summary>
+        public string[] States
+        {
+            get { return states; }
+            set 
+            {
+                states = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets string property that represents mask format for phone number. 
+        /// </summary>
+        private string _mask = "";
+        public string Mask
+        {
+            get => _mask;
+            set
+            {
+                _mask = value;
+                NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the collection property, which contains the countries data. 
+        /// </summary>
+        public List<CountryModel> Countries { get; set; }
+
+        #endregion
+
+        #region Event handler
+
+        /// <summary>
+        /// Occurs when the property is changed.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Method used to rest State and City and update PhoneNumber format. 
+        /// </summary>
+        private void UpdateStateAndPhoneNumberFormat()
+        {
+            State = null;
+            PhoneNumber = string.Empty;
+            City = string.Empty;
+            CountryModel countryModel = Country as CountryModel;
+            States = countryModel.States;
+
+            switch (countryModel.Country)
+            {
+                case "Australia":
+                    PhoneNumberPlaceHolder = "e.g. X XXXX XXXX";
+                    Mask = "(+61)X XXXX XXXX";
+                    CountryCode = "(+61)";
+                    break;
+                case "Brazil":
+                    PhoneNumberPlaceHolder = "e.g. XX XXXX XXXX";
+                    Mask = "(+55)XX XXXX XXXX";
+                    CountryCode = "(+55)";
+                    break;
+                case "Canada":
+                    PhoneNumberPlaceHolder = "e.g. XXXXXXXXX";
+                    Mask = "(+1)XXXXXXXXX";
+                    CountryCode = "(+1)";
+                    break;
+                case "India":
+                    PhoneNumberPlaceHolder = "e.g. XXXXX-XXXXX";
+                    Mask = "(+91)XXXXX-XXXXX";
+                    CountryCode = "(+91)";
+                    break;
+                case "USA":
+                    PhoneNumberPlaceHolder = "e.g. XXX-XXX-XXX";
+                    Mask = "(+1)XXX-XXX-XXX";
+                    CountryCode = "(+1)";
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">The PropertyName</param>
+        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Controls/SearchableArticleList.cs b/EssentialUIKit/Controls/SearchableArticleList.cs
new file mode 100644
index 0000000..2460cec
--- /dev/null
+++ b/EssentialUIKit/Controls/SearchableArticleList.cs
@@ -0,0 +1,35 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Controls
+{
+    /// <summary>
+    /// This class extends the behavior of the SearchableListView control to filter the ListViewItem based on text.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class SearchableArticleList : SearchableListView
+    {
+        #region Method 
+
+        /// <summary>
+        /// Filtering the list view items based on the search text.
+        /// </summary>
+        /// <param name="obj">The list view item</param>
+        /// <returns>Returns the filtered item</returns>
+        public override bool FilterContacts(object obj)
+        {
+            if (base.FilterContacts(obj))
+            {
+                var taskInfo = obj as Models.Article;
+                if (taskInfo == null || string.IsNullOrEmpty(taskInfo.Name) || string.IsNullOrEmpty(taskInfo.Author))
+                {
+                    return false;
+                }
+                return taskInfo.Name.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant())
+                       || taskInfo.Author.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant());
+            }
+            return false;
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Controls/SearchableDataTable.cs b/EssentialUIKit/Controls/SearchableDataTable.cs
new file mode 100644
index 0000000..ae3e3a9
--- /dev/null
+++ b/EssentialUIKit/Controls/SearchableDataTable.cs
@@ -0,0 +1,35 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Controls
+{
+    /// <summary>
+    /// This class extends the behavior of the SfListView control to filter the items in data table page based on text.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class SearchableDataTable : SearchableListView
+    {
+        #region Method
+
+        /// <summary>
+        /// Filtering the list view items based on the search text.
+        /// </summary>
+        /// <param name="obj">The list view item</param>
+        /// <returns>Returns the filtered item</returns>
+        public override bool FilterContacts(object obj)
+        {
+            if (base.FilterContacts(obj))
+            {
+                var taskInfo = obj as Models.Detail.DataTable;
+
+                if (string.IsNullOrEmpty(taskInfo.ClubName))
+                {
+                    return false;
+                }
+
+                return taskInfo.ClubName.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant());
+            }
+            return false;
+        }
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Controls/SearchableEventList.cs b/EssentialUIKit/Controls/SearchableEventList.cs
new file mode 100644
index 0000000..1dea5eb
--- /dev/null
+++ b/EssentialUIKit/Controls/SearchableEventList.cs
@@ -0,0 +1,36 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Controls
+{
+    /// <summary>
+    /// This class extends the behavior of the SearchableListView control to filter the ListViewItem based on text.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class SearchableEventList : SearchableListView
+    {
+        #region Method 
+
+        /// <summary>
+        /// Filtering the list view items based on the search text.
+        /// </summary>
+        /// <param name="obj">The list view item</param>
+        /// <returns>Returns the filtered item</returns>
+        public override bool FilterContacts(object obj)
+        {
+            if (base.FilterContacts(obj))
+            {
+                var taskInfo = obj as Models.Catalog.EventList;
+                if (taskInfo == null || string.IsNullOrEmpty(taskInfo.EventName) || string.IsNullOrEmpty(taskInfo.EventMonth)
+                    || string.IsNullOrEmpty(taskInfo.EventDate))
+                {
+                    return false;
+                }
+                return taskInfo.EventName.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant())
+                       || taskInfo.EventMonth.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant())
+                       || taskInfo.EventDate.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant());
+            }
+            return false;
+        }
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Controls/SearchableFAQList.cs b/EssentialUIKit/Controls/SearchableFAQList.cs
index 9e4a34b..fba610d 100644
--- a/EssentialUIKit/Controls/SearchableFAQList.cs
+++ b/EssentialUIKit/Controls/SearchableFAQList.cs
@@ -1,7 +1,4 @@
-using Syncfusion.ListView.XForms;
-using System.Threading.Tasks;
-using Xamarin.Forms;
-using Xamarin.Forms.Internals;
+using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.Controls
 {
diff --git a/EssentialUIKit/Controls/SearchableFileExploreList.cs b/EssentialUIKit/Controls/SearchableFileExploreList.cs
new file mode 100644
index 0000000..bda0b52
--- /dev/null
+++ b/EssentialUIKit/Controls/SearchableFileExploreList.cs
@@ -0,0 +1,40 @@
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models.Navigation;
+
+namespace EssentialUIKit.Controls
+{
+    /// <summary>
+    /// This class extends the behavior of the SearchableListView control to filter the ListViewItem based on text.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class SearchableFileExploreList : SearchableListView
+    {
+        #region Method
+
+        /// <summary>
+        /// Filtering the list view items based on the search text.
+        /// </summary>
+        /// <param name="obj">The list view item</param>
+        /// <returns>Returns the filtered item</returns>
+        public override bool FilterContacts(object obj)
+        {
+            if (base.FilterContacts(obj))
+            {
+                var taskInfo = obj as File;
+                if (taskInfo == null || string.IsNullOrEmpty(taskInfo.FolderName) || string.IsNullOrEmpty(taskInfo.Items) 
+                    || string.IsNullOrEmpty(taskInfo.DateTime))
+                {
+                    return false;
+                }
+
+                return taskInfo.FolderName.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant())
+                    || taskInfo.Items.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant()) 
+                    || taskInfo.DateTime.ToUpperInvariant().Contains(this.SearchText.ToUpperInvariant());
+            }
+
+            return false;
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Controls/SearchableListView.cs b/EssentialUIKit/Controls/SearchableListView.cs
index f452dc5..2621787 100644
--- a/EssentialUIKit/Controls/SearchableListView.cs
+++ b/EssentialUIKit/Controls/SearchableListView.cs
@@ -1,6 +1,4 @@
-using System.Threading.Tasks;
-using EssentialUIKit.Models.Chat;
-using Syncfusion.ListView.XForms;
+using Syncfusion.ListView.XForms;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
diff --git a/EssentialUIKit/Controls/SearchableSuggestionList.cs b/EssentialUIKit/Controls/SearchableSuggestionList.cs
index d610f6c..5f5780a 100644
--- a/EssentialUIKit/Controls/SearchableSuggestionList.cs
+++ b/EssentialUIKit/Controls/SearchableSuggestionList.cs
@@ -1,7 +1,4 @@
-using Syncfusion.ListView.XForms;
-using System.Threading.Tasks;
-using Xamarin.Forms;
-using Xamarin.Forms.Internals;
+using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.Controls
 {
diff --git a/EssentialUIKit/Controls/SfPopupView.cs b/EssentialUIKit/Controls/SfPopupView.cs
index f1eccac..a89ce38 100644
--- a/EssentialUIKit/Controls/SfPopupView.cs
+++ b/EssentialUIKit/Controls/SfPopupView.cs
@@ -1,8 +1,5 @@
 using Syncfusion.XForms.Buttons;
 using Syncfusion.XForms.PopupLayout;
-using System;
-using System.Collections.Generic;
-using System.Text;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
diff --git a/EssentialUIKit/Controls/TapAnimationGrid.cs b/EssentialUIKit/Controls/TapAnimationGrid.cs
index e2331cc..186db53 100644
--- a/EssentialUIKit/Controls/TapAnimationGrid.cs
+++ b/EssentialUIKit/Controls/TapAnimationGrid.cs
@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Text;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using System.Windows.Input;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/Converters/BooleanToColorConverter.cs b/EssentialUIKit/Converters/BooleanToColorConverter.cs
index c383353..f31cb05 100644
--- a/EssentialUIKit/Converters/BooleanToColorConverter.cs
+++ b/EssentialUIKit/Converters/BooleanToColorConverter.cs
@@ -62,6 +62,12 @@ public object Convert(object value, Type targetType, object parameter, CultureIn
                 case "7" when !(bool)value:
                     Application.Current.Resources.TryGetValue("Gray-100", out var gray100);
                     return (Color)gray100;
+                case "8" when (bool)value:
+                    Application.Current.Resources.TryGetValue("PrimaryColor", out var primary);
+                    return (Color)primary;
+                case "8":
+                    Application.Current.Resources.TryGetValue("Gray-White", out var graywhite);
+                    return (Color)graywhite;
                 default:
                     return Color.Transparent;
             }
diff --git a/EssentialUIKit/Converters/BooleanToStringConverter.cs b/EssentialUIKit/Converters/BooleanToStringConverter.cs
index 7d87cc0..b97b420 100644
--- a/EssentialUIKit/Converters/BooleanToStringConverter.cs
+++ b/EssentialUIKit/Converters/BooleanToStringConverter.cs
@@ -45,6 +45,17 @@ public object Convert(object value, Type targetType, object parameter, CultureIn
                         return "\ue701";
                     }
                 }
+                else if (parameter.ToString() == "2")
+                {
+                    if ((bool)value)
+                    {
+                        return "+";
+                    }
+                    else
+                    {
+                        return "-";
+                    }
+                }
             }
 
             return string.Empty;
diff --git a/EssentialUIKit/Data/navigation.json b/EssentialUIKit/Data/navigation.json
index d0d27f3..f5411ac 100644
--- a/EssentialUIKit/Data/navigation.json
+++ b/EssentialUIKit/Data/navigation.json
@@ -225,8 +225,8 @@
     },
     {
       "songImage": "Songs_Image8.png",
-      "songname": "A Thousand Teardrops",
-      "composer": "Shadowfax"
+      "songname": "Winter into Spring",
+      "composer": "George Winston"
     }
 
   ],
@@ -669,7 +669,117 @@
     {
       "name": "Dustin Blake"
     }
-  ]
-}
+  ],
+
+  "rotatorMoviesList": [
+    {
+      "image": "BannerImage.png"
+    },
+    {
+      "image": "BanarImage2.jpg"
+    },
+    {
+      "image": "BanarImage3.jpg"
+    },
+    {
+      "image": "BanarImage4.jpeg"
+    },
+    {
+      "image": "BanarImage5.jpg"
+    }
+  ],
 
+  "showingMoviesList": [
+    {
+      "moviename": "The Lion King",
+      "image": "Lion+King.png",
+      "movierating": 5
+    },
+    {
+      "moviename": "Captain Marvel",
+      "image": "Captain+Marvel.png",
+      "movierating": 5
+    },
+    {
+      "moviename": "The Irishman",
+      "image": "The+Irishman.png",
+      "movierating": 5
+    }
+  ],
 
+  "trailerMoviesList": [
+    {
+      "moviename": "Toy Story 4",
+      "image": "Toy+Story+4.png"
+    },
+    {
+      "moviename": "Star Wars: The Rise of Skywalker",
+      "image": "Star+Wars.png"
+    },
+    {
+      "moviename": "The Aeronauts",
+      "image": "The+Aeronauts.png"
+    }
+  ],
+
+  "upcomingMoviesList": [
+    {
+      "moviename": "Aladdin",
+      "image": "Aladdin.png",
+      "movierating": 5
+    },
+    {
+      "moviename": "Avengers: Endgame",
+      "image": "Avengers+End+Game.png",
+      "movierating": 5
+    },
+    {
+      "moviename": "Joker",
+      "image": "Joker.png",
+      "movierating": 5
+    }
+  ],
+
+  "fileExploreList": [
+    {
+      "folderName": "Documents",
+      "items": "8 Items",
+      "dateTime": "28/11/2019  10:30 PM"
+    },
+    {
+      "folderName": "Downloads",
+      "items": "28 Items",
+      "dateTime": "8/11/2019  11:20 PM"
+    },
+    {
+      "folderName": "My Music",
+      "items": "148 Items",
+      "dateTime": "2/1/2020  8:44 AM"
+    },
+    {
+      "folderName": "My Videos",
+      "items": "48 Items",
+      "dateTime": "21/9/2019  12:10 PM"
+    },
+    {
+      "folderName": "Images",
+      "items": "342 Items",
+      "dateTime": "16/12/2019  6:45 PM"
+    },
+    {
+      "folderName": "Data",
+      "items": "21 Items",
+      "dateTime": "18/11/2019  10:24 AM"
+    },
+    {
+      "folderName": "Movies",
+      "items": "12 Items",
+      "dateTime": "25/11/2019  7:30 AM"
+    },
+    {
+      "folderName": "Files",
+      "items": "43 Items", 
+      "dateTime": "14/12/2019  11:30 PM"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Data/notification.json b/EssentialUIKit/Data/notification.json
index e0e427d..b6c24dc 100644
--- a/EssentialUIKit/Data/notification.json
+++ b/EssentialUIKit/Data/notification.json
@@ -90,5 +90,35 @@
       "time": "2 mins ago",
       "isRead": "true"
     }
+  ],
+  "ecommerceNotificationPageList": [
+    {
+      "notificationIcon": "Delivered",
+      "description": "Delivered: Your package of boAt BassHeads 100 Stereo In-Ear Earphones (Black)",
+      "backgroundColor": "#f29f40",
+      "time": "5 Mins ago",
+      "isRead": "false"
+    },
+    {
+      "notificationIcon": "Offer",
+      "description": "Get 20% OFF on Home Products. Offer Valid for 24 hours.",
+      "backgroundColor": "#6c88ff",
+      "time": "4 hours ago",
+      "isRead": "true"
+    },
+    {
+      "notificationIcon": "FlashSale",
+      "description": "Flash Sale starting tomorrow. Don't forget to check it out.",
+      "backgroundColor": "#a8d35f",
+      "time": "9 hours ago",
+      "isRead": "true"
+    },
+    {
+      "notificationIcon": "Arrived",
+      "description": "Package order #246734 has arrived.",
+      "backgroundColor": "#cf62e2",
+      "time": "9 hours ago",
+      "isRead": "true"
+    }
   ]
-}
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Data/timeline.json b/EssentialUIKit/Data/timeline.json
new file mode 100644
index 0000000..454ebe2
--- /dev/null
+++ b/EssentialUIKit/Data/timeline.json
@@ -0,0 +1,77 @@
+{
+  "dailyTimeline": [
+    {
+      "name": "Gym",
+      "description": "Treadmill, squats, bike, weights",
+      "time": "8 AM",
+      "icon": "\ue74c"
+    },
+    {
+      "name": "Breakfast",
+      "description": "Toast, boiled Egg, pineapple, orange juice.",
+      "time": "9 AM",
+      "itemImage": "Recipe9.png",
+      "icon": "\ue750"
+    },
+    {
+      "name": "Meeting-College Friends",
+      "description": "Daily Grind. Coordinating gifts for Mel's baby shower",
+      "time": "10 AM",
+      "icon": "\ue714"
+    },
+    {
+      "name": "Photograpy Exhibit",
+      "description": "At the art center. Parking deck on Main St. Meet Jon and Kate at entrance.",
+      "time": "12 PM",
+      "icon": "\ue713"
+    },
+    {
+      "name": "Lunch",
+      "description": "O'Henrys One block north of art center. Try the fries.",
+      "time": "1 PM",
+      "icon": "\ue74e"
+    },
+    {
+      "name": "Organization Workshop",
+      "description": "Brooklyn building, room 311. Bring laptop and water bottle.",
+      "time": "3 PM",
+      "icon": "\ue751"
+    },
+    {
+      "name": "Snacks",
+      "description": "Apple, banana, fresh juice",
+      "time": "6 PM",
+      "icon": "\ue74b"
+    }
+  ],
+
+  "companyName": "Elm Vaults",
+  "companyDescription": "Elm Vaults is the industry leader in wooden vault construction. For more than 80 years, people around the world have relied on us for vaults that are equal parts secure and aesthetically pleasing.",
+
+  "companyHistory": [
+    {
+      "year": 2019
+    },
+    {
+      "description": "The Texas Cedar Elm Vault is released, impressing vault enthusiasts with its height and oblique-based leaves."
+    },
+    {
+      "description": "The Cork Elm Vault is named Best in Show at the Midwestern Vault Show. This is the ninth time an Elm Vaults product has won the award."
+    },
+    {
+      "year": 2018
+    },
+    {
+      "description": "The David Elm Vault design receives an overhaul to further distinguish it from the American Elm Vault."
+    },
+    {
+      "description": "65th anniversary of the Slippery Elm Vault, a popular vault among baseball pitchers and historians."
+    },
+    {
+      "year": 2016
+    },
+    {
+      "description": "The Heartwood and Sapwood Vault Add-Ons are announced, introducing an unprecedented element of modularity to Elm Vaults products."
+    }
+  ]
+}
diff --git a/EssentialUIKit/DataService/CompanyHistoryDataService.cs b/EssentialUIKit/DataService/CompanyHistoryDataService.cs
new file mode 100644
index 0000000..5e9f45f
--- /dev/null
+++ b/EssentialUIKit/DataService/CompanyHistoryDataService.cs
@@ -0,0 +1,65 @@
+using EssentialUIKit.ViewModels.Dashboard;
+using System.Reflection;
+using System.Runtime.Serialization.Json;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.DataService
+{
+    /// <summary>
+    /// Data service to load the data from json file.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class CompanyHistoryDataService
+    {
+        #region fields
+
+        private static CompanyHistoryDataService instance;
+
+        private CompanyHistoryViewModel companyHistoryViewModel;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets an instance of the <see cref="CompanyHistoryDataService"/>.
+        /// </summary>
+        public static CompanyHistoryDataService Instance => instance ?? (instance = new CompanyHistoryDataService());
+
+        /// <summary>
+        /// Gets or sets the value of company history page view model.
+        /// </summary>
+        public CompanyHistoryViewModel CompanyHistoryViewModel =>
+            this.companyHistoryViewModel ??
+            (this.companyHistoryViewModel = PopulateData<CompanyHistoryViewModel>("timeline.json"));
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Populates the data for view model from json file.
+        /// </summary>
+        /// <typeparam name="T">Type of view model.</typeparam>
+        /// <param name="fileName">Json file to fetch data.</param>
+        /// <returns>Returns the view model object.</returns>
+        private static T PopulateData<T>(string fileName)
+        {
+            var file = "EssentialUIKit.Data." + fileName;
+
+            var assembly = typeof(App).GetTypeInfo().Assembly;
+
+            T obj;
+
+            using (var stream = assembly.GetManifestResourceStream(file))
+            {
+                var serializer = new DataContractJsonSerializer(typeof(T));
+                obj = (T)serializer.ReadObject(stream);
+            }
+
+            return obj;
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/DataService/DailyTimelineDataService.cs b/EssentialUIKit/DataService/DailyTimelineDataService.cs
new file mode 100644
index 0000000..6b828ea
--- /dev/null
+++ b/EssentialUIKit/DataService/DailyTimelineDataService.cs
@@ -0,0 +1,70 @@
+using EssentialUIKit.ViewModels.Dashboard;
+using System.Reflection;
+using System.Runtime.Serialization.Json;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.DataService
+{
+    /// <summary>
+    /// Data service to load the data from json file.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class DailyTimelineDataService
+    {
+        #region Fields
+
+        private static DailyTimelineDataService instance;
+        private DailyTimelineViewModel dailyTimelineViewModel;
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Creates an instance for the <see cref="DailyTimelineDataService"/> class.
+        /// </summary>
+        public DailyTimelineDataService()
+        {
+        }
+        #endregion
+
+        #region properties
+
+        /// <summary>
+        /// Gets an instance of the <see cref="DailyTimelineDataService"/>.
+        /// </summary>
+        public static DailyTimelineDataService Instance => instance ?? (instance = new DailyTimelineDataService());
+
+        /// <summary>
+        /// Gets or sets the value of pDaily Timeline page view model.
+        /// </summary>
+        public DailyTimelineViewModel DailyTimelineViewModel =>
+            (this.dailyTimelineViewModel = PopulateData<DailyTimelineViewModel>("timeline.json"));
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Populates the data for view model from json file.
+        /// </summary>
+        /// <typeparam name="T">Type of view model.</typeparam>
+        /// <param name="fileName">Json file to fetch data.</param>
+        /// <returns>Returns the view model object.</returns>
+        private static T PopulateData<T>(string fileName)
+        {
+            var file = "EssentialUIKit.Data." + fileName;
+
+            var assembly = typeof(App).GetTypeInfo().Assembly;
+
+            T obj;
+
+            using (var stream = assembly.GetManifestResourceStream(file))
+            {
+                var serializer = new DataContractJsonSerializer(typeof(T));
+                obj = (T)serializer.ReadObject(stream);
+            }
+
+            return obj;
+        }
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/DataService/ECommerceNotificationDataService.cs b/EssentialUIKit/DataService/ECommerceNotificationDataService.cs
new file mode 100644
index 0000000..85b69a5
--- /dev/null
+++ b/EssentialUIKit/DataService/ECommerceNotificationDataService.cs
@@ -0,0 +1,65 @@
+using System.Reflection;
+using System.Runtime.Serialization.Json;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.ViewModels.Notification;
+
+namespace EssentialUIKit.DataService
+{
+    /// <summary>
+    /// Data service for E-Commerce notification page to load the data from json file.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class ECommerceNotificationDataService
+    {
+        #region fields 
+
+        private static ECommerceNotificationDataService instance;
+
+        private ECommerceNotificationViewModel ecommerceNotificationViewModel;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets an instance of the <see cref="ECommerceNotificationDataService"/>.
+        /// </summary>
+        public static ECommerceNotificationDataService Instance => instance ?? (instance = new ECommerceNotificationDataService());
+
+        /// <summary>
+        /// Gets or sets the value of E-Commerce notification page view model.
+        /// </summary>
+        public ECommerceNotificationViewModel ECommerceNotificationViewModel =>
+            this.ecommerceNotificationViewModel ??
+            (this.ecommerceNotificationViewModel = PopulateData<ECommerceNotificationViewModel>("notification.json"));
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Populates the data for view model from json file.
+        /// </summary>
+        /// <typeparam name="T">Type of view model.</typeparam>
+        /// <param name="fileName">Json file to fetch data.</param>
+        /// <returns>Returns the view model object.</returns>
+        private static T PopulateData<T>(string fileName)
+        {
+            var file = "EssentialUIKit.Data." + fileName;
+
+            var assembly = typeof(App).GetTypeInfo().Assembly;
+
+            T obj;
+
+            using (var stream = assembly.GetManifestResourceStream(file))
+            {
+                var serializer = new DataContractJsonSerializer(typeof(T));
+                obj = (T)serializer.ReadObject(stream);
+            }
+
+            return obj;
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/DataService/FileExploreDataService.cs b/EssentialUIKit/DataService/FileExploreDataService.cs
new file mode 100644
index 0000000..0bbe2ec
--- /dev/null
+++ b/EssentialUIKit/DataService/FileExploreDataService.cs
@@ -0,0 +1,65 @@
+using System.Reflection;
+using System.Runtime.Serialization.Json;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.ViewModels.Navigation;
+
+namespace EssentialUIKit.DataService
+{
+    /// <summary>
+    /// Data service for file explorer list page to load the data from json file.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class FileExploreDataService
+    {
+        #region fields 
+
+        private static FileExploreDataService instance;
+
+        private FileExploreViewModel fileExploreViewModel;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets an instance of the <see cref="FileExploreDataService"/>.
+        /// </summary>
+        public static FileExploreDataService Instance => instance ?? (instance = new FileExploreDataService());
+
+        /// <summary>
+        /// Gets or sets the value of file explorer list view model.
+        /// </summary>
+        public FileExploreViewModel FileExploreViewModel =>
+            this.fileExploreViewModel ??
+            (this.fileExploreViewModel = PopulateData<FileExploreViewModel>("navigation.json"));
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Populates the data for view model from json file.
+        /// </summary>
+        /// <typeparam name="T">Type of view model.</typeparam>
+        /// <param name="fileName">Json file to fetch data.</param>
+        /// <returns>Returns the view model object.</returns>
+        private static T PopulateData<T>(string fileName)
+        {
+            var file = "EssentialUIKit.Data." + fileName;
+
+            var assembly = typeof(App).GetTypeInfo().Assembly;
+
+            T obj;
+
+            using (var stream = assembly.GetManifestResourceStream(file))
+            {
+                var serializer = new DataContractJsonSerializer(typeof(T));
+                obj = (T)serializer.ReadObject(stream);
+            }
+
+            return obj;
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/EssentialUIKit.csproj b/EssentialUIKit/EssentialUIKit.csproj
index 6dbb04c..d7f7f4b 100644
--- a/EssentialUIKit/EssentialUIKit.csproj
+++ b/EssentialUIKit/EssentialUIKit.csproj
@@ -23,6 +23,7 @@
     <PackageReference Include="Syncfusion.Xamarin.SfCalendar" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfChart" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfComboBox" Version="17.4.0.44" />
+    <PackageReference Include="Syncfusion.Xamarin.SfGauge" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfListView" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfMaps" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfParallaxView" Version="17.4.0.44" />
@@ -33,7 +34,7 @@
     <PackageReference Include="Syncfusion.Xamarin.Expander" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfBadgeView" Version="17.4.0.44" />
     <PackageReference Include="Syncfusion.Xamarin.SfTabView" Version="17.4.0.44" />
-    <PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
+    <PackageReference Include="Xamarin.Forms" Version="4.3.0.991250" />
     <PackageReference Include="Syncfusion.Xamarin.Core" Version="17.4.0.44" />
   </ItemGroup>
   <ItemGroup>
@@ -53,10 +54,13 @@
     <None Remove="Data\ecommerce.json" />
     <None Remove="Data\navigation.json" />
     <None Remove="Data\notification.json" />
+    <None Remove="Data\timeline.json" />
+    <None Remove="Images\CaloriesEaten.svg" />
     <None Remove="Images\ChooseGradient.svg" />
     <None Remove="Images\ConfirmGradient.svg" />
     <None Remove="Images\DeliverGradient.svg" />
     <None Remove="Images\EmptyCart.svg" />
+    <None Remove="Images\HeartRate.svg" />
     <None Remove="Images\LocationAccessDenied.svg" />
     <None Remove="Images\NoCredits.svg" />
     <None Remove="Images\NoInternet.svg" />
@@ -68,7 +72,9 @@
     <None Remove="Images\PaymentFailed.svg" />
     <None Remove="Images\PaymentFailure.svg" />
     <None Remove="Images\PaymentSuccess.svg" />
+    <None Remove="Images\SleepDuration.svg" />
     <None Remove="Images\SomethingWentWrong.svg" />
+    <None Remove="Images\WaterConsumed.svg" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="AppLayout\Icons\about-us.png" />
@@ -96,13 +102,16 @@
     <EmbeddedResource Include="AppLayout\TemplateList.xml" />
     <EmbeddedResource Include="Data\deliverytracking.json" />
     <EmbeddedResource Include="Data\notification.json" />
+    <EmbeddedResource Include="Data\timeline.json" />
     <EmbeddedResource Include="Data\trainstatus.json" />
     <EmbeddedResource Include="Data\ecommerce.json" />
     <EmbeddedResource Include="Data\navigation.json" />
+    <EmbeddedResource Include="Images\CaloriesEaten.svg" />
     <EmbeddedResource Include="Images\ChooseGradient.svg" />
     <EmbeddedResource Include="Images\ConfirmGradient.svg" />
     <EmbeddedResource Include="Images\DeliverGradient.svg" />
     <EmbeddedResource Include="Images\EmptyCart.svg" />
+    <EmbeddedResource Include="Images\HeartRate.svg" />
     <EmbeddedResource Include="Images\LocationAccessDenied.svg" />
     <EmbeddedResource Include="Images\NoCredits.svg" />
     <EmbeddedResource Include="Images\NoInternet.svg" />
@@ -114,7 +123,9 @@
     <EmbeddedResource Include="Images\PaymentFailed.svg" />
     <EmbeddedResource Include="Images\PaymentFailure.svg" />
     <EmbeddedResource Include="Images\PaymentSuccess.svg" />
+    <EmbeddedResource Include="Images\SleepDuration.svg" />
     <EmbeddedResource Include="Images\SomethingWentWrong.svg" />
+    <EmbeddedResource Include="Images\WaterConsumed.svg" />
   </ItemGroup>
   <ItemGroup>
     <Compile Update="AppLayout\Views\Styles.xaml.cs">
@@ -144,6 +155,12 @@
     <Compile Update="Views\Bookmarks\BookmarksPage.xaml.cs">
       <DependentUpon>BookmarksPage.xaml</DependentUpon>
     </Compile>
+    <Compile Update="Views\Dashboard\DailyCaloriesReportPage.xaml.cs">
+      <DependentUpon>DailyCaloriesReportPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Update="Views\Dashboard\DailyTimeLinePage.xaml.cs">
+      <DependentUpon>DailyTimelinePage.xaml</DependentUpon>
+    </Compile>
     <Compile Update="Views\Profile\MasterPage.xaml.cs">
       <DependentUpon>MasterPage.xaml</DependentUpon>
     </Compile>
diff --git a/EssentialUIKit/Images/CaloriesEaten.svg b/EssentialUIKit/Images/CaloriesEaten.svg
new file mode 100644
index 0000000..d58c767
--- /dev/null
+++ b/EssentialUIKit/Images/CaloriesEaten.svg
@@ -0,0 +1,6 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs><style>.cls-1{fill:#ff7e7e;}</style></defs><title>Calories</title>
+<path fill="#ff7e7e" class="cls-1" d="M10.69,10H7.62L6.22,29A2.8,2.8,0,0,0,9,32H9a2.8,2.8,0,0,0,2.79-3Z"/>
+<path fill="#ff7e7e" class="cls-1" d="M12,0l-.44,8H10.47L10,0H8L7.56,8H6.47L6,0H4V8a4,4,0,0,0,4,4h2a4,4,0,0,0,4-4V0Z"/>
+<path fill="#ff7e7e" class="cls-1" d="M26,0H25a6,6,0,0,0-6,6v6a2,2,0,0,0,2,2h3V30a2,2,0,0,0,2,2h0a2,2,0,0,0,2-2V2A2,2,0,0,0,26,0Z"/>
+</svg>
\ No newline at end of file
diff --git a/EssentialUIKit/Images/HeartRate.svg b/EssentialUIKit/Images/HeartRate.svg
new file mode 100644
index 0000000..c3aa0e2
--- /dev/null
+++ b/EssentialUIKit/Images/HeartRate.svg
@@ -0,0 +1,5 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs><style>.cls-1{fill:#ff7e7e;}</style></defs><title>Heart rate</title>
+  <path fill="#ff7e7e" class="cls-1" d="M8.78,17l2.77-8.32a1,1,0,0,1,1-.68,1,1,0,0,1,.92.78l2.38,10.29,2.76-5.52a1,1,0,0,1,1.78,0L22.12,17H30l.11,0A17.52,17.52,0,0,0,32,9.76,8.73,8.73,0,0,0,23.39,1h-.08A8.73,8.73,0,0,0,16,5,8.73,8.73,0,0,0,8.69,1H8.62A8.73,8.73,0,0,0,0,9.76,17.53,17.53,0,0,0,1.88,17Z"/>
+  <path fill="#ff7e7e" class="cls-1" d="M21.5,19a1,1,0,0,1-.89-.55L19.5,16.24l-3.11,6.21a1,1,0,0,1-.89.55h-.12a1,1,0,0,1-.85-.77l-2.21-9.53-1.87,5.63A1,1,0,0,1,9.5,19H3c.23.35.45.7.7,1C8.31,26.42,16,32,16,32s7.69-5.58,12.32-12c.25-.34.47-.69.7-1Z"/>
+</svg>
\ No newline at end of file
diff --git a/EssentialUIKit/Images/SleepDuration.svg b/EssentialUIKit/Images/SleepDuration.svg
new file mode 100644
index 0000000..e87a4df
--- /dev/null
+++ b/EssentialUIKit/Images/SleepDuration.svg
@@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs><style>.cls-1{fill:#ff7e7e;}</style></defs><title>Sleep</title>
+  <path fill="#ff7e7e" class="cls-1" d="M28.09,26.88c-6.62,6.62-17.15,6.85-23.49.52s-6.1-16.87.52-23.49A17.46,17.46,0,0,1,10.86.08,1,1,0,0,1,12.19,1.4a14.2,14.2,0,0,0,2.88,15.53A14.2,14.2,0,0,0,30.6,19.81a1,1,0,0,1,1.32,1.33A17.46,17.46,0,0,1,28.09,26.88Z"/>
+</svg>
\ No newline at end of file
diff --git a/EssentialUIKit/Images/WaterConsumed.svg b/EssentialUIKit/Images/WaterConsumed.svg
new file mode 100644
index 0000000..3c8dbdb
--- /dev/null
+++ b/EssentialUIKit/Images/WaterConsumed.svg
@@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs><style>.cls-1{fill:#ff7e7e;}</style></defs><title>Water consumed</title>
+  <path fill="#ff7e7e" class="cls-1" d="M25.8,13.21,16.82.4a1,1,0,0,0-1.64,0l-9,12.81A11.94,11.94,0,0,0,16,32a11.94,11.94,0,0,0,9.8-18.79ZM22.36,24.92a7.91,7.91,0,0,1-6.23,2.93,1,1,0,1,1,0-2,5.93,5.93,0,0,0,4.68-2.2,6.16,6.16,0,0,0,1.28-5,1,1,0,0,1,2-.39A8,8,0,0,1,22.36,24.92Z"/>
+</svg>
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Article.cs b/EssentialUIKit/Models/Article.cs
index 727b5b4..e506eb8 100644
--- a/EssentialUIKit/Models/Article.cs
+++ b/EssentialUIKit/Models/Article.cs
@@ -1,5 +1,4 @@
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
+using EssentialUIKit.ViewModels;
 using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.Models
@@ -8,7 +7,7 @@ namespace EssentialUIKit.Models
     /// Model for Article templates.
     /// </summary>
     [Preserve(AllMembers = true)]
-    public class Article : INotifyPropertyChanged
+    public class Article : BaseViewModel
     {
         #region Fields
 
@@ -17,14 +16,10 @@ public class Article : INotifyPropertyChanged
         /// </summary>
         private bool isBookmarked;
 
-        #endregion
-
-        #region Event
-
         /// <summary>
-        /// The declaration of property changed event.
+        /// Gets or sets a value indicating whether the article is favourite.
         /// </summary>
-        public event PropertyChangedEventHandler PropertyChanged;
+        private bool isFavourite; 
 
         #endregion
 
@@ -45,6 +40,7 @@ public class Article : INotifyPropertyChanged
         /// </summary>
         public string Author { get; set; }
 
+
         /// <summary>
         /// Gets or sets the article publish date.
         /// </summary>
@@ -77,18 +73,38 @@ public bool IsBookmarked
             }
         }
 
-        #endregion
-
-        #region Methods
-
         /// <summary>
-        /// The PropertyChanged event occurs when changing the value of property.
+        /// Gets or sets a value indicating whether the article is favourite.
         /// </summary>
-        /// <param name="propertyName">Property name</param>
-        public void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
+        public bool IsFavourite
         {
-            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+            get
+            {
+                return this.isFavourite;
+            }
+
+            set
+            {
+                this.isFavourite = value;
+                this.NotifyPropertyChanged();
+            }
         }
+
+        /// <summary>
+        /// Gets or sets the bookmarked count.
+        /// </summary>
+        public int BookmarkedCount { get; set; }
+
+        /// <summary>
+        /// Gets or sets the favourite count.
+        /// </summary>
+        public int FavouritesCount { get; set; }
+
+        /// <summary>
+        /// Gets or sets the shared count.
+        /// </summary>
+        public int SharedCount { get; set; }
+
         #endregion
     }
 }
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Catalog/EventList.cs b/EssentialUIKit/Models/Catalog/EventList.cs
new file mode 100644
index 0000000..b9ba70b
--- /dev/null
+++ b/EssentialUIKit/Models/Catalog/EventList.cs
@@ -0,0 +1,100 @@
+using Syncfusion.XForms.Buttons;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Catalog
+{
+    /// <summary>
+    /// Model for Event list page
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class EventList
+    {
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the event image path.
+        /// </summary>
+        public string ImagePath { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event name.
+        /// </summary>
+        public string EventName { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event date.
+        /// </summary>
+        public string EventDate { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event time.
+        /// </summary>
+        public string EventTime { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event month.
+        /// </summary>
+        public string EventMonth { get; set; }
+
+        /// <summary>
+        /// Gets or sets the popular events in the list.
+        /// </summary>
+        public bool IsPopular { get; set; }
+
+        /// <summary>
+        /// Gets or sets the upcoming events in the list.
+        /// </summary>
+        public bool IsUpcoming { get; set; }
+
+        #endregion
+
+        #region Constructor
+
+        public EventList()
+        {
+            this.FavouriteCommand = new Command(this.FavouriteButtonClicked);
+        }
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command is executed when the favourite button is clicked.
+        /// </summary>
+        public Command FavouriteCommand { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the favourite button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void FavouriteButtonClicked(object obj)
+        {
+            var button = obj as SfButton;
+
+            if (button == null)
+            {
+                return;
+            }
+
+            if (button.Text == "\ue701")
+            {
+                button.Text = "\ue732";
+                Application.Current.Resources.TryGetValue("PrimaryColor", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+            else
+            {
+                button.Text = "\ue701";
+                Application.Current.Resources.TryGetValue("Gray-600", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+        }
+        #endregion
+
+    }
+}
diff --git a/EssentialUIKit/Models/Catalog/Travel.cs b/EssentialUIKit/Models/Catalog/Travel.cs
new file mode 100644
index 0000000..8801d09
--- /dev/null
+++ b/EssentialUIKit/Models/Catalog/Travel.cs
@@ -0,0 +1,82 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Catalog
+{
+    /// <summary>
+    /// Model for navigation travel page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class Travel : INotifyPropertyChanged
+    {
+        #region Fields
+
+        private bool isFavourite;
+
+        #endregion
+
+        #region Event
+
+        /// <summary>
+        /// The declaration of property changed event.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the travel place image path.
+        /// </summary>
+        public string ImagePath { get; set; }
+
+        /// <summary>
+        /// Gets or sets the travel place name.
+        /// </summary>
+        public string Place { get; set; }
+
+        /// <summary>
+        /// Gets or sets the travel place details.
+        /// </summary>
+        public string Details { get; set; }
+
+        /// <summary>
+        /// Gets or sets the price of travel place.
+        /// </summary>
+        public string Price { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the place is favourite or not.
+        /// </summary>
+        public bool IsFavourite
+        {
+            get
+            {
+                return this.isFavourite;
+            }
+
+            set
+            {
+                this.isFavourite = value;
+                this.NotifyPropertyChanged(nameof(IsFavourite));
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">Property name</param>
+        public void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Dashboard/Calorie.cs b/EssentialUIKit/Models/Dashboard/Calorie.cs
new file mode 100644
index 0000000..20f2593
--- /dev/null
+++ b/EssentialUIKit/Models/Dashboard/Calorie.cs
@@ -0,0 +1,30 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Dashboard
+{
+    /// <summary>
+    /// Model for daily calories report page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class Calorie
+    {
+        #region Property
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the quantity.
+        /// </summary>
+        public double Quantity { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the nutrients.
+        /// </summary>
+        public string Nutrient { get; set; }
+        
+        /// <summary>
+        /// Gets or sets the property that has been bound with button which displays the card items.
+        /// </summary>
+        public string Indicator { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Models/Dashboard/CaloriesCard.cs b/EssentialUIKit/Models/Dashboard/CaloriesCard.cs
new file mode 100644
index 0000000..7440d7a
--- /dev/null
+++ b/EssentialUIKit/Models/Dashboard/CaloriesCard.cs
@@ -0,0 +1,73 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using EssentialUIKit.Models.Dashboard;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Dashboard
+{
+    /// <summary>
+    /// Model for daily calories report page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class CaloriesCard : INotifyPropertyChanged
+    {
+        #region fields
+
+        /// <summary>
+        /// To store the button checkable status.
+        /// </summary>
+        private bool enableButton = false;
+
+        #endregion
+
+        #region Events
+
+        /// <summary>
+        /// The declaration of the property changed event.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+
+        #region Property
+
+        /// <summary>
+        /// Gets or sets the property that has been bound with button which displays the card items.
+        /// </summary>
+        public string Session { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the icon.
+        /// </summary>
+        public string Icon { get; set; }
+
+        public bool EnableButton
+        {
+            get { return enableButton; }
+            set
+            {
+                enableButton = value;
+                this.OnPropertyChanged("EnableButton");
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">Property name</param>
+        protected void OnPropertyChanged(string property)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
+        }
+
+        #endregion
+
+
+    }
+}
diff --git a/EssentialUIKit/Models/Dashboard/Event.cs b/EssentialUIKit/Models/Dashboard/Event.cs
new file mode 100644
index 0000000..178b68d
--- /dev/null
+++ b/EssentialUIKit/Models/Dashboard/Event.cs
@@ -0,0 +1,47 @@
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Dashboard
+{
+    /// <summary>
+    /// Model for the Daily timeline and Company history page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class Event
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the event name.
+        /// </summary>
+        [DataMember(Name = "name")]
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event decription.
+        /// </summary>
+        [DataMember(Name = "description")]
+        public string Description { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event time.
+        /// </summary>
+        [DataMember(Name = "time")]
+        public string Time { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event icon.
+        /// </summary>
+        [DataMember(Name = "icon")]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the event year.
+        /// </summary>
+        [DataMember(Name = "year")]
+        public int Year { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Models/Dashboard/Transaction.cs b/EssentialUIKit/Models/Dashboard/Transaction.cs
new file mode 100644
index 0000000..973b661
--- /dev/null
+++ b/EssentialUIKit/Models/Dashboard/Transaction.cs
@@ -0,0 +1,100 @@
+using System;
+using System.ComponentModel;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Dashboard
+{
+    /// <summary>
+    /// Model for the my wallet page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class Transaction : INotifyPropertyChanged
+    {
+        #region Fields
+
+        private string profileImage;
+
+        private bool isCredited;
+
+        #endregion
+
+        #region Events
+
+        /// <summary>
+        /// The declaration of the property changed event.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the profile image.
+        /// </summary>
+        public string ProfileImage
+        {
+            get { return App.BaseImageUrl + this.profileImage; }
+            set { this.profileImage = value; }
+        }
+
+        /// <summary>
+        /// Gets or sets the name.
+        /// </summary>
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the title.
+        /// </summary>
+        public string Title { get; set; }
+
+        /// <summary>
+        /// Gets or sets the amount.
+        /// </summary>
+        public double Amount { get; set; }
+
+        /// <summary>
+        /// Gets or sets the date.
+        /// </summary>
+        public DateTime Date { get; set; }
+
+        /// <summary>
+        /// Gets or sets the duration.
+        /// </summary>
+        public string Duration { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the transaction type is income or expense.
+        /// </summary>
+        public bool IsCredited
+        {
+            get
+            {
+                return this.isCredited;
+            }
+
+            set
+            {
+                this.isCredited = value;
+                this.OnPropertyChanged(nameof(IsCredited));
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">Property name</param>
+        protected void OnPropertyChanged(string property)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Dashboard/TransactionChartData.cs b/EssentialUIKit/Models/Dashboard/TransactionChartData.cs
new file mode 100644
index 0000000..80db69c
--- /dev/null
+++ b/EssentialUIKit/Models/Dashboard/TransactionChartData.cs
@@ -0,0 +1,56 @@
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Dashboard
+{
+    /// <summary>
+    /// Model for transaction chart data in my wallet page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class TransactionChartData
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the X-value.
+        /// </summary>
+        public string XValue { get; set; }
+
+        /// <summary>
+        /// Gets or sets the income value.
+        /// </summary>
+        public double Income { get; set; }
+
+        /// <summary>
+        /// Gets or sets the expense value.
+        /// </summary>
+        public double Expense { get; set; }
+
+        /// <summary>
+        /// Gets or sets the gap value for data.
+        /// </summary>
+        public double GapValue { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Method for transaction chart data.
+        /// </summary>
+        /// <param name="xValue"></param>
+        /// <param name="incomeValue"></param>
+        /// <param name="expenseValue"></param>
+        /// <param name="gap"></param>
+        public TransactionChartData(string xValue, double incomeValue, double expenseValue, double gap)
+        {
+            XValue = xValue;
+            Income = incomeValue;
+            Expense = expenseValue;
+            GapValue = gap;
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Detail/Address.cs b/EssentialUIKit/Models/Detail/Address.cs
new file mode 100644
index 0000000..9d65aff
--- /dev/null
+++ b/EssentialUIKit/Models/Detail/Address.cs
@@ -0,0 +1,34 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Detail
+{
+    /// <summary>
+    /// Model for my address page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class Address
+    {
+        #region Properties
+        /// <summary>
+        /// Gets or sets user name.
+        /// </summary>
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the address type.
+        /// </summary>
+        public string AddressType { get; set; }
+
+        /// <summary>
+        /// Gets or sets the location.
+        /// </summary>
+        public string Location { get; set; }
+
+        /// <summary>
+        /// Gets or sets the contact number.
+        /// </summary>
+        public string ContactNumber { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Models/Detail/DataTable.cs b/EssentialUIKit/Models/Detail/DataTable.cs
new file mode 100644
index 0000000..e261dd7
--- /dev/null
+++ b/EssentialUIKit/Models/Detail/DataTable.cs
@@ -0,0 +1,55 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Detail
+{
+    /// <summary>
+    /// Model for Data table
+    /// /// </summary>
+    [Preserve(AllMembers = true)]
+    public class DataTable
+    {
+        #region fields
+
+        private string imagePath;
+
+        #endregion
+
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the club image.
+        /// </summary>
+        public string ImagePath
+        {
+            get { return App.BaseImageUrl + this.imagePath; }
+            set { this.imagePath = value; }
+        }
+
+        /// <summary>
+        /// Gets or sets the serial number.
+        /// </summary>
+        public string SerialNumber { get; set; }
+
+        /// <summary>
+        /// Gets or sets the club name.
+        /// </summary>
+        public string ClubName { get; set; }
+      
+        /// <summary>
+        /// Gets or sets the gold points.
+        /// </summary>
+        public string GoldPoints { get; set; }
+
+        /// <summary>
+        /// Gets or sets the points.
+        /// </summary>
+        public string Points { get; set; }
+
+        /// <summary>
+        /// Gets or sets the match results.
+        /// </summary>
+        public string[] MatchResults { get; set; }
+
+    #endregion
+    }
+}
diff --git a/EssentialUIKit/Models/Detail/RoomDetail.cs b/EssentialUIKit/Models/Detail/RoomDetail.cs
new file mode 100644
index 0000000..ec4b7a4
--- /dev/null
+++ b/EssentialUIKit/Models/Detail/RoomDetail.cs
@@ -0,0 +1,160 @@
+using EssentialUIKit.ViewModels;
+using System;
+using System.Collections.ObjectModel;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Detail
+{
+    /// <summary>
+    /// Model for room booking page
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class RoomDetail : BaseViewModel
+    {
+        #region Fields
+
+        private string imagePath;
+
+        private int cost;
+
+        private string selectedRanges;
+        
+        private ObservableCollection<Review> reviews = new ObservableCollection<Review>();
+
+        #endregion
+
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the image path.
+        /// </summary>
+        public string ImagePath
+        {
+            get { return App.BaseImageUrl + this.imagePath; }
+            set { this.imagePath = value; }
+        }
+
+        /// <summary>
+        /// Gets or sets the selected ranges 
+        /// </summary>
+        public string SelectedRanges
+        {
+            get
+            {
+                return this.selectedRanges;
+            }
+
+            set
+            {
+                this.selectedRanges = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+       
+        /// <summary>
+        /// Gets or sets the cost of resort.
+        /// </summary>
+        public int Cost
+        {
+            get
+            {
+                return this.cost;
+            }
+
+            set
+            {
+                this.cost = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the total days.
+        /// </summary>
+        public int TotalDays { get; set; }
+       
+        /// <summary>
+        /// Gets or sets the name of the resort.
+        /// </summary>
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the display text.
+        /// </summary>
+        public string DisplayText { get; set; }
+
+        /// <summary>
+        /// Gets or sets the value text.
+        /// </summary>
+        public int ValueText { get; set; }
+
+        /// <summary>
+        /// Gets or sets the description of the resort.
+        /// </summary>
+        public string Description { get; set; }
+
+        /// <summary>
+        /// Gets or sets the overall of the resort.
+        /// </summary>
+        public double OverallRating { get; set; }
+
+        /// <summary>
+        /// Gets or sets the reviews of the resort.
+        /// </summary>
+        public string TotalReviews { get; set; }
+
+        /// <summary>
+        /// Gets or sets the resort description.
+        /// </summary>
+        public string ResortDescription { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the facility of resort.
+        /// </summary>
+        public string Facility { get; set; }
+
+        /// <summary>
+        /// Gets or sets the count of bed.
+        /// </summary>
+        public string[] BedCount { get; set; }
+
+        /// <summary>
+        /// Gets or sets the addresss of the resort.
+        /// </summary>
+        public string Address { get; set; }
+
+        /// <summary>
+        /// Gets or sets the phone number of the resort.
+        /// </summary>
+        public string PhoneNumber { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that bounds with a date picker .
+        /// </summary>
+        public DateTime Date { get; set; }
+
+        /// <summary>
+        /// Gets or sets the review of the customers .
+        /// </summary>
+        public ObservableCollection<Review> Reviews
+        {
+            get
+            {
+                return this.reviews;
+            }
+
+            set
+            {
+                this.reviews = value;
+                this.NotifyPropertyChanged(nameof(Reviews));
+            }
+        }
+
+        #endregion    
+    }
+}
diff --git a/EssentialUIKit/Models/HealthProfile.cs b/EssentialUIKit/Models/HealthProfile.cs
new file mode 100644
index 0000000..607a347
--- /dev/null
+++ b/EssentialUIKit/Models/HealthProfile.cs
@@ -0,0 +1,53 @@
+using System.ComponentModel;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models
+{
+    /// <summary>
+    /// Model for health profile page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class HealthProfile : INotifyPropertyChanged
+    {
+        #region Events
+
+        /// <summary>
+        /// The declaration of the property changed event.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+        #region Property
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the category.
+        /// </summary>
+        public string Category { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the category value.
+        /// </summary>
+        public string CategoryValue { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays the category image.
+        /// </summary>
+        public string ImagePath { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">Property name</param>
+        protected void OnPropertyChanged(string property)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Navigation/File.cs b/EssentialUIKit/Models/Navigation/File.cs
new file mode 100644
index 0000000..fb10d6c
--- /dev/null
+++ b/EssentialUIKit/Models/Navigation/File.cs
@@ -0,0 +1,35 @@
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Navigation
+{
+    /// <summary>
+    /// Model for the file explorer list page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class File
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the name of the folder.
+        /// </summary>
+        [DataMember(Name = "folderName")]
+        public string FolderName { get; set; }
+
+        /// <summary>
+        /// Gets or sets the number of items in the folder.
+        /// </summary>
+        [DataMember(Name = "items")]
+        public string Items { get; set; }
+
+        /// <summary>
+        /// Gets or sets the date and time of the folder.
+        /// </summary>
+        [DataMember(Name = "dateTime")]
+        public string DateTime { get; set; }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Navigation/Movie.cs b/EssentialUIKit/Models/Navigation/Movie.cs
index 616a0bc..d8d1435 100644
--- a/EssentialUIKit/Models/Navigation/Movie.cs
+++ b/EssentialUIKit/Models/Navigation/Movie.cs
@@ -10,6 +10,8 @@ namespace EssentialUIKit.Models.Navigation
     [DataContract]
     public class Movie
     {
+        private string image;
+
         #region Properties
         /// <summary>
         /// Gets or sets the movie name.
@@ -29,6 +31,23 @@ public class Movie
         [DataMember(Name = "movierating")]
         public string MovieRating { get; set; }
 
+        /// <summary>
+        /// Gets or sets the  image of the movie.
+        /// </summary>
+        [DataMember(Name = "image")]
+        public string Image
+        {
+            get
+            {
+                return App.BaseImageUrl + this.image;
+            }
+
+            set
+            {
+                this.image = value;
+            }
+        }
+
         #endregion
     }
 }
diff --git a/EssentialUIKit/Models/Notification/ECommerceNotificationsListModel.cs b/EssentialUIKit/Models/Notification/ECommerceNotificationsListModel.cs
new file mode 100644
index 0000000..c50c45a
--- /dev/null
+++ b/EssentialUIKit/Models/Notification/ECommerceNotificationsListModel.cs
@@ -0,0 +1,85 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Notification
+{
+    /// <summary>
+    /// Model for the E-Commerce notification page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class ECommerceNotificationsListModel : INotifyPropertyChanged
+    {
+        #region Field
+
+        private bool isRead;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the notification Icon.
+        /// </summary>
+        [DataMember(Name = "notificationIcon")]
+        public string NotificationIcon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the description.
+        /// </summary>
+        [DataMember(Name = "description")]
+        public string Description { get; set; }
+
+        /// <summary>
+        /// Gets or sets the background color inside the circular border.
+        /// </summary>
+        [DataMember(Name = "backgroundColor")]
+        public string BackgroundColor { get; set; }
+
+        /// <summary>
+        /// Gets or sets the time.
+        /// </summary>
+        [DataMember(Name = "time")]
+        public string Time { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the notification item is read or not.
+        /// </summary>
+        [DataMember(Name = "isRead")]
+        public bool IsRead
+        {
+            get { return isRead; }
+            set
+            {
+                isRead = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+
+        #region Event handler
+
+        /// <summary>
+        /// Occurs when the property is changed.
+        /// </summary>
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// The PropertyChanged event occurs when changing the value of property.
+        /// </summary>
+        /// <param name="propertyName">The PropertyName</param>
+        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Profile.cs b/EssentialUIKit/Models/Profile.cs
index 20a81a0..1181e69 100644
--- a/EssentialUIKit/Models/Profile.cs
+++ b/EssentialUIKit/Models/Profile.cs
@@ -1,4 +1,5 @@
-using Xamarin.Forms.Internals;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.Models
 {
@@ -8,6 +9,12 @@ namespace EssentialUIKit.Models
     [Preserve(AllMembers = true)]
     public class Profile
     {
+        #region Fields
+
+        private string imagePath;
+
+        #endregion
+
         #region Properties
 
         /// <summary>
@@ -16,10 +23,14 @@ public class Profile
         public string Name { get; set; }
 
         /// <summary>
-        /// Gets or sets the imagepath.
+        /// Gets or sets the image path.
         /// </summary>
-        public string ImagePath { get; set; }
+        public string ImagePath
+        {
+            get { return App.BaseImageUrl + this.imagePath; }
+            set { this.imagePath = value; }
+        }
 
         #endregion
     }
-}
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Models/Transaction/Card.cs b/EssentialUIKit/Models/Transaction/Card.cs
new file mode 100644
index 0000000..730190f
--- /dev/null
+++ b/EssentialUIKit/Models/Transaction/Card.cs
@@ -0,0 +1,54 @@
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Models.Transaction
+{
+    /// <summary>
+    /// Model for my cards page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class Card
+    {
+        #region Properties
+        /// <summary>
+        /// Gets or sets the card type.
+        /// </summary>
+        public string Type { get; set; }
+
+        /// <summary>
+        /// Gets or sets the card number.
+        /// </summary>
+        public string Number { get; set; }
+
+        /// <summary>
+        /// Gets or sets name of the card holder.
+        /// </summary>
+        public string Name { get; set; }
+
+        /// <summary>
+        /// Gets or sets the card expiry date.
+        /// </summary>
+        public string Expiry { get; set; }
+
+        /// <summary>
+        /// Gets or sets the card cvv.
+        /// </summary>
+        public int Cvv { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays  background gradient start.
+        /// </summary>
+        public string BackgroundGradientStart { get; set; }
+
+        /// <summary>
+        /// Gets or sets the property that has been displays  background gradient end.
+        /// </summary>
+        public string BackgroundGradientEnd { get; set; }
+
+        /// <summary>
+        /// Gets or sets the card type.
+        /// </summary>
+        public string CardTypeIcon { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/About/AboutUsViewModel.cs b/EssentialUIKit/ViewModels/About/AboutUsViewModel.cs
index d822398..45262b2 100644
--- a/EssentialUIKit/ViewModels/About/AboutUsViewModel.cs
+++ b/EssentialUIKit/ViewModels/About/AboutUsViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using EssentialUIKit.Models.About;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Article/ArticleParallaxHeaderPageViewModel.cs b/EssentialUIKit/ViewModels/Article/ArticleParallaxHeaderPageViewModel.cs
index d13eac6..75de990 100644
--- a/EssentialUIKit/ViewModels/Article/ArticleParallaxHeaderPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Article/ArticleParallaxHeaderPageViewModel.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Linq;
-using System.Text;
+using System.Collections.ObjectModel;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Syncfusion.XForms.Buttons;
diff --git a/EssentialUIKit/ViewModels/Article/ArticleWithCommentsPageViewModel.cs b/EssentialUIKit/ViewModels/Article/ArticleWithCommentsPageViewModel.cs
index a1ab528..ea26a6b 100644
--- a/EssentialUIKit/ViewModels/Article/ArticleWithCommentsPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Article/ArticleWithCommentsPageViewModel.cs
@@ -1,7 +1,4 @@
-using System;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Linq;
+using System.Collections.ObjectModel;
 using EssentialUIKit.Models;
 using Syncfusion.XForms.Buttons;
 using Xamarin.Forms;
diff --git a/EssentialUIKit/ViewModels/Article/MyArticlePageViewModel.cs b/EssentialUIKit/ViewModels/Article/MyArticlePageViewModel.cs
index 5255b41..e42a109 100644
--- a/EssentialUIKit/ViewModels/Article/MyArticlePageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Article/MyArticlePageViewModel.cs
@@ -1,5 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Model = EssentialUIKit.Models.Article;
diff --git a/EssentialUIKit/ViewModels/Bookmarks/BookmarksViewModel.cs b/EssentialUIKit/ViewModels/Bookmarks/BookmarksViewModel.cs
index d0335f6..ed6f690 100644
--- a/EssentialUIKit/ViewModels/Bookmarks/BookmarksViewModel.cs
+++ b/EssentialUIKit/ViewModels/Bookmarks/BookmarksViewModel.cs
@@ -1,7 +1,5 @@
 using EssentialUIKit.Controls;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Model = EssentialUIKit.Models.Article;
diff --git a/EssentialUIKit/ViewModels/Bookmarks/CartPageViewModel.cs b/EssentialUIKit/ViewModels/Bookmarks/CartPageViewModel.cs
index c38fb70..e309c7b 100644
--- a/EssentialUIKit/ViewModels/Bookmarks/CartPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Bookmarks/CartPageViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using EssentialUIKit.Models;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Bookmarks/WishlistViewModel.cs b/EssentialUIKit/ViewModels/Bookmarks/WishlistViewModel.cs
index 6ffa392..2049ce5 100644
--- a/EssentialUIKit/ViewModels/Bookmarks/WishlistViewModel.cs
+++ b/EssentialUIKit/ViewModels/Bookmarks/WishlistViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using System.Runtime.Serialization;
 using EssentialUIKit.Controls;
 using EssentialUIKit.Models;
diff --git a/EssentialUIKit/ViewModels/Catalog/ArticleCardViewModel.cs b/EssentialUIKit/ViewModels/Catalog/ArticleCardViewModel.cs
new file mode 100644
index 0000000..58e7ffe
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Catalog/ArticleCardViewModel.cs
@@ -0,0 +1,184 @@
+using Xamarin.Forms;
+using System.Collections.ObjectModel;
+using Syncfusion.XForms.Buttons;
+using Xamarin.Forms.Internals;
+using Model = EssentialUIKit.Models.Article;
+
+namespace EssentialUIKit.ViewModels.Catalog
+{
+    /// <summary>
+    /// ViewModel for Article card type page.
+    /// </summary> 
+    [Preserve(AllMembers = true)]
+    public class ArticleCardViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private Command<object> itemTappedCommand;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets a collction of value to be displayed in articles card page.
+        /// </summary>
+        public ObservableCollection<Model> Articles { get; set; }
+
+        /// <summary>
+        /// Gets the command that will be executed when an item is selected.
+        /// </summary>
+        public Command<object> ItemTappedCommand
+        {
+            get
+            {
+                return this.itemTappedCommand ?? (this.itemTappedCommand = new Command<object>(this.NavigateToNextPage));
+            }
+        }
+
+        #endregion
+
+        #region Constructor
+
+        public ArticleCardViewModel()
+        {
+            
+            this.BookmarkCommand = new Command(this.BookmarkButtonClicked);
+            this.AddFavouriteCommand = new Command(this.FavouriteButtonClicked);
+            this.ShareCommand = new Command(this.ShareButtonClicked);
+
+            this.Articles = new ObservableCollection<Model>()
+            {
+                new Model
+                {
+                    Name = "Better Brainstorming by Hand",
+                    Author = "John Doe",
+                    Date = "Apr 16",
+                    AverageReadingTime = "5 min read",
+                    ImagePath= App.BaseImageUrl + "ArticleParallaxHeaderImage.png",
+                    BookmarkedCount= 157,
+                    FavouritesCount= 100,
+                    SharedCount = 170
+                },
+                new Model
+                {
+                    Name = "Holistic Approach to UI Design",
+                    Author = "John Doe",
+                    Date = "Apr 28",
+                    AverageReadingTime = "5 min read",
+                    ImagePath= App.BaseImageUrl + "Event-Image.png",
+                    BookmarkedCount= 123,
+                    FavouritesCount= 60,
+                    SharedCount = 100
+                },
+                new Model
+                {
+                    Name = "Learning to Reset",
+                    Author = "John Doe",
+                    Date = "Aug 16",
+                    AverageReadingTime = "5 min read",
+                    ImagePath= App.BaseImageUrl + "ArticleImage2.png",
+                    BookmarkedCount= 213,
+                    FavouritesCount= 250,
+                    SharedCount = 210
+                },
+                new Model
+                {
+                    Name = "Music",
+                    Author = "John Doe",
+                    Date = "Aug 25",
+                    AverageReadingTime = "5 min read",
+                    ImagePath= App.BaseImageUrl + "ArticleImage7.jpg",
+                    BookmarkedCount= 263,
+                    FavouritesCount= 350,
+                    SharedCount = 300
+                },
+                new Model
+                {
+                    Name = "Guiding Your Flock to Success",
+                    Author = "John Doe",
+                    Date = "Apr 16",
+                    ImagePath= App.BaseImageUrl + "ArticleImage4.png",
+                    AverageReadingTime = "5 min read",
+                    BookmarkedCount= 113,
+                    FavouritesCount= 90,
+                    SharedCount = 190
+                },
+            };
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when an item is selected from the articles card list page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void NavigateToNextPage(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the favourite button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void FavouriteButtonClicked(object obj)
+        {
+            if (obj != null && (obj is Model))
+            {
+                (obj as Model).IsFavourite = (obj as Model).IsFavourite ? false : true;
+            }
+            else
+            {
+                var button = obj as SfButton;
+                if (button != null)
+                {
+                    button.Text = (button.Text == "\ue701") ? "\ue732" : "\ue701";
+                }
+            }
+        }
+
+        public void BookmarkButtonClicked(object obj)
+        {
+            if (obj != null && (obj is Model))
+            {
+                (obj as Model).IsBookmarked = (obj as Model).IsBookmarked ? false : true;
+            }
+            else
+            {
+                var button = obj as SfButton;
+                if (button != null)
+                {
+                    button.Text = (button.Text == "\ue72f") ? "\ue734" : "\ue72f";
+                }
+            }
+        }
+
+        private void ShareButtonClicked(object obj)
+        {
+            // Do Something.
+        }
+        #endregion
+
+        #region commands
+
+        /// <summary>
+        /// Gets or sets the command is executed when the bookmark button is clicked.
+        /// </summary>
+        public Command BookmarkCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the favourite button is clicked.
+        /// </summary>
+        public Command AddFavouriteCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the share button is clicked.
+        /// </summary>
+        public Command ShareCommand { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Catalog/ArticleListViewModel.cs b/EssentialUIKit/ViewModels/Catalog/ArticleListViewModel.cs
index 95c4882..93bbb39 100644
--- a/EssentialUIKit/ViewModels/Catalog/ArticleListViewModel.cs
+++ b/EssentialUIKit/ViewModels/Catalog/ArticleListViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Model = EssentialUIKit.Models.Article;
diff --git a/EssentialUIKit/ViewModels/Catalog/CatalogPageViewModel.cs b/EssentialUIKit/ViewModels/Catalog/CatalogPageViewModel.cs
index d0dc01a..a503149 100644
--- a/EssentialUIKit/ViewModels/Catalog/CatalogPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Catalog/CatalogPageViewModel.cs
@@ -1,9 +1,6 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using System.Runtime.Serialization;
-using Syncfusion.ListView.XForms;
 using EssentialUIKit.Models;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Catalog/CategoryPageViewModel.cs b/EssentialUIKit/ViewModels/Catalog/CategoryPageViewModel.cs
index 8ce8b64..30e484b 100644
--- a/EssentialUIKit/ViewModels/Catalog/CategoryPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Catalog/CategoryPageViewModel.cs
@@ -1,11 +1,5 @@
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using System.Runtime.Serialization;
-using System.Threading.Tasks;
-using Syncfusion.ListView.XForms;
-using Syncfusion.ListView.XForms.Control.Helpers;
 using EssentialUIKit.Models;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Catalog/EventListViewModel.cs b/EssentialUIKit/ViewModels/Catalog/EventListViewModel.cs
new file mode 100644
index 0000000..1286aff
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Catalog/EventListViewModel.cs
@@ -0,0 +1,230 @@
+using EssentialUIKit.Models.Catalog;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Catalog
+{
+    /// <summary>
+    /// ViewModel for event list page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class EventListViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private List<EventList> eventItems;
+
+        private List<EventList> popularEventItems;
+
+        private List<EventList> upcomingEventItems;
+
+        public int selectedIndex;
+
+        public string searchText;
+
+        public string allListSearchText;
+
+        public string upcomingListSearchText;
+
+        public string popularListSearchText;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="EventListViewModel" /> class.
+        /// </summary>
+         
+        public EventListViewModel()
+        {
+            this.EventItems = new List<EventList>()
+            {
+                 new EventList { ImagePath = App.BaseImageUrl +"Event-Image-two.png" , EventMonth="Dec",
+                                   EventName="Build Your Base, New York", EventDate="24", IsUpcoming=true, 
+                                   EventTime="2:00 PM - 6:00 PM"},
+                 new EventList {  ImagePath = App.BaseImageUrl +"Event-Image.png" , EventMonth="Dec",
+                                   EventName="Ignite Music, New York", EventDate="22",IsPopular=true,
+                                   EventTime="7:00 PM - 11:00 PM"},
+                 new EventList { ImagePath =  App.BaseImageUrl +"Event-Image-three.png" , EventMonth="Dec",
+                                   EventName="John Weds Jane, New York", EventDate="27", IsUpcoming=true,
+                                   EventTime="10:00 AM - 2:00 PM"},
+                 new EventList { ImagePath = App.BaseImageUrl +"Event-Image-one.png", EventMonth="Dec",
+                                   EventName="BigSounds, New York", EventDate="23",IsPopular=true,
+                                   EventTime="9:00 PM - 1:00 PM"}
+            };
+
+            this.PopularEventItems = EventItems.Where(item => item.IsUpcoming == true).ToList();
+
+            this.UpcomingEventItems = EventItems.Where(item => item.IsPopular == true).ToList();
+
+        }
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the event items collection.
+        /// </summary>
+        public List<EventList> EventItems
+        {
+            get
+            {
+                return this.eventItems;
+            }
+
+            set
+            {
+                this.eventItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the upcoming events collection.
+        /// </summary>
+        public List<EventList> UpcomingEventItems
+        {
+            get
+            {
+                return this.upcomingEventItems;
+            }
+
+            set
+            {
+                this.upcomingEventItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the popular events collection.
+        /// </summary>
+        public List<EventList> PopularEventItems
+        {
+            get
+            {
+                return this.popularEventItems;
+            }
+
+            set
+            {
+                this.popularEventItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the selected index of the event.
+        /// </summary>
+        public int SelectedIndex
+        {
+            get
+            {
+                return this.selectedIndex;
+            }
+
+            set
+            {
+                this.selectedIndex = value;
+                SearchText = string.Empty;
+
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the search text in the event.
+        /// </summary>
+        public string SearchText
+        {
+            get
+            {
+                return this.searchText;
+            }
+
+            set
+            {
+                this.searchText = value;
+                UpdateSelectedText();
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the all list search text in the collection.
+        /// </summary>
+        public string AllListSearchText
+        {
+            get
+            {
+                return this.allListSearchText;
+            }
+
+            set
+            {
+                allListSearchText = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the upcoming list search text in the collection.
+        /// </summary>
+        public string UpcomingListSearchText
+        {
+            get
+            {
+                return this.upcomingListSearchText;
+            }
+
+            set
+            {
+                upcomingListSearchText = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the popular list search text collection.
+        /// </summary>
+        public string PopularListSearchText
+        {
+            get
+            {
+                return this.popularListSearchText;
+            }
+
+            set
+            {
+                popularListSearchText = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        private void UpdateSelectedText()
+        {
+            switch (selectedIndex)
+            {
+                case 0:
+                    AllListSearchText = searchText;
+                    break;
+
+                case 1:
+                    UpcomingListSearchText = searchText;
+                    break;
+
+                case 2:
+                    PopularListSearchText = searchText;
+                    break;
+            }
+        }
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Catalog/NavigationTravelPageViewModel.cs b/EssentialUIKit/ViewModels/Catalog/NavigationTravelPageViewModel.cs
new file mode 100644
index 0000000..6fb8f60
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Catalog/NavigationTravelPageViewModel.cs
@@ -0,0 +1,316 @@
+using System.Collections.ObjectModel;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Model = EssentialUIKit.Models.Catalog.Travel;
+
+namespace EssentialUIKit.ViewModels.Catalog
+{
+    /// <summary>
+    /// ViewModel for navigation travel page.
+    /// </summary> 
+    [Preserve(AllMembers = true)]
+    public class NavigationTravelPageViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private ObservableCollection<Model> travelPlaces;
+
+        private ObservableCollection<Model> topDestinations;
+
+        private ObservableCollection<Model> bestPlaces;
+
+        private Command addFavouriteCommand;
+
+        private Command selectionCommand;
+
+        private int selectedIndex;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="NavigationTravelPageViewModel" /> class.
+        /// </summary>
+        public NavigationTravelPageViewModel()
+        {
+            this.TravelPlaces = new ObservableCollection<Model>
+            {
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Surf-hotel-in-dubai.jpeg",
+                    Place = "Dubai",
+                    Details = "A melting pot of cultures, Dubai is the most advanced city in the Arab world. Lined with luxury resorts, there are activities for every interest, from camel racing to fossil cliffs to extravagant shopping opportunities."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Mount-fuji.jpeg",
+                    Place = "Mount Fuji",
+                    Details = "Japan’s most famous, holy mountain dominates the landscape of three prefectures—when you can see it. Fuji-san is shy and often obscured by clouds, but take the slow train through Shizuoka, or go shopping at the grand Gotemba outlet mall and you might get lucky."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "London.jpeg",
+                    Place = "London",
+                    Details = "The bustling capital of the United Kingdom has enough historical landmarks, architectural beauties, and free museums to keep even the pickiest traveler occupied for days, if not weeks."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Singapore.jpeg",
+                    Place = "Singapore",
+                    Details = "At only 725 sq. km., Singapore is one of the smallest countries in the world, but it packs a major punch in terms of reasons to visit."
+                }
+            };
+
+            this.TopDestinations = new ObservableCollection<Model>
+            {
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Venice.jpeg",
+                    Place = "Venice, Italy",
+                    Details = "Venice is arguably the most beautiful city in the world. The world seems to agree, sending 30 million tourists to walk its cobblestone streets, cross its ornate bridges, and sail down its elegant canals every year."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Santorini-greece.jpeg",
+                    Place = "Santorini, Greece",
+                    Details = "The result of volcanic eruptions that devastated ancient civilizations, Santorini, locally known as Thira, is now a tourism must-do. The white buildings and blue roofs of Oia town are an icon of Greece itself."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Salt-Pond-Bay-Thailand.jpeg",
+                    Place = "Maya Beach, Thailand",
+                    Details = "The crystal blue waters of this cove were made famous by the 2000 movie The Beach. Surrounded by dramatic cliffs and a white-sand beach, Maya Beach is a popular day trip."
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Gran-via-Valencia.jpeg",
+                    Place = "Madrid, Spain",
+                    Details = "The capital of Spain tends to be overlooked in favor of the colorful Barcelona, but this city has a glamor of its own."
+                },
+            };
+
+            this.BestPlaces = new ObservableCollection<Model>
+            {
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Salt-Pond-Bay-Thailand.jpeg",
+                    Place = "Maya Bay, Thailand"
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Gran-via-Valencia.jpeg",
+                    Place = "Madrid, Spain"
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Venice.jpeg",
+                    Place = "Venice, Italy"
+                },
+                new Model
+                {
+                    ImagePath = App.BaseImageUrl + "Santorini-greece.jpeg",
+                    Place = "Santorini, Greece"
+                },
+            };
+
+            this.TravelPlacesCommand = new Command(this.TravelPlacesClicked);
+            this.TopDestinationsCommand = new Command(this.TopDestinationsClicked);
+            this.BestPlacesCommand = new Command(this.BestPlacesClicked);
+            this.ItemSelectedCommand = new Command(this.ItemSelected);
+        }
+
+        #endregion
+
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the property that has been bound with the rotator view, which displays the travel places and details.
+        /// </summary>
+        public ObservableCollection<Model> TravelPlaces
+        {
+            get
+            {
+                return this.travelPlaces;
+            }
+
+            set
+            {
+                if (this.travelPlaces == value)
+                {
+                    return;
+                }
+
+                this.travelPlaces = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the property which displays top destinations, details and price.
+        /// </summary>
+        public ObservableCollection<Model> TopDestinations
+        {
+            get
+            {
+                return this.topDestinations;
+            }
+
+            set
+            {
+                if (this.topDestinations == value)
+                {
+                    return;
+                }
+
+                this.topDestinations = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the property which displays the names and images of best places.
+        /// </summary>
+        public ObservableCollection<Model> BestPlaces
+        {
+            get
+            {
+                return this.bestPlaces;
+            }
+
+            set
+            {
+                if (this.bestPlaces == value)
+                {
+                    return;
+                }
+
+                this.bestPlaces = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the selected index of the rotator.
+        /// </summary>
+        public int SelectedIndex
+        {
+            get { return selectedIndex; }
+            set
+            {
+                if (selectedIndex == value)
+                {
+                    return;
+                }
+                selectedIndex = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command that will executed when the travel places item is clicked.
+        /// </summary>
+        public Command TravelPlacesCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that will executed when the top destinations item is clicked.
+        /// </summary>
+        public Command TopDestinationsCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that will executed when the best places item is clicked.
+        /// </summary>
+        public Command BestPlacesCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that will be executed when an item is selected.
+        /// </summary>
+        public Command ItemSelectedCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that will be executed when the favourite button is clicked.
+        /// </summary>
+        public Command AddFavouriteCommand
+        {
+            get
+            {
+                return this.addFavouriteCommand ?? (this.addFavouriteCommand = new Command(this.AddFavouriteClicked));
+            }
+        }
+
+        // <summary>
+        /// Gets or sets the command that will be executed when carousel view item is swiped.
+        /// </summary>   
+        public Command SelectionCommand
+        {
+            get
+            {
+                return this.selectionCommand ?? (this.selectionCommand = new Command(this.SelectionClicked));
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the the travel places item is clicked.
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void TravelPlacesClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the the top destinations item is clicked.
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void TopDestinationsClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the the best places item is clicked.
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void BestPlacesClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when an item is selected.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void ItemSelected(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the favourite button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void AddFavouriteClicked(object obj)
+        {
+            if (obj is Model travel)
+                travel.IsFavourite = !travel.IsFavourite;
+        }
+
+        /// <summary>
+        /// Invoked when carousel view item is swiped.
+        /// </summary>
+        /// <param name="obj">The rotator item</param>
+        private void SelectionClicked(object obj)
+        {
+            this.SelectedIndex = this.TravelPlaces.IndexOf(obj);
+        }
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/ViewModels/Catalog/ProductHomePageViewModel.cs b/EssentialUIKit/ViewModels/Catalog/ProductHomePageViewModel.cs
index e8f7b12..eb3dedf 100644
--- a/EssentialUIKit/ViewModels/Catalog/ProductHomePageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Catalog/ProductHomePageViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using System.Runtime.Serialization;
 using EssentialUIKit.Models;
 using Xamarin.Forms;
diff --git a/EssentialUIKit/ViewModels/Chat/ChatMessageViewModel.cs b/EssentialUIKit/ViewModels/Chat/ChatMessageViewModel.cs
index 95cea53..4d412aa 100644
--- a/EssentialUIKit/ViewModels/Chat/ChatMessageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Chat/ChatMessageViewModel.cs
@@ -1,7 +1,5 @@
 using System;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using EssentialUIKit.Models.Chat;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Chat/RecentChatViewModel.cs b/EssentialUIKit/ViewModels/Chat/RecentChatViewModel.cs
index 65423ad..c6fe6dd 100644
--- a/EssentialUIKit/ViewModels/Chat/RecentChatViewModel.cs
+++ b/EssentialUIKit/ViewModels/Chat/RecentChatViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using EssentialUIKit.Models.Chat;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/ContactUs/ContactUsViewModel.cs b/EssentialUIKit/ViewModels/ContactUs/ContactUsViewModel.cs
index 2e63ae4..add3746 100644
--- a/EssentialUIKit/ViewModels/ContactUs/ContactUsViewModel.cs
+++ b/EssentialUIKit/ViewModels/ContactUs/ContactUsViewModel.cs
@@ -1,8 +1,6 @@
 using System;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
 using System.Globalization;
-using System.Runtime.CompilerServices;
 using System.Windows.Input;
 using EssentialUIKit.Models.ContactUs;
 using Syncfusion.SfMaps.XForms;
diff --git a/EssentialUIKit/ViewModels/Dashboard/CompanyHistoryViewModel.cs b/EssentialUIKit/ViewModels/Dashboard/CompanyHistoryViewModel.cs
new file mode 100644
index 0000000..294f488
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Dashboard/CompanyHistoryViewModel.cs
@@ -0,0 +1,76 @@
+using System.Collections.ObjectModel;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models.Dashboard;
+
+namespace EssentialUIKit.ViewModels.Dashboard
+{
+    /// <summary>
+    /// ViewModel for company history page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class CompanyHistoryViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private string companyName;
+        private string companyDescription;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="CompanyHistoryViewModel"/> class.
+        /// </summary>
+        public CompanyHistoryViewModel()
+        {
+        }
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets a collction of value to be displayed in company history page.
+        /// </summary>
+        [DataMember(Name = "companyHistory")]
+        public ObservableCollection<Event> CompanyHistory { get; set; }
+
+        /// <summary>
+        /// Gets or sets name of the company to be displayed in company history page.
+        /// </summary>
+        [DataMember(Name = "companyName")]
+        public string CompanyName
+        {
+            get
+            {
+                return companyName;
+            }
+            set
+            {
+                companyName = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets description about the company to be displayed in company history page.
+        /// </summary>
+        [DataMember(Name = "companyDescription")]
+        public string CompanyDescription
+        {
+            get
+            {
+                return companyDescription;
+            }
+            set
+            {
+                companyDescription = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Dashboard/DailyCaloriesReportViewModel.cs b/EssentialUIKit/ViewModels/Dashboard/DailyCaloriesReportViewModel.cs
new file mode 100644
index 0000000..b1e6299
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Dashboard/DailyCaloriesReportViewModel.cs
@@ -0,0 +1,230 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using EssentialUIKit.Models.Dashboard;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Dashboard
+{
+    /// <summary>
+    /// ViewModel for daily calories report.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class DailyCaloriesReportViewModel : BaseViewModel
+    {
+        #region Field
+        
+        /// <summary>
+        /// Gets or sets the selected session card item.
+        /// </summary>
+        public CaloriesCard SelectedSessionCaloriesCard { get; set; }
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="DailyCaloriesReportViewModel" /> class.
+        /// </summary>
+        public DailyCaloriesReportViewModel()
+        {
+            CardItems = new List<CaloriesCard>()
+            {
+                new CaloriesCard()
+                {
+                    Icon = "\ue750",
+                    Session = "Breakfast",
+                    EnableButton = true
+                },
+                new CaloriesCard()
+                {
+                    Icon = "\ue74e",
+                    Session = "Lunch"
+                },
+                new CaloriesCard()
+                {
+                    Icon = "\ue74f",
+                    Session = "Dinner"
+                },
+                new CaloriesCard()
+                {
+                    Icon = "\ue74b",
+                    Session = "Snack"
+                }
+            };
+
+            BreakfastCalories = new ObservableCollection<Calorie>()
+            {
+                new Calorie()
+                {
+                    Quantity = 30, Nutrient = "Fiber", Indicator = "#5588fe"
+                },
+                new Calorie()
+                {
+                    Quantity = 260, Nutrient = "Protein", Indicator = "#7cf74c"
+                },
+                new Calorie()
+                {
+                    Quantity = 80, Nutrient = "Carbs", Indicator = "#fd50c8"
+                },
+                new Calorie()
+                {
+                    Quantity = 100, Nutrient = "Calcium", Indicator = "#ffdd7c"
+                },
+                new Calorie()
+                {
+                    Quantity = 40, Nutrient = "Fat", Indicator = "#fe6751"
+                },
+                new Calorie()
+                {
+                    Quantity = 60, Nutrient = "Vitamins", Indicator = "#7d46c2"
+                },
+            };
+
+            DinnerCalories = new ObservableCollection<Calorie>()
+            {
+                new Calorie()
+                {
+                    Quantity = 20, Nutrient = "Fibre", Indicator = "#5588fe"
+                },
+                new Calorie()
+                {
+                    Quantity = 210, Nutrient = "Protein", Indicator = "#7cf74c"
+                },
+                new Calorie()
+                {
+                    Quantity = 50, Nutrient = "Carbs", Indicator = "#fd50c8"
+                },
+                new Calorie()
+                {
+                    Quantity = 140, Nutrient = "Calcium", Indicator = "#ffdd7c"
+                },
+                new Calorie()
+                {
+                    Quantity = 20, Nutrient = "Fat", Indicator = "#fe6751"
+                },
+                new Calorie()
+                {
+                    Quantity = 100, Nutrient = "Vitamins", Indicator = "#7d46c2"
+                },
+
+            };
+
+            LunchCalories = new ObservableCollection<Calorie>()
+            {
+                new Calorie()
+                {
+                    Quantity = 40, Nutrient = "Fibre", Indicator = "#5588fe"
+                },
+                new Calorie()
+                {
+                    Quantity = 210, Nutrient = "Protein", Indicator = "#7cf74c"
+                },
+                new Calorie()
+                {
+                    Quantity = 120, Nutrient = "Carbs", Indicator = "#fd50c8"
+                },
+                new Calorie()
+                {
+                    Quantity = 40, Nutrient = "Calcium", Indicator = "#ffdd7c"
+                },
+                new Calorie()
+                {
+                    Quantity = 50, Nutrient = "Fat", Indicator = "#fe6751"
+                },
+                new Calorie()
+                {
+                    Quantity = 90, Nutrient = "Vitamins", Indicator = "#7d46c2"
+                },
+
+            };
+
+            SnackCalories = new ObservableCollection<Calorie>()
+            {
+                new Calorie()
+                {
+                    Quantity = 40, Nutrient = "Fibre", Indicator = "#5588fe"
+                },
+                new Calorie()
+                {
+                    Quantity = 210, Nutrient = "Protein", Indicator = "#7cf74c"
+                },
+                new Calorie()
+                {
+                    Quantity = 70, Nutrient = "Carbs", Indicator = "#fd50c8"
+                },
+                new Calorie()
+                {
+                    Quantity = 130, Nutrient = "Calcium", Indicator = "#ffdd7c"
+                },
+                new Calorie()
+                {
+                    Quantity = 60, Nutrient = "Fat", Indicator = "#fe6751"
+                },
+                new Calorie()
+                {
+                    Quantity = 80, Nutrient = "Vitamins", Indicator = "#7d46c2"
+                },
+
+            };
+
+            SelectedSessionCaloriesCard = CardItems[0];
+
+            this.SessionCommand = new Command(this.SessionButtonClicked);
+        }
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command that will be executed when the session button is clicked.
+        /// </summary>
+        public Command SessionCommand { get; set; }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the session card items collection.
+        /// </summary>
+        public List<CaloriesCard> CardItems { get; set; }
+
+        /// <summary>
+        /// Gets or sets the breakfast calories collection.
+        /// </summary>
+        public ObservableCollection<Calorie> BreakfastCalories { get; set; }
+
+        /// <summary>
+        /// Gets or sets the lunch calories collection.
+        /// </summary>
+        public ObservableCollection<Calorie> LunchCalories { get; set; }
+
+        /// <summary>
+        /// Gets or sets the dinner calories collection.
+        /// </summary>
+        public ObservableCollection<Calorie> DinnerCalories { get; set; }
+
+        /// <summary>
+        /// Gets or sets the snack calories collection.
+        /// </summary>
+        public ObservableCollection<Calorie> SnackCalories { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the session button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void SessionButtonClicked(object obj)
+        {
+            // Do something
+        }
+        
+        #endregion
+
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Dashboard/DailyTimelineViewModel.cs b/EssentialUIKit/ViewModels/Dashboard/DailyTimelineViewModel.cs
new file mode 100644
index 0000000..7c45b15
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Dashboard/DailyTimelineViewModel.cs
@@ -0,0 +1,36 @@
+using EssentialUIKit.Models.Dashboard;
+using System.Collections.ObjectModel;
+using System.Runtime.Serialization;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Dashboard
+{
+    /// <summary>
+    /// ViewModel for Daily Timeline page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class DailyTimelineViewModel : BaseViewModel
+    {
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="DailyTimelineViewModel"/> class.
+        /// </summary>
+        public DailyTimelineViewModel()
+        {
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets a collction of value to be displayed in Daily timeline page.
+        /// </summary>
+        [DataMember(Name = "dailyTimeline")]
+        public ObservableCollection<Event> DailyTimeline { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Dashboard/MyWalletViewModel.cs b/EssentialUIKit/ViewModels/Dashboard/MyWalletViewModel.cs
new file mode 100644
index 0000000..4b83a61
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Dashboard/MyWalletViewModel.cs
@@ -0,0 +1,573 @@
+using System;
+using System.Collections.ObjectModel;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models.Dashboard;
+using Model = EssentialUIKit.Models.Dashboard.Transaction;
+using System.Linq;
+
+namespace EssentialUIKit.ViewModels.Dashboard
+{
+    /// <summary>
+    /// ViewModel for my wallet page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class MyWalletViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private int selectedIndex;
+
+        private double totalBalance;
+
+        private string[] days, weeks, months, xValues;
+
+        private ObservableCollection<Model> weekListItems;
+
+        private ObservableCollection<Model> monthListItems;
+
+        private ObservableCollection<Model> yearListItems;
+
+        private ObservableCollection<Model> listItems;
+
+        public ObservableCollection<TransactionChartData> ChartData { get; set; }
+
+        public ObservableCollection<Model> DataSource { get; set; }
+
+        private Command<object> itemTappedCommand;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="MyWalletViewModel" /> class.
+        /// </summary>
+        public MyWalletViewModel()
+        {
+            WeekData();
+            MonthData();
+            YearData();
+            days = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };
+            weeks = new string[] { "Week 1", "Week 2", "Week 3", "Week 4" };
+            months = new string[] { "Jan", "Mar", "May", "Jul", "Sep", "Nov" };
+            ChartData = new ObservableCollection<TransactionChartData>();
+            DataSource = new ObservableCollection<Model>()
+            {
+                new Model(){ Duration = "Week" },
+                new Model(){ Duration = "Month" },
+                new Model(){ Duration = "Year" },
+            };
+            ListItems = WeekListItems;
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the my wallet items collection in a week.
+        /// </summary>
+        public ObservableCollection<Model> WeekListItems
+        {
+            get
+            {
+                return this.weekListItems;
+            }
+
+            set
+            {
+                this.weekListItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the my wallet items collection in a month.
+        /// </summary>
+        public ObservableCollection<Model> MonthListItems
+        {
+            get
+            {
+                return this.monthListItems;
+            }
+
+            set
+            {
+                this.monthListItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the my wallet items collection in a year.
+        /// </summary>
+        public ObservableCollection<Model> YearListItems
+        {
+            get
+            {
+                return this.yearListItems;
+            }
+
+            set
+            {
+                this.yearListItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the my wallet items collection.
+        /// </summary>
+        public ObservableCollection<Model> ListItems
+        {
+            get
+            {
+                return this.listItems;
+            }
+
+            set
+            {
+                this.listItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when an item is selected.
+        /// </summary>
+        public Command<object> ItemTappedCommand
+        {
+            get
+            {
+                return this.itemTappedCommand ?? (this.itemTappedCommand = new Command<object>(this.NavigateToNextPage));
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the selected index of combobox.
+        /// </summary>
+        public int SelectedIndex
+        {
+            get
+            {
+                return selectedIndex;
+            }
+            set
+            {
+                this.selectedIndex = value;
+                UpdateListViewData();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the total balance remaining in the wallet.
+        /// </summary>
+        public double TotalBalance
+        {
+            get
+            {
+                return totalBalance;
+            }
+            set
+            {
+                this.totalBalance = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Week data collection.
+        /// </summary>
+        private void WeekData()
+        {
+            weekListItems = new ObservableCollection<Model>()
+            {
+                new Model()
+                {
+                    ProfileImage = "ProfileImage1.png",
+                    Name = "Phillip Estrada",
+                    Title = "Cash Back",
+                    Amount = 50,
+                    Date = new DateTime(2019, 1, 7),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 50,
+                    Date = new DateTime(2019, 1, 7),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage="ProfileImage11.png",
+                    Name = "Essie Hansen",
+                    Title = "XXXXXXX6585",
+                    Amount = 60,
+                    Date = new DateTime(2019, 1, 6),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 40,
+                    Date = new DateTime(2019, 1, 6),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage7.png",
+                    Name = "Amelia Coleman",
+                    Title = "Refund",
+                    Amount = 40,
+                    Date = new DateTime(2019, 1, 5),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Recharge",
+                    Amount = 60,
+                    Date = new DateTime(2019, 1, 5),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage2.png",
+                    Name = "Alta Sims",
+                    Title = "Cash Back",
+                    Amount = 60,
+                    Date = new DateTime(2019, 1, 4),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 40.25,
+                    Date = new DateTime(2019, 1, 4),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage3.png",
+                    Name = "Blake Moore",
+                    Title = "XXXXXXX6585",
+                    Amount = 45,
+                    Date = new DateTime(2019, 1, 3),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 55,
+                    Date = new DateTime(2019, 1, 3),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage4.png",
+                    Name = "Chase Blair",
+                    Title = "Refund",
+                    Amount = 65,
+                    Date = new DateTime(2019, 1, 2),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 35,
+                    Date = new DateTime(2019, 1, 2),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage5.png",
+                    Name = "Bernard Daniels",
+                    Title = "Cash Back",
+                    Amount = 35,
+                    Date = new DateTime(2019, 1, 1),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 65,
+                    Date = new DateTime(2019, 1, 1),
+                    IsCredited = false
+                }
+            };
+        }
+
+        /// <summary>
+        /// Month data collection.
+        /// </summary>
+        private void MonthData()
+        {
+            monthListItems = new ObservableCollection<Model>()
+            {
+                new Model()
+                {
+                    ProfileImage = "ProfileImage7.png",
+                    Name = "Amelia Coleman",
+                    Title = "Refund",
+                    Amount = 85,
+                    Date = new DateTime(2019, 1, 28),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 15.75,
+                    Date = new DateTime(2019, 1, 26),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage6.png",
+                    Name = "Arthur Kim",
+                    Title = "XXXXXXX6585",
+                    Amount = 65,
+                    Date = new DateTime(2019, 1, 20),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Delivery Bill",
+                    Amount = 35,
+                    Date = new DateTime(2019, 1, 18),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage9.png",
+                    Name = "Bettie Conlon",
+                    Title = "Refund",
+                    Amount = 40,
+                    Date = new DateTime(2019, 1, 12),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food Order Bill",
+                    Amount = 60,
+                    Date = new DateTime(2019, 1, 10),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage11.png",
+                    Name = "Essie Hansen",
+                    Title = "Cashback",
+                    Amount = 30,
+                    Date = new DateTime(2019, 1, 6),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Food order Bill",
+                    Amount = 70,
+                    Date = new DateTime(2019, 1, 5),
+                    IsCredited = false
+                },
+            };
+        }
+
+        /// <summary>
+        /// Year data collection.
+        /// </summary>
+        private void YearData()
+        {
+            yearListItems = new ObservableCollection<Model>()
+            {
+                new Model()
+                {
+                    ProfileImage = "ProfileImage6.png",
+                    Name = "Arthur Kim",
+                    Title = "XXXXXXX6585",
+                    Amount = 65,
+                    Date = new DateTime(2019, 11, 24),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Delivery Bill",
+                    Amount = 35,
+                    Date = new DateTime(2019, 11, 2),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage7.png",
+                    Name = "Amelia Coleman",
+                    Title = "XXXXXXX6585",
+                    Amount = 70,
+                    Date = new DateTime(2019, 9, 21),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 30.50,
+                    Date = new DateTime(2019, 9, 8),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage2.png",
+                    Name = "Alta Sims",
+                    Title = "XXXXXXX6585",
+                    Amount = 50,
+                    Date = new DateTime(2019, 7, 18),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 50,
+                    Date = new DateTime(2019, 7, 12),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage3.png",
+                    Name = "Blake Moore",
+                    Title = "Refund",
+                    Amount = 35,
+                    Date = new DateTime(2019, 5, 21),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 65,
+                    Date = new DateTime(2019, 5, 15),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage4.png",
+                    Name = "Chase Blair",
+                    Title = "XXXXXXX6585",
+                    Amount = 20,
+                    Date = new DateTime(2019, 3, 15),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 80,
+                    Date = new DateTime(2019, 3, 5),
+                    IsCredited = false
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage6.png",
+                    Name = "Arthur Kim",
+                    Title = "Cashback",
+                    Amount = 85,
+                    Date = new DateTime(2019, 1, 26),
+                    IsCredited = true
+                },
+                new Model()
+                {
+                    ProfileImage = "ProfileImage8.png",
+                    Name = "Nell Sanchez",
+                    Title = "Credit Card Bill",
+                    Amount = 15,
+                    Date = new DateTime(2019, 1, 13),
+                    IsCredited = false
+                }
+            };
+        }
+
+        /// <summary>
+        /// Method for update the listview items.
+        /// </summary>
+        private void UpdateListViewData()
+        {
+            switch (SelectedIndex)
+            {
+                case 0:
+                    ListItems = WeekListItems;
+                    xValues = days;
+                    break;
+                case 1:
+                    ListItems = MonthListItems;
+                    xValues = weeks;
+                    break;
+                case 2:
+                    ListItems = YearListItems;
+                    xValues = months;
+                    break;
+                default:
+                    break;
+            }
+            UpdateChartData();
+        }
+
+        /// <summary>
+        /// Method for update the chart data.
+        /// </summary>
+        private void UpdateChartData()
+        {
+            ChartData.Clear();
+            TotalBalance = 0;
+
+            var incomeCollection = ListItems.Where(item => item.IsCredited).ToList();
+            var expenseCollection = ListItems.Where(item => !item.IsCredited).ToList();
+
+            for (int i = 0; i < incomeCollection.Count; i++)
+            {
+                TotalBalance += incomeCollection[i].Amount;
+                TotalBalance -= expenseCollection[i].Amount;
+                ChartData.Add(new TransactionChartData(xValues[i], incomeCollection[i].Amount, expenseCollection[i].Amount, 4));
+            }
+        }
+
+        /// <summary>
+        /// Invoked when an item is selected from the my wallet page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void NavigateToNextPage(object selectedItem)
+        {
+            // Do something
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/ViewModels/Dashboard/StockOverviewViewModel.cs b/EssentialUIKit/ViewModels/Dashboard/StockOverviewViewModel.cs
index ac3b183..f57e8d1 100644
--- a/EssentialUIKit/ViewModels/Dashboard/StockOverviewViewModel.cs
+++ b/EssentialUIKit/ViewModels/Dashboard/StockOverviewViewModel.cs
@@ -1,7 +1,6 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
 using System.Linq;
 using EssentialUIKit.Models.Dashboard;
 using Syncfusion.SfChart.XForms;
diff --git a/EssentialUIKit/ViewModels/Detail/ArticleDetailPageViewModel.cs b/EssentialUIKit/ViewModels/Detail/ArticleDetailPageViewModel.cs
index ff46359..f1b13ca 100644
--- a/EssentialUIKit/ViewModels/Detail/ArticleDetailPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Detail/ArticleDetailPageViewModel.cs
@@ -1,5 +1,4 @@
 using System.Collections.ObjectModel;
-using System.ComponentModel;
 using Syncfusion.XForms.Buttons;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Detail/DataTableViewModel.cs b/EssentialUIKit/ViewModels/Detail/DataTableViewModel.cs
new file mode 100644
index 0000000..0817036
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Detail/DataTableViewModel.cs
@@ -0,0 +1,237 @@
+using System.Collections.Generic;
+using EssentialUIKit.Models.Detail;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Detail
+{
+    /// <summary>
+    /// View model for data table 
+    /// </summary> 
+    [Preserve(AllMembers = true)]
+    public class DataTableViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private List<DataTable> items;
+
+        #endregion
+
+        #region Constructor
+        /// <summary>
+        /// Initializes a new instance of the <see cref="DataTableViewModel" /> class.
+        /// </summary>
+        public DataTableViewModel()
+        {
+            this.Items = new List<DataTable>
+            {
+                new DataTable
+                {
+                    ImagePath = "Liverpool-FC.png",
+                    SerialNumber = "1",
+                    ClubName = "LIV",
+                    GoldPoints = "+28",
+                    Points = "49",
+                    MatchResults = new string[5]{ "#7ed321", "#7ed321", "#7ed321", "#7ed321", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Leicester-City.png",
+                    SerialNumber = "2",
+                    ClubName = "LEI",
+                    GoldPoints = "+29",
+                    Points = "39",
+                    MatchResults = new string[5]{ "#7ed321", "#7ed321", "#7ed321", "#7ed321", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Manchester-City.png",
+                    SerialNumber = "3",
+                    ClubName = "MCI",
+                    GoldPoints = "+28",
+                    Points = "49",
+                    MatchResults = new string[5]{ "#7ed321", "#b2b8c2", "#7ed321", "#ff4a4a", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Chelsea.png",
+                    SerialNumber = "4",
+                    ClubName = "CHE",
+                    GoldPoints = "+6",
+                    Points = "29",
+                    MatchResults = new string[5]{ "#ff4a4a", "#ff4a4a", "#7ed321", "#ff4a4a", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Tottenham-Hotspur.png",
+                    SerialNumber = "5",
+                    ClubName = "TOT",
+                    GoldPoints = "+8",
+                    Points = "26",
+                    MatchResults = new string[5]{ "#7ed321", "#7ed321", "#ff4a4a", "#7ed321", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "manchester-united-logo.png",
+                    SerialNumber = "6",
+                    ClubName = "MUN",
+                    GoldPoints = "+6",
+                    Points = "25",
+                    MatchResults = new string[5]{ "#b2b8c2", "#b2b8c2", "#7ed321", "#7ed321", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Sheffield-United.png",
+                    SerialNumber = "7",
+                    ClubName = "SHU",
+                    GoldPoints = "+5",
+                    Points = "525",
+                    MatchResults = new string[5]{ "#b2b8c2", "#b2b8c2", "#ff4a4a", "#7ed321", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Wolverhampton-Wanderers.png",
+                    SerialNumber = "8",
+                    ClubName = "WOL",
+                    GoldPoints = "+3",
+                    Points = "24",
+                    MatchResults = new string[5]{ "#7ed321", "#b2b8c2", "#7ed321", "#b2b8c2", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Crystal-Palace.png",
+                    SerialNumber = "9",
+                    ClubName = "CRY",
+                    GoldPoints = "-4",
+                    Points = "23",
+                    MatchResults = new string[5]{ "#ff4a4a", "#7ed321", "#7ed321", "#b2b8c2", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                   ImagePath = "Arsenal.png",
+                    SerialNumber = "10",
+                    ClubName = "ARS",
+                    GoldPoints = "-3",
+                    Points = "22",
+                    MatchResults = new string[5]{ "#b2b8c2", "#b2b8c2", "#ff4a4a", "#7ed321", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Newcastle-United.png",
+                    SerialNumber = "11",
+                    ClubName = "NEW",
+                    GoldPoints = "-7",
+                    Points = "22",
+                    MatchResults = new string[5]{ "#ff4a4a", "#b2b8c2", "#7ed321", "#7ed321", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Burnley.png",
+                    SerialNumber = "12",
+                    ClubName = "BUR",
+                    GoldPoints = "-7",
+                    Points = "21",
+                    MatchResults = new string[5]{ "#7ed321", "#ff4a4a", "#ff4a4a", "#ff4a4a", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Brighton-and-Hove-Albion.png",
+                    SerialNumber = "13",
+                    ClubName = "BHA",
+                    GoldPoints = "-4",
+                    Points = "20",
+                    MatchResults = new string[5]{ "#ff4a4a", "#ff4a4a", "#7ed321", "#b2b8c2", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                    ImagePath = "AFC-Bournemouth.png",
+                    SerialNumber = "14",
+                    ClubName = "BOU",
+                    GoldPoints = "-5",
+                    Points = "19",
+                    MatchResults = new string[5]{ "#ff4a4a", "#ff4a4a", "#ff4a4a", "#ff4a4a", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "West-Ham-United.png",
+                    SerialNumber = "15",
+                    ClubName = "WHU",
+                    GoldPoints = "-9",
+                    Points = "19",
+                    MatchResults = new string[5]{ "#ff4a4a", "#7ed321", "#ff4a4a", "#ff4a4a", "#7ed321" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Everton.png",
+                    SerialNumber = "16",
+                    ClubName = "EVE",
+                    GoldPoints = "-9",
+                    Points = "18",
+                    MatchResults = new string[5]{ "#ff4a4a", "#ff4a4a", "#ff4a4a", "#7ed321", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Aston-Villa.png",
+                    SerialNumber = "17",
+                    ClubName = "AVL",
+                    GoldPoints = "-7",
+                    Points = "15",
+                    MatchResults = new string[5]{ "#7ed321", "#b2b8c2", "#ff4a4a", "#ff4a4a", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "southampton-football-club-vector-logo.png",
+                    SerialNumber = "18",
+                    ClubName = "SOU",
+                    GoldPoints = "-18",
+                    Points = "15",
+                    MatchResults = new string[5]{ "#b2b8c2", "#7ed321", "#7ed321", "#ff4a4a", "#ff4a4a" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Norwich-City.png",
+                    SerialNumber = "19",
+                    ClubName = "NOR",
+                    GoldPoints = "-17",
+                    Points = "12",
+                    MatchResults = new string[5]{ "#7ed321", "#b2b8c2", "#ff4a4a", "#ff4a4a", "#b2b8c2" }
+                },
+                new DataTable
+                {
+                    ImagePath = "Watford.png",
+                    SerialNumber = "20",
+                    ClubName = "WAT",
+                    GoldPoints = "-23",
+                    Points = "9",
+                    MatchResults = new string[5]{ "#ff4a4a", "#ff4a4a", "#ff4a4a", "#b2b8c2", "#ff4a4a" }
+                },
+            };
+        }
+        #endregion
+
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the property that has been bound with a list view, which displays the items.
+        /// </summary>
+        public List<DataTable> Items
+        {
+            get
+            {
+                return this.items;
+            }
+
+            set
+            {
+                if (this.items == value)
+                {
+                    return;
+                }
+
+                this.items = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+       
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Detail/DetailPageViewModel.cs b/EssentialUIKit/ViewModels/Detail/DetailPageViewModel.cs
index 529aae5..1d9ec71 100644
--- a/EssentialUIKit/ViewModels/Detail/DetailPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Detail/DetailPageViewModel.cs
@@ -1,9 +1,5 @@
-using System;
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Linq;
-using System.Runtime.CompilerServices;
 using EssentialUIKit.Models;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
diff --git a/EssentialUIKit/ViewModels/Detail/DetailViewModel.cs b/EssentialUIKit/ViewModels/Detail/DetailViewModel.cs
index d7d91ee..baafa75 100644
--- a/EssentialUIKit/ViewModels/Detail/DetailViewModel.cs
+++ b/EssentialUIKit/ViewModels/Detail/DetailViewModel.cs
@@ -1,6 +1,4 @@
 using System.Collections.Generic;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
diff --git a/EssentialUIKit/ViewModels/Detail/EventDetailViewModel.cs b/EssentialUIKit/ViewModels/Detail/EventDetailViewModel.cs
new file mode 100644
index 0000000..469f7cc
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Detail/EventDetailViewModel.cs
@@ -0,0 +1,156 @@
+using Syncfusion.XForms.Buttons;
+using System.Collections.ObjectModel;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using ProfileModel = EssentialUIKit.Models.Profile;
+
+namespace EssentialUIKit.ViewModels.Detail
+{
+    /// <summary>
+    /// ViewModel for event detail page
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class EventDetailViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private ObservableCollection<ProfileModel> connnections;
+
+        private string headerImagePath;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="EventDetailViewModel" /> class.
+        /// </summary>
+        public EventDetailViewModel()
+        {
+            this.HeaderImagePath = "Event-Image-two.png";
+
+            this.Connections = new ObservableCollection<ProfileModel>()
+            {
+                 new ProfileModel { ImagePath = "ProfileImage7.png" },
+                 new ProfileModel { ImagePath = "ProfileImage9.png" },
+                 new ProfileModel { ImagePath = "ProfileImage10.png" },
+                 new ProfileModel { ImagePath = "ProfileImage11.png" },
+                 new ProfileModel { ImagePath = "ProfileImage7.png" },
+                 new ProfileModel { ImagePath = "ProfileImage9.png" },
+                 new ProfileModel { ImagePath = "ProfileImage7.png" },
+                 new ProfileModel { ImagePath = "ProfileImage9.png" },
+                 new ProfileModel { ImagePath = "ProfileImage10.png" },
+                 new ProfileModel { ImagePath = "ProfileImage11.png" },
+                 new ProfileModel { ImagePath = "ProfileImage7.png" },
+                 new ProfileModel { ImagePath = "ProfileImage9.png" },
+                 new ProfileModel { ImagePath = "ProfileImage7.png" },
+                 new ProfileModel { ImagePath = "ProfileImage9.png" },
+                 new ProfileModel { ImagePath = "ProfileImage10.png" },
+                 new ProfileModel { ImagePath = "ProfileImage11.png" }
+            };
+
+            this.FavouriteCommand = new Command(this.FavouriteButtonClicked);
+            this.JoinCommand = new Command(this.JoinButtonClicked);
+            this.MenuCommand = new Command(this.MenuButtonClicked);
+        }
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the header image path.
+        /// </summary>
+        public string HeaderImagePath
+        {
+            get { return App.BaseImageUrl + this.headerImagePath; }
+            set { this.headerImagePath = value; }
+        }
+
+        /// <summary>
+        /// Gets or sets the profile image collection.
+        /// </summary>
+        public ObservableCollection<ProfileModel> Connections
+        {
+            get
+            {
+                return this.connnections;
+            }
+
+            set
+            {
+                this.connnections = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command is executed when the favourite button is clicked.
+        /// </summary>
+        public Command FavouriteCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the join button is clicked.
+        /// </summary>
+        public Command JoinCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the menu button is clicked.
+        /// </summary>
+        public Command MenuCommand { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the favourite button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void FavouriteButtonClicked(object obj)
+        {
+            var button = obj as SfButton;
+
+            if (button == null)
+            {
+                return;
+            }
+
+            if (button.Text == "\ue701")
+            {
+                button.Text = "\ue732";
+                Application.Current.Resources.TryGetValue("PrimaryColor", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+            else
+            {
+                button.Text = "\ue701";
+                Application.Current.Resources.TryGetValue("Gray-600", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+        }
+
+        /// <summary>
+        /// Invoked when the menu button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void MenuButtonClicked(object obj)
+        {
+            //Do something
+        }
+
+        /// <summary>
+        /// Invoked when the join button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void JoinButtonClicked(object obj)
+        {
+            //Do something
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Detail/MyAddressViewModel.cs b/EssentialUIKit/ViewModels/Detail/MyAddressViewModel.cs
new file mode 100644
index 0000000..9a35f0c
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Detail/MyAddressViewModel.cs
@@ -0,0 +1,110 @@
+using Xamarin.Forms;
+using EssentialUIKit.Models.Detail;
+using System.Collections.ObjectModel;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Detail
+{
+    /// <summary>
+    /// ViewModel for my address page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class MyAddressViewModel : BaseViewModel
+    {
+        #region Properties
+        public ObservableCollection<Address> AddressDetails { get; set; }
+        #endregion
+
+        #region Constructor
+        public MyAddressViewModel()
+        {
+            this.BackCommand = new Command(this.BackButtonClicked);
+            this.EditCommand = new Command(this.EditButtonClicked);
+            this.DeleteCommand = new Command(this.DeleteButtonClicked);
+            this.AddCardCommand = new Command(this.AddCardButtonClicked);
+
+            this.AddressDetails = new ObservableCollection<Address>()
+            {
+                new Address
+                {
+                    Name = "John Doe",
+                    AddressType = "Home",
+                    Location = "114 Ridge St NW, Hudson, NC 28638",
+                    ContactNumber = "(828) 228-2882"
+                },
+                new Address
+                {
+                    Name = "John Doe",
+                    AddressType = "Work",
+                    Location = "100 S 4th St, Bloomfield, NM 87413",
+                    ContactNumber = "(828) 295-1271"
+                },
+            };
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the back button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void BackButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the edit button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void EditButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the delete button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void DeleteButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the add card button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void AddCardButtonClicked(object obj)
+        {
+            // Do something
+        }
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command is executed when the back button is clicked.
+        /// </summary>
+        public Command BackCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the edit button is clicked.
+        /// </summary>
+        public Command EditCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the delete button is clicked.
+        /// </summary>
+        public Command DeleteCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the add card button is clicked.
+        /// </summary>
+        public Command AddCardCommand { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Detail/RoomBookingPageViewModel.cs b/EssentialUIKit/ViewModels/Detail/RoomBookingPageViewModel.cs
new file mode 100644
index 0000000..ec7fb28
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Detail/RoomBookingPageViewModel.cs
@@ -0,0 +1,530 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Globalization;
+using System.Windows.Input;
+using EssentialUIKit.Models;
+using EssentialUIKit.Models.ContactUs;
+using EssentialUIKit.Models.Detail;
+using Syncfusion.SfMaps.XForms;
+using Syncfusion.XForms.Buttons;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using SelectionChangedEventArgs = Syncfusion.SfCalendar.XForms.SelectionChangedEventArgs;
+
+namespace EssentialUIKit.ViewModels.Detail
+{
+    /// <summary>
+    /// ViewModel for room booking page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class RoomBookingPageViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private RoomDetail roomDetail;
+
+        private readonly double productRating;
+
+        private ObservableCollection<Review> reviews;
+
+        private List<RoomDetail> facilities;
+
+        private List<RoomDetail> previewImages;
+
+        private bool isReviewVisible;
+
+        private ObservableCollection<MapMarker> customMarkers;
+
+        private List<RoomDetail> guestsCollection;
+
+        private List<RoomDetail> bedsCollection;
+
+        private Point geoCoordinate;
+
+        private bool isDropDownOpen;
+
+        IList<DateTime> selectedDates;
+
+        private string selectionChangedCommand;
+
+        private ObservableCollection<object> calender;
+
+        private int selectedIndex;
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command is executed when the combo box is clicked for guest.
+        /// </summary>
+        public Command GuestCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the combo box is clicked for bed.
+        /// </summary>
+        public Command BedCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the calender is clicked.
+        /// </summary>
+        public ICommand OnSelectionChanged { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the favourite button is clicked.
+        /// </summary>
+        public Command FavouriteCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the book button is clicked.
+        /// </summary>
+        private Command bookCommand;
+
+        /// <summary>
+        /// Gets or sets the command is executed when the carousel item is swiped.
+        /// </summary>
+        private Command selectionCommand;
+
+        #endregion
+
+        #region Constructor
+        /// <summary>
+        /// Initializes a new instance for the <see cref="RoomBookingPageViewModel" /> class.
+        /// </summary>
+
+        public RoomBookingPageViewModel()
+        {        
+            OnSelectionChanged = new Command<SelectionChangedEventArgs>(SelectionChanged);
+
+            GuestCommand = new Command(this.GuestSelectionChanged);
+
+            BedCommand = new Command(this.BedSelectionChanged);
+
+            this.FavouriteCommand = new Command(this.FavouriteButtonClicked);
+
+            this.Calender = new ObservableCollection<object>() { "i" };
+
+            this.previewImages = new List<RoomDetail>()
+            {
+                new RoomDetail{ImagePath="HotelImage1.png"},
+                new RoomDetail{ImagePath="HotelImage2.jpeg"},
+                new RoomDetail{ImagePath="HotelImage3.jpeg"},
+                new RoomDetail{ImagePath="HotelImage4.jpeg"},
+                new RoomDetail{ImagePath="HotelImage5.jpeg" },
+                new RoomDetail{ImagePath="HotelImage6.jpeg"}
+            };        
+
+            this.facilities = new List<RoomDetail>()
+            {
+               new RoomDetail
+               {
+                   Icon="\ue704",
+                   Facility="Wi-Fi"
+               },
+                new RoomDetail
+               {
+                   Icon="\ue74e",
+                   Facility="Kitchen"
+               },
+                 new RoomDetail
+               {
+                   Icon="\ue740",
+                   Facility="Parking"
+               },
+                  new RoomDetail
+               {
+                   Icon="\ue74c",
+                   Facility="Gym"
+               }
+            };
+
+            this.reviews = new ObservableCollection<Review>
+            {
+                new Review
+                {
+                    CustomerImage = "ProfileImage10.png",
+                    CustomerName = "Jane Deo",
+                    Comment = "Great Resort, excellent hospitality!",
+                    ReviewedDate = "29 Dec, 2019",
+                    Rating = 5,
+                    Images = new List<string>
+                    {
+                        "HotelImage1.png",
+                        "HotelImage4.jpeg",
+                        "HotelImage6.jpeg"
+                    }
+                },
+                new Review
+                {
+                    CustomerImage = "ProfileImage11.png",
+                    CustomerName = "Alise Valasquez",
+                    Comment = "Best resort on the planet. LOVE our visits there.",
+                    ReviewedDate = "29 Dec, 2019",
+                    Rating = 5,
+                    Images = new List<string>
+                    {
+                       "HotelImage2.jpeg",
+                       "HotelImage3.jpeg",
+                       "HotelImage7.jpeg"
+                    }
+                }
+            };
+
+            this.BedsCollection = new List<RoomDetail>()
+            {
+                new RoomDetail{ DisplayText="1 Bed", ValueText=1 },
+                new RoomDetail { DisplayText="2 Beds", ValueText=2 },
+                new RoomDetail{ DisplayText="3 Beds", ValueText=3 }
+            };
+
+            this.GuestsCollection = new List<RoomDetail>()
+            {
+                new RoomDetail{ DisplayText="1 Guest", ValueText=1 },
+                new RoomDetail { DisplayText="2 Guests", ValueText=2 },
+                new RoomDetail{ DisplayText="3 Guests", ValueText=3 }
+            };
+
+            this.CustomMarkers = new ObservableCollection<MapMarker>();
+            this.GetPinLocation();
+
+            this.RoomDetail = new RoomDetail
+            {
+                Name = "Modern Resort", 
+                OverallRating = 5,
+                TotalReviews = "534 Reviews",
+                ResortDescription = "A charming oceanfront resort with 38 hotel rooms, studios, and suites, most with a balcony and jacuzzi, located on the turquoise water of the Atlantic Ocean.",              
+                Address = "7654 Cleveland Street, Phoenixville, PA 19460",
+                PhoneNumber = "+1 202-555-0101",
+                Cost = 30,
+                TotalDays=1,
+                Reviews = reviews
+            };
+
+            if (this.RoomDetail.Reviews == null || this.RoomDetail.Reviews.Count == 0)
+            {
+                this.IsReviewVisible = true;
+            }
+            else
+            {
+                foreach (var review in this.RoomDetail.Reviews)
+                {
+                    this.productRating += review.Rating;
+                }
+            }
+
+            if (this.productRating > 0)
+                this.RoomDetail.OverallRating = this.productRating / this.RoomDetail.Reviews.Count;
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the property that has been bound with icon and labels, which display the resort details.
+        /// </summary>
+        public RoomDetail RoomDetail
+        {
+            get
+            {
+                return this.roomDetail;
+            }
+
+            set
+            {
+                if (this.roomDetail == value)
+                {
+                    return;
+                }
+
+                this.roomDetail = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the property IsReviewVisible.
+        /// </summary>
+        public bool IsReviewVisible
+        {
+            get
+            {
+                if (RoomDetail.Reviews.Count == 0)
+                {
+                    this.isReviewVisible = true;
+                }
+
+                return this.isReviewVisible;
+            }
+            set
+            {
+                this.isReviewVisible = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the beds collection.
+        /// </summary>
+        public ObservableCollection<object> Calender
+        {
+            get
+            {
+                return this.calender;
+            }
+
+            set
+            {
+                this.calender = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the facilities items collection.
+        /// </summary>
+        public List<RoomDetail> Facilities
+        {
+            get
+            {
+                return this.facilities;
+            }
+
+            set
+            {
+                this.facilities = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the previewImages collection.
+        /// </summary>
+        public List<RoomDetail> PreviewImages
+        {
+            get
+            {
+                return this.previewImages;
+            }
+
+            set
+            {
+                this.previewImages = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the beds collection.
+        /// </summary>
+        public List<RoomDetail> BedsCollection
+        {
+            get
+            {
+                return this.bedsCollection;
+            }
+
+            set
+            {
+                this.bedsCollection = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the guests collection.
+        /// </summary>
+        public List<RoomDetail> GuestsCollection
+        {
+            get
+            {
+                return this.guestsCollection;
+            }
+
+            set
+            {
+                this.guestsCollection = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the CustomMarkers collection.
+        /// </summary>
+        public ObservableCollection<MapMarker> CustomMarkers
+        {
+            get
+            {
+                return this.customMarkers;
+            }
+
+            set
+            {
+                this.customMarkers = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the geo coordinate.
+        /// </summary>
+        public Point GeoCoordinate
+        {
+            get
+            {
+                return this.geoCoordinate;
+            }
+
+            set
+            {
+                this.geoCoordinate = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the IsDropDownOpen.
+        /// </summary>
+        public bool IsDropDownOpen
+        {
+            get
+            {
+                return this.isDropDownOpen;
+            }
+
+            set
+            {
+                this.isDropDownOpen = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the carusel view swipe item index.
+        /// </summary>
+        public int SelectedIndex
+        {
+            get { return selectedIndex;}
+            set
+            {
+                if (selectedIndex == value)
+                {
+                    return;
+                }
+                selectedIndex = value;
+                this.NotifyPropertyChanged();
+            } 
+        }
+
+        /// <summary>
+        /// Gets or sets the SelectionChangedCommand.
+        /// </summary>
+        public string SelectionChangedCommand
+        {
+            get { return selectionChangedCommand; }
+            set { selectionChangedCommand = value; }
+        }
+
+        // <summary>
+        /// Gets or sets the command that will be executed when an book button is selected.
+        /// </summary>   
+        public Command BookCommand
+        {
+            get
+            {
+                return this.bookCommand ?? (this.bookCommand = new Command(this.BookClicked));
+            }
+        }
+
+        // <summary>
+        /// Gets or sets the command that will be executed when an book button is selected.
+        /// </summary>   
+        public Command SelectionCommand
+        {
+            get
+            {
+                return this.selectionCommand ?? (this.selectionCommand = new Command(this.SelectionClicked));
+            }
+        }
+        #endregion
+
+        #region Methods
+        private void GetPinLocation()
+        {
+            this.CustomMarkers.Add(
+                new LocationMarker
+                {
+                    PinImage = "Pin.png",
+                    Latitude = "40.133808",
+                    Longitude = "-75.516279"
+                });
+
+            foreach (var marker in this.CustomMarkers)
+            {
+                this.GeoCoordinate = new Point(Convert.ToDouble(marker.Latitude, CultureInfo.CurrentCulture), Convert.ToDouble(marker.Longitude, CultureInfo.CurrentCulture));
+            }         
+        }
+
+        private void SelectionChanged( SelectionChangedEventArgs e)
+        {
+            selectedDates = e.DateAdded;
+            this.RoomDetail.SelectedRanges = (selectedDates[0].Date.ToString("MMM dd")) + " - " + (selectedDates[selectedDates.Count - 1].Date.ToString("MMM dd"));
+            IsDropDownOpen = false;
+        }
+
+        private void GuestSelectionChanged(object obj)
+        {
+            //Do your command action
+        }
+
+        private void BedSelectionChanged(object obj)
+        {
+            //Do your command action
+        }
+
+        private void FavouriteButtonClicked(object obj)
+        {
+            var button = obj as SfButton;
+
+            if (button == null)
+            {
+                return;
+            }
+
+            if (button.Text == "\ue701")
+            {
+                button.Text = "\ue732";
+                Application.Current.Resources.TryGetValue("PrimaryColor", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+            else
+            {
+                button.Text = "\ue701";
+                Application.Current.Resources.TryGetValue("Gray-600", out var retVal);
+                button.TextColor = (Color)retVal;
+            }
+        }
+
+        /// <summary>
+        /// Invoked when the book button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void BookClicked(object obj)
+        {
+            //Do something
+        }
+
+        /// <summary>
+        /// Invoked when carousel view item is swiped.
+        /// </summary>
+        /// <param name="obj">The rotator item</param>
+        private void SelectionClicked(object obj)
+        {
+            this.SelectedIndex = this.PreviewImages.IndexOf(obj);
+        }
+
+        #endregion
+    }
+
+}
diff --git a/EssentialUIKit/ViewModels/Forms/AddCardViewModel.cs b/EssentialUIKit/ViewModels/Forms/AddCardViewModel.cs
index 599b474..afe9d52 100644
--- a/EssentialUIKit/ViewModels/Forms/AddCardViewModel.cs
+++ b/EssentialUIKit/ViewModels/Forms/AddCardViewModel.cs
@@ -1,6 +1,4 @@
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.ViewModels.Forms
diff --git a/EssentialUIKit/ViewModels/Forms/AddContactViewModel.cs b/EssentialUIKit/ViewModels/Forms/AddContactViewModel.cs
index 156efc3..465324f 100644
--- a/EssentialUIKit/ViewModels/Forms/AddContactViewModel.cs
+++ b/EssentialUIKit/ViewModels/Forms/AddContactViewModel.cs
@@ -1,7 +1,4 @@
-using EssentialUIKit.Models;
-using System;
-using System.Collections.Generic;
-using System.Text;
+using System;
 using Xamarin.Forms;
 
 namespace EssentialUIKit.ViewModels.Forms
@@ -11,14 +8,6 @@ namespace EssentialUIKit.ViewModels.Forms
     /// </summary>
     public class AddContactViewModel : LoginViewModel
     {
-        #region Fields
-
-        private object country;
-
-        private object state;
-
-        #endregion
-
         #region Constructor
         /// <summary>
         /// Initializes a new instance for the <see cref="AddContactViewModel" /> class.
@@ -26,33 +15,6 @@ public class AddContactViewModel : LoginViewModel
         public AddContactViewModel()
         {
             this.SubmitCommand = new Command(this.SubmitButtonClicked);
-
-            Countries = new List<CountryModel>();
-            Countries.Add(new CountryModel()
-            {
-                Country = "Australia",
-                States = new string[] { "Tasmania", "Victoria", "Queensland", "Northen Territory" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "Brazil",
-                States = new string[] { "Bahia", "Ceara", "Goias", "Maranhao" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "Canada",
-                States = new string[] { "Manitoba", "Ontario", "Quebec", "Yukon" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "India",
-                States = new string[] { "Assam", "Gujarat", "Haryana", "Tamil Nadu" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "USA",
-                States = new string[] { "California", "Florida", "New York", "Washington" }
-            });
         }
 
         #endregion
@@ -94,37 +56,6 @@ public AddContactViewModel()
         /// </summary>
         public string City { get; set; }
 
-        /// <summary>
-        /// Gets or sets the property that bounds with a ComboBox that gets the Country from user.
-        /// </summary>
-        public object Country
-        {
-            get { return country; }
-            set
-            {
-                country = value;
-                State = null;
-            }
-        }
-
-        /// <summary>
-        /// Gets or sets the property that bounds with a ComboBox that gets the State from user.
-        /// </summary>
-        public object State
-        {
-            get { return state; }
-            set
-            {
-                state = value;
-                NotifyPropertyChanged();
-            }
-        }
-
-        /// <summary>
-        /// Gets or sets the collection property, which contains the countries data. 
-        /// </summary>
-        public List<CountryModel> Countries { get; set; }
-
         #endregion
 
         #region Comments
diff --git a/EssentialUIKit/ViewModels/Forms/BusinessRegistrationFormViewModel.cs b/EssentialUIKit/ViewModels/Forms/BusinessRegistrationFormViewModel.cs
index c643b27..b258b54 100644
--- a/EssentialUIKit/ViewModels/Forms/BusinessRegistrationFormViewModel.cs
+++ b/EssentialUIKit/ViewModels/Forms/BusinessRegistrationFormViewModel.cs
@@ -1,6 +1,4 @@
-using EssentialUIKit.Models;
-using System;
-using System.Collections.Generic;
+using System;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
@@ -11,16 +9,7 @@ namespace EssentialUIKit.ViewModels.Forms
     /// </summary> 
     [Preserve(AllMembers = true)]
     public class BusinessRegistrationFormViewModel : BaseViewModel
-    {
-
-        #region Fields
-
-        private object country;
-
-        private object state;
-
-        #endregion
-        
+    {        
         #region Constructor
 
         /// <summary>
@@ -28,38 +17,11 @@ public class BusinessRegistrationFormViewModel : BaseViewModel
         /// </summary>
         public BusinessRegistrationFormViewModel()
         {
-            this.SubmitCommand = new Command(this.SubmitClicked);
-
-            Countries = new List<CountryModel>();
-            Countries.Add(new CountryModel()
-            {
-                Country = "Australia",
-                States = new string[] { "Tasmania", "Victoria", "Queensland", "Northen Territory" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "Brazil",
-                States = new string[] { "Bahia", "Ceara", "Goias", "Maranhao" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "Canada",
-                States = new string[] { "Manitoba", "Ontario", "Quebec", "Yukon" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "India",
-                States = new string[] { "Assam", "Gujarat", "Haryana", "Tamil Nadu" }
-            });
-            Countries.Add(new CountryModel()
-            {
-                Country = "USA",
-                States = new string[] { "California", "Florida", "New York", "Washington" }
-            });
+            this.SubmitCommand = new Command(this.SubmitClicked);          
         }
         #endregion
 
-        #region Property
+        #region Properties
 
         /// <summary>
         /// Gets or sets the property that bounds with an entry that gets the Full Name from user.
@@ -95,38 +57,6 @@ public BusinessRegistrationFormViewModel()
         /// Gets or sets the property that bounds with an entry that gets the City from user.
         /// </summary>
         public string City { get; set; }
-                       
-        /// <summary>
-        /// Gets or sets the property that bounds with a ComboBox that gets the Country from user.
-        /// </summary>
-        public object Country
-        {
-            get { return country; }
-            set 
-            {
-                country = value;
-                State = null;
-            }
-        }
-        
-        /// <summary>
-        /// Gets or sets the property that bounds with a ComboBox that gets the State from user.
-        /// </summary>
-        public object State
-        {
-            get { return state; }
-            set 
-            {
-                state = value;
-                NotifyPropertyChanged();
-            }
-        }
-
-        /// <summary>
-        /// Gets or sets the collection property, which contains the countries data. 
-        /// </summary>
-        public List<CountryModel> Countries { get; set; }
-
 
         #endregion 
 
diff --git a/EssentialUIKit/ViewModels/Forms/LoginViewModel.cs b/EssentialUIKit/ViewModels/Forms/LoginViewModel.cs
index 8783b78..515f980 100644
--- a/EssentialUIKit/ViewModels/Forms/LoginViewModel.cs
+++ b/EssentialUIKit/ViewModels/Forms/LoginViewModel.cs
@@ -1,6 +1,4 @@
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
-using Xamarin.Forms.Internals;
+using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.ViewModels.Forms
 {
diff --git a/EssentialUIKit/ViewModels/Forms/LoginWithSocialIconViewModel.cs b/EssentialUIKit/ViewModels/Forms/LoginWithSocialIconViewModel.cs
new file mode 100644
index 0000000..8f80e12
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Forms/LoginWithSocialIconViewModel.cs
@@ -0,0 +1,157 @@
+using System.Threading.Tasks;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Forms
+{
+    /// <summary>
+    /// ViewModel for login with social icon page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class LoginWithSocialIconViewModel : LoginViewModel
+    {
+        #region Fields
+
+        private string password;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="LoginWithSocialIconViewModel" /> class.
+        /// </summary>
+        public LoginWithSocialIconViewModel()
+        {
+            this.LoginCommand = new Command(this.LoginClicked);
+            this.SignUpCommand = new Command(this.SignUpClicked);
+            this.ForgotPasswordCommand = new Command(this.ForgotPasswordClicked);
+            this.FaceBookLoginCommand = new Command(this.FaceBookClicked);
+            this.TwitterLoginCommand = new Command(this.TwitterClicked);
+            this.GmailLoginCommand = new Command(this.GmailClicked);
+        }
+
+        #endregion
+
+        #region property
+
+        /// <summary>
+        /// Gets or sets the property that is bound with an entry that gets the password from user in the login page.
+        /// </summary>
+        public string Password
+        {
+            get
+            {
+                return this.password;
+            }
+
+            set
+            {
+                if (this.password == value)
+                {
+                    return;
+                }
+
+                this.password = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the Log In button is clicked.
+        /// </summary>
+        public Command LoginCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the Sign Up button is clicked.
+        /// </summary>
+        public Command SignUpCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the Forgot Password button is clicked.
+        /// </summary>
+        public Command ForgotPasswordCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the facebook login button is clicked.
+        /// </summary>
+        public Command FaceBookLoginCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the twitter login button is clicked.
+        /// </summary>
+        public Command TwitterLoginCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command that is executed when the gmail login button is clicked.
+        /// </summary>
+        public Command GmailLoginCommand { get; set; }
+
+        #endregion
+
+        #region methods
+
+        /// <summary>
+        /// Invoked when the Log In button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void LoginClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the Sign Up button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void SignUpClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the Forgot Password button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private async void ForgotPasswordClicked(object obj)
+        {
+            var label = obj as Label;
+            label.BackgroundColor = Color.FromHex("#70FFFFFF");
+            await Task.Delay(100);
+            label.BackgroundColor = Color.Transparent;
+        }
+
+        /// <summary>
+        /// Invoked when facebook login button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void FaceBookClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when twitter login button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void TwitterClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when gmail login button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void GmailClicked(object obj)
+        {
+            // Do something
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/ViewModels/Forms/ResetPasswordViewModel.cs b/EssentialUIKit/ViewModels/Forms/ResetPasswordViewModel.cs
index b790163..173b485 100644
--- a/EssentialUIKit/ViewModels/Forms/ResetPasswordViewModel.cs
+++ b/EssentialUIKit/ViewModels/Forms/ResetPasswordViewModel.cs
@@ -1,6 +1,4 @@
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
 namespace EssentialUIKit.ViewModels.Forms
diff --git a/EssentialUIKit/ViewModels/Navigation/FileExploreViewModel.cs b/EssentialUIKit/ViewModels/Navigation/FileExploreViewModel.cs
new file mode 100644
index 0000000..d6aa488
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Navigation/FileExploreViewModel.cs
@@ -0,0 +1,68 @@
+using System.Collections.ObjectModel;
+using System.Runtime.Serialization;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models.Navigation;
+
+namespace EssentialUIKit.ViewModels.Navigation
+{
+    /// <summary>
+    /// ViewModel for file explorer list page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class FileExploreViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private Command<object> itemTappedCommand;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="FileExploreViewModel"/> class.
+        /// </summary>
+        public FileExploreViewModel()
+        {
+
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets the command that will be executed when an item is selected.
+        /// </summary>
+        public Command<object> ItemTappedCommand
+        {
+            get
+            {
+                return this.itemTappedCommand ?? (this.itemTappedCommand = new Command<object>(this.NavigateToNextPage));
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a collction of value to be displayed in file explorer list page.
+        /// </summary>
+        [DataMember(Name = "fileExploreList")]
+        public ObservableCollection<File> FileExploreList { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when an item is selected from the file explorer list.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void NavigateToNextPage(object selectedItem)
+        {
+            // Do something
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/ViewModels/Navigation/MoviesPageViewModel.cs b/EssentialUIKit/ViewModels/Navigation/MoviesPageViewModel.cs
index eb2f8d3..ec9c6d0 100644
--- a/EssentialUIKit/ViewModels/Navigation/MoviesPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Navigation/MoviesPageViewModel.cs
@@ -1,9 +1,6 @@
 using EssentialUIKit.Models.Navigation;
-using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Runtime.Serialization;
-using System.Text;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 
@@ -17,6 +14,8 @@ namespace EssentialUIKit.ViewModels.Navigation
     [DataContract]
     public class MoviesPageViewModel :  BaseViewModel
     {
+        #region MoviesListPage
+        
         #region Fields
 
         private Command<object> itemTappedCommand;
@@ -68,6 +67,200 @@ private void NavigateToNextPage(object selectedItem)
 
         #endregion
 
+        #endregion
+
+        #region MoviesPage
+
+        #region Fields
+
+        private Command<object> searchButtonCommand;
+
+        private Command<object> showingNowItemTappedCommand;
+        private Command<object> trailerItemTappedCommand;
+        private Command<object> upcomingItemTappedCommand;
+
+        private Command<object> showingNowViewAllCommand;
+        private Command<object> trailerViewAllCommand;
+        private Command<object> upcomingViewAllCommand;
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets a collection of value to be displayed in the rotator of movies page.
+        /// </summary>
+        [DataMember(Name = "rotatorMoviesList")]
+        public ObservableCollection<Movie> RotatorMoviesList { get; set; }
+
+        /// <summary>
+        /// Gets or sets a collection of value to be displayed in now showing list of movies page.
+        /// </summary>
+        [DataMember(Name = "showingMoviesList")]
+        public ObservableCollection<Movie> NowShowingMoviesList { get; set; }
+
+        /// <summary>
+        /// Gets or sets a collection of value to be displayed in the trailer list of movies page.
+        /// </summary>
+        [DataMember(Name = "trailerMoviesList")]
+        public ObservableCollection<Movie> TrailerMoviesList { get; set; }
+
+        /// <summary>
+        /// Gets or sets a collection of value to be displayed in the upcoming movies list of movies page.
+        /// </summary>
+        [DataMember(Name = "upcomingMoviesList")]
+        public ObservableCollection<Movie> UpcomingMoviesList { get; set; }
+
+        #endregion
+
+        #region Command
+
+        /// <summary>
+        /// Gets the command that will be executed when an search button is clicked.
+        /// </summary>
+        public Command<object> SearchButtonCommand
+        {
+            get
+            {
+                return this.searchButtonCommand ?? (this.searchButtonCommand = new Command<object>(this.SearchButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when now showing category view all button is clicked.
+        /// </summary>
+        public Command<object> ShowingNowViewAllCommand
+        {
+            get
+            {
+                return this.showingNowViewAllCommand ?? (this.showingNowViewAllCommand = new Command<object>(this.ShowingNowViewAllButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when trailer category view all button is clicked.
+        /// </summary>
+        public Command<object> TrailerViewAllCommand
+        {
+            get
+            {
+                return this.trailerViewAllCommand ?? (this.trailerViewAllCommand = new Command<object>(this.TrailerViewAllButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when coming soon view all button is clicked.
+        /// </summary>
+        public Command<object> UpcomingViewAllCommand
+        {
+            get
+            {
+                return this.upcomingViewAllCommand ?? (this.upcomingViewAllCommand = new Command<object>(this.UpcomingViewAllButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when now showing item is selected.
+        /// </summary>
+        public Command<object> ShowingNowItemTappedCommand
+        {
+            get
+            {
+                return this.showingNowItemTappedCommand ?? (this.showingNowItemTappedCommand = new Command<object>(this.ShowingNowItemSelected));
+            }
+        }
 
+        /// <summary>
+        /// Gets the command that will be executed when trailer item is clicked.
+        /// </summary>
+        public Command<object> TrailerItemTappedCommand
+        {
+            get
+            {
+                return this.trailerItemTappedCommand ?? (this.trailerItemTappedCommand = new Command<object>(this.TrailerItemSelected));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when coming soon item is clicked.
+        /// </summary>
+        public Command<object> UpcomingItemTappedCommand
+        {
+            get
+            {
+                return this.upcomingItemTappedCommand ?? (this.upcomingItemTappedCommand = new Command<object>(this.UpcomingItemSelected));
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when search button is clicked from the movies page.
+        /// </summary>
+        /// <param name="obj">Selected item from the list view.</param>
+        private void SearchButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when now showing category view all button is clicked.
+        /// </summary>
+        /// <param name="obj">Selected item from the list view.</param>
+        private void ShowingNowViewAllButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when when trailer category view all button is clicked.
+        /// </summary>
+        /// <param name="obj">Selected item from the list view.</param>
+        private void TrailerViewAllButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when coming soon category view all button is clicked.
+        /// </summary>
+        /// <param name="obj">Selected item from the list view.</param>
+        private void UpcomingViewAllButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when an item is selected from the now showing category of movies page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void ShowingNowItemSelected(object selectedItem)
+        {
+            // Do something
+        }
+
+        // <summary>
+        /// Invoked when an item is selected from the trailer category of movies page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void TrailerItemSelected(object selectedItem)
+        {
+            // Do something
+        }
+
+        // <summary>
+        /// Invoked when an item is selected from the coming soon category of movies page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void UpcomingItemSelected(object selectedItem)
+        {
+            // Do something
+        }
+
+        #endregion
+
+        #endregion
     }
 }
diff --git a/EssentialUIKit/ViewModels/Navigation/SuggestionViewModel.cs b/EssentialUIKit/ViewModels/Navigation/SuggestionViewModel.cs
index b982297..a333626 100644
--- a/EssentialUIKit/ViewModels/Navigation/SuggestionViewModel.cs
+++ b/EssentialUIKit/ViewModels/Navigation/SuggestionViewModel.cs
@@ -1,4 +1,5 @@
 using EssentialUIKit.Models.Navigation;
+using Syncfusion.XForms.Buttons;
 using System.Collections.ObjectModel;
 using System.Runtime.Serialization;
 using Xamarin.Forms;
@@ -70,7 +71,15 @@ private void NavigateToNextPage(object selectedItem)
         /// <param name="obj">The Object</param>
         private void SuggestionClicked(object obj)
         {
-            //Do something
+            SfButton button = obj as SfButton;
+            if (button.Text == "FOLLOW")
+            {
+                button.Text = "FOLLOWED";
+            }
+            else if (button.Text == "FOLLOWED")
+            {
+                button.Text = "FOLLOW";
+            }
         }
 
         #endregion
diff --git a/EssentialUIKit/ViewModels/Notification/ECommerceNotificationViewModel.cs b/EssentialUIKit/ViewModels/Notification/ECommerceNotificationViewModel.cs
new file mode 100644
index 0000000..7887220
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Notification/ECommerceNotificationViewModel.cs
@@ -0,0 +1,113 @@
+using System.Collections.ObjectModel;
+using System.Runtime.Serialization;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models.Notification;
+
+namespace EssentialUIKit.ViewModels.Notification
+{
+    /// <summary>
+    /// ViewModel for E-Commerce notification page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [DataContract]
+    public class ECommerceNotificationViewModel : BaseViewModel
+    {
+        #region Fields
+
+        private Command<object> itemTappedCommand;
+
+        private Command<object> backCommand;
+
+        private Command<object> menuCommand;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="ECommerceNotificationViewModel"/> class.
+        /// </summary>
+        public ECommerceNotificationViewModel()
+        {
+
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets the command that will be executed when an item is selected.
+        /// </summary>
+        public Command<object> ItemTappedCommand
+        {
+            get
+            {
+                return this.itemTappedCommand ?? (this.itemTappedCommand = new Command<object>(this.ItemSelected));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when back button is clicked.
+        /// </summary>
+        public Command<object> BackCommand
+        {
+            get
+            {
+                return this.backCommand ?? (this.backCommand = new Command<object>(this.BackButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets the command that will be executed when menu button is clicked.
+        /// </summary>
+        public Command<object> MenuCommand
+        {
+            get
+            {
+                return this.menuCommand ?? (this.menuCommand = new Command<object>(this.MenuButtonClicked));
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a collction of value to be displayed in E-Commerce notification page.
+        /// </summary>
+        [DataMember(Name = "ecommerceNotificationPageList")]
+        public ObservableCollection<ECommerceNotificationsListModel> ECommerceNotificationsList { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when an item is selected from the E-Commerce notification page.
+        /// </summary>
+        /// <param name="selectedItem">Selected item from the list view.</param>
+        private void ItemSelected(object selectedItem)
+        {
+            ((selectedItem as Syncfusion.ListView.XForms.ItemTappedEventArgs)?.ItemData as ECommerceNotificationsListModel).IsRead = true;
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when back button is clicked in the E-Commerce notification page.
+        /// </summary>
+        /// <param name="obj">The object.</param>
+        private void BackButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when menu button is clicked in the E-Commerce notification page.
+        /// </summary>
+        /// <param name="obj">The object.</param>
+        private void MenuButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/ViewModels/Profile/ContactProfileViewModel.cs b/EssentialUIKit/ViewModels/Profile/ContactProfileViewModel.cs
index e513ff4..5ab9dde 100644
--- a/EssentialUIKit/ViewModels/Profile/ContactProfileViewModel.cs
+++ b/EssentialUIKit/ViewModels/Profile/ContactProfileViewModel.cs
@@ -32,7 +32,7 @@ public ContactProfileViewModel()
 
             for (var i = 0; i < 6; i++)
             {
-                this.ProfileInfo.Add(new Model { ImagePath = App.BaseImageUrl + "ProfileImage1" + i + ".png" });
+                this.ProfileInfo.Add(new Model { ImagePath = "ProfileImage1" + i + ".png" });
             }
 
             this.ProfileNameCommand = new Command(this.ProfileNameClicked);
diff --git a/EssentialUIKit/ViewModels/Profile/HealthProfileViewModel.cs b/EssentialUIKit/ViewModels/Profile/HealthProfileViewModel.cs
new file mode 100644
index 0000000..8a693de
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Profile/HealthProfileViewModel.cs
@@ -0,0 +1,124 @@
+using System.Collections.ObjectModel;
+using Xamarin.Forms.Internals;
+using EssentialUIKit.Models;
+
+namespace EssentialUIKit.ViewModels.Profile
+{
+    /// <summary>
+    /// ViewModel for health profile page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class HealthProfileViewModel : BaseViewModel
+    {
+        #region Fields
+
+        /// <summary>
+        /// To store the health profile data collection.
+        /// </summary>
+        private ObservableCollection<HealthProfile> cardItems;
+
+        #endregion
+
+        #region Constructor
+
+        /// <summary>
+        /// Initializes a new instance for the <see cref="HealthProfileViewModel" /> class.
+        /// </summary>
+        public HealthProfileViewModel()
+        {
+            cardItems = new ObservableCollection<HealthProfile>()
+            {
+                new HealthProfile()
+                {
+                    Category = "Calories Eaten",
+                    CategoryValue = "13,100",
+                    ImagePath = "CaloriesEaten.svg"
+                },
+                new HealthProfile()
+                {
+                    Category = "Heart Rate",
+                    CategoryValue = "87 BPM",
+                    ImagePath = "HeartRate.svg"
+                },
+                new HealthProfile()
+                {
+                    Category = "Water Consumed",
+                    CategoryValue = "38.6 L",
+                    ImagePath = "WaterConsumed.svg"
+                },
+                new HealthProfile()
+                {
+                    Category = "Sleep Duration",
+                    CategoryValue = "7.3 H",
+                    ImagePath = "SleepDuration.svg"
+                }
+            };
+
+            this.ProfileImage = App.BaseImageUrl + "ProfileImage16.png";
+            this.ProfileName = "Lela Cortez";
+            this.State = "San Francisco";
+            this.Country = "CA";
+            this.Age = "35";
+            this.Weight = "159 Ibs";
+            this.Height = "165 cm";
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the health profile items collection.
+        /// </summary>
+        public ObservableCollection<HealthProfile> CardItems
+        {
+            get
+            {
+                return this.cardItems;
+            }
+
+            set
+            {
+                this.cardItems = value;
+                this.NotifyPropertyChanged();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the profile image.
+        /// </summary>
+        public string ProfileImage { get; set; }
+
+        /// <summary>
+        /// Gets or sets the profile name.
+        /// </summary>
+        public string ProfileName { get; set; }
+
+        /// <summary>
+        /// Gets or sets the state.
+        /// </summary>
+        public string State { get; set; }
+
+        /// <summary>
+        /// Gets or sets the country.
+        /// </summary>
+        public string Country { get; set; }
+
+        /// <summary>
+        /// Gets or sets the age.
+        /// </summary>
+        public string Age { get; set; }
+
+        /// <summary>
+        /// Gets or sets the weight.
+        /// </summary>
+        public string Weight { get; set; }
+
+        /// <summary>
+        /// Gets or sets the height.
+        /// </summary>
+        public string Height { get; set; }
+
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/ViewModels/Shopping/CheckoutPageViewModel.cs b/EssentialUIKit/ViewModels/Shopping/CheckoutPageViewModel.cs
index 3919176..e36a2f8 100644
--- a/EssentialUIKit/ViewModels/Shopping/CheckoutPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Shopping/CheckoutPageViewModel.cs
@@ -72,14 +72,14 @@ public CheckoutPageViewModel()
             {
                 new Product
                 {
-                    PreviewImage = App.BaseImageUrl + "Image1.png", Name = "Full-Length Skirt",
+                    PreviewImage = "Image1.png", Name = "Full-Length Skirt",
                     Summary =
                         "This plaid, cotton skirt will keep you warm in the air-conditioned office or outside on cooler days.",
                     SellerName = "New Fashion Company", ActualPrice = 245, DiscountPercent = 30, TotalQuantity = 1
                 },
                 new Product
                 {
-                    PreviewImage = App.BaseImageUrl + "Image2.png", Name = "Peasant Blouse",
+                    PreviewImage = "Image2.png", Name = "Peasant Blouse",
                     Summary =
                         "Look your best this fall in this V-neck, pleated peasant blouse with full sleeves. Comes in white, chocolate, forest green, and more.",
                     SellerName = "New Fashion Company", ActualPrice = 245, DiscountPercent = 30, TotalQuantity = 1
diff --git a/EssentialUIKit/ViewModels/Social/SocialProfileViewModel.cs b/EssentialUIKit/ViewModels/Social/SocialProfileViewModel.cs
index 24d4cc9..7c5606e 100644
--- a/EssentialUIKit/ViewModels/Social/SocialProfileViewModel.cs
+++ b/EssentialUIKit/ViewModels/Social/SocialProfileViewModel.cs
@@ -1,6 +1,5 @@
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
+using Syncfusion.XForms.Buttons;
+using System.Collections.ObjectModel;
 using System.Windows.Input;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
@@ -20,7 +19,13 @@ public class SocialProfileViewModel : BaseViewModel
 
         private ObservableCollection<ProfileModel> connnections;
 
-        private ObservableCollection<string> pictures;
+        private ObservableCollection<ProfileModel> pictures;
+
+        private string headerImagePath;
+
+        private string profileImage;
+
+        private string backgroundImage;
 
         #endregion
 
@@ -31,8 +36,9 @@ public class SocialProfileViewModel : BaseViewModel
         /// </summary>
         public SocialProfileViewModel()
         {
-            this.HeaderImagePath = App.BaseImageUrl + "Album2.png";
-            this.ProfileImage = App.BaseImageUrl + "ProfileImage16.png";
+            this.HeaderImagePath = "Album2.png";
+            this.ProfileImage = "ProfileImage16.png";
+            this.BackgroundImage = "Sky-Image.png";
             this.ProfileName = "Lela Cortez";
             this.Designation = "Designer";
             this.State = "San Francisco";
@@ -44,41 +50,42 @@ public SocialProfileViewModel()
 
             this.Interests = new ObservableCollection<ProfileModel>()
             {
-                 new ProfileModel { Name = "Food", ImagePath = App.BaseImageUrl + "Recipe12.png" },
-                 new ProfileModel { Name = "Travel", ImagePath = App.BaseImageUrl + "Album5.png" },
-                 new ProfileModel { Name = "Music", ImagePath = App.BaseImageUrl + "ArticleImage7.jpg" },
-                 new ProfileModel { Name = "Bags", ImagePath = App.BaseImageUrl + "Accessories.png" },
-                 new ProfileModel { Name = "Market", ImagePath = App.BaseImageUrl + "PersonalCare.png" },
-                 new ProfileModel { Name = "Food", ImagePath = App.BaseImageUrl + "Recipe12.png" },
-                 new ProfileModel { Name = "Travel", ImagePath = App.BaseImageUrl + "Album5.png" },
-                 new ProfileModel { Name = "Music", ImagePath = App.BaseImageUrl + "ArticleImage7.jpg" },
-                 new ProfileModel { Name = "Bags", ImagePath = App.BaseImageUrl + "Accessories.png" },
-                 new ProfileModel { Name = "Market", ImagePath = App.BaseImageUrl + "PersonalCare.png" },
+                new ProfileModel { Name = "Food", ImagePath = "Recipe12.png" },
+                new ProfileModel { Name = "Travel", ImagePath = "Album5.png" },
+                new ProfileModel { Name = "Music", ImagePath = "ArticleImage7.jpg" },
+                new ProfileModel { Name = "Bags", ImagePath = "Accessories.png" },
+                new ProfileModel { Name = "Market", ImagePath = "PersonalCare.png" },
+                new ProfileModel { Name = "Food", ImagePath = "Recipe12.png" },
+                new ProfileModel { Name = "Travel", ImagePath = "Album5.png" },
+                new ProfileModel { Name = "Music", ImagePath = "ArticleImage7.jpg" },
+                new ProfileModel { Name = "Bags", ImagePath = "Accessories.png" },
+                new ProfileModel { Name = "Market", ImagePath = "PersonalCare.png" }
             };
 
             this.Connections = new ObservableCollection<ProfileModel>()
             {
-                 new ProfileModel { Name = "Rose King", ImagePath = App.BaseImageUrl + "ProfileImage7.png" },
-                 new ProfileModel { Name = "Jeanette Bell", ImagePath = App.BaseImageUrl + "ProfileImage9.png" },
-                 new ProfileModel { Name = "Lily Castro", ImagePath = App.BaseImageUrl + "ProfileImage10.png" },
-                 new ProfileModel { Name = "Susie Moss", ImagePath = App.BaseImageUrl + "ProfileImage11.png" },
-                 new ProfileModel { Name = "Rose King", ImagePath = App.BaseImageUrl + "ProfileImage7.png" },
-                 new ProfileModel { Name = "Jeanette Bell", ImagePath = App.BaseImageUrl + "ProfileImage9.png" },
-                 new ProfileModel { Name = "Lily Castro", ImagePath = App.BaseImageUrl + "ProfileImage10.png" },
-                 new ProfileModel { Name = "Susie Moss", ImagePath = App.BaseImageUrl + "ProfileImage11.png" },
+                new ProfileModel { Name = "Rose King", ImagePath = "ProfileImage7.png" },
+                new ProfileModel { Name = "Jeanette Bell", ImagePath = "ProfileImage9.png" },
+                new ProfileModel { Name = "Lily Castro", ImagePath = "ProfileImage10.png" },
+                new ProfileModel { Name = "Susie Moss", ImagePath = "ProfileImage11.png" },
+                new ProfileModel { Name = "Rose King", ImagePath = "ProfileImage7.png" },
+                new ProfileModel { Name = "Jeanette Bell", ImagePath = "ProfileImage9.png" },
+                new ProfileModel { Name = "Lily Castro", ImagePath = "ProfileImage10.png" },
+                new ProfileModel { Name = "Susie Moss", ImagePath = "ProfileImage11.png" }
             };
 
-            this.Pictures = new ObservableCollection<string>()
+            this.Pictures = new ObservableCollection<ProfileModel>()
             {
-                 App.BaseImageUrl + "ProfileImage8.png",
-                 App.BaseImageUrl + "Album6.png",
-                 App.BaseImageUrl + "ArticleImage4.jpg",
-                 App.BaseImageUrl + "Recipe17.png",
-                 App.BaseImageUrl + "ArticleImage5.jpg",
-                 App.BaseImageUrl + "Mask.png",
+                new ProfileModel { ImagePath = "ProfileImage8.png" },
+                new ProfileModel { ImagePath = "Album6.png" },
+                new ProfileModel { ImagePath = "ArticleImage4.jpg" },
+                new ProfileModel { ImagePath = "Recipe17.png" },
+                new ProfileModel { ImagePath = "ArticleImage5.jpg" },
+                new ProfileModel { ImagePath = "Mask.png" }
             };
 
             this.FollowCommand = new Command(this.FollowClicked);
+            this.MessageCommand = new Command(this.MessageClicked);
             this.AddConnectionCommand = new Command(this.AddConnectionClicked);
             this.ImageTapCommand = new Command(this.ImageClicked);
             this.ProfileSelectedCommand = new Command(this.ProfileClicked);
@@ -93,6 +100,11 @@ public SocialProfileViewModel()
         /// </summary>
         public ICommand FollowCommand { get; set; }
 
+        /// <summary>
+        /// Gets or sets the command that is executed when the message button is clicked.
+        /// </summary>
+        public ICommand MessageCommand { get; set; }
+
         /// <summary>
         /// Gets or sets the command that is executed when the AddConnection button is clicked.
         /// </summary>
@@ -149,7 +161,7 @@ public ObservableCollection<ProfileModel> Connections
         /// <summary>
         /// Gets or sets the photos collection.
         /// </summary>
-        public ObservableCollection<string> Pictures
+        public ObservableCollection<ProfileModel> Pictures
         {
             get
             {
@@ -166,12 +178,29 @@ public ObservableCollection<string> Pictures
         /// <summary>
         /// Gets or sets the header image path.
         /// </summary>
-        public string HeaderImagePath { get; set; }
+        public string HeaderImagePath
+        {
+            get { return App.BaseImageUrl + this.headerImagePath; }
+            set { this.headerImagePath = value; }
+        }
 
         /// <summary>
         /// Gets or sets the profile image.
         /// </summary>
-        public string ProfileImage { get; set; }
+        public string ProfileImage
+        {
+            get { return App.BaseImageUrl + this.profileImage; }
+            set { this.profileImage = value; }
+        }
+
+        /// <summary>
+        /// Gets or sets the background image.
+        /// </summary>
+        public string BackgroundImage
+        {
+            get { return App.BaseImageUrl + this.backgroundImage; }
+            set { this.backgroundImage = value; }
+        }
 
         /// <summary>
         /// Gets or sets the profile name
@@ -222,6 +251,23 @@ public ObservableCollection<string> Pictures
         /// </summary>
         /// <param name="obj">The Object</param>
         private void FollowClicked(object obj)
+        {
+            SfButton button = obj as SfButton;
+            if (button.Text == "FOLLOW")
+            {
+                button.Text = "FOLLOWED";
+            }
+            else if (button.Text == "FOLLOWED")
+            {
+                button.Text = "FOLLOW";
+            } 
+        }
+
+        /// <summary>
+        /// Invoked when the message button is clicked.
+        /// </summary>
+        /// <param name="obj">The Object</param>
+        private void MessageClicked(object obj)
         {
             // Do something
         }
diff --git a/EssentialUIKit/ViewModels/Transaction/CheckoutPageViewModel.cs b/EssentialUIKit/ViewModels/Transaction/CheckoutPageViewModel.cs
index 009409b..295e3e0 100644
--- a/EssentialUIKit/ViewModels/Transaction/CheckoutPageViewModel.cs
+++ b/EssentialUIKit/ViewModels/Transaction/CheckoutPageViewModel.cs
@@ -69,14 +69,14 @@ public CheckoutPageViewModel()
             {
                 new Product
                 {
-                    PreviewImage = App.BaseImageUrl + "Image1.png", Name = "Full-Length Skirt",
+                    PreviewImage = "Image1.png", Name = "Full-Length Skirt",
                     Summary =
                         "This plaid, cotton skirt will keep you warm in the air-conditioned office or outside on cooler days.",
                     SellerName = "New Fashion Company", ActualPrice = 245, DiscountPercent = 30, TotalQuantity = 1
                 },
                 new Product
                 {
-                    PreviewImage = App.BaseImageUrl + "Image2.png", Name = "Peasant Blouse",
+                    PreviewImage = "Image2.png", Name = "Peasant Blouse",
                     Summary =
                         "Look your best this fall in this V-neck, pleated peasant blouse with full sleeves. Comes in white, chocolate, forest green, and more.",
                     SellerName = "New Fashion Company", ActualPrice = 245, DiscountPercent = 30, TotalQuantity = 1
diff --git a/EssentialUIKit/ViewModels/Transaction/MyCardsViewModel.cs b/EssentialUIKit/ViewModels/Transaction/MyCardsViewModel.cs
new file mode 100644
index 0000000..6caa416
--- /dev/null
+++ b/EssentialUIKit/ViewModels/Transaction/MyCardsViewModel.cs
@@ -0,0 +1,118 @@
+using Xamarin.Forms;
+using EssentialUIKit.Models.Transaction;
+using System.Collections.ObjectModel;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.ViewModels.Transaction
+{
+    /// <summary>
+    /// ViewModel for my cards page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    public class MyCardsViewModel : BaseViewModel
+    {
+        #region Properties
+
+        public ObservableCollection<Card> CardDetails { get; set; }
+
+        #endregion
+
+        #region Constructor 
+
+        public MyCardsViewModel()
+        {
+            this.BackButtonCommand = new Command(this.BackButtonClicked);
+            this.MoreButtonCommand = new Command(this.MoreButtonClicked);
+            this.AddCardCommand = new Command(this.AddCardButtonClicked);
+
+            this.CardDetails = new ObservableCollection<Card>()
+            {
+                new Card
+                {
+                  Type = "CREDIT CARD",
+                  Number = "XXXX  XXXX  XXXX  5838",
+                  Name = "Peter Wilson",
+                  Expiry = "08/20",
+                  Cvv = 846,
+                  BackgroundGradientStart = "#d54381",
+                  BackgroundGradientEnd = "#7644ad",
+                  CardTypeIcon = "Card.png"
+                },
+                new Card
+                {
+                  Type = "DEBIT CARD",
+                  Number = "XXXX  XXXX  XXXX  0743",
+                  Name = "Peter Wilson",
+                  Expiry = "03/21",
+                  Cvv = 543,
+                  BackgroundGradientStart = "#af4aff",
+                  BackgroundGradientEnd = "#3e5aff",
+                  CardTypeIcon = "Visa.png"
+                },
+                 new Card
+                {
+                  Type = "CREDIT CARD",
+                  Number = "XXXX  XXXX  XXXX  0629",
+                  Name = "Peter Wilson",
+                  Expiry = "18/22",
+                  Cvv = 346,
+                  BackgroundGradientStart = "#d54381",
+                  BackgroundGradientEnd = "#7644ad",
+                  CardTypeIcon = "Card.png"
+                }
+            };
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Invoked when the more button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void MoreButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the back button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void BackButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        /// <summary>
+        /// Invoked when the add card button clicked
+        /// </summary>
+        /// <param name="obj">The object</param>
+        private void AddCardButtonClicked(object obj)
+        {
+            // Do something
+        }
+
+        #endregion
+
+        #region Command
+
+            /// <summary>
+            /// Gets or sets the command is executed when the back button is clicked.
+            /// </summary>
+        public Command BackButtonCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the more button is clicked.
+        /// </summary>
+        public Command MoreButtonCommand { get; set; }
+
+        /// <summary>
+        /// Gets or sets the command is executed when the add card button is clicked.
+        /// </summary>
+        public Command AddCardCommand { get; set; }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Views/Article/Styles.xaml b/EssentialUIKit/Views/Article/Styles.xaml
index 2533d9b..a4c8a15 100644
--- a/EssentialUIKit/Views/Article/Styles.xaml
+++ b/EssentialUIKit/Views/Article/Styles.xaml
@@ -110,7 +110,6 @@
         <Setter Property="HorizontalOptions" Value="Fill" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="BorderWidth" Value="0" />
-        <Setter Property="FontAttributes" Value="Bold" />
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
diff --git a/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml b/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml
new file mode 100644
index 0000000..e73374b
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Catalog"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:core="clr-namespace:Syncfusion.XForms.Core;assembly=Syncfusion.Core.XForms"
+             xmlns:Templates="clr-namespace:EssentialUIKit.Views.Templates"
+             x:Name="articleCard"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False"
+             x:Class="EssentialUIKit.Views.Catalog.ArticleCardPage">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.BindingContext>
+        <viewModel:ArticleCardViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <Grid RowSpacing="0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>  
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="48"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="Title" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Article card page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25"  Text="Articles"  VerticalOptions="Center" VerticalTextAlignment="Center" />
+
+                </StackLayout>
+
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
+
+                    <!--  Back to title layout  -->
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" WidthRequest="38" HeightRequest="38"
+                                      CornerRadius="4" Padding="0"/>
+
+                    <!--  Rounded Search Entry  -->
+                    <border:SfBorder Style="{StaticResource SfBorderStyle}">
+                        <controls:BorderlessEntry x:Name="SearchEntry"  BindingContext="{x:Reference ArticlesCard}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
+                    </border:SfBorder>
+                </StackLayout>
+
+                <!--  Search Button  -->
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
+            </StackLayout>
+
+            <BoxView Grid.Row="1" HeightRequest="1" BackgroundColor="{DynamicResource Gray-200}"/>
+
+                <StackLayout Grid.Row="2" Spacing="0">
+                <ScrollView>
+                    <controls:SearchableArticleList x:Name="ArticlesCard" IsScrollBarVisible="False"  AllowSwiping="True" 
+                                  AutoFitMode="Height" SelectionGesture="Tap"  SelectionMode="Single" ItemSpacing="16" 
+                                  VerticalOptions="FillAndExpand" SearchText="{Binding SearchText}" TapCommand="{Binding ItemTappedCommand}"
+                                  ItemsSource="{Binding Articles}"  SelectionBackgroundColor="Transparent">
+                        <controls:SearchableArticleList.ItemTemplate>
+                            <DataTemplate>
+                                <ViewCell>
+                                    <controls:CustomShadowFrame CornerRadius="4" HasShadow="True"  BorderColor="{DynamicResource Gray-White}"  BackgroundColor="{DynamicResource Gray-White}"
+                                                                Margin="4" Padding="0" BorderWidth="1">
+                                        <controls:CustomShadowFrame.Content>                                        
+                                            <Grid RowSpacing="0" ColumnSpacing="0">
+                                            <Grid.RowDefinitions>
+                                                <RowDefinition Height="*"/>
+                                                <RowDefinition Height="Auto"/>
+                                            </Grid.RowDefinitions>
+
+                                            <!--  Image of the Article  -->
+                                            <Image
+                                                Aspect="AspectFill"  Grid.Row="0"
+                                                
+                                                HeightRequest="{OnIdiom Phone=170,
+                                                                        Tablet=170,
+                                                                        Desktop=170}"
+                                                WidthRequest="{OnIdiom Phone=343,
+                                                                        Tablet=343,
+                                                                        Desktop=423}">
+                                                <Image.Source>
+                                                    <UriImageSource
+                                                        CacheValidity="14"
+                                                        CachingEnabled="true"
+                                                        Uri="{Binding ImagePath}"/>
+                                                </Image.Source>
+                                            </Image>
+
+                                                <!--  OverLay Effect  -->
+                                                <Frame  CornerRadius="4" Opacity="0.35" BackgroundColor="{DynamicResource Gray-Black}" Grid.Row="0"/>
+
+                                                <!-- Description of the Article  -->
+                                            <StackLayout Grid.Row="0" Margin="16,70,16,0" Spacing="0" VerticalOptions="EndAndExpand">
+                                                
+                                                <!--Article Title-->
+                                                <Label Text="{Binding Name}"  Margin="0,8" FontSize="16" 
+                                                FontFamily="{StaticResource Montserrat-SemiBold}" LineBreakMode="WordWrap"
+                                                TextColor="{DynamicResource Gray-White}" VerticalOptions="End"  LineHeight="{OnPlatform Default=-1,Android=1.5}"/>
+
+                                                <!--  Author name  -->
+                                                <Label 
+                                                FontFamily="{StaticResource Montserrat-Medium}"
+                                                FontSize="12"
+                                                LineHeight="{OnPlatform Default=-1,
+                                                                        Android=1.5}"
+                                                Text="{Binding Author}"
+                                                TextColor="{DynamicResource Gray-White }"
+                                                VerticalOptions="End" />
+
+                                                <!--  Published date and average reading time  -->
+                                                <Label 
+                                                Margin="0,0,0,8" Grid.Row="2" VerticalOptions="End"
+                                                FontFamily="{StaticResource Montserrat-Medium}"
+                                                FontSize="12"
+                                                LineHeight="{OnPlatform Default=-1,
+                                                                        Android=1.5}"
+                                                TextColor="{DynamicResource Gray-White }">
+                                                    <Label.FormattedText>
+                                                        <FormattedString>
+                                                            <Span Text="{Binding Date}" />
+                                                            <Span Text=" | " />
+                                                            <Span Text="{Binding AverageReadingTime}" />
+                                                        </FormattedString>
+                                                    </Label.FormattedText>
+                                                </Label>
+                                            </StackLayout>
+
+                                            <Templates:ArticleActivityTemplate Grid.Row="1" ParentBindingContext="{Binding Path=BindingContext, Source={x:Reference articleCard}}"/>
+
+                                            </Grid>
+                                        </controls:CustomShadowFrame.Content>
+                                    </controls:CustomShadowFrame>
+                                </ViewCell>
+                            </DataTemplate>
+                        </controls:SearchableArticleList.ItemTemplate>
+
+                        <!--  Layout to customize no. of columns in SfListView  -->
+                        <controls:SearchableArticleList.LayoutManager>
+                            <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue Desktop=3, PhonePortrait=1, PhoneLandscape=1, TabletPortrait=2, TabletLandscape=2}" />
+                        </controls:SearchableArticleList.LayoutManager>
+
+                    </controls:SearchableArticleList>
+                </ScrollView>
+            </StackLayout>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml.cs b/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml.cs
new file mode 100644
index 0000000..430cf39
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/ArticleCardPage.xaml.cs
@@ -0,0 +1,113 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Catalog
+{
+    /// <summary>
+    /// Page to display articles as a card type.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class ArticleCardPage 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ArticleCardPage" /> class.
+        /// </summary>
+        public ArticleCardPage()
+        {
+            InitializeComponent();
+        }
+
+        /// <summary>
+        /// Invoked when view size is changed.
+        /// </summary>x
+        /// <param name="width">The Width</param>
+        /// <param name="height">The Height</param>
+        protected override void OnSizeAllocated(double width, double height)
+        {
+            base.OnSizeAllocated(width, height);
+
+            if (width > height)
+            {
+                if (Search.IsVisible)
+                {
+                    Search.WidthRequest = width;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Invoked when search button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void SearchButton_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = false;
+            this.Search.IsVisible = true;
+            this.Title.IsVisible = false;
+
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from 0 to full width when it added to the view.
+                var expandAnimation = new Animation(
+                    property =>
+                    {
+                        Search.WidthRequest = property;
+                        opacity = property / TitleView.Width;
+                        Search.Opacity = opacity;
+                    }, 0, TitleView.Width, Easing.Linear);
+                expandAnimation.Commit(Search, "Expand", 16, 250, Easing.Linear, (p, q) => this.SearchExpandAnimationCompleted());
+            }
+        }
+
+        /// <summary>
+        /// Invoked when back to title button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void BackToTitle_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = true;
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from full width to 0 before it removed from view.
+                var shrinkAnimation = new Animation(property =>
+                {
+                    Search.WidthRequest = property;
+                    opacity = property / TitleView.Width;
+                    Search.Opacity = opacity;
+                },
+                TitleView.Width, 0, Easing.Linear);
+                shrinkAnimation.Commit(Search, "Shrink", 16, 250, Easing.Linear, (p, q) => this.SearchBoxAnimationCompleted());
+            }
+
+            SearchEntry.Text = string.Empty;
+        }
+
+        /// <summary>
+        /// Invokes when search box Animation completed.
+        /// </summary>
+        private void SearchBoxAnimationCompleted()
+        {
+            this.Search.IsVisible = false;
+            this.Title.IsVisible = true;
+        }
+
+        /// <summary>
+        /// Invokes when search expand Animation completed.
+        /// </summary>
+        private void SearchExpandAnimationCompleted()
+        {
+            this.SearchEntry.Focus();
+        }
+    }
+}
+
+      
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/EventListPage.xaml b/EssentialUIKit/Views/Catalog/EventListPage.xaml
new file mode 100644
index 0000000..bc17233
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/EventListPage.xaml
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Catalog"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:core="clr-namespace:Syncfusion.XForms.Core;assembly=Syncfusion.Core.XForms"
+             xmlns:template="clr-namespace:EssentialUIKit.Views.Templates"
+             x:Class="EssentialUIKit.Views.Catalog.EventListPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False"
+             x:Name="eventListPage">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.BindingContext>
+        <viewModel:EventListViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <Grid RowSpacing="0" >
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="50"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="Title" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Event list page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25"  Text="Events"  VerticalOptions="Center" VerticalTextAlignment="Center" />
+
+                </StackLayout>
+
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
+
+                    <!--  Back to title layout  -->
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" />
+
+                    <!--  Rounded Search Entry  -->
+                    <border:SfBorder Style="{StaticResource SfBorderStyle}">
+                        <controls:BorderlessEntry x:Name="SearchEntry" 
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
+                    </border:SfBorder>
+                </StackLayout>
+
+                <!--  Search Button  -->
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
+            </StackLayout>
+
+            <BoxView Grid.Row="1" Style="{StaticResource SeparatorStyle}"/>
+
+            <StackLayout Grid.Row="2">
+
+                <!--  Tab view  -->
+                <tabView:SfTabView x:Name="tabView" SelectedIndex="{Binding SelectedIndex}">
+                    <tabView:SfTabView.SelectionIndicatorSettings>
+                        <tabView:SelectionIndicatorSettings Color="{DynamicResource PrimaryColor}"
+                                                            StrokeThickness="3"/>
+
+                    </tabView:SfTabView.SelectionIndicatorSettings>
+                    <!--  Tab view for All  -->
+                    <tabView:SfTabItem  Title="All" SelectionColor="{DynamicResource PrimaryColor}" 
+                                        TitleFontFamily="{StaticResource Montserrat-SemiBold}"
+                                        TitleFontSize="14" 
+                                        TitleFontColor="{DynamicResource Gray-700}">
+
+                        <tabView:SfTabItem.Content>
+
+                            <StackLayout  Padding="{OnIdiom Phone=0,Default='8,0'}">
+                                <controls:SearchableEventList
+                                    x:Name="EventList" 
+                                    AutoFitMode="DynamicHeight"
+                                    IsScrollBarVisible="false"
+                                    ItemSpacing="16"
+                                    SearchText="{Binding AllListSearchText}"
+                                    ItemsSource="{Binding EventItems}"
+                                    SelectionBackgroundColor="Transparent"
+                                    TapCommand="{Binding ItemTappedCommand}"
+                                    VerticalOptions="FillAndExpand">
+
+                                    <controls:SearchableEventList.ItemTemplate>
+                                        <DataTemplate>
+                                            <ViewCell>
+                                                <!--  View of each card item  -->
+                                                <StackLayout>
+                                                    <controls:CustomShadowFrame
+                                                         Margin="4"
+                                                         Padding="0"
+                                                         BackgroundColor="{DynamicResource Gray-White}"
+                                                         BorderColor="{DynamicResource Gray-White}"
+                                                         BorderWidth="1"
+                                                         CornerRadius="4"
+                                                         HasShadow="True"
+                                                         HorizontalOptions="FillAndExpand"
+                                                         VerticalOptions="FillAndExpand">
+                                                        <template:EventListTemplate />
+                                                    </controls:CustomShadowFrame >
+                                                </StackLayout>
+                                            </ViewCell>
+                                        </DataTemplate>
+                                    </controls:SearchableEventList.ItemTemplate>
+
+                                    <!--  Layout to customize number of columns in SfListView  -->
+                                    <listView:SfListView.LayoutManager>
+                                        <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=1, PhoneLandscape=2, TabletPortrait=2, TabletLandscape=2, Desktop=2}" />
+                                    </listView:SfListView.LayoutManager>
+
+                                </controls:SearchableEventList>
+
+                            </StackLayout>
+                        </tabView:SfTabItem.Content>
+                    </tabView:SfTabItem>
+
+                    <!--  Tab view for upcoming  -->
+                    <tabView:SfTabItem Title="Upcoming" SelectionColor="{DynamicResource PrimaryColor}"
+                                           TitleFontFamily="{StaticResource Montserrat-SemiBold}"
+                                           TitleFontSize="14"
+                                           TitleFontColor="{DynamicResource Gray-700}">
+                        <tabView:SfTabItem.Content>
+                            <StackLayout Padding="{OnIdiom Phone=0,Default='8,0'}">
+
+                                <controls:SearchableEventList  AutoFitMode="DynamicHeight"  
+                                    IsScrollBarVisible="false"
+                                    ItemSpacing="16"
+                                    ItemsSource="{Binding PopularEventItems}"
+                                    SearchText="{Binding UpcomingListSearchText}"
+                                    SelectionBackgroundColor="Transparent"
+                                    TapCommand="{Binding ItemTappedCommand}"
+                                    VerticalOptions="FillAndExpand">
+
+                                    <controls:SearchableEventList.ItemTemplate>
+                                        <DataTemplate>
+                                            <ViewCell>
+                                                <!--  View of each card item  -->
+                                                <StackLayout>
+                                                    <controls:CustomShadowFrame
+                                                         Margin="4"
+                                                         Padding="0"
+                                                         BackgroundColor="{DynamicResource Gray-White}"
+                                                         BorderColor="{DynamicResource Gray-White}"
+                                                         BorderWidth="1"
+                                                         CornerRadius="4"
+                                                         HasShadow="True"
+                                                         HorizontalOptions="FillAndExpand"
+                                                         VerticalOptions="FillAndExpand">
+                                                        <template:EventListTemplate />
+                                                    </controls:CustomShadowFrame>
+                                                </StackLayout>
+                                            </ViewCell>
+                                        </DataTemplate>
+                                    </controls:SearchableEventList.ItemTemplate>
+
+                                    <!--  Layout to customize number of columns in SfListView  -->
+                                    <listView:SfListView.LayoutManager>
+                                        <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=1, PhoneLandscape=1, TabletPortrait=2, TabletLandscape=2, Desktop=2}" />
+                                    </listView:SfListView.LayoutManager>
+
+                                </controls:SearchableEventList>
+                            </StackLayout>
+                        </tabView:SfTabItem.Content>
+                    </tabView:SfTabItem>
+
+                    <!--  Tab view for popular  -->
+                    <tabView:SfTabItem Title="Popular" SelectionColor="{DynamicResource PrimaryColor}"
+                                           TitleFontFamily="{StaticResource Montserrat-SemiBold}"
+                                           TitleFontSize="14"
+                                           TitleFontColor="{DynamicResource Gray-700}">
+                        <tabView:SfTabItem.Content>
+                            <StackLayout Padding="{OnIdiom Phone=0,Default='8,0'}">
+                                <controls:SearchableEventList                                       
+                                       AutoFitMode="DynamicHeight"
+                                       IsScrollBarVisible="false"
+                                       ItemSpacing="16"
+                                        SearchText="{Binding PopularListSearchText}"
+                                       ItemsSource="{Binding UpcomingEventItems}"
+                                       SelectionBackgroundColor="Transparent"
+                                       TapCommand="{Binding ItemTappedCommand}"
+                                       VerticalOptions="FillAndExpand">
+                                    <controls:SearchableEventList.ItemTemplate>
+                                        <DataTemplate>
+                                            <ViewCell>
+                                                <!--  View of each card item  -->
+                                                <StackLayout>
+                                                    <controls:CustomShadowFrame
+                                                         Margin="4" 
+                                                         Padding="0" 
+                                                         BackgroundColor="{DynamicResource Gray-White}"
+                                                         BorderColor="{DynamicResource Gray-White}"
+                                                         BorderWidth="1"
+                                                         CornerRadius="4"
+                                                         HasShadow="True"
+                                                         HorizontalOptions="FillAndExpand"
+                                                         VerticalOptions="FillAndExpand">
+                                                        <template:EventListTemplate />
+                                                    </controls:CustomShadowFrame>
+                                                </StackLayout>
+                                            </ViewCell>
+                                        </DataTemplate>
+                                    </controls:SearchableEventList.ItemTemplate>
+
+                                    <!--  Layout to customize number of columns in SfListView  -->
+                                    <listView:SfListView.LayoutManager>
+                                        <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=1, PhoneLandscape=2, TabletPortrait=2, TabletLandscape=2, Desktop=2}" />
+                                    </listView:SfListView.LayoutManager>
+
+                                </controls:SearchableEventList>
+                            </StackLayout>
+                        </tabView:SfTabItem.Content>
+                    </tabView:SfTabItem>
+                </tabView:SfTabView>
+            </StackLayout>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/EventListPage.xaml.cs b/EssentialUIKit/Views/Catalog/EventListPage.xaml.cs
new file mode 100644
index 0000000..fafa0bc
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/EventListPage.xaml.cs
@@ -0,0 +1,108 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Catalog
+{
+    /// <summary>
+    /// The event detail page 
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class EventListPage
+    {
+        public EventListPage()
+        {
+            InitializeComponent();
+        }
+
+        /// <summary>
+        /// Invoked when view size is changed.
+        /// </summary>x
+        /// <param name="width">The Width</param>
+        /// <param name="height">The Height</param>
+        protected override void OnSizeAllocated(double width, double height)
+        {
+            base.OnSizeAllocated(width, height);
+
+            if (width > height)
+            {
+                if (Search.IsVisible)
+                {
+                    Search.WidthRequest = width;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Invoked when search button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void SearchButton_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = false;
+            this.Search.IsVisible = true;
+            this.Title.IsVisible = false;
+
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from 0 to full width when it added to the view.
+                var expandAnimation = new Animation(
+                    property =>
+                    {
+                        Search.WidthRequest = property;
+                        opacity = property / TitleView.Width;
+                        Search.Opacity = opacity;
+                    }, 0, TitleView.Width, Easing.Linear);
+                expandAnimation.Commit(Search, "Expand", 16, 250, Easing.Linear, (p, q) => this.SearchExpandAnimationCompleted());
+            }
+        }
+
+        /// <summary>
+        /// Invoked when back to title button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void BackToTitle_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = true;
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from full width to 0 before it removed from view.
+                var shrinkAnimation = new Animation(property =>
+                {
+                    Search.WidthRequest = property;
+                    opacity = property / TitleView.Width;
+                    Search.Opacity = opacity;
+                },
+                TitleView.Width, 0, Easing.Linear);
+                shrinkAnimation.Commit(Search, "Shrink", 16, 250, Easing.Linear, (p, q) => this.SearchBoxAnimationCompleted());
+            }
+
+            SearchEntry.Text = string.Empty;
+        }
+
+        /// <summary>
+        /// Invokes when search box Animation completed.
+        /// </summary>
+        private void SearchBoxAnimationCompleted()
+        {
+            this.Search.IsVisible = false;
+            this.Title.IsVisible = true;
+        }
+
+        /// <summary>
+        /// Invokes when search expand Animation completed.
+        /// </summary>
+        private void SearchExpandAnimationCompleted()
+        {
+            this.SearchEntry.Focus();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml b/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml
new file mode 100644
index 0000000..85d195d
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml
@@ -0,0 +1,289 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Catalog"
+             xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
+             x:Class="EssentialUIKit.Views.Catalog.NavigationTravelPage"
+             x:Name="navigationTravelPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <converter:BooleanToColorConverter x:Key="boolToColorConverter" />
+            <converter:BooleanToStringConverter x:Key="boolToStringConverter" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.BindingContext>
+        <viewModel:NavigationTravelPageViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <ScrollView>
+            <StackLayout Spacing="0">
+
+                <Grid HeightRequest="64">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton Margin="16,0,0,0" 
+                                      HorizontalOptions="Start"
+                                      VerticalOptions="Center"
+                                      Command="{Binding BackButtonCommand}"
+                                      CornerRadius="4"
+                                      Style="{StaticResource IconButtonStyle}"
+                                      Text="{StaticResource Back}" />
+
+                    <!--  Navigation travel page title  -->
+                    <Label FontFamily="{StaticResource Montserrat-Medium}"
+                           FontSize="16"
+                           HorizontalOptions="Center"
+                           Text="Travel"
+                           TextColor="{DynamicResource Gray-900}"
+                           VerticalOptions="Center" />
+
+                </Grid>
+
+
+
+                <rotator:SfRotator BackgroundColor="Transparent"
+                                   DotsBorderColor="Transparent" 
+                                   UnselectedDotColor="{DynamicResource Gray-200}"
+                                   SelectedDotColor="{DynamicResource PrimaryColor}" 
+                                   ItemsSource="{Binding TravelPlaces}" 
+                                   SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
+                                   NavigationStripMode="Dots"
+                                   NavigationStripPosition="Bottom"
+                                   DotPlacement="Default"
+                                   HeightRequest="525"
+                                   Margin="8, 0">
+                    <rotator:SfRotator.ItemTemplate>
+                        <DataTemplate>
+                            <StackLayout Spacing="0">
+                                <controls:CustomShadowFrame x:Name="Rotator" BackgroundColor="{DynamicResource Gray-White}" 
+                                                        BorderColor="{DynamicResource Gray-White}" BorderWidth="1" 
+                                                        CornerRadius="4" HasShadow="True" Margin="4" Padding="0">
+
+                                    <Grid RowSpacing="0">
+
+                                        <Grid.RowDefinitions>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="Auto"/>
+                                            <RowDefinition Height="Auto"/>
+                                        </Grid.RowDefinitions>
+
+                                        <!--Image of the place-->
+                                        <Image Aspect="AspectFill"
+                                           BackgroundColor="{DynamicResource Gray-White}"
+                                           HeightRequest="395">
+                                            <Image.Source>
+                                                <UriImageSource CacheValidity="14"
+                                                            CachingEnabled="true" 
+                                                            Uri="{Binding ImagePath}" />
+                                            </Image.Source>
+                                        </Image>
+
+                                        <!--Travel place-->
+                                        <Label Grid.Row="1" 
+                                           Margin="16,16,16,4"
+                                           Text="{Binding Place}"
+                                           TextColor="{DynamicResource Gray-900}"
+                                           FontSize="16"
+                                           FontFamily="{DynamicResource Montserrat-SemiBold}"
+                                           LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+                                        <!--Details of travel place-->
+                                        <Label Grid.Row="2" 
+                                           Margin="16,0,16,16"
+                                           Text="{Binding Details}"
+                                           TextColor="{DynamicResource Gray-700}"
+                                           FontSize="12"
+                                           FontFamily="{DynamicResource Montserrat-Medium}"
+                                           LineBreakMode="TailTruncation"
+                                           MaxLines="2"
+                                           LineHeight="{OnPlatform Android=1.2, Default=-1}" />
+
+                                        <Grid.GestureRecognizers>
+                                            <TapGestureRecognizer Command="{Binding Path=BindingContext.TravelPlacesCommand, Source={x:Reference Rotator}}" CommandParameter="{Binding .}" />
+                                        </Grid.GestureRecognizers>
+                                    </Grid>
+                                </controls:CustomShadowFrame>
+                            </StackLayout>
+                        </DataTemplate>
+                    </rotator:SfRotator.ItemTemplate>
+                </rotator:SfRotator>
+
+                <Grid RowSpacing="0" ColumnSpacing="0" Margin="16,23,8,10">
+                    <Label Text="TOP DESTINATIONS" Style="{StaticResource HeaderLabelStyle}" HorizontalOptions="Start" VerticalOptions="Center" />
+                    <buttons:SfButton Text="VIEW ALL" BackgroundColor="Transparent" FontSize="12" CornerRadius="4"
+                                      FontFamily="{DynamicResource Montserrat-SemiBold}" VerticalOptions="StartAndExpand"
+                                      TextColor="{StaticResource Link}" HorizontalOptions="End" />
+                </Grid>
+
+                <listView:SfListView Margin="8,0,0,0"
+                                     Padding="0"
+                                     AutoFitMode="Height"
+                                     HeightRequest="318"
+                                     HorizontalOptions="FillAndExpand"
+                                     IsScrollBarVisible="False"
+                                     IsStickyHeader="True"
+                                     ItemsSource="{Binding TopDestinations}"
+                                     Orientation="Horizontal"
+                                     SelectionBackgroundColor="{StaticResource Transparent}"
+                                     TapCommand="{Binding ItemSelectedCommand}">
+
+                    <listView:SfListView.ItemTemplate>
+                        <DataTemplate>
+                            <controls:CustomShadowFrame Margin="8,0,8,35"
+                                                        Padding="0"
+                                                        BackgroundColor="{DynamicResource Gray-White}"
+                                                        BorderColor="{DynamicResource Gray-White}"
+                                                        CornerRadius="4"
+                                                        HasShadow="True"
+                                                        WidthRequest="230"
+                                                        HeightRequest="276">
+
+                                <Grid RowSpacing="0">
+
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                    </Grid.RowDefinitions>
+
+                                    <!--  Place image  -->
+                                    <Image Margin="0,0,0,16"
+                                           Aspect="AspectFill"
+                                           BackgroundColor="{DynamicResource Gray-White}"
+                                           HeightRequest="150"
+                                           HorizontalOptions="FillAndExpand"
+                                           VerticalOptions="Start"
+                                           Source="{Binding ImagePath}" />
+
+                                    <buttons:SfButton Margin="0,2,2,0"
+                                                      Style="{StaticResource FavouriteButton}"
+                                                      Command="{Binding BindingContext.AddFavouriteCommand, Source={x:Reference navigationTravelPage}}"
+                                                      CommandParameter="{Binding}"
+                                                      Text="{Binding IsFavourite, Converter={StaticResource boolToStringConverter}, ConverterParameter=1}"
+                                                      TextColor="{Binding IsFavourite, Converter={x:StaticResource boolToColorConverter}, ConverterParameter=8}" />
+
+                                    <!--  Place name  -->
+                                    <Label Grid.Row="1" 
+                                           Margin="16,0,16,4"
+                                           FontFamily="{StaticResource Montserrat-SemiBold}"
+                                           FontSize="16"
+                                           HorizontalOptions="StartAndExpand"
+                                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                                           Text="{Binding Place}"
+                                           TextColor="{DynamicResource Gray-900}" />
+
+                                    <!--  Place Details  -->
+                                    <Label Grid.Row="2" 
+                                           Margin="16,0,16,8"
+                                           FontFamily="{StaticResource Montserrat-Medium}"
+                                           FontSize="12"
+                                           HorizontalOptions="StartAndExpand"
+                                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                                           LineBreakMode="TailTruncation"
+                                           MaxLines="2"
+                                           Text="{Binding Details}"
+                                           TextColor="{DynamicResource Gray-700}" />
+
+                                    <!-- Right arrow icon -->
+                                    <buttons:SfButton Grid.Row="3" 
+                                                      Margin="0,0,5,5"
+                                                      BackgroundColor="Transparent"
+                                                      TextColor="{DynamicResource Gray-600}"
+                                                      CornerRadius="4"
+                                                      FontSize="20" 
+                                                      FontFamily="{StaticResource FontIcons}"
+                                                      Text="{StaticResource ArrowRight}"
+                                                      HorizontalOptions="End">
+                                    </buttons:SfButton>
+
+                                </Grid>
+                            </controls:CustomShadowFrame>
+                        </DataTemplate>
+                    </listView:SfListView.ItemTemplate>
+                </listView:SfListView>
+
+                <Grid RowSpacing="0" ColumnSpacing="0" Margin="16,0,8,10">
+                    <Label Text="BEST PLACES" Style="{StaticResource HeaderLabelStyle}" HorizontalOptions="Start" VerticalOptions="Center" />
+                    <buttons:SfButton Text="VIEW ALL" BackgroundColor="Transparent" FontSize="12" CornerRadius="4"
+                                      FontFamily="{DynamicResource Montserrat-SemiBold}"
+                                      TextColor="{StaticResource Link}" HorizontalOptions="End" />
+                </Grid>
+
+                <listView:SfListView Margin="8,0,0,0"
+                                     Padding="0"
+                                     AutoFitMode="Height"
+                                     HeightRequest="292"
+                                     HorizontalOptions="FillAndExpand"
+                                     IsScrollBarVisible="False"
+                                     IsStickyHeader="True"
+                                     ItemsSource="{Binding BestPlaces}"
+                                     Orientation="Horizontal"
+                                     SelectionBackgroundColor="{StaticResource Transparent}"
+                                     TapCommand="{Binding BestPlacesCommand}">
+
+                    <listView:SfListView.ItemTemplate>
+                        <DataTemplate>
+                            <controls:CustomShadowFrame Margin="8,0,8,24"
+                                                        Padding="0"
+                                                        BackgroundColor="{DynamicResource Gray-White}"
+                                                        BorderColor="{DynamicResource Gray-White}"
+                                                        CornerRadius="4"
+                                                        HasShadow="True"
+                                                        WidthRequest="180"
+                                                        HeightRequest="250">
+
+                                <Grid RowSpacing="0" ColumnSpacing="0" WidthRequest="180" HeightRequest="250">
+
+                                    <!--  Place image  -->
+                                    <Image Aspect="AspectFill"
+                                           BackgroundColor="{DynamicResource Gray-White}"
+                                           HorizontalOptions="FillAndExpand"
+                                           VerticalOptions="FillAndExpand"
+                                           Source="{Binding ImagePath}" />
+
+                                    <!--  Place name  -->
+                                    <Label Margin="8,0,0,12"
+                                           FontFamily="{StaticResource Montserrat-SemiBold}"
+                                           FontSize="16"
+                                           HorizontalOptions="StartAndExpand"
+                                           VerticalOptions="End"
+                                           HeightRequest="24"
+                                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                                           Text="{Binding Place}"
+                                           TextColor="{DynamicResource Gray-White}" />
+
+                                    <!--  Favourite Icon  -->
+                                    <buttons:SfButton Margin="0,2,2,0"
+                                                      Style="{StaticResource FavouriteButton}"
+                                                      Command="{Binding BindingContext.AddFavouriteCommand, Source={x:Reference navigationTravelPage}}"
+                                                      CommandParameter="{Binding}"
+                                                      Text="{Binding IsFavourite, Converter={StaticResource boolToStringConverter}, ConverterParameter=1}"
+                                                      TextColor="{Binding IsFavourite, Converter={x:StaticResource boolToColorConverter}, ConverterParameter=8}" />
+
+                                </Grid>
+                            </controls:CustomShadowFrame>
+                        </DataTemplate>
+                    </listView:SfListView.ItemTemplate>
+                </listView:SfListView>
+
+            </StackLayout>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml.cs b/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml.cs
new file mode 100644
index 0000000..db4c986
--- /dev/null
+++ b/EssentialUIKit/Views/Catalog/NavigationTravelPage.xaml.cs
@@ -0,0 +1,18 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Catalog
+{
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class NavigationTravelPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="NavigationTravelPage"/> class.
+        /// </summary>
+        public NavigationTravelPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Catalog/Styles.xaml b/EssentialUIKit/Views/Catalog/Styles.xaml
index 70257d6..029baa5 100644
--- a/EssentialUIKit/Views/Catalog/Styles.xaml
+++ b/EssentialUIKit/Views/Catalog/Styles.xaml
@@ -2,7 +2,8 @@
 <ResourceDictionary
     x:Class="EssentialUIKit.Views.Catalog.Styles"
     xmlns="http://xamarin.com/schemas/2014/forms"
-    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
+    xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
     xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
     xmlns:control="clr-namespace:EssentialUIKit.Controls"
     xmlns:converter="clr-namespace:EssentialUIKit.Converters"
@@ -11,12 +12,19 @@
 
     <Color x:Key="OrangeyYellow">#fcbc0f</Color>
     <Color x:Key="Transparent">Transparent</Color>
+    <Color x:Key="Link">#567cd7</Color>
+    <Color x:Key="Steel">#788396</Color>
     <x:String x:Key="Cart">&#xe708;</x:String>
     <x:String x:Key="Bell">&#xe700;</x:String>
     <x:String x:Key="Filter">&#xe702;</x:String>
     <x:String x:Key="Sort">&#xe70a;</x:String>
     <x:String x:Key="BurgerMenu">&#xe72e;</x:String>
     <x:String x:Key="Back">&#xe709;</x:String>
+    <x:String x:Key="Search">&#xe705;</x:String>
+    <x:String x:Key="Bookmark">&#xe734;</x:String>
+    <x:String x:Key="Favourite">&#xe701;</x:String>
+    <x:String x:Key="Share">&#xe704;</x:String>
+    <x:String x:Key="ArrowRight">&#xe728;</x:String>
 
     <converter:DynamicResourceToColorConverter x:Key="DynamicResourceToColorConverter" />
 
@@ -179,7 +187,6 @@
         <Setter Property="HorizontalOptions" Value="Fill" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="BorderWidth" Value="0" />
-        <Setter Property="FontAttributes" Value="Bold" />
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
@@ -193,4 +200,60 @@
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
-</ResourceDictionary>
+    <!-- Common style for borders -->
+    <Style x:Key="SfBorderStyle" TargetType="border:SfBorder">
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-White}" />
+        <Setter Property="BorderColor" Value="Transparent" />
+        <Setter Property="CornerRadius" Value="25" />
+        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+    </Style>
+
+    <!-- Common style for search entries -->
+    <Style x:Key="SearchEntryStyle" TargetType="control:BorderlessEntry">
+        <Setter Property="PlaceholderColor" Value="{DynamicResource Gray-700}" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="TextColor" Value="{DynamicResource Gray-900}" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <!-- Common style for seperators -->
+    <Style x:Key="SeparatorStyle" TargetType="BoxView">
+        <Setter Property="HeightRequest" Value="1" />
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-200}" />
+    </Style>
+
+    <!-- Common style for navigation bar buttons -->
+    <Style x:Key="NavigationBarButton" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="WidthRequest" Value="38" />
+        <Setter Property="HeightRequest" Value="38" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="Fill" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+    </Style>
+
+    <!--  Common style for header labels  -->
+    <Style x:Key="HeaderLabelStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-800}" />
+        <Setter Property="FontFamily" Value="{DynamicResource Montserrat-SemiBold}" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="LineHeight" Value="{OnPlatform Android=1.5, Default=-1}" />
+    </Style>
+
+    <!--  Common style for favourite button  -->
+    <Style x:Key="FavouriteButton" TargetType="buttons:SfButton">
+        <Setter Property="BackgroundColor" Value="{DynamicResource Transparent}" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="HorizontalOptions" Value="End" />
+        <Setter Property="VerticalOptions" Value="Start" />
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml b/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml
new file mode 100644
index 0000000..61a0e23
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:local="clr-namespace:EssentialUIKit.Views.Dashboard.Selectors"
+             xmlns:Behavior="clr-namespace:EssentialUIKit.Behaviors"
+             x:Class="EssentialUIKit.Views.Dashboard.CompanyHistoryPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.ControlTemplate>
+        <ControlTemplate>
+            <StackLayout Spacing="0" >
+                <!--  Title View  -->
+                <Label 
+                    Text="Company History"
+                    TextColor="{DynamicResource Gray-900}"
+                    FontFamily="{StaticResource Montserrat-Medium}"
+                    FontSize="16"
+                    Margin="0,20"
+                    HorizontalOptions="CenterAndExpand" />
+
+                <BoxView HeightRequest="1" BackgroundColor="{DynamicResource Gray-200}"/>
+                <ContentPresenter />
+            </StackLayout>
+        </ControlTemplate>
+    </ContentPage.ControlTemplate>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+                <ResourceDictionary Source="Templates/CompanyHistoryTemplates.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+            <local:CompanyHistoryDataSelectors x:Key="CompanyHistoryTemplate" Header="{StaticResource headerTemplate}" 
+                                              Content="{StaticResource contentTemplate}"/>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+    
+    <ContentPage.Content>
+        <ScrollView>
+        <StackLayout Margin="16,24" Spacing="8" >
+    
+                <Label Text="{Binding CompanyName}" FontSize="16" FontFamily="{StaticResource Montserrat-SemiBold}" LineHeight="{OnPlatform Default=1.25, iOS=-1}"
+                       TextColor="{DynamicResource Gray-800}" LineBreakMode="TailTruncation"/>
+
+                <Label Text="{Binding CompanyDescription}" FontSize="14" FontFamily="{StaticResource Montserrat-Medium}"  LineHeight="{OnPlatform Default=1.25, iOS=-1}"
+                       TextColor="{DynamicResource Gray-700}" LineBreakMode="WordWrap" />
+
+                <Grid RowSpacing="0" ColumnSpacing="0" Margin="0,16,0,0">
+            <BoxView HeightRequest="{Binding Source={x:Reference list}, Path=Height}" HorizontalOptions="Start" 
+                     VerticalOptions="Start"   WidthRequest="1" Margin="23,0,0,0" BackgroundColor="{DynamicResource Gray-300}" />
+
+                    <listView:SfListView VerticalOptions="Start" x:Name="list" ItemTemplate="{StaticResource CompanyHistoryTemplate}" AutoFitMode="Height"
+                                 SelectionMode="None" AllowSwiping="True" ItemSpacing="0,0,0,20"
+                                 IsScrollBarVisible="False" ItemsSource="{Binding CompanyHistory}" >
+
+                <listView:SfListView.Behaviors>
+                    <Behavior:SfListViewExtendHeightBehavior/>
+                </listView:SfListView.Behaviors>
+            </listView:SfListView>
+        </Grid>
+        </StackLayout>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml.cs b/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml.cs
new file mode 100644
index 0000000..f3283c4
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/CompanyHistoryPage.xaml.cs
@@ -0,0 +1,23 @@
+using EssentialUIKit.DataService;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard
+{
+    /// <summary>
+    /// Page to show Company History.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class CompanyHistoryPage 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="CompanyHistoryPage" /> class.
+        /// </summary>
+        public CompanyHistoryPage()
+        {
+            InitializeComponent();
+            this.BindingContext = CompanyHistoryDataService.Instance.CompanyHistoryViewModel;
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml b/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml
new file mode 100644
index 0000000..ae009a7
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml
@@ -0,0 +1,245 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Dashboard"
+             xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
+             xmlns:behaviors="clr-namespace:EssentialUIKit.Behaviors;assembly=EssentialUIKit"
+             x:Class="EssentialUIKit.Views.Dashboard.DailyCaloriesReportPage"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.BindingContext>
+        <viewModel:DailyCaloriesReportViewModel x:Name="CalorieViewModel" />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+        <Grid>
+            <gradient:SfGradientView>
+                <gradient:SfGradientView.BackgroundBrush>
+                    <gradient:SfLinearGradientBrush>
+                        <gradient:SfLinearGradientBrush.GradientStops>
+                            <gradient:SfGradientStop Offset="0" Color="{DynamicResource GradientStart}" />
+                            <gradient:SfGradientStop Offset="1" Color="{DynamicResource GradientEnd}" />
+                        </gradient:SfLinearGradientBrush.GradientStops>
+                    </gradient:SfLinearGradientBrush>
+                </gradient:SfGradientView.BackgroundBrush>
+            </gradient:SfGradientView>
+
+            <ScrollView>
+
+                <Grid ColumnSpacing="0" RowSpacing="0">
+
+                    <Grid.RowDefinitions >
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="{OnIdiom Desktop=1*, Tablet=1*, Phone=16}" />
+                        <ColumnDefinition Width="{OnIdiom Desktop=3*, Tablet=4*, Phone=*}" />
+                        <ColumnDefinition Width="{OnIdiom Desktop=1*, Tablet=1*, Phone=16}" />
+                    </Grid.ColumnDefinitions>
+
+                    <Label Grid.Column="1"
+                           Text="Health"
+                           HorizontalOptions="Center"
+                           Margin="0,10"
+                           FontSize="16"
+                           FontFamily="{StaticResource Montserrat-Medium}"
+                           TextColor="{ StaticResource Gray-White}"/>
+
+                    <gauge:SfCircularGauge Grid.Row="1" 
+                                           Grid.Column="1" 
+                                           HeightRequest="190" 
+                                           WidthRequest="190"
+                                           BackgroundColor="Transparent" 
+                                           Margin="0, 40" 
+                                           HorizontalOptions="Center">
+
+                        <gauge:SfCircularGauge.Headers>
+                            <gauge:Header Text="1200" 
+                                          Position="0.5,0.4" 
+                                          ForegroundColor="{DynamicResource Gray-White}" 
+                                          TextSize="24" />
+                            <gauge:Header Text="Calories consumed" 
+                                          Position="0.5, 0.55"  
+                                          ForegroundColor="{DynamicResource Gray-White}" 
+                                          TextSize="12" />
+                        </gauge:SfCircularGauge.Headers>
+
+                        <gauge:SfCircularGauge.Scales >
+                            <gauge:Scale x:Name="Scale" 
+                                         ShowLabels="False" 
+                                         ShowRim="False"  
+                                         ShowTicks="False"
+                                         StartAngle="0"
+                                         SweepAngle="360"/>
+                        </gauge:SfCircularGauge.Scales>
+
+                    </gauge:SfCircularGauge>
+
+                    <listView:SfListView x:Name="Sessions"
+                                         HorizontalOptions="CenterAndExpand"
+                                         Grid.Row="2"
+                                         Grid.Column="1" 
+                                         HeightRequest="164"
+                                         IsScrollBarVisible="False"
+                                         Margin="0,0,0,24"
+                                         ItemSize="80" 
+                                         SelectionMode="None" 
+                                         AutoFitMode="None" 
+                                         ItemSpacing="4" 
+                                         ItemsSource="{Binding CardItems}">
+
+                        <listView:SfListView.ItemTemplate>
+                            <DataTemplate>
+                                <Grid WidthRequest="80" BackgroundColor="#3d3c6b">
+
+                                    <buttons:SfButton Text="{Binding Session}" 
+                                                      CornerRadius="4" 
+                                                      Command="{Binding Path=BindingContext.SessionCommand, Source={x:Reference Sessions}}"                                                     
+                                                      CommandParameter="{Binding BindingContext, Source={x:Reference Sessions}}" 
+                                                      Clicked="SessionButton_OnClicked">
+
+                                        <buttons:SfButton.Triggers>
+                                            <DataTrigger TargetType="buttons:SfButton" 
+                                                         Binding="{Binding EnableButton}" 
+                                                         Value="false">
+                                                <Setter Property="BackgroundColor"  
+                                                        Value="Transparent" />
+                                            </DataTrigger>
+
+                                            <DataTrigger TargetType="buttons:SfButton" Binding="{Binding EnableButton}" Value="true">
+                                                <Setter Property="BackgroundGradient">
+                                                    <Setter.Value>
+                                                        <gradient:SfLinearGradientBrush>
+                                                            <gradient:SfLinearGradientBrush.GradientStops>
+                                                                <gradient:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                                                                <gradient:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                                                            </gradient:SfLinearGradientBrush.GradientStops>
+                                                        </gradient:SfLinearGradientBrush>
+                                                    </Setter.Value>
+                                                </Setter>
+                                            </DataTrigger>
+                                        </buttons:SfButton.Triggers>
+
+                                        <buttons:SfButton.Content>
+                                            <StackLayout Spacing="8" Padding="0,12">
+
+                                                <Label Text="{Binding Icon}" 
+                                                       FontFamily="{StaticResource FontIcons}" 
+                                                       HorizontalOptions="Center"
+                                                       FontSize="32" 
+                                                       VerticalTextAlignment="Center"
+                                                       TextColor="White" />
+
+                                                <Label TextColor="{DynamicResource Gray-White}"
+                                                       LineHeight="{OnPlatform Android=1.25, Default=-1}" 
+                                                       FontFamily="{StaticResource Montserrat-SemiBold}"
+                                                       FontSize="12"
+                                                       Text="{Binding Session}" 
+                                                       HorizontalOptions="Center"/>
+
+                                            </StackLayout>
+                                        </buttons:SfButton.Content>
+                                    </buttons:SfButton>
+                                </Grid>
+                            </DataTemplate>
+                        </listView:SfListView.ItemTemplate>
+
+                        <listView:SfListView.LayoutManager>
+                            <listView:GridLayout SpanCount="4" />
+                        </listView:SfListView.LayoutManager>
+
+                    </listView:SfListView>
+
+                    <StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3"
+                                 VerticalOptions="FillAndExpand"
+                                 BackgroundColor="{StaticResource Gray-White}" Spacing="0"
+                                 HeightRequest="{OnPlatform Android='200',UWP='300'}">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="{OnIdiom Phone=16, Default=1*}"/>
+                                <ColumnDefinition Width="{OnIdiom Phone=*, Default=4*}"/>
+                                <ColumnDefinition Width="{OnIdiom Phone=16, Default=1*}"/>
+                            </Grid.ColumnDefinitions>
+
+                            <cards:SfCardView CornerRadius="4" Grid.Column="1"
+                                          HeightRequest="245"
+                                          Margin="0,-60,0,16"
+                                          HasShadow="True">
+                                <listView:SfListView x:Name="SfListView" 
+                                                     VerticalOptions="FillAndExpand"
+                                                     HorizontalOptions="Center"
+                                                     Margin="0" HeightRequest="24"
+                                                     IsScrollBarVisible="False"
+                                                     SelectionMode="None" 
+                                                     AutoFitMode="None"          
+                                                     ItemSpacing="0" 
+                                                     ItemSize="120" 
+                                                     ItemsSource="{Binding BreakfastCalories}">
+
+                                    <listView:SfListView.ItemTemplate>
+                                        <DataTemplate>
+                                            <border:SfBorder BorderWidth="1" 
+                                                             BorderColor="{StaticResource Gray-200}">
+
+                                                <StackLayout Spacing="8" 
+                                                             HorizontalOptions="Center" 
+                                                             VerticalOptions="Center">
+
+                                                    <Label Margin="0" 
+                                                           FontSize="16" 
+                                                           TextColor="{StaticResource Gray-900}" 
+                                                           Style="{StaticResource LabelStyle}"  
+                                                           HorizontalOptions="Center"
+                                                           Text="{Binding Quantity}"/>
+
+                                                    <Label  FontSize="12" 
+                                                            TextColor="{StaticResource Gray-700}" 
+                                                            HorizontalOptions="Center" 
+                                                            Text="{Binding Nutrient}" 
+                                                            Style="{StaticResource LabelStyle}"/>
+
+                                                    <BoxView  HeightRequest="4" 
+                                                              WidthRequest="48" 
+                                                              BackgroundColor="{Binding Indicator}"/>
+
+                                                </StackLayout>
+
+                                            </border:SfBorder>
+                                        </DataTemplate>
+                                    </listView:SfListView.ItemTemplate>
+
+                                    <listView:SfListView.Behaviors>
+                                        <behaviors:SfListViewExtendHeightBehavior/>
+                                    </listView:SfListView.Behaviors>
+
+                                    <listView:SfListView.LayoutManager>
+                                        <listView:GridLayout SpanCount="3" />
+                                    </listView:SfListView.LayoutManager>
+
+                                </listView:SfListView>
+
+                            </cards:SfCardView>
+                        </Grid>
+                    </StackLayout >
+                </Grid>
+            </ScrollView>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml.cs b/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml.cs
new file mode 100644
index 0000000..e6367da
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/DailyCaloriesReportPage.xaml.cs
@@ -0,0 +1,116 @@
+using System;
+using System.Collections.ObjectModel;
+using EssentialUIKit.Models.Dashboard;
+using Syncfusion.SfGauge.XForms;
+using Syncfusion.XForms.Buttons;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard
+{
+    /// <summary>
+    /// Page to show the daily calories report.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class DailyCaloriesReportPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="DailyCaloriesReportPage" /> class.
+        /// </summary>
+        public DailyCaloriesReportPage()
+        {
+            InitializeComponent();
+
+            UpdateGauge();
+        }
+
+        /// <summary>
+        /// Update the diagrammatic layout based on the session data
+        /// </summary>
+        private void UpdateGauge()
+        {
+            Scale.Pointers.Clear();
+            var ranges = new ObservableCollection<Pointer>();
+            double rangeStart = 0;
+
+            var items = SfListView.ItemsSource as ObservableCollection<Calorie>;
+            var proteinRange = new RangePointer();
+
+            for (int i = 0; i < items.Count; i++)
+            {
+                RangePointer range = new RangePointer()
+                {
+                    RangeStart = rangeStart,
+                    Value = rangeStart + items[i].Quantity,
+                    Offset = 0.9,
+                    Thickness = 12,
+                    EnableAnimation = false,
+                    Color = Color.FromHex(items[i].Indicator)
+                };
+
+                if (items[i].Nutrient == "Protein")
+                {
+                    range.Offset = 0.93;
+                    range.Thickness = 18;
+                    range.RangeStart -= 3;
+                    range.Value += 3;
+                    range.RangeCap = RangeCap.Both;
+                    proteinRange = range;
+                }
+                else
+                {
+                    ranges.Add(range);
+                }
+                
+                rangeStart += items[i].Quantity;
+            }
+
+            Scale.EndValue = rangeStart;
+            Scale.Pointers = ranges;
+            Scale.Pointers.Add(proteinRange);
+        }
+
+        /// <summary>
+        /// Invoked when session button is clicked
+        /// </summary>
+        /// <param name="sender"></param>
+        /// <param name="e"></param>
+        private void SessionButton_OnClicked(object sender, EventArgs e)
+        {
+            CalorieViewModel.SelectedSessionCaloriesCard.EnableButton = false;
+
+            var context = (sender as SfButton).BindingContext as CaloriesCard;
+            context.EnableButton = true;
+            CalorieViewModel.SelectedSessionCaloriesCard = context;
+            switch ((sender as SfButton).Text)
+            {
+                case "Breakfast":
+                {
+                    SfListView.ItemsSource = CalorieViewModel.BreakfastCalories;
+                    UpdateGauge();
+                    break;
+                }
+                case "Lunch":
+                {
+                    SfListView.ItemsSource = CalorieViewModel.LunchCalories;
+                    UpdateGauge();
+                    break;
+                }
+                case "Dinner":
+                {
+                    SfListView.ItemsSource = CalorieViewModel.DinnerCalories;
+                    UpdateGauge();
+                    break;
+                }
+                case "Snack":
+                {
+                    SfListView.ItemsSource = CalorieViewModel.SnackCalories;
+                    UpdateGauge();
+                    break;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml b/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml
new file mode 100644
index 0000000..43b27bc
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:Behavior="clr-namespace:EssentialUIKit.Behaviors"
+             mc:Ignorable="d"
+             x:Class="EssentialUIKit.Views.Dashboard.DailyTimelinePage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Content>
+        <ScrollView>
+            <Grid RowSpacing="0" ColumnSpacing="0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+
+                <Label
+                        Margin="0,12"
+                        FontFamily="{StaticResource Montserrat-Medium}"
+                        FontSize="16"
+                        HorizontalOptions="CenterAndExpand"
+                        LineHeight="1.25"
+                        Text="Daily Timeline"
+                        TextColor="{DynamicResource Gray-900}"
+                        VerticalOptions="Center"
+                        VerticalTextAlignment="Center" />
+
+                <!-- Separator -->
+                <BoxView  Grid.Row="1" BackgroundColor="{DynamicResource Gray-200}" HeightRequest="1" />
+
+                <StackLayout Grid.Row="2" Margin="16" Spacing="0" >
+                    <Label Text="Today" HorizontalOptions="Start" FontSize="20" FontFamily="{StaticResource Montserrat-Bold}"
+                       TextColor="{DynamicResource Gray-900}"/>
+                    <Label Text="27 Nov 2019" HorizontalOptions="Start" FontSize="12" FontFamily="{StaticResource Montserrat-Medium}"
+                       TextColor="{DynamicResource Gray-700}"/>
+
+                    <Grid RowSpacing="0" ColumnSpacing="0" Margin="16,24,0,0">
+                        <BoxView HeightRequest="{Binding Source={x:Reference listView}, Path=Height}" HorizontalOptions="Start" 
+                     VerticalOptions="Start"   WidthRequest="1" Margin="80,0,0,0" BackgroundColor="{DynamicResource Gray-300}" />
+
+                        <listView:SfListView VerticalOptions="Start" x:Name="listView" ItemsSource="{Binding DailyTimeline}" AutoFitMode="Height"
+                                 SelectionMode="None" SelectionBackgroundColor="Transparent" AllowSwiping="True" ItemSpacing="0,0,0,20"
+                                 IsScrollBarVisible="False">
+
+                            <listView:SfListView.ItemTemplate>
+                                <DataTemplate>
+                                    <ViewCell>
+                                        <Grid ColumnSpacing="0" RowSpacing="0" >
+                                            <Grid.ColumnDefinitions >
+                                                <ColumnDefinition Width="Auto"/>
+                                                <ColumnDefinition Width="Auto"/>
+                                                <ColumnDefinition Width="*"/>
+                                            </Grid.ColumnDefinitions>
+
+                                            <Label Text="{Binding Time}" LineHeight="{OnPlatform Default=1.25, iOS=-1}" Margin="0,10,0,0" 
+                                            FontFamily="{StaticResource Montserrat-Medium}" WidthRequest="52" FontSize="14"
+                                            TextColor="{DynamicResource Gray-700}" HorizontalOptions="Start" />
+
+                                            <border:SfBorder BackgroundColor="{StaticResource PrimaryColor}" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Start"
+                                             WidthRequest="40" HeightRequest="40"  BorderColor="Transparent"  CornerRadius="20" Margin="8,0,0,0">
+
+                                                <border:SfBorder WidthRequest="32" HeightRequest="32" BorderColor="Transparent" BackgroundColor="{StaticResource PrimaryColor}"
+                                                         HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="20" Margin="4" BorderWidth="1.5">
+                                                    <Label Text="{Binding Icon}" TextColor="{DynamicResource Gray-White}" FontSize="18"  FontFamily="{StaticResource FontIcons}" 
+                                                    HorizontalOptions="Center" VerticalOptions="Center"/>
+                                                </border:SfBorder>
+                                            </border:SfBorder>
+
+                                            <StackLayout Spacing="2" Grid.Column="2" HorizontalOptions="Start" VerticalOptions="Start" Margin="16,0">
+
+                                                <Label LineHeight="{OnPlatform Default=1.25, iOS=-1}" TextColor="{DynamicResource Gray-900}"  
+                                                Text="{Binding Name}"  FontSize="14" FontFamily="{StaticResource Montserrat-SemiBold}"/>
+
+                                                <Label Text="{Binding Description}" FontSize="12" 
+                                              LineHeight="{OnPlatform Default=1.25, iOS=-1}" 
+                                              FontFamily="{StaticResource Montserrat-Medium}" LineBreakMode="WordWrap"
+                                              TextColor="{DynamicResource Gray-700}"/>
+                                            </StackLayout>
+                                        </Grid>
+                                    </ViewCell>
+                                </DataTemplate>
+                            </listView:SfListView.ItemTemplate>
+
+                            <listView:SfListView.Behaviors>
+                                <Behavior:SfListViewExtendHeightBehavior/>
+                            </listView:SfListView.Behaviors>
+
+                        </listView:SfListView>
+                    </Grid>
+                </StackLayout>
+
+            </Grid>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml.cs b/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml.cs
new file mode 100644
index 0000000..1a32a41
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/DailyTimeLinePage.xaml.cs
@@ -0,0 +1,23 @@
+using EssentialUIKit.DataService;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard
+{
+    /// <summary>
+    /// Page to show Daily Timeline.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class DailyTimelinePage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="DailyTimelinePage" /> class.
+        /// </summary>
+        public DailyTimelinePage()
+        {
+            InitializeComponent();
+            this.BindingContext = DailyTimelineDataService.Instance.DailyTimelineViewModel;
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml b/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml
new file mode 100644
index 0000000..a803725
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml
@@ -0,0 +1,169 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:template="clr-namespace:EssentialUIKit.Views.Templates"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Dashboard"
+             x:Class="EssentialUIKit.Views.Dashboard.MyWalletPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+            <converter:BooleanToColorConverter x:Key="BooleanToColorConverter" />
+            <converter:BooleanToStringConverter x:Key="BoolToStringConverter" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <!--  Binding context for my wallet page  -->
+    <ContentPage.BindingContext>
+        <viewModel:MyWalletViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <ScrollView>
+            <Grid RowSpacing="0" ColumnSpacing="0">
+
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+
+                <template:ExpenseChartTemplate Grid.Row="0" />
+
+                <Grid Grid.Row="1">
+
+                    <Label Margin="16,26,16,16"
+                           Text="TRANSACTIONS"
+                           TextColor="{DynamicResource Gray-800}"
+                           FontSize="12"
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                           FontFamily="{DynamicResource Montserrat-SemiBold}"
+                           HorizontalOptions="Start" />
+
+                    <buttons:SfButton Margin="11,26,11,16"
+                                      BorderWidth="0"
+                                      TextColor="{DynamicResource Gray-600}"
+                                      BackgroundColor="{DynamicResource Transparent}"
+                                      WidthRequest="72"
+                                      HeightRequest="18"
+                                      CornerRadius="4"
+                                      HorizontalOptions="End">
+                        <Label Text="VIEW ALL"
+                               TextColor="{DynamicResource Link}"
+                               FontSize="12"
+                               HorizontalTextAlignment="Center"
+                               VerticalTextAlignment="Center"
+                               LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                               FontFamily="{DynamicResource Montserrat-SemiBold}" />
+                    </buttons:SfButton>
+
+                </Grid>
+
+                <listView:SfListView Grid.Row="2" 
+                                     IsScrollBarVisible="False"
+                                     ItemSpacing="0"
+                                     ItemsSource="{Binding ListItems}"
+                                     SelectionBackgroundColor="{DynamicResource TappedBackgroundColor}"
+                                     TapCommand="{Binding ItemTappedCommand}"
+                                     AutoFitMode="Height">
+                    <listView:SfListView.ItemTemplate>
+                        <DataTemplate>
+                            <Grid RowSpacing="0" ColumnSpacing="0">
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+
+                                <!-- Profile Image -->
+                                <border:SfBorder Grid.RowSpan="3"
+                                                 Margin="16"
+                                                 WidthRequest="40"
+                                                 HeightRequest="40"
+                                                 CornerRadius="20"
+                                                 BorderWidth="0"
+                                                 VerticalOptions="Center">
+                                    <Image Aspect="Fill">
+                                        <Image.Source>
+                                            <UriImageSource Uri="{Binding ProfileImage}" 
+			                                                CacheValidity="14" 
+			                                                CachingEnabled="True" />
+                                        </Image.Source>
+                                    </Image>
+                                </border:SfBorder>
+
+                                <!-- Name -->
+                                <Label Grid.Column="1"
+                                       Margin="0,15,0,4"
+                                       HorizontalOptions="Start"
+                                       Text="{Binding Name}"
+                                       Style="{StaticResource LabelStyle}"
+                                       LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+                                <!-- Transaction Title -->
+                                <Label Grid.Row="1"
+                                       Grid.Column="1"
+                                       Margin="0,0,0,16"
+                                       HorizontalOptions="Start"
+                                       Text="{Binding Title}"
+                                       TextColor="{DynamicResource Gray-700}"
+                                       FontSize="12"
+                                       FontFamily="{DynamicResource Montserrat-Medium}"
+                                       LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+                                <!-- Amount -->
+                                <Label Grid.Column="1"
+                                       Margin="0,16,16,4"
+                                       HorizontalOptions="End"
+                                       TextColor="{Binding IsCredited, Converter={x:StaticResource BooleanToColorConverter}, ConverterParameter=5}"
+                                       Style="{StaticResource LabelStyle}"
+                                       LineHeight="{OnPlatform Android=1.5, Default=-1}">
+                                    <Label.FormattedText>
+                                        <FormattedString>
+                                            <Span Text="{Binding IsCredited, Converter={StaticResource BoolToStringConverter}, ConverterParameter=2}" />
+                                            <Span Text=" $" />
+                                            <Span Text="{Binding Amount}" />
+                                        </FormattedString>
+                                    </Label.FormattedText>
+                                </Label>
+
+                                <!-- Date -->
+                                <Label Grid.Row="1"
+                                       Grid.Column="1"
+                                       Margin="0,0,16,16"
+                                       HorizontalOptions="End"
+                                       Text="{Binding Date, StringFormat='{}{0:dd MMM yyyy}'}"
+                                       TextColor="{DynamicResource Gray-700}"
+                                       FontSize="12"
+                                       FontFamily="{DynamicResource Montserrat-Medium}"
+                                       LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+                                <!-- Seperator -->
+                                <BoxView Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource SeparatorStyle}" />
+
+                            </Grid>
+                        </DataTemplate>
+                    </listView:SfListView.ItemTemplate>
+                </listView:SfListView>
+
+            </Grid>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml.cs b/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml.cs
new file mode 100644
index 0000000..63cfac8
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/MyWalletPage.xaml.cs
@@ -0,0 +1,22 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard
+{
+    /// <summary>
+    /// My wallet page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class MyWalletPage : ContentPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MyWalletPage"/> class.
+        /// </summary>
+        public MyWalletPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/Selectors/CompanyHistoryDataSelectors.cs b/EssentialUIKit/Views/Dashboard/Selectors/CompanyHistoryDataSelectors.cs
new file mode 100644
index 0000000..5442375
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/Selectors/CompanyHistoryDataSelectors.cs
@@ -0,0 +1,44 @@
+using Xamarin.Forms;
+using EssentialUIKit.Models.Dashboard;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard.Selectors
+{
+    /// <summary>
+    /// Implements the company history data template selector class.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public class CompanyHistoryDataSelectors : DataTemplateSelector
+    {
+        #region Properties
+     
+        /// <summary>
+        /// Gets or sets the Header text template.
+        /// </summary>
+        public DataTemplate Header { get; set; }
+
+        /// <summary>
+        /// Gets or sets the Content text template.
+        /// </summary>
+        public DataTemplate Content { get; set; }
+
+        #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Returns the Header or Content text template.
+        /// </summary>
+        /// <param name="item">The item</param>
+        /// <param name="container">The bindable object</param>
+        /// <returns>Returns the data template</returns>
+        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
+        {
+            return ((Event)item).Description != null? Content : Header;
+        }
+
+        #endregion
+    }
+}
diff --git a/EssentialUIKit/Views/Dashboard/Styles.xaml b/EssentialUIKit/Views/Dashboard/Styles.xaml
index f4869b1..cd4ed4c 100644
--- a/EssentialUIKit/Views/Dashboard/Styles.xaml
+++ b/EssentialUIKit/Views/Dashboard/Styles.xaml
@@ -5,11 +5,26 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
     xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
-    xmlns:converter="clr-namespace:EssentialUIKit.Converters">
+    xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+    xmlns:graphics="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms">
 
     <x:String x:Key="Menu">&#xe72e;</x:String>
+    <x:String x:Key="Bell">&#xe700;</x:String>
+    
+    <x:String x:Key="DropDownButtonIcon">&#xe70b;</x:String>
+
     <Color x:Key="Transparent">Transparent</Color>
+    <Color x:Key="TappedBackgroundColor">#eaeaea</Color>
     <Color x:Key="Green">#7ed321</Color>
+    <Color x:Key="GradientStart">#373668</Color>
+    <Color x:Key="GradientEnd">#24243b</Color>
+    <Color x:Key="primary-lighter">#edcacd</Color>
+    <Color x:Key="PrimaryColor">#f54e5e</Color>
+    <Color x:Key="Liliac">#d483fc</Color>
+    <Color x:Key="Purpleish-Blue">#5d4cf7</Color>
+    <Color x:Key="Link">#567cd7</Color>
+    <Color x:Key="Bright-Cyan">#3cdeff</Color>
+    <Color x:Key="Lemon-Lime">#bdff27</Color>
 
     <converter:DynamicResourceToColorConverter x:Key="DynamicResourceToColorConverter" />
 
@@ -75,4 +90,38 @@
         <Setter Property="LineHeight" Value="{OnPlatform Default=1.25, iOS=-1}"/>
     </Style>
 
+    <Style x:Key="SfGradientStyle" TargetType="graphics:SfGradientView">
+        <Setter Property="Opacity" Value="1.0" />
+        <Setter Property="VerticalOptions" Value="FillAndExpand" />
+        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+        <Setter Property="BackgroundBrush">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="1.0" Color="{StaticResource GradientEnd}" />
+                        <graphics:SfGradientStop Offset="0.0" Color="{StaticResource GradientStart}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="IconButton" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="WidthRequest" Value="38" />
+        <Setter Property="HeightRequest" Value="38" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="End" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+    </Style>
+
+    <!-- Common style for seperators -->
+    <Style x:Key="SeparatorStyle" TargetType="BoxView">
+        <Setter Property="HeightRequest" Value="1" />
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-200}" />
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml b/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml
new file mode 100644
index 0000000..eff724d
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary
+             xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             x:Class="EssentialUIKit.Views.Dashboard.CompanyHistoryTemplates">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Styles.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <DataTemplate x:Key="headerTemplate">
+        <ViewCell>
+            <border:SfBorder BackgroundColor="{StaticResource PrimaryColor}" WidthRequest="48" HeightRequest="48" BorderWidth="4"  
+                              VerticalOptions="Center" CornerRadius="24" HorizontalOptions="Start" BorderColor="{DynamicResource PrimaryLighterColor}">
+                <border:SfBorder.Content>
+                    <Label  Text="{Binding Year}" TextColor="{DynamicResource Gray-White}" VerticalOptions="Center" HorizontalOptions="Center"
+                           FontSize="12" FontFamily="{StaticResource Montserrat-Bold}" LineHeight="{OnPlatform Default=1.25, iOS=-1}" />
+                </border:SfBorder.Content>
+            
+            </border:SfBorder>
+        </ViewCell>
+    </DataTemplate>
+
+    <DataTemplate x:Key="contentTemplate">
+        <ViewCell>
+            <Grid ColumnSpacing="0" RowSpacing="0" >
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto"/>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
+                
+                <border:SfBorder WidthRequest="16" Grid.Column="0" Margin="16,2" HeightRequest="16" BorderColor="{StaticResource PrimaryColor}"
+                                 BorderWidth="2" HorizontalOptions="Start" VerticalOptions="Start" CornerRadius="8" BackgroundColor="{DynamicResource Gray-White}">
+                </border:SfBorder>
+                
+                <Label Text="{Binding Description}" FontSize="14" FontFamily="{StaticResource Montserrat-Medium}" HorizontalOptions="Start" VerticalOptions="Start"
+                       LineHeight="{OnPlatform Default=1.25, iOS=-1}" TextColor="{DynamicResource Gray-700}" Grid.Column="1"/>
+            </Grid>
+        </ViewCell>
+    </DataTemplate>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml.cs b/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml.cs
new file mode 100644
index 0000000..631c8da
--- /dev/null
+++ b/EssentialUIKit/Views/Dashboard/Templates/CompanyHistoryTemplates.xaml.cs
@@ -0,0 +1,21 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Dashboard
+{
+    /// <summary>
+    /// Class helps to reduce repetitive markup, and allows an apps appearance to be more easily changed.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class CompanyHistoryTemplates 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="CompanyHistoryTemplates" /> class.
+        /// </summary>
+        public CompanyHistoryTemplates()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml b/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml
new file mode 100644
index 0000000..c971b8d
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:template="clr-namespace:EssentialUIKit.Views.Templates"
+             BackgroundColor="{DynamicResource Gray-White}"
+            
+             x:Class="EssentialUIKit.Views.Detail.BookingFeedbackView">
+    <StackLayout.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </StackLayout.Resources>
+
+    <StackLayout Spacing="0">
+        <!--  Rating and Reviews Header  -->
+        <StackLayout Margin="0"  Orientation="Horizontal" >
+
+            <Label Margin="16,0,8,8"
+                FontFamily="{StaticResource Montserrat-SemiBold}"
+                FontSize="16" 
+                HorizontalOptions="StartAndExpand"
+                Style="{StaticResource LabelStyle}"
+                Text="Ratings and Reviews"
+                TextColor="{DynamicResource Gray-900}" />
+
+            <!--  See all review button  -->
+            <buttons:SfButton Margin="0,0,8,8"
+                x:Name="ShowButton"
+                Padding="0"
+                CornerRadius="4"
+                FontFamily="{StaticResource Montserrat-SemiBold}"
+                FontSize="{OnIdiom Default=12,
+                                   Desktop=14}"
+                
+               HorizontalOptions="End"
+                Style="{StaticResource SfButtonStyle}"
+                Text="SHOW ALL"
+                TextColor="{DynamicResource HyperLink}"
+                VerticalOptions="Start" />
+
+        </StackLayout>
+        <BoxView HeightRequest="{OnIdiom Default=1, Desktop=0}" 
+                 Style="{StaticResource BoxViewStyle}"  />
+    </StackLayout>
+
+    <StackLayout x:Name="StackLayout" BindableLayout.ItemsSource="{Binding RoomDetail.Reviews}">
+        <BindableLayout.ItemTemplate>
+            <DataTemplate>
+                <StackLayout Spacing="0">
+
+                    <template:BookingReviewTemplate Padding="16,0,16,8" ColumnSpacing="0" />
+
+                </StackLayout>
+            </DataTemplate>
+        </BindableLayout.ItemTemplate>
+    </StackLayout>
+
+</StackLayout>
+             
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml.cs b/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml.cs
new file mode 100644
index 0000000..4e0756c
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/BookingFeedbackView.xaml.cs
@@ -0,0 +1,21 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Detail
+{
+    /// <summary>
+    /// The Feedback view
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class BookingFeedbackView 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="BookingFeedbackView" /> class.
+        /// </summary>
+        public BookingFeedbackView()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/DataTablePage.xaml b/EssentialUIKit/Views/Detail/DataTablePage.xaml
new file mode 100644
index 0000000..22fb113
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/DataTablePage.xaml
@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Detail"
+             x:Class="EssentialUIKit.Views.Detail.DataTablePage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+    
+    <ContentPage.BindingContext>
+        <viewModel:DataTableViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <Grid RowSpacing="0" >
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="64"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="Title" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Data table page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25"  Text="Premier League Table"  VerticalOptions="Center" VerticalTextAlignment="Center" />
+
+                </StackLayout>
+
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
+
+                    <!--  Back to title layout  -->
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" />
+
+                    <!--  Rounded Search Entry  -->
+                    <border:SfBorder Style="{DynamicResource SfBorderStyle}">
+                        <controls:BorderlessEntry x:Name="SearchEntry"  BindingContext="{x:Reference dataTable}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
+                    </border:SfBorder>
+                </StackLayout>
+
+                <!--  Search Button  -->
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
+            </StackLayout>
+
+            <BoxView Grid.Row="1" Style="{StaticResource SeparatorStyle}"/>
+
+            <StackLayout Grid.Row="4" Spacing="0" >
+
+                <controls:SearchableDataTable  x:Name="dataTable"
+                    Padding="0"
+                    AutoFitMode="Height"
+                    IsScrollBarVisible="false"
+                    ItemSpacing="0"
+                    ItemsSource="{Binding Items}"
+                    SearchText="{Binding SearchText}"
+                    SelectionBackgroundColor="Transparent"
+                    TapCommand="{Binding ItemTappedCommand}"
+                    VerticalOptions="FillAndExpand"
+                    StickyFooterPosition="Body">
+
+                    <controls:SearchableDataTable.HeaderTemplate>
+                        <DataTemplate>
+                            <Grid Grid.Row="2" HeightRequest="48" Margin="0,8,0,0" Padding="16,0,8,0" ColumnSpacing="0" BackgroundColor="{StaticResource Gray-100}">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="{OnIdiom Desktop=0.5*, Tablet=1*, Phone=0.8*}" />
+                                    <ColumnDefinition Width="{OnIdiom Desktop=2.5*, Tablet=1*, Phone=2*}" />
+                                    <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=0.8*}" />
+                                    <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=0.8*}" />
+                                    <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=*}" />
+                                    <ColumnDefinition Width="{OnIdiom Desktop=5*, Tablet=1*, Phone=*}" />
+                                </Grid.ColumnDefinitions>
+
+                                <Label Text="Pos" HorizontalOptions="Start"  FontSize="12" FontFamily="{StaticResource Montserrat-SemiBold}" 
+                                   TextColor="{DynamicResource Gray-800}" VerticalOptions="Center"/>
+
+                                <Label Grid.Column="1" HorizontalOptions="Start"  Text="Club"  FontSize="12" FontFamily="{StaticResource Montserrat-SemiBold}"                                                      
+                                   TextColor="{DynamicResource Gray-800}" VerticalOptions="Center"  />
+
+                                <Label  Grid.Column="2" HorizontalOptions="Start"  Text="Pl" FontSize="12" FontFamily="{StaticResource Montserrat-SemiBold}"                                 
+                                   TextColor="{DynamicResource Gray-800}" VerticalOptions="Center"/>
+
+                                <Label  Grid.Column="3" HorizontalOptions="Start"  Text="Gd"  FontSize="12" FontFamily="{StaticResource Montserrat-SemiBold}"                                    
+                                   TextColor="{DynamicResource Gray-800}" VerticalOptions="Center"/>
+
+                                <Label  Grid.Column="4" Grid.ColumnSpan="2" HorizontalOptions="Start"  Text="Pts"  FontSize="12" FontFamily="{StaticResource Montserrat-SemiBold}"                                
+                                   TextColor="{DynamicResource Gray-800}" VerticalOptions="Center"/>
+                                
+                            </Grid>
+                        </DataTemplate>
+                    </controls:SearchableDataTable.HeaderTemplate>
+                    
+                    <!--  List View for the table  -->
+                    <controls:SearchableDataTable.ItemTemplate>
+                        <DataTemplate>
+                            <ViewCell>
+                                <StackLayout Margin="0" Spacing="0" >
+                                    <Grid HeightRequest="48" Margin="16,0,8,0" ColumnSpacing="0">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="{OnIdiom Desktop=0.5*, Tablet=1*, Phone=0.8*}" />
+                                            <ColumnDefinition Width="{OnIdiom Desktop=2.5*, Tablet=1*, Phone=2*}" />
+                                            <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=0.8*}" />
+                                            <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=0.8*}" />
+                                            <ColumnDefinition Width="{OnIdiom Desktop=0.7*, Tablet=1*, Phone=*}" />
+                                            <ColumnDefinition Width="{OnIdiom Desktop=5*, Tablet=1*, Phone=*}" />
+                                        </Grid.ColumnDefinitions>
+                                        
+                                        <!--  club name -->
+                                        <Label Margin="6,0,0,0" Text="{Binding SerialNumber}"  FontSize="14" FontFamily="{StaticResource Montserrat-Medium}" 
+                                        TextColor="{DynamicResource Gray-900}" VerticalOptions="Center" HorizontalOptions="Start" />
+
+                                        <Grid Grid.Column="1" ColumnSpacing="8">
+                                           
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="0.2*"/>
+                                                <ColumnDefinition Width="{OnIdiom Desktop=2.3*, Tablet=2.3*, Phone=1.8*}" />
+                                            </Grid.ColumnDefinitions>
+                                            
+                                            <!--  Club images -->
+                                            <Image  Grid.Column="0" HeightRequest="20" 
+                                                   VerticalOptions="Center" HorizontalOptions="Start" >
+                                                <Image.Source>
+                                                    <UriImageSource
+                                                       CacheValidity="14"
+                                                       CachingEnabled="true"
+                                                       Uri="{Binding ImagePath}" />
+                                                 </Image.Source>
+                                                
+                                            </Image>
+
+                                            <Label Margin="0" Grid.Column="1"  Text="{Binding ClubName}" FontSize="14" FontFamily="{StaticResource Montserrat-Medium}" 
+                                        TextColor="{DynamicResource Gray-900}" VerticalOptions="Center" HorizontalOptions="Start" />
+
+                                        </Grid>
+                                        <!--  Total players -->
+                                        <Label  Grid.Column="2" Text="17" FontFamily="{StaticResource Montserrat-Medium}" 
+                                        TextColor="{DynamicResource Gray-900}" VerticalOptions="Center" HorizontalOptions="Start" />
+
+                                        <!--  Gold points for the club -->
+                                        <Label  Grid.Column="3" Text="{Binding GoldPoints}"  FontSize="14" FontFamily="{StaticResource Montserrat-Medium}" 
+                                        TextColor="{DynamicResource Gray-900}" VerticalOptions="Center" HorizontalOptions="Start" />
+
+                                        <!--  Total points for the club -->
+                                        <Label  Grid.Column="4" Text="{Binding Points}"  FontSize="14" FontFamily="{StaticResource Montserrat-Medium}" 
+                                        TextColor="{DynamicResource Gray-900}" VerticalOptions="Center" HorizontalOptions="Start" />
+
+                                        <!--  Ratings for 5 matches -->
+                                        <StackLayout  x:Name="stackLayout" Grid.Column="5" VerticalOptions="Center" HorizontalOptions="Start" 
+                                                      Orientation="Horizontal" Spacing="4"
+                                                      BindableLayout.ItemsSource="{Binding MatchResults}" WidthRequest="8" 
+                                                      HeightRequest="8">
+                                            <BindableLayout.ItemTemplate>
+                                                <DataTemplate>
+                                                    <BoxView  BackgroundColor="{Binding }" WidthRequest="8" 
+                                                      HeightRequest="8"  CornerRadius="16" />
+                                                </DataTemplate>
+                                            </BindableLayout.ItemTemplate>
+                                        </StackLayout>
+                                    </Grid>
+                                    <BoxView Grid.Row="1" Grid.ColumnSpan="5" Style="{StaticResource SeparatorStyle}"/>
+                                </StackLayout>
+                            </ViewCell>
+                        </DataTemplate>
+                    </controls:SearchableDataTable.ItemTemplate>
+                </controls:SearchableDataTable>
+            </StackLayout>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/DataTablePage.xaml.cs b/EssentialUIKit/Views/Detail/DataTablePage.xaml.cs
new file mode 100644
index 0000000..928403f
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/DataTablePage.xaml.cs
@@ -0,0 +1,101 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Detail
+{
+    /// <summary>
+    /// Page showing the data table
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class DataTablePage : ContentPage
+    {
+        public DataTablePage()
+        {
+            InitializeComponent();
+        }
+        /// <summary>
+        /// Invoked when view size is changed.
+        /// </summary>x
+        /// <param name="width">The Width</param>
+        /// <param name="height">The Height</param>
+        protected override void OnSizeAllocated(double width, double height)
+        {
+            base.OnSizeAllocated(width, height);
+
+            if (width > height)
+            {
+                if (Search.IsVisible)
+                {
+                    Search.WidthRequest = width;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Invoked when search button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void SearchButton_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = false;
+            this.Search.IsVisible = true;
+            this.Title.IsVisible = false;
+
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from 0 to full width when it added to the view.
+                var expandAnimation = new Animation(
+                    property =>
+                    {
+                        Search.WidthRequest = property;
+                        opacity = property / TitleView.Width;
+                        Search.Opacity = opacity;
+                    }, 0, TitleView.Width, Easing.Linear);
+                expandAnimation.Commit(Search, "Expand", 16, 250, Easing.Linear);
+            }
+
+            SearchEntry.Focus();
+        }
+
+        /// <summary>
+        /// Invoked when back to title button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void BackToTitle_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = true;
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from full width to 0 before it removed from view.
+                var shrinkAnimation = new Animation(property =>
+                {
+                    Search.WidthRequest = property;
+                    opacity = property / TitleView.Width;
+                    Search.Opacity = opacity;
+                },
+                TitleView.Width, 0, Easing.Linear);
+                shrinkAnimation.Commit(Search, "Shrink", 16, 250, Easing.Linear, (p, q) => this.SearchBoxAnimationCompleted());
+            }
+
+            SearchEntry.Text = string.Empty;
+        }
+
+        /// <summary>
+        /// Invokes when search box Animation completed.
+        /// </summary>
+        private void SearchBoxAnimationCompleted()
+        {
+            this.Search.IsVisible = false;
+            this.Title.IsVisible = true;
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/EventDetailPage.xaml b/EssentialUIKit/Views/Detail/EventDetailPage.xaml
new file mode 100644
index 0000000..b41a644
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/EventDetailPage.xaml
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Detail"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:local="clr-namespace:EssentialUIKit.Views.Detail.Templates"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             x:Class="EssentialUIKit.Views.Detail.EventDetailPage"
+             NavigationPage.HasNavigationBar="False"
+             BackgroundColor="{StaticResource Gray-White}">
+
+    <ContentPage.BindingContext>
+        <viewModel:EventDetailViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+        <ScrollView VerticalScrollBarVisibility="Never">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+
+                <!--  Header image  -->
+                <Image                      
+                    Aspect="AspectFill"
+                    HorizontalOptions="FillAndExpand"
+                    HeightRequest="{OnIdiom Phone=334,Default=480}">
+                    <Image.Source>
+                        <UriImageSource Uri="{Binding HeaderImagePath}" 
+			                                 CacheValidity="12" 
+			                                 CachingEnabled="true"/>
+                    </Image.Source>
+                </Image>
+                <!--  OverLay Effect  -->
+                <Frame  CornerRadius="4" Opacity="0.25" BackgroundColor="{DynamicResource Gray-Black}"/>
+
+                <border:SfBorder Margin="0,-51,0,0" CornerRadius="10,10,0,0" BackgroundColor="{DynamicResource Gray-White}"
+                                 BorderWidth="0" Padding="16" Grid.Row="1">
+                    <StackLayout Margin="0" Padding="0" Orientation="Vertical" Spacing="0">
+                       
+                        <Grid ColumnSpacing="0" HorizontalOptions="FillAndExpand">
+
+                            <!--  Event name label  -->
+                            <Label  HorizontalOptions="Start" VerticalOptions="Center" Text="Ignite Music" FontSize="20" 
+                                    FontFamily="{StaticResource Montserrat-Bold}" TextColor="{DynamicResource Gray-900}"
+                                    LineHeight="{OnPlatform Default=-1,Android=1.25}"/>
+
+                            <!--  Favourite button  -->
+                            <buttons:SfButton x:Name="favouriteButton" Grid.Column="1" BorderWidth="1" BorderColor="{DynamicResource Gray-300}" CornerRadius="20"              
+                                              Text="{StaticResource Favourite}" CommandParameter="{x:Reference favouriteButton}" 
+                                              Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference favouriteButton}}" 
+                                              Margin="0" FontFamily="{StaticResource FontIcons}" HorizontalOptions="End"                              
+                                              TextColor="{StaticResource Steel}" BackgroundColor="Transparent" WidthRequest="40"
+                                              HeightRequest="40" >
+
+                            </buttons:SfButton>
+                        </Grid>
+
+                        <StackLayout Margin="0,24,0,0" Orientation="Horizontal" Spacing="8">
+                        <!-- Calender icon  -->
+                        <Label Margin="0,2" FontSize="18" VerticalOptions="Start" HorizontalOptions="Start"  
+                               Text="{StaticResource Calender}" FontFamily="{StaticResource FontIcons}" TextColor="{DynamicResource Gray-600}"/>
+
+                        <!--  Event date label  -->
+                            <Label Text="Sunday, 22 Dec 2019" FontSize="16" FontFamily="{StaticResource Montserrat-Medium}" 
+                                   HorizontalOptions="Start" TextColor="{DynamicResource Gray-900}" LineHeight="{OnPlatform Default=-1,Android=1.25}"/>
+                        </StackLayout>
+                        <!--  Event time label  -->
+                        <Label Margin="26,2" Text="10:00 AM - 2:00 PM"  FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-800}" LineHeight="{OnPlatform Default=-1,Android=1.25}"/>
+
+                        <StackLayout Orientation="Horizontal" Spacing="8" Margin="0,24,0,0">
+                            <!--  Event map pin icon  -->
+                            <Label Margin="0,2" VerticalOptions="Start" HorizontalOptions="Start" 
+                           Text="{StaticResource MapPin}" FontFamily="{StaticResource FontIcons}" 
+                           TextColor="{DynamicResource Gray-600}" FontSize="18"/>
+
+                                <!--  Event location -->
+                                <Label Text="Hard Rock Cafe"  FontSize="16" FontFamily="{StaticResource Montserrat-Medium}" 
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-900}" LineHeight="{OnPlatform Default=-1,Android=1.25}"/> 
+
+                        </StackLayout>
+                        <Label Margin="26,2" Text="1501 Broadway, New York, NY 10036, USA"  FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-800}"/>
+
+                        <StackLayout Orientation="Horizontal" Spacing="8" Margin="0,24,0,0">
+                        <!--  Event group icon -->
+                        <Label Margin="0,2" VerticalOptions="Start" HorizontalOptions="Start" 
+                           Text="{StaticResource Group}" FontSize="17" FontFamily="{StaticResource FontIcons}" 
+                           TextColor="{DynamicResource Gray-600}"/>
+
+                            <Label Text="Going" FontSize="16" FontFamily="{StaticResource Montserrat-Medium}" 
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-900}"/>
+
+                        </StackLayout>
+
+                        <listView:SfListView HeightRequest="32" Margin="26,6" Padding="0" AutoFitMode="Height"          
+                                             HorizontalOptions="FillAndExpand" IsScrollBarVisible="False" ItemSpacing="0" 
+                                             ItemsSource="{Binding Connections}" Orientation="Horizontal" IsStickyHeader="False"
+                                             SelectionBackgroundColor="Transparent" TapCommand="{Binding ProfileSelectedCommand}"
+                                             VerticalOptions="Start">
+                        
+                            <listView:SfListView.ItemTemplate>
+                                <DataTemplate>
+                                    <local:EventTemplate />
+                                </DataTemplate>
+                            </listView:SfListView.ItemTemplate>
+
+                        </listView:SfListView>
+
+                        <!--  Event details -->
+                        <Label Text="Detail"  Margin="0,24,0,0" FontSize="16" FontFamily="{StaticResource Montserrat-SemiBold}" 
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-900}" LineHeight="{OnPlatform Default=-1,Android=1.25}"/>
+
+                        <Label Text="Featuring bands from the local music scene, IGNITE! Music Festival aims to bring the best of Americans music to everyone."  
+                               Margin="0,4,0,0" FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" LineHeight="{OnPlatform Default=-1,Android=1.25}"
+                               HorizontalOptions="Start" TextColor="{DynamicResource Gray-700}"/>
+
+                        <StackLayout HorizontalOptions="FillAndExpand" Margin="0,24,0,0" Padding="0" Orientation="Horizontal">
+                        
+                            <!--  join button -->
+                            <buttons:SfButton x:Name="joinButton" Margin="0" Style="{StaticResource SfGradientButtonStyle}"
+                                              Text="JOIN" TextColor="{DynamicResource Gray-White}"
+                                              Command="{Binding Path=BindingContext.JoinCommand, Source={x:Reference joinButton}}"/>
+
+                            <!--  more icon button -->
+                            <buttons:SfButton x:Name="menuIcon" WidthRequest="40" HeightRequest="40" Text="{StaticResource Menu}"
+                                          Command="{Binding Path=BindingContext.MenuCommand, Source={x:Reference menuIcon}}"  
+                                          CornerRadius="4" HorizontalOptions="End" Style="{StaticResource MenuIcon}" Margin="16,0,0,0"/>
+                         
+                        </StackLayout>
+
+                    </StackLayout>
+                </border:SfBorder>
+            </Grid>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
+    
+    
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/EventDetailPage.xaml.cs b/EssentialUIKit/Views/Detail/EventDetailPage.xaml.cs
new file mode 100644
index 0000000..1d2bbba
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/EventDetailPage.xaml.cs
@@ -0,0 +1,18 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Detail
+{
+    /// <summary>
+    /// Page to show the event details.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class EventDetailPage 
+    {
+        public EventDetailPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/MyAddressPage.xaml b/EssentialUIKit/Views/Detail/MyAddressPage.xaml
new file mode 100644
index 0000000..10f013d
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/MyAddressPage.xaml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:ListView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:ViewModel="clr-namespace:EssentialUIKit.ViewModels.Detail"
+             x:Class="EssentialUIKit.Views.Detail.MyAddressPage"
+             x:Name="MyAdressPage"
+             BackgroundColor="{DynamicResource Gray-100}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.BindingContext>
+        <ViewModel:MyAddressViewModel/>
+    </ContentPage.BindingContext>
+
+    <ContentPage.ControlTemplate>
+        <ControlTemplate>
+            <StackLayout x:Name="titleLayout" Spacing="0">
+                <controls:TitleView Title="My Address">
+                    <controls:TitleView.LeadingView>
+                        <!--  Back button command  -->
+                        <buttons:SfButton x:Name="backButton" Command="{Binding Path=BindingContext.BackCommand, Source={x:Reference MyAdressPage}}" 
+                                          CornerRadius="4" Text="{StaticResource Back}"
+                                          CommandParameter="{x:Reference backButton}" Style="{StaticResource IconButtonStyle}"/>
+                        
+                    </controls:TitleView.LeadingView>
+                </controls:TitleView>
+                <ContentPresenter />
+            </StackLayout>
+        </ControlTemplate>
+    </ContentPage.ControlTemplate>
+
+    <ContentPage.Content>
+        <Grid RowSpacing="0" ColumnSpacing="0" >
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+            
+            <!--  ListView displaying address  -->
+            <ListView:SfListView x:Name="myAddress" AutoFitMode="Height" IsScrollBarVisible="False" Padding="8" ItemSpacing="8" BackgroundColor="Transparent"
+                                 SelectionGesture="Tap" SelectionBackgroundColor="Transparent" SelectionMode="Single" AllowSwiping="True" 
+                                 ItemsSource="{Binding AddressDetails}">
+                <ListView:SfListView.ItemTemplate>
+                    <DataTemplate>
+                        <cards:SfCardView CornerRadius="4" HasShadow="True" WidthRequest="343" BackgroundColor="{DynamicResource Gray-White}" 
+                                          HorizontalOptions="Center" Padding="16,16,8,16">
+                            <Grid ColumnSpacing="8" RowSpacing="8" >
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto"/>
+                                    <RowDefinition Height="*"/>
+                                    <RowDefinition Height="Auto"/>
+                                </Grid.RowDefinitions>
+
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+
+                                <!--  Name and Type of the address  -->
+                                <Label  LineBreakMode="NoWrap" HorizontalOptions="Start" Grid.ColumnSpan="2"
+                                        VerticalOptions="Center" LineHeight="{OnPlatform Default=-1, Android=1.5}" >
+                                    <Label.FormattedText>
+                                        <FormattedString>
+                                            <Span Text="{Binding Name}" FontSize="16" TextColor="{DynamicResource Gray-900}" 
+                                                  FontFamily="{StaticResource Montserrat-SemiBold}"/>
+                                            <Span Text="  "/>
+                                            <Span Text="{Binding AddressType}" FontSize="12" TextColor="{DynamicResource Gray-800}"
+                                                  FontFamily="{StaticResource Montserrat-SemiBold}"/>
+                                        </FormattedString>
+                                    </Label.FormattedText>
+                                </Label>
+
+                                <!--  Edit button command  -->
+                                <buttons:SfButton  x:Name="editButton" CornerRadius="4" Grid.Column="2" HorizontalOptions="EndAndExpand"
+                                                   VerticalOptions="StartAndExpand" Style="{StaticResource IconButtonStyle}"
+                                                   Text="{StaticResource Edit}" Command="{Binding Path=BindingContext.EditCommand, Source={x:Reference myAddress}}"
+                                                   CommandParameter="{x:Reference editButton }"/>
+
+                                <!--  Delete button command  -->
+                                <buttons:SfButton  x:Name="DeleteButton" CornerRadius="4" Grid.Column="3" HorizontalOptions="EndAndExpand"
+                                                   VerticalOptions="StartAndExpand" Style="{StaticResource IconButtonStyle}"
+                                                   Text="{StaticResource Delete}" Command="{Binding Path=BindingContext.DeleteCommand,Source={x:Reference myAddress}}"
+                                                   CommandParameter="{x:Reference DeleteButton}"/>
+
+                                <!--  Map Pin Icon -->
+                                <Label Text="{StaticResource MapPin}" Grid.Row="1" Grid.Column="0" FontSize="18"  
+                                       FontFamily="{StaticResource FontIcons}" 
+                                       LineHeight="{OnPlatform Default=-1, Android=1.5}" VerticalOptions="Start"
+                                       TextColor="{DynamicResource Gray-600}"/>
+
+                                <!-- Delivery Address -->
+                                <Label  Text="{Binding Location}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource CommonLabelStyle}" 
+                                        FontFamily="{StaticResource Montserrat-Medium}" LineBreakMode="WordWrap" HorizontalOptions="StartAndExpand"
+                                        VerticalOptions="Start"/>
+
+                                <!--  Phone Icon -->
+                                <Label Text="{StaticResource Phone}" Grid.Row="2" Grid.Column="0"  FontSize="18" FontFamily="{StaticResource FontIcons}" 
+                                       LineHeight="{OnPlatform Default=-1, Android=1.5}" TextColor="{DynamicResource Gray-600}" />
+
+                                <!--  Contact Number-->
+                                <Label Style="{StaticResource CommonLabelStyle}" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" FontFamily="{StaticResource Montserrat-Medium}"
+                                       VerticalOptions="Start">
+                                    <Label.FormattedText>
+                                        <FormattedString>
+                                            <Span Text="Mobile: " />
+                                            <Span Text="{Binding ContactNumber}" TextColor="{DynamicResource Gray-900}"/>
+                                        </FormattedString>
+                                    </Label.FormattedText>
+                                </Label>
+                            </Grid>
+                        </cards:SfCardView>
+                    </DataTemplate>
+                </ListView:SfListView.ItemTemplate>
+            </ListView:SfListView>
+
+            <!--  Add Card button command  -->
+            <buttons:SfButton x:Name="addCardButton" Style="{StaticResource MagentaButtonStyle}" Text="ADD NEW ADDRESS"
+                              FontFamily="{StaticResource Montserrat-SemiBold}"  BorderWidth="0" HeightRequest="44"
+                              Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="End"
+                              Command="{Binding Path=BindingContext.AddCardCommand , Source={x:Reference myAddress}}"
+                              TextColor="{DynamicResource Gray-White}" WidthRequest="{OnIdiom Default=200,
+                                                       Phone=-1}"  CommandParameter="{x:Reference addCardButton}"/>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/MyAddressPage.xaml.cs b/EssentialUIKit/Views/Detail/MyAddressPage.xaml.cs
new file mode 100644
index 0000000..b0a9f2c
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/MyAddressPage.xaml.cs
@@ -0,0 +1,21 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Detail
+{
+    /// <summary>
+    /// Page to show my address page.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class MyAddressPage 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MyAddressPage" /> class.
+        /// </summary>
+        public MyAddressPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/RoomBookingPage.xaml b/EssentialUIKit/Views/Detail/RoomBookingPage.xaml
new file mode 100644
index 0000000..438d829
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/RoomBookingPage.xaml
@@ -0,0 +1,443 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Detail"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms" 
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
+             xmlns:local="clr-namespace:EssentialUIKit.Views.Detail"
+             xmlns:behaviors="clr-namespace:EssentialUIKit.Behaviors"
+             xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:maps="clr-namespace:Syncfusion.SfMaps.XForms;assembly=Syncfusion.SfMaps.XForms"
+             x:Class="EssentialUIKit.Views.Detail.RoomBookingPage"  
+             NavigationPage.HasNavigationBar="False" x:Name="RoomBooking"
+             BackgroundColor="{StaticResource Gray-White}">
+
+    <ContentPage.BindingContext>
+        <viewModel:RoomBookingPageViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <converter:VisibilityConverter x:Key="VisibilityConverter" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+        <ScrollView>
+            <StackLayout Spacing="0"  >
+                <!--<Rotator for featured blog stories>-->
+                <CarouselView
+                    x:Name="Rotator" Position="0" 
+                    BackgroundColor="Gray"
+                    HeightRequest="350" 
+                    PositionChangedCommand="{Binding SelectionCommand}" 
+                    PositionChangedCommandParameter="{Binding Source={x:Reference Rotator}, Path=CurrentItem}"
+                    HorizontalOptions="StartAndExpand"
+                    ItemsSource="{Binding PreviewImages}"
+                    VerticalOptions="Start">
+                    <CarouselView.ItemTemplate>
+                        <DataTemplate>
+                            <!--Image of the resort-->
+                            <Image
+                                  Aspect="AspectFill"
+                                  BackgroundColor="{DynamicResource Gray-200}"
+                                  HeightRequest="350">
+                                <Image.Source>
+                                    <UriImageSource
+                                        CacheValidity="14"
+                                        CachingEnabled="true"
+                                        Uri="{Binding ImagePath}" />
+                                </Image.Source>
+                            </Image>
+                        </DataTemplate>
+                    </CarouselView.ItemTemplate>
+                </CarouselView>
+
+                <rotator:SfRotator BackgroundColor="Transparent"
+                                   DotsBorderColor="Transparent" 
+                                   SelectedDotColor="{DynamicResource PrimaryColor}" 
+                                   HeightRequest="30" Margin="0, -75, 0, 0"
+                                   ItemsSource="{Binding PreviewImages}" 
+                                   SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"/>
+
+                <ContentView>
+                    <controls:CustomShadowFrame  
+                        Margin="16,12,16,16"
+                        CornerRadius="12"
+                        BackgroundColor="{DynamicResource Gray-White}"
+                        BorderColor="{DynamicResource Gray-200}"
+                        Padding="0,0,0,10"
+                        BorderWidth="2"
+                        HasShadow="True">
+                        <StackLayout Spacing="0">
+
+                            <Grid Margin="16"
+                                ColumnSpacing="0"
+                                RowSpacing="0">
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+
+                                <!--  Product Name  -->
+                                <Label Grid.Row="0" VerticalTextAlignment="Start" VerticalOptions="Start"
+                                    FontFamily="{StaticResource Montserrat-SemiBold}"
+                                    FontSize="20"                           
+                                    Style="{StaticResource LabelStyle}"
+                                    Text="{Binding RoomDetail.Name}"
+                                    TextColor="{DynamicResource Gray-900}" />
+
+                                <StackLayout Orientation="Horizontal" Grid.Row="1" VerticalOptions="StartAndExpand"
+                                             Margin="0,-4,0,0">
+
+                                    <!--  Product rating  -->
+                                    <rating:SfRating Grid.Row="1"
+                                        Margin="0" 
+                                        RatingSettings="{StaticResource RatingSettings}"
+                                        Style="{StaticResource SfRatingStyle}"
+                                        Value="{Binding RoomDetail.OverallRating}" />
+
+                                    <!--  Reviews -->
+                                    <Label Grid.Row="1" Margin="4,0,0,0"
+                                        FontFamily="{StaticResource Montserrat-Medium}"
+                                        Style="{StaticResource LabelStyle}" 
+                                        Text="{Binding RoomDetail.TotalReviews}" />
+
+                                </StackLayout>
+
+                                <!--  favorite button  -->
+                                <buttons:SfButton x:Name="favouriteButton"           
+                                    BorderWidth="1" BackgroundColor="{DynamicResource Gray-White}"  BorderColor="{DynamicResource Gray-300}"
+                                    HeightRequest="40" WidthRequest="40"
+                                    Command="{Binding Path=BindingContext.FavouriteCommand, 
+                                    Source={x:Reference favouriteButton}}"                                                     
+                                    CommandParameter="{x:Reference favouriteButton}"                       
+                                    Text="{StaticResource Favourite}"  Margin="0"                       
+                                    FontFamily="{StaticResource FontIcons}"
+                                    TextColor="{StaticResource Steel}" 
+                                    CornerRadius="20"
+                                    HorizontalOptions="End" VerticalOptions="Center">
+                                </buttons:SfButton>
+
+                                <!--  combo Box for calender -->
+                                <StackLayout Margin="0,19,0,0" Spacing="8" Orientation="Horizontal" Grid.Row="2" HeightRequest="40">
+
+                                    <!--  combo Box for calender -->
+                                    <border:SfBorder
+                                         Style="{StaticResource ComboBoxBorderStyle}" WidthRequest="{OnIdiom Phone=147,Default=180}">
+
+                                        <combobox:SfComboBox x:Name="sfComboBox" ShowDropDownFooterView="False" 
+                                             DataSource="{Binding Calender}" 
+                                             ShowDropDownHeaderView="True" DropDownWidth="300"
+                                             DropDownHeaderViewHeight="300" Watermark="Select Date"
+                                             MaximumDropDownHeight="300" DropDownFooterViewHeight="0" 
+                                             DropDownItemHeight="0"  Text="{Binding RoomDetail.SelectedRanges}"
+                                             Style="{StaticResource ComboBoxStyle}" Margin="3,3,0,-3"
+                                             IsDropDownOpen="{Binding IsDropDownOpen, Mode=TwoWay}">
+
+                                            <combobox:SfComboBox.DropDownHeaderView>
+                                                <Grid Padding="2" HeightRequest="300">
+                                                    <syncfusion:SfCalendar 
+                                                    SelectionChangedCommand="{Binding OnSelectionChanged}"
+                                                    SelectionMode="RangeSelection"  />
+                                                </Grid>
+                                            </combobox:SfComboBox.DropDownHeaderView>
+
+                                            <combobox:SfComboBox.DropDownButtonSettings>
+                                                <combobox:DropDownButtonSettings Width="20" Height="40" >
+                                                    <combobox:DropDownButtonSettings.View>
+                                                        <Label WidthRequest="12" Padding="0,0,4,0"
+                                                               FontFamily="{StaticResource FontIcons}"
+                                                               FontSize="16" HorizontalTextAlignment="End"
+                                                               Style="{StaticResource LabelStyle}"
+                                                               Text="{StaticResource Calender}" 
+                                                               TextColor="{DynamicResource Steel}"/>
+                                                    </combobox:DropDownButtonSettings.View>
+                                                </combobox:DropDownButtonSettings>
+                                            </combobox:SfComboBox.DropDownButtonSettings>
+
+                                        </combobox:SfComboBox>
+
+                                    </border:SfBorder>
+
+                                    <!--  combo Box for guests -->
+                                    <border:SfBorder
+                                         Style="{StaticResource ComboBoxBorderStyle}" WidthRequest="{OnIdiom Phone={OnPlatform Default=80, iOS=90},Default=116}">
+
+                                        <combobox:SfComboBox DropDownTextSize="{OnPlatform Default=14, iOS=12}"
+                                            DataSource="{Binding GuestsCollection}" DisplayMemberPath="DisplayText"
+                                            Style="{StaticResource ComboBoxStyle}" ItemPadding="3" Margin="3,3,0,-3"
+                                            Watermark="Guest" SelectedIndex="0" VerticalOptions="CenterAndExpand">
+
+                                            <combobox:SfComboBox.DropDownButtonSettings>
+                                                <combobox:DropDownButtonSettings Width="0"/>
+                                            </combobox:SfComboBox.DropDownButtonSettings>
+
+                                            <combobox:SfComboBox.Behaviors>
+                                                <behaviors:SelectedIndexBehavior Command="{Binding BindingContext.GuestCommand, 
+                                                    Source={x:Reference RoomBooking}}"/>
+                                            </combobox:SfComboBox.Behaviors>
+                                        </combobox:SfComboBox>
+
+                                    </border:SfBorder>
+
+                                    <!--  combo Box for bed -->
+                                    <border:SfBorder
+                                         Style="{StaticResource ComboBoxBorderStyle}" 
+                                         WidthRequest="{OnIdiom Phone={OnPlatform Default=64, iOS=80},Default=100}" >
+                                        
+                                        <combobox:SfComboBox DropDownTextSize="{OnPlatform Default=14, iOS=12}"
+                                            DataSource="{Binding BedsCollection}" DisplayMemberPath="DisplayText"
+                                            Style="{StaticResource ComboBoxStyle}"  Margin="3,3,0,-3" ItemPadding="3"
+                                            Watermark="Bed" SelectedIndex="0"
+                                            VerticalOptions="CenterAndExpand">
+                                            <combobox:SfComboBox.DropDownButtonSettings>
+                                                <combobox:DropDownButtonSettings Width="0"/>
+                                            </combobox:SfComboBox.DropDownButtonSettings>
+
+                                            <combobox:SfComboBox.Behaviors>
+                                                <behaviors:SelectedIndexBehavior
+                                                    Command="{Binding BindingContext.BedCommand, 
+                                                    Source={x:Reference RoomBooking}}"/>
+                                            </combobox:SfComboBox.Behaviors>
+                                        </combobox:SfComboBox>
+                                    </border:SfBorder>
+                                </StackLayout>
+
+                                <Grid Margin="0,16,0,24" Grid.Row="3" HeightRequest="40" >
+
+                                    <!--  price label -->
+                                    <Label VerticalOptions="Center" HorizontalOptions="Start"
+                                    Margin="0" 
+                                    FontSize="12"
+                                    LineHeight="{OnPlatform Default=-1,
+                                                Android=1.5}">
+                                        <Label.FormattedText>
+                                            <FormattedString>
+                                                <Span FontSize="24"
+                                                FontFamily="{StaticResource Montserrat-Medium}"
+                                                Text="{Binding RoomDetail.Cost, StringFormat='${0:0}'}"
+                                                TextColor="{DynamicResource PrimaryColor}" />
+
+                                                <Span  Text=" / " FontSize="16" TextColor="{DynamicResource Gray-700}" />
+
+                                                <Span FontSize="14"
+                                               FontFamily="{StaticResource Montserrat-Regular}" 
+                                               Text="{Binding RoomDetail.TotalDays}"
+                                               TextColor="{DynamicResource Gray-700}" />
+
+                                                <Span FontSize="14"
+                                               FontFamily="{StaticResource Montserrat-Regular}"
+                                               Text=" night" TextColor="{DynamicResource Gray-700}" />
+
+                                            </FormattedString>
+                                        </Label.FormattedText>
+                                    </Label>
+
+                                    <!--  Suggestion button  -->
+                                    <buttons:SfButton x:Name="book"  HeightRequest="35" WidthRequest="80" Margin="0" HorizontalOptions="End" VerticalOptions="Center"
+                                            Command="{Binding Path=BindingContext.BookCommand, Source={x:Reference book}}" 
+                                            CornerRadius="24" Style="{StaticResource BookNowButtonStyle}"
+                                            Text="BOOK" />
+
+                                </Grid>
+
+                                <!--  Resort information title -->
+                                <Label Margin="0" Grid.Row="4"
+                                    FontFamily="{StaticResource Montserrat-SemiBold}"
+                                    Style="{StaticResource LabelStyle}"
+                                    Text="Resort Information"
+                                    TextColor="{DynamicResource Gray-900}" />
+
+                                <!--  resort description -->
+                                <Label  Grid.Row="5"  Margin="0,4"
+                                    FontFamily="{StaticResource Montserrat-Medium}"
+                                    FontSize="12"
+                                    Style="{StaticResource LabelStyle}"
+                                    Text="{Binding RoomDetail.ResortDescription}" />
+
+                                <!--  Title fo amenities-->
+                                <Label Grid.Row="6" Margin="0,16,0,8"
+                                   FontFamily="{StaticResource Montserrat-SemiBold}"       
+                                   Style="{StaticResource LabelStyle}"
+                                   Text="Amenities"
+                                   TextColor="{DynamicResource Gray-900}" />
+
+                                <!--  icon label -->
+                                <listView:SfListView Grid.Row="7" IsScrollBarVisible="False" ItemSpacing="8" 
+                                    AutoFitMode="Height" HeightRequest="80" Orientation="Horizontal" SelectionBackgroundColor="Transparent"
+                                    ItemsSource="{Binding Facilities}">
+
+                                    <listView:SfListView.ItemTemplate>
+                                        <DataTemplate>
+                                            <StackLayout Spacing="4" Orientation="Vertical" Margin="0">
+
+                                                <border:SfBorder  BorderWidth="0" BackgroundColor="{DynamicResource Gray-100}" 
+                                                  HeightRequest="40" WidthRequest="40"                     
+                                                    CornerRadius="20" 
+                                                    HorizontalOptions="Center" VerticalOptions="Center">
+                                                    <border:SfBorder.Content>
+                                                        <Label  Text="{Binding Icon}" FontFamily="{StaticResource FontIcons}" VerticalOptions="Center"
+                                                                HorizontalOptions="Center" TextColor="{StaticResource Steel}"/>
+
+                                                    </border:SfBorder.Content>
+                                                </border:SfBorder>
+
+                                                <Label  TextColor="{DynamicResource Gray-700}" 
+                                                    FontFamily="{StaticResource Montserrat-Medium}" FontSize="12"
+                                                    Text="{Binding Facility}" HorizontalOptions="Center"/>
+
+                                            </StackLayout>
+                                        </DataTemplate>
+                                    </listView:SfListView.ItemTemplate>
+
+                                    <listView:SfListView.FooterTemplate>
+                                        <DataTemplate>
+                                            <StackLayout Spacing="4" Orientation="Vertical" Margin="0">
+
+                                                <buttons:SfButton  BorderWidth="0" BackgroundColor="{DynamicResource Gray-100}" 
+                                                    HeightRequest="40" WidthRequest="40" Text="{StaticResource Menu}" 
+                                                    FontFamily="{StaticResource FontIcons}" TextColor="{StaticResource Steel}"               
+                                                    CornerRadius="20" HorizontalOptions="Center" VerticalOptions="Center">
+                                                </buttons:SfButton>
+
+                                                <Label  TextColor="{DynamicResource Gray-700}" 
+                                                    FontFamily="{StaticResource Montserrat-Medium}" FontSize="12"
+                                                    Text="More" HorizontalOptions="Center"/>
+
+                                            </StackLayout>
+                                        </DataTemplate>
+                                    </listView:SfListView.FooterTemplate>
+
+                                </listView:SfListView>
+
+                                <!--  Title for location -->
+                                <Label  Grid.Row="8"  FontFamily="{StaticResource Montserrat-SemiBold}"
+                                    FontSize="14"  Style="{StaticResource LabelStyle}"
+                                    Text="Location" TextColor="{DynamicResource Gray-900}" />
+
+                                <!--  Map for locating the location  -->
+                                <maps:SfMaps Margin="0,8"
+                                   x:Name="Map" Grid.Row="9"
+                                   BackgroundColor="{DynamicResource Gray-White}"
+                                   HeightRequest="120"
+                                   HorizontalOptions="FillAndExpand"
+                                   VerticalOptions="FillAndExpand"
+                                   ZoomLevel="15">
+
+                                    <maps:SfMaps.Layers>
+                                        <maps:ImageryLayer
+                                           GeoCoordinates="{Binding GeoCoordinate}"
+                                           Markers="{Binding CustomMarkers}"
+                                           ResetOnDoubleTap="False">
+
+                                            <!--  Template for customizing the address popup  -->
+                                            <maps:ImageryLayer.MarkerTemplate>
+                                                <DataTemplate>
+                                                    <StackLayout>
+                                                        <!--  Set pin image  -->
+                                                        <Image
+                                                           Margin="10,5,0,0"
+                                                           HeightRequest="25"
+                                                           HorizontalOptions="StartAndExpand"
+                                                           WidthRequest="25" 
+                                                           Source="{Binding PinImage}" />
+                                                    </StackLayout>
+                                                </DataTemplate>
+                                            </maps:ImageryLayer.MarkerTemplate>
+                                        </maps:ImageryLayer>
+                                    </maps:SfMaps.Layers>
+                                </maps:SfMaps>
+
+                                <Grid ColumnSpacing="12" Margin="0,8,0,0" Grid.Row="10" RowSpacing="8">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="Auto"/>
+                                    </Grid.RowDefinitions>
+
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <!--  Map pin icon -->
+                                    <Label WidthRequest="12"                         
+                                        FontFamily="{StaticResource FontIcons}"
+                                        FontSize="12"
+                                        HorizontalOptions="StartAndExpand"                        
+                                        Style="{StaticResource LabelStyle}"
+                                        Text="{StaticResource MapPin}" HorizontalTextAlignment="Start"
+                                        TextColor="{DynamicResource Gray-900}" />
+
+                                    <!--  Label for address -->
+                                    <Label  HorizontalTextAlignment="Start"  Grid.Column="1"                    
+                                       FontFamily="{StaticResource Montserrat-Medium}"
+                                       FontSize="12"
+                                       HorizontalOptions="StartAndExpand"                        
+                                       Style="{StaticResource LabelStyle}"
+                                       Text="{Binding RoomDetail.Address}" 
+                                       TextColor="{DynamicResource Gray-900}" />
+
+
+                                    <!--  icon for call -->
+                                    <Label WidthRequest="12" Grid.Row="1"
+                                       FontFamily="{StaticResource FontIcons}"
+                                       FontSize="12"
+                                       HorizontalOptions="StartAndExpand"                        
+                                       Style="{StaticResource LabelStyle}"
+                                       Text="{StaticResource Call}" 
+                                       TextColor="{DynamicResource Gray-900}" />
+
+                                    <!--  call label -->
+                                    <Label Grid.Column="1" Grid.Row="1"
+                                       FontFamily="{StaticResource Montserrat-Medium}"
+                                       FontSize="12"
+                                       HorizontalOptions="StartAndExpand"                        
+                                       Style="{StaticResource LabelStyle}"
+                                       Text="{Binding RoomDetail.PhoneNumber}" 
+                                       TextColor="{DynamicResource Gray-900}" />
+                                </Grid>
+                            </Grid>
+
+                            <!--  Rating and Reviews  -->
+                            <local:BookingFeedbackView
+                                    IsVisible="{Binding IsReviewVisible, Converter={StaticResource VisibilityConverter}}" />
+                            <Label  Grid.Row="12"
+                                FontFamily="{StaticResource Montserrat-SemiBold}"
+                                FontSize="16"
+                                HorizontalOptions="CenterAndExpand"
+                                IsVisible="{Binding IsReviewVisible}"
+                                Text="Be the 1st one to review"
+                                TextColor="{DynamicResource Gray-900}"
+                                VerticalOptions="CenterAndExpand" />
+
+                        </StackLayout>
+                    </controls:CustomShadowFrame >
+                </ContentView>
+            </StackLayout>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
+
diff --git a/EssentialUIKit/Views/Detail/RoomBookingPage.xaml.cs b/EssentialUIKit/Views/Detail/RoomBookingPage.xaml.cs
new file mode 100644
index 0000000..7ea112c
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/RoomBookingPage.xaml.cs
@@ -0,0 +1,19 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+using Xamarin.Forms.Internals;
+
+namespace EssentialUIKit.Views.Detail
+{
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class RoomBookingPage : ContentPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="RoomBookingPage" /> class.
+        /// </summary>
+        public RoomBookingPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/Styles.xaml b/EssentialUIKit/Views/Detail/Styles.xaml
index bb3f0be..3276cac 100644
--- a/EssentialUIKit/Views/Detail/Styles.xaml
+++ b/EssentialUIKit/Views/Detail/Styles.xaml
@@ -8,9 +8,11 @@
     xmlns:control="clr-namespace:EssentialUIKit.Controls"
     xmlns:converter="clr-namespace:EssentialUIKit.Converters"
     xmlns:graphics="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+    xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
     xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms">
 
     <Color x:Key="OrangeyYellow">#fcbc0f</Color>
+    <Color x:Key="Steel">#788396</Color>
     <Color x:Key="Transparent">Transparent</Color>
     <Color x:Key="Gold">#fcbc0f</Color>
     <x:String x:Key="Cart">&#xe708;</x:String>
@@ -19,6 +21,15 @@
     <x:String x:Key="Favourite">&#xe701;</x:String>
     <x:String x:Key="ClearBookmark">&#xe734;</x:String>
     <x:String x:Key="Back">&#xe709;</x:String>
+    <x:String x:Key="Call">&#xe71c;</x:String>
+    <x:String x:Key="MapPin">&#xe729;</x:String>
+    <x:String x:Key="Calender">&#xe742;</x:String>
+    <x:String x:Key="Menu">&#xe715;</x:String>
+    <x:String x:Key="Group">&#xe714;</x:String>
+    <x:String x:Key="Search">&#xe705;</x:String>
+    <x:String x:Key="Edit">&#xe727;</x:String>
+    <x:String x:Key="Delete">&#xe716;</x:String>
+    <x:String x:Key="Phone">&#xe71c;</x:String>
 
     <converter:DynamicResourceToColorConverter x:Key="DynamicResourceToColorConverter" />
 
@@ -224,7 +235,6 @@
         <Setter Property="HorizontalOptions" Value="Fill" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="BorderWidth" Value="0" />
-        <Setter Property="FontAttributes" Value="Bold" />
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
@@ -238,4 +248,119 @@
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
+    <!--  Common style for combo box style -->
+    <Style x:Key="ComboBoxStyle" TargetType="combobox:SfComboBox">
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-Medium}"/>
+        <Setter Property="TextSize" Value="14"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-900}"/>
+        <Setter Property="ShowBorder" Value="False"/>
+        <Setter Property="WatermarkColor" Value="{DynamicResource Gray-700}"/>
+        <Setter Property="Margin" Value="8,3,0,-3"/>
+        <Setter Property="HeightRequest" Value="40"/>
+    </Style>
+
+    <!--  Common style for former border style  -->
+    <Style x:Key="FormBorderStyle" TargetType="border:SfBorder">
+        <Setter Property="BorderColor" Value="{DynamicResource Gray-300}"/>
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Padding" Value="12,8"/>
+        <Setter Property="Margin" Value="0,8"/>
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-White}"/>
+    </Style>
+
+    <!--  Common style for buttons  -->
+    <Style x:Key="SfGradientButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}" />
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-SemiBold}" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="VerticalOptions" Value="Center"/>
+        <Setter Property="FontAttributes" Value="Bold"/>
+        <Setter Property="VerticalTextAlignment" Value="Center" />
+        <Setter Property="BorderWidth" Value="0"/>
+        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+        <Setter Property="BackgroundGradient">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush>
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                        <graphics:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- Common style for search entries -->
+    <Style x:Key="SearchEntryStyle" TargetType="control:BorderlessEntry">
+        <Setter Property="PlaceholderColor" Value="{DynamicResource Gray-700}" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="TextColor" Value="{DynamicResource Gray-900}" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <!-- Common style for seperators -->
+    <Style x:Key="SeparatorStyle" TargetType="BoxView">
+        <Setter Property="HeightRequest" Value="1" />
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-200}" />
+    </Style>
+
+    <!--  Common style for Magenta buttons  -->
+    <Style
+        x:Key="MagentaButtonStyle"
+        BasedOn="{StaticResource SfButtonStyle}"
+        TargetType="buttons:SfButton">
+        <Setter Property="BackgroundGradient">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush>
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                        <graphics:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Common style for book now buttons  -->
+    <Style x:Key="BookNowButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="BackgroundGradient">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush>
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                        <graphics:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}" />
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-Medium}" />
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="CornerRadius" Value="16" />
+    </Style>
+
+    
+    <Style x:Key="MenuIcon" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="BackgroundColor" Value="{StaticResource Gray-200}" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="WidthRequest" Value="40" />
+        <Setter Property="HorizontalOptions" Value="End" />
+    </Style>
+
+    <Style x:Key="ComboBoxBorderStyle" TargetType="border:SfBorder">
+        <Setter Property="BorderColor" Value="{DynamicResource Gray-300}"/>
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-White}"/>
+    </Style>
+
 </ResourceDictionary>
diff --git a/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml b/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml
new file mode 100644
index 0000000..e0b8478
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
+          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+          xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+          xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+          mc:Ignorable="d"
+          x:Class="EssentialUIKit.Views.Detail.Templates.EventTemplate">
+    <ViewCell.View>
+
+        <StackLayout Margin="0,0,8,0" Spacing="0">
+            <border:SfBorder
+                BorderColor="Transparent"
+                BorderWidth="0"
+                CornerRadius="35"
+                HeightRequest="32"                
+                Margin="0"
+                HorizontalOptions="Center"
+                WidthRequest="32">
+
+                <!--  Image of the profile  -->
+                <Image
+                    Aspect="AspectFill"
+                    BackgroundColor="{DynamicResource Gray-200}"
+                    HeightRequest="32"
+                    HorizontalOptions="Center"
+                    WidthRequest="32">
+                    <Image.Source>
+                        <UriImageSource Uri="{Binding  ImagePath}" 
+			                                 CacheValidity="12" 
+			                                 CachingEnabled="true"/>
+                    </Image.Source>
+                </Image>
+            </border:SfBorder>
+
+        </StackLayout>
+    </ViewCell.View>
+</ViewCell>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml.cs b/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml.cs
new file mode 100644
index 0000000..87e49e3
--- /dev/null
+++ b/EssentialUIKit/Views/Detail/Templates/EventTemplate.xaml.cs
@@ -0,0 +1,18 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Detail.Templates
+{
+    /// <summary>
+    /// template for event detail page
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class EventTemplate 
+    {
+        public EventTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/AddCardPage.xaml.cs b/EssentialUIKit/Views/Forms/AddCardPage.xaml.cs
index 454fbff..91edac7 100644
--- a/EssentialUIKit/Views/Forms/AddCardPage.xaml.cs
+++ b/EssentialUIKit/Views/Forms/AddCardPage.xaml.cs
@@ -1,5 +1,4 @@
-using System.Collections.ObjectModel;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Forms/AddContactPage.xaml b/EssentialUIKit/Views/Forms/AddContactPage.xaml
index adddc05..071ea27 100644
--- a/EssentialUIKit/Views/Forms/AddContactPage.xaml
+++ b/EssentialUIKit/Views/Forms/AddContactPage.xaml
@@ -9,6 +9,7 @@
     xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
     xmlns:control="clr-namespace:EssentialUIKit.Controls"
     xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+    xmlns:behaviors="clr-namespace:EssentialUIKit.Behaviors"
     xmlns:local="clr-namespace:EssentialUIKit.Views.Forms"
     xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Forms"
     Title="Details Form"
@@ -108,13 +109,7 @@
                     Style="{StaticResource HeaderLabelStyle}"
                     Text="Contact Information" />
                 <local:ContactEmailEntry /> 
-                <border:SfBorder BorderColor="{Binding Source={x:Reference PhoneNoEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}" Style="{StaticResource FormBorderStyle}">
-                    <control:BorderlessEntry
-                        x:Name="PhoneNoEntry"
-                        Keyboard="Telephone" Text="{Binding PhoneNumber}"
-                        Placeholder="Phone Number" 
-                        Style="{StaticResource EntryTextStyle}" />
-                </border:SfBorder>
+               
                 <border:SfBorder BorderColor="{Binding Source={x:Reference AddressEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}" Style="{StaticResource FormBorderStyle}">
                     <control:BorderlessEntry
                         x:Name="AddressEntry"
@@ -126,13 +121,9 @@
                     BorderColor="{Binding Source={x:Reference CountryPicker}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}"
                     HeightRequest="40"
                     Style="{StaticResource FormBorderStyle}">
-                    <combobox:SfComboBox
+                    <control:CountryComboBox
                         x:Name="CountryPicker" 
-                        DataSource="{Binding Countries}"
-                            DisplayMemberPath="Country"
-                            SelectedItem="{Binding Country, Mode=TwoWay}"
-                        Style="{StaticResource ComboBoxStyle}"
-                        Watermark="Country">
+                        Style="{StaticResource ComboBoxStyle}">
                         <combobox:SfComboBox.DropDownButtonSettings>
                             <combobox:DropDownButtonSettings Width="30" Height="30">
                                 <combobox:DropDownButtonSettings.View>
@@ -147,7 +138,7 @@
                                 </combobox:DropDownButtonSettings.View>
                             </combobox:DropDownButtonSettings>
                         </combobox:SfComboBox.DropDownButtonSettings>
-                    </combobox:SfComboBox>
+                    </control:CountryComboBox>
                 </border:SfBorder>
                 <Grid>
                     <Grid.ColumnDefinitions>
@@ -160,7 +151,7 @@
                                      Style="{StaticResource FormBorderStyle}" Grid.Column="2">
                         <control:BorderlessEntry
                             x:Name="CityEntry"
-                            Placeholder="City" Text="{Binding City}"
+                            Placeholder="City"  Text="{Binding City, Source={Reference CountryPicker}}"
                             Style="{StaticResource EntryTextStyle}" />
                     </border:SfBorder>
                     <border:SfBorder
@@ -170,8 +161,8 @@
                         Style="{StaticResource FormBorderStyle}">
                         <combobox:SfComboBox
                             x:Name="StatePicker"
-                            SelectedItem="{Binding State, Mode=TwoWay}"
-                            DataSource="{Binding SelectedItem.States, Source={Reference CountryPicker}}"
+                            SelectedItem="{Binding State, Source={Reference CountryPicker}}"
+                            DataSource="{Binding States, Source={Reference CountryPicker}}"
                             Style="{StaticResource ComboBoxStyle}"
                             Watermark="State">
                             <combobox:SfComboBox.DropDownButtonSettings>
@@ -191,6 +182,19 @@
                         </combobox:SfComboBox>
                     </border:SfBorder>
                 </Grid>
+                <border:SfBorder BorderColor="{Binding Source={x:Reference PhoneNoEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}" Style="{StaticResource FormBorderStyle}">
+                    <control:BorderlessEntry
+                        x:Name="PhoneNoEntry"
+                        Placeholder="{Binding PhoneNumberPlaceHolder, Source={Reference CountryPicker}}"
+                            Text="{Binding PhoneNumber, Source={Reference CountryPicker}}"
+                        Keyboard="Telephone" 
+                        Style="{StaticResource EntryTextStyle}" >
+                        <control:BorderlessEntry.Behaviors>
+                            <behaviors:EntryMaskedBehavior Mask="{Binding Source={x:Reference CountryPicker}, Path=Mask}" 
+                                                           Prefix="{Binding Source={Reference CountryPicker}, Path=CountryCode}"/>
+                        </control:BorderlessEntry.Behaviors>
+                    </control:BorderlessEntry>
+                </border:SfBorder>
                 <buttons:SfButton
                     HorizontalOptions="Center" Command="{Binding SubmitCommand}"
                     Style="{StaticResource SfButtonStyle}"
diff --git a/EssentialUIKit/Views/Forms/AddProfilePage.xaml b/EssentialUIKit/Views/Forms/AddProfilePage.xaml
index e6ee60b..198b414 100644
--- a/EssentialUIKit/Views/Forms/AddProfilePage.xaml
+++ b/EssentialUIKit/Views/Forms/AddProfilePage.xaml
@@ -7,6 +7,7 @@
     xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
     xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
     xmlns:control="clr-namespace:EssentialUIKit.Controls"
+    xmlns:behaviours="clr-namespace:EssentialUIKit.Behaviors"
     xmlns:converter="clr-namespace:EssentialUIKit.Converters"
     xmlns:sfavatar="clr-namespace:Syncfusion.XForms.AvatarView;assembly=Syncfusion.Core.XForms"
     Title="New Contact"
@@ -106,8 +107,12 @@
                     <control:BorderlessEntry
                         x:Name="PhoneNoEntry"
                         Keyboard="Telephone" 
-                        Placeholder="Phone Number"
-                        Style="{StaticResource EntryTextStyle}" />
+                        Placeholder="Phone Number : e.g. XXXX-XXXXXX"
+                        Style="{StaticResource EntryTextStyle}" >
+                        <control:BorderlessEntry.Behaviors>
+                            <behaviours:EntryMaskedBehavior Mask="(+91)XXXXX-XXXXX" Prefix="(+91)"/>
+                        </control:BorderlessEntry.Behaviors>
+                    </control:BorderlessEntry>
                 </border:SfBorder>
 
                 <buttons:SfButton
diff --git a/EssentialUIKit/Views/Forms/AddProfilePage.xaml.cs b/EssentialUIKit/Views/Forms/AddProfilePage.xaml.cs
index c8abc79..91d12f7 100644
--- a/EssentialUIKit/Views/Forms/AddProfilePage.xaml.cs
+++ b/EssentialUIKit/Views/Forms/AddProfilePage.xaml.cs
@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Forms/BusinessRegistrationFormPage.xaml b/EssentialUIKit/Views/Forms/BusinessRegistrationFormPage.xaml
index d773120..2fdd14f 100644
--- a/EssentialUIKit/Views/Forms/BusinessRegistrationFormPage.xaml
+++ b/EssentialUIKit/Views/Forms/BusinessRegistrationFormPage.xaml
@@ -10,6 +10,7 @@
     xmlns:controls="clr-namespace:EssentialUIKit.Controls"
     xmlns:converter="clr-namespace:EssentialUIKit.Converters"
     xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Forms"
+    xmlns:behaviours="clr-namespace:EssentialUIKit.Behaviors"
     Title="Business Registration Form"
     BackgroundColor="{DynamicResource Gray-100}"
     NavigationPage.HasNavigationBar="False">
@@ -150,24 +151,6 @@
                             Style="{StaticResource EntryTextBoxStyle}" />
                 </border:SfBorder>
 
-                <!-- Phone Number -->
-                <Label
-                        FontFamily="{StaticResource Montserrat-Medium}"
-                        Margin="0,24,0,4"
-                        HeightRequest="18"
-                        FontSize="12"
-                        Text="Phone Number"
-                        TextColor="{DynamicResource Gray-800}" />
-
-                <border:SfBorder BorderColor="{Binding Source={x:Reference PhoneNumberEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}" 
-                                 Style="{StaticResource BusinessFormBorderStyle}">
-                    <controls:BorderlessEntry Keyboard="Telephone" 
-                            x:Name="PhoneNumberEntry"
-                            Placeholder="Phone Number"
-                            Text="{Binding PhoneNumber}"
-                            Style="{StaticResource EntryTextBoxStyle}" />
-                </border:SfBorder>
-
                 <!-- Street Address -->
                 <Label
                         FontFamily="{StaticResource Montserrat-Medium}"
@@ -198,14 +181,9 @@
                 <border:SfBorder
                         BorderColor="{Binding Source={x:Reference CountryPicker}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}"
                         Style="{StaticResource BusinessFormBorderStyle}">
-                        <combobox:SfComboBox
+                        <controls:CountryComboBox
                                 x:Name="CountryPicker"
-                                Style="{StaticResource ComboBoxStyle}"
-                            DataSource="{Binding Countries}"
-                            DisplayMemberPath="Country"
-                            SelectedItem="{Binding Country, Mode=TwoWay}"
-                                Watermark="Select Country"
-                                VerticalOptions="CenterAndExpand">
+                                Style="{StaticResource ComboBoxStyle}">
                         <combobox:SfComboBox.DropDownButtonSettings>
                                      <combobox:DropDownButtonSettings>
                                         <combobox:DropDownButtonSettings.View>
@@ -219,7 +197,7 @@
                                         </combobox:DropDownButtonSettings.View>
                                      </combobox:DropDownButtonSettings>
                                 </combobox:SfComboBox.DropDownButtonSettings>
-                        </combobox:SfComboBox>
+                        </controls:CountryComboBox>
                 </border:SfBorder>
 
                 <!-- City and State -->
@@ -244,7 +222,7 @@
                         <controls:BorderlessEntry
                                 x:Name="CityEntry"
                                 Placeholder="City"
-                                Text="{Binding City}"
+                                Text="{Binding City, Source={Reference CountryPicker}}"
                                 Style="{StaticResource EntryTextBoxStyle}" />
                     </border:SfBorder>
                     
@@ -253,8 +231,8 @@
                             Style="{StaticResource BusinessFormBorderStyle}">
                             <combobox:SfComboBox
                                     x:Name="StatePicker"
-                                    SelectedItem="{Binding State, Mode=TwoWay}"
-                                    DataSource="{Binding SelectedItem.States, Source={Reference CountryPicker}}"
+                                SelectedItem="{Binding State, Source={Reference CountryPicker}}"
+                                    DataSource="{Binding States, Source={Reference CountryPicker}}"
                                     Style="{StaticResource ComboBoxStyle}"
                                     Watermark="State"
                                     VerticalOptions="CenterAndExpand">
@@ -275,6 +253,29 @@
                     </border:SfBorder>
                 </Grid>
 
+                <!-- Phone Number -->
+                <Label
+                        FontFamily="{StaticResource Montserrat-Medium}"
+                        Margin="0,24,0,4"
+                        HeightRequest="18"
+                        FontSize="12"
+                        Text="Phone Number"
+                        TextColor="{DynamicResource Gray-800}" />
+
+                <border:SfBorder BorderColor="{Binding Source={x:Reference PhoneNumberEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}" 
+                                 Style="{StaticResource BusinessFormBorderStyle}">
+                    <controls:BorderlessEntry Keyboard="Telephone" 
+                            x:Name="PhoneNumberEntry" 
+                            Placeholder="{Binding PhoneNumberPlaceHolder, Source={Reference CountryPicker}}"
+                            Text="{Binding PhoneNumber, Source={Reference CountryPicker}}"
+                            Style="{StaticResource EntryTextBoxStyle}" >
+                        <controls:BorderlessEntry.Behaviors>
+                            <behaviours:EntryMaskedBehavior Mask="{Binding Source={x:Reference CountryPicker}, Path=Mask}" 
+                                                            Prefix="{Binding Source={Reference CountryPicker}, Path=CountryCode}"/>
+                        </controls:BorderlessEntry.Behaviors>
+                    </controls:BorderlessEntry>
+                </border:SfBorder>
+
                 <!-- Submit Button -->
                 <buttons:SfButton
                         Command="{Binding SubmitCommand}"
diff --git a/EssentialUIKit/Views/Forms/ContactEmailEntry.xaml.cs b/EssentialUIKit/Views/Forms/ContactEmailEntry.xaml.cs
index 4e25cd3..f89e5d3 100644
--- a/EssentialUIKit/Views/Forms/ContactEmailEntry.xaml.cs
+++ b/EssentialUIKit/Views/Forms/ContactEmailEntry.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
 namespace EssentialUIKit.Views.Forms
diff --git a/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml b/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml
new file mode 100644
index 0000000..58db203
--- /dev/null
+++ b/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:control="clr-namespace:EssentialUIKit.Controls"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             x:Class="EssentialUIKit.Views.Forms.LoginEmailEntry">
+    
+    <ContentView.Resources>
+        <ResourceDictionary>
+            <converter:StringToBooleanConverter x:Key="StringToBooleanConverter" />
+            <converter:ErrorValidationColorConverter x:Key="ErrorValidationColorConverter" PageVariantParameter="1" />
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentView.Resources>
+
+    <ContentView.Content>
+        <StackLayout>
+            <border:SfBorder
+                BackgroundColor="{DynamicResource Gray-White}" CornerRadius="4"
+                BorderColor="{Binding Path=IsFocused, Source={x:Reference EmailEntry}, Converter={x:StaticResource ErrorValidationColorConverter}, ConverterParameter={x:Reference EmailEntry}}"
+                Style="{StaticResource SfBorderStyle}">
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+
+                    <control:BorderlessEntry
+                        x:Name="EmailEntry"
+                        Placeholder="Email"
+                        PlaceholderColor="{DynamicResource Gray-700}"
+                        Style="{StaticResource EntryStyle}"
+                        Keyboard="Email"
+                        Text="{Binding Email}"
+                        TextColor="{DynamicResource Gray-900}" />
+                    
+                    <!--  Login entry label -->
+
+                    <Label
+                        Margin="15,0"
+                        FontFamily="{StaticResource FontIcons}"
+                        FontSize="18"
+                        HorizontalOptions="EndAndExpand"
+                        HorizontalTextAlignment="End"
+                        IsVisible="{Binding Path=IsVisible, Source={x:Reference ValidationLabel}}"
+                        Text="&#xe707;"
+                        TextColor="{DynamicResource Red}"
+                        VerticalOptions="Center" />
+
+                </Grid>
+            </border:SfBorder>
+
+            <!--  Login validation label -->
+            <Label
+                x:Name="ValidationLabel"
+                Margin="15,-5,0,0"
+                FontSize="12"
+                IsVisible="{Binding Path=IsFocused, Source={x:Reference EmailEntry}, Converter={StaticResource StringToBooleanConverter}, ConverterParameter={x:Reference EmailEntry}}"
+                Text="Please enter the valid e-mail"
+                TextColor="{DynamicResource Red}"
+                VerticalOptions="FillAndExpand" />
+
+        </StackLayout>
+    </ContentView.Content>
+</ContentView>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml.cs b/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml.cs
new file mode 100644
index 0000000..41752ae
--- /dev/null
+++ b/EssentialUIKit/Views/Forms/LoginEmailEntry.xaml.cs
@@ -0,0 +1,22 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Forms
+{
+    /// <summary>
+    /// View used to show the email entry with validation status.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+
+    public partial class LoginEmailEntry 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LoginEmailEntry" /> class.
+        /// </summary>
+        public LoginEmailEntry()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml b/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml
new file mode 100644
index 0000000..7c03101
--- /dev/null
+++ b/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml
@@ -0,0 +1,178 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Forms"
+             xmlns:core="clr-namespace:Syncfusion.XForms.Core;assembly=Syncfusion.Core.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:control="clr-namespace:EssentialUIKit.Controls"
+             xmlns:local="clr-namespace:EssentialUIKit.Views.Forms"
+             xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+             xmlns:template="clr-namespace:EssentialUIKit.Views.Templates"
+             x:Class="EssentialUIKit.Views.Forms.LoginWithSocialIconPage"  
+             BackgroundColor="{DynamicResource Gray-200}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <converter:BooleanToColorConverter x:Key="ColorConverter" />
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <!--  Binding context for login with social icon page  -->
+    <ContentPage.BindingContext>
+        <viewModel:LoginWithSocialIconViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <Grid>
+            <gradient:SfGradientView Style="{StaticResource SfGradientStyle}" />
+            <ScrollView HorizontalOptions="Center">
+
+                <ScrollView.VerticalOptions>
+                    <OnIdiom
+                    x:TypeArguments="LayoutOptions"
+                    Default="CenterAndExpand"
+                    Phone="FillAndExpand" />
+                </ScrollView.VerticalOptions>
+
+                <StackLayout
+                Margin="{core:OnPlatformOrientationThickness PhonePortrait='24,32',
+                                                             PhoneLandscape='150,32',
+                                                             TabletPortrait='200,50',
+                                                             TabletLandscape='350,50',
+                                                             Desktop='30'}"
+                Spacing="0"
+                VerticalOptions="FillAndExpand"
+                WidthRequest="{OnPlatform Default='-1',
+                                          UWP='350'}">
+
+                    <Grid RowSpacing="0" VerticalOptions="CenterAndExpand">
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+
+                        </Grid.RowDefinitions>
+
+                        <!--  Label to display the title of this page  -->
+                        <Label
+                        FontFamily="{StaticResource Montserrat-SemiBold}"
+                        FontSize="20"
+                        HorizontalTextAlignment="Center"
+                        Style="{StaticResource LabelStyle}"
+                        Text="Login"
+                        TextColor="{DynamicResource Gray-White}" />
+
+                        <!--  Label to display the description of this page  -->
+                        <Label
+                        Grid.Row="1"
+                        Margin="14,8"
+                        FontFamily="{StaticResource Montserrat-Medium}"
+                        HorizontalTextAlignment="Center"
+                        Style="{StaticResource LabelStyle}"
+                        Text="Let's get to work"
+                        TextColor="{DynamicResource Gray-White}" />
+
+                        <!--  Entry to get email ID from user  -->
+                        <local:LoginEmailEntry Grid.Row="2" Padding="0,24" />
+
+                        <!--  Entry to get password from user  -->
+                        <border:SfBorder
+                        Grid.Row="3"
+                        BackgroundColor="{DynamicResource Gray-White}"
+                        BorderColor="{Binding Source={x:Reference PasswordEntry}, Path=IsFocused, Converter={StaticResource ColorConverter}, ConverterParameter=3}"
+                        Style="{StaticResource SfBorderStyle}" CornerRadius="4">
+                            <control:BorderlessEntry
+                            x:Name="PasswordEntry"
+                            IsPassword="True"
+                            Placeholder="Password"
+                            PlaceholderColor="{DynamicResource Gray-700}"
+                            Style="{StaticResource EntryStyle}"
+                            Text="{Binding Password}"
+                            TextColor="{DynamicResource Gray-900}" />
+                        </border:SfBorder>
+
+                        <!--  Forgot password link  -->
+                        <buttons:SfButton
+                        x:Name="ForgotPasswordLabel"
+                        Grid.Row="4" CornerRadius="4"
+                        Margin="0,16"
+                        FontFamily="{StaticResource Montserrat-SemiBold}"
+                        FontSize="12" 
+                        HorizontalOptions="End" 
+                        Style="{StaticResource SfFlatButtonStyle}"
+                        Text="FORGOT PASSWORD?"
+                        TextColor="{DynamicResource Gray-White}"/>
+
+
+                        <buttons:SfButton
+                        Grid.Row="5"
+                        Margin="0,16"
+                        CornerRadius="4"
+                        Command="{Binding LoginCommand}"
+                        Style="{StaticResource SfButtonStyle}"
+                        Text="LOG IN" />
+
+
+                        <Label
+                        Grid.Row="6"
+                        FontFamily="{StaticResource Montserrat-Medium}"
+                        HorizontalTextAlignment="Center"
+                        Style="{StaticResource LabelStyle}"
+                        Text="Or create an account using social media"
+                        TextColor="{DynamicResource Gray-White}" />
+
+                        <!--  Login button with social icons -->
+                        <Grid Grid.Row="7">
+                            <template:SocialIconTemplate /> 
+                        </Grid>
+
+                    </Grid>
+
+                    <StackLayout
+                    HorizontalOptions="Center"
+                    Orientation="Horizontal"
+                    Spacing="1"
+                    VerticalOptions="End">
+
+                        <StackLayout.Padding>
+                            <OnIdiom
+                            x:DataType="Thickness"
+                            Default="0, 48, 0, 0"
+                            Phone="0" />
+                        </StackLayout.Padding>
+
+                        <Label
+                        FontFamily="{StaticResource Montserrat-Medium}"
+                        HorizontalOptions="CenterAndExpand"
+                        HorizontalTextAlignment="Center"
+                        Style="{StaticResource LabelStyle}"
+                        Text="Don't have an account?"
+                        TextColor="{DynamicResource Gray-White}"
+                        VerticalTextAlignment="Center" />
+
+                        <!--  Sign-up button  -->
+                        <buttons:SfButton
+                        Command="{Binding SignUpCommand}"
+                        CornerRadius="4"
+                        Style="{StaticResource SfFlatButtonStyle}"
+                        Text="Sign Up" />
+
+                    </StackLayout>
+
+                </StackLayout>
+            </ScrollView>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml.cs b/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml.cs
new file mode 100644
index 0000000..128aeba
--- /dev/null
+++ b/EssentialUIKit/Views/Forms/LoginWithSocialIconPage.xaml.cs
@@ -0,0 +1,21 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Forms
+{
+    /// <summary>
+    /// Page to login with user name and password
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class LoginWithSocialIconPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LoginWithSocialIconPage" /> class.
+        /// </summary>
+        public LoginWithSocialIconPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/Styles.xaml b/EssentialUIKit/Views/Forms/Styles.xaml
index b2119b2..a423384 100644
--- a/EssentialUIKit/Views/Forms/Styles.xaml
+++ b/EssentialUIKit/Views/Forms/Styles.xaml
@@ -13,10 +13,19 @@
     <Color x:Key="BorderBackgroundColor">#20FFFFFF</Color>
     <Color x:Key="GradientStartColor">#012E8B</Color>
     <Color x:Key="GradientEndColor">#3F0041</Color>
+    <Color x:Key="GradientStart">#713d74</Color>
+    <Color x:Key="GradientEnd">#221e60</Color>
+    <Color x:Key="TwitterBlue">#55acee</Color>
+    <Color x:Key="Red">#dc4e41</Color>
     <Color x:Key="FacebookBlue">#4267B2</Color>
-    
+    <Color x:Key="LightGreen">#35c659</Color>
+    <Color x:Key="FacebookLogin">#3b5998</Color>
+
     <x:String x:Key="DropDownButtonIcon">&#xe70b;</x:String>
     <x:String x:Key="AvatarIcon">&#xe723;</x:String>
+    <x:String x:Key="FaceBook">&#xe70f;</x:String>
+    <x:String x:Key="Google">&#xe74d;</x:String>
+    <x:String x:Key="Twitter">&#xe749;</x:String>
 
     <!--  Common style for content pages  -->
     <Style x:Key="ContentPageStyle" TargetType="ContentPage">
@@ -102,6 +111,24 @@
         </Setter>
     </Style>
 
+    <Style x:Key="SfGradientStyle" TargetType="graphics:SfGradientView">
+        <Setter Property="Opacity" Value="1" />
+        <Setter Property="VerticalOptions" Value="FillAndExpand" />
+        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+        <Setter Property="BackgroundBrush">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        
+                        <graphics:SfGradientStop Offset="0.0" Color="{StaticResource GradientStart}" />
+                        <graphics:SfGradientStop Offset="1.0" Color="{StaticResource GradientEnd}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+
     <Style x:Key="HeaderLabelStyle" TargetType="Label">
         <Setter Property="FontFamily" Value="{StaticResource Montserrat-Bold}"/>
         <Setter Property="FontSize" Value="14"/>
@@ -156,4 +183,16 @@
         <Setter Property="HeightRequest" Value="40"/>
     </Style>
 
+    <!--  Common style for social icon SfButton  -->
+    <Style x:Key="SocialIconButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="CornerRadius" Value="22" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="Center" />
+        <Setter Property="VerticalTextAlignment" Value="Center" />
+        <Setter Property="HorizontalTextAlignment" Value="Center" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}"/>
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Forms/TabbedForm.xaml b/EssentialUIKit/Views/Forms/TabbedForm.xaml
index 5512949..7b86959 100644
--- a/EssentialUIKit/Views/Forms/TabbedForm.xaml
+++ b/EssentialUIKit/Views/Forms/TabbedForm.xaml
@@ -94,7 +94,7 @@
                                     Margin="0,16"
                                     Command="{Binding LoginCommand}"
                                     Style="{StaticResource SfButtonStyle}"
-                                    Text="LOGIN" />
+                                    Text="LOG IN" />
 
                                     </StackLayout>
                                 </Grid>
diff --git a/EssentialUIKit/Views/Navigation/ContactsPage.xaml b/EssentialUIKit/Views/Navigation/ContactsPage.xaml
index e279a40..ccf88f6 100644
--- a/EssentialUIKit/Views/Navigation/ContactsPage.xaml
+++ b/EssentialUIKit/Views/Navigation/ContactsPage.xaml
@@ -26,79 +26,48 @@
 
         <Grid RowSpacing="0" ColumnSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64"/>
-                <RowDefinition Height="1"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
 
-            <StackLayout x:Name="ContactsTitleView"
-                         Padding="8,8"
-                         HeightRequest="48"
-                         Grid.Row="0"
-                         BackgroundColor="{DynamicResource Gray-White}"
-                         HorizontalOptions="FillAndExpand"
-                         Orientation="Horizontal"
-                         Spacing="0">
-
-                <StackLayout x:Name="ContactsTitle"
-                             HorizontalOptions="FillAndExpand"
-                             IsVisible="True"
-                             Orientation="Horizontal"
-                             Spacing="0"
-                             VerticalOptions="FillAndExpand">
+            <StackLayout x:Name="ContactsTitleView"  Padding="8,8" Grid.Row="0" HeightRequest="64"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="ContactsTitle" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
 
                     <!--  Back button command  -->
-                    <buttons:SfButton x:Name="backButton"
-                                      Command="{Binding BackButtonCommand}"
-                                      CommandParameter="{x:Reference backButton}"
-                                      CornerRadius="4"
-                                      Style="{StaticResource IconButtonStyle}"
-                                      Text="{StaticResource Back}" />
-
-                    <!--  Contacts page Title  -->
-                    <Label Margin="16,0"
-                           FontFamily="{StaticResource Montserrat-Medium}"
-                           FontSize="16"
-                           HorizontalOptions="CenterAndExpand"
-                           LineHeight="1.25"
-                           Text="Contacts"
-                           TextColor="{DynamicResource Gray-900}"
-                           VerticalOptions="Center"
-                           VerticalTextAlignment="Center" />
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Contacts List page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25"  Text="Contacts List"  VerticalOptions="Center" VerticalTextAlignment="Center" />
 
                 </StackLayout>
 
-                <StackLayout x:Name="Search"
-                             HorizontalOptions="EndAndExpand"
-                             IsVisible="False"
-                             Orientation="Horizontal"
-                             Spacing="0">
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
 
                     <!--  Back to title layout  -->
-                    <buttons:SfButton x:Name="BackToTitle"
-                                      Clicked="BackToTitle_Clicked"
-                                      Style="{StaticResource NavigationBarButtonStyle}"
-                                      Text="{StaticResource Back}" />
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" />
 
                     <!--  Rounded Search Entry  -->
                     <border:SfBorder Style="{DynamicResource SfBorderStyle}">
-                        <controls:BorderlessEntry x:Name="SearchEntry"
-                                                  BindingContext="{x:Reference ContactList}"
-                                                  Text="{Binding SearchText, Mode=TwoWay}"
-                                                  HorizontalOptions="FillAndExpand"
-                                                  Placeholder="Search here"
-                                                  Style="{StaticResource SearchEntryStyle}" />
+                        <controls:BorderlessEntry x:Name="SearchEntry"  BindingContext="{x:Reference ContactList}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
                     </border:SfBorder>
                 </StackLayout>
 
                 <!--  Search Button  -->
-                <buttons:SfButton x:Name="SearchButton"
-                                  BindingContext="{x:Reference ContactsTitle}"
-                                  IsVisible="{Binding Path=IsVisible,Mode=TwoWay}"
-                                  Clicked="SearchButton_Clicked"
-                                  Style="{StaticResource IconButtonStyle }"
-                                  Text="{StaticResource Search}" />
-
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
             </StackLayout>
 
             <!-- Seperator -->
diff --git a/EssentialUIKit/Views/Navigation/DocumentsListPage.xaml b/EssentialUIKit/Views/Navigation/DocumentsListPage.xaml
index 2272bc2..1475243 100644
--- a/EssentialUIKit/Views/Navigation/DocumentsListPage.xaml
+++ b/EssentialUIKit/Views/Navigation/DocumentsListPage.xaml
@@ -23,79 +23,48 @@
 
         <Grid RowSpacing="0" ColumnSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64"/>
-                <RowDefinition Height="1"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
 
-            <StackLayout x:Name="TitleView"
-                         Padding="8,8"
-                         HeightRequest="48"
-                         Grid.Row="0"
-                         BackgroundColor="{DynamicResource Gray-White}"
-                         HorizontalOptions="FillAndExpand"
-                         Orientation="Horizontal"
-                         Spacing="0">
-
-                <StackLayout x:Name="Title"
-                             HorizontalOptions="FillAndExpand"
-                             IsVisible="True"
-                             Orientation="Horizontal"
-                             Spacing="0"
-                             VerticalOptions="FillAndExpand">
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="64"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="Title" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
 
                     <!--  Back button command  -->
-                    <buttons:SfButton x:Name="backButton"
-                                      Command="{Binding BackButtonCommand}"
-                                      CommandParameter="{x:Reference backButton}"
-                                      CornerRadius="4"
-                                      Style="{StaticResource IconButtonStyle}"
-                                      Text="{StaticResource Back}" />
-
-                    <!--  Documents page Title  -->
-                    <Label Margin="16,0"
-                           FontFamily="{StaticResource Montserrat-Medium}"
-                           FontSize="16"
-                           HorizontalOptions="CenterAndExpand"
-                           LineHeight="1.25"
-                           Text="Documents"
-                           TextColor="{DynamicResource Gray-900}"
-                           VerticalOptions="Center"
-                           VerticalTextAlignment="Center" />
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Documents List page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25"  Text="Documents List"  VerticalOptions="Center" VerticalTextAlignment="Center" />
 
                 </StackLayout>
 
-                <StackLayout x:Name="Search"
-                             HorizontalOptions="EndAndExpand"
-                             IsVisible="False"
-                             Orientation="Horizontal"
-                             Spacing="0">
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
 
                     <!--  Back to title layout  -->
-                    <buttons:SfButton x:Name="BackToTitle"
-                                      Clicked="BackToTitle_Clicked"
-                                      Style="{StaticResource NavigationBarButtonStyle}"
-                                      Text="{StaticResource Back}" />
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" />
 
                     <!--  Rounded Search Entry  -->
                     <border:SfBorder Style="{DynamicResource SfBorderStyle}">
-                        <controls:BorderlessEntry x:Name="SearchEntry"
-                                                  BindingContext="{x:Reference DocumentsList}"
-                                                  Text="{Binding SearchText, Mode=TwoWay}"
-                                                  HorizontalOptions="FillAndExpand"
-                                                  Placeholder="Search here"
-                                                  Style="{StaticResource SearchEntryStyle}" />
+                        <controls:BorderlessEntry x:Name="SearchEntry"  BindingContext="{x:Reference DocumentsList}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
                     </border:SfBorder>
                 </StackLayout>
 
                 <!--  Search Button  -->
-                <buttons:SfButton x:Name="SearchButton"
-                                  BindingContext="{x:Reference Title}"
-                                  IsVisible="{Binding Path=IsVisible,Mode=TwoWay}"
-                                  Clicked="SearchButton_Clicked"
-                                  Style="{StaticResource IconButtonStyle }"
-                                  Text="{StaticResource Search}" />
-
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
             </StackLayout>
 
             <BoxView Grid.Row="1" Style="{DynamicResource SeparatorStyle}" />
diff --git a/EssentialUIKit/Views/Navigation/FAQPage.xaml b/EssentialUIKit/Views/Navigation/FAQPage.xaml
index f15af33..9729cb5 100644
--- a/EssentialUIKit/Views/Navigation/FAQPage.xaml
+++ b/EssentialUIKit/Views/Navigation/FAQPage.xaml
@@ -23,82 +23,55 @@
     <ContentPage.Content>
         <Grid RowSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <!--  Title view  -->
-            <StackLayout  x:Name="TitleView"
-                Padding="16,8"
-                Grid.Row="0"
-                BackgroundColor="{DynamicResource Gray-White}"
-                HorizontalOptions="FillAndExpand"
-                Orientation="Horizontal"
-                Spacing="0">
-
-                <StackLayout   x:Name="Title"
-                    HorizontalOptions="FillAndExpand"
-                    IsVisible="True"
-                    Orientation="Horizontal"
-                    Spacing="0"
-                    VerticalOptions="FillAndExpand">
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="64"
+                         BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
+                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
+
+                <StackLayout x:Name="Title" HorizontalOptions="FillAndExpand"  IsVisible="True"
+                             Orientation="Horizontal"  VerticalOptions="FillAndExpand"  Spacing="0">
 
                     <!--  Back button command  -->
-                    <buttons:SfButton  x:Name="backButton"
-                        Command="{Binding BackButtonCommand}"
-                        CommandParameter="{x:Reference backButton}"
-                        CornerRadius="4"
-                        Style="{StaticResource IconButtonStyle}"
-                        Text="{StaticResource Back}" />
-
-                    <!--  FAQ page Title  -->
-                    <Label   Margin="16,0"
-                        FontFamily="{StaticResource Montserrat-Medium}"
-                        FontSize="16"
-                        HorizontalOptions="CenterAndExpand"
-                        LineHeight="1.25"
-                        Text="FAQs"
-                        TextColor="{DynamicResource Gray-900}"
-                        VerticalOptions="Center"
-                        VerticalTextAlignment="Center" />
+                    <buttons:SfButton  x:Name="backButton"  Command="{Binding BackButtonCommand}"
+                                       CommandParameter="{x:Reference backButton}" CornerRadius="4"
+                                       Style="{StaticResource IconButtonStyle}" Text="{StaticResource Back}"/>
+
+                    <!--   Icon Names List page Title  -->
+                    <Label  Margin="16,0" FontFamily="{StaticResource Montserrat-Medium}" FontSize="16"
+                            HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource Gray-900}"
+                            LineHeight="1.25" Text="FAQs"  VerticalOptions="Center" VerticalTextAlignment="Center" />
 
                 </StackLayout>
 
-                <StackLayout  x:Name="Search"
-                    HorizontalOptions="EndAndExpand"
-                    IsVisible="False"
-                    Orientation="Horizontal"
-                    Spacing="0">
+                <StackLayout  x:Name="Search" HorizontalOptions="EndAndExpand" IsVisible="False"
+                                Orientation="Horizontal" Spacing="0">
 
                     <!--  Back to title layout  -->
-                    <buttons:SfButton   x:Name="BackToTitle"
-                        Clicked="BackToTitle_Clicked"
-                        Style="{StaticResource NavigationBarButtonStyle}"
-                        Text="{StaticResource Back}" />
+                    <buttons:SfButton x:Name="BackToTitle" Clicked="BackToTitle_Clicked"  Text="{StaticResource Back}"
+                                      Style="{StaticResource NavigationBarButtonStyle}" />
 
                     <!--  Rounded Search Entry  -->
                     <border:SfBorder Style="{DynamicResource SfBorderStyle}">
-
-                        <controls:BorderlessEntry  x:Name="SearchEntry"
-                            Placeholder="Search here"
-                            BindingContext="{x:Reference Questions}"
-                            HorizontalOptions="FillAndExpand"
-                            Text="{Binding SearchText, Mode=TwoWay}"
-                            Style="{StaticResource SearchEntryStyle}"/>
+                        <controls:BorderlessEntry x:Name="SearchEntry"  BindingContext="{x:Reference FAQList}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}" Placeholder="Search here"
+                                                  HorizontalOptions="FillAndExpand"  Style="{StaticResource SearchEntryStyle}"/>
                     </border:SfBorder>
-
                 </StackLayout>
 
                 <!--  Search Button  -->
-                <buttons:SfButton x:Name="SearchButton"
-                    IsVisible="True"
-                    Clicked="SearchButton_Clicked"
-                    Style="{StaticResource IconButtonStyle }"
-                    Text="{StaticResource Search}" />
-
+                <buttons:SfButton  x:Name="SearchButton" IsVisible="True" Clicked="SearchButton_Clicked" Style="{StaticResource IconButtonStyle }"
+                                   Text="{StaticResource Search}" />
             </StackLayout>
 
-            <StackLayout Grid.Row="1" Spacing="0" BackgroundColor="{DynamicResource Gray-100}">
+            <!-- Seperator -->
+            <BoxView Grid.Row="1" Style="{StaticResource SeparatorStyle}"/>
+
+            <StackLayout Grid.Row="2" Spacing="0" BackgroundColor="{DynamicResource Gray-100}">
                 
                 <!--  Header label Top Questions -->
                 <Label  Margin ="0,24,0,24"
@@ -114,7 +87,7 @@
                     HorizontalOptions="FillAndExpand" 
                     VerticalOptions="Center"/>
 
-                <controls:SearchableFAQList  x:Name="Questions"
+                <controls:SearchableFAQList  x:Name="FAQList"
                     Padding="0"
                     VerticalOptions="FillAndExpand"                                          
                     FocusBorderThickness="0" 
diff --git a/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml b/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml
new file mode 100644
index 0000000..72b49e2
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml
@@ -0,0 +1,192 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:core="clr-namespace:Syncfusion.XForms.Core;assembly=Syncfusion.Core.XForms"
+             mc:Ignorable="d"
+             x:Class="EssentialUIKit.Views.Navigation.FileExploreGridPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+
+        <Grid RowSpacing="0" ColumnSpacing="0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <StackLayout x:Name="TitleView"
+                         Padding="8"
+                         HeightRequest="64"
+                         Grid.Row="0"
+                         BackgroundColor="{DynamicResource Gray-White}"
+                         HorizontalOptions="FillAndExpand"
+                         Orientation="Horizontal"
+                         Spacing="0">
+
+                <StackLayout x:Name="Title"
+                             HorizontalOptions="FillAndExpand"
+                             IsVisible="True"
+                             Orientation="Horizontal"
+                             Spacing="0"
+                             VerticalOptions="FillAndExpand">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton x:Name="backButton"
+                                      Command="{Binding BackButtonCommand}"
+                                      CommandParameter="{x:Reference backButton}"
+                                      CornerRadius="4"
+                                      Style="{StaticResource IconButtonStyle}"
+                                      Text="{StaticResource Back}" />
+
+                    <!--  Title  -->
+                    <Label Margin="16,0"
+                           FontFamily="{StaticResource Montserrat-Medium}"
+                           FontSize="16"
+                           HorizontalOptions="CenterAndExpand"
+                           Text="File Explorer"
+                           TextColor="{DynamicResource Gray-900}"
+                           VerticalOptions="Center"
+                           VerticalTextAlignment="Center" />
+
+                </StackLayout>
+
+                <StackLayout x:Name="Search"
+                             HorizontalOptions="EndAndExpand"
+                             IsVisible="False"
+                             Orientation="Horizontal"
+                             Spacing="0">
+
+                    <!--  Back to title layout  -->
+                    <buttons:SfButton x:Name="BackToTitle"
+                                      Clicked="BackToTitle_Clicked"
+                                      Style="{StaticResource NavigationBarButtonStyle}"
+                                      Text="{StaticResource Back}" />
+
+                    <!--  Rounded Search Entry  -->
+                    <border:SfBorder Style="{DynamicResource SfBorderStyle}">
+                        <controls:BorderlessEntry x:Name="SearchEntry"
+                                                  BindingContext="{x:Reference FileExploreGrid}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}"
+                                                  HorizontalOptions="FillAndExpand"
+                                                  Placeholder="Search here"
+                                                  Style="{StaticResource SearchEntryStyle}" />
+                    </border:SfBorder>
+                </StackLayout>
+
+                <!--  Search Button  -->
+                <buttons:SfButton x:Name="SearchButton"
+                                  IsVisible="True"
+                                  Clicked="SearchButton_Clicked"
+                                  Style="{StaticResource IconButtonStyle }"
+                                  Text="{StaticResource Search}" />
+
+            </StackLayout>
+
+            <!--  Seperator  -->
+            <BoxView Grid.Row="1" Style="{StaticResource SeparatorStyle}"/>
+
+            <Grid Grid.Row="2" RowSpacing="0" ColumnSpacing="0" HeightRequest="48">
+
+                <Label Margin="16,0"
+                       Text="Folders"
+                       TextColor="{DynamicResource Gray-900}"
+                       FontSize="16"
+                       LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                       FontFamily="{DynamicResource Montserrat-SemiBold}"
+                       HorizontalOptions="Start"
+                       VerticalOptions="Center" />
+
+                <buttons:SfButton Margin="23,0" 
+                                  Text="{StaticResource Category}"
+                                  TextColor="{DynamicResource Gray-600}"
+                                  BackgroundColor="{DynamicResource Gray-White}"
+                                  FontFamily="{DynamicResource FontIcons}"
+                                  FontSize="20"
+                                  CornerRadius="4"
+                                  HorizontalOptions="End"
+                                  VerticalOptions="Center" />
+
+            </Grid>
+
+            <controls:SearchableFileExploreList x:Name="FileExploreGrid"
+                                                Grid.Row="3"
+                                                Margin="16,0"
+                                                IsScrollBarVisible="False"
+                                                AllowSwiping="True"
+                                                AutoFitMode="Height"
+                                                ItemSpacing="0,0,16,24"
+                                                SelectionGesture="Tap"
+                                                SelectionMode="Single"
+                                                VerticalOptions="FillAndExpand"
+                                                SearchText="{Binding SearchText}"
+                                                TapCommand="{Binding ItemTappedCommand}"
+                                                ItemsSource="{Binding FileExploreList}"
+                                                SelectionBackgroundColor="{DynamicResource TappedBackgroundColor}">
+
+                <controls:SearchableFileExploreList.ItemTemplate>
+                    <DataTemplate>
+                        <Grid RowSpacing="0" ColumnSpacing="0">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
+
+                            <!--  Folder Icon  -->
+                            <Label Margin="0,15,0,12"
+                                   HorizontalOptions="Center"
+                                   Text="{StaticResource FileExplorer}"
+                                   FontSize="40"
+                                   TextColor="{DynamicResource Gray-600}"
+                                   FontFamily="{DynamicResource FontIcons}"/>
+
+                            <!--  Folder Name  -->
+                            <Label Grid.Row="1"
+                                   Text="{Binding FolderName}"
+                                   TextColor="{DynamicResource Gray-900}"
+                                   FontSize="14" 
+                                   LineBreakMode="TailTruncation"
+                                   HorizontalOptions="Center"
+                                   FontFamily="{DynamicResource Montserrat-Medium}"
+                                   LineHeight="{OnPlatform Android=1.5, Default=-1}"/>
+
+                            <!--  Number of Items  -->
+                            <Label Grid.Row="2"
+                                   Margin="0,0,0,8"
+                                   Text="{Binding Items}"
+                                   TextColor="{DynamicResource Gray-700}"
+                                   FontSize="14"
+                                   LineBreakMode="TailTruncation"
+                                   HorizontalOptions="Center"
+                                   FontFamily="{DynamicResource Montserrat-Medium}"
+                                   LineHeight="{OnPlatform Android=1.5, Default=-1}"/>
+
+                        </Grid>
+                    </DataTemplate>
+                </controls:SearchableFileExploreList.ItemTemplate>
+
+                <controls:SearchableFileExploreList.LayoutManager>
+                    <listview:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=3,PhoneLandscape=5,TabletPortrait=6,TabletLandscape=8,Desktop=10}"/>
+                </controls:SearchableFileExploreList.LayoutManager>
+
+            </controls:SearchableFileExploreList>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml.cs b/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml.cs
new file mode 100644
index 0000000..90790f1
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/FileExploreGridPage.xaml.cs
@@ -0,0 +1,112 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+using EssentialUIKit.DataService;
+
+namespace EssentialUIKit.Views.Navigation
+{
+    /// <summary>
+    /// Page to display the file explorer grid.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FileExploreGridPage 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="FileExploreGridPage" /> class.
+        /// </summary>
+        public FileExploreGridPage() 
+        {
+            InitializeComponent();
+            this.BindingContext = FileExploreDataService.Instance.FileExploreViewModel;
+        }
+
+        /// <summary>
+        /// Invoked when view size is changed.
+        /// </summary>
+        /// <param name="width">The Width</param>
+        /// <param name="height">The Height</param>
+        protected override void OnSizeAllocated(double width, double height)
+        {
+            base.OnSizeAllocated(width, height);
+
+            if (width > height)
+            {
+                if (Search.IsVisible)
+                {
+                    Search.WidthRequest = width;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Invoked when search button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void SearchButton_Clicked(object sender, EventArgs e)
+        {
+            this.Search.IsVisible = true;
+            this.Title.IsVisible = false;
+
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from 0 to full width when it added to the view.
+                var expandAnimation = new Animation(
+                    property =>
+                    {
+                        Search.WidthRequest = property;
+                        opacity = property / TitleView.Width;
+                        Search.Opacity = opacity;
+                    }, 0, TitleView.Width, Easing.Linear);
+                expandAnimation.Commit(Search, "Expand", 16, 250, Easing.Linear, (p, q) => this.SearchExpandAnimationCompleted());
+            }
+        }
+
+        /// <summary>
+        /// Invoked when back to title button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void BackToTitle_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = true;
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from full width to 0 before it removed from view.
+                var shrinkAnimation = new Animation(property =>
+                {
+                    Search.WidthRequest = property;
+                    opacity = property / TitleView.Width;
+                    Search.Opacity = opacity;
+                },
+                TitleView.Width, 0, Easing.Linear);
+                shrinkAnimation.Commit(Search, "Shrink", 16, 250, Easing.Linear, (p, q) => this.SearchBoxAnimationCompleted());
+            }
+
+            SearchEntry.Text = string.Empty;
+        }
+
+        /// <summary>
+        /// Invokes when search box Animation completed.
+        /// </summary>
+        private void SearchBoxAnimationCompleted()
+        {
+            this.Search.IsVisible = false;
+            this.Title.IsVisible = true;
+        }
+
+        /// <summary>
+        /// Invokes when search expand Animation completed.
+        /// </summary>
+        private void SearchExpandAnimationCompleted()
+        {
+            this.SearchEntry.Focus();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml b/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml
new file mode 100644
index 0000000..f9b5680
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml
@@ -0,0 +1,212 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             mc:Ignorable="d"
+             x:Class="EssentialUIKit.Views.Navigation.FileExploreListPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+
+        <Grid RowSpacing="0" ColumnSpacing="0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <StackLayout x:Name="TitleView"
+                         Padding="8"
+                         HeightRequest="64"
+                         Grid.Row="0"
+                         BackgroundColor="{DynamicResource Gray-White}"
+                         HorizontalOptions="FillAndExpand"
+                         Orientation="Horizontal"
+                         Spacing="0">
+
+                <StackLayout x:Name="Title"
+                             HorizontalOptions="FillAndExpand"
+                             IsVisible="True"
+                             Orientation="Horizontal"
+                             Spacing="0"
+                             VerticalOptions="FillAndExpand">
+
+                    <!--  Back button command  -->
+                    <buttons:SfButton x:Name="backButton"
+                                      Command="{Binding BackButtonCommand}"
+                                      CommandParameter="{x:Reference backButton}"
+                                      CornerRadius="4"
+                                      Style="{StaticResource IconButtonStyle}"
+                                      Text="{StaticResource Back}" />
+
+                    <!--  File explorer list page Title  -->
+                    <Label Margin="16,0"
+                           FontFamily="{StaticResource Montserrat-Medium}"
+                           FontSize="16"
+                           HorizontalOptions="CenterAndExpand"
+                           Text="File Explorer"
+                           TextColor="{DynamicResource Gray-900}"
+                           VerticalOptions="Center"
+                           VerticalTextAlignment="Center" />
+
+                </StackLayout>
+
+                <StackLayout x:Name="Search"
+                             HorizontalOptions="EndAndExpand"
+                             IsVisible="False"
+                             Orientation="Horizontal"
+                             Spacing="0">
+
+                    <!--  Back to title layout  -->
+                    <buttons:SfButton x:Name="BackToTitle"
+                                      Clicked="BackToTitle_Clicked"
+                                      Style="{StaticResource NavigationBarButtonStyle}"
+                                      Text="{StaticResource Back}" />
+
+                    <!--  Rounded Search Entry  -->
+                    <border:SfBorder Style="{DynamicResource SfBorderStyle}">
+                        <controls:BorderlessEntry x:Name="SearchEntry"
+                                                  BindingContext="{x:Reference FileExploreList}"
+                                                  Text="{Binding SearchText, Mode=TwoWay}"
+                                                  HorizontalOptions="FillAndExpand"
+                                                  Placeholder="Search here"
+                                                  Style="{StaticResource SearchEntryStyle}" />
+                    </border:SfBorder>
+                </StackLayout>
+
+                <!--  Search Button  -->
+                <buttons:SfButton x:Name="SearchButton"
+                                  IsVisible="True"
+                                  Clicked="SearchButton_Clicked"
+                                  Style="{StaticResource IconButtonStyle }"
+                                  Text="{StaticResource Search}" />
+
+            </StackLayout>
+
+            <!-- Seperator -->
+            <BoxView Grid.Row="1" Style="{StaticResource SeparatorStyle}"/>
+
+            <Grid Grid.Row="2" RowSpacing="0" ColumnSpacing="0" HeightRequest="48">
+
+                <Label Margin="16,0"
+                       Text="Folders"
+                       TextColor="{DynamicResource Gray-900}"
+                       FontSize="16"
+                       LineHeight="{OnPlatform Android=1.5,Default=-1}"
+                       FontFamily="{DynamicResource Montserrat-SemiBold}"
+                       HorizontalOptions="Start"
+                       VerticalOptions="Center" />
+
+                <buttons:SfButton Margin="15,0" 
+                                  Text="{StaticResource Category}"
+                                  TextColor="{DynamicResource Gray-600}"
+                                  BackgroundColor="{DynamicResource Gray-White}"
+                                  FontFamily="{DynamicResource FontIcons}"
+                                  FontSize="20"
+                                  CornerRadius="4"
+                                  HorizontalOptions="End"
+                                  VerticalOptions="Center" />
+
+            </Grid>
+
+            <controls:SearchableFileExploreList x:Name="FileExploreList"
+                                                Grid.Row="3"
+                                                IsScrollBarVisible="False"
+                                                AllowSwiping="True"
+                                                AutoFitMode="Height"
+                                                ItemSpacing="0"
+                                                SelectionGesture="Tap"
+                                                SelectionMode="Single"
+                                                VerticalOptions="FillAndExpand"
+                                                SearchText="{Binding SearchText}"
+                                                TapCommand="{Binding ItemTappedCommand}"
+                                                ItemsSource="{Binding FileExploreList}"
+                                                SelectionBackgroundColor="{DynamicResource TappedBackgroundColor}">
+
+                <controls:SearchableFileExploreList.ItemTemplate>
+                    <DataTemplate>
+                        <ViewCell>
+                            <ViewCell.View>
+                                <Grid RowSpacing="0" ColumnSpacing="0">
+
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                    </Grid.RowDefinitions>
+
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="*" />
+                                    </Grid.ColumnDefinitions>
+
+                                    <!-- Folder Icon -->
+                                    <Label Margin="16,0"
+                                               Grid.RowSpan="3"
+                                               Text="{StaticResource FileExplorer}"
+                                               TextColor="{DynamicResource Gray-600}"
+                                               FontFamily="{DynamicResource FontIcons}"
+                                               FontSize="40"
+                                               VerticalOptions="Center"/>
+
+                                    <!-- Folder Name -->
+                                    <Label Margin="0,13,0,0" 
+                                               Grid.Column="1"
+                                               Text="{Binding FolderName}"
+                                               TextColor="{DynamicResource Gray-900}"
+                                               FontSize="16"
+                                               FontFamily="{DynamicResource Montserrat-Medium}"
+                                               LineHeight="{OnPlatform Android=1.5, Default=-1}"/>
+
+                                    <!-- Number of items, date and time -->
+                                    <Label Grid.Row="1" Grid.Column="1" Margin="0,0,0,14" Style="{StaticResource LabelStyle}">
+                                        <Label.FormattedText>
+                                            <FormattedString>
+                                                <Span Text="{Binding Items}" FontFamily="{DynamicResource Montserrat-Medium}" />
+                                                <Span Text=" " />
+                                                <Span Text=" | " />
+                                                <Span Text=" " />
+                                                <Span Text="{Binding DateTime}" FontFamily="{DynamicResource Montserrat-Medium}" />
+                                            </FormattedString>
+                                        </Label.FormattedText>
+                                    </Label>
+
+                                    <!-- Next Button -->
+                                    <buttons:SfButton Margin="15,0"
+                                                          Grid.RowSpan="3"
+                                                          Grid.Column="1"
+                                                          Text="{StaticResource Next}"
+                                                          TextColor="{DynamicResource Gray-600}"
+                                                          BackgroundColor="Transparent"
+                                                          FontFamily="{DynamicResource FontIcons}"
+                                                          CornerRadius="4"
+                                                          FontSize="20"
+                                                          HorizontalOptions="End"
+                                                          VerticalOptions="Center"/>
+
+                                    <!-- Seperator -->
+                                    <BoxView Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource SeparatorStyle}" />
+
+                                </Grid>
+                            </ViewCell.View>
+                        </ViewCell>
+                    </DataTemplate>
+                </controls:SearchableFileExploreList.ItemTemplate>
+            </controls:SearchableFileExploreList>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml.cs b/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml.cs
new file mode 100644
index 0000000..bcf30b3
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/FileExploreListPage.xaml.cs
@@ -0,0 +1,112 @@
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+using EssentialUIKit.DataService;
+
+namespace EssentialUIKit.Views.Navigation
+{
+    /// <summary>
+    /// Page to display the file explorer list.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class FileExploreListPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="FileExploreListPage" /> class.
+        /// </summary>
+        public FileExploreListPage()
+        {
+            InitializeComponent();
+            this.BindingContext = FileExploreDataService.Instance.FileExploreViewModel;
+        }
+
+        /// <summary>
+        /// Invoked when view size is changed.
+        /// </summary>
+        /// <param name="width">The Width</param>
+        /// <param name="height">The Height</param>
+        protected override void OnSizeAllocated(double width, double height)
+        {
+            base.OnSizeAllocated(width, height);
+
+            if (width > height)
+            {
+                if (Search.IsVisible)
+                {
+                    Search.WidthRequest = width;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Invoked when search button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void SearchButton_Clicked(object sender, EventArgs e)
+        {
+            this.Search.IsVisible = true;
+            this.Title.IsVisible = false;
+
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from 0 to full width when it added to the view.
+                var expandAnimation = new Animation(
+                    property =>
+                    {
+                        Search.WidthRequest = property;
+                        opacity = property / TitleView.Width;
+                        Search.Opacity = opacity;
+                    }, 0, TitleView.Width, Easing.Linear);
+                expandAnimation.Commit(Search, "Expand", 16, 250, Easing.Linear, (p, q) => this.SearchExpandAnimationCompleted());
+            }
+        }
+
+        /// <summary>
+        /// Invoked when back to title button is clicked.
+        /// </summary>
+        /// <param name="sender">The Sender</param>
+        /// <param name="e">Event Args</param>
+        private void BackToTitle_Clicked(object sender, EventArgs e)
+        {
+            this.SearchButton.IsVisible = true;
+            if (this.TitleView != null)
+            {
+                double opacity;
+
+                // Animating Width of the search box, from full width to 0 before it removed from view.
+                var shrinkAnimation = new Animation(property =>
+                {
+                    Search.WidthRequest = property;
+                    opacity = property / TitleView.Width;
+                    Search.Opacity = opacity;
+                },
+                TitleView.Width, 0, Easing.Linear);
+                shrinkAnimation.Commit(Search, "Shrink", 16, 250, Easing.Linear, (p, q) => this.SearchBoxAnimationCompleted());
+            }
+
+            SearchEntry.Text = string.Empty;
+        }
+
+        /// <summary>
+        /// Invokes when search box Animation completed.
+        /// </summary>
+        private void SearchBoxAnimationCompleted()
+        {
+            this.Search.IsVisible = false;
+            this.Title.IsVisible = true;
+        }
+
+        /// <summary>
+        /// Invokes when search expand Animation completed.
+        /// </summary>
+        private void SearchExpandAnimationCompleted()
+        {
+            this.SearchEntry.Focus();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/MoviesListPage.xaml b/EssentialUIKit/Views/Navigation/MoviesListPage.xaml
index 1db431f..ab20cea 100644
--- a/EssentialUIKit/Views/Navigation/MoviesListPage.xaml
+++ b/EssentialUIKit/Views/Navigation/MoviesListPage.xaml
@@ -23,12 +23,12 @@
 
         <Grid RowSpacing="0" ColumnSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64"/>
+                <RowDefinition Height="Auto"/>
                 <RowDefinition Height="1"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
 
-            <StackLayout x:Name="TitleView"  Padding="8,8" HeightRequest="48"  Grid.Row="0"
+            <StackLayout x:Name="TitleView"  Padding="8,8" HeightRequest="64"  Grid.Row="0"
                          BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
                          HorizontalOptions="FillAndExpand" Orientation="Horizontal">
 
diff --git a/EssentialUIKit/Views/Navigation/MoviesPage.xaml b/EssentialUIKit/Views/Navigation/MoviesPage.xaml
new file mode 100644
index 0000000..7e1255e
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/MoviesPage.xaml
@@ -0,0 +1,211 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             mc:Ignorable="d"
+             x:Class="EssentialUIKit.Views.Navigation.MoviesPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+
+            <DataTemplate x:Key="MovieTemplate">
+                <StackLayout Spacing="8">
+                    <border:SfBorder CornerRadius="8" BorderWidth="0" >
+                        <Image Aspect="AspectFill"
+                               BackgroundColor="{DynamicResource Gray-200}"
+                               HeightRequest="220"
+                               WidthRequest="150">
+                            <Image.Source>
+                                <UriImageSource CacheValidity="14"
+                                                CachingEnabled="true"
+                                                Uri="{Binding Image}" />
+                            </Image.Source>
+                        </Image>
+                    </border:SfBorder>
+
+                    <Label Text="{Binding MovieName}" FontFamily="{StaticResource Montserrat-SemiBold}" FontSize="14" TextColor="{DynamicResource Gray-900}" LineHeight="{OnPlatform Android=1.5, Default=-1}" LineBreakMode="TailTruncation"></Label>
+
+                    <rating:SfRating ItemCount="5" Value="{Binding MovieRating}" ItemSize="14" ItemSpacing="1" ReadOnly="True" VerticalOptions="Center" HorizontalOptions="Start">
+                        <rating:SfRating.RatingSettings>
+                            <rating:SfRatingSettings RatedFill="{StaticResource OrangeyYellow}" RatedStroke="{StaticResource OrangeyYellow}" UnRatedStroke="{StaticResource Gray-600}" UnRatedStrokeWidth="1"/>
+                        </rating:SfRating.RatingSettings>
+                    </rating:SfRating>
+
+                </StackLayout>
+            </DataTemplate>
+
+            <DataTemplate x:Key="TrailerTemplate">
+                <StackLayout Spacing="8">
+                    <border:SfBorder CornerRadius="8" BorderWidth="0">
+                        <Image
+                            Aspect="AspectFill" WidthRequest="180"
+                            BackgroundColor="{DynamicResource Gray-200}"
+                            HeightRequest="120">
+                            <Image.Source>
+                                <UriImageSource CacheValidity="14"
+                                                CachingEnabled="true"
+                                                Uri="{Binding Image}" />
+                            </Image.Source>
+                        </Image>
+                    </border:SfBorder>
+
+                    <Label Text="{Binding MovieName}" FontFamily="{StaticResource Montserrat-SemiBold}" FontSize="14" TextColor="{DynamicResource Gray-900}" LineHeight="{OnPlatform Android=1.5, Default=-1}" LineBreakMode="TailTruncation"></Label>
+
+                </StackLayout>
+            </DataTemplate>
+
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.ControlTemplate>
+        <ControlTemplate>
+            <StackLayout Spacing="0">
+                <!--  Title View  -->
+                <controls:TitleView Title="Movies" BackgroundColor="{DynamicResource Gray-White}">
+                    <controls:TitleView.TrailingView>
+                        
+                        <!--Search Button-->
+                        <buttons:SfButton Style="{StaticResource IconButtonStyle}" 
+                                  Text="{StaticResource Search}" CornerRadius="4"
+                                  Command="{Binding SearchButtonCommand}"/>
+
+                    </controls:TitleView.TrailingView>
+                </controls:TitleView> 
+                <ContentPresenter />
+            </StackLayout>
+        </ControlTemplate>
+    </ContentPage.ControlTemplate>
+
+    <ContentPage.Content>
+        
+            <ScrollView>
+                <Grid RowSpacing="0" ColumnSpacing="0">
+
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <rotator:SfRotator Grid.Row="0"
+                                       BackgroundColor="{StaticResource Transparent}"
+                                       DotsBorderColor="Transparent"
+                                       HeightRequest="210"
+                                       HorizontalOptions="StartAndExpand"
+                                       ItemsSource="{Binding RotatorMoviesList}"
+                                       NavigationDirection="Horizontal"
+                                       NavigationStripMode="Dots"
+                                       SelectedDotColor="{DynamicResource PrimaryColor}"
+                                       UnselectedDotColor="{DynamicResource Gray-200}"
+                                       VerticalOptions="Start" EnableAutoPlay="True" NavigationDelay="2000">
+                        <rotator:SfRotator.ItemTemplate>
+                            <DataTemplate>
+                                <Image
+                                    Aspect="AspectFill"
+                                    BackgroundColor="{DynamicResource Gray-200}"
+                                    HeightRequest="140">
+                                    <Image.Source>
+                                        <UriImageSource CacheValidity="14"
+                                                        CachingEnabled="true"
+                                                        Uri="{Binding Image}" />
+                                    </Image.Source>
+                                </Image>
+                            </DataTemplate>
+                        </rotator:SfRotator.ItemTemplate>
+                    </rotator:SfRotator>
+
+                    <StackLayout Grid.Row="1" 
+                                 VerticalOptions="Start" 
+                                 Orientation="Horizontal" 
+                                 Margin="16, 26, 16, 8">
+
+                        <Label Text="NOW SHOWING" 
+                               VerticalTextAlignment="Center" 
+                               FontFamily="{StaticResource Montserrat-SemiBold}" 
+                               FontSize="12" 
+                               TextColor="{DynamicResource Gray-800}" 
+                               LineHeight="{OnPlatform Android=1.25, Default=-1}"/>
+
+                        <buttons:SfButton Text="VIEW ALL" 
+                                          Command="{Binding ShowingNowViewAllCommand}" 
+                                          Style="{StaticResource ViewAllButtonStyle}"/>
+                    </StackLayout>
+
+                    <listView:SfListView Grid.Row="2" 
+                                         SelectionMode="None"
+                                         HeightRequest="280" 
+                                         ItemSize="150" 
+                                         ItemSpacing="8, 0, 8, 0" 
+                                         Orientation="Horizontal" 
+                                         IsScrollBarVisible="False"
+                                         ItemsSource="{Binding NowShowingMoviesList}" 
+                                         ItemTemplate="{StaticResource MovieTemplate}"/>
+
+                    <StackLayout Grid.Row="3" Orientation="Horizontal" Margin="16, 26, 16, 8">
+
+                        <Label Text="TRAILERS" 
+                               VerticalTextAlignment="Center" 
+                               FontFamily="{StaticResource Montserrat-SemiBold}" 
+                               FontSize="12" 
+                               TextColor="{DynamicResource Gray-800}" 
+                               LineHeight="{OnPlatform Android=1.25, Default=-1}"/>
+
+                        <buttons:SfButton Text="VIEW ALL" 
+                                          Style="{StaticResource ViewAllButtonStyle}" 
+                                          Command="{Binding TrailerViewAllCommand}"/>
+                    </StackLayout>
+
+                    <listView:SfListView Grid.Row="4"
+                                         SelectionMode="None" 
+                                         HeightRequest="180" 
+                                         ItemSize="180" 
+                                         Orientation="Horizontal" 
+                                         ItemsSource="{Binding TrailerMoviesList}" 
+                                         ItemSpacing="8, 0, 8, 0" 
+                                         ItemTemplate="{StaticResource TrailerTemplate}"
+                                         IsScrollBarVisible="False"/>
+
+                    <StackLayout Grid.Row="5" Orientation="Horizontal" Margin="16, 26, 16, 8">
+
+                        <Label Text="COMING SOON" 
+                               VerticalTextAlignment="Center"
+                               FontFamily="{StaticResource Montserrat-SemiBold}" 
+                               FontSize="12" TextColor="{DynamicResource Gray-800}" 
+                               LineHeight="{OnPlatform Android=1.25, Default=-1}"/>
+
+                        <buttons:SfButton Text="VIEW ALL" 
+                                          Style="{StaticResource ViewAllButtonStyle}" 
+                                          Command="{Binding UpcomingViewAllCommand}"/>
+                    </StackLayout>
+
+                    <listView:SfListView Grid.Row="6"
+                                         SelectionMode="None" 
+                                         HeightRequest="280" 
+                                         ItemSize="150" 
+                                         Orientation="Horizontal" 
+                                         ItemsSource="{Binding UpcomingMoviesList}" 
+                                         ItemSpacing="8, 0, 8, 0" 
+                                         ItemTemplate="{StaticResource MovieTemplate}"
+                                         IsScrollBarVisible="False"/>
+
+                </Grid>
+            </ScrollView>
+            
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/MoviesPage.xaml.cs b/EssentialUIKit/Views/Navigation/MoviesPage.xaml.cs
new file mode 100644
index 0000000..68e47ef
--- /dev/null
+++ b/EssentialUIKit/Views/Navigation/MoviesPage.xaml.cs
@@ -0,0 +1,19 @@
+using System;
+using EssentialUIKit.DataService;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Navigation
+{
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class MoviesPage : ContentPage
+    {
+        public MoviesPage()
+        {
+            InitializeComponent();
+            this.BindingContext = MoviesDataService.Instance.MoviesPageViewModel;
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/NamesListPage.xaml b/EssentialUIKit/Views/Navigation/NamesListPage.xaml
index 2c8cb40..cceb1f8 100644
--- a/EssentialUIKit/Views/Navigation/NamesListPage.xaml
+++ b/EssentialUIKit/Views/Navigation/NamesListPage.xaml
@@ -25,12 +25,12 @@
 
         <Grid RowSpacing="0" ColumnSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64"/>
-                <RowDefinition Height="1"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
 
-            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0"
+            <StackLayout x:Name="TitleView"  Padding="8,8" Grid.Row="0" HeightRequest="64"
                          BackgroundColor="{DynamicResource Gray-White}" Spacing="0"
                          HorizontalOptions="FillAndExpand" Orientation="Horizontal">
 
diff --git a/EssentialUIKit/Views/Navigation/NavigationTileCardPage.xaml b/EssentialUIKit/Views/Navigation/NavigationTileCardPage.xaml
index b32a598..f4189c8 100644
--- a/EssentialUIKit/Views/Navigation/NavigationTileCardPage.xaml
+++ b/EssentialUIKit/Views/Navigation/NavigationTileCardPage.xaml
@@ -30,7 +30,7 @@
             <!--  Title View  -->
             <controls:TitleView Title="Home" Grid.Row="0" />
 
-            <Grid Grid.Row="1" Padding="{core:OnPlatformOrientationThickness Default='16,0,11,0', TabletPortrait='24,16,20,0', TabletLandscape='24,16,20,0', Desktop='24,24,20,0'}">
+            <Grid Grid.Row="1" Padding="{core:OnPlatformOrientationThickness Default='11,0', TabletPortrait='20,16,20,0', TabletLandscape='20,16,20,0', Desktop='20,24,20,0'}">
 
                 <listView:SfListView
                     AutoFitMode="Height"
@@ -46,7 +46,7 @@
                             <ViewCell>
                                 <!--  View of each tile item  -->
                                 <controls:CustomShadowFrame
-                                    Margin="0,2,5,5"
+                                    Margin="5,2,5,5"
                                     Padding="0"
                                     BackgroundColor="{DynamicResource Gray-White}"
                                     BorderColor="{DynamicResource Gray-White}"
diff --git a/EssentialUIKit/Views/Navigation/PhotosPage.xaml b/EssentialUIKit/Views/Navigation/PhotosPage.xaml
index 6bf716b..3802216 100644
--- a/EssentialUIKit/Views/Navigation/PhotosPage.xaml
+++ b/EssentialUIKit/Views/Navigation/PhotosPage.xaml
@@ -87,7 +87,7 @@
                 <listView:SfListView.ItemTemplate>
                     <DataTemplate>
                         <Grid BackgroundColor="{DynamicResource Gray-200}">
-                            <Image Aspect="Fill"
+                            <Image Aspect="AspectFill"
                                    BackgroundColor="{DynamicResource Gray-200}"
                                    HeightRequest="90" 
                                    WidthRequest="114">
diff --git a/EssentialUIKit/Views/Navigation/RestaurantPage.xaml b/EssentialUIKit/Views/Navigation/RestaurantPage.xaml
index ad53f68..d57e0d3 100644
--- a/EssentialUIKit/Views/Navigation/RestaurantPage.xaml
+++ b/EssentialUIKit/Views/Navigation/RestaurantPage.xaml
@@ -25,14 +25,14 @@
 
         <Grid RowSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="64" />
-                <RowDefinition Height="1" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <StackLayout x:Name="TitleView"
                 Padding="16,8"
-                Grid.Row="0"
+                Grid.Row="0" HeightRequest="64"
                 BackgroundColor="{DynamicResource Gray-White}"
                 HorizontalOptions="FillAndExpand"
                 Orientation="Horizontal"
diff --git a/EssentialUIKit/Views/Navigation/SongsPage.xaml b/EssentialUIKit/Views/Navigation/SongsPage.xaml
index 7ece8e6..af28a1d 100644
--- a/EssentialUIKit/Views/Navigation/SongsPage.xaml
+++ b/EssentialUIKit/Views/Navigation/SongsPage.xaml
@@ -24,15 +24,16 @@
 
         <Grid >
             <Grid.RowDefinitions>
-                <RowDefinition Height="64" />
-                <RowDefinition Height="1" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <StackLayout
-                x:Name="TitleView"
+                x:Name="TitleView" 
                 Padding="16,8"
                 Grid.Row="0"
+                HeightRequest="64"
                 BackgroundColor="{DynamicResource Gray-White}"
                 HorizontalOptions="FillAndExpand"
                 Orientation="Horizontal"
diff --git a/EssentialUIKit/Views/Navigation/SongsPlayListPage.xaml b/EssentialUIKit/Views/Navigation/SongsPlayListPage.xaml
index 1c04511..c0bbe79 100644
--- a/EssentialUIKit/Views/Navigation/SongsPlayListPage.xaml
+++ b/EssentialUIKit/Views/Navigation/SongsPlayListPage.xaml
@@ -24,13 +24,14 @@
     <ContentPage.Content>
         <Grid >
             <Grid.RowDefinitions>
-                <RowDefinition Height="64" />
+                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
             <StackLayout x:Name="TitleView"
                 Padding="16,8"
                 Grid.Row="0"
+                HeightRequest="64"
                 BackgroundColor="{DynamicResource Gray-White}"
                 HorizontalOptions="FillAndExpand"
                 Orientation="Horizontal"
diff --git a/EssentialUIKit/Views/Navigation/Styles.xaml b/EssentialUIKit/Views/Navigation/Styles.xaml
index 27f727c..a41c2dd 100644
--- a/EssentialUIKit/Views/Navigation/Styles.xaml
+++ b/EssentialUIKit/Views/Navigation/Styles.xaml
@@ -12,6 +12,7 @@
     <Color x:Key="TappedBackgroundColor">#eaeaea</Color>
     <Color x:Key="Transparent">Transparent</Color>
     <Color x:Key="LightGreen">#35c659</Color>
+    <Color x:Key="OrangeyYellow">#fcbc0f</Color>
     
     <x:String x:Key="Rating">&#xe70c;</x:String>
     <x:String x:Key="Back">&#xe709;</x:String>
@@ -34,6 +35,8 @@
     <x:String x:Key="Calendar">&#xe742;</x:String>
     <x:String x:Key="Account">&#xe70e;</x:String>
     <x:String x:Key="MoreIcon">&#xe715;</x:String>
+    <x:String x:Key="Category">&#xe733;</x:String>
+    <x:String x:Key="FileExplorer">&#xe74a;</x:String>
 
     <!-- Common style for rating labels -->
     <Style x:Key="RatingLabelStyle" TargetType="Label">
@@ -226,7 +229,7 @@
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
-    
+
     <!--  Common style for icon buttons  -->
     <Style x:Key="IconButton" TargetType="Label">
         <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
@@ -249,7 +252,19 @@
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
         <Setter Property="HeightRequest" Value="34" />
         <Setter Property="WidthRequest" Value="34" />
-        <Setter Property="HorizontalOptions" Value="End" />
+    </Style>
+
+    <!--  Common style for next  SfButton  -->
+    <Style x:Key="ViewAllButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource HyperLink}" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-SemiBold}" />
+        <Setter Property="HeightRequest" Value="38" />
+        <Setter Property="HorizontalOptions" Value="EndAndExpand" />
+        <Setter Property="Margin" Value="16,0,0,0"/>
     </Style>
 
     <!--  Common style for labels  -->
@@ -281,8 +296,7 @@
         <Setter Property="FontSize" Value="12" />
         <Setter Property="CornerRadius" Value="16" />
         <Setter Property="HorizontalOptions" Value="End"/>
-        <Setter Property="WidthRequest" Value="88"/>
-        
+
     </Style>
 
 </ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Navigation/SuggestionPage.xaml b/EssentialUIKit/Views/Navigation/SuggestionPage.xaml
index e0658aa..4c948f1 100644
--- a/EssentialUIKit/Views/Navigation/SuggestionPage.xaml
+++ b/EssentialUIKit/Views/Navigation/SuggestionPage.xaml
@@ -154,10 +154,11 @@
                                         </StackLayout>
 
                                         <!--  Suggestion button  -->
-                                        <buttons:SfButton Grid.Column="2"  Margin="0,20" 
+                                        <buttons:SfButton x:Name="follow" Grid.Column="2"  Margin="0,20" 
                                             Command="{Binding Path=BindingContext.SuggestionCommand, Source={x:Reference Suggestions}}" 
+                                            CommandParameter="{x:Reference follow}" 
                                             Style="{StaticResource SfButtonStyle}" CornerRadius="24"
-                                            Text="FOLLOW" />
+                                            Text="FOLLOW" WidthRequest="100"/>
 
                                     </Grid>
                                     <BoxView Style="{StaticResource SeparatorStyle}" />
diff --git a/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml b/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml
new file mode 100644
index 0000000..827cb31
--- /dev/null
+++ b/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml
@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             x:Class="EssentialUIKit.Views.Notification.ECommerceNotificationPage"
+             x:Name="eCommerceNotificationPage"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+            <converter:BooleanToColorConverter x:Key="BoolToColorConverter" />
+            <converter:StringToGlyphConverter x:Key="GlyphConverter" />
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.ControlTemplate>
+        <ControlTemplate>
+            <StackLayout Spacing="0">
+
+                <!--  Title View  -->
+                <controls:TitleView Title="Notifications" BackgroundColor="{DynamicResource Gray-White} ">
+
+                    <!-- Back button -->
+                    <controls:TitleView.LeadingView>
+                        <buttons:SfButton Text="{StaticResource Back}" Style="{StaticResource IconButtonStyle}" CornerRadius="4"
+                                          Command="{Binding Path=BindingContext.BackCommand, Source={x:Reference eCommerceNotificationPage}}" />
+                    </controls:TitleView.LeadingView>
+
+                    <!-- More button -->
+                    <controls:TitleView.TrailingView>
+                        <buttons:SfButton Text="{StaticResource More}" Style="{StaticResource IconButtonStyle}" CornerRadius="4"
+                                          Command="{Binding Path=BindingContext.MenuCommand, Source={x:Reference eCommerceNotificationPage}}" />
+                    </controls:TitleView.TrailingView>
+
+                </controls:TitleView>
+                <ContentPresenter />
+
+            </StackLayout>
+        </ControlTemplate>
+    </ContentPage.ControlTemplate>
+
+    <ContentPage.Content>
+        <StackLayout Spacing="0">
+
+            <listView:SfListView x:Name="ECommerceNotifications"
+                                 IsScrollBarVisible="False"
+                                 AllowSwiping="True"
+                                 AutoFitMode="Height"
+                                 ItemSpacing="0"
+                                 SelectionGesture="Tap"
+                                 SelectionMode="Single"
+                                 VerticalOptions="FillAndExpand"
+                                 TapCommand="{Binding ItemTappedCommand}"
+                                 ItemsSource="{Binding ECommerceNotificationsList}"
+                                 SelectionBackgroundColor="Transparent">
+
+                <listView:SfListView.ItemTemplate>
+                    <DataTemplate>
+                        <ViewCell>
+                            <Grid RowSpacing="0" ColumnSpacing="0" 
+                                  BackgroundColor="{Binding IsRead, Converter={x:StaticResource BoolToColorConverter}, ConverterParameter=7}">
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto"/>
+                                    <RowDefinition Height="Auto"/>
+                                    <RowDefinition Height="Auto"/>
+                                </Grid.RowDefinitions>
+
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                </Grid.ColumnDefinitions>
+
+                                <!-- Circular Border for icons  -->
+                                <border:SfBorder Grid.RowSpan="3" 
+                                                 Margin="8,16,16,0"
+                                                 BackgroundColor="{Binding BackgroundColor}"
+                                                 BorderWidth="0"
+                                                 VerticalOptions="StartAndExpand"
+                                                 CornerRadius="24">
+
+                                    <Label x:Name="NotificationIcon"
+                                           Text="{Binding NotificationIcon, Converter={StaticResource GlyphConverter}, ConverterParameter={x:Reference NotificationIcon}}" 
+                                           HorizontalTextAlignment="Center"
+                                           VerticalTextAlignment="Center"
+                                           TextColor="{DynamicResource Gray-White}"
+                                           FontFamily="{DynamicResource FontIcons}"
+                                           FontSize="25"
+                                           HeightRequest="48" 
+                                           WidthRequest="48">
+
+                                        <Label.Resources>
+                                            <ResourceDictionary>
+                                                <ResourceDictionary.MergedDictionaries>
+                                                    <ResourceDictionary Source="Styles.xaml" />
+                                                </ResourceDictionary.MergedDictionaries>
+                                            </ResourceDictionary>
+                                        </Label.Resources>
+
+                                    </Label>
+
+                                </border:SfBorder>
+
+                                <!-- Description -->
+                                <Label Grid.Column="1"
+                                       Margin="0,16,16,4"
+                                       Text="{Binding Description}" 
+                                       TextColor="{DynamicResource Gray-900}"
+                                       FontSize="16"
+                                       LineHeight="{OnPlatform Android=1.5,Default=-1}"
+                                       LineBreakMode="WordWrap"
+                                       FontFamily="{DynamicResource Montserrat-Medium}" />
+
+                                <!-- Time -->
+                                <Label Grid.Row="1"
+                                       Grid.Column="1"
+                                       Margin="0,0,0,16"
+                                       Text="{Binding Time}"
+                                       TextColor="{DynamicResource Gray-700}"
+                                       FontSize="12"
+                                       LineHeight="{OnPlatform Android=1.5,Default=-1}"
+                                       FontFamily="{DynamicResource Montserrat-Medium}" />
+
+                                <!-- Seperator -->
+                                <BoxView Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource SeparatorStyle}" />
+
+                            </Grid>
+                        </ViewCell>
+                    </DataTemplate>
+                </listView:SfListView.ItemTemplate>
+            </listView:SfListView>
+        </StackLayout>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml.cs b/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml.cs
new file mode 100644
index 0000000..ac6f0f5
--- /dev/null
+++ b/EssentialUIKit/Views/Notification/ECommerceNotificationPage.xaml.cs
@@ -0,0 +1,24 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+using EssentialUIKit.DataService;
+
+namespace EssentialUIKit.Views.Notification
+{
+    /// <summary>
+    /// Page to display E-Commerce notifications list.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class ECommerceNotificationPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ECommerceNotificationPage" /> class.
+        /// </summary>
+        public ECommerceNotificationPage()
+        {
+            InitializeComponent();
+            this.BindingContext = ECommerceNotificationDataService.Instance.ECommerceNotificationViewModel;
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Notification/Styles.xaml b/EssentialUIKit/Views/Notification/Styles.xaml
index d7ac2e3..1bb505b 100644
--- a/EssentialUIKit/Views/Notification/Styles.xaml
+++ b/EssentialUIKit/Views/Notification/Styles.xaml
@@ -11,6 +11,10 @@
     <x:String x:Key="Back">&#xe709;</x:String>
     <x:String x:Key="More">&#xe719;</x:String>
     <x:String x:Key="New Message">&#xe720;</x:String>
+    <x:String x:Key="Delivered">&#xe741;</x:String>
+    <x:String x:Key="Offer">&#xe736;</x:String>
+    <x:String x:Key="FlashSale">&#xe743;</x:String>
+    <x:String x:Key="Arrived">&#xe740;</x:String>
 
     <!--  Common style for icon buttons  -->
     <Style x:Key="IconButtonStyle" TargetType="buttons:SfButton">
diff --git a/EssentialUIKit/Views/Profile/HealthProfilePage.xaml b/EssentialUIKit/Views/Profile/HealthProfilePage.xaml
new file mode 100644
index 0000000..9a3b80d
--- /dev/null
+++ b/EssentialUIKit/Views/Profile/HealthProfilePage.xaml
@@ -0,0 +1,200 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:svg="clr-namespace:EssentialUIKit.Controls"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Profile"
+             x:Class="EssentialUIKit.Views.Profile.HealthProfilePage"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <!--  Binding context for Health Profile Page  -->
+    <ContentPage.BindingContext>
+        <viewModel:HealthProfileViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <ScrollView>
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+
+                <Grid RowSpacing="0" HeightRequest="361">
+
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <gradient:SfGradientView Grid.RowSpan="3">
+                        <gradient:SfGradientView.BackgroundBrush>
+                            <gradient:SfLinearGradientBrush>
+                                <gradient:SfLinearGradientBrush.GradientStops>
+                                    <gradient:SfGradientStop Color="{StaticResource Dull-Red}" Offset="0.0"/>
+                                    <gradient:SfGradientStop Color="{StaticResource Deep-Purple}" Offset="1.0"/>
+                                </gradient:SfLinearGradientBrush.GradientStops>
+                            </gradient:SfLinearGradientBrush>
+                        </gradient:SfGradientView.BackgroundBrush>
+                    </gradient:SfGradientView>
+
+                    <!-- Profile Image -->
+                    <border:SfBorder Margin="0,56,0,8"
+                                     HeightRequest="120"
+                                     WidthRequest="120"
+                                     CornerRadius="60"
+                                     BorderWidth="2"
+                                     HorizontalOptions="CenterAndExpand"
+                                     VerticalOptions="StartAndExpand"
+                                     BorderColor="{DynamicResource Gray-White}"
+                                     BackgroundColor="{DynamicResource Gray-White}">
+
+                        <Image Aspect="AspectFill"
+                               BackgroundColor="{DynamicResource Gray-White}">
+                            <Image.Source>
+                                <UriImageSource Uri="{Binding ProfileImage}"
+                                                CacheValidity="14"
+                                                CachingEnabled="True"/>
+                            </Image.Source>
+                        </Image>
+
+                    </border:SfBorder>
+
+                    <!-- Profile Name -->
+                    <Label Grid.Row="1"
+                           Margin="0,0,0,2"
+                           Text="{Binding ProfileName}"
+                           TextColor="{DynamicResource Gray-White}"
+                           FontSize="20"
+                           FontFamily="{DynamicResource Montserrat-SemiBold}"
+                           HorizontalOptions="CenterAndExpand"
+                           VerticalOptions="StartAndExpand"
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+                    <!-- State and Country -->
+                    <Label Grid.Row="2"
+                           TextColor="{DynamicResource Gray-White}"
+                           FontSize="12"
+                           FontFamily="{DynamicResource Montserrat-Medium}"
+                           HorizontalOptions="CenterAndExpand"
+                           VerticalOptions="StartAndExpand"
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}">
+                        <Label.FormattedText>
+                            <FormattedString>
+                                <Span Text="{Binding State}"/>
+                                <Span Text=" "/>
+                                <Span Text="{Binding Country}"/>
+                            </FormattedString>
+                        </Label.FormattedText>
+                    </Label>
+                </Grid>
+
+                <border:SfBorder Grid.Row="1" Margin="0,-69,0,0" Padding="0,61,0,0" BackgroundColor="{DynamicResource Gray-100}" CornerRadius="14,14,0,0"
+                                 VerticalOptions="Start" BorderWidth="0">
+                    <listView:SfListView SelectionMode="None" ItemSpacing="16,8" ItemSize="74" IsScrollingEnabled="False" AutoFitMode="Height"
+                                         ItemsSource="{Binding CardItems}">
+                        <listView:SfListView.ItemTemplate>
+                            <DataTemplate>
+                                <cards:SfCardView CornerRadius="4" BorderWidth="0" HasShadow="True" WidthRequest="{OnIdiom Phone=343, Default=736}"
+                                                  HorizontalOptions="CenterAndExpand" BackgroundColor="{DynamicResource Gray-White}">
+                                    <Grid RowSpacing="0" Padding="16">
+
+                                        <Grid.RowDefinitions>
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="*" />
+                                        </Grid.RowDefinitions>
+
+                                        <!-- Category -->
+                                        <Label Text="{Binding CategoryValue}" Style="{StaticResource LabelStyle}" />
+
+                                        <!-- Category Value -->
+                                        <Label Grid.Row="1" FontSize="12" Style="{StaticResource LabelStyle}" 
+                                               FontFamily="{DynamicResource Montserrat-Medium}" 
+                                               TextColor="{DynamicResource Gray-700}" HeightRequest="18" Text="{Binding Category}" />
+
+                                        <!-- Category Image -->
+                                        <svg:SVGImage Grid.RowSpan="2" 
+                                                      BackgroundColor="Transparent"
+                                                      Source="{Binding ImagePath}"
+                                                      HorizontalOptions="End"
+                                                      VerticalOptions="Center"
+                                                      WidthRequest="32" 
+                                                      HeightRequest="31" />
+
+                                    </Grid>
+                                </cards:SfCardView>
+                            </DataTemplate>
+                        </listView:SfListView.ItemTemplate>
+                    </listView:SfListView>
+                </border:SfBorder>
+
+                <cards:SfCardView Grid.Row="0" CornerRadius="4" VerticalOptions="End" Margin="16,0,16,24"  BorderWidth="0" HasShadow="True"  
+                                 BackgroundColor="{DynamicResource Gray-White}" HorizontalOptions="CenterAndExpand" WidthRequest="{OnIdiom Phone=343, Default=736}" >
+                   
+                    <Grid RowSpacing="0" ColumnSpacing="0" WidthRequest="{OnIdiom Phone=343, Default=480}" 
+                          HeightRequest="90">
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition />
+                            <RowDefinition />
+                        </Grid.RowDefinitions>
+
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition />
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition />
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition />
+                        </Grid.ColumnDefinitions>
+
+                        <!-- Age -->
+                        <Label Text="{Binding Age}" Style="{StaticResource LabelStyle}" HorizontalOptions="Center"
+                               VerticalOptions="End" />
+
+                        <Label Grid.Row="1" FontSize="12" Text="Age" Style="{StaticResource LabelStyle}" 
+                               HorizontalOptions="Center" VerticalOptions="Start"
+                               FontFamily="{DynamicResource Montserrat-Medium}" TextColor="{DynamicResource Gray-700}" />
+
+                        <!-- Seperator -->
+                        <BoxView Grid.Column="1" Style="{StaticResource BoxViewStyle}" Grid.RowSpan="2" />
+
+                        <!-- Weight -->
+                        <Label Grid.Row="0" Grid.Column="2" Text="{Binding Weight}" Style="{StaticResource LabelStyle}"
+                                HorizontalOptions="Center" VerticalOptions="End" />
+
+                        <Label Grid.Row="1" Grid.Column="2" Text="Weight" FontSize="12" Style="{StaticResource LabelStyle}" 
+                               FontFamily="{DynamicResource Montserrat-Medium}" TextColor="{DynamicResource Gray-700}" 
+                               HorizontalOptions="Center" VerticalOptions="Start" />
+
+                        <!-- Seperator -->
+                        <BoxView Grid.Column="3" Style="{StaticResource BoxViewStyle}" Grid.RowSpan="2" />
+
+                        <!-- Height -->
+                        <Label Grid.Row="0" Grid.Column="4" Text="{Binding Height}" HorizontalOptions="Center" 
+                               VerticalOptions="End" Style="{StaticResource LabelStyle}" />
+
+                        <Label Grid.Row="1" Grid.Column="4" Text="Height" FontSize="12" HorizontalOptions="Center"
+                               VerticalOptions="Start" Style="{StaticResource LabelStyle}" FontFamily="{DynamicResource Montserrat-Medium}" 
+                               TextColor="{DynamicResource Gray-700}" />
+
+                    </Grid>
+                </cards:SfCardView>
+            </Grid>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Profile/HealthProfilePage.xaml.cs b/EssentialUIKit/Views/Profile/HealthProfilePage.xaml.cs
new file mode 100644
index 0000000..7acaf50
--- /dev/null
+++ b/EssentialUIKit/Views/Profile/HealthProfilePage.xaml.cs
@@ -0,0 +1,22 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Profile
+{
+    /// <summary>
+    /// Page to show the health profile.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class HealthProfilePage : ContentPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="HealthProfilePage" /> class.
+        /// </summary>
+        public HealthProfilePage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Profile/Styles.xaml b/EssentialUIKit/Views/Profile/Styles.xaml
index 5f7de02..7cdd58c 100644
--- a/EssentialUIKit/Views/Profile/Styles.xaml
+++ b/EssentialUIKit/Views/Profile/Styles.xaml
@@ -7,6 +7,9 @@
     xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms">
 
     <Color x:Key="Transparent">Transparent</Color>
+    <Color x:Key="Dull-Red">#c04848</Color>
+    <Color x:Key="Deep-Purple">#480048</Color>
+    
     <x:String x:Key="Edit">&#xe727;</x:String>
     <x:String x:Key="Next">&#xe71a;</x:String>
     <x:String x:Key="Home">&#xe706;</x:String>
@@ -94,4 +97,21 @@
         <Setter Property="BackgroundColor" Value="{DynamicResource Gray-200}" />
     </Style>
 
+    <!-- Common style for labels -->
+    <Style x:Key="LabelStyle" TargetType="Label">
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-SemiBold}" />
+        <Setter Property="FontSize" Value="16"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-900}"/>
+        <Setter Property="HeightRequest" Value="24"/>
+        <Setter Property="LineHeight" Value="{OnPlatform Android=1.5, Default=-1}"/>
+    </Style>
+
+    <!--Common boxview style-->
+    <Style x:Key="BoxViewStyle" TargetType="BoxView">
+        <Setter Property="WidthRequest" Value="1"/>
+        <Setter Property="HeightRequest" Value="24"/>
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-400}"/>
+        <Setter Property="VerticalOptions" Value="Center"/>
+    </Style>
+    
 </ResourceDictionary>
diff --git a/EssentialUIKit/Views/Settings/SettingPage.xaml b/EssentialUIKit/Views/Settings/SettingPage.xaml
index 7e2343f..1f1f70a 100644
--- a/EssentialUIKit/Views/Settings/SettingPage.xaml
+++ b/EssentialUIKit/Views/Settings/SettingPage.xaml
@@ -442,7 +442,7 @@
                     HeightRequest="40"
                     HorizontalOptions="Center"
                     Style="{StaticResource RoundButtonStyle}"
-                    Text="LOGOUT"
+                    Text="LOG OUT"
                     TextColor="{DynamicResource Gray-White}"
                     WidthRequest="245" />
 
diff --git a/EssentialUIKit/Views/Settings/SettingPage.xaml.cs b/EssentialUIKit/Views/Settings/SettingPage.xaml.cs
index 0db1681..5b04caf 100644
--- a/EssentialUIKit/Views/Settings/SettingPage.xaml.cs
+++ b/EssentialUIKit/Views/Settings/SettingPage.xaml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Social/SocialProfileWithCardPage.xaml b/EssentialUIKit/Views/Social/SocialProfileWithCardPage.xaml
index a869ded..446a273 100644
--- a/EssentialUIKit/Views/Social/SocialProfileWithCardPage.xaml
+++ b/EssentialUIKit/Views/Social/SocialProfileWithCardPage.xaml
@@ -114,9 +114,9 @@
                             </StackLayout>
 
                             <!--  Follow button  -->
-                            <buttons:SfButton
+                            <buttons:SfButton x:Name="follow"
+                                Command="{Binding FollowCommand}" CommandParameter="{x:Reference follow}"
                                 Margin="0,0,0,16"
-                                Command="{Binding FollowCommand}"
                                 Style="{StaticResource SfGradientButtonStyle}"
                                 Text="FOLLOW" />
 
diff --git a/EssentialUIKit/Views/Social/SocialProfileWithConnectionsPage.xaml b/EssentialUIKit/Views/Social/SocialProfileWithConnectionsPage.xaml
index f85a97c..6566d95 100644
--- a/EssentialUIKit/Views/Social/SocialProfileWithConnectionsPage.xaml
+++ b/EssentialUIKit/Views/Social/SocialProfileWithConnectionsPage.xaml
@@ -284,7 +284,7 @@
                                     HeightRequest="90"
                                     WidthRequest="104" >
                                     <Image.Source>
-                                        <UriImageSource Uri="{Binding .}" 
+                                        <UriImageSource Uri="{Binding ImagePath}" 
 			                                 CacheValidity="14" 
 			                                 CachingEnabled="true"/>
                                     </Image.Source>
diff --git a/EssentialUIKit/Views/Social/SocialProfileWithInterestsPage.xaml b/EssentialUIKit/Views/Social/SocialProfileWithInterestsPage.xaml
index f2d97ad..d845ecd 100644
--- a/EssentialUIKit/Views/Social/SocialProfileWithInterestsPage.xaml
+++ b/EssentialUIKit/Views/Social/SocialProfileWithInterestsPage.xaml
@@ -144,11 +144,11 @@
                     </StackLayout>
                     
                     <!--Follow button-->
-                    <buttons:SfButton
+                    <buttons:SfButton x:Name="follow"
+                        Command="{Binding FollowCommand}" CommandParameter="{x:Reference follow}"
                         Grid.RowSpan="2"
                         Grid.Column="1"
                         VerticalOptions="End"
-                        Command="{Binding FollowCommand}"
                         Margin="24,0,0,0"
                         Style="{StaticResource SfGradientButtonStyle}"
                         Text="FOLLOW" />
@@ -294,7 +294,7 @@
                             <Grid BackgroundColor="{DynamicResource Gray-F0}">
                                 <!--Photos-->
                                 <Image 
-                                    Source="{Binding .}" 
+                                    Source="{Binding ImagePath}" 
                                     Aspect="AspectFill"
                                     HeightRequest="90"
                                     BackgroundColor="{DynamicResource Gray-200}"
diff --git a/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml b/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml
new file mode 100644
index 0000000..786dbeb
--- /dev/null
+++ b/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml
@@ -0,0 +1,376 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage x:Class="EssentialUIKit.Views.Social.SocialProfileWithMessagePage"
+             xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+             xmlns:core="clr-namespace:Syncfusion.XForms.Core;assembly=Syncfusion.Core.XForms"
+             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:listviewBahavior="clr-namespace:EssentialUIKit.Behaviors"
+             xmlns:local="clr-namespace:EssentialUIKit.Views.Social.Templates"
+             xmlns:viewModel="clr-namespace:EssentialUIKit.ViewModels.Social"
+             BackgroundColor="{DynamicResource Gray-White}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <!-- Binding context for social profile with message page -->
+    <ContentPage.BindingContext>
+        <viewModel:SocialProfileViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Content>
+        <ScrollView>
+
+            <Grid RowSpacing="0" ColumnSpacing="0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+
+                <Grid Grid.Row="0" RowSpacing="0" ColumnSpacing="0">
+
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+
+                    <!-- Background image -->
+                    <Image Grid.RowSpan="4" Grid.ColumnSpan="2" Aspect="AspectFill"
+                           BackgroundColor="{DynamicResource Gray-White}">
+                        <Image.Source>
+                            <UriImageSource Uri="{Binding BackgroundImage}" 
+			                                CacheValidity="14" 
+			                                CachingEnabled="true"/>
+                        </Image.Source>
+                    </Image>
+
+                    <!-- Title View -->
+                    <Grid Grid.Row="0" Grid.ColumnSpan="2" RowSpacing="0" ColumnSpacing="0" HeightRequest="60">
+
+                        <buttons:SfButton Margin="8,0"
+                                          Text="{StaticResource Back}"
+                                          CornerRadius="4"
+                                          Style="{StaticResource IconButtonStyle}"
+                                          HorizontalOptions="Start"
+                                          VerticalOptions="Center" />
+
+                        <Label Text="Profile Page"
+                               TextColor="{DynamicResource Gray-White}"
+                               FontSize="16"
+                               FontFamily="{DynamicResource Montserrat-Medium}"
+                               LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                               HorizontalOptions="Center"
+                               VerticalOptions="Center" />
+
+                        <buttons:SfButton Margin="8,0"
+                                          Text="{StaticResource Settings}"
+                                          CornerRadius="4"
+                                          Style="{StaticResource IconButtonStyle}"
+                                          HorizontalOptions="End"
+                                          VerticalOptions="Center" />
+
+                    </Grid>
+
+                    <!-- Seperator -->
+                    <BoxView Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="1" BackgroundColor="Transparent" />
+
+                    <border:SfBorder Grid.Row="2"
+                                     Grid.Column="0"
+                                     Margin="16,8,16,52"
+                                     BackgroundColor="{DynamicResource Gray-White}"
+                                     BorderColor="White"
+                                     BorderWidth="2"
+                                     CornerRadius="10"
+                                     HeightRequest="80"
+                                     HorizontalOptions="StartAndExpand"
+                                     VerticalOptions="StartAndExpand"
+                                     WidthRequest="80">
+
+                        <!-- Profile image -->
+                        <Image Aspect="AspectFill"
+                               BackgroundColor="{DynamicResource Gray-White}"
+                               HeightRequest="80"
+                               WidthRequest="80">
+                            <Image.Source>
+                                <UriImageSource Uri="{Binding ProfileImage}" 
+			                                    CacheValidity="14" 
+			                                    CachingEnabled="true"/>
+                            </Image.Source>
+                        </Image>
+
+                    </border:SfBorder>
+
+                    <StackLayout Grid.Row="2"
+                                 Grid.Column="1"
+                                 Padding="0"
+                                 Spacing="0"
+                                 Margin="0,8,0,32">
+
+                        <!-- Profile name -->
+                        <Label FontFamily="{StaticResource Montserrat-SemiBold}"
+                               FontSize="16"
+                               HorizontalOptions="StartAndExpand"
+                               HeightRequest="24"
+                               LineHeight="{OnPlatform Default=-1,Android=1.5}"
+                               Text="{Binding ProfileName}"
+                               TextColor="{DynamicResource Gray-White}" />
+
+                        <StackLayout Margin="0,0,0,16"
+                                     HorizontalOptions="StartAndExpand"
+                                     HeightRequest="18"
+                                     Orientation="Horizontal"
+                                     Spacing="5">
+
+                            <!-- Designation -->
+                            <Label Style="{StaticResource ContentLabelStyle}" TextColor="{DynamicResource Gray-White}" Text="{Binding Designation}" />
+
+                            <BoxView Style="{StaticResource BoxViewStyle}" BackgroundColor="{DynamicResource Gray-White}" />
+
+                            <!-- State and country -->
+                            <Label Style="{StaticResource ContentLabelStyle}" TextColor="{DynamicResource Gray-White}">
+                                <Label.FormattedText>
+                                    <FormattedString>
+                                        <Span Text="{Binding State}" />
+                                        <Span Text=" " />
+                                        <Span Text="{Binding Country}" />
+                                    </FormattedString>
+                                </Label.FormattedText>
+                            </Label>
+                        </StackLayout>
+
+                        <Grid ColumnSpacing="32" RowSpacing="0">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+
+                            <!-- Posts count -->
+                            <Label Grid.Row="0"
+                                   Grid.Column="0"
+                                   HeightRequest="24"
+                                   Style="{StaticResource FollowerCountLabelStyle}"
+                                   Text="{Binding PostsCount}" 
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                            <!-- Posts title -->
+                            <Label Grid.Row="1"
+                                   Grid.Column="0"
+                                   HeightRequest="18"
+                                   Style="{StaticResource FollowerTitleLabelStyle}"
+                                   Text="Posts"
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                            <!-- Followers count -->
+                            <Label Grid.Row="0"
+                                   Grid.Column="1"
+                                   HeightRequest="24"
+                                   Style="{StaticResource FollowerCountLabelStyle}"
+                                   Text="{Binding FollowersCount}"
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                            <!-- Followers title -->
+                            <Label Grid.Row="1"
+                                   Grid.Column="1"
+                                   HeightRequest="18"
+                                   Style="{StaticResource FollowerTitleLabelStyle}"
+                                   Text="Followers"
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                            <!-- Following count -->
+                            <Label Grid.Row="0"
+                                   Grid.Column="2"
+                                   HeightRequest="24"
+                                   Style="{StaticResource FollowerCountLabelStyle}"
+                                   Text="{Binding FollowingCount}"
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                            <!-- Following title -->
+                            <Label Grid.Row="1"
+                                   Grid.Column="2"
+                                   HeightRequest="18"
+                                   Style="{StaticResource FollowerTitleLabelStyle}"
+                                   Text="Following"
+                                   TextColor="{DynamicResource Gray-White}" />
+
+                        </Grid>
+
+                    </StackLayout>
+
+                    <StackLayout Grid.Row="3" Grid.ColumnSpan="2" Spacing="16" Margin="16,0,16,44" Orientation="Horizontal" >
+
+                        <!-- Follow button -->
+                        <buttons:SfButton x:Name="follow"
+                            Command="{Binding FollowCommand}" CommandParameter="{x:Reference follow}"
+                            WidthRequest="155" 
+                            Style="{StaticResource SfGradientButtonStyle}"
+                            CornerRadius="1"
+                            Text="FOLLOW" HorizontalTextAlignment="Center"
+                            VerticalTextAlignment="Center"/>
+
+                        <!-- Message button -->
+                        <buttons:SfButton Command="{Binding MessageCommand}" 
+                            Style="{StaticResource SquareButtonStyle}" 
+                            WidthRequest="155"
+                            Text="MESSAGE" TextColor="{DynamicResource Gray-900}" 
+                            FontSize="14" FontFamily="{DynamicResource Montserrat-SemiBold}" 
+                            HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
+
+                    </StackLayout>
+
+                </Grid>
+
+                <Grid Grid.Row="1" RowSpacing="0" ColumnSpacing="0">
+
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- About title -->
+                    <Label Grid.Row="0"
+                           Text="About" 
+                           FontSize="14"                     
+                           Margin="16,24,16,8" 
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                           Style="{StaticResource TitleLabelStyle}"/>
+
+                    <!-- About -->
+                    <Label Grid.Row="1"
+                           Text="{Binding About}" 
+                           FontSize="12" 
+                           FontFamily="{StaticResource Montserrat-Medium}"
+                           LineHeight="{OnPlatform Default=-1, Android=1.5}"
+                           Margin="16,0,16,24" 
+                           HorizontalOptions="Start" 
+                           HorizontalTextAlignment="Start" 
+                           TextColor="{DynamicResource Gray-700}" />
+
+                    <!-- Connections title -->
+                    <Label Grid.Row="2"
+                           Text="CONNECTIONS"
+                           FontSize="12"                     
+                           Margin="16,0" 
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                           TextColor="{DynamicResource Gray-800}"
+                           Style="{StaticResource TitleLabelStyle}"/>
+
+                    <StackLayout Orientation="Horizontal" Grid.Row="3" Spacing="0">
+
+                        <Button Margin="16,16,16,0"
+                                        Padding="16"
+                                        BackgroundColor="{DynamicResource Gray-100}"
+                                        Command="{Binding AddConnectionCommand}"
+                                        CornerRadius="32" 
+                                        HeightRequest="64" 
+                                        WidthRequest="64"
+                                        FontFamily="{StaticResource FontIcons}"
+                                        FontSize="25"
+                                        Text="{StaticResource Add}"
+                                        TextColor="{DynamicResource Gray-600}"
+                                        VerticalOptions="StartAndExpand"
+                                        HorizontalOptions="Start"/>
+                        
+                        <listView:SfListView 
+                              HeightRequest="100"
+                              Margin="0,0,0,25"
+                              Padding="0"
+                              AutoFitMode="DynamicHeight"
+                              ColumnSpacing="0"
+                              HorizontalOptions="FillAndExpand"
+                              IsScrollBarVisible="False"
+                              ItemSpacing="0"
+                              ItemsSource="{Binding Connections}"
+                              Orientation="Horizontal"
+                              RowSpacing="0"
+                              IsStickyHeader="False"
+                              SelectionBackgroundColor="Transparent"
+                              TapCommand="{Binding ProfileSelectedCommand}"
+                              VerticalOptions="StartAndExpand">
+
+                            <listView:SfListView.ItemTemplate>
+                                <DataTemplate>
+                                    <local:ProfileTemplate />
+                                </DataTemplate>
+                            </listView:SfListView.ItemTemplate>
+
+                        </listView:SfListView>
+
+                    </StackLayout>
+
+                    <!-- Photos title -->
+                    <Label Grid.Row="4"
+                           Text="PHOTOS"
+                           FontSize="12"                     
+                           Margin="16,0,16,16" 
+                           LineHeight="{OnPlatform Android=1.5, Default=-1}"
+                           TextColor="{DynamicResource Gray-800}"
+                           Style="{StaticResource TitleLabelStyle}"/>
+
+                    <listView:SfListView Grid.Row="5"
+                                         AutoFitMode="Height"
+                                         Margin="16,0,0,0"
+                                         IsScrollBarVisible="False"
+                                         ItemSpacing="0,0,16,16"
+                                         ItemsSource="{Binding Pictures}"
+                                         SelectionBackgroundColor="Transparent"
+                                         TapCommand="{Binding ImageTapCommand}">
+
+                        <listView:SfListView.Behaviors>
+                            <listviewBahavior:SfListViewExtendHeightBehavior />
+                        </listView:SfListView.Behaviors>
+
+                        <listView:SfListView.ItemTemplate>
+                            <DataTemplate>
+                                <Grid>
+
+                                    <!-- Photos -->
+                                    <Image Aspect="AspectFill"
+                                           BackgroundColor="{DynamicResource Gray-200}"
+                                           HeightRequest="90"
+                                           WidthRequest="104" >
+                                        <Image.Source>
+                                            <UriImageSource Uri="{Binding ImagePath}" 
+			                                                CacheValidity="14" 
+			                                                CachingEnabled="true"/>
+                                        </Image.Source>
+                                    </Image>
+
+                                </Grid>
+                            </DataTemplate>
+                        </listView:SfListView.ItemTemplate>
+
+                        <listView:SfListView.LayoutManager>
+                            <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=3, PhoneLandscape=5, TabletPortrait=6, TabletLandscape=10, Desktop=10}" />
+                        </listView:SfListView.LayoutManager>
+
+                    </listView:SfListView>
+                </Grid>
+            </Grid>
+        </ScrollView>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml.cs b/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml.cs
new file mode 100644
index 0000000..e77fdbe
--- /dev/null
+++ b/EssentialUIKit/Views/Social/SocialProfileWithMessagePage.xaml.cs
@@ -0,0 +1,22 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Social
+{
+    /// <summary>
+    /// Page to show the social profile.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class SocialProfileWithMessagePage : ContentPage
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="SocialProfileWithMessagePage" /> class.
+        /// </summary>
+        public SocialProfileWithMessagePage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Social/Styles.xaml b/EssentialUIKit/Views/Social/Styles.xaml
index 65991b9..3bff48d 100644
--- a/EssentialUIKit/Views/Social/Styles.xaml
+++ b/EssentialUIKit/Views/Social/Styles.xaml
@@ -10,6 +10,7 @@
     <!--  Font Icon Text  -->
     <x:String x:Key="Add">&#xe730;</x:String>
     <x:String x:Key="Settings">&#xe72b;</x:String>
+    <x:String x:Key="Back">&#xe709;</x:String>
 
     <!--Common shadow frame style-->
     <Style x:Key="ShadowFrameStyle" TargetType="control:CustomShadowFrame">
@@ -105,4 +106,24 @@
         </Setter>        
     </Style>
 
+    <!--  Common style for icon buttons  -->
+    <Style x:Key="IconButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="VerticalTextAlignment" Value="Center" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="WidthRequest" Value="40" />
+    </Style>
+
+    <!--  Common style for square buttons  -->
+    <Style x:Key="SquareButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="BackgroundColor" Value="{DynamicResource Gray-White}" />
+        <Setter Property="WidthRequest" Value="163" />
+        <Setter Property="CornerRadius" Value="1" />
+        <Setter Property="BorderWidth" Value="0"/>
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml b/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml
new file mode 100644
index 0000000..ac924e0
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<StackLayout        
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+    xmlns:converter="clr-namespace:EssentialUIKit.Converters"
+    x:Class="EssentialUIKit.Views.Templates.ArticleActivityTemplate"
+    x:Name="articleActivityTemplate">
+
+    <StackLayout.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+            <converter:BooleanToStringConverter x:Key="boolToStringConverter" />
+            <converter:BooleanToColorConverter x:Key="boolToColorConverter" />
+        </ResourceDictionary>
+    </StackLayout.Resources>
+
+    <StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand"  Margin="0,8,16,8">
+
+        <!--  Bookmark Button  -->
+        <buttons:SfButton
+            Command="{Binding Path=ParentBindingContext.BookmarkCommand, Source={x:Reference articleActivityTemplate}}"
+            CommandParameter="{Binding .}" 
+            CornerRadius="4" Style="{StaticResource NavigationBarButtonStyle}"
+            Text="{Binding IsBookmarked, Converter={StaticResource boolToStringConverter}, 
+            ConverterParameter=0}" WidthRequest="35"  />
+
+        <!--  Bookmarked Count  -->
+        <Label Text="{Binding BookmarkedCount}" Margin="0,0,10,0" Style="{StaticResource ActivityCount}" />
+
+        <!--  Favourite Icon  -->
+        <buttons:SfButton
+            Command="{Binding ParentBindingContext.AddFavouriteCommand, Source={x:Reference articleActivityTemplate}}"
+            CommandParameter="{Binding}" CornerRadius="4" Style="{StaticResource NavigationBarButtonStyle}" WidthRequest="35" 
+            Text="{Binding IsFavourite, Converter={StaticResource boolToStringConverter}, ConverterParameter=1}"
+            TextColor="{Binding IsFavourite, Converter={x:StaticResource boolToColorConverter}, ConverterParameter=4}" />
+
+        <!--  Favourites Count  -->
+        <Label Text="{Binding FavouritesCount}" Margin="0,0,10,0" Style="{StaticResource ActivityCount}" />
+
+        <!--  Share Icon  -->
+        <buttons:SfButton Text="{StaticResource Share}" Style="{StaticResource NavigationBarButtonStyle}" CornerRadius="4"
+                          x:Name="shareButton" Command="{Binding Path=ParentBindingContext.ShareCommand, Source={x:Reference articleActivityTemplate}}"
+                          CommandParameter="{Binding .}" WidthRequest="35" Margin="0" Padding="0"   />
+        <!--  Shared Count  -->
+        <Label Text="{Binding SharedCount}" Style="{StaticResource ActivityCount}"/>
+    </StackLayout>
+    
+</StackLayout>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml.cs
new file mode 100644
index 0000000..4b56759
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/ArticleActivityTemplate.xaml.cs
@@ -0,0 +1,39 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Templates
+{
+    /// <summary>
+    /// article activity template.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class ArticleActivityTemplate : StackLayout
+    {
+        /// <summary>
+        /// Bindable property to set the parent bindingcontext.
+        /// </summary>
+        public static BindableProperty ParentBindingContextProperty =
+         BindableProperty.Create(nameof(ParentBindingContext), typeof(object),
+         typeof(ArticleActivityTemplate), null);
+
+        /// <summary>
+        /// Gets or sets the parent bindingcontext.
+        /// </summary>
+        public object ParentBindingContext
+        {
+            get { return GetValue(ParentBindingContextProperty); }
+            set { SetValue(ParentBindingContextProperty, value); }
+        }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ArticleActivityTemplate"/> class.
+        /// </summary>
+        public ArticleActivityTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/ArticleListTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ArticleListTemplate.xaml.cs
index b5e8832..96e65b2 100644
--- a/EssentialUIKit/Views/Templates/ArticleListTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/ArticleListTemplate.xaml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/ArticleTileTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ArticleTileTemplate.xaml.cs
index f634def..f96952e 100644
--- a/EssentialUIKit/Views/Templates/ArticleTileTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/ArticleTileTemplate.xaml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml b/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml
new file mode 100644
index 0000000..7985322
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Grid xmlns="http://xamarin.com/schemas/2014/forms"
+      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+      xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
+      xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+      x:Class="EssentialUIKit.Views.Templates.BookingReviewTemplate">
+    <Grid.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Grid.Resources>
+
+    <Grid.RowDefinitions>
+        <RowDefinition Height="Auto" />
+        <RowDefinition Height="Auto" />
+        <RowDefinition Height="Auto" />
+    </Grid.RowDefinitions>
+
+    <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="*" />
+    </Grid.ColumnDefinitions>
+
+    <!--  Profile Image  -->
+    <border:SfBorder
+        CornerRadius="24"
+        HeightRequest="48"
+        Style="{StaticResource SfBorderStyle}"
+        WidthRequest="48">
+        <Image BackgroundColor="{DynamicResource Gray-200}">
+            <Image.Source>
+                <UriImageSource
+                    CacheValidity="14"
+                    CachingEnabled="true"
+                    Uri="{Binding CustomerImage}" />
+            </Image.Source>
+        </Image>
+    </border:SfBorder>
+
+    <StackLayout
+        Grid.Column="1"
+        Margin="0"
+        Padding="16,0,0,0"
+        Orientation="Horizontal"
+        Spacing="0"
+        VerticalOptions="Center">
+
+        <StackLayout
+            Margin="0"
+            Padding="0"
+            Spacing="0"
+            VerticalOptions="Start">
+
+            <!--  Customer Name  -->
+            <Label
+                FontFamily="{StaticResource Montserrat-SemiBold}"
+                Style="{StaticResource LabelStyle}"
+                Text="{Binding CustomerName}"
+                TextColor="{DynamicResource Gray-900}" />
+
+            <!--  Commented Date  -->
+            <Label
+                FontFamily="{StaticResource Montserrat-Regular}"
+                FontSize="12"
+                Style="{StaticResource LabelStyle}"
+                Text="{Binding ReviewedDate, StringFormat='{}{0:dd MMM, yyyy}'}" />
+        </StackLayout>
+
+        <!--  Product rating  -->
+        <rating:SfRating
+            HorizontalOptions="EndAndExpand"
+            RatingSettings="{StaticResource RatingSettings}"
+            Style="{StaticResource SfRatingStyle}"
+            VerticalOptions="Start"
+            Value="{Binding Rating}">
+            <rating:SfRating.Triggers>
+                <DataTrigger
+                    Binding="{Binding Rating}"
+                    TargetType="rating:SfRating"
+                    Value="0">
+                    <Setter Property="IsVisible" Value="False" />
+                </DataTrigger>
+            </rating:SfRating.Triggers>
+        </rating:SfRating>
+    </StackLayout>
+
+    <!--  Product images  -->
+    <StackLayout
+        Grid.Row="1"
+        Grid.ColumnSpan="2"
+        BindableLayout.ItemsSource="{Binding Images}"
+        Orientation="Horizontal"
+        Spacing="8">
+        <BindableLayout.ItemTemplate>
+            <DataTemplate>
+                <Image
+                    Margin="0,8,0,0"
+                    Aspect="AspectFill"
+                    BackgroundColor="{DynamicResource Gray-200}"
+                    HeightRequest="50"
+                    WidthRequest="60">
+                    <Image.Source>
+                        <UriImageSource
+                            CacheValidity="14"
+                            CachingEnabled="true"
+                            Uri="{Binding .}" />
+                    </Image.Source>
+                </Image>
+            </DataTemplate>
+        </BindableLayout.ItemTemplate>
+    </StackLayout>
+
+    <!--  Product Review  -->
+    <Label
+        Grid.Row="2"
+        Grid.ColumnSpan="2"
+        Margin="0,0,0,16"
+        FontFamily="{StaticResource Montserrat-Medium}"
+        FontSize="14"
+        LineHeight="{OnPlatform Android=1.25,
+                                Default=-1}"
+        Style="{StaticResource LabelStyle}"
+        Text="{Binding Comment}" />
+
+</Grid>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml.cs b/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml.cs
new file mode 100644
index 0000000..c99d881
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/BookingReviewTemplate.xaml.cs
@@ -0,0 +1,22 @@
+using System.Text;
+using System.Threading.Tasks;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Templates
+{
+    /// <summary>
+    /// Review template.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class BookingReviewTemplate : Grid
+    {
+        public BookingReviewTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/EventListTemplate.xaml b/EssentialUIKit/Views/Templates/EventListTemplate.xaml
new file mode 100644
index 0000000..3b781ac
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/EventListTemplate.xaml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Grid xmlns="http://xamarin.com/schemas/2014/forms"
+      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+      xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+      xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+      xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+      xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
+      x:Class="EssentialUIKit.Views.Templates.EventListTemplate">
+
+    <Grid.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Grid.Resources>
+
+    <Grid RowSpacing="0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+
+        <Image Grid.Row="0"
+            Aspect="AspectFill"
+            BackgroundColor="{DynamicResource Gray-200}"
+            HeightRequest="280" >
+            <Image.Source>
+                <UriImageSource
+                    CacheValidity="14"
+                    CachingEnabled="true"
+                    Uri="{Binding ImagePath}"/>
+            </Image.Source>
+        </Image>
+
+        <buttons:SfButton                
+             x:Name="favouriteIcon"   
+             Text="{StaticResource Favourite}"  FontSize="18"  
+             Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference favouriteIcon}}"                                                     
+             CommandParameter="{x:Reference favouriteIcon}"                    
+             Grid.Row="0" Margin="0,5,5,0" CornerRadius="20"
+             FontFamily="{StaticResource FontIcons}"
+             TextColor="{StaticResource Gray-White}" BackgroundColor="Transparent"
+             WidthRequest="40"
+             HeightRequest="40"
+             HorizontalOptions="End" VerticalOptions="Start">
+        </buttons:SfButton>
+
+        <Grid Grid.Row="1"  Padding="8,18" ColumnSpacing="0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <!--  Card view for displaying items  -->
+            <border:SfBorder CornerRadius="6" Margin="0" HasShadow="False" BorderColor="Transparent" WidthRequest="40" HeightRequest="40">
+                <border:SfBorder.Content>
+                    <Grid>
+                        <gradient:SfGradientView>
+                            <gradient:SfGradientView.BackgroundBrush>
+                                <gradient:SfLinearGradientBrush>
+                                    <gradient:SfLinearGradientBrush.GradientStops>
+                                        <gradient:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                                        <gradient:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                                    </gradient:SfLinearGradientBrush.GradientStops>
+                                </gradient:SfLinearGradientBrush>
+                            </gradient:SfGradientView.BackgroundBrush>
+                        </gradient:SfGradientView>
+
+                        <StackLayout  Spacing="0" Margin="0,3,0,0">
+
+                            <!--  Event month label  -->
+                            <Label Text="{Binding EventMonth}"  TextColor="{StaticResource Gray-White}" 
+                                   FontSize="12"  FontFamily="{StaticResource Montserrat-SemiBold}" 
+                                    HorizontalOptions="Center" />
+                            <!--  Event event label  -->
+                            <Label Text="{Binding EventDate}"  TextColor="{StaticResource Gray-White}" 
+                                   FontSize="12"  FontFamily="{StaticResource Montserrat-SemiBold}" 
+                                   HorizontalOptions="Center" />
+                        </StackLayout>
+
+                    </Grid>
+                </border:SfBorder.Content>
+            </border:SfBorder>
+
+            <StackLayout Margin="8,0,0,0" Grid.Column="1" Spacing="4" >
+
+                <!--  Event name label  -->
+                <Label Text="{Binding EventName}"  FontSize="16" FontFamily="{StaticResource Montserrat-SemiBold}" 
+                       HorizontalOptions="Start" TextColor="{DynamicResource Gray-900}" LineBreakMode="NoWrap"/>
+
+                <!--  Event time label  -->
+                <Label  Text="{Binding EventTime}"  FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                        HorizontalOptions="Start" TextColor="{DynamicResource Gray-700}"/>
+
+            </StackLayout>
+
+            <!-- Menu button -->
+            <buttons:SfButton HorizontalOptions="End" Margin="0" WidthRequest="{OnIdiom Phone=30,Default=40}" VerticalOptions="Center"
+                 Grid.Column="2"
+                 Style="{StaticResource MoreButton}"
+                 Text="{StaticResource More}" />
+        </Grid>
+    </Grid>
+</Grid>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/EventListTemplate.xaml.cs b/EssentialUIKit/Views/Templates/EventListTemplate.xaml.cs
new file mode 100644
index 0000000..6e1ebe4
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/EventListTemplate.xaml.cs
@@ -0,0 +1,19 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Templates
+{
+    /// <summary>
+    /// Event list template.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class EventListTemplate : Grid
+    {       
+        public EventListTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml b/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml
new file mode 100644
index 0000000..114327c
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Grid xmlns="http://xamarin.com/schemas/2014/forms"
+      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+      xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
+      xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
+      xmlns:gradient ="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+      x:Class="EssentialUIKit.Views.Templates.ExpenseChartTemplate">
+
+    <Grid.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Grid.Resources>
+
+    <Grid RowSpacing="0" ColumnSpacing="0" HeightRequest="409">
+
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <gradient:SfGradientView Grid.RowSpan="4">
+            <gradient:SfGradientView.BackgroundBrush>
+                <gradient:SfLinearGradientBrush>
+                    <gradient:SfLinearGradientBrush.GradientStops>
+                        <gradient:SfGradientStop Color="{DynamicResource Liliac}" Offset="0.0" />
+                        <gradient:SfGradientStop Color="{DynamicResource Purpleish-Blue}" Offset="1.0" />
+                    </gradient:SfLinearGradientBrush.GradientStops>
+                </gradient:SfLinearGradientBrush>
+            </gradient:SfGradientView.BackgroundBrush>
+        </gradient:SfGradientView>
+
+        <!-- Title -->
+        <Label Margin="0,28,0,12" 
+               Text="Wallet" 
+               TextColor="{DynamicResource Gray-White}"
+               FontSize="16"
+               FontFamily="{DynamicResource Montserrat-Medium}"
+               HorizontalOptions="Center"
+               LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+        <!-- Total balance -->
+        <Label Grid.Row="1"
+               Margin="16,16,16,4" 
+               Text="Total Balance"
+               TextColor="{DynamicResource Gray-White}"
+               FontSize="12"
+               FontFamily="{DynamicResource Montserrat-Medium}"
+               LineHeight="{OnPlatform Android=1.5, Default=-1}" />
+
+        <Label Grid.Row="2" 
+               Margin="16,0,16,32"
+               TextColor="{DynamicResource Gray-White}"
+               FontSize="24"
+               FontFamily="{DynamicResource Montserrat-Bold}"
+               LineHeight="{OnPlatform Android=1.5, Default=-1}">
+            <Label.FormattedText>
+                <FormattedString>
+                    <Span Text="$" />
+                    <Span Text="{Binding TotalBalance}" />
+                </FormattedString>
+            </Label.FormattedText>
+        </Label>
+
+        <StackLayout Grid.Row="1" 
+                     Grid.RowSpan="2"
+                     Margin="0,16,16,51"
+                     Padding="8,5"
+                     HorizontalOptions="End"
+                     VerticalOptions="Start"
+                     WidthRequest="{OnPlatform Android=90, Default=94}"
+                     HeightRequest="32">
+            <combobox:SfComboBox SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 
+                                 SelectedItem="{Binding DataSource[0], Mode=OneTime}" 
+                                 ShowBorder="False" MultiSelectMode="None" IsEditableMode="False"
+                                 TextColor="{DynamicResource Gray-White}" HorizontalOptions="Start" TextSize="14"
+                                 VerticalOptions="Start" FontFamily="{DynamicResource Montserrat-Medium}"
+                                 DisplayMemberPath="Duration" DataSource="{Binding DataSource}">
+                <combobox:SfComboBox.DropDownButtonSettings>
+                    <combobox:DropDownButtonSettings>
+                        <combobox:DropDownButtonSettings.View>
+                            <Label FontFamily="{StaticResource FontIcons}"
+                                   FontSize="20"
+                                   HorizontalTextAlignment="Center"
+                                   Text="{StaticResource DropDownButtonIcon}"
+                                   TextColor="{DynamicResource Gray-White}"
+                                   VerticalTextAlignment="Center" />
+                        </combobox:DropDownButtonSettings.View>
+                    </combobox:DropDownButtonSettings>
+                </combobox:SfComboBox.DropDownButtonSettings>
+            </combobox:SfComboBox>
+        </StackLayout>
+
+        <!-- Income and expense chart -->
+        <chart:SfChart Grid.Row="3" Margin="10,0,10,26" HorizontalOptions="FillAndExpand" 
+                       VerticalOptions="FillAndExpand" BackgroundColor="{DynamicResource Transparent}">
+
+            <chart:SfChart.PrimaryAxis>
+                <chart:CategoryAxis ShowMajorGridLines="False" Interval="1">
+                    <chart:CategoryAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle Margin="0,8,0,0" TextColor="{DynamicResource Gray-White}" FontSize="12" 
+                                                   FontFamily="{DynamicResource Montserrat-Medium}" />
+                    </chart:CategoryAxis.LabelStyle>
+                    <chart:CategoryAxis.AxisLineStyle>
+                        <chart:ChartLineStyle StrokeWidth="0" />
+                    </chart:CategoryAxis.AxisLineStyle>
+                    <chart:CategoryAxis.MajorTickStyle>
+                        <chart:ChartAxisTickStyle TickSize="0" StrokeWidth="0" />
+                    </chart:CategoryAxis.MajorTickStyle>
+                </chart:CategoryAxis>
+            </chart:SfChart.PrimaryAxis>
+
+            <chart:SfChart.SecondaryAxis>
+                <chart:NumericalAxis Minimum="0" Maximum="100" Interval="10" ShowMinorGridLines="False" IsVisible="False" 
+                                     ShowMajorGridLines="False">
+                    <chart:NumericalAxis.AxisLineStyle>
+                        <chart:ChartLineStyle StrokeWidth="0" />
+                    </chart:NumericalAxis.AxisLineStyle>
+                </chart:NumericalAxis>
+            </chart:SfChart.SecondaryAxis>
+
+            <chart:SfChart.Legend>
+                <chart:ChartLegend ToggleSeriesVisibility="True" Margin="0,29,0,0" DockPosition="Bottom" IconWidth="8" IconHeight="8" 
+                                   Orientation="Horizontal">
+                    <chart:ChartLegend.LabelStyle>
+                        <chart:ChartLegendLabelStyle Margin="10,0,24,0" TextColor="{DynamicResource Gray-White}" 
+                                                     FontSize="12" FontFamily="{DynamicResource Montserrat-Medium}" />
+                    </chart:ChartLegend.LabelStyle>
+                </chart:ChartLegend>
+            </chart:SfChart.Legend>
+
+            <chart:SfChart.Series>
+                <chart:StackingColumn100Series Width="0.1" CornerRadius="4" ItemsSource="{Binding ChartData}"
+                                               XBindingPath="XValue" YBindingPath="Expense" Label="Expense" Color="{DynamicResource Lemon-Lime}" 
+                                               LegendIcon="Circle" EnableTooltip="False" EnableAnimation="True" />
+
+                <chart:StackingColumn100Series Width="0.1" CornerRadius="4" ItemsSource="{Binding ChartData}" XBindingPath="XValue" 
+                                               YBindingPath="GapValue" Color="Transparent" IsVisibleOnLegend="False" />
+
+                <chart:StackingColumn100Series Width="0.1" CornerRadius="4" ItemsSource="{Binding ChartData}" XBindingPath="XValue" 
+                                               YBindingPath="Income" Label="Income" Color="{DynamicResource Bright-Cyan}" 
+                                               LegendIcon="Circle" EnableTooltip="False" EnableAnimation="True" />
+            </chart:SfChart.Series>
+
+        </chart:SfChart>
+    </Grid>
+</Grid>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml.cs
new file mode 100644
index 0000000..291f34c
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/ExpenseChartTemplate.xaml.cs
@@ -0,0 +1,22 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Templates
+{
+    /// <summary>
+    /// Navigation tile template.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class ExpenseChartTemplate : Grid
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ExpenseChartTemplate"/> class.
+        /// </summary>
+		public ExpenseChartTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/NavigationListTemplate.xaml.cs b/EssentialUIKit/Views/Templates/NavigationListTemplate.xaml.cs
index 67acb77..3684865 100644
--- a/EssentialUIKit/Views/Templates/NavigationListTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/NavigationListTemplate.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/NavigationTileTemplate.xaml.cs b/EssentialUIKit/Views/Templates/NavigationTileTemplate.xaml.cs
index 60e0739..dd5d059 100644
--- a/EssentialUIKit/Views/Templates/NavigationTileTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/NavigationTileTemplate.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/OrderHistoryTemplate.xaml.cs b/EssentialUIKit/Views/Templates/OrderHistoryTemplate.xaml.cs
index 155b4a2..2625fce 100644
--- a/EssentialUIKit/Views/Templates/OrderHistoryTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/OrderHistoryTemplate.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/ProductListTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ProductListTemplate.xaml.cs
index 71d802b..caf80ef 100644
--- a/EssentialUIKit/Views/Templates/ProductListTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/ProductListTemplate.xaml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/ProductTileTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ProductTileTemplate.xaml.cs
index de94427..b546483 100644
--- a/EssentialUIKit/Views/Templates/ProductTileTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/ProductTileTemplate.xaml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/ReviewTemplate.xaml.cs b/EssentialUIKit/Views/Templates/ReviewTemplate.xaml.cs
index fd3d4a9..5ee9211 100644
--- a/EssentialUIKit/Views/Templates/ReviewTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/ReviewTemplate.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml b/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml
new file mode 100644
index 0000000..232d5f6
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Grid xmlns="http://xamarin.com/schemas/2014/forms" 
+      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+      xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+      x:Class="EssentialUIKit.Views.Templates.SocialIconTemplate">
+
+    <Grid.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Grid.Resources>
+
+
+    <Grid   WidthRequest="160" HorizontalOptions="Center" Margin="0,24"  ColumnSpacing="0" >
+
+        <buttons:SfButton    BackgroundColor="{DynamicResource FacebookLogin}" HorizontalOptions="Start"
+                                            Style="{StaticResource SocialIconButtonStyle}"  Command="{Binding FaceBookLoginCommand}"
+                                            Text="{StaticResource FaceBook}" TextColor="{StaticResource Gray-White}"/>
+
+        <buttons:SfButton   BackgroundColor="{DynamicResource TwitterBlue}" HorizontalOptions="Center"
+                                            Style="{StaticResource SocialIconButtonStyle}"  Command="{Binding TwitterLoginCommand}"
+                                            Text="{StaticResource Twitter}" />
+
+        <buttons:SfButton  BackgroundColor="{DynamicResource Red}" HorizontalOptions="End"
+                                            Style="{StaticResource SocialIconButtonStyle}"  Command="{Binding GmailLoginCommand}"
+                                            Text="{StaticResource Google}"/>
+
+    </Grid>
+</Grid>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml.cs b/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml.cs
new file mode 100644
index 0000000..1a07a2a
--- /dev/null
+++ b/EssentialUIKit/Views/Templates/SocialIconTemplate.xaml.cs
@@ -0,0 +1,19 @@
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Templates
+{
+    /// <summary>
+    /// Social icon template.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class SocialIconTemplate : Grid
+    {
+        public SocialIconTemplate()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Templates/Styles.xaml b/EssentialUIKit/Views/Templates/Styles.xaml
index a0e6636..8bd04c0 100644
--- a/EssentialUIKit/Views/Templates/Styles.xaml
+++ b/EssentialUIKit/Views/Templates/Styles.xaml
@@ -6,12 +6,26 @@
     xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
     xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
     xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
-    xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms">
+    xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
+    xmlns:graphics="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms">
 
     <Color x:Key="Gold">#fcbc0f</Color>
+    <Color x:Key="Steel">#788396</Color>
+    <Color x:Key="FacebookBlue">#4267B2</Color>
+    <Color x:Key="FacebookLogin">#3b5998</Color>
+    <Color x:Key="TwitterBlue">#55acee</Color>
+    <Color x:Key="Red">#dc4e41</Color>
+    <Color x:Key="Transparent">Transparent</Color>
+
     <x:String x:Key="Rating">&#xe70c;</x:String>
     <x:String x:Key="ArrowRight">&#xe728;</x:String>
     <x:String x:Key="DropDownButtonIcon">&#xe70b;</x:String>
+    <x:String x:Key="More">&#xe719;</x:String>
+    <x:String x:Key="Favourite">&#xe701;</x:String>
+    <x:String x:Key="FaceBook">&#xe70f;</x:String>
+    <x:String x:Key="Google">&#xe74d;</x:String>
+    <x:String x:Key="Twitter">&#xe749;</x:String>
+    <x:String x:Key="Share">&#xe704;</x:String>
 
     <!--  Common style for Navigation bar SfButton  -->
     <Style x:Key="NavigationBarButtonStyle" TargetType="buttons:SfButton">
@@ -21,7 +35,6 @@
         <Setter Property="HorizontalOptions" Value="Fill" />
         <Setter Property="BackgroundColor" Value="Transparent" />
         <Setter Property="BorderWidth" Value="0" />
-        <Setter Property="FontAttributes" Value="Bold" />
         <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
     </Style>
 
@@ -139,4 +152,69 @@
         <Setter Property="FontSize" Value="16" />
     </Style>
 
+    <!--  Common style for More  SfButton  -->
+    <Style x:Key="MoreButton" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="WidthRequest" Value="38" />
+        <Setter Property="HeightRequest" Value="38" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="End" />
+        <Setter Property="BackgroundColor" Value="Transparent" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+    </Style>
+
+    <!--  Common style for buttons  -->
+    <Style x:Key="ButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="BackgroundGradient">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush>
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                        <graphics:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Common style for buttons  -->
+    <Style x:Key="SfBorderLabelStyle" TargetType="border:SfBorder">
+        <Setter Property="BackgroundColor">
+            <Setter.Value>
+                <graphics:SfLinearGradientBrush>
+                    <graphics:SfLinearGradientBrush.GradientStops>
+                        <graphics:SfGradientStop Offset="0" Color="{DynamicResource PrimaryColor}" />
+                        <graphics:SfGradientStop Offset="1" Color="{DynamicResource PrimaryGradient}" />
+                    </graphics:SfLinearGradientBrush.GradientStops>
+                </graphics:SfLinearGradientBrush>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="CornerRadius" Value="16" />
+    </Style>
+
+    <!--  Common style for social icon SfButton  -->
+    <Style x:Key="SocialIconButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="CornerRadius" Value="22" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="Center" />
+        <Setter Property="VerticalTextAlignment" Value="Center" />
+        <Setter Property="HorizontalTextAlignment" Value="Center" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}"/>
+    </Style>
+
+    <!--  Common style for activity count  -->
+    <Style x:Key="ActivityCount" TargetType="Label">
+        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-Medium}"/>
+        <Setter Property="LineHeight" Value="{OnPlatform Default=-1,
+                                               Android=1.5}" />
+        <Setter Property="VerticalOptions" Value="Center"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-800}"/>
+    </Style>
+
 </ResourceDictionary>
diff --git a/EssentialUIKit/Views/Templates/WishlistItemTemplate.xaml.cs b/EssentialUIKit/Views/Templates/WishlistItemTemplate.xaml.cs
index 7346094..f152372 100644
--- a/EssentialUIKit/Views/Templates/WishlistItemTemplate.xaml.cs
+++ b/EssentialUIKit/Views/Templates/WishlistItemTemplate.xaml.cs
@@ -1,10 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-using Xamarin.Forms;
+using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
diff --git a/EssentialUIKit/Views/Transaction/MyCardsPage.xaml b/EssentialUIKit/Views/Transaction/MyCardsPage.xaml
new file mode 100644
index 0000000..0136304
--- /dev/null
+++ b/EssentialUIKit/Views/Transaction/MyCardsPage.xaml
@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:cards="clr-namespace:Syncfusion.XForms.Cards;assembly=Syncfusion.Cards.XForms"
+             xmlns:controls="clr-namespace:EssentialUIKit.Controls"
+             xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
+             xmlns:ListView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
+             xmlns:ViewModel="clr-namespace:EssentialUIKit.ViewModels.Transaction"
+             xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
+             x:Class="EssentialUIKit.Views.Transaction.MyCardsPage"
+             BackgroundColor="{DynamicResource Gray-100}"
+             NavigationPage.HasNavigationBar="False">
+
+    <ContentPage.BindingContext>
+        <ViewModel:MyCardsViewModel/>
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.ControlTemplate>
+        <ControlTemplate>
+            <StackLayout x:Name="titleLayout" Spacing="0">
+                <controls:TitleView Title="My Cards">
+                    <controls:TitleView.LeadingView>
+                        <!--  Back button command  -->
+                        <buttons:SfButton
+                            x:Name="backButton"
+                            Command="{Binding BackButtonCommand}"
+                            CommandParameter="{x:Reference backButton}"
+                            CornerRadius="4"
+                            Style="{StaticResource IconButtonStyle}"
+                            Text="{StaticResource Back}" />
+                    </controls:TitleView.LeadingView>
+
+                    <controls:TitleView.TrailingView>
+                        <!--  More button command  -->
+                        <buttons:SfButton
+                            x:Name="moreButton"
+                            Command="{Binding MoreButtonCommand}"
+                            CommandParameter="{x:Reference moreButton}"
+                            CornerRadius="4"
+                            Style="{StaticResource IconButtonStyle}"
+                            Text="{StaticResource MoreIcon}" />
+                    </controls:TitleView.TrailingView>
+
+                </controls:TitleView>
+                <ContentPresenter />
+            </StackLayout>
+        </ControlTemplate>
+    </ContentPage.ControlTemplate>
+
+    <ContentPage.Content>
+        <Grid RowSpacing="0" ColumnSpacing="0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+
+            <!--  ListView displaying saved cards  -->
+            <ListView:SfListView x:Name="myCards" AutoFitMode="Height" IsScrollBarVisible="False" ItemSpacing="16,24,16,0" 
+                                 SelectionGesture="Tap" SelectionBackgroundColor="Transparent" SelectionMode="Single" AllowSwiping="True" ItemsSource="{Binding CardDetails}">
+            <ListView:SfListView.ItemTemplate>
+                <DataTemplate>
+                            <cards:SfCardView CornerRadius="4" HasShadow="True" HeightRequest="180" WidthRequest="343" 
+                                              HorizontalOptions="CenterAndExpand">
+                                <cards:SfCardView.Content>
+                            <Grid>
+                                <gradient:SfGradientView>
+                                    <gradient:SfGradientView.BackgroundBrush>
+                                        <gradient:SfLinearGradientBrush>
+                                            <gradient:SfLinearGradientBrush.GradientStops>
+                                                <gradient:SfGradientStop Color="{Binding BackgroundGradientStart}" Offset="0.0"/>
+                                                <gradient:SfGradientStop Color="{Binding BackgroundGradientEnd}" Offset="1.0"/>
+                                            </gradient:SfLinearGradientBrush.GradientStops>
+                                        </gradient:SfLinearGradientBrush>
+                                    </gradient:SfGradientView.BackgroundBrush>
+                                </gradient:SfGradientView>
+
+                                <Grid RowSpacing="27" Margin="16,20" >
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="*"/>
+                                    </Grid.RowDefinitions>
+
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+
+                                        <!-- Card Type -->
+                                        <Label Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="Start"  VerticalOptions="Center" 
+                                           Style="{StaticResource CardLabel}" Margin="0,3" Text="{Binding Type}"/>
+
+                                        <!-- Icon displaying card type -->
+                                        <Image Grid.Row="0" Grid.ColumnSpan="3"  HeightRequest="27" HorizontalOptions="End"  VerticalOptions="Start"
+                                           WidthRequest="45" Source="{Binding CardTypeIcon}"/>
+                                        
+                                        <!-- Card Number -->
+                                        <Label Grid.Row="1" Grid.ColumnSpan="3" HorizontalOptions="Start" Text="{Binding Number}" FontSize="20"
+                                           FontFamily="{StaticResource Montserrat-Medium}" TextColor="{DynamicResource Gray-White}"
+                                           LineHeight="{OnPlatform Default=-1, Android=1.5}" />
+
+                                        <Grid Grid.Row="2" Grid.ColumnSpan="3">
+
+                                        <!--  Card Holder Name  -->
+                                        <StackLayout Grid.Column="0" Spacing="0">
+                                            <Label Text="Card Holder" FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                                                   LineHeight="{OnPlatform Default=-1, Android=1.5}" TextColor="{DynamicResource Gray-White}"/>
+                                            <Label Text="{Binding Name}" Style="{StaticResource CardLabel}" />
+                                        </StackLayout>
+                                            
+                                        <!--  Card Expiry -->
+                                        <StackLayout Grid.Column="1" Spacing="0" HorizontalOptions="Center">
+                                            <Label Text="Expires" FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                                                   LineHeight="{OnPlatform Default=-1, Android=1.5}" TextColor="{DynamicResource Gray-White}"/>
+                                            <Label Text="{Binding Expiry}" Style="{StaticResource CardLabel}" />
+                                        </StackLayout>
+                                            
+                                        <!--  Card Cvv Number  -->
+                                        <StackLayout Grid.Column="2" Spacing="0" HorizontalOptions="Center">
+                                            <Label Text="CVV" FontSize="12" FontFamily="{StaticResource Montserrat-Medium}" 
+                                                   LineHeight="{OnPlatform Default=-1, Android=1.5}" TextColor="{DynamicResource Gray-White}"/>
+                                            <Label Text="{Binding Cvv}" Style="{StaticResource CardLabel}" />
+                                        </StackLayout>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </cards:SfCardView.Content>
+                    </cards:SfCardView>
+                        </DataTemplate>
+            </ListView:SfListView.ItemTemplate>
+            </ListView:SfListView>
+
+            <!--  Add Card button command  -->
+            <buttons:SfButton x:Name="addCardButton" Style="{StaticResource MagentaButtonStyle}" Text="ADD NEW CARD" 
+                              Command="{Binding AddCardCommand}" CommandParameter="{x:Reference addCardButton}" Grid.Row="1"
+                              HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" HeightRequest="40"/>
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Transaction/MyCardsPage.xaml.cs b/EssentialUIKit/Views/Transaction/MyCardsPage.xaml.cs
new file mode 100644
index 0000000..5244b05
--- /dev/null
+++ b/EssentialUIKit/Views/Transaction/MyCardsPage.xaml.cs
@@ -0,0 +1,21 @@
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Xaml;
+
+namespace EssentialUIKit.Views.Transaction
+{
+    /// <summary>
+    /// Page Displaying saved cards.
+    /// </summary>
+    [Preserve(AllMembers = true)]
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class MyCardsPage 
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MyCardsPage" /> class.
+        /// </summary>
+        public MyCardsPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/EssentialUIKit/Views/Transaction/Styles.xaml b/EssentialUIKit/Views/Transaction/Styles.xaml
index e66533e..7ecd86a 100644
--- a/EssentialUIKit/Views/Transaction/Styles.xaml
+++ b/EssentialUIKit/Views/Transaction/Styles.xaml
@@ -10,6 +10,9 @@
 
     <Color x:Key="Transparent">Transparent</Color>
 
+    <x:String x:Key="MoreIcon">&#xe719;</x:String>
+    <x:String x:Key="Back">&#xe709;</x:String>
+
     <Style TargetType="control:TitleView">
         <Setter Property="BackgroundColor" Value="{DynamicResource Gray-White}" />
     </Style>
@@ -165,4 +168,25 @@
         </Setter>
     </Style>
 
+    <!--  Common style for icon buttons  -->
+    <Style x:Key="IconButtonStyle" TargetType="buttons:SfButton">
+        <Setter Property="TextColor" Value="{DynamicResource Gray-600}" />
+        <Setter Property="BackgroundColor" Value="{StaticResource Transparent}" />
+        <Setter Property="FontFamily" Value="{StaticResource FontIcons}" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="HorizontalTextAlignment" Value="Center" />
+        <Setter Property="VerticalTextAlignment" Value="Center" />
+        <Setter Property="HorizontalOptions" Value="Center" />
+        <Setter Property="VerticalOptions" Value="Center" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="WidthRequest" Value="40" />
+    </Style>
+
+    <Style x:Key="CardLabel" TargetType="Label">
+        <Setter Property="FontFamily" Value="{StaticResource Montserrat-SemiBold}"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="TextColor" Value="{DynamicResource Gray-White}"/>
+        <Setter Property="LineHeight" Value="{OnPlatform Default=-1, Android=1.5}"/>
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file