Merge commit '0f2807e6a518c09f4926bc5cda65c1ce3321732d'

21 files changed, 784 insertions, 630 deletions

diff --git a/CourseLecture.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml
index 8dfbff3..8dfbff3 100644
--- a/CourseLecture.ui.qml
+++ b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml
diff --git a/LeaveReview.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml
index 22a102a..22a102a 100644
--- a/LeaveReview.ui.qml
+++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml
diff --git a/ReviewItem.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
index 4f7f4a3..4f7f4a3 100644
--- a/ReviewItem.ui.qml
+++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
diff --git a/RecentlyViewedCard.ui.qml b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml
index 3572dbf..3572dbf 100644
--- a/RecentlyViewedCard.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml
diff --git a/CourseDetailClassicVideo.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
index f715a94..f715a94 100644
--- a/CourseDetailClassicVideo.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
diff --git a/CardItemGrid.ui.qml b/Course/Grid/Card.ui.qml
index f6b0206..f6b0206 100644
--- a/CardItemGrid.ui.qml
+++ b/Course/Grid/Card.ui.qml
diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml
new file mode 100644
index 0000000..a4ad119
--- /dev/null
+++ b/Course/Grid/Minimal.ui.qml
@@ -0,0 +1,170 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "Minimal"
+import "../../Home/Default"
+
+Flickable {
+	property alias courseGrid: courseGrid
+	contentHeight: main.height
+
+	Rectangle {
+		anchors.fill: parent
+		color: Eduport.bsBodyBg
+	}
+
+	ColumnLayout {
+		id: main
+		anchors {
+			top: parent.top
+			left: parent.left
+			right: parent.right
+		}
+
+		FilterBar {}
+
+		GridView {
+			id: courseGrid
+			interactive: false
+			Layout.fillWidth: true
+			implicitHeight: main.width < 576
+				? cellHeight * count
+				: main.width < 768
+				? cellHeight * count / 2
+				: main.width < 992
+				? cellHeight * count / 3
+				: cellHeight * count / 4
+			cellWidth: main.width < 576
+				? width
+				: main.width < 768
+				? width / 2
+				: main.width < 992
+				? width / 3
+				: width / 4
+			cellHeight: cellWidth * 400 / 533 + 220.35
+			model: ListModel {
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: false
+					title: "Sketch from A to Z: for app designer"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Graphic Design Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Create a Design System in Figma"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/07.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Deep Learning with React-Native"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Build Responsive Websites with HTML"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/12.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Build Websites with CSS"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/05.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "The Complete Web Development in python"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/06.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Angular – The Complete Guider"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/10.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Bootstrap 5 From Scratch"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/13.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "PHP with - CMS Project"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Digital Marketing Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/04.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Learn Invision"
+					rate: 3.5
+				}
+			}
+			delegate: Card {
+				width: courseGrid.cellWidth
+				height: courseGrid.cellHeight
+				imageSource: image
+				badgeText: level
+				badgeColor: levelColor
+				badgeBackgroundColor: levelBackgroundColor
+				favorite.checked: liked
+				titleText: title
+				truncatedVisible: false
+				rating: rate
+			}
+		}
+	}
+}
diff --git a/CourseGridFilterbar.ui.qml b/Course/Grid/Minimal/FilterBar.ui.qml
index 6531261..d9bf81a 100644
--- a/CourseGridFilterbar.ui.qml
+++ b/Course/Grid/Minimal/FilterBar.ui.qml
@@ -63,7 +63,7 @@ Rectangle {
 			id: searchButton
 			Layout.fillWidth: true
 			icon.color: "#ffffff"
-			icon.source: "Material/svg/filled/search.svg"
+			icon.source: "../../../Font-Awesome/svgs/solid/magnifying-glass.svg"
 			Layout.rightMargin: 24
 			display: AbstractButton.IconOnly
 		}
