diff --git a/config/carrier.php b/config/carrier.php
deleted file mode 100644
index c6da8a2f0..000000000
--- a/config/carrier.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php
-
-return [
-
-    'flatrate' => [
-        [
-            'code' => 'flatrate_one',
-            'title' => 'Flatrate One',
-            'name' => 'fixed 20% discount for today',
-            'description' => 'this is a flat rate',
-            'status' => '1',
-            'price' => '10',
-            'type' => [
-                    'per_unit' => 'Per Unit',
-                    'per order' => 'Per Order',
-                ],
-            'class' => 'Webkul\Shipping\Helper\Rate',
-        ],
-
-        [
-        'code' => 'flatrate_two',
-        'title' => 'Flatrate Two',
-        'name' => 'fixed 50% discount till 10/10/2018',
-        'description' => 'this is a flat rate',
-        'status' => '1',
-        'price' => '100',
-        'type' => [
-                'per unit' => 'Per Unit',
-                'per order' => 'Per Order',
-            ],
-        'class' => 'Webkul\Shipping\Helper\Rate',
-        ],
-
-        [
-        'code' => 'flatrate_three',
-        'title' => 'Flatrate Three',
-        'name' => 'fixed 30% discount',
-        'description' => 'this is a flat rate',
-        'status' => '1',
-        'price' => '1000',
-        'type' => [
-                'per unit' => 'Per Unit',
-                'per order' => 'Per Order',
-            ],
-        'class' => 'Webkul\Shipping\Helper\Rate',
-        ]
-    ]
-
-]
-
-?>
\ No newline at end of file
diff --git a/config/carriers.php b/config/carriers.php
new file mode 100644
index 000000000..87ef4edc0
--- /dev/null
+++ b/config/carriers.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    'flatrate' => [
+        'code' => 'flatrate',
+        'title' => 'Flatrate',
+        'description' => 'This is a flat rate',
+        'status' => '1',
+        'default_rate' => '10',
+        'type' => [
+                'per_unit' => 'Per Unit',
+                'per order' => 'Per Order',
+            ],
+        'class' => 'Webkul\Shipping\Carriers\FlatRate',
+    ]
+];
+
+?>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
index 836447e9d..6c9b5c3fc 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
@@ -4,7 +4,6 @@
     {{ __('admin::app.catalog.attributes.add-title') }}
 @stop
 
-
 @section('content')
     <div class="content">
         <form method="POST" action="{{ route('admin.catalog.attributes.store') }}" @submit.prevent="onSubmit">
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/inventories.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/inventories.blade.php
index 7c273c1e6..284ae0cb0 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/inventories.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/inventories.blade.php
@@ -18,7 +18,9 @@
             ?>
             <div class="control-group" :class="[errors.has('inventories[{{ $inventorySource->id }}]') ? 'has-error' : '']">
                 <label>{{ $inventorySource->name }}</label>
+
                 <input type="text" v-validate="'numeric|min:0'" name="inventories[{{ $inventorySource->id }}]" class="control" value="{{ $qty }}"/>
+                
                 <span class="control-error" v-if="errors.has('inventories[{{ $inventorySource->id }}]')">@{{ errors.first('inventories[{!! $inventorySource->id !!}]') }}</span>
             </div>
         
diff --git a/packages/Webkul/Admin/src/Resources/views/layouts/nav-left.blade.php b/packages/Webkul/Admin/src/Resources/views/layouts/nav-left.blade.php
index b1e948f9b..5abedf148 100644
--- a/packages/Webkul/Admin/src/Resources/views/layouts/nav-left.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/layouts/nav-left.blade.php
@@ -2,7 +2,7 @@
     <ul class="menubar">
         @foreach($menu->items as $menuItem)
             <li class="menu-item {{ $menu->getActive($menuItem) }}">
-                <a href="{{ $menuItem['url'] }}">
+                <a href="{{ count($menuItem['children']) ? current($menuItem['children'])['url'] : $menuItem['url'] }}">
                     <span class="icon {{ $menuItem['icon-class'] }}">
                     </span>
                     {{ $menuItem['name'] }}
diff --git a/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php b/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
index fc4a1d6c3..eef3ab6fd 100644
--- a/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
@@ -1,8 +1,7 @@
 @extends('admin::layouts.content')
 
 @section('page_title')
-
-@endsection
+    {{ __('admin::app.users.users.title') }}
 @stop
 
 @section('content')
diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 9145f8c18..a580a8789 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -32,84 +32,93 @@ class Cart {
 
     protected $customer;
 
-    public function __construct(CartRepository $cart, CartProductRepository $cartProduct, CustomerRepository $customer) {
+    //Cookie expiry limit in minutes
+    protected $minutes = 150;
+
+    public function __construct(CartRepository $cart, CartProductRepository $cartProduct, CustomerRepository $customer ,$minutes = 150) {
 
         $this->customer = $customer;
 
         $this->cart = $cart;
 
         $this->cartProduct = $cartProduct;
+
+        $this->minutes = $minutes;
     }
 
     public function guestUnitAdd($id) {
 
+        //empty array for storing the products
         $products = array();
 
-        $minutes = 10;
-
         if(Cookie::has('cart_session_id')) {
 
+            //getting the cart session id from cookie
             $cart_session_id = Cookie::get('cart_session_id');
 
+            //finding current cart instance in the database table.
             $current_cart = $this->cart->findOneByField('session_id', $cart_session_id);
 
-            // dd('Cookie = ',$cart_session_id, 'Session = ', session()->get('cart_session_id'), 'DB = ', $current_cart->session_id);
-
+            //check there is any cart or not
             if(isset($current_cart)) {
                 $current_cart_id = $current_cart['id'] ?? $current_cart->id;
 
                 $current_cart_session_id = $current_cart['session_id'] ?? $current_cart->session_id;
             } else {
+                //if someone deleted then take the flow to the normal
                 $this->repairCart($cart_session_id, $id);
             }
 
-
+            //matching the session id present in the cookie and database are same or not.
             if((session()->get('cart_session_id') == Cookie::get('cart_session_id')) && ($current_cart_session_id == session()->get('cart_session_id'))) {
                 $current_cart_products = array();
 
                 $current_cart_products = $this->cart->getProducts($current_cart_id);
 
+                //checking new product coming in the cart is new or previously added item.
                 foreach($current_cart_products as $key => $value) {
 
                     $product_id = $value['id'] ?? $value->id;
 
                     if($product_id == $id) {
+                        //create status code to communicate with session flash
                         session()->flash('error', 'Item Already In Cart');
 
+                        //remove this its temporary
                         dump('Item Already In Cart');
 
                         return redirect()->back();
                     }
                 }
 
+                //cart data being attached to the instace.
                 $cart_data = $this->cart->attach($current_cart_id, $id, 1);
 
+                //getting the products after being attached to cart instance
                 $cart_products = $this->cart->getProducts($current_cart_id);
 
+                //storing the information in session.
                 session()->put('cart_data', [$current_cart, $cart_products]);
 
-                session()->flash('Success', 'Item Added In Cart');
+                session()->flash('Success', 'Item Added To Cart Successfully');
 
                 dump($cart_products);
 
+                //return the control to the controller
                 return redirect()->back();
 
             } else {
-                // throw new \Exception('Error, Many or Few Session discrepancies found.');
-
+                //repair the cart, will remake the session
+                //and add the product in the new cart instance.
                 $this->repairCart($cart_session_id, $id);
             }
         } else {
+            //function call
             $this->createNewCart($id);
         }
     }
 
     /*helpers*/
-    public function makeCartSession($to_process) {
-        session()->put('cart_session_id', $to_process);
-
-        return session()->get('cart_session_id');
-    }
 
     /**
      * Create New Cart
@@ -117,23 +126,20 @@ class Cart {
      * Session.
      *
      * @return mixed
-     */
+    */
 
     public function createNewCart($id) {
-        $minutes = 120;
 
         $fresh_cart_session_id = session()->getId();
 
-        Cookie::queue('cart_session_id', $fresh_cart_session_id, $minutes);
-
-        $cart_session_id = $this->makeCartSession($fresh_cart_session_id);
-
         $data['session_id'] = $fresh_cart_session_id;
 
         $data['channel_id'] = core()->getCurrentChannel()->id;
 
         if($cart = $this->cart->create($data)) {
 
+            $this->makeCartSession($fresh_cart_session_id);
+
             $new_cart_id = $cart->id ?? $cart['id'];
 
             $cart_product['product_id'] = $id;
@@ -146,7 +152,7 @@ class Cart {
 
                 session()->put('cart_data', [$cart, $cart_product]);
 
-                session()->flash('success', 'Product Added To Cart');
+                session()->flash('success', 'Item Added To Cart Successfully');
 
                 return redirect()->back();
             }
@@ -156,6 +162,20 @@ class Cart {
         return redirect()->back();
     }
 
+    /**
+     * This makes session
+     * cart.
+     */
+    public function makeCartSession($cart_session_id) {
+
+        $fresh_cart_session_id = $cart_session_id;
+
+        Cookie::queue('cart_session_id', $fresh_cart_session_id, $this->minutes);
+
+        session()->put('cart_session_id', $fresh_cart_session_id);
+    }
+
+
     /**
      * Reset Session and
      * Cookie values
@@ -164,8 +184,7 @@ class Cart {
      *
      * @return mixed
      */
-
-    public function repairCart($cart_session_id, $product_id) {
+    public function repairCart($cart_session_id ="null", $product_id = 0) {
 
         if($cart_session_id == session()->get('cart_session_id')) {
             $data['session_id'] = $cart_session_id;
@@ -178,7 +197,7 @@ class Cart {
 
             $this->cart->attach($cart_id, $product_id, 1);
 
-            session()->flash('success', 'Product Added In Cart');
+            session()->flash('success', 'Item Added To Cart Successfully');
 
             return redirect()->back();
 
@@ -206,8 +225,8 @@ class Cart {
     public function guestUnitRemove($id) {
 
         //remove the products here
-        if(Cookie::has('session_c')) {
-            $products = unserialize(Cookie::get('session_c'));
+        if(Cookie::has('session_cart_id')) {
+            $products = unserialize(Cookie::get('session_cart_id'));
 
             foreach($products as $key => $value) {
                 if($value == $id) {
@@ -215,7 +234,7 @@ class Cart {
 
                     array_push($products, $id);
 
-                    Cookie::queue('session_c', serialize($products));
+                    Cookie::queue('session_cart_id', serialize($products));
 
                     return redirect()->back();
                 }
@@ -233,46 +252,80 @@ class Cart {
 
         $products = array();
 
-        // $customerLoggedIn = auth()->guard('customer')->check();
-
-        // //customer is authenticated
-        // if ($customerLoggedIn) {
-            //assuming that there is data in cookie and customer's cart also.
+        if(!auth()->guard('customer')->check()) {
+            throw new \Exception('This function is protected for auth customers only.');
+        }
 
         $data['customer_id'] = auth()->guard('customer')->user()->id;
 
         $data['channel_id'] = core()->getCurrentChannel()->id;
 
-        $customerCart = $this->cart->findOneByField('customer_id', $data['customer_id']);
+        $customer_cart = $this->cart->findOneByField('customer_id', $data['customer_id']);
 
         //if there are products already in cart of that customer.
-        $customerCartId = $customerCart->id ?? $customerCart['id'];
+        $customer_cart_id = $customer_cart->id ?? $customer_cart['id'];
 
-        $customerCartProducts = $this->cart->getProducts($customerCartId);
+        /**
+         * Check if their any
+         * instance of current
+         * customer in the cart
+         * table.
+         */
+        if(isset($customer_cart)) {
+            $customer_cart_products = $this->cart->getProducts($customer_cart_id);
 
-        if (isset($customerCartProducts)) {
+            if (isset($customer_cart_products)) {
 
-            foreach ($customerCartProducts as $previousCartProduct) {
+                foreach ($customer_cart_products as $customer_cart_product) {
+                    if($customer_cart_product->id == $id) {
+                        dump('Item already exists in cart');
 
-                if($previousCartProduct->id == $id) {
-                    dd('product already exists in cart');
+                        session()->flash('error', 'Item already exists in cart');
 
-                    session()->flash('error', 'Product already exists in cart');
+                        return redirect()->back();
 
-                    return redirect()->back();
+                        //maybe increase the quantity in here
+                    }
                 }
+                //add the product in the cart
+
+                $this->cart->attach($customer_cart_id, $id, 1);
+
+                session()->flash('success', 'Item Added To Cart Successfully');
+
+                return redirect()->back();
+            } else {
+                $this->cart->destroy($customer_cart_id);
+
+                session()->flash('error', 'Try Adding The Item Again');
+
+                dd('cart instance without any product found, delete it and create a new one for the current product id');
+
+                return redirect()->back();
             }
-            //add the product in the cart
+        } else {
+            /**
+             * this will work
+             * for logged in users
+             * and they do not have
+             * any cart instance
+             * found in the database.
+             */
 
-            $product['product_id'] = $id;
+            if($new_cart = $this->cart->create($data)) {
+                $new_cart_id = $new_cart->id ?? $new_cart['id'];
 
-            $product['quantity'] = 1;
+                $this->cart->attach($new_cart_id, $id, 1);
 
-            $product['cart_id'] = $customerCartId;
+                session()->flash('success', 'Item Added To Cart Successfully');
 
-            $this->cartProduct->create($product);
+                return redirect()->back();
 
-            return redirect()->back();
+            } else {
+                session()->flash('error', 'Cannot Add Item in Cart');
+
+                return redirect()->back();
+            }
         }
     }
 
@@ -295,105 +348,81 @@ class Cart {
     */
 
     public function mergeCart() {
-
+        //considering cookie as a source of truth.
         if(Cookie::has('cart_session_id')) {
+            /*
+                Check for previous cart of customer and
+                pull products from that cart instance
+                and then check for unique products
+                and delete the record with session id
+                and increase the quantity of the products
+                that are added again before deleting the
+                guest cart record.
+            */
 
+            //To hold the customer ID which is currently logged in
+            $customer_id = auth()->guard('customer')->user()->id;
+
+            //having the session id saved in the cart.
             $cart_session_id = Cookie::get('cart_session_id');
 
-            $current_cart = $this->cart->findOneByField('session_id', $cart_session_id);
+            //pull the record from cart table for above session id.
+            $guest_cart = $this->cart->findOneByField('session_id', $cart_session_id);
 
-            //it is impossible to not have an entry in cart table and cart_products.
-            //will later handle the exceoption.
-            $current_cart_id = $current_cart['id'] ?? $current_cart->id;
+            if(!isset($guest_cart)) {
+                dd('Some One Deleted Cart or it wasn\'t there from the start');
 
-            $current_cart_session_id = $current_cart['session_id'] ?? $current_cart->session_id;
-
-            $current_cart_products = $this->cart->getProducts($current_cart_id);
-
-            $customer_id = auth()->guard('customer')->user()->id; //working
-
-            if($cart_session_id == $current_cart_session_id) {
-                $current_cart_products = array();
-
-                $customer_cart = $this->cart->findByField(['customer_id'=> $customer_id]);
-
-                //check previous saved cart of customer.
-                if(!$customer_cart->isEmpty()) {
-
-                    $customer_cart_id = $customer_cart->id;
-
-                    $customer_cart_products = $this->cart->getProducts($customer_cart_id);
-
-                    foreach($current_cart_products as $key => $value) {
-
-                        $product_id = $value['id'] ?? $value->id;
-
-                        foreach($current_cart_products as $key => $current_cart_product) {
-
-                            $current_product_id = $current_cart_product['id'] ?? $current_cart_product->id;
-
-                            if($current_product_id == $product_id) {
-
-                                unset($current_cart_products[$key]);
-                            }
-                        }
-                    }
-
-
-                    foreach($current_cart_products as $current_cart_product) {
-
-                        $current_cart_product_id = $current_cart_product['id'] ?? $current_cart_product->id;
-
-                        $this->cart->attach($current_cart_id, $current_cart_product_id, 1);
-                    }
-
-                    $this->cart->update(['customer_id' => $customer_id], $current_cart_id);
-
-                    $customer_cart = $this->cart->findOneByField('customer_id', $customer_id);
-
-                    $customer_cart_id = $customer_cart->id;
-
-                    if($this->cart->getProducts($customer_cart_id) && isset($current_cart_products)) {
-                        foreach($current_cart_products as $key => $value) {
-
-                            array_push($cart_products, $current_cart_product);
-                        }
-                    }
-
-                    session()->put('cart_data', [$customer_cart, $cart_products]);
-
-                    session()->flash('Success', 'Item Added In Cart');
-
-                    dump($cart_products);
-
-                    return redirect()->back();
-                } else {
-
-                    $session_id = session()->getId();
-
-                    $customer_id = auth()->guard('customer')->user()->id;
-
-                    $updated_cart = $this->cart->update(['customer_id' => $customer_id, 'session_id' => $session_id], $current_cart_id);
-
-                    $updated_cart_products = $this->cart->getProducts($updated_cart->id);
-
-                    Cookie::queue('cart_session_id', $session_id, 120);
-
-                    session()->put('cart_session_id', $session_id);
-
-                    session('cart_data', [$updated_cart, $updated_cart_products]);
-
-                    return redirect()->back();
-                }
-            } else {
-                throw new \Exception('Error, Session discrepancies found.');
-
-                $this->repairCart($cart_session_id, $id);
+                return redirect()->back();
             }
-        } else {
-            throw new \Exception('Nothing found');
 
-            return redirect()->back();
+            $guest_cart_products = $this->cart->getProducts($guest_cart->id);
+
+            //check if the current logged in customer is also
+            //having any previously saved cart instances.
+            $customer_cart = $this->cart->findOneByField('customer_id', $customer_id);
+
+            if(isset($customer_cart)) {
+                $customer_cart_products = $this->cart->getProducts($customer_cart->id);
+
+                foreach($guest_cart_products as $key => $guest_cart_product) {
+
+                    foreach($customer_cart_products as $customer_cart_product) {
+
+                        if($guest_cart_product->id == $customer_cart_product->id) {
+
+                            $quantity = $guest_cart_product->toArray()['pivot']['quantity'] + 1;
+
+                            $pivot = $guest_cart_product->toArray()['pivot'];
+
+                            $saveQuantity = $this->cart->updateRelatedForMerge($pivot, 'quantity', $quantity);
+
+                            unset($guest_cart_products[$key]);
+                        }
+                    }
+                }
+
+                //insert the new products here.
+                foreach ($guest_cart_products as $key => $guest_cart_product) {
+                    $product = $guest_cart_product->toArray();
+
+                    $this->cart->updateRelatedForMerge($product['pivot'], 'cart_id', $customer_cart->id);
+                }
+
+                //detach with guest cart records
+                $this->cart->detachAndDeleteParent($guest_cart->id);
+
+                Cookie::queue(Cookie::forget('cart_session_id'));
+
+                return redirect()->back();
+            } else {
+                //this will just update the customer id column in the cart table
+                $this->cart->update(['customer_id' => $customer_id], $guest_cart->id);
+
+                Cookie::queue(Cookie::forget('cart_session_id'));
+
+                return redirect()->back();
+            }
         }
+        return redirect()->back();
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CartController.php b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
index 972719384..101d28b9a 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CartController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
@@ -42,7 +42,7 @@ class CartController extends Controller
 
     public function __construct(CartRepository $cart, CartProductRepository $cartProduct, CustomerRepository $customer) {
 
-        $this->middleware('customer')->except(['add', 'remove']);
+        $this->middleware('customer')->except(['add', 'remove', 'test']);
 
         $this->customer = $customer;
 
@@ -80,4 +80,21 @@ class CartController extends Controller
 
         return redirect()->back();
     }
+
+    // public function test() {
+    //     $cookie = Cookie::get('cart_session_id');
+
+    //     $cart = $this->cart->findOneByField('session_id', $cookie);
+
+    //     $cart_products = $this->cart->getProducts($cart->id);
+
+    //     foreach($cart_products as $cart_product) {
+    //         $quantity = $cart_product->toArray()['pivot']['quantity'] + 1;
+
+    //         $pivot = $cart_product->toArray()['pivot'];
+
+    //         $saveQuantity = $this->cart->saveRelated($pivot, 'quantity', $quantity+1);
+    //     }
+    //     dd('done');
+    // }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
index 4221017eb..b763fc1e9 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
@@ -10,23 +10,26 @@ use Auth;
  * Chekout controller for the customer
  * and guest for placing order
  *
- * @author    Rahul Shukla <rahulshukla.symfony517@webkul.com>
+ * @author    Jitendra Singh <jitendra@webkul.com>
  * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
  */
 class CheckoutController extends Controller
 {
 
     /**
-     * Display a listing of the resource.
+     * Contains route related configuration
      *
-     * @return \Illuminate\Http\Response
+     * @var array
      */
     protected $_config;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
     public function __construct()
     {
-        // $this->middleware(['customer', 'guest']);
-
         $this->_config = request('_config');
     }
 
@@ -37,9 +40,7 @@ class CheckoutController extends Controller
     */
     public function index()
     {
-        $customer_id = auth()->guard('customer')->user();
-
-        return view($this->_config['view'],compact('customer_id'));
+        return view($this->_config['view']);
     }
 
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
new file mode 100644
index 000000000..a216c1d5c
--- /dev/null
+++ b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Webkul\Cart\Http\ViewComposers;
+
+use Illuminate\View\View;
+use Illuminate\Support\Collection;
+
+use Webkul\Cart\Repositories\CartRepository;
+
+use Cookie;
+use Cart;
+/**
+ * cart List Composer on Navigation Menu
+ *
+ * @author    Prashant Singh <prashant.singh852@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+
+class CartComposer
+{
+
+    /**
+     * The cart implementation
+     * for shop bundle's navigation
+     * menu
+     */
+    protected $cart;
+
+    /**
+     * Bind data to the view.
+     *
+     * @param  View  $view
+     * @return void
+     */
+    public function __construct(CartRepository $cart) {
+        $this->cart = $cart;
+    }
+
+    public function compose(View $view) {
+        if(auth()->guard('customer')->check()) {
+            $cart = $this->cart->findOneByField('customer_id', auth()->guard('customer')->user()->id);
+
+            $cart_products = $this->cart->getProducts($cart['id']);
+
+            // dd($cart_products);
+
+            $view->with('cart', $cart_products);
+
+        } else {
+            if(Cookie::has('cart_session_id')) {
+                $cart = $this->cart->findOneByField('session_id', Cookie::get('cart_session_id'));
+
+                $cart_products = $this->cart->getProducts($cart['id']);
+
+                $view->with('cart', $cart_products);
+            }
+        }
+    }
+}
diff --git a/packages/Webkul/Cart/src/Models/Cart.php b/packages/Webkul/Cart/src/Models/Cart.php
index f03c3a82f..f1591cdb4 100644
--- a/packages/Webkul/Cart/src/Models/Cart.php
+++ b/packages/Webkul/Cart/src/Models/Cart.php
@@ -10,11 +10,12 @@ class Cart extends Model
 {
     protected $table = 'cart';
 
-    protected $fillable = ['customer_id','session_id','channel_id','coupon_code','is_gift'];
+    protected $fillable = ['customer_id', 'session_id', 'channel_id', 'coupon_code', 'is_gift'];
 
     protected $hidden = ['coupon_code'];
 
     public function with_products() {
-        return $this->belongsToMany(Product::class, 'cart_products');
+
+        return $this->belongsToMany(Product::class, 'cart_products')->withPivot('id', 'product_id','quantity', 'cart_id');
     }
 }
diff --git a/packages/Webkul/Cart/src/Providers/CartServiceProvider.php b/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
index f05e1cb39..d1ba3b051 100644
--- a/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
+++ b/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
@@ -9,6 +9,7 @@ use Illuminate\Foundation\AliasLoader;
 use Webkul\User\Http\Middleware\RedirectIfNotAdmin;
 use Webkul\Customer\Http\Middleware\RedirectIfNotCustomer;
 use Webkul\Cart\Facades\Cart;
+use Webkul\Cart\Providers\ComposerServiceProvider;
 
 class CartServiceProvider extends ServiceProvider
 {
@@ -19,9 +20,9 @@ class CartServiceProvider extends ServiceProvider
 
         $router->aliasMiddleware('admin', RedirectIfNotAdmin::class);
 
-        // $router->aliasMiddleware('customer', RedirectIfNotCustomer::class);
+        $router->aliasMiddleware('customer', RedirectIfNotCustomer::class);
 
-        $this->register(EventServiceProvider::class);
+        $this->app->register(ComposerServiceProvider::class);
     }
 
     /**
@@ -41,14 +42,14 @@ class CartServiceProvider extends ServiceProvider
      */
     protected function registerFacades()
     {
-        $loader = AliasLoader::getInstance();
 
-        $loader->alias('cart', Cart::class);
+        //to make the cart facade and bind the
+        //alias to the class needed to be called.
+        $loader = AliasLoader::getInstance();
+        $loader->alias('cart', CartFacade::class);
 
         $this->app->singleton('cart', function () {
-            return new cart();
+            return new Cart();
         });
-
-        $this->app->bind('cart', 'Webkul\Cart\Cart');
     }
 }
diff --git a/packages/Webkul/Cart/src/Providers/ComposerServiceProvider.php b/packages/Webkul/Cart/src/Providers/ComposerServiceProvider.php
new file mode 100644
index 000000000..3f62d51c7
--- /dev/null
+++ b/packages/Webkul/Cart/src/Providers/ComposerServiceProvider.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Webkul\Cart\Providers;
+
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\ServiceProvider;
+use View;
+
+class ComposerServiceProvider extends ServiceProvider
+{
+    /**
+     * Register bindings in the container.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        //using the class based composers...
+        View::composer(['shop::layouts.header.index'], 'Webkul\Cart\Http\ViewComposers\CartComposer');
+    }
+
+    /**
+     * Register the service provider.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}
diff --git a/packages/Webkul/Cart/src/Repositories/CartRepository.php b/packages/Webkul/Cart/src/Repositories/CartRepository.php
index 0ba0e4b07..e7f951abd 100644
--- a/packages/Webkul/Cart/src/Repositories/CartRepository.php
+++ b/packages/Webkul/Cart/src/Repositories/CartRepository.php
@@ -16,7 +16,7 @@ class CartRepository extends Repository
     /**
      * Specify Model class name
      *
-     * @return mixed
+     * @return Mixed
      */
 
     function model()
@@ -26,7 +26,7 @@ class CartRepository extends Repository
 
     /**
      * @param array $data
-     * @return mixed
+     * @return Mixed
      */
 
     public function create(array $data)
@@ -40,7 +40,7 @@ class CartRepository extends Repository
      * @param array $data
      * @param $id
      * @param string $attribute
-     * @return mixed
+     * @return Mixed
      */
 
     public function update(array $data, $id, $attribute = "id")
@@ -61,18 +61,43 @@ class CartRepository extends Repository
      * Method to attach
      * associations
      *
-     * @return Eloquent
+     * @return Mixed
     */
     public function attach($cart_id, $product_id, $quantity) {
 
-        $this->model->findOrFail($cart_id)->with_products()->attach($cart_id, ['product_id' => $product_id, 'cart_id' => $cart_id, 'quantity' => $quantity]);
+        return $this->model->findOrFail($cart_id)->with_products()->attach($cart_id, ['product_id' => $product_id, 'cart_id' => $cart_id, 'quantity' => $quantity]);
 
     }
 
     /**
-     * Method to detach
-     * associations
+     * This will update the
+     * quantity of product
+     * for the customer,
+     * in case of merge.
      *
-     * @return Eloquent
+     * @return Mixed
      */
+    public function updateRelatedForMerge($pivot, $column, $value) {
+        $cart_product = $this->model->findOrFail($pivot['cart_id']);
+
+        return $cart_product->with_products()->updateExistingPivot($pivot['product_id'], array($column => $value));
+    }
+
+    /**
+     * Method to detach
+     * associations.
+     *
+     * Use this only with
+     * guest cart only.
+     *
+     * @return Mixed
+     */
+    public function detachAndDeleteParent($cart_id) {
+        $cart = $this->model->find($cart_id);
+
+        //apply strict check for verifying guest ownership on this record.
+        $cart->with_products()->detach();
+
+        return $this->model->destroy($cart_id);
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Customer/src/Database/migrations/2018_07_24_083025_create_customer_addresses_table.php b/packages/Webkul/Customer/src/Database/migrations/2018_07_24_083025_create_customer_addresses_table.php
index c0362f492..5d68a3249 100644
--- a/packages/Webkul/Customer/src/Database/migrations/2018_07_24_083025_create_customer_addresses_table.php
+++ b/packages/Webkul/Customer/src/Database/migrations/2018_07_24_083025_create_customer_addresses_table.php
@@ -23,6 +23,7 @@ class CreateCustomerAddressesTable extends Migration
             $table->string('state');
             $table->string('city');
             $table->integer('postcode');
+            $table->string('phone');
             $table->timestamps();
         });
     }
diff --git a/packages/Webkul/Shipping/src/Carrier/FlatRate.php b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
similarity index 64%
rename from packages/Webkul/Shipping/src/Carrier/FlatRate.php
rename to packages/Webkul/Shipping/src/Carriers/FlatRate.php
index 62d0d7593..ba3faa6c7 100644
--- a/packages/Webkul/Shipping/src/Carrier/FlatRate.php
+++ b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Webkul\Shipping\Carrier;
+namespace Webkul\Shipping\Carriers;
 
 use Webkul\Shipping\Contracts\AbstractShipping;
 use Config;
@@ -11,13 +11,8 @@ use Config;
  */
 class FlatRate extends AbstractShipping
 {
-
     public function calculate()
     {
-        $all = Config::get('carrier');
-        return $all;
+        return [];
     }
-
-
-
 }
\ No newline at end of file
diff --git a/packages/Webkul/Shipping/src/Contracts/AbstractShipping.php b/packages/Webkul/Shipping/src/Contracts/AbstractShipping.php
index 5f016722a..bce60f009 100644
--- a/packages/Webkul/Shipping/src/Contracts/AbstractShipping.php
+++ b/packages/Webkul/Shipping/src/Contracts/AbstractShipping.php
@@ -12,6 +12,4 @@ abstract class AbstractShipping
     abstract public function calculate();
 
 }
-
-
 ?>
\ No newline at end of file
diff --git a/packages/Webkul/Shipping/src/Helper/Rate.php b/packages/Webkul/Shipping/src/Helper/Rate.php
deleted file mode 100644
index d500829df..000000000
--- a/packages/Webkul/Shipping/src/Helper/Rate.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-namespace Webkul\Shipping\Helper;
-
-use Webkul\Shipping\Carrier\FlatRate;
-
-/**
- * Class Rate.
- *
- */
-class Rate extends FlatRate
-{
-    public function collectRates()
-    {
-        $data = $this->calculate();
-        $rates =[];
-
-        foreach($data as  $rate){
-            foreach($rate as $flat){
-                $rates[$flat['name']] = $flat['price'];
-            }
-        }
-
-        return $rates;
-    }
-
-}
-
-
-
-
diff --git a/packages/Webkul/Shipping/src/Helpers/Rate.php b/packages/Webkul/Shipping/src/Helpers/Rate.php
new file mode 100644
index 000000000..826155dc8
--- /dev/null
+++ b/packages/Webkul/Shipping/src/Helpers/Rate.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Webkul\Shipping\Helper;
+
+use Illuminate\Support\Facades\Config;
+
+/**
+ * Class Rate.
+ *
+ */
+class Rate
+{
+    public function collectRates()
+    {
+        $rates = [];
+
+        $shippingMethods = Config::get('carriers');
+
+        foreach($shippingMethods as $shippingMethod) {
+            $object = new $shippingMethod['class'];
+
+            if($rate = $object->calculate()) {
+                $rates[] = $rate;
+            }
+        }
+
+        return $rates;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Shipping/src/Providers/ShippingServiceProvider.php b/packages/Webkul/Shipping/src/Providers/ShippingServiceProvider.php
index 7dc88b160..4757cce0d 100644
--- a/packages/Webkul/Shipping/src/Providers/ShippingServiceProvider.php
+++ b/packages/Webkul/Shipping/src/Providers/ShippingServiceProvider.php
@@ -15,14 +15,6 @@ class ShippingServiceProvider extends ServiceProvider
      */
     public function boot(Router $router)
     {
-
-        // $router->aliasMiddleware('customer', RedirectIfNotCustomer::class);
-
-        // $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
-
-        // include __DIR__ . '/../Http/routes.php';
-
-        // $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'shipping');
     }
 
     /**
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index 3c5775443..7d8361989 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -11,7 +11,7 @@ Route::group(['middleware' => ['web']], function () {
     ]);
 
     Route::get('/checkout', 'Webkul\Cart\Http\Controllers\CheckoutController@index')->defaults('_config', [
-        'view' => 'shop::customers.checkout.index'
+        'view' => 'shop::checkout.onepage'
     ])->name('shop.checkout');
 
     /* dummy routes ends here */
@@ -27,15 +27,8 @@ Route::group(['middleware' => ['web']], function () {
 
     Route::post('product/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.remove');
 
-    // Route::post('product/customer/cart/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.customer.add');
-
-    // Route::post('product/customer/cart/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.customer.remove');
-
-    Route::get('product/customer/cart/merge', 'Webkul\Cart\Http\Controllers\CartController@handleMerge')->name('cart.merge');
-
     //Routes for product cart ends
 
-
     // Product Review routes
     Route::get('/reviews/{slug}', 'Webkul\Shop\Http\Controllers\ReviewController@show')->defaults('_config', [
         'view' => 'shop::products.reviews.index'
@@ -53,13 +46,6 @@ Route::group(['middleware' => ['web']], function () {
         'redirect' => 'admin.reviews.index'
     ])->name('admin.reviews.store');
 
-    // Route::post('/reviews/create/{slug}', 'Webkul\Core\Http\Controllers\ReviewController@store')->defaults('_config', [
-    //     'redirect' => 'admin.reviews.index'
-    // ])->name('admin.reviews.store');
-
-
-    // Route::view('/products/{slug}', 'shop::store.product.details.index');
-    Route::view('/cart', 'shop::store.product.view.cart.index');
 
     //customer routes starts here
     Route::prefix('customer')->group(function () {
@@ -90,12 +76,6 @@ Route::group(['middleware' => ['web']], function () {
                 'redirect' => 'customer.session.index'
             ])->name('customer.session.destroy');
 
-            Route::view('/cart', 'shop::store.product.cart.cart.index')->name('customer.cart');
-
-            Route::view('/product', 'shop::store.product.details.home.index')->name('customer.product');
-
-            Route::view('/product/review', 'shop::store.product.review.index')->name('customer.product.review');
-
             //customer account
             Route::prefix('account')->group(function () {
 
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/app.js b/packages/Webkul/Shop/src/Resources/assets/js/app.js
index 320d65719..1507aa2da 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Shop/src/Resources/assets/js/app.js
@@ -1,13 +1,16 @@
 window.jQuery = window.$ = $ = require("jquery");
 window.Vue = require("vue");
 window.VeeValidate = require("vee-validate");
+window.axios = require("axios");
 
 Vue.use(VeeValidate);
+Vue.prototype.$http = axios
 
 Vue.component("category-nav", require("./components/category-nav.vue"));
 Vue.component("category-item", require("./components/category-item.vue"));
 Vue.component("image-slider", require("./components/image-slider.vue"));
 Vue.component("vue-slider", require("vue-slider-component"));
+Vue.component("cart-dropdown", require("./components/cart-dropdown.vue"));
 
 $(document).ready(function () {
 
@@ -50,6 +53,7 @@ $(document).ready(function () {
                 const flashes = this.$refs.flashes;
 
                 flashMessages.forEach(function (flash) {
+                    console.log(flash);
                     flashes.addFlash(flash);
                 }, this);
             },
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/cart-dropdown.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/cart-dropdown.vue
new file mode 100644
index 000000000..9b27c8634
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/cart-dropdown.vue
@@ -0,0 +1,156 @@
+<template>
+    <div>
+        <ul class="cart-dropdown" @click="dropOrHide">
+            <li class="cart-summary">
+                <span class="icon cart-icon"></span>
+
+                <span class="cart"><span class="cart-count" v-if="totalitems > 0">{{ totalitems }}</span>Products</span>
+
+                <span class="icon arrow-down-icon"></span>
+            </li>
+        </ul>
+        <div class="dropdown-cart" :class="{ show: toggle }">
+            <div class="dropdown-header">
+                <p class="heading">Cart Subtotal - $80</p>
+                <i class="icon icon-menu-close" @click="dropOrHide"></i>
+            </div>
+
+            <div class="dropdown-content">
+                <div class="item">
+                    <div class="item-image">
+                        <img />
+                    </div>
+                    <div class="item-details">
+                        <div class="item-name">Some Item Name</div>
+                        <div class="item-price">$ Some Price</div>
+                        <div class="item-qty">Some Quantity</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="dropdown-footer">
+                <a href="/">View Shopping Cart</a>
+                <button class="btn btn-primary btn-lg">CHECKOUT</button>
+            </div>
+        </div>
+    </div>
+
+</template>
+<script>
+
+// define the item component
+
+export default {
+	props: {
+		items: Array,
+    },
+
+    data(){
+        return {
+            toggle: true,
+            totalitems: 0,
+            cart_items: []
+        };
+    },
+
+    computed: {
+        makeDropdown() {
+
+        }
+    },
+
+    mounted: function() {
+        if(this.items != undefined)
+            this.initializeDropdown();
+    },
+
+    methods: {
+        dropOrHide: function() {
+            if(this.toggle == false) {
+                this.toggle = true;
+            } else {
+                this.toggle = false;
+            }
+        },
+
+        initializeDropdown: function() {
+            this.totalitems = this.items.length;
+        }
+    }
+}
+</script>
+<style>
+    .show {
+        display: none;
+    }
+
+    .dropdown-cart {
+        position: absolute;
+        background: #FFFFFF;
+        border: 1px solid #E8E8E8;
+        box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);
+        padding: 20px;
+        border-radius: 1px;
+        right: 10%;
+        top: 75px;
+        width: 387px;
+        z-index: 5;
+    }
+    .dropdown-cart > .dropdown-header {
+        width: 100%;
+    }
+
+    .dropdown-cart > .dropdown-header p{
+        display: inline;
+        line-height: 25px;
+    }
+
+    .dropdown-cart > .dropdown-header i{
+        cursor: pointer;
+        float: right;
+        height: 22px;
+        width: 22px;
+    }
+
+    .dropdown-content {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .dropdown-content .item{
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #E8E8E8;
+    }
+    .dropdown-content .item img{
+        height: 75px;
+        width: 75px;
+        margin-right: 8px;
+    }
+
+    .item-details .item-name {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    .item-details .item-price {
+        margin-bottom: 10px;
+    }
+
+    .item-details .item-qty {
+        margin-bottom: 10px;
+    }
+
+    .dropdown-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .dropdown-footer button {
+        border-radius: 0px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
index 4ff3508ad..e38dc943f 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
@@ -29,7 +29,6 @@ export default {
 
     computed: {
         haveChildren() {
-            console.log(this.item);
             return this.item.children.length ? true : false;
         }
     }
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index c66961d76..11c591d3c 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -22,6 +22,7 @@ body {
 .header {
     margin-top: 16px;
     margin-bottom: 21px;
+    user-select: none;
 
     .header-top {
         margin-bottom: 16px;
@@ -294,7 +295,6 @@ body {
         .nav li li:hover > a:first-child:nth-last-child(2):before {
             right: 10px;
         }
-
     }
 }
 
@@ -311,7 +311,7 @@ body {
         .header-top {
             margin-bottom: 16px;
             display: flex;
-            max-width: 92%;
+            // max-width: 92%;
             width: 100%;
             margin-left: auto;
             margin-right: auto;
@@ -483,7 +483,7 @@ body {
         .header-top {
             margin-bottom: 16px;
             display: flex;
-            max-width: 92%;
+            // max-width: 92%;
             width: 100%;
             margin-left: auto;
             margin-right: auto;
@@ -1228,7 +1228,6 @@ section.slider-block {
     }
 }
 
-
 .product-price {
     font-size: 16px;
     margin-bottom: 14px;
@@ -3202,87 +3201,95 @@ section.cart {
     }
 
 }
-
 // responsive order css end here
 
 // checkout starts here
-
 .checkout-process{
     display: flex;
     flex-direction: row;
     width: 100%;
-    margin-top:3%;
+    margin-top: 20px;
+    margin-bottom: 20px;
 
-    .left-side {
-        width: 67%;
-        margin-right: 8%;
-        height: 100px;
+    .col-main {
+        width: 65%;
+        padding-right: 40px;
 
-        .checkout-menu {
+        ul.checkout-steps {
             width: 100%;
+            display: inline-flex;
+            justify-content: space-between;
+            width: 100%;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #E8E8E8;;
 
-            ul.checkout-detail {
-                height: 60px;
-                display: inline-flex;
-                justify-content: space-between;
-                width: 100%;
-                padding: 5px;
+            li {
+                height: 48px;
+                display:flex;
 
-
-                li {
+                .decorator {
                     height: 48px;
+                    width: 48px;
+                    border: 1px solid black;
+                    border-radius: 50%;
+                    display: inline-flex;
+                    border: 1px solid #E8E8E8;
 
-                    .wrapper {
-                        display:flex;
+                    img {
+                        margin: auto;
+                    }
+                }
 
-                        .decorator {
-                            height: 48px;
-                            width: 48px;
-                            border: 1px solid black;
-                            border-radius: 50%;
-                            display: inline-flex;
-                            border: 1px solid #E8E8E8;
-                            img {
-                                margin: auto;
-                            }
-                        }
+                span {
+                    margin-left: 7px;
+                    margin-top: auto;
+                    margin-bottom: auto;
+                    font-size: 16px;
+                }
 
-                        .decorator.active {
-                            border: 1px solid blue;
-                        }
-
-                        span {
-                            margin-left: 7px;
-                            margin-top: auto;
-                            margin-bottom: auto;
-                            font-size: 16px;
-                        }
+                &.active {
+                    color: #2650EF;
 
+                    .decorator {
+                        border: 1px solid #2650EF;
                     }
                 }
             }
+        }
 
-            .horizontal-rule {
-                margin-top: 1%;
+        .step-content {
+            padding-top: 20px;
+
+            .form-header {
                 width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: #e8e8e8;
+                display: inline-block;
+
+                h1 {
+                    float: left;
+                }
+
+                .btn {
+                    float: right;
+                }
+            }
+
+            .form-container {
+                border-bottom: 1px solid #E8E8E8;
+                padding-top: 20px;
+                padding-bottom: 20px;
             }
         }
     }
 
-    .right-side {
-        height: 300px;
-        width: 300px;
+    .col-right {
+        width: 35%;
+        padding-left: 40px;
 
-        .purchase-detail {
-            margin-top:22px;
-            margin-left:18px;
+        .order-summary {
 
             .price {
 
-                span{
+                span {
                     margin-left: 3px;
                     font-size: 16px;
                     color: #242424;
@@ -3290,7 +3297,6 @@ section.cart {
                 }
             }
 
-
             .item-detail {
                 margin-top:12px;
 
@@ -3301,8 +3307,9 @@ section.cart {
                         font-size: 16px;
                         color: #242424;
                     }
+
                     .right {
-                        float:right;
+                        float: right;
                         font-size: 16px;
                         color: #242424;
                     }
@@ -3318,7 +3325,7 @@ section.cart {
             }
 
             .payble-amount {
-                margin-top:12px;
+                margin-top: 12px;
 
                 span {
                     margin-left: 3px;
@@ -3329,6 +3336,7 @@ section.cart {
                         color: #242424;
                         font-weight: bold;
                     }
+
                     .right {
 
                         float:right;
@@ -3339,68 +3347,6 @@ section.cart {
             }
         }
     }
-
-}
-
-.order-info{
-    width: 67%;
-    margin-right: 6%;
-    height: 1350px;
-    margin-top: -190px;
-
-    .order-guest {
-
-        .order-text{
-            font-size: 24px;
-            color: #242424;
-            letter-spacing: -0.58px;
-            font-weight: bold;
-        }
-    }
-
-    .sign-in {
-        float:right;
-    }
-
-
-    .control-group {
-        margin-top:30px;
-
-        label {
-            font-size:14px;
-        }
-
-        .control {
-            width:600px;
-        }
-
-        span {
-            color:red;
-        }
-
-    }
-
-    .different-billing-addr {
-        margin-top: 5%;
-
-        span {
-            font-size: 16px;
-            color: #242424;
-            letter-spacing: -0.38px;
-        }
-    }
-
-    .horizontal-rule {
-        margin-top: 6%;
-        width: 100%;
-        height: 1px;
-        vertical-align: middle;
-        background: #e8e8e8;
-    }
-
-    .countinue-button {
-        margin-top: 3%;
-    }
 }
 
 // checkout ends here
@@ -3408,10 +3354,9 @@ section.cart {
 // responsive checkout start here
 
 @media all and (max-width: 480px) {
-
     .checkout-process{
         width: 100%;
-        margin-top:3%;
+        margin-top: 3%;
 
         .left-side {
             width: 100%;
@@ -3430,12 +3375,11 @@ section.cart {
                         height: 48px;
 
                         .wrapper {
-                            display:flex;
+                            display: flex;
 
                             span {
                                display: none;
                             }
-
                         }
                     }
 
@@ -3456,7 +3400,7 @@ section.cart {
         }
 
         .right-side {
-            display:none;
+            display: none;
         }
     }
 
@@ -3566,96 +3510,11 @@ section.cart {
         }
     }
 }
-
 // responsive checkout end here
 
 
-// sign of checkout starts here
-
-.signin-form{
-    width: 67%;
-    margin-right: 6%;
-    height: 520px;
-    margin-top: -190px;
-
-    .signin-guest {
-
-        .signin-text{
-            font-size: 24px;
-            color: #242424;
-            letter-spacing: -0.58px;
-            font-weight: bold;
-        }
-    }
-
-    .order-button {
-        float:right;
-        background: #0031F0;
-        font-size: 14px;
-        color: #FFFFFF;
-        letter-spacing: -0.26px;
-        text-align: center;
-        height: 38px;
-        width: 153px;
-        border: none;
-    }
-
-
-    .control-group {
-        margin-top:30px;
-
-        label {
-            font-size:14px;
-        }
-
-        .control {
-            width:600px;
-        }
-
-        span {
-            color:red;
-        }
-
-    }
-
-    .forgot-pass {
-
-        span {
-            font-size: 16px;
-            color: #0031F0;
-            letter-spacing: -0.38px;
-        }
-    }
-
-    .horizontal-rule {
-        margin-top: 6%;
-        width: 100%;
-        height: 1px;
-        vertical-align: middle;
-        background: #e8e8e8;
-    }
-
-    .countinue-button {
-        margin-top: 3%;
-
-        button {
-            background: #0031F0;
-            font-size: 14px;
-            color: #FFFFFF;
-            letter-spacing: -0.26px;
-            text-align: center;
-            height: 38px;
-            width: 137px;
-            border: none;
-        }
-    }
-}
-
-// sign checkout end here
-
 
 //shipment start here
-
 .ship-method {
     width: 67%;
     margin-right: 6%;
@@ -3731,11 +3590,9 @@ section.cart {
         }
     }
 }
-
 //shipment end here
 
 // payment method start here
-
 .payment-method {
     width: 67%;
     margin-right: 6%;
@@ -3823,12 +3680,10 @@ section.cart {
         }
     }
 }
-
 // payment method end here
 
 
 // complete page start here
-
 .complete-page{
     width:880px;
     height: 1050px;
@@ -4184,12 +4039,10 @@ section.cart {
         }
     }
 }
-
 // complete page end here
 
 
 // review page start here
-
 section.review {
     font-size: 16px;
     color: $product-font-color;
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
index b39fffbab..d4c2de509 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -3,7 +3,7 @@
     background-size: cover;
 }
 
-.dropdown-right-icon{
+.dropdown-right-icon {
     background-image:URL('../images/icon-dropdown-left.svg');
     width: 8px;
     height: 8px;
@@ -11,6 +11,14 @@
     margin-bottom: 2px;
 }
 
+.icon-menu-close {
+    background-image:URL('../images/icon-menu-close.svg');
+    width: 8px;
+    height: 8px;
+    margin-left:auto;
+    margin-bottom: 2px;
+}
+
 .grid-view-icon {
     background-image:URL('../images/icon-grid-view.svg');
     width: 24px;
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index f2aaaf9a6..13b6216bc 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -6,6 +6,7 @@ return [
             'account_exists' => 'Already have an account',
             'title' => 'Sign In'
         ],
+
         'signup-form' => [
             'title' => 'Sign Up',
             'firstname' => 'First Name',
@@ -19,10 +20,12 @@ return [
             'conditions' => 'Conditions',
             'using' => 'by using this website'
         ],
+
         'login-text' => [
             'no_account' => 'Don\'t have account',
             'title' => 'Sign In',
         ],
+
         'login-form' => [
             'title' => 'Sign Up',
             'email' => 'E-Mail',
@@ -53,5 +56,35 @@ return [
         'reviews-title' => 'Ratings & Reviews',
         'write-review-btn' => 'Write Review',
         'choose-option' => 'Choose an option'
+    ],
+
+    'checkout' => [
+        'cart' => [
+
+        ],
+
+        'onepage' => [
+            'title' => 'Checkout',
+            'information' => 'Information',
+            'shipping' => 'Shipping',
+            'payment' => 'Payment',
+            'complete' => 'Complete',
+            'billing-address' => 'Billing Address',
+            'sign-in' => 'Sign In',
+            'first-name' => 'First Name',
+            'last-name' => 'Last Name',
+            'email' => 'Email',
+            'address1' => 'Address',
+            'address2' => 'Address 2',
+            'city' => 'City',
+            'state' => 'State',
+            'postcode' => 'Zip/Postcode',
+            'phone' => 'Telephone',
+            'country' => 'Country',
+            'order-summary' => 'Order Summary',
+            'shipping-address' => 'Shipping Address',
+            'use_for_shipping' => 'Ship to this address',
+            'continue' => 'Continue'
+        ]
     ]
 ];
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart.blade.php
similarity index 100%
rename from packages/Webkul/Shop/src/Resources/views/checkout/onepage/index.blade.php
rename to packages/Webkul/Shop/src/Resources/views/checkout/cart.blade.php
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
new file mode 100644
index 000000000..dbb4cb629
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
@@ -0,0 +1,121 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.onepage.title') }}
+@stop
+
+@section('content-wrapper')
+
+    <checkout></checkout>
+
+@endsection
+
+@push('scripts')
+
+    <script type="text/x-template" id="checkout-template">
+        <div id="checkout" class="checkout-process">
+
+            <div class="col-main">
+
+                <ul class="checkout-steps">
+                    <li class="active">
+                        <div class="decorator">
+                            <img src="{{ bagisto_asset('images/address.svg') }}" />
+                        </div>
+                        
+                        <span>{{ __('shop::app.checkout.onepage.information') }}</span>
+                    </li>
+                    
+                    <li>
+                        <div class="decorator">
+                            <img src="{{ bagisto_asset('images/shipping.svg') }}" />
+                        </div>
+                        
+                        <span>{{ __('shop::app.checkout.onepage.shipping') }}</span>
+                    </li>
+                    
+                    <li>
+                        <div class="decorator">
+                            <img src="{{ bagisto_asset('images/payment.svg') }}" />
+                        </div>
+                        
+                        <span>{{ __('shop::app.checkout.onepage.payment') }}</span>
+                    </li>
+                    
+                    <li>
+                        <div class="decorator">
+                            <img src="{{ bagisto_asset('images/finish.svg') }}" />
+                        </div>
+                        
+                        <span>{{ __('shop::app.checkout.onepage.complete') }}</span>
+                    </li>
+                </ul>
+
+                <div class="step-content information">
+
+                    @include('shop::checkout.onepage.customer-info')
+
+                    <div class="button-group">
+
+                        <button type="button" class="btn btn-lg btn-primary" @click="validateForm('address-form')">
+                            {{ __('shop::app.checkout.onepage.continue') }}
+                        </button>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="step-content shipping">
+            </div>
+
+            <div class="step-content payment">
+            </div>
+
+            <div class="step-content review">
+            </div>
+
+            @include('shop::checkout.onepage.summary')
+
+        </div>
+    </script>
+
+    <script>
+        Vue.component('checkout', {
+
+            template: '#checkout-template',
+
+            inject: ['$validator'],
+
+            data: () => ({
+                billing: {
+                    use_for_shipping: true
+                },
+                shipping: {},
+            }),
+
+            created () {
+
+            },
+
+            methods: {
+                validateForm: function (scope) {
+                    this.$validator.validateAll(scope).then((result) => {
+                        if(result) {
+                            this.saveAddress()
+                        }
+                    });
+                },
+
+                saveAddress () {
+                    // this.$http.get('https://api.coindesk.com/v1/bpi/currentprice.json')
+                    //     .then(function(response) {
+                    //         console.log(response)
+                    //     })
+                }
+            }
+        })
+    </script>
+
+@endpush
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
new file mode 100644
index 000000000..9a0d01d2a
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
@@ -0,0 +1,278 @@
+<form data-vv-scope="address-form">
+
+    <div class="form-container">
+
+        <div class="form-header">
+            <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
+
+            <a href="{{ route('customer.session.index') }}" class="btn btn-lg btn-primary">
+                {{ __('shop::app.checkout.onepage.sign-in') }}
+            </a>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
+            <label for="billing[first_name]" class="required">
+                {{ __('shop::app.checkout.onepage.first-name') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[first_name]" name="billing[first_name]" v-model="billing.first_name"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
+                @{{ errors.first('address-form.billing[first_name]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
+            <label for="billing[last_name]" class="required">
+                {{ __('shop::app.checkout.onepage.last-name') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]" v-model="billing.last_name"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
+                @{{ errors.first('address-form.billing[last_name]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
+            <label for="billing[email]" class="required">
+                {{ __('shop::app.checkout.onepage.email') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[email]" name="billing[email]" v-model="billing.email"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[email]')">
+                @{{ errors.first('address-form.billing[email]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[address1]') ? 'has-error' : '']">
+            <label for="billing[address1]" class="required">
+                {{ __('shop::app.checkout.onepage.address1') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[address1]" name="billing[address1]" v-model="billing.address1"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[address1]')">
+                @{{ errors.first('address-form.billing[address1]') }}
+            </span>
+        </div>
+
+        <div class="control-group">
+            <label for="billing[address2]">
+                {{ __('shop::app.checkout.onepage.address2') }}
+            </label>
+
+            <input type="text" class="control" id="billing[address2]" name="billing[address2]" v-model="billing.address2"/>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
+            <label for="billing[city]" class="required">
+                {{ __('shop::app.checkout.onepage.city') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]" v-model="billing.city"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[city]')">
+                @{{ errors.first('address-form.billing[city]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
+            <label for="billing[state]" class="required">
+                {{ __('shop::app.checkout.onepage.state') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="billing.state"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[state]')">
+                @{{ errors.first('address-form.billing[state]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
+            <label for="billing[postcode]" class="required">
+                {{ __('shop::app.checkout.onepage.postcode') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[postcode]" name="billing[postcode]" v-model="billing.postcode"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
+                @{{ errors.first('address-form.billing[postcode]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
+            <label for="billing[phone]" class="required">
+                {{ __('shop::app.checkout.onepage.phone') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[phone]" name="billing[phone]" v-model="billing.phone"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
+                @{{ errors.first('address-form.billing[phone]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
+            <label for="billing[country]" class="required">
+                {{ __('shop::app.checkout.onepage.country') }}
+            </label>
+
+            <select type="text" v-validate="'required'" class="control" id="billing[country]" name="billing[country]" v-model="billing.country">
+                <option value=""></option>
+
+                @foreach (country()->all() as $code => $country)
+
+                    <option value="{{ $country}}">{{ $country }}</option>
+
+                @endforeach
+            </select>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[country]')">
+                @{{ errors.first('address-form.billing[country]') }}
+            </span>
+        </div>
+
+        <div class="control-group">
+            <span class="checkbox">
+                <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="billing.use_for_shipping"/>
+                <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+            </span>
+
+        </div>
+    </div>
+
+    <div class="form-container" v-if="!billing.use_for_shipping">
+
+        <div class="form-header">
+            <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
+            <label for="shipping[first_name]" class="required">
+                {{ __('shop::app.checkout.onepage.first-name') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[first_name]" name="shipping[first_name]" v-model="shipping.first_name"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
+                @{{ errors.first('address-form.shipping[first_name]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[last_name]') ? 'has-error' : '']">
+            <label for="shipping[last_name]" class="required">
+                {{ __('shop::app.checkout.onepage.last-name') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[last_name]" name="shipping[last_name]" v-model="shipping.last_name"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
+                @{{ errors.first('address-form.shipping[last_name]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[email]') ? 'has-error' : '']">
+            <label for="shipping[email]" class="required">
+                {{ __('shop::app.checkout.onepage.email') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[email]" name="shipping[email]" v-model="shipping.email"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
+                @{{ errors.first('address-form.shipping[email]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[address1]') ? 'has-error' : '']">
+            <label for="shipping[address1]" class="required">
+                {{ __('shop::app.checkout.onepage.address1') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[address1]" name="shipping[address1]" v-model="shipping.address1"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[address1]')">
+                @{{ errors.first('address-form.shipping[address1]') }}
+            </span>
+        </div>
+
+        <div class="control-group">
+            <label for="shipping[address2]">
+                {{ __('shop::app.checkout.onepage.address2') }}
+            </label>
+
+            <input type="text" class="control" id="shipping[address2]" name="shipping[address2]" v-model="shipping.address2"/>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[city]') ? 'has-error' : '']">
+            <label for="shipping[city]" class="required">
+                {{ __('shop::app.checkout.onepage.city') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[city]" name="shipping[city]" v-model="shipping.city"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
+                @{{ errors.first('address-form.shipping[city]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[state]') ? 'has-error' : '']">
+            <label for="shipping[state]" class="required">
+                {{ __('shop::app.checkout.onepage.state') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="shipping.state"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
+                @{{ errors.first('address-form.shipping[state]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[postcode]') ? 'has-error' : '']">
+            <label for="shipping[postcode]" class="required">
+                {{ __('shop::app.checkout.onepage.postcode') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[postcode]" name="shipping[postcode]" v-model="shipping.postcode"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
+                @{{ errors.first('address-form.shipping[postcode]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[phone]') ? 'has-error' : '']">
+            <label for="shipping[phone]" class="required">
+                {{ __('shop::app.checkout.onepage.phone') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="shipping[phone]" name="shipping[phone]" v-model="shipping.phone"/>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
+                @{{ errors.first('address-form.shipping[phone]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.shipping[country]') ? 'has-error' : '']">
+            <label for="shipping[country]" class="required">
+                {{ __('shop::app.checkout.onepage.country') }}
+            </label>
+
+            <select type="text" v-validate="'required'" class="control" id="shipping[country]" name="shipping[country]" v-model="shipping.country">
+                <option value=""></option>
+
+                @foreach (country()->all() as $code => $country)
+
+                    <option value="{{ $country}}">{{ $country }}</option>
+
+                @endforeach
+            </select>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
+                @{{ errors.first('address-form.shipping[country]') }}
+            </span>
+        </div>
+    </div>
+
+</form>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php
new file mode 100644
index 000000000..e5950fe05
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php
@@ -0,0 +1,37 @@
+<div class="col-right">
+    <div class="order-summary">
+        <div class="price">
+            <span>{{ __('shop::app.checkout.onepage.order-summary') }}</span>
+        </div>
+
+        <div class="item-detail">
+            <span>
+                <label>2 Items Price</label>
+                <label class="right">$ 2,506.00</label>
+            </span>
+        </div>
+
+        <div class="item-detail">
+            <span>
+                <label>Delivery Charges</label>
+                <label class="right">$ 40.00</label>
+            </span>
+        </div>
+        <div class="item-detail">
+            <span>
+                <label>Coupan Discount</label>
+                <label class="right">$ 25.00</label>
+            </span>
+        </div>
+
+        <div class="horizontal-rule">
+        </div>
+
+        <div class="payble-amount">
+            <span>
+                <label>Amount Payble</label>
+                <label class="right">$ 2571.00</label>
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/success.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/success.blade.php
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
index 2a7cba245..35d745c8c 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
@@ -1,37 +1,3 @@
 <div class="right-side">
-    <div class="purchase-detail">
-        <div class="price">
-            <span>Price Detail</span>
-        </div>
-
-        <div class="item-detail">
-            <span>
-                <label>2 Items Price</label>
-                <label class="right">$ 2,506.00</label>
-            </span>
-        </div>
-
-        <div class="item-detail">
-            <span>
-                <label>Delivery Charges</label>
-                <label class="right">$ 40.00</label>
-            </span>
-        </div>
-        <div class="item-detail">
-            <span>
-                <label>Coupan Discount</label>
-                <label class="right">$ 25.00</label>
-            </span>
-        </div>
-
-        <div class="horizontal-rule">
-        </div>
-
-        <div class="payble-amount">
-            <span>
-                <label>Amount Payble</label>
-                <label class="right">$ 2571.00</label>
-            </span>
-        </div>
-    </div>
+    
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
index 8342d022e..d257eedbb 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
@@ -45,15 +45,12 @@
                 }else{
                     this.isGuest=true;
                     this.disabled=1;
-
-                    console.log(this.disabled);
                 }
             } ,
 
             methods: {
                 count () {
                     this.isShipMethod=true;
-                    console.log(this.isShipMethod)
                 }
             }
 
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index d15ab5888..0fdee9e33 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -1,7 +1,5 @@
 <div class="header" id="header">
-
     <div class="header-top">
-
         <div class="left-content">
 
             <ul class="logo-container">
@@ -57,6 +55,7 @@
 
                                 <ul>
                                     <li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
+
                                     <li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
                                 </ul>
 
@@ -66,18 +65,20 @@
                     @endguest
                     @auth('customer')
                         <div class="dropdown-list bottom-right" style="display: none;">
-
                             <div class="dropdown-container">
-
                                 <label>Account</label>
-
                                 <ul>
                                     <li><a href="{{ route('customer.account.index') }}">Account</a></li>
+
                                     <li><a href="{{ route('customer.profile.index') }}">Profile</a></li>
+
                                     <li><a href="{{ route('customer.address.index') }}">Address</a></li>
+
                                     <li><a href="{{ route('customer.wishlist.index') }}">Wishlist</a></li>
-                                    <li><a href="{{ route('customer.cart') }}">Cart</a></li>
+
+                                    {{-- <li><a href="{{ route('customer.cart') }}">Cart</a></li> --}}
                                     <li><a href="{{ route('customer.orders.index') }}">Orders</a></li>
+
                                     <li><a href="{{ route('customer.session.destroy') }}">Logout</a></li>
                                 </ul>
 
@@ -90,21 +91,7 @@
 
             </ul>
 
-            <ul class="cart-dropdown">
-
-                <li class="cart-summary">
-
-                    <span class="icon cart-icon"></span>
-
-                    <span class="cart"><span class="cart-count">5</span>Products</span>
-
-                    <span class="icon arrow-down-icon"></span>
-
-                </li>
-
-
-
-            </ul>
+            <cart-dropdown @if(isset($cart)) :items='@json($cart)' @endif></cart-dropdown>
 
             {{-- Meant for responsive views only --}}
             <ul class="ham-dropdown-container">
@@ -138,13 +125,13 @@
         </div>
 
         <div class="suggestion">
-            <span> designer sarees   </span>
+            <span>Designer sarees</span>
         </div>
         <div class="suggestion">
-            <span> India patter sarees  </span>
+            <span>India patter sarees</span>
         </div>
         <div class="suggestion">
-            <span> Border Sarees  </span>
+            <span>Border Sarees</span>
         </div>
     </div>
 
@@ -155,93 +142,7 @@
 </div>
 
 @push('scripts')
-
     <script>
 
-        window.onload = function() {
-
-            var sort = document.getElementById("sortable");
-            var search = document.getElementById("search");
-
-            sort.addEventListener("click", myFunction);
-            search.addEventListener("click", myFunction);
-
-            // function for changing icon for responsive header
-
-            function myFunction(){
-
-                let className = document.getElementById(this.id).className;
-
-                let slider  = document.getElementsByClassName("slider-block");
-                let feature = document.getElementsByClassName("featured-products");
-                let newUpdate = document.getElementsByClassName("news-update");
-
-                for (let i=0 ; i < slider.length ; i++){
-                    slider[i].style.display="none";
-                }
-
-                for (let i=0 ; i < feature.length ; i++){
-                    feature[i].style.display="none";
-                }
-
-                for (let i=0 ; i < newUpdate.length ; i++){
-                    newUpdate[i].style.display="none";
-                }
-
-                if( className == 'icon search-icon') {
-
-                    search.classList.remove('icon', 'search-icon');
-                    search.classList.add('icon', 'cross-icon');
-
-                    sort.classList.remove('icon', 'cross-icon');
-                    sort.classList.remove('icon', 'sortable-icon');
-                    sort.classList.add('icon', 'sortable-icon');
-                    document.getElementsByClassName("header-bottom")[0].style.display="none";
-                    document.getElementsByClassName("search-suggestion")[0].style.display="block";
-
-                }else if ( className == 'icon sortable-icon'){
-
-                    sort.classList.remove('icon', 'sortable-icon');
-                    sort.classList.add('icon', 'cross-icon');
-
-                    search.classList.remove('icon', 'cross-icon');
-                    search.classList.remove('icon', 'search-icon');
-                    search.classList.add('icon', 'search-icon');
-
-                    document.getElementsByClassName("header-bottom")[0].style.display="block";
-                    document.getElementsByClassName("search-suggestion")[0].style.display="none";
-
-                } else {
-
-                    sort.classList.remove('icon', 'cross-icon');
-                    search.classList.remove('icon', 'cross-icon');
-                    sort.classList.remove('icon', 'sortable-icon');
-                    search.classList.remove('icon', 'search-icon');
-                    sort.classList.add('icon', 'sortable-icon');
-                    search.classList.add('icon', 'search-icon');
-                    document.getElementsByClassName("header-bottom")[0].style.display="none";
-                    document.getElementsByClassName("search-suggestion")[0].style.display="none";
-
-                    let slider  = document.getElementsByClassName("slider-block");
-                    let feature = document.getElementsByClassName("featured-products");
-                    let newUpdate = document.getElementsByClassName("news-update");
-
-                    for (let i=0 ; i < slider.length ; i++){this.id
-                        slider[i].style.display="block";
-                    }
-
-                    for (let i=0 ; i < feature.length ; i++){
-                        feature[i].style.display="block";
-                    }
-
-                    for (let i=0 ; i < newUpdate.length ; i++){
-                        newUpdate[i].style.display="block";
-                    }
-                }
-            }
-        }
-
     </script>
-
-
 @endpush
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php b/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
index 12c7abaaf..1ebdd16b1 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
@@ -2,6 +2,6 @@
 
     @include ('shop::products.add-to-cart', ['product' => $product])
 
-    <span><img src="{{ bagisto_asset('images/wishlist.svg') }}" /></span>
+    <span class="wishlist"><img src="{{ bagisto_asset('images/wishlist.svg') }}" /></span>
 
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/reviews/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/reviews/index.blade.php
index ee0f7a427..e1d3cf88b 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/reviews/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/reviews/index.blade.php
@@ -133,7 +133,6 @@
         for(var key in percentage){
             width= percentage[key] * 1.58;
             let id =key + 'star';
-            console.log(id);
             document.getElementById(key).style.width = width + "px";
             document.getElementById(key).style.height = 4 + "px";
             document.getElementById(id).innerHTML = i + '\xa0\xa0' + "star";
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index ef87bfb26..d601c4b38 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -1,5 +1,10 @@
 @extends('shop::layouts.master')
 
+@section('page_title')
+    {{ $product->name }}
+@stop
+
+
 @section('content-wrapper')
     <section class="product-detail">
         <div class="category-breadcrumbs">
@@ -8,7 +13,6 @@
 
         </div>
         <div class="layouter">
-            {{-- {{ dd(session()->getId()) }} --}}
             <form method="POST" action="{{ route('cart.add', $product->id) }}">
                 @csrf()
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index 1707ffc30..bac98c02c 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -2,7 +2,20 @@
 
     @inject ('configurableOptionHelper', 'Webkul\Product\Product\ConfigurableOption')
 
-    <product-options></product-options>
+    <product-options>
+        <!--<div class="attribute control-group has-error">
+            <label class="reqiured">Color</label>
+            <select name="super_attribute[104]" id="attribute_104" class="control" data-vv-id="1" aria-required="true" aria-invalid="true">
+                <option value="">Choose an option</option>
+            </select>
+        </div>
+
+        <div class="attribute control-group">
+            <label class="reqiured">Size</label>
+            <select name="super_attribute[105]" disabled="disabled" id="attribute_105" class="control" data-vv-id="2" aria-required="true" aria-invalid="false">
+            </select>
+        </div>-->
+    </product-options>
 
     @push('scripts')
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index a86573466..ab73d6f65 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -65,7 +65,6 @@
             },
 
             created () {
-                console.log(this.images[0])
                 this.changeImage(this.images[0])
 
                 this.prepareThumbs()
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/flash-wrapper.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/flash-wrapper.vue
index f22019967..902807869 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/flash-wrapper.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/flash-wrapper.vue
@@ -5,7 +5,7 @@
         class='alert-wrapper'
     >
         <flash
-            v-for='(flash, index) in flashes'
+            v-for='(flash) in flashes'
             :key='flash.uid'
             :flash="flash"
             @onRemoveFlash="removeFlash($event)"
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index 38583fc6a..23248599b 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -452,6 +452,11 @@ h2 {
     }
 }
 
+.button-group {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 .alert-wrapper {
     width: 300px;
     top: 10px;
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
index a5e2a6df1..49914dc2a 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
@@ -105,13 +105,13 @@
                             <th class="grid_head" data-column-name="{{ $column->alias }}" data-column-label="{{ $column->label }}">{!! $column->sorting() !!}</th>
                     @endif
                 @endforeach
-                @if(isset($attribute_columns))
+                {{-- @if(isset($attribute_columns))
                     @foreach($attribute_columns as $key => $value)
                         <th>
                             {{ $value }}
                         </th>
                     @endforeach
-                @endif
+                @endif --}}
                 <th>
                     Actions
                 </th>
@@ -131,11 +131,11 @@
                     <td class="">{!! $column->render($result) !!}</td>
                 @endforeach
 
-                @if(isset($attribute_columns))
+                {{-- @if(isset($attribute_columns))
                 @foreach ($attribute_columns as $atc)
                     <td>{{ $result->{$atc} }}</td>
                 @endforeach
-                @endif
+                @endif --}}
 
                 <td class="action">
                     @foreach($actions as $action)
diff --git a/packages/Webkul/Ui/webpack.mix.js b/packages/Webkul/Ui/webpack.mix.js
index 32804fbcc..4fa81616a 100644
--- a/packages/Webkul/Ui/webpack.mix.js
+++ b/packages/Webkul/Ui/webpack.mix.js
@@ -14,7 +14,7 @@ mix.js(
     ],
     "js/ui.js"
 )
-    // .copy(__dirname + "/src/Resources/assets/images", publicPath + "/images")
+    .copy(__dirname + "/src/Resources/assets/images", publicPath + "/images")
     .sass(__dirname + "/src/Resources/assets/sass/app.scss", "css/ui.css")
     .options({
         processCssUrls: false
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 5a38cd9c2..436ccbbc9 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -11,6 +11,14 @@
   margin-bottom: 2px;
 }
 
+.icon-menu-close {
+  background-image: URL("../images/icon-menu-close.svg");
+  width: 8px;
+  height: 8px;
+  margin-left: auto;
+  margin-bottom: 2px;
+}
+
 .grid-view-icon {
   background-image: URL("../images/icon-grid-view.svg");
   width: 24px;
@@ -64,6 +72,10 @@ body {
 .header {
   margin-top: 16px;
   margin-bottom: 21px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .header .header-top {
@@ -404,7 +416,6 @@ body {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    max-width: 92%;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
@@ -557,7 +568,6 @@ body {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    max-width: 92%;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
@@ -2996,21 +3006,17 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
       -ms-flex-direction: row;
           flex-direction: row;
   width: 100%;
-  margin-top: 3%;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
-.checkout-process .left-side {
-  width: 67%;
-  margin-right: 8%;
-  height: 100px;
+.checkout-process .col-main {
+  width: 65%;
+  padding-right: 40px;
 }
 
-.checkout-process .left-side .checkout-menu {
+.checkout-process .col-main ul.checkout-steps {
   width: 100%;
-}
-
-.checkout-process .left-side .checkout-menu ul.checkout-detail {
-  height: 60px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -3018,20 +3024,18 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 100%;
-  padding: 5px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #E8E8E8;
 }
 
-.checkout-process .left-side .checkout-menu ul.checkout-detail li {
+.checkout-process .col-main ul.checkout-steps li {
   height: 48px;
-}
-
-.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
-.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator {
+.checkout-process .col-main ul.checkout-steps li .decorator {
   height: 48px;
   width: 48px;
   border: 1px solid black;
@@ -3042,66 +3046,80 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   border: 1px solid #E8E8E8;
 }
 
-.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator img {
+.checkout-process .col-main ul.checkout-steps li .decorator img {
   margin: auto;
 }
 
-.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator.active {
-  border: 1px solid blue;
-}
-
-.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+.checkout-process .col-main ul.checkout-steps li span {
   margin-left: 7px;
   margin-top: auto;
   margin-bottom: auto;
   font-size: 16px;
 }
 
-.checkout-process .left-side .checkout-menu .horizontal-rule {
-  margin-top: 1%;
+.checkout-process .col-main ul.checkout-steps li.active {
+  color: #2650EF;
+}
+
+.checkout-process .col-main ul.checkout-steps li.active .decorator {
+  border: 1px solid #2650EF;
+}
+
+.checkout-process .col-main .step-content {
+  padding-top: 20px;
+}
+
+.checkout-process .col-main .step-content .form-header {
   width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
+  display: inline-block;
 }
 
-.checkout-process .right-side {
-  height: 300px;
-  width: 300px;
+.checkout-process .col-main .step-content .form-header h1 {
+  float: left;
 }
 
-.checkout-process .right-side .purchase-detail {
-  margin-top: 22px;
-  margin-left: 18px;
+.checkout-process .col-main .step-content .form-header .btn {
+  float: right;
 }
 
-.checkout-process .right-side .purchase-detail .price span {
+.checkout-process .col-main .step-content .form-container {
+  border-bottom: 1px solid #E8E8E8;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.checkout-process .col-right {
+  width: 35%;
+  padding-left: 40px;
+}
+
+.checkout-process .col-right .order-summary .price span {
   margin-left: 3px;
   font-size: 16px;
   color: #242424;
   font-weight: bold;
 }
 
-.checkout-process .right-side .purchase-detail .item-detail {
+.checkout-process .col-right .order-summary .item-detail {
   margin-top: 12px;
 }
 
-.checkout-process .right-side .purchase-detail .item-detail span {
+.checkout-process .col-right .order-summary .item-detail span {
   margin-left: 3px;
 }
 
-.checkout-process .right-side .purchase-detail .item-detail span label {
+.checkout-process .col-right .order-summary .item-detail span label {
   font-size: 16px;
   color: #242424;
 }
 
-.checkout-process .right-side .purchase-detail .item-detail span .right {
+.checkout-process .col-right .order-summary .item-detail span .right {
   float: right;
   font-size: 16px;
   color: #242424;
 }
 
-.checkout-process .right-side .purchase-detail .horizontal-rule {
+.checkout-process .col-right .order-summary .horizontal-rule {
   margin-top: 6%;
   width: 100%;
   height: 1px;
@@ -3109,83 +3127,27 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   background: #e8e8e8;
 }
 
-.checkout-process .right-side .purchase-detail .payble-amount {
+.checkout-process .col-right .order-summary .payble-amount {
   margin-top: 12px;
 }
 
-.checkout-process .right-side .purchase-detail .payble-amount span {
+.checkout-process .col-right .order-summary .payble-amount span {
   margin-left: 3px;
   font-weight: bold;
 }
 
-.checkout-process .right-side .purchase-detail .payble-amount span label {
+.checkout-process .col-right .order-summary .payble-amount span label {
   font-size: 16px;
   color: #242424;
   font-weight: bold;
 }
 
-.checkout-process .right-side .purchase-detail .payble-amount span .right {
+.checkout-process .col-right .order-summary .payble-amount span .right {
   float: right;
   font-size: 16px;
   color: #242424;
 }
 
-.order-info {
-  width: 67%;
-  margin-right: 6%;
-  height: 1350px;
-  margin-top: -190px;
-}
-
-.order-info .order-guest .order-text {
-  font-size: 24px;
-  color: #242424;
-  letter-spacing: -0.58px;
-  font-weight: bold;
-}
-
-.order-info .sign-in {
-  float: right;
-}
-
-.order-info .control-group {
-  margin-top: 30px;
-}
-
-.order-info .control-group label {
-  font-size: 14px;
-}
-
-.order-info .control-group .control {
-  width: 600px;
-}
-
-.order-info .control-group span {
-  color: red;
-}
-
-.order-info .different-billing-addr {
-  margin-top: 5%;
-}
-
-.order-info .different-billing-addr span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.order-info .horizontal-rule {
-  margin-top: 6%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.order-info .countinue-button {
-  margin-top: 3%;
-}
-
 @media all and (max-width: 480px) {
   .checkout-process {
     width: 100%;
@@ -3312,77 +3274,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   }
 }
 
-.signin-form {
-  width: 67%;
-  margin-right: 6%;
-  height: 520px;
-  margin-top: -190px;
-}
-
-.signin-form .signin-guest .signin-text {
-  font-size: 24px;
-  color: #242424;
-  letter-spacing: -0.58px;
-  font-weight: bold;
-}
-
-.signin-form .order-button {
-  float: right;
-  background: #0031F0;
-  font-size: 14px;
-  color: #FFFFFF;
-  letter-spacing: -0.26px;
-  text-align: center;
-  height: 38px;
-  width: 153px;
-  border: none;
-}
-
-.signin-form .control-group {
-  margin-top: 30px;
-}
-
-.signin-form .control-group label {
-  font-size: 14px;
-}
-
-.signin-form .control-group .control {
-  width: 600px;
-}
-
-.signin-form .control-group span {
-  color: red;
-}
-
-.signin-form .forgot-pass span {
-  font-size: 16px;
-  color: #0031F0;
-  letter-spacing: -0.38px;
-}
-
-.signin-form .horizontal-rule {
-  margin-top: 6%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.signin-form .countinue-button {
-  margin-top: 3%;
-}
-
-.signin-form .countinue-button button {
-  background: #0031F0;
-  font-size: 14px;
-  color: #FFFFFF;
-  letter-spacing: -0.26px;
-  text-align: center;
-  height: 38px;
-  width: 137px;
-  border: none;
-}
-
 .ship-method {
   width: 67%;
   margin-right: 6%;
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 0a07e061c..30714e42d 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -214,13 +214,16 @@ module.exports = __webpack_require__(25);
 window.jQuery = window.$ = $ = __webpack_require__(4);
 window.Vue = __webpack_require__(5);
 window.VeeValidate = __webpack_require__(9);
+window.axios = __webpack_require__(36);
 
 Vue.use(VeeValidate);
+Vue.prototype.$http = axios;
 
 Vue.component("category-nav", __webpack_require__(10));
 Vue.component("category-item", __webpack_require__(13));
 Vue.component("image-slider", __webpack_require__(16));
 Vue.component("vue-slider", __webpack_require__(24));
+Vue.component("cart-dropdown", __webpack_require__(55));
 
 $(document).ready(function () {
 
@@ -263,6 +266,7 @@ $(document).ready(function () {
                 var flashes = this.$refs.flashes;
 
                 flashMessages.forEach(function (flash) {
+                    console.log(flash);
                     flashes.addFlash(flash);
                 }, this);
             },
@@ -29279,7 +29283,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
     computed: {
         haveChildren: function haveChildren() {
-            console.log(this.item);
             return this.item.children.length ? true : false;
         }
     }
@@ -29920,5 +29923,1837 @@ if (false) {
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 26 */,
+/* 27 */,
+/* 28 */,
+/* 29 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var bind = __webpack_require__(31);
+var isBuffer = __webpack_require__(38);
+
+/*global toString:true*/
+
+// utils is a library of generic helper functions non-specific to axios
+
+var toString = Object.prototype.toString;
+
+/**
+ * Determine if a value is an Array
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Array, otherwise false
+ */
+function isArray(val) {
+  return toString.call(val) === '[object Array]';
+}
+
+/**
+ * Determine if a value is an ArrayBuffer
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an ArrayBuffer, otherwise false
+ */
+function isArrayBuffer(val) {
+  return toString.call(val) === '[object ArrayBuffer]';
+}
+
+/**
+ * Determine if a value is a FormData
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an FormData, otherwise false
+ */
+function isFormData(val) {
+  return (typeof FormData !== 'undefined') && (val instanceof FormData);
+}
+
+/**
+ * Determine if a value is a view on an ArrayBuffer
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
+ */
+function isArrayBufferView(val) {
+  var result;
+  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
+    result = ArrayBuffer.isView(val);
+  } else {
+    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
+  }
+  return result;
+}
+
+/**
+ * Determine if a value is a String
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a String, otherwise false
+ */
+function isString(val) {
+  return typeof val === 'string';
+}
+
+/**
+ * Determine if a value is a Number
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Number, otherwise false
+ */
+function isNumber(val) {
+  return typeof val === 'number';
+}
+
+/**
+ * Determine if a value is undefined
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if the value is undefined, otherwise false
+ */
+function isUndefined(val) {
+  return typeof val === 'undefined';
+}
+
+/**
+ * Determine if a value is an Object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Object, otherwise false
+ */
+function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+
+/**
+ * Determine if a value is a Date
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Date, otherwise false
+ */
+function isDate(val) {
+  return toString.call(val) === '[object Date]';
+}
+
+/**
+ * Determine if a value is a File
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a File, otherwise false
+ */
+function isFile(val) {
+  return toString.call(val) === '[object File]';
+}
+
+/**
+ * Determine if a value is a Blob
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Blob, otherwise false
+ */
+function isBlob(val) {
+  return toString.call(val) === '[object Blob]';
+}
+
+/**
+ * Determine if a value is a Function
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Function, otherwise false
+ */
+function isFunction(val) {
+  return toString.call(val) === '[object Function]';
+}
+
+/**
+ * Determine if a value is a Stream
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Stream, otherwise false
+ */
+function isStream(val) {
+  return isObject(val) && isFunction(val.pipe);
+}
+
+/**
+ * Determine if a value is a URLSearchParams object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a URLSearchParams object, otherwise false
+ */
+function isURLSearchParams(val) {
+  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
+}
+
+/**
+ * Trim excess whitespace off the beginning and end of a string
+ *
+ * @param {String} str The String to trim
+ * @returns {String} The String freed of excess whitespace
+ */
+function trim(str) {
+  return str.replace(/^\s*/, '').replace(/\s*$/, '');
+}
+
+/**
+ * Determine if we're running in a standard browser environment
+ *
+ * This allows axios to run in a web worker, and react-native.
+ * Both environments support XMLHttpRequest, but not fully standard globals.
+ *
+ * web workers:
+ *  typeof window -> undefined
+ *  typeof document -> undefined
+ *
+ * react-native:
+ *  navigator.product -> 'ReactNative'
+ */
+function isStandardBrowserEnv() {
+  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+    return false;
+  }
+  return (
+    typeof window !== 'undefined' &&
+    typeof document !== 'undefined'
+  );
+}
+
+/**
+ * Iterate over an Array or an Object invoking a function for each item.
+ *
+ * If `obj` is an Array callback will be called passing
+ * the value, index, and complete array for each item.
+ *
+ * If 'obj' is an Object callback will be called passing
+ * the value, key, and complete object for each property.
+ *
+ * @param {Object|Array} obj The object to iterate
+ * @param {Function} fn The callback to invoke for each item
+ */
+function forEach(obj, fn) {
+  // Don't bother if no value provided
+  if (obj === null || typeof obj === 'undefined') {
+    return;
+  }
+
+  // Force an array if not already something iterable
+  if (typeof obj !== 'object') {
+    /*eslint no-param-reassign:0*/
+    obj = [obj];
+  }
+
+  if (isArray(obj)) {
+    // Iterate over array values
+    for (var i = 0, l = obj.length; i < l; i++) {
+      fn.call(null, obj[i], i, obj);
+    }
+  } else {
+    // Iterate over object keys
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        fn.call(null, obj[key], key, obj);
+      }
+    }
+  }
+}
+
+/**
+ * Accepts varargs expecting each argument to be an object, then
+ * immutably merges the properties of each object and returns result.
+ *
+ * When multiple objects contain the same key the later object in
+ * the arguments list will take precedence.
+ *
+ * Example:
+ *
+ * ```js
+ * var result = merge({foo: 123}, {foo: 456});
+ * console.log(result.foo); // outputs 456
+ * ```
+ *
+ * @param {Object} obj1 Object to merge
+ * @returns {Object} Result of all merge properties
+ */
+function merge(/* obj1, obj2, obj3, ... */) {
+  var result = {};
+  function assignValue(val, key) {
+    if (typeof result[key] === 'object' && typeof val === 'object') {
+      result[key] = merge(result[key], val);
+    } else {
+      result[key] = val;
+    }
+  }
+
+  for (var i = 0, l = arguments.length; i < l; i++) {
+    forEach(arguments[i], assignValue);
+  }
+  return result;
+}
+
+/**
+ * Extends object a by mutably adding to it the properties of object b.
+ *
+ * @param {Object} a The object to be extended
+ * @param {Object} b The object to copy properties from
+ * @param {Object} thisArg The object to bind function to
+ * @return {Object} The resulting value of object a
+ */
+function extend(a, b, thisArg) {
+  forEach(b, function assignValue(val, key) {
+    if (thisArg && typeof val === 'function') {
+      a[key] = bind(val, thisArg);
+    } else {
+      a[key] = val;
+    }
+  });
+  return a;
+}
+
+module.exports = {
+  isArray: isArray,
+  isArrayBuffer: isArrayBuffer,
+  isBuffer: isBuffer,
+  isFormData: isFormData,
+  isArrayBufferView: isArrayBufferView,
+  isString: isString,
+  isNumber: isNumber,
+  isObject: isObject,
+  isUndefined: isUndefined,
+  isDate: isDate,
+  isFile: isFile,
+  isBlob: isBlob,
+  isFunction: isFunction,
+  isStream: isStream,
+  isURLSearchParams: isURLSearchParams,
+  isStandardBrowserEnv: isStandardBrowserEnv,
+  forEach: forEach,
+  merge: merge,
+  extend: extend,
+  trim: trim
+};
+
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* WEBPACK VAR INJECTION */(function(process) {
+
+var utils = __webpack_require__(29);
+var normalizeHeaderName = __webpack_require__(40);
+
+var DEFAULT_CONTENT_TYPE = {
+  'Content-Type': 'application/x-www-form-urlencoded'
+};
+
+function setContentTypeIfUnset(headers, value) {
+  if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
+    headers['Content-Type'] = value;
+  }
+}
+
+function getDefaultAdapter() {
+  var adapter;
+  if (typeof XMLHttpRequest !== 'undefined') {
+    // For browsers use XHR adapter
+    adapter = __webpack_require__(32);
+  } else if (typeof process !== 'undefined') {
+    // For node use HTTP adapter
+    adapter = __webpack_require__(32);
+  }
+  return adapter;
+}
+
+var defaults = {
+  adapter: getDefaultAdapter(),
+
+  transformRequest: [function transformRequest(data, headers) {
+    normalizeHeaderName(headers, 'Content-Type');
+    if (utils.isFormData(data) ||
+      utils.isArrayBuffer(data) ||
+      utils.isBuffer(data) ||
+      utils.isStream(data) ||
+      utils.isFile(data) ||
+      utils.isBlob(data)
+    ) {
+      return data;
+    }
+    if (utils.isArrayBufferView(data)) {
+      return data.buffer;
+    }
+    if (utils.isURLSearchParams(data)) {
+      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
+      return data.toString();
+    }
+    if (utils.isObject(data)) {
+      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
+      return JSON.stringify(data);
+    }
+    return data;
+  }],
+
+  transformResponse: [function transformResponse(data) {
+    /*eslint no-param-reassign:0*/
+    if (typeof data === 'string') {
+      try {
+        data = JSON.parse(data);
+      } catch (e) { /* Ignore */ }
+    }
+    return data;
+  }],
+
+  /**
+   * A timeout in milliseconds to abort a request. If set to 0 (default) a
+   * timeout is not created.
+   */
+  timeout: 0,
+
+  xsrfCookieName: 'XSRF-TOKEN',
+  xsrfHeaderName: 'X-XSRF-TOKEN',
+
+  maxContentLength: -1,
+
+  validateStatus: function validateStatus(status) {
+    return status >= 200 && status < 300;
+  }
+};
+
+defaults.headers = {
+  common: {
+    'Accept': 'application/json, text/plain, */*'
+  }
+};
+
+utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
+  defaults.headers[method] = {};
+});
+
+utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
+  defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
+});
+
+module.exports = defaults;
+
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+module.exports = function bind(fn, thisArg) {
+  return function wrap() {
+    var args = new Array(arguments.length);
+    for (var i = 0; i < args.length; i++) {
+      args[i] = arguments[i];
+    }
+    return fn.apply(thisArg, args);
+  };
+};
+
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+var settle = __webpack_require__(41);
+var buildURL = __webpack_require__(43);
+var parseHeaders = __webpack_require__(44);
+var isURLSameOrigin = __webpack_require__(45);
+var createError = __webpack_require__(33);
+var btoa = (typeof window !== 'undefined' && window.btoa && window.btoa.bind(window)) || __webpack_require__(46);
+
+module.exports = function xhrAdapter(config) {
+  return new Promise(function dispatchXhrRequest(resolve, reject) {
+    var requestData = config.data;
+    var requestHeaders = config.headers;
+
+    if (utils.isFormData(requestData)) {
+      delete requestHeaders['Content-Type']; // Let the browser set it
+    }
+
+    var request = new XMLHttpRequest();
+    var loadEvent = 'onreadystatechange';
+    var xDomain = false;
+
+    // For IE 8/9 CORS support
+    // Only supports POST and GET calls and doesn't returns the response headers.
+    // DON'T do this for testing b/c XMLHttpRequest is mocked, not XDomainRequest.
+    if ("development" !== 'test' &&
+        typeof window !== 'undefined' &&
+        window.XDomainRequest && !('withCredentials' in request) &&
+        !isURLSameOrigin(config.url)) {
+      request = new window.XDomainRequest();
+      loadEvent = 'onload';
+      xDomain = true;
+      request.onprogress = function handleProgress() {};
+      request.ontimeout = function handleTimeout() {};
+    }
+
+    // HTTP basic authentication
+    if (config.auth) {
+      var username = config.auth.username || '';
+      var password = config.auth.password || '';
+      requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
+    }
+
+    request.open(config.method.toUpperCase(), buildURL(config.url, config.params, config.paramsSerializer), true);
+
+    // Set the request timeout in MS
+    request.timeout = config.timeout;
+
+    // Listen for ready state
+    request[loadEvent] = function handleLoad() {
+      if (!request || (request.readyState !== 4 && !xDomain)) {
+        return;
+      }
+
+      // The request errored out and we didn't get a response, this will be
+      // handled by onerror instead
+      // With one exception: request that using file: protocol, most browsers
+      // will return status as 0 even though it's a successful request
+      if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
+        return;
+      }
+
+      // Prepare the response
+      var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
+      var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
+      var response = {
+        data: responseData,
+        // IE sends 1223 instead of 204 (https://github.com/axios/axios/issues/201)
+        status: request.status === 1223 ? 204 : request.status,
+        statusText: request.status === 1223 ? 'No Content' : request.statusText,
+        headers: responseHeaders,
+        config: config,
+        request: request
+      };
+
+      settle(resolve, reject, response);
+
+      // Clean up request
+      request = null;
+    };
+
+    // Handle low level network errors
+    request.onerror = function handleError() {
+      // Real errors are hidden from us by the browser
+      // onerror should only fire if it's a network error
+      reject(createError('Network Error', config, null, request));
+
+      // Clean up request
+      request = null;
+    };
+
+    // Handle timeout
+    request.ontimeout = function handleTimeout() {
+      reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
+        request));
+
+      // Clean up request
+      request = null;
+    };
+
+    // Add xsrf header
+    // This is only done if running in a standard browser environment.
+    // Specifically not if we're in a web worker, or react-native.
+    if (utils.isStandardBrowserEnv()) {
+      var cookies = __webpack_require__(47);
+
+      // Add xsrf header
+      var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
+          cookies.read(config.xsrfCookieName) :
+          undefined;
+
+      if (xsrfValue) {
+        requestHeaders[config.xsrfHeaderName] = xsrfValue;
+      }
+    }
+
+    // Add headers to the request
+    if ('setRequestHeader' in request) {
+      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
+        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
+          // Remove Content-Type if data is undefined
+          delete requestHeaders[key];
+        } else {
+          // Otherwise add header to the request
+          request.setRequestHeader(key, val);
+        }
+      });
+    }
+
+    // Add withCredentials to request if needed
+    if (config.withCredentials) {
+      request.withCredentials = true;
+    }
+
+    // Add responseType to request if needed
+    if (config.responseType) {
+      try {
+        request.responseType = config.responseType;
+      } catch (e) {
+        // Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
+        // But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
+        if (config.responseType !== 'json') {
+          throw e;
+        }
+      }
+    }
+
+    // Handle progress if needed
+    if (typeof config.onDownloadProgress === 'function') {
+      request.addEventListener('progress', config.onDownloadProgress);
+    }
+
+    // Not all browsers support upload events
+    if (typeof config.onUploadProgress === 'function' && request.upload) {
+      request.upload.addEventListener('progress', config.onUploadProgress);
+    }
+
+    if (config.cancelToken) {
+      // Handle cancellation
+      config.cancelToken.promise.then(function onCanceled(cancel) {
+        if (!request) {
+          return;
+        }
+
+        request.abort();
+        reject(cancel);
+        // Clean up request
+        request = null;
+      });
+    }
+
+    if (requestData === undefined) {
+      requestData = null;
+    }
+
+    // Send the request
+    request.send(requestData);
+  });
+};
+
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var enhanceError = __webpack_require__(42);
+
+/**
+ * Create an Error with the specified message, config, error code, request and response.
+ *
+ * @param {string} message The error message.
+ * @param {Object} config The config.
+ * @param {string} [code] The error code (for example, 'ECONNABORTED').
+ * @param {Object} [request] The request.
+ * @param {Object} [response] The response.
+ * @returns {Error} The created error.
+ */
+module.exports = function createError(message, config, code, request, response) {
+  var error = new Error(message);
+  return enhanceError(error, config, code, request, response);
+};
+
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+module.exports = function isCancel(value) {
+  return !!(value && value.__CANCEL__);
+};
+
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * A `Cancel` is an object that is thrown when an operation is canceled.
+ *
+ * @class
+ * @param {string=} message The message.
+ */
+function Cancel(message) {
+  this.message = message;
+}
+
+Cancel.prototype.toString = function toString() {
+  return 'Cancel' + (this.message ? ': ' + this.message : '');
+};
+
+Cancel.prototype.__CANCEL__ = true;
+
+module.exports = Cancel;
+
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(37);
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+var bind = __webpack_require__(31);
+var Axios = __webpack_require__(39);
+var defaults = __webpack_require__(30);
+
+/**
+ * Create an instance of Axios
+ *
+ * @param {Object} defaultConfig The default config for the instance
+ * @return {Axios} A new instance of Axios
+ */
+function createInstance(defaultConfig) {
+  var context = new Axios(defaultConfig);
+  var instance = bind(Axios.prototype.request, context);
+
+  // Copy axios.prototype to instance
+  utils.extend(instance, Axios.prototype, context);
+
+  // Copy context to instance
+  utils.extend(instance, context);
+
+  return instance;
+}
+
+// Create the default instance to be exported
+var axios = createInstance(defaults);
+
+// Expose Axios class to allow class inheritance
+axios.Axios = Axios;
+
+// Factory for creating new instances
+axios.create = function create(instanceConfig) {
+  return createInstance(utils.merge(defaults, instanceConfig));
+};
+
+// Expose Cancel & CancelToken
+axios.Cancel = __webpack_require__(35);
+axios.CancelToken = __webpack_require__(53);
+axios.isCancel = __webpack_require__(34);
+
+// Expose all/spread
+axios.all = function all(promises) {
+  return Promise.all(promises);
+};
+axios.spread = __webpack_require__(54);
+
+module.exports = axios;
+
+// Allow use of default import syntax in TypeScript
+module.exports.default = axios;
+
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports) {
+
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+// The _isBuffer check is for Safari 5-7 support, because it's missing
+// Object.prototype.constructor. Remove this eventually
+module.exports = function (obj) {
+  return obj != null && (isBuffer(obj) || isSlowBuffer(obj) || !!obj._isBuffer)
+}
+
+function isBuffer (obj) {
+  return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)
+}
+
+// For Node v0.10 support. Remove this eventually.
+function isSlowBuffer (obj) {
+  return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer(obj.slice(0, 0))
+}
+
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var defaults = __webpack_require__(30);
+var utils = __webpack_require__(29);
+var InterceptorManager = __webpack_require__(48);
+var dispatchRequest = __webpack_require__(49);
+
+/**
+ * Create a new instance of Axios
+ *
+ * @param {Object} instanceConfig The default config for the instance
+ */
+function Axios(instanceConfig) {
+  this.defaults = instanceConfig;
+  this.interceptors = {
+    request: new InterceptorManager(),
+    response: new InterceptorManager()
+  };
+}
+
+/**
+ * Dispatch a request
+ *
+ * @param {Object} config The config specific for this request (merged with this.defaults)
+ */
+Axios.prototype.request = function request(config) {
+  /*eslint no-param-reassign:0*/
+  // Allow for axios('example/url'[, config]) a la fetch API
+  if (typeof config === 'string') {
+    config = utils.merge({
+      url: arguments[0]
+    }, arguments[1]);
+  }
+
+  config = utils.merge(defaults, {method: 'get'}, this.defaults, config);
+  config.method = config.method.toLowerCase();
+
+  // Hook up interceptors middleware
+  var chain = [dispatchRequest, undefined];
+  var promise = Promise.resolve(config);
+
+  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
+    chain.unshift(interceptor.fulfilled, interceptor.rejected);
+  });
+
+  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
+    chain.push(interceptor.fulfilled, interceptor.rejected);
+  });
+
+  while (chain.length) {
+    promise = promise.then(chain.shift(), chain.shift());
+  }
+
+  return promise;
+};
+
+// Provide aliases for supported request methods
+utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
+  /*eslint func-names:0*/
+  Axios.prototype[method] = function(url, config) {
+    return this.request(utils.merge(config || {}, {
+      method: method,
+      url: url
+    }));
+  };
+});
+
+utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
+  /*eslint func-names:0*/
+  Axios.prototype[method] = function(url, data, config) {
+    return this.request(utils.merge(config || {}, {
+      method: method,
+      url: url,
+      data: data
+    }));
+  };
+});
+
+module.exports = Axios;
+
+
+/***/ }),
+/* 40 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+module.exports = function normalizeHeaderName(headers, normalizedName) {
+  utils.forEach(headers, function processHeader(value, name) {
+    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {
+      headers[normalizedName] = value;
+      delete headers[name];
+    }
+  });
+};
+
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var createError = __webpack_require__(33);
+
+/**
+ * Resolve or reject a Promise based on response status.
+ *
+ * @param {Function} resolve A function that resolves the promise.
+ * @param {Function} reject A function that rejects the promise.
+ * @param {object} response The response.
+ */
+module.exports = function settle(resolve, reject, response) {
+  var validateStatus = response.config.validateStatus;
+  // Note: status is not exposed by XDomainRequest
+  if (!response.status || !validateStatus || validateStatus(response.status)) {
+    resolve(response);
+  } else {
+    reject(createError(
+      'Request failed with status code ' + response.status,
+      response.config,
+      null,
+      response.request,
+      response
+    ));
+  }
+};
+
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * Update an Error with the specified config, error code, and response.
+ *
+ * @param {Error} error The error to update.
+ * @param {Object} config The config.
+ * @param {string} [code] The error code (for example, 'ECONNABORTED').
+ * @param {Object} [request] The request.
+ * @param {Object} [response] The response.
+ * @returns {Error} The error.
+ */
+module.exports = function enhanceError(error, config, code, request, response) {
+  error.config = config;
+  if (code) {
+    error.code = code;
+  }
+  error.request = request;
+  error.response = response;
+  return error;
+};
+
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+function encode(val) {
+  return encodeURIComponent(val).
+    replace(/%40/gi, '@').
+    replace(/%3A/gi, ':').
+    replace(/%24/g, '$').
+    replace(/%2C/gi, ',').
+    replace(/%20/g, '+').
+    replace(/%5B/gi, '[').
+    replace(/%5D/gi, ']');
+}
+
+/**
+ * Build a URL by appending params to the end
+ *
+ * @param {string} url The base of the url (e.g., http://www.google.com)
+ * @param {object} [params] The params to be appended
+ * @returns {string} The formatted url
+ */
+module.exports = function buildURL(url, params, paramsSerializer) {
+  /*eslint no-param-reassign:0*/
+  if (!params) {
+    return url;
+  }
+
+  var serializedParams;
+  if (paramsSerializer) {
+    serializedParams = paramsSerializer(params);
+  } else if (utils.isURLSearchParams(params)) {
+    serializedParams = params.toString();
+  } else {
+    var parts = [];
+
+    utils.forEach(params, function serialize(val, key) {
+      if (val === null || typeof val === 'undefined') {
+        return;
+      }
+
+      if (utils.isArray(val)) {
+        key = key + '[]';
+      } else {
+        val = [val];
+      }
+
+      utils.forEach(val, function parseValue(v) {
+        if (utils.isDate(v)) {
+          v = v.toISOString();
+        } else if (utils.isObject(v)) {
+          v = JSON.stringify(v);
+        }
+        parts.push(encode(key) + '=' + encode(v));
+      });
+    });
+
+    serializedParams = parts.join('&');
+  }
+
+  if (serializedParams) {
+    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
+  }
+
+  return url;
+};
+
+
+/***/ }),
+/* 44 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+// Headers whose duplicates are ignored by node
+// c.f. https://nodejs.org/api/http.html#http_message_headers
+var ignoreDuplicateOf = [
+  'age', 'authorization', 'content-length', 'content-type', 'etag',
+  'expires', 'from', 'host', 'if-modified-since', 'if-unmodified-since',
+  'last-modified', 'location', 'max-forwards', 'proxy-authorization',
+  'referer', 'retry-after', 'user-agent'
+];
+
+/**
+ * Parse headers into an object
+ *
+ * ```
+ * Date: Wed, 27 Aug 2014 08:58:49 GMT
+ * Content-Type: application/json
+ * Connection: keep-alive
+ * Transfer-Encoding: chunked
+ * ```
+ *
+ * @param {String} headers Headers needing to be parsed
+ * @returns {Object} Headers parsed into an object
+ */
+module.exports = function parseHeaders(headers) {
+  var parsed = {};
+  var key;
+  var val;
+  var i;
+
+  if (!headers) { return parsed; }
+
+  utils.forEach(headers.split('\n'), function parser(line) {
+    i = line.indexOf(':');
+    key = utils.trim(line.substr(0, i)).toLowerCase();
+    val = utils.trim(line.substr(i + 1));
+
+    if (key) {
+      if (parsed[key] && ignoreDuplicateOf.indexOf(key) >= 0) {
+        return;
+      }
+      if (key === 'set-cookie') {
+        parsed[key] = (parsed[key] ? parsed[key] : []).concat([val]);
+      } else {
+        parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
+      }
+    }
+  });
+
+  return parsed;
+};
+
+
+/***/ }),
+/* 45 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+module.exports = (
+  utils.isStandardBrowserEnv() ?
+
+  // Standard browser envs have full support of the APIs needed to test
+  // whether the request URL is of the same origin as current location.
+  (function standardBrowserEnv() {
+    var msie = /(msie|trident)/i.test(navigator.userAgent);
+    var urlParsingNode = document.createElement('a');
+    var originURL;
+
+    /**
+    * Parse a URL to discover it's components
+    *
+    * @param {String} url The URL to be parsed
+    * @returns {Object}
+    */
+    function resolveURL(url) {
+      var href = url;
+
+      if (msie) {
+        // IE needs attribute set twice to normalize properties
+        urlParsingNode.setAttribute('href', href);
+        href = urlParsingNode.href;
+      }
+
+      urlParsingNode.setAttribute('href', href);
+
+      // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
+      return {
+        href: urlParsingNode.href,
+        protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
+        host: urlParsingNode.host,
+        search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
+        hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
+        hostname: urlParsingNode.hostname,
+        port: urlParsingNode.port,
+        pathname: (urlParsingNode.pathname.charAt(0) === '/') ?
+                  urlParsingNode.pathname :
+                  '/' + urlParsingNode.pathname
+      };
+    }
+
+    originURL = resolveURL(window.location.href);
+
+    /**
+    * Determine if a URL shares the same origin as the current location
+    *
+    * @param {String} requestURL The URL to test
+    * @returns {boolean} True if URL shares the same origin, otherwise false
+    */
+    return function isURLSameOrigin(requestURL) {
+      var parsed = (utils.isString(requestURL)) ? resolveURL(requestURL) : requestURL;
+      return (parsed.protocol === originURL.protocol &&
+            parsed.host === originURL.host);
+    };
+  })() :
+
+  // Non standard browser envs (web workers, react-native) lack needed support.
+  (function nonStandardBrowserEnv() {
+    return function isURLSameOrigin() {
+      return true;
+    };
+  })()
+);
+
+
+/***/ }),
+/* 46 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+// btoa polyfill for IE<10 courtesy https://github.com/davidchambers/Base64.js
+
+var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+
+function E() {
+  this.message = 'String contains an invalid character';
+}
+E.prototype = new Error;
+E.prototype.code = 5;
+E.prototype.name = 'InvalidCharacterError';
+
+function btoa(input) {
+  var str = String(input);
+  var output = '';
+  for (
+    // initialize result and counter
+    var block, charCode, idx = 0, map = chars;
+    // if the next str index does not exist:
+    //   change the mapping table to "="
+    //   check if d has no fractional digits
+    str.charAt(idx | 0) || (map = '=', idx % 1);
+    // "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
+    output += map.charAt(63 & block >> 8 - idx % 1 * 8)
+  ) {
+    charCode = str.charCodeAt(idx += 3 / 4);
+    if (charCode > 0xFF) {
+      throw new E();
+    }
+    block = block << 8 | charCode;
+  }
+  return output;
+}
+
+module.exports = btoa;
+
+
+/***/ }),
+/* 47 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+module.exports = (
+  utils.isStandardBrowserEnv() ?
+
+  // Standard browser envs support document.cookie
+  (function standardBrowserEnv() {
+    return {
+      write: function write(name, value, expires, path, domain, secure) {
+        var cookie = [];
+        cookie.push(name + '=' + encodeURIComponent(value));
+
+        if (utils.isNumber(expires)) {
+          cookie.push('expires=' + new Date(expires).toGMTString());
+        }
+
+        if (utils.isString(path)) {
+          cookie.push('path=' + path);
+        }
+
+        if (utils.isString(domain)) {
+          cookie.push('domain=' + domain);
+        }
+
+        if (secure === true) {
+          cookie.push('secure');
+        }
+
+        document.cookie = cookie.join('; ');
+      },
+
+      read: function read(name) {
+        var match = document.cookie.match(new RegExp('(^|;\\s*)(' + name + ')=([^;]*)'));
+        return (match ? decodeURIComponent(match[3]) : null);
+      },
+
+      remove: function remove(name) {
+        this.write(name, '', Date.now() - 86400000);
+      }
+    };
+  })() :
+
+  // Non standard browser env (web workers, react-native) lack needed support.
+  (function nonStandardBrowserEnv() {
+    return {
+      write: function write() {},
+      read: function read() { return null; },
+      remove: function remove() {}
+    };
+  })()
+);
+
+
+/***/ }),
+/* 48 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+function InterceptorManager() {
+  this.handlers = [];
+}
+
+/**
+ * Add a new interceptor to the stack
+ *
+ * @param {Function} fulfilled The function to handle `then` for a `Promise`
+ * @param {Function} rejected The function to handle `reject` for a `Promise`
+ *
+ * @return {Number} An ID used to remove interceptor later
+ */
+InterceptorManager.prototype.use = function use(fulfilled, rejected) {
+  this.handlers.push({
+    fulfilled: fulfilled,
+    rejected: rejected
+  });
+  return this.handlers.length - 1;
+};
+
+/**
+ * Remove an interceptor from the stack
+ *
+ * @param {Number} id The ID that was returned by `use`
+ */
+InterceptorManager.prototype.eject = function eject(id) {
+  if (this.handlers[id]) {
+    this.handlers[id] = null;
+  }
+};
+
+/**
+ * Iterate over all the registered interceptors
+ *
+ * This method is particularly useful for skipping over any
+ * interceptors that may have become `null` calling `eject`.
+ *
+ * @param {Function} fn The function to call for each interceptor
+ */
+InterceptorManager.prototype.forEach = function forEach(fn) {
+  utils.forEach(this.handlers, function forEachHandler(h) {
+    if (h !== null) {
+      fn(h);
+    }
+  });
+};
+
+module.exports = InterceptorManager;
+
+
+/***/ }),
+/* 49 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+var transformData = __webpack_require__(50);
+var isCancel = __webpack_require__(34);
+var defaults = __webpack_require__(30);
+var isAbsoluteURL = __webpack_require__(51);
+var combineURLs = __webpack_require__(52);
+
+/**
+ * Throws a `Cancel` if cancellation has been requested.
+ */
+function throwIfCancellationRequested(config) {
+  if (config.cancelToken) {
+    config.cancelToken.throwIfRequested();
+  }
+}
+
+/**
+ * Dispatch a request to the server using the configured adapter.
+ *
+ * @param {object} config The config that is to be used for the request
+ * @returns {Promise} The Promise to be fulfilled
+ */
+module.exports = function dispatchRequest(config) {
+  throwIfCancellationRequested(config);
+
+  // Support baseURL config
+  if (config.baseURL && !isAbsoluteURL(config.url)) {
+    config.url = combineURLs(config.baseURL, config.url);
+  }
+
+  // Ensure headers exist
+  config.headers = config.headers || {};
+
+  // Transform request data
+  config.data = transformData(
+    config.data,
+    config.headers,
+    config.transformRequest
+  );
+
+  // Flatten headers
+  config.headers = utils.merge(
+    config.headers.common || {},
+    config.headers[config.method] || {},
+    config.headers || {}
+  );
+
+  utils.forEach(
+    ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
+    function cleanHeaderConfig(method) {
+      delete config.headers[method];
+    }
+  );
+
+  var adapter = config.adapter || defaults.adapter;
+
+  return adapter(config).then(function onAdapterResolution(response) {
+    throwIfCancellationRequested(config);
+
+    // Transform response data
+    response.data = transformData(
+      response.data,
+      response.headers,
+      config.transformResponse
+    );
+
+    return response;
+  }, function onAdapterRejection(reason) {
+    if (!isCancel(reason)) {
+      throwIfCancellationRequested(config);
+
+      // Transform response data
+      if (reason && reason.response) {
+        reason.response.data = transformData(
+          reason.response.data,
+          reason.response.headers,
+          config.transformResponse
+        );
+      }
+    }
+
+    return Promise.reject(reason);
+  });
+};
+
+
+/***/ }),
+/* 50 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var utils = __webpack_require__(29);
+
+/**
+ * Transform the data for a request or a response
+ *
+ * @param {Object|String} data The data to be transformed
+ * @param {Array} headers The headers for the request or response
+ * @param {Array|Function} fns A single function or Array of functions
+ * @returns {*} The resulting transformed data
+ */
+module.exports = function transformData(data, headers, fns) {
+  /*eslint no-param-reassign:0*/
+  utils.forEach(fns, function transform(fn) {
+    data = fn(data, headers);
+  });
+
+  return data;
+};
+
+
+/***/ }),
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * Determines whether the specified URL is absolute
+ *
+ * @param {string} url The URL to test
+ * @returns {boolean} True if the specified URL is absolute, otherwise false
+ */
+module.exports = function isAbsoluteURL(url) {
+  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
+  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
+  // by any combination of letters, digits, plus, period, or hyphen.
+  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
+};
+
+
+/***/ }),
+/* 52 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * Creates a new URL by combining the specified URLs
+ *
+ * @param {string} baseURL The base URL
+ * @param {string} relativeURL The relative URL
+ * @returns {string} The combined URL
+ */
+module.exports = function combineURLs(baseURL, relativeURL) {
+  return relativeURL
+    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
+    : baseURL;
+};
+
+
+/***/ }),
+/* 53 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var Cancel = __webpack_require__(35);
+
+/**
+ * A `CancelToken` is an object that can be used to request cancellation of an operation.
+ *
+ * @class
+ * @param {Function} executor The executor function.
+ */
+function CancelToken(executor) {
+  if (typeof executor !== 'function') {
+    throw new TypeError('executor must be a function.');
+  }
+
+  var resolvePromise;
+  this.promise = new Promise(function promiseExecutor(resolve) {
+    resolvePromise = resolve;
+  });
+
+  var token = this;
+  executor(function cancel(message) {
+    if (token.reason) {
+      // Cancellation has already been requested
+      return;
+    }
+
+    token.reason = new Cancel(message);
+    resolvePromise(token.reason);
+  });
+}
+
+/**
+ * Throws a `Cancel` if cancellation has been requested.
+ */
+CancelToken.prototype.throwIfRequested = function throwIfRequested() {
+  if (this.reason) {
+    throw this.reason;
+  }
+};
+
+/**
+ * Returns an object that contains a new `CancelToken` and a function that, when called,
+ * cancels the `CancelToken`.
+ */
+CancelToken.source = function source() {
+  var cancel;
+  var token = new CancelToken(function executor(c) {
+    cancel = c;
+  });
+  return {
+    token: token,
+    cancel: cancel
+  };
+};
+
+module.exports = CancelToken;
+
+
+/***/ }),
+/* 54 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * Syntactic sugar for invoking a function and expanding an array for arguments.
+ *
+ * Common use case would be to use `Function.prototype.apply`.
+ *
+ *  ```js
+ *  function f(x, y, z) {}
+ *  var args = [1, 2, 3];
+ *  f.apply(null, args);
+ *  ```
+ *
+ * With `spread` this example can be re-written.
+ *
+ *  ```js
+ *  spread(function(x, y, z) {})([1, 2, 3]);
+ *  ```
+ *
+ * @param {Function} callback
+ * @returns {Function}
+ */
+module.exports = function spread(callback) {
+  return function wrap(arr) {
+    return callback.apply(null, arr);
+  };
+};
+
+
+/***/ }),
+/* 55 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(56)
+}
+var normalizeComponent = __webpack_require__(1)
+/* script */
+var __vue_script__ = __webpack_require__(58)
+/* template */
+var __vue_template__ = __webpack_require__(59)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/cart-dropdown.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-0f947e82", Component.options)
+  } else {
+    hotAPI.reload("data-v-0f947e82", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 56 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(57);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(20)("69b33cbc", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-0f947e82\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./cart-dropdown.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-0f947e82\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./cart-dropdown.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 57 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(19)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n.show {\n    display: none;\n}\n.dropdown-cart {\n    position: absolute;\n    background: #FFFFFF;\n    border: 1px solid #E8E8E8;\n    -webkit-box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n            box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n    padding: 20px;\n    border-radius: 1px;\n    right: 10%;\n    top: 75px;\n    width: 387px;\n    z-index: 5;\n}\n.dropdown-cart > .dropdown-header {\n    width: 100%;\n}\n.dropdown-cart > .dropdown-header p{\n    display: inline;\n    line-height: 25px;\n}\n.dropdown-cart > .dropdown-header i{\n    cursor: pointer;\n    float: right;\n    height: 22px;\n    width: 22px;\n}\n.dropdown-content {\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n.dropdown-content .item{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n    border-bottom: 1px solid #E8E8E8;\n}\n.dropdown-content .item img{\n    height: 75px;\n    width: 75px;\n    margin-right: 8px;\n}\n.item-details .item-name {\n    font-size: 16px;\n    font-weight: bold;\n    margin-bottom: 10px;\n}\n.item-details .item-price {\n    margin-bottom: 10px;\n}\n.item-details .item-qty {\n    margin-bottom: 10px;\n}\n.dropdown-footer {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.dropdown-footer button {\n    border-radius: 0px;\n}\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 58 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+// define the item component
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: {
+        items: Array
+    },
+
+    data: function data() {
+        return {
+            toggle: true,
+            totalitems: 0,
+            cart_items: []
+        };
+    },
+
+
+    computed: {
+        makeDropdown: function makeDropdown() {}
+    },
+
+    mounted: function mounted() {
+        if (this.items != undefined) this.initializeDropdown();
+    },
+
+    methods: {
+        dropOrHide: function dropOrHide() {
+            if (this.toggle == false) {
+                this.toggle = true;
+            } else {
+                this.toggle = false;
+            }
+        },
+
+        initializeDropdown: function initializeDropdown() {
+            this.totalitems = this.items.length;
+        }
+    }
+});
+
+/***/ }),
+/* 59 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", [
+    _c("ul", { staticClass: "cart-dropdown", on: { click: _vm.dropOrHide } }, [
+      _c("li", { staticClass: "cart-summary" }, [
+        _c("span", { staticClass: "icon cart-icon" }),
+        _vm._v(" "),
+        _c("span", { staticClass: "cart" }, [
+          _vm.totalitems > 0
+            ? _c("span", { staticClass: "cart-count" }, [
+                _vm._v(_vm._s(_vm.totalitems))
+              ])
+            : _vm._e(),
+          _vm._v("Products")
+        ]),
+        _vm._v(" "),
+        _c("span", { staticClass: "icon arrow-down-icon" })
+      ])
+    ]),
+    _vm._v(" "),
+    _c("div", { staticClass: "dropdown-cart", class: { show: _vm.toggle } }, [
+      _c("div", { staticClass: "dropdown-header" }, [
+        _c("p", { staticClass: "heading" }, [_vm._v("Cart Subtotal - $80")]),
+        _vm._v(" "),
+        _c("i", {
+          staticClass: "icon icon-menu-close",
+          on: { click: _vm.dropOrHide }
+        })
+      ]),
+      _vm._v(" "),
+      _vm._m(0),
+      _vm._v(" "),
+      _vm._m(1)
+    ])
+  ])
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "dropdown-content" }, [
+      _c("div", { staticClass: "item" }, [
+        _c("div", { staticClass: "item-image" }, [_c("img")]),
+        _vm._v(" "),
+        _c("div", { staticClass: "item-details" }, [
+          _c("div", { staticClass: "item-name" }, [_vm._v("Some Item Name")]),
+          _vm._v(" "),
+          _c("div", { staticClass: "item-price" }, [_vm._v("$ Some Price")]),
+          _vm._v(" "),
+          _c("div", { staticClass: "item-qty" }, [_vm._v("Some Quantity")])
+        ])
+      ])
+    ])
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "dropdown-footer" }, [
+      _c("a", { attrs: { href: "/" } }, [_vm._v("View Shopping Cart")]),
+      _vm._v(" "),
+      _c("button", { staticClass: "btn btn-primary btn-lg" }, [
+        _vm._v("CHECKOUT")
+      ])
+    ])
+  }
+]
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-0f947e82", module.exports)
+  }
+}
+
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index a246e106a..1b07f5b35 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -73,7 +73,7 @@
                     @else
                         <a href="{{ route('login') }}">Login</a>
                         <a href="{{ route('register') }}">Register</a>
-                    @endauth
+                    @endauthexample-component
                 </div>
             @endif