diff --git a/config.xml b/config.xml
new file mode 100644
index 0000000..d0e59e6
--- /dev/null
+++ b/config.xml
@@ -0,0 +1,103 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>MyApp</name>
+    <description>An awesome Ionic/Cordova app.</description>
+    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <preference name="ScrollEnabled" value="false" />
+    <preference name="android-minSdkVersion" value="19" />
+    <preference name="BackupWebStorage" value="none" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="FadeSplashScreenDuration" value="300" />
+    <preference name="SplashShowOnlyFirstTime" value="false" />
+    <preference name="SplashScreen" value="screen" />
+    <preference name="SplashScreenDelay" value="3000" />
+    <platform name="android">
+        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
+            <application android:networkSecurityConfig="@xml/network_security_config" />
+        </edit-config>
+        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
+        <allow-intent href="market:*" />
+        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
+        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
+        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
+        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
+        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
+        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
+        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
+        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
+        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
+        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
+        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
+        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
+        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
+        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
+        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
+        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
+        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
+        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
+        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
+        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
+        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
+        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
+        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
+        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
+        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
+        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
+        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
+        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
+        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
+        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
+        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
+        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
+        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
+        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
+        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
+        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
+        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
+        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
+        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
+        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
+        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
+        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
+        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
+        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
+        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
+        <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
+        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
+        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
+        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
+        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
+        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
+        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
+        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
+        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
+        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
+        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
+        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
+        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
+        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
+        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
+    </platform>
+    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
+    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
+    <plugin name="cordova-plugin-device" spec="2.0.2" />
+    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
+    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
+    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
+    <engine name="android" spec="7.1.4" />
+</widget>
diff --git a/ionic.config.json b/ionic.config.json
index c0b7bd9..b2ee223 100644
--- a/ionic.config.json
+++ b/ionic.config.json
@@ -1,5 +1,7 @@
 {
   "name": "allorepar",
-  "integrations": {},
+  "integrations": {
+    "cordova": {}
+  },
   "type": "angular"
 }
diff --git a/package-lock.json b/package-lock.json
index c8278a6..c96512b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -831,6 +831,14 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.3.31",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.31.tgz",
+      "integrity": "sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/node": {
       "version": "12.0.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.10.tgz",
@@ -849,6 +857,11 @@
       "integrity": "sha512-lMC2G0ItF2xv4UCiwbJGbnJlIuUixHrioOhNGHSCsYCJ8l4t9hMCUimCytvFv7qy6AfSzRxhRHoGa+UqaqwyeA==",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -2573,6 +2586,246 @@
         "serialize-javascript": "^1.4.0"
       }
     },
+    "cordova-android": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/cordova-android/-/cordova-android-7.1.4.tgz",
+      "integrity": "sha512-Rtvu002I83uzfVyCsE6p2krFKVHt9TSAqZUATes+zH+o9cdxYGrLHY+PKCQo4SLCdSMdrkIHCDnQPTYTp/d7+g==",
+      "requires": {
+        "abbrev": "*",
+        "android-versions": "1.4.0",
+        "ansi": "*",
+        "balanced-match": "*",
+        "base64-js": "1.2.0",
+        "big-integer": "1.6.32",
+        "bplist-parser": "*",
+        "brace-expansion": "*",
+        "concat-map": "*",
+        "cordova-common": "2.2.5",
+        "cordova-registry-mapper": "*",
+        "elementtree": "0.1.6",
+        "glob": "5.0.15",
+        "inflight": "*",
+        "inherits": "*",
+        "minimatch": "*",
+        "nopt": "3.0.1",
+        "once": "*",
+        "path-is-absolute": "1.0.1",
+        "plist": "2.1.0",
+        "properties-parser": "0.2.3",
+        "q": "1.4.1",
+        "sax": "0.3.5",
+        "semver": "5.5.0",
+        "shelljs": "0.5.3",
+        "underscore": "*",
+        "unorm": "*",
+        "wrappy": "*",
+        "xmlbuilder": "8.2.2",
+        "xmldom": "*"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true
+        },
+        "android-versions": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "semver": "^5.4.1"
+          }
+        },
+        "ansi": {
+          "version": "0.3.1",
+          "bundled": true
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "base64-js": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "big-integer": {
+          "version": "1.6.32",
+          "bundled": true
+        },
+        "bplist-parser": {
+          "version": "0.1.1",
+          "bundled": true,
+          "requires": {
+            "big-integer": "^1.6.7"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "cordova-common": {
+          "version": "2.2.5",
+          "bundled": true,
+          "requires": {
+            "ansi": "^0.3.1",
+            "bplist-parser": "^0.1.0",
+            "cordova-registry-mapper": "^1.1.8",
+            "elementtree": "0.1.6",
+            "glob": "^5.0.13",
+            "minimatch": "^3.0.0",
+            "plist": "^2.1.0",
+            "q": "^1.4.1",
+            "shelljs": "^0.5.3",
+            "underscore": "^1.8.3",
+            "unorm": "^1.3.3"
+          }
+        },
+        "cordova-registry-mapper": {
+          "version": "1.1.15",
+          "bundled": true
+        },
+        "elementtree": {
+          "version": "0.1.6",
+          "bundled": true,
+          "requires": {
+            "sax": "0.3.5"
+          }
+        },
+        "glob": {
+          "version": "5.0.15",
+          "bundled": true,
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "nopt": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "plist": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "base64-js": "1.2.0",
+            "xmlbuilder": "8.2.2",
+            "xmldom": "0.1.x"
+          }
+        },
+        "properties-parser": {
+          "version": "0.2.3",
+          "bundled": true
+        },
+        "q": {
+          "version": "1.4.1",
+          "bundled": true
+        },
+        "sax": {
+          "version": "0.3.5",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.5.0",
+          "bundled": true
+        },
+        "shelljs": {
+          "version": "0.5.3",
+          "bundled": true
+        },
+        "underscore": {
+          "version": "1.9.1",
+          "bundled": true
+        },
+        "unorm": {
+          "version": "1.4.1",
+          "bundled": true
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "xmlbuilder": {
+          "version": "8.2.2",
+          "bundled": true
+        },
+        "xmldom": {
+          "version": "0.1.27",
+          "bundled": true
+        }
+      }
+    },
+    "cordova-plugin-device": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-2.0.2.tgz",
+      "integrity": "sha1-/Ajzci5n7ve2xnv8mag99q3Quro="
+    },
+    "cordova-plugin-ionic-keyboard": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz",
+      "integrity": "sha512-6ucQ6FdlLdBm8kJfFnzozmBTjru/0xekHP/dAhjoCZggkGRlgs8TsUJFkxa/bV+qi7Dlo50JjmpE4UMWAO+aOQ=="
+    },
+    "cordova-plugin-ionic-webview": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-4.1.1.tgz",
+      "integrity": "sha512-y8drBhMdkHKUr0zu+UGkFGsDrkCsxjbCd3RzzlyDxcEzdHWvasRM5gyDiKBHkziT2iHYzEAjXwkT1ZXKU3OY9Q=="
+    },
+    "cordova-plugin-splashscreen": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.2.tgz",
+      "integrity": "sha1-dH509W4gHNWFvGLRS8oZ9oZ/8e0="
+    },
+    "cordova-plugin-statusbar": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-statusbar/-/cordova-plugin-statusbar-2.4.2.tgz",
+      "integrity": "sha1-/B+9wNjXAzp+jh8ff/FnrJvU+vY="
+    },
+    "cordova-plugin-whitelist": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.3.tgz",
+      "integrity": "sha1-tehezbv+Wu3tQKG/TuI3LmfZb7Q="
+    },
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
@@ -5750,6 +6003,11 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-base64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -8297,6 +8555,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -8420,6 +8686,11 @@
         }
       }
     },
+    "sdp": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.9.0.tgz",
+      "integrity": "sha512-XAVZQO4qsfzVTHorF49zCpkdxiGmPNjA8ps8RcJGtGP3QJ/A8I9/SVg/QnkAFDMXIyGbHZBBFwYBw6WdnhT96w=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -10685,6 +10956,15 @@
         "webpack-core": "^0.6.8"
       }
     },
+    "webrtc-adapter": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.2.9.tgz",
+      "integrity": "sha512-98rcdbSqUBR+L+erotCFWgiPyYjCEq6NJYN/1Bl6cRl2CxSU3wanJlc4YdfWzaTGaK13ZVmHay2mlW4aOWXh0A==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.9.0"
+      }
+    },
     "websocket-driver": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