diff --git a/CourseGridMinimal.qrc b/CourseGridMinimal.qrc
new file mode 100644
index 0000000..0cbbe0b
--- /dev/null
+++ b/CourseGridMinimal.qrc
@@ -0,0 +1,8 @@
+<!DOCTYPE RCC><RCC version="1.0">
+	<qresource prefix="qeduport">
+		<file>Font-Awesome/svgs/solid/magnifying-glass.svg</file>
+		<file>Course/Grid/Minimal/FilterBar.ui.qml</file>
+		<file>Course/Grid/Card.ui.qml</file>
+		<file>Course/Grid/Minimal.ui.qml</file>
+	</qresource>
+</RCC>
diff --git a/Font-Awesome/svgs/solid/magnifying-glass.svg b/Font-Awesome/svgs/solid/magnifying-glass.svg
new file mode 100644
index 0000000..ee25f3c
--- /dev/null
+++ b/Font-Awesome/svgs/solid/magnifying-glass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
\ No newline at end of file
diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml
index 210254a..d9373bd 100644
--- a/Header/CartItem.ui.qml
+++ b/Header/CartItem.ui.qml
@@ -51,7 +51,7 @@ ColumnLayout {
 
 				Lbl.H6 {
 					text: titleText
-					Layout.maximumWidth: 146
+					Layout.fillWidth: true
 				}
 
 				Button {
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
index 4f2e309..a87d6cd 100644
--- a/Home/Default/Card.ui.qml
+++ b/Home/Default/Card.ui.qml
@@ -21,6 +21,7 @@ Item {
 	property string titleText: "Build Responsive Websites with HTML"
 	property alias titleArea: titleArea
 	property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther"
+	property bool truncatedVisible: true
 	property real rating: 4.0
 
 	DrpShdw.Box {
@@ -142,6 +143,7 @@ Item {
 				text: truncatedText
 				elide: Text.ElideRight
 				maximumLineCount: 2
+				visible: truncatedVisible
 				Layout.fillWidth: true
 				Layout.bottomMargin: 8
 			}
diff --git a/OrderSummary.ui.qml b/OrderSummary.ui.qml
deleted file mode 100644
index a877916..0000000
--- a/OrderSummary.ui.qml
+++ /dev/null
@@ -1,89 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-
-Rectangle {
-	color: "#ffffff"
-	radius: 16
-
-	ColumnLayout {
-		anchors.fill: parent
-		anchors.margins: 24
-		Label {
-			id: oderSummaryTitle
-			text: qsTr("Order Summary")
-			font.family: "Roboto"
-			font.weight: Font.Medium
-			font.pointSize: 16
-			Layout.fillWidth: true
-			Layout.alignment: Qt.AlignTop
-		}
-
-		RowLayout {
-			Layout.fillWidth: true
-			Layout.alignment: Qt.AlignTop
-			Label {
-				id: transactionLabel
-				color: "#6c757d"
-				text: qsTr("Transaction code")
-				font.family: "Roboto"
-				font.weight: Font.Medium
-				font.pointSize: 16
-				Layout.fillWidth: true
-			}
-			Label {
-				id: transactionCode
-				text: qsTr("B0D123X")
-				horizontalAlignment: Text.AlignRight
-				font.family: "Roboto"
-				font.weight: Font.Medium
-				font.pointSize: 16
-				Layout.fillWidth: true
-			}
-		}
-
-		Rectangle {
-			color: "transparent"
-			radius: 8
-			border.width: 1
-			border.color: "#4d000000"
-			Layout.fillWidth: true
-			implicitHeight: 40
-			RowLayout {
-				anchors.fill: parent
-				TextField {
-					id: couponCode
-					Layout.fillWidth: true
-					Layout.fillHeight: true
-					placeholderText: qsTr("Coupon code")
-					font.pixelSize: 16
-					font.family: "roboto"
-					placeholderTextColor: "#99000000"
-					background: Rectangle {
-						color: "transparent"
-					}
-				}
-				Button {
-					id: couponButton
-					contentItem: Text {
-						color: "#ffffff"
-						text: "Apply"
-						horizontalAlignment: Text.AlignHCenter
-						verticalAlignment: Text.AlignVCenter
-						font.weight: Font.Medium
-						font.family: "Roboto"
-						font.pointSize: 14
-						rightPadding: 12
-						leftPadding: 12
-					}
-					Layout.fillHeight: true
-					background: Rectangle {
-						color: "#066ac9"
-						border.width: 0
-						radius: 8
-					}
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/Shop.qrc b/Shop.qrc
index 9dbea28..4b785a8 100644
--- a/Shop.qrc
+++ b/Shop.qrc
@@ -1,6 +1,9 @@
 <!DOCTYPE RCC><RCC version="1.0">
 	<qresource prefix="qeduport">
 		<file>Shop/Course.ui.qml</file>
+		<file>Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml</file>
+		<file>Shop/Checkout/RightSidebar/OrderSummary.ui.qml</file>
+		<file>Shop/Checkout/PersonalInfo.ui.qml</file>
 		<file>Shop/Checkout.ui.qml</file>
 	</qresource>
 </RCC>
diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml
index c7761c1..84e225c 100644
--- a/Shop/Checkout.ui.qml
+++ b/Shop/Checkout.ui.qml
@@ -2,26 +2,16 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import Eduport 1.4
-import "../TextField" as TxtFld
 import "../Label" as Lbl
 import "../Button" as Btn
+import "Checkout"
+import "Checkout/RightSidebar"
 
 Flickable {
 	property alias alert: alert
 	property alias login: login
-	property alias name: name
-	property alias email: email
-	property alias mobile: mobile
-	property alias country: country
-	property alias state: province
-	property alias postal: postal
-	property alias address: address
-	property alias banks: banks
-	property alias courseItems: courseItems
-	property alias priceValue: priceValue
-	property alias discountValue: discountValue
-	property alias totalValue: totalValue
-	property alias placeOrder: placeOrder
+	property alias personalInfo: personalInfo
+	property alias orderSummary: orderSummary
 	property alias premium: premium
 	contentHeight: body.height
 
@@ -66,317 +56,17 @@ Flickable {
 
 				Rectangle {
 					Layout.fillWidth: true
-					implicitHeight: personal.height
 					Layout.margins: 16
+					implicitHeight: personalInfo.height
 					radius: 8
-					ColumnLayout {
-						id: personal
+					color: Eduport.bsCardBg
+
+					PersonalInfo {
+						id: personalInfo
 						anchors {
 							left: parent.left
 							right: parent.right
 						}
-
-						Lbl.H5 {
-							text: qsTr("Personal Details")
-							Layout.fillWidth: true
-							Layout.rightMargin: 16
-							Layout.leftMargin: 16
-							Layout.topMargin: 16
-						}
-
-						GridLayout {
-							Layout.margins: 16
-							columns: body.width
-								< 768 ? 1 : 2
-							rows: body.width < 768
-								? 4 : 7
-							columnSpacing: 0
-							rowSpacing: 16
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Your name *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: name
-											placeholderText: qsTr("Name")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Email address *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: email
-											placeholderText: qsTr("Email")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Mobile number *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: mobile
-											placeholderText: qsTr("Mobile number")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Select country *")
-									Layout.fillWidth: true
-								}
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: country
-											placeholderText: qsTr("Select country")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Select state *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: province
-											placeholderText: qsTr("Select state")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Postal code *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: postal
-											placeholderText: qsTr("PIN code")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-
-							ColumnLayout {
-
-								Lbl.Body {
-									text: qsTr("Address *")
-									Layout.fillWidth: true
-								}
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											id: address
-											placeholderText: qsTr("Address")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-							}
-						}
-
-						ColumnLayout {
-
-							Lbl.H5 {
-								text: qsTr("Payment method")
-								Layout.fillWidth: true
-								Layout.margins: 16
-							}
-
-							ColumnLayout {
-
-								Rectangle {
-									implicitHeight: paymentCard.height
-									Layout.margins: 16
-									Layout.fillWidth: true
-									border.width: 1
-									radius: 8
-									border.color: "#4d000000"
-
-									ColumnLayout {
-										id: paymentCard
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-										Lbl.Body {
-											text: qsTr("Credit or Debit Card")
-											Layout.fillWidth: true
-											padding: 16
-										}
-									}
-								}
-
-								Rectangle {
-									implicitHeight: paymentNetBanking.height
-									Layout.margins: 16
-									Layout.fillWidth: true
-									border.width: 1
-									radius: 8
-									border.color: "#4d000000"
-
-									ColumnLayout {
-										id: paymentNetBanking
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-
-										Lbl.Body {
-											text: qsTr("Pay with Net Banking")
-											Layout.fillWidth: true
-											Layout.rightMargin: 16
-											Layout.leftMargin: 16
-											Layout.topMargin: 16
-										}
-
-										ColumnLayout {
-											Layout.margins: 16
-											Lbl.Body {
-												text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
-												Layout.fillWidth: true
-											}
-
-											Lbl.Body {
-												text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
-												Layout.fillWidth: true
-											}
-
-											ComboBox {
-												id: banks
-												Layout.fillWidth: true
-												font.pointSize: 14
-												font.family: "roboto"
-												Layout.topMargin: 24
-												model: ListModel {
-													ListElement {
-														label: "Please choose one"
-													}
-													ListElement {
-														label: "Bank of America"
-													}
-													ListElement {
-														label: "Bank of India"
-													}
-													ListElement {
-														label: "Bank of London"
-													}
-												}
-												delegate: ItemDelegate {
-													contentItem: Text {
-														text: label
-														font {
-															family: Eduport.bodyFont.family
-															weight: Eduport.bodyFont.weight
-															pointSize: Eduport.bodyFont.pointSize
-														}
-													}
-												}
-												background: Rectangle {
-													radius: 8
-													implicitHeight: 36
-													implicitWidth: 200
-													color: "#f5f7f9"
-												}
-											}
-										}
-									}
-								}
-							}
-						}
 					}
 				}
 			}
@@ -393,231 +83,14 @@ Flickable {
 					implicitHeight: orderSummary.height
 					Layout.margins: 16
 					radius: 8
+					color: Eduport.bsCardBg
 
-					ColumnLayout {
+					OrderSummary {
 						id: orderSummary
 						anchors {
 							left: parent.left
 							right: parent.right
 						}
-
-						Lbl.H4 {
-							text: qsTr("Order Summary")
-							Layout.fillWidth: true
-							Layout.rightMargin: 16
-							Layout.leftMargin: 16
-							Layout.topMargin: 16
-						}
-
-						ColumnLayout {
-							Layout.margins: 16
-							spacing: 16
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight
-
-								Label {
-									id: codeLabel
-									text: qsTr("Transaction code")
-									font.pointSize: 14
-									font.family: "roboto"
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Label {
-									id: codeValue
-									text: "AB12365E"
-									font.pointSize: 14
-									font.family: "roboto"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-
-							RowLayout {
-
-								Rectangle {
-									implicitHeight: 56
-									color: "#f5f7f9"
-									radius: 8
-									border.width: 0
-									Layout.fillWidth: true
-									RowLayout {
-										anchors.fill: parent
-										TxtFld.Input {
-											placeholderText: qsTr("COUPON CODE")
-											Layout.fillWidth: true
-											Layout.fillHeight: true
-										}
-									}
-								}
-
-								Button {
-									text: qsTr("Apply")
-									font.pointSize: 14
-									font.family: "roboto"
-									implicitHeight: 56
-									contentItem: Text {
-										color: "#ffffff"
-										text: "Apply"
-										padding: 12
-										horizontalAlignment: Text.AlignHCenter
-										verticalAlignment: Text.AlignVCenter
-										font.weight: Font.Medium
-										font.family: "Roboto"
-										font.pointSize: 14
-									}
-
-									background: Rectangle {
-										color: "#066ac9"
-										radius: 8
-									}
-								}
-							}
-						}
-
-						ListView {
-							id: courseItems
-							interactive: false
-							Layout.fillWidth: true
-							implicitHeight: count * (width * 400 / 533 + (width < 362 ? 37.5 : 18.75) + 86.5)
-							model: ListModel {
-								ListElement {
-									image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
-									title: "Sketch from A to Z: for app designer"
-									price: "$150"
-								}
-								ListElement {
-									image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg"
-									title: "The Complete Video Production Bootcamp"
-									price: "$350"
-								}
-							}
-							delegate: Course {
-								width: courseItems.width
-								imageSource: image
-								titleText: title
-								priceText: price
-							}
-						}
-
-						Rectangle {
-							Layout.fillWidth: true
-							Layout.topMargin: 16
-							Layout.bottomMargin: 16
-							height: 1
-							border {
-								width: .5
-								color: "#0a000000"
-							}
-						}
-
-						ColumnLayout {
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: priceLabel.implicitHeight
-												+ priceValue.implicitHeight
-
-								Label {
-									id: priceLabel
-									text: qsTr("Original Price")
-									font {
-										family: Eduport.fwLightFont.family
-										weight: Eduport.fwLightFont.weight
-										pointSize: Eduport.h6FontSize
-									}
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.H6 {
-									id: priceValue
-									text: "$500"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: discountLabel.implicitHeight
-												+ discountValue.implicitHeight
-
-								Label {
-									id: discountLabel
-									text: qsTr("Coupon Discount")
-									font {
-										family: Eduport.fwLightFont.family
-										weight: Eduport.fwLightFont.weight
-										pointSize: Eduport.h6FontSize
-									}
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.Body {
-									id: discountValue
-									text: "-$20"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-
-							Item {
-								Layout.fillWidth: true
-								implicitHeight: totalLabel.implicitHeight
-												+ totalValue.implicitHeight
-
-								Lbl.H5 {
-									id: totalLabel
-									text: qsTr("Total")
-									anchors.verticalCenter: parent.verticalCenter
-								}
-
-								Lbl.H5 {
-									id: totalValue
-									text: "$480"
-									anchors {
-										right: parent.right
-										verticalCenter: parent.verticalCenter
-									}
-								}
-							}
-						}
-
-						Btn.Success {
-							id: placeOrder
-							Layout.margins: 16
-							Layout.fillWidth: true
-							text: qsTr("Place Order")
-							implicitHeight: 36
-							font {
-								family: Eduport.bsBtnFont.family
-								weight: Eduport.bsBtnFont.weight
-								pointSize: Eduport.bsBtnLgFontSize
-							}
-							background: Rectangle {
-								color: placeOrder.down ? Eduport.bsBtnSuccessActiveBG
-									: placeOrder.enabled
-									? Eduport.bsBtnSuccessBg
-									: Eduport.bsBtnSuccessDisabledBg
-								border {
-									width: Eduport.bsBtnBorderWidth
-									color: placeOrder.down
-										? Eduport.bsBtnSuccessActiveBorderColor
-										: placeOrder.enabled
-										? Eduport.bsBtnSuccessBorderColor
-										: Eduport.bsBtnSuccessDisabledBorderColor
-								}
-								radius: Eduport.bsBtnLgBorderRadius
-							}
-						}
 					}
 				}
 
diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml
new file mode 100644
index 0000000..3bdff82
--- /dev/null
+++ b/Shop/Checkout/PersonalInfo.ui.qml
@@ -0,0 +1,267 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../TextField"
+import "../../Label"
+import "PersonalInfo/PaymentMethod"
+
+ColumnLayout {
+	property alias name: name
+	property alias email: email
+	property alias mobile: mobile
+	property alias country: country
+	property alias state: province
+	property alias postal: postal
+	property alias address: address
+	property alias paymentMethodNetBanking: paymentMethodNetBanking
+
+	H5 {
+		text: qsTr("Personal Details")
+		Layout.fillWidth: true
+		Layout.rightMargin: 16
+		Layout.leftMargin: 16
+		Layout.topMargin: 16
+	}
+
+	GridLayout {
+		Layout.margins: 16
+		columns: body.width < 768 ? 1 : 2
+		rows: body.width < 768 ? 4 : 7
+		columnSpacing: 0
+		rowSpacing: 16
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Your name *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: name
+						placeholderText: qsTr("Name")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Email address *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: email
+						placeholderText: qsTr("Email")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Mobile number *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: mobile
+						placeholderText:
+							qsTr("Mobile number")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Select country *")
+				Layout.fillWidth: true
+			}
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: country
+						placeholderText:
+							qsTr("Select country")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Select state *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: province
+						placeholderText:
+							qsTr("Select state")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Postal code *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: postal
+						placeholderText:
+								qsTr("PIN code")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+
+		ColumnLayout {
+
+			Body {
+				text: qsTr("Address *")
+				Layout.fillWidth: true
+			}
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						id: address
+						placeholderText: qsTr("Address")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+		}
+	}
+
+	ColumnLayout {
+
+		H5 {
+			text: qsTr("Payment method")
+			Layout.fillWidth: true
+			Layout.margins: 16
+		}
+
+		ColumnLayout {
+
+			Rectangle {
+				implicitHeight: paymentCard.height
+				Layout.margins: 16
+				Layout.fillWidth: true
+				border.width: 1
+				radius: 8
+				border.color: "#4d000000"
+				color: Eduport.bsAccordionBg
+
+				ColumnLayout {
+					id: paymentCard
+					anchors {
+						left: parent.left
+						right: parent.right
+					}
+					Body {
+						text:
+						qsTr("Credit or Debit Card")
+						Layout.fillWidth: true
+						padding: 16
+					}
+				}
+			}
+
+			Rectangle {
+				implicitHeight: paymentMethodNetBanking.height
+				Layout.margins: 16
+				Layout.fillWidth: true
+				border.width: 1
+				radius: 8
+				border.color: "#4d000000"
+				color: Eduport.bsAccordionBg
+
+				NetBanking {
+					id: paymentMethodNetBanking
+					anchors {
+						left: parent.left
+						right: parent.right
+					}
+				}
+			}
+		}
+	}
+}
+
diff --git a/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml
new file mode 100644
index 0000000..8200de1
--- /dev/null
+++ b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml
@@ -0,0 +1,76 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../../../Label"
+
+ColumnLayout {
+	property alias banks: banks
+
+	Body {
+		text:
+		qsTr("Pay with Net Banking")
+		Layout.fillWidth: true
+		Layout.rightMargin: 16
+		Layout.leftMargin: 16
+		Layout.topMargin: 16
+	}
+
+	ColumnLayout {
+		Layout.margins: 16
+
+		Body {
+			text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
+			Layout.fillWidth: true
+		}
+
+		Body {
+			text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
+			Layout.fillWidth: true
+		}
+
+		ComboBox {
+			id: banks
+			Layout.fillWidth: true
+			Layout.topMargin: 24
+			font: Eduport.bsBodyFont
+			model: ListModel {
+				ListElement {
+					label: "Please choose one"
+				}
+				ListElement {
+					label: "Bank of America"
+				}
+				ListElement {
+					label: "Bank of India"
+				}
+				ListElement {
+					label: "Bank of London"
+				}
+			}
+			contentItem: Text {
+				text: banks.displayText
+				font: banks.font
+				color: Eduport.bsBodyColor
+				verticalAlignment: Text.AlignVCenter
+			}
+			background: Rectangle {
+				width: banks.width
+				color: Eduport.bsBodyBg
+				radius: 8
+			}
+			delegate: ItemDelegate {
+				contentItem: Text {
+					text: label
+					font: banks.font
+					color: Eduport.bsBodyColor
+					verticalAlignment: Text.AlignVCenter
+				}
+				background: Rectangle {
+					width: banks.width
+					color: Eduport.bsBodyBg
+				}
+			}
+		}
+	}
+}
diff --git a/Shop/Checkout/RightSidebar/OrderSummary.ui.qml b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml
new file mode 100644
index 0000000..7564106
--- /dev/null
+++ b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml
@@ -0,0 +1,242 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "../../../TextField"
+import "../../../Label"
+import "../../../Button"
+import "../.."
+
+ColumnLayout {
+	property alias courseItems: courseItems
+	property alias priceValue: priceValue
+	property alias discountValue: discountValue
+	property alias totalValue: totalValue
+	property alias placeOrder: placeOrder
+
+	H4 {
+		text: qsTr("Order Summary")
+		Layout.fillWidth: true
+		Layout.rightMargin: 16
+		Layout.leftMargin: 16
+		Layout.topMargin: 16
+	}
+
+	ColumnLayout {
+		Layout.margins: 16
+		spacing: 16
+
+		Item {
+			Layout.fillWidth: true
+			implicitHeight: codeLabel.implicitHeight
+						+ codeValue.implicitHeight
+
+			Body {
+				id: codeLabel
+				text: qsTr("Transaction code")
+				anchors.verticalCenter: parent.verticalCenter
+			}
+
+			H6 {
+				id: codeValue
+				text: "AB12365E"
+				font {
+					family: Eduport.fwLightFont.family
+					weight: Eduport.fwLightFont.weight
+					pointSize: Eduport.h6FontSize
+				}
+				anchors {
+					right: parent.right
+					verticalCenter: parent.verticalCenter
+				}
+			}
+		}
+
+		RowLayout {
+
+			Rectangle {
+				implicitHeight: 56
+				color: "#f5f7f9"
+				radius: 8
+				border.width: 0
+				Layout.fillWidth: true
+				RowLayout {
+					anchors.fill: parent
+					Input {
+						placeholderText:
+							qsTr("COUPON CODE")
+						Layout.fillWidth: true
+						Layout.fillHeight: true
+					}
+				}
+			}
+
+			Button {
+				text: qsTr("Apply")
+				font.pointSize: 14
+				font.family: "roboto"
+				implicitHeight: 56
+				contentItem: Text {
+					color: "#ffffff"
+					text: "Apply"
+					padding: 12
+					horizontalAlignment: Text.AlignHCenter
+					verticalAlignment: Text.AlignVCenter
+					font.weight: Font.Medium
+					font.family: "Roboto"
+					font.pointSize: 14
+				}
+
+				background: Rectangle {
+					color: "#066ac9"
+					radius: 8
+				}
+			}
+		}
+	}
+
+	ListView {
+		id: courseItems
+		interactive: false
+		Layout.fillWidth: true
+		implicitHeight: count
+				* (width * 400 / 533
+					+ (width < 362 ? 37.5 : 18.75)
+					+ 86.5)
+		model: ListModel {
+			ListElement {
+				image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+				title: "Sketch from A to Z: for app designer"
+				price: "$150"
+			}
+			ListElement {
+				image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg"
+				title: "The Complete Video Production Bootcamp"
+				price: "$350"
+			}
+		}
+		delegate: Course {
+			width: courseItems.width
+			imageSource: image
+			titleText: title
+			priceText: price
+		}
+	}
+
+	Rectangle {
+		Layout.fillWidth: true
+		Layout.topMargin: 16
+		Layout.bottomMargin: 16
+		height: 1
+		border {
+			width: .5
+			color: "#0a000000"
+		}
+	}
+
+	ColumnLayout {
+
+		Item {
+			Layout.fillWidth: true
+			implicitHeight: priceLabel.implicitHeight
+						+ priceValue.implicitHeight
+
+			H6 {
+				id: priceLabel
+				text: qsTr("Original Price")
+				font {
+					family: Eduport.fwLightFont.family
+					weight: Eduport.fwLightFont.weight
+					pointSize: Eduport.h6FontSize
+				}
+				anchors.verticalCenter: parent.verticalCenter
+			}
+
+			H6 {
+				id: priceValue
+				text: "$500"
+				anchors {
+					right: parent.right
+					verticalCenter: parent.verticalCenter
+				}
+			}
+		}
+
+		Item {
+			Layout.fillWidth: true
+			implicitHeight: discountLabel.implicitHeight
+						+ discountValue.implicitHeight
+
+			H6 {
+				id: discountLabel
+				text: qsTr("Coupon Discount")
+				font {
+					family: Eduport.fwLightFont.family
+					weight: Eduport.fwLightFont.weight
+					pointSize: Eduport.h6FontSize
+				}
+				anchors.verticalCenter: parent.verticalCenter
+			}
+
+			Body {
+				id: discountValue
+				text: "-$20"
+				anchors {
+					right: parent.right
+					verticalCenter: parent.verticalCenter
+				}
+			}
+		}
+
+		Item {
+			Layout.fillWidth: true
+			implicitHeight: totalLabel.implicitHeight
+						+ totalValue.implicitHeight
+
+			H5 {
+				id: totalLabel
+				text: qsTr("Total")
+				anchors.verticalCenter: parent.verticalCenter
+			}
+
+			H5 {
+				id: totalValue
+				text: "$480"
+				anchors {
+					right: parent.right
+					verticalCenter: parent.verticalCenter
+				}
+			}
+		}
+	}
+
+	Success {
+		id: placeOrder
+		Layout.margins: 16
+		Layout.fillWidth: true
+		text: qsTr("Place Order")
+		implicitHeight: 36
+		font {
+			family: Eduport.bsBtnFont.family
+			weight: Eduport.bsBtnFont.weight
+			pointSize: Eduport.bsBtnLgFontSize
+		}
+		background: Rectangle {
+			color: placeOrder.down
+				? Eduport.bsBtnSuccessActiveBG
+				: placeOrder.enabled
+					? Eduport.bsBtnSuccessBg
+					: Eduport.bsBtnSuccessDisabledBg
+			border {
+				width: Eduport.bsBtnBorderWidth
+				color: placeOrder.down
+					? Eduport.bsBtnSuccessActiveBorderColor
+					: placeOrder.enabled
+					? Eduport.bsBtnSuccessBorderColor
+					: Eduport
+						.bsBtnSuccessDisabledBorderColor
+			}
+			radius: Eduport.bsBtnLgBorderRadius
+		}
+	}
+}
diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml
index b743ee5..502fbab 100644
--- a/Shop/Course.ui.qml
+++ b/Shop/Course.ui.qml
@@ -69,7 +69,6 @@ ColumnLayout {
 						bottom: parent.bottom
 					}
 					text: priceText
-					color: "#0cbc87"
 				}
 		       }
 	       }
diff --git a/CourseListItem.ui.qml b/Student/Dashboard/CourseListItem.ui.qml
index d21990f..d21990f 100644
--- a/CourseListItem.ui.qml
+++ b/Student/Dashboard/CourseListItem.ui.qml
diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml
index 0077b7a..ab18b33 100644
--- a/imports/Eduport/Eduport.qml
+++ b/imports/Eduport/Eduport.qml
@@ -40,6 +40,8 @@ QtObject {
 		weight: Font.Normal
 	})
 
+	property color bsAccordionBg: bsBodyBg
+
 	readonly property real bsBadgeFontSize: 13.6
 
 	property color bsBodyColor: mode ? "#a1a1a8" : "#747579"