diff --git a/Block/Catalog/Product/Usage.php b/Block/Catalog/Product/Usage.php
index aec9d41..9d51e0b 100644
--- a/Block/Catalog/Product/Usage.php
+++ b/Block/Catalog/Product/Usage.php
@@ -133,7 +133,7 @@ public function getAllCustomUsages()
             $customerUsageItems = $this->usageRepository->getList($searchCriteria)->getItems();
             /** @var \DevStone\UsageCalculator\Model\Usage $customerUsageItem */
             foreach ($customerUsageItems as $key => $customerUsageItem) {
-                if ( ! $customerUsageItem->getConditions()->validate($this->getProduct())) {
+                if (! $customerUsageItem->getConditions()->validate($this->getProduct())) {
                     unset($customerUsageItems[$key]);
                 }
             }
@@ -175,7 +175,7 @@ public function getUsages($category = null): array
                     $customerUsageItems = $this->usageRepository->getList($searchCriteria)->getItems();
                     /** @var \DevStone\UsageCalculator\Model\Usage $customerUsageItem */
                     foreach ($customerUsageItems as $key => $customerUsageItem) {
-                        if(!$customerUsageItem->getConditions()->validate($this->getProduct())) {
+                        if (!$customerUsageItem->getConditions()->validate($this->getProduct())) {
                             unset($customerUsageItems[$key]);
                         }
                     }
@@ -220,28 +220,29 @@ public function getUsageListAccordingToCustomer($customerId): Collection
         return $usageCustomerCollection;
     }
 
-	public function getAllCategories() {
+    public function getAllCategories()
+    {
 
-		if ($this->isCustomerLoggedIn()) {
-			$customerId = $this->getCustomerId();
-			$usageCollection = $this->getUsageListAccordingToCustomer($customerId);
-			if ($usageCollection->getSize() > 0) {
-				$searchCriteria = $this->searchCriteriaBuilder->create();
-				return $this->categoryRepository->getList($searchCriteria)->getItems();
-			}
-		}
+        if ($this->isCustomerLoggedIn()) {
+            $customerId = $this->getCustomerId();
+            $usageCollection = $this->getUsageListAccordingToCustomer($customerId);
+            if ($usageCollection->getSize() > 0) {
+                $searchCriteria = $this->searchCriteriaBuilder->create();
+                return $this->categoryRepository->getList($searchCriteria)->getItems();
+            }
+        }
 
-		$searchCriteria = $this->searchCriteriaBuilder
-			->addFilter('entity_id', $this->config->getCustomLicenseId(), 'neq')
-			->create();
-		return $this->categoryRepository->getList($searchCriteria)->getItems();
-	}
+        $searchCriteria = $this->searchCriteriaBuilder
+            ->addFilter('entity_id', $this->config->getCustomLicenseId(), 'neq')
+            ->create();
+        return $this->categoryRepository->getList($searchCriteria)->getItems();
+    }
     public function getCustomLicenseCategory()
     {
         $searchCriteria = $this->searchCriteriaBuilder
-			->addFilter('entity_id', $this->config->getCustomLicenseId(), 'eq')
-			->create();
-		$items = $this->categoryRepository->getList($searchCriteria)->getItems();
+            ->addFilter('entity_id', $this->config->getCustomLicenseId(), 'eq')
+            ->create();
+        $items = $this->categoryRepository->getList($searchCriteria)->getItems();
         return array_pop($items);
     }
     /**
@@ -249,19 +250,19 @@ public function getCustomLicenseCategory()
      */
     public function getCategories(): array
     {
-		if ( $this->hasData('customer_specific') && $this->getdata('customer_specific') ) {
-			if ($this->isCustomerLoggedIn()) {
-				$customerId = $this->getCustomerId();
-				$usageCollection = $this->getUsageListAccordingToCustomer($customerId);
-				if ($usageCollection->getSize() > 0) {
-					$searchCriteria = $this->searchCriteriaBuilder
-						->addFilter('entity_id', $this->config->getCustomLicenseId(), 'eq')
-						->create();
-					return $this->categoryRepository->getList($searchCriteria)->getItems();
-				}
-			}
-			return [];
-		}
+        if ($this->hasData('customer_specific') && $this->getdata('customer_specific')) {
+            if ($this->isCustomerLoggedIn()) {
+                $customerId = $this->getCustomerId();
+                $usageCollection = $this->getUsageListAccordingToCustomer($customerId);
+                if ($usageCollection->getSize() > 0) {
+                    $searchCriteria = $this->searchCriteriaBuilder
+                        ->addFilter('entity_id', $this->config->getCustomLicenseId(), 'eq')
+                        ->create();
+                    return $this->categoryRepository->getList($searchCriteria)->getItems();
+                }
+            }
+            return [];
+        }
 
         $searchCriteria = $this->searchCriteriaBuilder
             ->addFilter('entity_id', $this->config->getCustomLicenseId(), 'neq')
diff --git a/Controller/Usage/Ajax.php b/Controller/Usage/Ajax.php
new file mode 100644
index 0000000..9202d9e
--- /dev/null
+++ b/Controller/Usage/Ajax.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace DevStone\UsageCalculator\Controller\Usage;
+
+use Magento\Framework\App\Action\Action;
+use Magento\Framework\App\ResponseInterface;
+use Magento\Framework\Controller\ResultFactory;
+use Magento\Framework\App\Action\HttpGetActionInterface;
+use Magento\Framework\Exception\NoSuchEntityException;
+
+class Ajax extends Action implements HttpGetActionInterface
+{
+
+    public function __construct(
+        \Magento\Framework\App\Action\Context $context,
+        private readonly \Magento\Framework\Registry $coreRegistry,
+        private readonly \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
+    ) {
+        parent::__construct($context);
+    }
+
+    /**
+     * Dispatch request
+     *
+     * @return \Magento\Framework\Controller\ResultInterface|ResponseInterface
+     * @throws \Magento\Framework\Exception\NotFoundException
+     */
+    public function execute()
+    {
+        $productId = (int)$this->getRequest()->getParam('id');
+        $product = $this->loadProduct($productId);
+
+        if (! $product) {
+            $resultForward = $this->resultFactory->create(ResultFactory::TYPE_FORWARD);
+            $resultForward->forward('noroute');
+            return $resultForward;
+        }
+
+        return $this->resultFactory->create(ResultFactory::TYPE_LAYOUT);
+    }
+
+
+    /**
+     * Load product model with data by passed id.
+     * Return false if product was not loaded or has incorrect status.
+     *
+     * @param int $productId
+     */
+    protected function loadProduct($productId)
+    {
+        if (!$productId) {
+            return false;
+        }
+
+        try {
+            $product = $this->productRepository->getById($productId);
+
+            if (!$product->isVisibleInCatalog() || !$product->isVisibleInSiteVisibility()) {
+                throw new NoSuchEntityException();
+            }
+        } catch (NoSuchEntityException $noEntityException) {
+            return false;
+        }
+
+        $this->coreRegistry->register('current_product', $product);
+        $this->coreRegistry->register('product', $product);
+
+        return $product;
+    }
+}
diff --git a/etc/frontend/routes.xml b/etc/frontend/routes.xml
new file mode 100644
index 0000000..3e8c4ca
--- /dev/null
+++ b/etc/frontend/routes.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" ?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+	<router id="standard">
+		<route id="devstone_usagecalculator" frontName="usage">
+			<module name="DevStone_UsageCalculator"/>
+		</route>
+	</router>
+</config>
diff --git a/view/frontend/layout/catalog_product_view_type_image.xml b/view/frontend/layout/catalog_product_view_type_image.xml
index 5d1f8fb..ffd8a8e 100644
--- a/view/frontend/layout/catalog_product_view_type_image.xml
+++ b/view/frontend/layout/catalog_product_view_type_image.xml
@@ -9,28 +9,7 @@
     <body>
         <attribute name="class" value="page-product-image"/>
         <referenceBlock name="product.info.options.wrapper">
-            <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="usage.info" as="type_image_usage" before="-" template="DevStone_UsageCalculator::catalog/product/usages-container.phtml">
-                <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="all.usages" template="DevStone_UsageCalculator::catalog/product/usages.phtml">
-                    <arguments>
-                        <argument name="cache_lifetime" xsi:type="number">360</argument>
-                    </arguments>
-
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\DefaultType" name="usage.info.options.default" as="default" template="DevStone_UsageCalculator::catalog/product/type/default.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Text" name="usage.info.options.text" as="text" template="DevStone_UsageCalculator::catalog/product/type/text.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\File" name="usage.info.options.file" as="file" template="DevStone_UsageCalculator::catalog/product/type/file.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Select" name="usage.info.options.select" as="select" template="DevStone_UsageCalculator::catalog/product/type/select.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Date" name="usage.info.options.date" as="date" template="DevStone_UsageCalculator::catalog/product/type/date.phtml"/>
-                </block>
-                <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="custom.usages" template="DevStone_UsageCalculator::catalog/product/usages.phtml">
-                    <arguments>
-                        <argument name="customer_specific" xsi:type="boolean">true</argument>
-                    </arguments>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\DefaultType" name="custom.usage.info.options.default" as="default" template="DevStone_UsageCalculator::catalog/product/type/default.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Text" name="custom.usage.info.options.text" as="text" template="DevStone_UsageCalculator::catalog/product/type/text.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\File" name="custom.usage.info.options.file" as="file" template="DevStone_UsageCalculator::catalog/product/type/file.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Select" name="custom.usage.info.options.select" as="select" template="DevStone_UsageCalculator::catalog/product/type/select.phtml"/>
-                    <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Date" name="custom.usage.info.options.date" as="date" template="DevStone_UsageCalculator::catalog/product/type/date.phtml"/>
-                </block>
+            <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="usage.info" as="type_image_usage" before="-" template="DevStone_UsageCalculator::catalog/product/usages-loader.phtml">
             </block>
         </referenceBlock>
         <referenceBlock name="head.components">
diff --git a/view/frontend/layout/devstone_usagecalculator_usage_ajax.xml b/view/frontend/layout/devstone_usagecalculator_usage_ajax.xml
new file mode 100644
index 0000000..332b187
--- /dev/null
+++ b/view/frontend/layout/devstone_usagecalculator_usage_ajax.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <container name="root">
+        <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="usage.info" as="type_image_usage" before="-" template="DevStone_UsageCalculator::catalog/product/usages-container.phtml">
+            <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="all.usages" template="DevStone_UsageCalculator::catalog/product/usages.phtml">
+                <arguments>
+                    <argument name="cache_lifetime" xsi:type="number">360</argument>
+                </arguments>
+
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\DefaultType" name="usage.info.options.default" as="default" template="DevStone_UsageCalculator::catalog/product/type/default.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Text" name="usage.info.options.text" as="text" template="DevStone_UsageCalculator::catalog/product/type/text.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\File" name="usage.info.options.file" as="file" template="DevStone_UsageCalculator::catalog/product/type/file.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Select" name="usage.info.options.select" as="select" template="DevStone_UsageCalculator::catalog/product/type/select.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Date" name="usage.info.options.date" as="date" template="DevStone_UsageCalculator::catalog/product/type/date.phtml"/>
+            </block>
+            <block class="DevStone\UsageCalculator\Block\Catalog\Product\Usage" name="custom.usages" template="DevStone_UsageCalculator::catalog/product/usages.phtml">
+                <arguments>
+                    <argument name="customer_specific" xsi:type="boolean">true</argument>
+                </arguments>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\DefaultType" name="custom.usage.info.options.default" as="default" template="DevStone_UsageCalculator::catalog/product/type/default.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Text" name="custom.usage.info.options.text" as="text" template="DevStone_UsageCalculator::catalog/product/type/text.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\File" name="custom.usage.info.options.file" as="file" template="DevStone_UsageCalculator::catalog/product/type/file.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Select" name="custom.usage.info.options.select" as="select" template="DevStone_UsageCalculator::catalog/product/type/select.phtml"/>
+                <block class="DevStone\UsageCalculator\Block\Usage\View\Options\Type\Date" name="custom.usage.info.options.date" as="date" template="DevStone_UsageCalculator::catalog/product/type/date.phtml"/>
+            </block>
+        </block>
+    </container>
+</layout>
\ No newline at end of file
diff --git a/view/frontend/templates/catalog/product/usages-container.phtml b/view/frontend/templates/catalog/product/usages-container.phtml
index d60c087..f7d5829 100644
--- a/view/frontend/templates/catalog/product/usages-container.phtml
+++ b/view/frontend/templates/catalog/product/usages-container.phtml
@@ -1,7 +1,6 @@
 <?php /* @var $block \DevStone\UsageCalculator\Block\Catalog\Product\Usage */ ?>
-<?php if ($block->getProduct()->isSaleable() ):?>
-	<div id="usages-container" class="usages-container field" <?php if (!$block->showButton()): ?>style="margin-bottom: 0;" <?php endif; ?>>
-		<?php if ($block->showButton()): ?>
+
+
 			<button id="usage-button" class="cta-button" title="<?= __('License Image is a type of “renting” of an image for a specific use; examples include licensing an image for the cover of a book, an illustration for a magazine article, or use of an image in an evangelistic handbill.') ?>">
 				<span class="calc-icon">&nbsp;</span>
 				<span class="button-main">
@@ -9,7 +8,6 @@
             <span class="button-small"> <?= __('Download - price based on use.') ?></span>
         </span>
 			</button>
-		<?php endif; ?>
 		<div class="usages-container-inner" style="display: none;">
 			<button id="usage-button-close">
 				<?= __('Close') ?>
@@ -52,5 +50,5 @@
 			</div>
 			<span id="usages-advice-container"></span>
 		</div>
-	</div>
-<?php endif; ?>
+
+
diff --git a/view/frontend/templates/catalog/product/usages-loader.phtml b/view/frontend/templates/catalog/product/usages-loader.phtml
new file mode 100644
index 0000000..b9e0b9b
--- /dev/null
+++ b/view/frontend/templates/catalog/product/usages-loader.phtml
@@ -0,0 +1,40 @@
+<?php /* @var $block \DevStone\UsageCalculator\Block\Catalog\Product\Usage */ ?>
+<?php if ($block->getProduct()->isSaleable() ):?>
+	<div id="usages-container" class="usages-container field" <?php if (!$block->showButton()): ?>style="margin-bottom: 0;" <?php endif; ?>>
+		<?php if ($block->showButton()): ?>
+			<button id="usage-button" class="cta-button" title="<?= __('License Image is a type of “renting” of an image for a specific use; examples include licensing an image for the cover of a book, an illustration for a magazine article, or use of an image in an evangelistic handbill.') ?>">
+				<span class="calc-icon">&nbsp;</span>
+				<span class="button-main">
+            <span><?= __('License Image') ?></span>
+            <span class="button-small"> <?= __('Download - price based on use.') ?></span>
+        </span>
+			</button>
+		<?php endif; ?>
+	</div>
+<?php endif; ?>
+
+<script>
+    require([
+        'jquery'
+    ], function($) {
+		$('#usage-button').one('click', function(event ){
+		event.preventDefault()
+     //               observer.disconnect();
+
+            $.ajax({
+                method: 'GET',
+                url: '<?= $block->getBaseUrl() ?>usage/usage/ajax?id=<?= $block->getProduct()->getId() ?>',
+                showLoader: false,
+                cache:true
+            }).then(function (res) {
+                location.hash = "#license";
+                $('#usages-container').html(res).trigger('contentUpdated');
+            });
+
+
+        });
+        if (location.hash.substr(0, 8) === '#license') {
+            $('#usage-button').click();
+        }
+    });
+</script>
\ No newline at end of file