diff --git a/package.json b/package.json
index 790bea0..7acb07b 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,22 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.1.0",
+    "@types/jquery": "^3.3.31",
     "angular-calendar": "^0.27.14",
+    "cordova-android": "7.1.4",
+    "cordova-plugin-device": "^2.0.2",
+    "cordova-plugin-ionic-keyboard": "^2.1.3",
+    "cordova-plugin-ionic-webview": "^4.1.1",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-whitelist": "^1.3.3",
     "core-js": "^2.5.4",
     "date-fns": "^1.30.1",
     "ionic2-calendar": "^0.5.2",
+    "jquery": "^3.4.1",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
+    "webrtc-adapter": "^7.2.9",
     "zone.js": "~0.8.29"
   },
   "devDependencies": {
@@ -59,5 +69,20 @@
     "tslint": "~5.17.0",
     "typescript": "~3.1.6"
   },
-  "description": "An Ionic project"
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
+      "cordova-plugin-ionic-keyboard": {}
+    },
+    "platforms": [
+      "android"
+    ]
+  }
 }
diff --git a/resources/README.md b/resources/README.md
new file mode 100644
index 0000000..46c696e
--- /dev/null
+++ b/resources/README.md
@@ -0,0 +1,8 @@
+These are Cordova resources. You can replace icon.png and splash.png and run
+`ionic cordova resources` to generate custom icons and splash screens for your
+app. See `ionic cordova resources --help` for details.
+
+Cordova reference documentation:
+
+- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
+- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
diff --git a/resources/android/icon/drawable-hdpi-icon.png b/resources/android/icon/drawable-hdpi-icon.png
new file mode 100644
index 0000000..3f84fc1
Binary files /dev/null and b/resources/android/icon/drawable-hdpi-icon.png differ
diff --git a/resources/android/icon/drawable-ldpi-icon.png b/resources/android/icon/drawable-ldpi-icon.png
new file mode 100644
index 0000000..3de9b4f
Binary files /dev/null and b/resources/android/icon/drawable-ldpi-icon.png differ
diff --git a/resources/android/icon/drawable-mdpi-icon.png b/resources/android/icon/drawable-mdpi-icon.png
new file mode 100644
index 0000000..4b455d3
Binary files /dev/null and b/resources/android/icon/drawable-mdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xhdpi-icon.png b/resources/android/icon/drawable-xhdpi-icon.png
new file mode 100644
index 0000000..fe47ccc
Binary files /dev/null and b/resources/android/icon/drawable-xhdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xxhdpi-icon.png b/resources/android/icon/drawable-xxhdpi-icon.png
new file mode 100644
index 0000000..391b4af
Binary files /dev/null and b/resources/android/icon/drawable-xxhdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xxxhdpi-icon.png b/resources/android/icon/drawable-xxxhdpi-icon.png
new file mode 100644
index 0000000..09e50b7
Binary files /dev/null and b/resources/android/icon/drawable-xxxhdpi-icon.png differ
diff --git a/resources/android/splash/drawable-land-hdpi-screen.png b/resources/android/splash/drawable-land-hdpi-screen.png
new file mode 100644
index 0000000..74abe28
Binary files /dev/null and b/resources/android/splash/drawable-land-hdpi-screen.png differ
diff --git a/resources/android/splash/drawable-land-ldpi-screen.png b/resources/android/splash/drawable-land-ldpi-screen.png
new file mode 100644
index 0000000..b224ba8
Binary files /dev/null and b/resources/android/splash/drawable-land-ldpi-screen.png differ
diff --git a/resources/android/splash/drawable-land-mdpi-screen.png b/resources/android/splash/drawable-land-mdpi-screen.png
new file mode 100644
index 0000000..f18770e
Binary files /dev/null and b/resources/android/splash/drawable-land-mdpi-screen.png differ
diff --git a/resources/android/splash/drawable-land-xhdpi-screen.png b/resources/android/splash/drawable-land-xhdpi-screen.png
new file mode 100644
index 0000000..76eab0d
Binary files /dev/null and b/resources/android/splash/drawable-land-xhdpi-screen.png differ
diff --git a/resources/android/splash/drawable-land-xxhdpi-screen.png b/resources/android/splash/drawable-land-xxhdpi-screen.png
new file mode 100644
index 0000000..b15925d
Binary files /dev/null and b/resources/android/splash/drawable-land-xxhdpi-screen.png differ
diff --git a/resources/android/splash/drawable-land-xxxhdpi-screen.png b/resources/android/splash/drawable-land-xxxhdpi-screen.png
new file mode 100644
index 0000000..4b22b8b
Binary files /dev/null and b/resources/android/splash/drawable-land-xxxhdpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-hdpi-screen.png b/resources/android/splash/drawable-port-hdpi-screen.png
new file mode 100644
index 0000000..c0c981b
Binary files /dev/null and b/resources/android/splash/drawable-port-hdpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-ldpi-screen.png b/resources/android/splash/drawable-port-ldpi-screen.png
new file mode 100644
index 0000000..dfba932
Binary files /dev/null and b/resources/android/splash/drawable-port-ldpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-mdpi-screen.png b/resources/android/splash/drawable-port-mdpi-screen.png
new file mode 100644
index 0000000..e5129fd
Binary files /dev/null and b/resources/android/splash/drawable-port-mdpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-xhdpi-screen.png b/resources/android/splash/drawable-port-xhdpi-screen.png
new file mode 100644
index 0000000..14ec839
Binary files /dev/null and b/resources/android/splash/drawable-port-xhdpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-xxhdpi-screen.png b/resources/android/splash/drawable-port-xxhdpi-screen.png
new file mode 100644
index 0000000..4df256f
Binary files /dev/null and b/resources/android/splash/drawable-port-xxhdpi-screen.png differ
diff --git a/resources/android/splash/drawable-port-xxxhdpi-screen.png b/resources/android/splash/drawable-port-xxxhdpi-screen.png
new file mode 100644
index 0000000..53f97f9
Binary files /dev/null and b/resources/android/splash/drawable-port-xxxhdpi-screen.png differ
diff --git a/resources/android/xml/network_security_config.xml b/resources/android/xml/network_security_config.xml
new file mode 100644
index 0000000..de61259
--- /dev/null
+++ b/resources/android/xml/network_security_config.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">localhost</domain>
+    </domain-config>
+</network-security-config>
diff --git a/resources/icon.png b/resources/icon.png
new file mode 100644
index 0000000..bee7766
Binary files /dev/null and b/resources/icon.png differ
diff --git a/resources/ios/icon/icon-1024.png b/resources/ios/icon/icon-1024.png
new file mode 100644
index 0000000..be633f4
Binary files /dev/null and b/resources/ios/icon/icon-1024.png differ
diff --git a/resources/ios/icon/icon-20.png b/resources/ios/icon/icon-20.png
new file mode 100644
index 0000000..08993e0
Binary files /dev/null and b/resources/ios/icon/icon-20.png differ
diff --git a/resources/ios/icon/icon-20@2x.png b/resources/ios/icon/icon-20@2x.png
new file mode 100644
index 0000000..acbecd2
Binary files /dev/null and b/resources/ios/icon/icon-20@2x.png differ
diff --git a/resources/ios/icon/icon-20@3x.png b/resources/ios/icon/icon-20@3x.png
new file mode 100644
index 0000000..00de715
Binary files /dev/null and b/resources/ios/icon/icon-20@3x.png differ
diff --git a/resources/ios/icon/icon-24@2x.png b/resources/ios/icon/icon-24@2x.png
new file mode 100644
index 0000000..4b455d3
Binary files /dev/null and b/resources/ios/icon/icon-24@2x.png differ
diff --git a/resources/ios/icon/icon-27.5@2x.png b/resources/ios/icon/icon-27.5@2x.png
new file mode 100644
index 0000000..c623f27
Binary files /dev/null and b/resources/ios/icon/icon-27.5@2x.png differ
diff --git a/resources/ios/icon/icon-29.png b/resources/ios/icon/icon-29.png
new file mode 100644
index 0000000..8a55da5
Binary files /dev/null and b/resources/ios/icon/icon-29.png differ
diff --git a/resources/ios/icon/icon-29@2x.png b/resources/ios/icon/icon-29@2x.png
new file mode 100644
index 0000000..185277b
Binary files /dev/null and b/resources/ios/icon/icon-29@2x.png differ
diff --git a/resources/ios/icon/icon-29@3x.png b/resources/ios/icon/icon-29@3x.png
new file mode 100644
index 0000000..3393f84
Binary files /dev/null and b/resources/ios/icon/icon-29@3x.png differ
diff --git a/resources/ios/icon/icon-40.png b/resources/ios/icon/icon-40.png
new file mode 100644
index 0000000..acbecd2
Binary files /dev/null and b/resources/ios/icon/icon-40.png differ
diff --git a/resources/ios/icon/icon-40@2x.png b/resources/ios/icon/icon-40@2x.png
new file mode 100644
index 0000000..61d82a7
Binary files /dev/null and b/resources/ios/icon/icon-40@2x.png differ
diff --git a/resources/ios/icon/icon-40@3x.png b/resources/ios/icon/icon-40@3x.png
new file mode 100644
index 0000000..cc349de
Binary files /dev/null and b/resources/ios/icon/icon-40@3x.png differ
diff --git a/resources/ios/icon/icon-44@2x.png b/resources/ios/icon/icon-44@2x.png
new file mode 100644
index 0000000..00a2ff3
Binary files /dev/null and b/resources/ios/icon/icon-44@2x.png differ
diff --git a/resources/ios/icon/icon-50.png b/resources/ios/icon/icon-50.png
new file mode 100644
index 0000000..9e9a5c1
Binary files /dev/null and b/resources/ios/icon/icon-50.png differ
diff --git a/resources/ios/icon/icon-50@2x.png b/resources/ios/icon/icon-50@2x.png
new file mode 100644
index 0000000..fe547b1
Binary files /dev/null and b/resources/ios/icon/icon-50@2x.png differ
diff --git a/resources/ios/icon/icon-60.png b/resources/ios/icon/icon-60.png
new file mode 100644
index 0000000..00de715
Binary files /dev/null and b/resources/ios/icon/icon-60.png differ
diff --git a/resources/ios/icon/icon-60@2x.png b/resources/ios/icon/icon-60@2x.png
new file mode 100644
index 0000000..cc349de
Binary files /dev/null and b/resources/ios/icon/icon-60@2x.png differ
diff --git a/resources/ios/icon/icon-60@3x.png b/resources/ios/icon/icon-60@3x.png
new file mode 100644
index 0000000..3898828
Binary files /dev/null and b/resources/ios/icon/icon-60@3x.png differ
diff --git a/resources/ios/icon/icon-72.png b/resources/ios/icon/icon-72.png
new file mode 100644
index 0000000..3f84fc1
Binary files /dev/null and b/resources/ios/icon/icon-72.png differ
diff --git a/resources/ios/icon/icon-72@2x.png b/resources/ios/icon/icon-72@2x.png
new file mode 100644
index 0000000..391b4af
Binary files /dev/null and b/resources/ios/icon/icon-72@2x.png differ
diff --git a/resources/ios/icon/icon-76.png b/resources/ios/icon/icon-76.png
new file mode 100644
index 0000000..971034a
Binary files /dev/null and b/resources/ios/icon/icon-76.png differ
diff --git a/resources/ios/icon/icon-76@2x.png b/resources/ios/icon/icon-76@2x.png
new file mode 100644
index 0000000..b538930
Binary files /dev/null and b/resources/ios/icon/icon-76@2x.png differ
diff --git a/resources/ios/icon/icon-83.5@2x.png b/resources/ios/icon/icon-83.5@2x.png
new file mode 100644
index 0000000..5f8dbb2
Binary files /dev/null and b/resources/ios/icon/icon-83.5@2x.png differ
diff --git a/resources/ios/icon/icon-86@2x.png b/resources/ios/icon/icon-86@2x.png
new file mode 100644
index 0000000..9798fc2
Binary files /dev/null and b/resources/ios/icon/icon-86@2x.png differ
diff --git a/resources/ios/icon/icon-98@2x.png b/resources/ios/icon/icon-98@2x.png
new file mode 100644
index 0000000..5ebd9db
Binary files /dev/null and b/resources/ios/icon/icon-98@2x.png differ
diff --git a/resources/ios/icon/icon-small.png b/resources/ios/icon/icon-small.png
new file mode 100644
index 0000000..8a55da5
Binary files /dev/null and b/resources/ios/icon/icon-small.png differ
diff --git a/resources/ios/icon/icon-small@2x.png b/resources/ios/icon/icon-small@2x.png
new file mode 100644
index 0000000..185277b
Binary files /dev/null and b/resources/ios/icon/icon-small@2x.png differ
diff --git a/resources/ios/icon/icon-small@3x.png b/resources/ios/icon/icon-small@3x.png
new file mode 100644
index 0000000..3393f84
Binary files /dev/null and b/resources/ios/icon/icon-small@3x.png differ
diff --git a/resources/ios/icon/icon.png b/resources/ios/icon/icon.png
new file mode 100644
index 0000000..a90d46c
Binary files /dev/null and b/resources/ios/icon/icon.png differ
diff --git a/resources/ios/icon/icon@2x.png b/resources/ios/icon/icon@2x.png
new file mode 100644
index 0000000..946c6ce
Binary files /dev/null and b/resources/ios/icon/icon@2x.png differ
diff --git a/resources/ios/splash/Default-2436h.png b/resources/ios/splash/Default-2436h.png
new file mode 100644
index 0000000..bdbeb9d
Binary files /dev/null and b/resources/ios/splash/Default-2436h.png differ
diff --git a/resources/ios/splash/Default-568h@2x~iphone.png b/resources/ios/splash/Default-568h@2x~iphone.png
new file mode 100644
index 0000000..5e9edf6
Binary files /dev/null and b/resources/ios/splash/Default-568h@2x~iphone.png differ
diff --git a/resources/ios/splash/Default-667h.png b/resources/ios/splash/Default-667h.png
new file mode 100644
index 0000000..2843fb3
Binary files /dev/null and b/resources/ios/splash/Default-667h.png differ
diff --git a/resources/ios/splash/Default-736h.png b/resources/ios/splash/Default-736h.png
new file mode 100644
index 0000000..21f2d42
Binary files /dev/null and b/resources/ios/splash/Default-736h.png differ
diff --git a/resources/ios/splash/Default-Landscape-2436h.png b/resources/ios/splash/Default-Landscape-2436h.png
new file mode 100644
index 0000000..763ae78
Binary files /dev/null and b/resources/ios/splash/Default-Landscape-2436h.png differ
diff --git a/resources/ios/splash/Default-Landscape-736h.png b/resources/ios/splash/Default-Landscape-736h.png
new file mode 100644
index 0000000..9c069f7
Binary files /dev/null and b/resources/ios/splash/Default-Landscape-736h.png differ
diff --git a/resources/ios/splash/Default-Landscape@2x~ipad.png b/resources/ios/splash/Default-Landscape@2x~ipad.png
new file mode 100644
index 0000000..35407a9
Binary files /dev/null and b/resources/ios/splash/Default-Landscape@2x~ipad.png differ
diff --git a/resources/ios/splash/Default-Landscape@~ipadpro.png b/resources/ios/splash/Default-Landscape@~ipadpro.png
new file mode 100644
index 0000000..75de9e0
Binary files /dev/null and b/resources/ios/splash/Default-Landscape@~ipadpro.png differ
diff --git a/resources/ios/splash/Default-Landscape~ipad.png b/resources/ios/splash/Default-Landscape~ipad.png
new file mode 100644
index 0000000..b74bbf6
Binary files /dev/null and b/resources/ios/splash/Default-Landscape~ipad.png differ
diff --git a/resources/ios/splash/Default-Portrait@2x~ipad.png b/resources/ios/splash/Default-Portrait@2x~ipad.png
new file mode 100644
index 0000000..d0c33f7
Binary files /dev/null and b/resources/ios/splash/Default-Portrait@2x~ipad.png differ
diff --git a/resources/ios/splash/Default-Portrait@~ipadpro.png b/resources/ios/splash/Default-Portrait@~ipadpro.png
new file mode 100644
index 0000000..363dd1c
Binary files /dev/null and b/resources/ios/splash/Default-Portrait@~ipadpro.png differ
diff --git a/resources/ios/splash/Default-Portrait~ipad.png b/resources/ios/splash/Default-Portrait~ipad.png
new file mode 100644
index 0000000..aad1deb
Binary files /dev/null and b/resources/ios/splash/Default-Portrait~ipad.png differ
diff --git a/resources/ios/splash/Default@2x~iphone.png b/resources/ios/splash/Default@2x~iphone.png
new file mode 100644
index 0000000..f0f16ef
Binary files /dev/null and b/resources/ios/splash/Default@2x~iphone.png differ
diff --git a/resources/ios/splash/Default@2x~universal~anyany.png b/resources/ios/splash/Default@2x~universal~anyany.png
new file mode 100644
index 0000000..c8fcc8f
Binary files /dev/null and b/resources/ios/splash/Default@2x~universal~anyany.png differ
diff --git a/resources/ios/splash/Default~iphone.png b/resources/ios/splash/Default~iphone.png
new file mode 100644
index 0000000..e5129fd
Binary files /dev/null and b/resources/ios/splash/Default~iphone.png differ
diff --git a/resources/splash.png b/resources/splash.png
new file mode 100644
index 0000000..960cb82
Binary files /dev/null and b/resources/splash.png differ
diff --git a/src/app/addaddress/addaddress.page.html b/src/app/addaddress/addaddress.page.html
index 37e7785..f544750 100644
--- a/src/app/addaddress/addaddress.page.html
+++ b/src/app/addaddress/addaddress.page.html
@@ -1,9 +1,68 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>addaddress</ion-title>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content>
+   <ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>ADD ADDRESS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+ <ion-content>
+    <div class="signup_wrapper">
+        <div class="signup_form">
+            <div class="row">
+              <p>Name</p>
+              <ion-input value="John Doe" type="text"></ion-input>
+            </div>
+            <div class="row">
+                <p>Phone Number</p>
+                <ion-row class="p0">
+                  <ion-col size="4">
+                    <ion-select placeholder="">
+                      <ion-select-option value="">+91</ion-select-option>
+                    </ion-select>
+                  </ion-col>
+                  <ion-col size="8">
+                    <ion-input value="" type="number"></ion-input>
+                  </ion-col>
+                </ion-row>
+            </div>
+            <div class="row">
+                <p>Country</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Country Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>District</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">District Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>City</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">City Name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>Area</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Area name</ion-select-option>
+                </ion-select>
+            </div>
+            <div class="row">
+                <p>House name/Building</p>
+                <ion-select placeholder="">
+                    <ion-select-option value="">Choose address</ion-select-option>
+                </ion-select>
+            </div>
+              <div class="row">
+                  <button class="signup_btn">Save</button>
+                </div>
 
