diff --git a/commerce_add_to_cart_confirmation.info.yml b/commerce_add_to_cart_confirmation.info.yml
index e098be1..623332c 100644
--- a/commerce_add_to_cart_confirmation.info.yml
+++ b/commerce_add_to_cart_confirmation.info.yml
@@ -5,3 +5,5 @@ core: 8.x
 dependencies:
   - commerce_order
   - commerce_cart
+libraries:
+  - commerce_add_to_cart_confirmation/popup-theme
diff --git a/commerce_add_to_cart_confirmation.libraries.yml b/commerce_add_to_cart_confirmation.libraries.yml
new file mode 100644
index 0000000..575259d
--- /dev/null
+++ b/commerce_add_to_cart_confirmation.libraries.yml
@@ -0,0 +1,5 @@
+popup-theme:
+ version: 1.x
+  css:
+    theme:
+      css/commerce_add_to_cart_confirmation.css: {}
diff --git a/css/commerce_add_to_cart_confirmation.css b/css/commerce_add_to_cart_confirmation.css
new file mode 100644
index 0000000..3f895d8
--- /dev/null
+++ b/css/commerce_add_to_cart_confirmation.css
@@ -0,0 +1,82 @@
+.container{
+  width: 51%;
+  margin: auto;
+  border:8px solid #c9cccc;
+  background-color: #f6fbf3;
+}
+.container_1{
+  width: 99%;
+  margin: auto;
+}
+hr{
+  border:1px solid #edefef;
+}
+.left_div{
+  max-width: 49%;
+  display: inline-block;
+}
+.hh{
+  font-size: 26px;
+}
+.product_image{
+  width: 47%;
+  height: 100px;
+  border:2px solid #edefef;
+  display: inline-block;
+  vertical-align: top;
+}
+.product_details{
+  max-width: 44%;
+  display: inline-block;
+  line-height: 14px;
+  margin-left: 10px;
+}
+.name{
+  display: inline-block;
+  margin-top: 0px;
+  margin-bottom: 4px;
+}
+.right_div{
+  max-width: 48%;
+  display: inline-block;
+  float: right;
+}
+h2 a{
+  font-size: 12px;
+}
+table{
+  width: 100%;
+}
+.td{
+  float: right;
+}
+
+.hr{
+  margin-bottom: 9px;
+}
+.button{
+  border:2px solid #edefef;
+  display: inline-block;
+  padding: 4px 40px;
+  color: blue;
+}
+.button1{
+  border:2px solid #edefef;
+  display: inline-block;
+  padding: 6px 23px;
+  background-color:#71deef ;
+  color: #fff;
+  margin-left: 14px;
+
+}
+a.button1:hover{
+  background-color:#71deef ;
+  color: #fff;
+}
+a.button:hover{
+  color: blue;
+  background-color: none;
+}
+.subm{
+  margin-top: 15px;
+}
diff --git a/src/CartPopUpProvider.php b/src/CartPopUpProvider.php
new file mode 100644
index 0000000..9b13dd0
--- /dev/null
+++ b/src/CartPopUpProvider.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace Drupal\commerce_add_to_cart_confirmation;
+
+use Drupal\commerce\PurchasableEntityInterface;
+use Drupal\commerce_order\Entity\OrderInterface;
+use Drupal\Core\Url;
+use Drupal\file\Entity\File;
+
+/**
+ * Default implementation of the Cart Popup Provider.
+ */
+class CartPopUpProvider implements CartPopUpProviderInterface {
+
+  /**
+   * The order storage.
+   *
+   * @var \Drupal\commerce_order\Entity\OrderInterface
+   */
+  protected $order;
+
+  /**
+   * The product storage.
+   *
+   * @var \Drupal\commerce\PurchasableEntityInterface
+   */
+  protected $product;
+
+  /**
+   * The product quantity.
+   *
+   * @var int
+   */
+  protected $quantity;
+
+  /**
+   * Constructs a new CartPopUpProvider object.
+   *
+   * @param \Drupal\commerce_order\Entity\OrderInterface $order
+   *   The order storage.
+   * @param \Drupal\commerce\PurchasableEntityInterface $product
+   *   The product storage.
+   * @param int $quantity
+   *   The product quantity.
+   */
+  public function __construct(OrderInterface $order, PurchasableEntityInterface $product, $quantity) {
+    $this->order = $order;
+    $this->product = $product;
+    $this->quantity = $quantity;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function popupContents() {
+    $fid = $this->product->get('field_product_image')->getValue()[0]['target_id'];
+    $fid ? $productImage = File::load($fid)->getFileUri() : '';
+    $uuid = $this->product->get('field_product_image')->getSettings()['default_image']['uuid'];
+    $uuid != NULL && $productImage == NULL ? $productImage = \Drupal::service('entity.manager')->loadEntityByUuid('file', $uuid)->getFileUri() : '';
+    $product['title'] = $this->product->getTitle();
+    $product['sku'] = $this->product->getSku();
+    $product['price']['number'] = $this->product->getPrice()->getNumber();
+    $product['price']['code'] = $this->product->getPrice()->getCurrencyCode();
+    $product['image'] = $productImage;
+    $product['quantity'] = $this->quantity;
+
+    $taxAmount = $this->order->getItems()[0]->getAdjustments()[0]->getAmount()->getNumber();
+    $totalItems = 0;
+    $order = [];
+    foreach ($this->order->getItems() as $key => $item) {
+      $order['totalItems'] += $item->getQuantity();
+    }
+    $order['id'] = $this->order->id();
+    $order['totalTax'] = $order['totalItems'] * $taxAmount;
+    $order['orderSubtotal'] = $this->order->getSubtotalPrice();
+    $order['subtotal'] = $this->order->getTotalPrice();
+    $order['cartUrl'] = Url::fromRoute('commerce_cart.page');
+    $order['checkoutUrl'] = Url::fromRoute('commerce_checkout.form', ['commerce_order' => $order['id'], 'step' => 'order_information']);
+    // kint($order);exit;
+    return [
+      '#theme' => 'add_to_cart_message',
+      '#attached' => array(
+        'library' => array(
+          'commerce_add_to_cart_confirmation/popup-theme',
+        ),
+      ),
+      '#product' => $product,
+      '#cart' => $order,
+    ];
+  }
+
+}
diff --git a/templates/add-to-cart-message.html.twig b/templates/add-to-cart-message.html.twig
new file mode 100644
index 0000000..a366ea9
--- /dev/null
+++ b/templates/add-to-cart-message.html.twig
@@ -0,0 +1,44 @@
+<div class="container">
+  <span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
+  <div class="container_1">
+    <div class="left_div">
+
+      <h2 class="hh"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {{ product.quantity }} item added to your cart</h2>
+      <hr>
+      <div class="product_image"><img src="{{ file_url(product.image) }}" alt=""></div>
+      <div class="product_details">
+        <h4 class="name">{{ product.title }}</h4>
+        <span>sku:{{ product.sku }}<br>
+				${{ product.price.number }} {{ product.price.code }}<br>
+				quantity: {{ product.quantity }}<br>
+				</span>
+      </div>
+    </div>
+    <div class="right_div">
+      <h2>Your cart:{{ cart.totalItems }} items <a href="{{ cart.cartUrl }}">View Cart ></a></h2>
+      <hr>
+      <table>
+        <tr>
+          <td>order subtotal:</td>
+          <td class="td">${{ cart.orderSubtotal }}</td>
+        </tr>
+        <tr>
+          <td>est. shipping:</td>
+          <td class="td">$12.00</td>
+        </tr>
+        <tr>
+          <td>Est. taxes:</td>
+          <td class="td">${{ cart.totalTax }}</td>
+        </tr>
+        <tr >
+          <td><b>subtotal:</b></td>
+          <td class="td"><b>${{ cart.subtotal }}</b></td>
+        </tr>
+      </table>
+      <hr class="hr">
+      <br>
+      <a href=""><div class="subm"><div class="button text-uppercase">Continue Shopping</div></div></a>
+      <a href="{{ cart.checkoutUrl }}"><div class="button1 text-uppercase">Checkout Now</div></a>
+    </div>
+  </div>
+</div>