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/config/optional/core.entity_view_mode.commerce_product_variation.add_to_cart_confirmation.yml b/config/optional/core.entity_view_mode.commerce_product_variation.add_to_cart_confirmation.yml
new file mode 100644
index 0000000..774e77c
--- /dev/null
+++ b/config/optional/core.entity_view_mode.commerce_product_variation.add_to_cart_confirmation.yml
@@ -0,0 +1,10 @@
+langcode: en
+status: true
+dependencies:
+  enforced:
+    module:
+      - commerce_product
+id: commerce_product_variation.add_to_cart_confirmation
+label: Add to Cart Confirmation
+targetEntityType: commerce_product_variation
+cache: true
diff --git a/css/commerce_add_to_cart_confirmation.css b/css/commerce_add_to_cart_confirmation.css
new file mode 100644
index 0000000..27c0c69
--- /dev/null
+++ b/css/commerce_add_to_cart_confirmation.css
@@ -0,0 +1,91 @@
+.messages .container {
+  width: 100%;
+  margin: auto;
+  border: 8px solid #c9cccc;
+  background-color: #f6fbf3;
+}
+.inner-container {
+  width: 100%;
+  margin: auto;
+}
+.messages.container hr {
+  border: 1px solid #edefef;
+}
+.left-div {
+  max-width: 49%;
+  display: inline-block;
+}
+.left-div h2 {
+  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;
+}
+.product-name {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.right-div {
+  max-width: 48%;
+  display: inline-block;
+  float: right;
+}
+.messages.container h2 a {
+  font-size: 12px;
+}
+.messages.container table {
+  width: 100%;
+}
+.data-cell {
+  float: right;
+}
+
+.line {
+  margin-bottom: 9px;
+}
+.continue-shopping {
+  border: 2px solid #edefef;
+  display: inline-block;
+  padding: 4px 40px;
+  color: blue;
+  margin-top: 15px;
+}
+.checkout {
+  border: 2px solid #edefef;
+  display: inline-block;
+  padding: 6px 23px;
+  background-color: #71deef ;
+  color: #fff;
+  margin-left: 14px;
+
+}
+.messages.container a.checkout:hover {
+  background-color: #71deef ;
+  color: #fff;
+}
+.messages.container a.continue-shopping:hover {
+  color: blue;
+}
+.tick-image {
+  display: inline-block;
+  background: url("../img/tick.png") no-repeat;
+  background-size: 25px 25px;
+  width: 25px;
+}
+.cross-image {
+  display: inline-block;
+  background-image: url("../img/cross.png");
+  background-size: 25px 25px;
+  width: 25px;
+}
diff --git a/img/cross.png b/img/cross.png
new file mode 100644
index 0000000..72e129d
Binary files /dev/null and b/img/cross.png differ
diff --git a/img/tick.png b/img/tick.png
new file mode 100644
index 0000000..ddc01d4
Binary files /dev/null and b/img/tick.png differ
diff --git a/src/CartPopUpProvider.php b/src/CartPopUpProvider.php
new file mode 100644
index 0000000..1334a85
--- /dev/null
+++ b/src/CartPopUpProvider.php
@@ -0,0 +1,68 @@
+<?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() {
+    return [
+      '#theme' => 'add_to_cart_message',
+      '#attached' => array(
+        'library' => array(
+          'commerce_add_to_cart_confirmation/popup-theme',
+        ),
+      ),
+      '#product' => $this->product,
+      '#cart' => $this->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..7f73cb0
--- /dev/null
+++ b/templates/add-to-cart-message.html.twig
@@ -0,0 +1,43 @@
+<div class="container">
+  <span class="cross-image" aria-hidden="true"></span>
+  <div class="inner-container">
+    <div class="left-div">
+      <h2><span class="tick-image">&nbsp;</span> item added to your cart</h2>
+      <hr>
+      <div class="product-image"><img src="{{ file_url(product.field_product_image.entity.uri.value) }}" alt=""></div>
+      <div class="product-details">
+        <h4 class="product-name"></h4>
+        <span>sku:<br>
+	price: $<br>
+	quantity: <br>
+	</span>
+      </div>
+    </div>
+    <div class="right-div">
+      <h2>Your cart: items <a href="">View Cart ></a></h2>
+      <hr>
+      <table>
+        <tr>
+          <td>order subtotal:</td>
+          <td class="data-cell">$</td>
+        </tr>
+        <tr>
+          <td>est. shipping:</td>
+          <td class="data-cell">$12.00</td>
+        </tr>
+        <tr>
+          <td>Est. taxes:</td>
+          <td class="data-cell">$</td>
+        </tr>
+        <tr >
+          <td><b>subtotal:</b></td>
+          <td class="data-cell"><b>$</b></td>
+        </tr>
+      </table>
+      <hr class="line">
+      <br>
+      <a href=""><span class="continue-shopping text-uppercase subm">Continue Shopping</span></a>
+      <a href=""><span class="checkout text-uppercase">Checkout Now</span></a>
+    </div>
+  </div>
+</div>