-</ion-content>
+        </div>
+    </div>
+  </ion-content>
diff --git a/src/app/addaddress/addaddress.page.scss b/src/app/addaddress/addaddress.page.scss
index e69de29..390f310 100644
--- a/src/app/addaddress/addaddress.page.scss
+++ b/src/app/addaddress/addaddress.page.scss
@@ -0,0 +1,50 @@
+.signup_form{
+    padding: 15px;
+    .row{
+        margin-bottom: 15px;
+        p{
+            color: #4e4961;
+            padding: 10px;
+            margin: 0px;
+            padding-left: 20px;
+            font-weight: 500;
+            a{
+                color: #39267f;
+            }
+        }
+        h6{
+            color: #4e4961;
+            padding-left: 20px;
+            font-weight: 400;
+            font-size: 14px;
+
+        }
+        ion-input{
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important;
+        }
+
+        ion-select {
+            background: #dcdae9;
+            border-radius: 20px;
+            color:#39267f;
+            height: 40px;
+            font-weight: 600;
+            padding-left: 15px !important; 
+            padding-right: 20px;
+        }
+        .signup_btn{
+            height: 40px;
+            width: 100%;
+            color: #fff;
+            background-color: #39267f;
+            border-radius: 20px;
+            font-weight: 500;
+            font-size: 16px; 
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/addaddress/addaddress.page.ts b/src/app/addaddress/addaddress.page.ts
index 2df8c55..57e0212 100644
--- a/src/app/addaddress/addaddress.page.ts
+++ b/src/app/addaddress/addaddress.page.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-addaddress',
@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AddaddressPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
 
   ngOnInit() {
   }
 
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index fa7c39a..66cfcde 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,90 +1,93 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'start',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomePageModule'
+  },
+  {
+    path: 'list',
+    loadChildren: './list/list.module#ListPageModule'
+  },
+  { 
+    path: 'start',
+    loadChildren: './start/start.module#StartPageModule' 
+  },
+  { 
+    path: 'login',
+    loadChildren: './login/login.module#LoginPageModule' 
+  },
+  { 
+    path: 'forgot',
+    loadChildren: './forgot/forgot.module#ForgotPageModule'
+  },
+  { 
+    path: 'otp',
+    loadChildren: './otp/otp.module#OtpPageModule' 
+  },
+  { 
+    path: 'password',
+    loadChildren: './password/password.module#PasswordPageModule'
+  },
+  { 
+    path: 'addcar',
+    loadChildren: './addcar/addcar.module#AddcarPageModule' 
+  },
+  { 
+    path: 'roadassistance', 
+    loadChildren: './roadassistance/roadassistance.module#RoadassistancePageModule'
+  },
+  { 
+    path: 'booking',
+    loadChildren: './booking/booking.module#BookingPageModule' 
+  },
+  { 
+    path: 'servicecompleted',
+    loadChildren: './servicecompleted/servicecompleted.module#ServicecompletedPageModule'
+   },
+  { 
+    path: 'accepted',
+    loadChildren: './accepted/accepted.module#AcceptedPageModule'
+  },
+  { 
+    path: 'review',
+    loadChildren: './review/review.module#ReviewPageModule'
+  },
+  { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
+  { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
+  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
+  { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
+  { path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
+  { path: 'carlist', loadChildren: './carlist/carlist.module#CarlistPageModule' },
+  { path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
+  { path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
+  { path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
+  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
+  { path: 'selectservices', loadChildren: './selectservices/selectservices.module#SelectservicesPageModule' },
+  { path: 'date', loadChildren: './date/date.module#DatePageModule' },
+  { path: 'summary', loadChildren: './summary/summary.module#SummaryPageModule' },
+  { path: 'waiting1', loadChildren: './waiting1/waiting1.module#Waiting1PageModule' },
+  { path: 'available', loadChildren: './available/available.module#AvailablePageModule' },
+  { path: 'bookservice', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
+  { path: 'cancel', loadChildren: './cancel/cancel.module#CancelPageModule' },
+  { path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
+  { path: 'productbooking', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
+  { path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' },
  { path: 'deliveryaddress', loadChildren: './deliveryaddress/deliveryaddress.module#DeliveryaddressPageModule' },
+  { path: 'partproduct', loadChildren: './partproduct/partproduct.module#PartproductPageModule' },
+  { path: 'orderdetails', loadChildren: './orderdetails/orderdetails.module#OrderdetailsPageModule' }
 
-const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'start',
-    pathMatch: 'full'
-  },
-  {
-    path: 'home',
-    loadChildren: './home/home.module#HomePageModule'
-  },
-  {
-    path: 'list',
-    loadChildren: './list/list.module#ListPageModule'
-  },
-  { 
-    path: 'start',
-    loadChildren: './start/start.module#StartPageModule' 
-  },
-  { 
-    path: 'login',
-    loadChildren: './login/login.module#LoginPageModule' 
-  },
-  { 
-    path: 'forgot',
-    loadChildren: './forgot/forgot.module#ForgotPageModule'
-  },
-  { 
-    path: 'otp',
-    loadChildren: './otp/otp.module#OtpPageModule' 
-  },
-  { 
-    path: 'password',
-    loadChildren: './password/password.module#PasswordPageModule'
-  },
-  { 
-    path: 'addcar',
-    loadChildren: './addcar/addcar.module#AddcarPageModule' 
-  },
-  { 
-    path: 'roadassistance', 
-    loadChildren: './roadassistance/roadassistance.module#RoadassistancePageModule'
-  },
-  { 
-    path: 'booking',
-    loadChildren: './booking/booking.module#BookingPageModule' 
-  },
-  { 
-    path: 'servicecompleted',
-    loadChildren: './servicecompleted/servicecompleted.module#ServicecompletedPageModule'
-   },
-  { 
-    path: 'accepted',
-    loadChildren: './accepted/accepted.module#AcceptedPageModule'
-  },
-  { 
-    path: 'review',
-    loadChildren: './review/review.module#ReviewPageModule'
-  },
-  { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
-  { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
-  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
-  { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' },
-  { path: 'profilephoto', loadChildren: './profilephoto/profilephoto.module#ProfilephotoPageModule' },
-  { path: 'carlist', loadChildren: './carlist/carlist.module#CarlistPageModule' },
-  { path: 'servicedetails', loadChildren: './servicedetails/servicedetails.module#ServicedetailsPageModule' },
-  { path: 'myorders', loadChildren: './myorders/myorders.module#MyordersPageModule' },
-  { path: 'general', loadChildren: './general/general.module#GeneralPageModule' },
-  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
-  { path: 'selectservices', loadChildren: './selectservices/selectservices.module#SelectservicesPageModule' },
-  { path: 'date', loadChildren: './date/date.module#DatePageModule' },
-  { path: 'summary', loadChildren: './summary/summary.module#SummaryPageModule' },
-  { path: 'waiting1', loadChildren: './waiting1/waiting1.module#Waiting1PageModule' },
-  { path: 'available', loadChildren: './available/available.module#AvailablePageModule' },
-  { path: 'bookservice', loadChildren: './bookservice/bookservice.module#BookservicePageModule' },
-  { path: 'cancel', loadChildren: './cancel/cancel.module#CancelPageModule' },
-  { path: 'purchaseparts', loadChildren: './purchaseparts/purchaseparts.module#PurchasepartsPageModule' },
-  { path: 'productbooking', loadChildren: './productbooking/productbooking.module#ProductbookingPageModule' },
-  { path: 'addaddress', loadChildren: './addaddress/addaddress.module#AddaddressPageModule' }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0abf507..e4b4ebe 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,13 +26,14 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     IonicModule.forRoot(),
     AppRoutingModule,
     CalendarModule.forRoot({
       provide: DateAdapter,
       useFactory: adapterFactory
-    }),
-    BrowserAnimationsModule
+    })
+
   ],
   providers: [
     StatusBar,
diff --git a/src/app/app.scss b/src/app/app.scss
index 0e8b662..be6972b 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -325,6 +325,7 @@ box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.5);
 
 
 
+
 .nav_btn{
     width:50px;
     height:50px;
diff --git a/src/app/carlist/carlist.page.scss b/src/app/carlist/carlist.page.scss
index a2fd821..da44b05 100644
--- a/src/app/carlist/carlist.page.scss
+++ b/src/app/carlist/carlist.page.scss
@@ -8,6 +8,8 @@
     padding: 4px;
 }
 
+
+
 .carlist{
     padding:10px;
     ul{
diff --git a/src/app/deliveryaddress/deliveryaddress.module.ts b/src/app/deliveryaddress/deliveryaddress.module.ts
new file mode 100644
index 0000000..f7b9353
--- /dev/null
+++ b/src/app/deliveryaddress/deliveryaddress.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { DeliveryaddressPage } from './deliveryaddress.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DeliveryaddressPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [DeliveryaddressPage]
+})
+export class DeliveryaddressPageModule {}
diff --git a/src/app/deliveryaddress/deliveryaddress.page.html b/src/app/deliveryaddress/deliveryaddress.page.html
new file mode 100644
index 0000000..7ff7fb1
--- /dev/null
+++ b/src/app/deliveryaddress/deliveryaddress.page.html
@@ -0,0 +1,22 @@
+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>DELIVERY ADDRESS</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+        <div class="add_car">
+          +
+        </div>
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="delivery_wrapper">
+    <ul>
+      <li>adadd</li>
+      <li>adadd</li>
+      <li>adadd</li>
+    </ul>
+  </div>
+</ion-content>
diff --git a/src/app/deliveryaddress/deliveryaddress.page.scss b/src/app/deliveryaddress/deliveryaddress.page.scss
new file mode 100644
index 0000000..a1d246b
--- /dev/null
+++ b/src/app/deliveryaddress/deliveryaddress.page.scss
@@ -0,0 +1,26 @@
+.add_car{
+    background-color: #39267f;
+    color: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    font-size: 30px;
+    padding: 4px;
+}
+.delivery_wrapper{
+    padding:15px;
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            list-style: none;
+            padding: 20px;
+            border-radius: 15px;
+            margin-bottom: 10px;
+            -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+            box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/deliveryaddress/deliveryaddress.page.spec.ts b/src/app/deliveryaddress/deliveryaddress.page.spec.ts
new file mode 100644
index 0000000..4ef9056
--- /dev/null
+++ b/src/app/deliveryaddress/deliveryaddress.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeliveryaddressPage } from './deliveryaddress.page';
+
+describe('DeliveryaddressPage', () => {
+  let component: DeliveryaddressPage;
+  let fixture: ComponentFixture<DeliveryaddressPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeliveryaddressPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeliveryaddressPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/deliveryaddress/deliveryaddress.page.ts b/src/app/deliveryaddress/deliveryaddress.page.ts
new file mode 100644
index 0000000..37d291c
--- /dev/null
+++ b/src/app/deliveryaddress/deliveryaddress.page.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-deliveryaddress',
+  templateUrl: './deliveryaddress.page.html',
+  styleUrls: ['./deliveryaddress.page.scss'],
+})
+export class DeliveryaddressPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index f10f967..1e9e5f3 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -313,4 +313,4 @@
       font-weight: 400;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index a297b75..1432521 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
@@ -21,6 +21,8 @@ import { trigger, transition, animate, style } from '@angular/animations';
 })
 export class HomePage {
 
+
+
   menuShow = false;
   login= true;
   constructor(
diff --git a/src/app/myorders/myorders.page.html b/src/app/myorders/myorders.page.html
index 2c173a0..608432d 100644
--- a/src/app/myorders/myorders.page.html
+++ b/src/app/myorders/myorders.page.html
@@ -2,74 +2,76 @@
     <div class="app_header">
         <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
         </button>
-      <div class="nav_title floatLeft"><h4>MY ORDERS</h4></div>
-      <button class="nav_btn nav_btn_text floatRight">
+        <div class="nav_title floatLeft">
+            <h4>MY ORDERS</h4>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
 
         </button>
-      <div class="clear"></div>
-  </div>
+        <div class="clear"></div>
+    </div>
 </ion-header>
 <ion-content>
-  <div class="services_wrapper">
-    <h4>Pending Orders</h4>
-    <ul>
-      <li class="up_comingborder" (click)="goToPage('servicedetails')">
-        <div class="pic floatLeft">
-          <img src="../../assets/img/asset_shop1.png">
-        </div>
-        <div class="pic_detail floatLeft">
-          <h5>Presto towing service</h5>
-          <h6><strong>Rolls Royce</strong> Ghost</h6>
-          <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-        </div>
-        <div class="clear"></div>
-      </li>
-      <h4>February</h4>
-      <li (click)="goToPage('servicedetails')">
-          <div class="clear"></div>
-          <div class="pic floatLeft">
-              <img src="../../assets/img/asset_shop1.png">
-          </div>
-          <div class="pic_detail floatLeft">
-            
-              <h5>Presto towing service</h5>
-              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-          </div>
-          <div class="clear"></div>
-      </li>
-      <li (click)="goToPage('servicedetails')">
-          <div class="pic floatLeft">
-            <img src="../../assets/img/asset_shop1.png">
-          </div>
-          <div class="pic_detail floatLeft">
-            <h5>Presto towing service</h5>
-            <h6><strong>Rolls Royce</strong> Ghost</h6>
-            <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-          </div>
-          <div class="clear"></div>
-        </li>
-        <li (click)="goToPage('servicedetails')">
-            <div class="pic floatLeft">
-              <img src="../../assets/img/asset_shop1.png">
-            </div>
-            <div class="pic_detail floatLeft">
-              <h5>Presto towing service</h5>
-              <h6><strong>Rolls Royce</strong> Ghost</h6>
-              <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-            </div>
-            <div class="clear"></div>
-          </li>
-          <li (click)="goToPage('servicedetails')">
-              <div class="pic floatLeft">
-                <img src="../../assets/img/asset_shop1.png">
-              </div>
-              <div class="pic_detail floatLeft">
-                <h5>Presto towing service</h5>
-                <h6><strong>Rolls Royce</strong> Ghost</h6>
-                <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
-              </div>
-              <div class="clear"></div>
+    <div class="services_wrapper">
+        <h4>Pending Orders</h4>
+        <ul>
+            <li class="up_comingborder" (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <h4>February</h4>
+            <li (click)="goToPage('servicedetails')">
+                <div class="clear"></div>
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+
+                    <h5>Presto towing service</h5>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
+            </li>
+            <li (click)="goToPage('servicedetails')">
+                <div class="pic floatLeft">
+                    <img src="../../assets/img/asset_shop1.png">
+                </div>
+                <div class="pic_detail floatLeft">
+                    <h5>Presto towing service</h5>
+                    <h6><strong>Rolls Royce</strong> Ghost</h6>
+                    <p class="p0 arrow">July 26th 2019, 10:00 AM - 10:30 AM</p>
+                </div>
+                <div class="clear"></div>
             </li>
-    </ul>
-  </div>
-</ion-content>
+        </ul>
+    </div>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/orderdetails/orderdetails.module.ts b/src/app/orderdetails/orderdetails.module.ts
new file mode 100644
index 0000000..a2b595b
--- /dev/null
+++ b/src/app/orderdetails/orderdetails.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { OrderdetailsPage } from './orderdetails.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrderdetailsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OrderdetailsPage]
+})
+export class OrderdetailsPageModule {}
diff --git a/src/app/orderdetails/orderdetails.page.html b/src/app/orderdetails/orderdetails.page.html
new file mode 100644
index 0000000..d4fbdc2
--- /dev/null
+++ b/src/app/orderdetails/orderdetails.page.html
@@ -0,0 +1,168 @@
+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+    </button>
+        <div class="nav_title floatLeft">
+            <h4>MEGA 3 Inch Band P200</h4>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+    </button>
+        <div class="clear"></div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="order_detail_wrapper">
+        <div class="order_detail_banner">
+            <img src="../../assets/img/aaset_verified.png">
+            <h6>Order Delivered</h6>
+        </div>
+        <div class="order_detail_content">
+            <div class="progress_line">
+                <div class="status_progress"></div>
+            </div>
+            <ul>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
+                        <h4>Order Confirmed</h4>
+                        <p>June 8th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(0)">
+                        <ul>
+                            <li>
+                                <h5>Approved by allo repar</h5>
+                                <h6>June 8th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
+                        <h4>Product Packed</h4>
+                        <p>June 10th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(1)">
+                        <ul>
+                            <li>
+                                <h5>Collected by courier partner</h5>
+                                <h6>June 11th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">
+                        <h4>Shipped</h4>
+                        <p>June 14th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(2)">
+                        <ul>
+                            <li>
+                                <h5>Product has been shipped</h5>
+                                <h6>June 14th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(3)" [ngClass]="{active:isGroupShown(3)}">
+                        <h4>Out for Delivery</h4>
+                        <p>June 15th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(3)">
+                        <ul>
+                            <li>
+                                <h5>Product is out for delivery</h5>
+                                <h6>June 15th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="status_head" (click)="toggleGroup(4)" [ngClass]="{active:isGroupShown(4)}">
+                        <h4>Delivered</h4>
+                        <p>June 15th 2019</p>
+                    </div>
+                    <div class="status_details" *ngIf="isGroupShown(4)">
+                        <ul>
+                            <li>
+                                <h5>Product has been delivered</h5>
+                                <h6>June 15th 2019</h6>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="product_inner">
+            <h5>Mega 3 Inch Band P200</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <div class="carlist">
+                <ul>
+                    <li>
+                        <div class="auto_pic"></div>
+                        <div class="auto_detail">
+                            <h4><strong>Rolls Royce</strong> Ghost</h4>
+                            <div class="auto_detail_inner">
+                                <p>Mileage: 08 - 12</p>
+                                <p>Model: 2019</p>
+                            </div>
+                        </div>
+                        <div class="clear"></div>
+                    </li>
+                </ul>
+            </div>
+            <h5>Details</h5>
+            <h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
+            <h6>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all
+                customers from motorists.</h6>
+
+        </div>
+    </div>
+    <div class="total_footer">
+        <div class="detail_tab">
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Product Amount</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$230</p>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Labour Charge</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$50</p>
+                </ion-col>
+            </ion-row>
+        </div>
+        <div class="total_amount">
+            <div class="total_inner">
+                <ion-row>
+                    <ion-col>
+                        <p class="textLeft">Total Amount</p>
+                    </ion-col>
+                    <ion-col>
+                        <p class="textRight">$<strong>280</strong></p>
+                    </ion-col>
+                </ion-row>
+            </div>
+        </div>
+        <div class="widthFull textCenter">
+            <button class="signup_btn">Purchase</button>
+        </div>
+    </div>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/orderdetails/orderdetails.page.scss b/src/app/orderdetails/orderdetails.page.scss
new file mode 100644
index 0000000..007315a
--- /dev/null
+++ b/src/app/orderdetails/orderdetails.page.scss
@@ -0,0 +1,257 @@
+.order_detail_wrapper {
+    .order_detail_banner {
+        width: 100%;
+        height: 130px;
+        padding-top: 15px;
+        background-image: url("../../assets/img/assets_orderdetails.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        text-align: center;
+        img {
+            width: 45px;
+        }
+        h6 {
+            color: #fff;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 400;
+            padding-top: 8px;
+            margin: 0px;
+        }
+    }
+    .order_detail_content {
+        padding: 20px;
+        position: relative;
+        margin-left: 25px;
+        .progress_line {
+            position: absolute;
+            top: 50px;
+            left: 0px;
+            bottom: 15%;
+            width: 3px;
+            background: #9c97b7;
+            border-radius: 20px;
+            .status_progress {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                height: 25%;
+                right: 0px;
+                width: 100%;
+                border-radius: 20px;
+                background-color: #28be57;
+            }
+        }
+        ul {
+            margin: 0px;
+            padding: 0px;
+            li {
+                list-style: none;
+                .status_head {
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    h4 {
+                        margin: 0px;
+                        color: #282438;
+                        width: 80%;
+                        background-image: url("../../assets/img/asset_down_arrow.png");
+                        background-position: right;
+                        background-repeat: no-repeat;
+                        background-size: 15px;
+                        padding-bottom: 2px;
+                        font-size: 16px;
+                    }
+                    p {
+                        margin: 0px;
+                        color: #282438;
+                        font-size: 12px;
+                    }
+                }
+                .status_details {
+                    margin-left: 30px;
+                    ul {
+                        border-left: 2px dashed #4e4961;
+                        padding-top: 5px;
+                        padding-bottom: 5px;
+                        li {
+                            padding: 5px;
+                            padding-left: 20px;
+                            h5 {
+                                margin: 0px;
+                                color: #282438;
+                                font-size: 16px;
+                                padding-bottom: 4px;
+                            }
+                            h6 {
+                                margin: 0px;
+                                color: #9c97b7;
+                                font-size: 13px;
+                                font-weight: 400;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .product_inner {
+        padding: 15px;
+        h5 {
+            margin: 0px;
+            padding-bottom: 5px;
+        }
+        .rating {
+            border: none;
+            width: 100px;
+            margin: 0px;
+            padding: 0px;
+        }
+        .rating>input {
+            display: none;
+        }
+        .rating>label:before {
+            margin: 2px;
+            font-size: 17px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+        }
+        .rating>.half:before {
+            content: "\f089";
+            position: absolute;
+        }
+        .rating>label {
+            color: #dcdae9;
+            float: right;
+        }
+        /***** CSS Magic to Highlight Stars on Hover *****/
+        .rating>input:checked~label,
+        /* show gold star when clicked */
+        .rating:not(:checked)>label:hover,
+        /* hover current star */
+        .rating:not(:checked)>label:hover~label {
+            color: #FFD700;
+        }
+        /* hover previous stars in list */
+        .rating>input:checked+label:hover,
+        /* hover current star when changing rating */
+        .rating>input:checked~label:hover,
+        .rating>label:hover~input:checked~label,
+        /* lighten current selection */
+        .rating>input:checked~label:hover~label {
+            color: #FFED85;
+        }
+        p {
+            margin: 0px;
+            padding-top: 5px;
+            font-size: 12px;
+        }
+        h6 {
+            text-align: justify;
+            color: #4e4961;
+        }
+        .carlist {
+            padding: 10px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    list-style: none;
+                    border-radius: 15px;
+                    margin-bottom: 10px;
+                    .auto_pic {
+                        width: 60px;
+                        height: 60px;
+                        -webkit-box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        -moz-box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        box-shadow: 0px 0px 19px 0px rgba(135, 105, 244, 0.49);
+                        border-radius: 15px;
+                        float: left;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 15px;
+                            object-fit: cover;
+                            object-position: center;
+                        }
+                    }
+                    .auto_detail {
+                        float: left;
+                        width: calc(100% - 60px);
+                        padding-left: 15px;
+                        h4 {
+                            margin: 0px;
+                            padding: 0px;
+                            color: #282438;
+                            font-weight: 400;
+                            padding-bottom: 5px;
+                            font-size: 17px;
+                            strong {
+                                font-weight: 600;
+                            }
+                        }
+                        .auto_detail_inner {
+                            border-left: 1px dashed #4e4961;
+                            margin-left: 10px;
+                            padding-left: 15px;
+                            p {
+                                margin: 0px;
+                                padding: 0px;
+                                color: #a29ebf;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.total_footer {
+    padding: 15px;
+    .detail_tab {
+        width: 100%;
+        margin-bottom: 15px;
+        p {
+            margin: 0px;
+            padding: 0px;
+            color: #282438;
+            font-weight: 500;
+            font-size: 16px;
+        }
+    }
+    .total_amount {
+        width: 100%;
+        padding: 0px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        .total_inner {
+            border: 2px dashed #4e4961;
+            padding: 5px;
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+        p {
+            margin: 0px;
+            padding: 0px;
+            color: #282438;
+            font-weight: 500;
+            font-size: 16px;
+        }
+    }
+    .signup_btn {
+        height: 40px;
+        width: 85%;
+        color: #fff;
+        background-color: #39267f;
+        border-radius: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        margin-top: 20px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/orderdetails/orderdetails.page.spec.ts b/src/app/orderdetails/orderdetails.page.spec.ts
new file mode 100644
index 0000000..5a8e1c7
--- /dev/null
+++ b/src/app/orderdetails/orderdetails.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderdetailsPage } from './orderdetails.page';
+
+describe('OrderdetailsPage', () => {
+  let component: OrderdetailsPage;
+  let fixture: ComponentFixture<OrderdetailsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderdetailsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderdetailsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/orderdetails/orderdetails.page.ts b/src/app/orderdetails/orderdetails.page.ts
new file mode 100644
index 0000000..55791c5
--- /dev/null
+++ b/src/app/orderdetails/orderdetails.page.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-orderdetails',
+  templateUrl: './orderdetails.page.html',
+  styleUrls: ['./orderdetails.page.scss'],
+})
+export class OrderdetailsPage implements OnInit {
+
+  shownGroup = null;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+
+    this.shownGroup = 0;
+    console.log(this.shownGroup);
+   
+
+  }
+
+  ngOnInit() {
+  }
+
+
+
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+
+  isGroupShown(group) {
+    return this.shownGroup === group;
+  }
+
+  toggleGroup(group) {
+    if (this.isGroupShown(group)) {
+      this.shownGroup = null;
+    } else {
+      this.shownGroup = group;
+    }
+  }
+   
+
+
+}
diff --git a/src/app/partproduct/partproduct.module.ts b/src/app/partproduct/partproduct.module.ts
new file mode 100644
index 0000000..cfd6ee2
--- /dev/null
+++ b/src/app/partproduct/partproduct.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PartproductPage } from './partproduct.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PartproductPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PartproductPage]
+})
+export class PartproductPageModule {}
diff --git a/src/app/partproduct/partproduct.page.html b/src/app/partproduct/partproduct.page.html
new file mode 100644
index 0000000..37ff23a
--- /dev/null
+++ b/src/app/partproduct/partproduct.page.html
@@ -0,0 +1,106 @@
+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+      </button>
+        <div class="nav_title floatLeft">
+            <h4><span class="">Alreem Parts</span>
+                <div class="clear"></div>
+            </h4>
+            <div class="clear"></div>
+        </div>
+        <button class="nav_btn nav_btn_text floatRight">
+
+      </button>
+        <div class="clear"></div>
+    </div>
+</ion-header>
+<ion-content>
+    <div class="product_booking_wrapper">
+        <div class="product_slider">
+            <ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+                <ion-slide>
+                    <img src="../../assets/img/asset_slider1.png">
+                </ion-slide>
+            </ion-slides>
+            <div class="product_slider_nav">
+                <div class="product_nav_btn prev_btn" (click)="prev()"></div>
+                <div class="product_nav_btn next_btn" (click)="next()"></div>
+            </div>
+        </div>
+        <div class="product_inner">
+            <h5>Mega 3 Inch Band P200</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <div class="carlist">
+                <ul>
+                    <li>
+                        <div class="auto_pic"></div>
+                        <div class="auto_detail">
+                            <h4><strong>Rolls Royce</strong> Ghost</h4>
+                            <div class="auto_detail_inner">
+                                <p>Mileage: 08 - 12</p>
+                                <p>Model: 2019</p>
+                            </div>
+                        </div>
+                        <div class="clear"></div>
+                    </li>
+                </ul>
+            </div>
+            <h5>Details</h5>
+            <h6>We promise to help you find the best car tyres Dubai has to offer.</h6>
+            <h6>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all
+                customers from motorists.</h6>
+
+        </div>
+    </div>
+    <div class="total_footer">
+        <div class="detail_tab">
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Product Amount</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$230</p>
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col>
+                    <p class="textLeft">Labour Charge</p>
+                </ion-col>
+                <ion-col>
+                    <p class="textRight">$50</p>
+                </ion-col>
+            </ion-row>
+        </div>
+        <div class="total_amount">
+            <div class="total_inner">
+                <ion-row>
+                    <ion-col>
+                        <p class="textLeft">Total Amount</p>
+                    </ion-col>
+                    <ion-col>
+                        <p class="textRight">$<strong>280</strong></p>
+                    </ion-col>
+                </ion-row>
+            </div>
+        </div>
+        <button class="signup_btn">Purchase</button>
+    </div>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/partproduct/partproduct.page.scss b/src/app/partproduct/partproduct.page.scss
new file mode 100644
index 0000000..69f9185
--- /dev/null
+++ b/src/app/partproduct/partproduct.page.scss
@@ -0,0 +1,197 @@
+.product_booking_wrapper{
+    .product_slider{
+        width: 100%;
+        height:350px;
+        padding-top: 40px;
+        position: relative;
+        .product_slider_nav{
+            position: absolute;
+            top:40%;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            .product_nav_btn{
+                width: 50px;
+                height: 50px;
+                position: absolute;
+                background-position: center;
+                background-size:38px;
+                background-repeat: no-repeat;
+                z-index: 99;
+            }
+            .prev_btn{
+                left: 0px;
+                background-image: url("../../assets/img/asset_prev.png");
+            }
+            .next_btn{
+                right:0px;
+                background-image: url("../../assets/img/asset_next.png");
+            }
+        }
+        ion-slides{
+            height: 100%;
+            ion-slide{
+
+            }
+        }
+    }
+    .product_inner{
+        padding:15px;
+        h5{
+            margin: 0px;
+            padding-bottom: 5px;
+        }
+        .rating { 
+            border: none;
+            width:100px;
+            margin: 0px;
+            padding: 0px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:17px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+        p{
+            margin: 0px;
+            padding-top:5px;
+            font-size: 12px;
+        }
+
+        h6{
+            text-align: justify;
+            color: #4e4961;
+        }
+
+        .carlist{
+            padding:10px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            ul{
+                margin:0px;
+                padding:0px;
+                li{
+                    list-style: none;
+                    border-radius: 15px;
+                    margin-bottom: 10px;
+                    .auto_pic{
+                        width:60px;
+                        height:60px;
+                        -webkit-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        -moz-box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        box-shadow: 0px 0px 19px 0px rgba(135,105,244,0.49);
+                        border-radius:15px;
+                        float: left;
+                        img{
+                            width: 100%;
+                            height:100%;
+                            border-radius: 15px;
+                            object-fit: cover;
+                            object-position: center;
+                        }
+                    }
+                    .auto_detail{
+                        float: left;
+                        width: calc(100% - 60px);
+                        padding-left:15px;
+                        h4{
+                            margin:0px;
+                            padding: 0px;
+                            color: #282438;
+                            font-weight: 400;
+                            padding-bottom:5px;
+                            font-size: 17px;
+                            strong{
+                                font-weight: 600;
+                            }
+                        }
+                        .auto_detail_inner{
+                            border-left:1px dashed #4e4961;
+                            margin-left:10px;
+                            padding-left: 15px;
+                            p{
+                                margin:0px;
+                                padding: 0px;
+                                color: #a29ebf;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+      
+    }
+}
+
+.total_footer{
+    background-color: #e4e1ee;
+    padding:15px;
+    .detail_tab{
+        width: 100%;
+        margin-bottom: 15px;
+        p{
+            margin:0px;
+            padding:0px;
+            color: #282438;
+            font-weight:500;
+            font-size: 16px;
+        }
+    }
+    .total_amount{
+      width: 100%;
+        padding:0px;
+        padding-top:0px;
+        padding-bottom: 0px;
+        .total_inner{
+            border-top:2px dashed #4e4961;
+            padding: 5px;
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+        p{
+            margin:0px;
+            padding:0px;
+            color: #282438;
+            font-weight:500;
+            font-size: 16px;
+        }     
+  }
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+}
\ No newline at end of file
diff --git a/src/app/partproduct/partproduct.page.spec.ts b/src/app/partproduct/partproduct.page.spec.ts
new file mode 100644
index 0000000..18c9453
--- /dev/null
+++ b/src/app/partproduct/partproduct.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PartproductPage } from './partproduct.page';
+
+describe('PartproductPage', () => {
+  let component: PartproductPage;
+  let fixture: ComponentFixture<PartproductPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PartproductPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PartproductPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/partproduct/partproduct.page.ts b/src/app/partproduct/partproduct.page.ts
new file mode 100644
index 0000000..96ebc6e
--- /dev/null
+++ b/src/app/partproduct/partproduct.page.ts
@@ -0,0 +1,47 @@
+
+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-partproduct',
+  templateUrl: './partproduct.page.html',
+  styleUrls: ['./partproduct.page.scss'],
+})
+export class PartproductPage implements OnInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  slidesOpts = {
+    slidesPerView: 1
+  }
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
+}
diff --git a/src/app/productbooking/productbooking.page.html b/src/app/productbooking/productbooking.page.html
index 833bb4b..6a47393 100644
--- a/src/app/productbooking/productbooking.page.html
+++ b/src/app/productbooking/productbooking.page.html
@@ -10,5 +10,42 @@
   </div>
 </ion-header>
 <ion-content>
-
+  <div class="product_booking_wrapper">
+    <div class="product_slider">
+      <ion-slides pager="false" [options]="slidesOpts" (ionSlideDidChange)="slideChanged()">
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+        <ion-slide>
+          <img src="../../assets/img/asset_slider1.png">
+        </ion-slide>
+      </ion-slides>
+      <div class="product_slider_nav">
+        <div class="product_nav_btn prev_btn" (click)="prev()"></div>
+        <div class="product_nav_btn next_btn" (click)="next()"></div>
+      </div>
+    </div>
+    <div class="product_detail">
+      <div class="product_top"></div>
+      <div class="product_inner">
+        <div class="product_header">
+          <div class="product_name">
+              <h4>Mega 3 Inch Band P200</h4>
+              <hr>
+          </div>
+          <div class="product_btn">
+            Purchase
+          </div>
+          <div class="clear"></div>
+        </div>
+        <h5>Details</h5>
+        <p>We promise to help you find the best car tyres Dubai has to offer.
+          </p>
+          <p>There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists.</p>
+      </div>
+    </div>
+  </div>
 </ion-content>
diff --git a/src/app/productbooking/productbooking.page.scss b/src/app/productbooking/productbooking.page.scss
index e69de29..1f8262d 100644
--- a/src/app/productbooking/productbooking.page.scss
+++ b/src/app/productbooking/productbooking.page.scss
@@ -0,0 +1,91 @@
+.product_booking_wrapper{
+    .product_slider{
+        width: 100%;
+        height:350px;
+        padding-top: 40px;
+        position: relative;
+        .product_slider_nav{
+            position: absolute;
+            top:40%;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            .product_nav_btn{
+                width: 50px;
+                height: 50px;
+                position: absolute;
+                background-position: center;
+                background-size:38px;
+                background-repeat: no-repeat;
+                z-index: 99;
+            }
+            .prev_btn{
+                left: 0px;
+                background-image: url("../../assets/img/asset_prev.png");
+            }
+            .next_btn{
+                right:0px;
+                background-image: url("../../assets/img/asset_next.png");
+            }
+        }
+        ion-slides{
+            height: 100%;
+            ion-slide{
+
+            }
+        }
+    }
+
+    .product_detail{
+        position: fixed;
+        bottom: 0px;
+        left:0px;
+        right:0px;
+        z-index: 9;
+        .product_top{
+            width: 100%;
+            height:50px;
+            background: url("../../assets/img/asset_top_bg.png");
+        }
+        .product_inner{
+            padding:20px;
+            background-color: rgba(230, 228, 239,.9);
+            .product_header{
+                .product_name{
+                    width:calc(100% - 120px);
+                    float: left;
+                    h4{
+                        margin:0px;
+                        padding:0px;
+                        padding-bottom: 5px;
+                    }
+                    hr{
+                        border:2px solid #fbd339;
+                        height:0px;
+                        border-radius: 20px;
+                        width: 40px;
+                        margin-left: 0px;
+                    }
+                }
+                .product_btn{
+                    width:120px;
+                    float: left;
+                    text-align: center;
+                    background-color: #39267f;
+                    color: #fff;
+                    height:35px;
+                    padding: 7px;
+                    border-radius: 20px;
+                
+                }
+            }
+            h5{
+                color: #282438;
+            }
+            p{
+                color: #4e4961;
+                text-align: justify;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/productbooking/productbooking.page.ts b/src/app/productbooking/productbooking.page.ts
index 0357129..a8d66c0 100644
--- a/src/app/productbooking/productbooking.page.ts
+++ b/src/app/productbooking/productbooking.page.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+
+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
 import { Location } from '@angular/common';
 import { trigger, transition, animate, style } from '@angular/animations';
 import { Router,ActivatedRoute } from '@angular/router';
@@ -9,6 +11,8 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./productbooking.page.scss'],
 })
 export class ProductbookingPage implements OnInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
 
   constructor(
     private router: Router,
@@ -28,4 +32,16 @@ export class ProductbookingPage implements OnInit {
     this.location.back();
   }
 
+  slidesOpts = {
+    slidesPerView: 1
+  }
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
 }
diff --git a/src/assets/img/asset_down_arrow.png b/src/assets/img/asset_down_arrow.png
new file mode 100644
index 0000000..4d22394
Binary files /dev/null and b/src/assets/img/asset_down_arrow.png differ
diff --git a/src/assets/img/asset_next.png b/src/assets/img/asset_next.png
new file mode 100644
index 0000000..7bab039
Binary files /dev/null and b/src/assets/img/asset_next.png differ
diff --git a/src/assets/img/asset_prev.png b/src/assets/img/asset_prev.png
new file mode 100644
index 0000000..a8c9955
Binary files /dev/null and b/src/assets/img/asset_prev.png differ
diff --git a/src/assets/img/asset_slider1.png b/src/assets/img/asset_slider1.png
new file mode 100644
index 0000000..73f6535
Binary files /dev/null and b/src/assets/img/asset_slider1.png differ
diff --git a/src/assets/img/asset_top_bg.png b/src/assets/img/asset_top_bg.png
new file mode 100644
index 0000000..31630a0
Binary files /dev/null and b/src/assets/img/asset_top_bg.png differ
diff --git a/src/assets/img/assets_orderdetails.png b/src/assets/img/assets_orderdetails.png
new file mode 100644
index 0000000..30fee28
Binary files /dev/null and b/src/assets/img/assets_orderdetails.png differ
diff --git a/src/index.html b/src/index.html
index d2eb084..f271c26 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,24 +2,24 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <title>Ionic App</title>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
 
-  <base href="/" />
+    <base href="/" />
 
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 </head>
 
 <body>
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
 
-</html>
+</html>
\ No newline at end of file