diff --git a/composer.json b/composer.json
index 42b9f9d..834fcf1 100644
--- a/composer.json
+++ b/composer.json
@@ -9,7 +9,7 @@
     "require": {
       "magento/framework": "*",
       "hyva-themes/magento2-compat-module-fallback": "*",
-      "magmodules/magento2-kiyoh": "*"
+      "magmodules/magento2-kiyoh": ">=1.7.0"
     },
     "autoload": {
       "files": [
diff --git a/src/view/frontend/tailwind/tailwind.config.js b/src/view/frontend/tailwind/tailwind.config.js
new file mode 100755
index 0000000..f44ed37
--- /dev/null
+++ b/src/view/frontend/tailwind/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    purge: {
+        content: [
+            '../templates/**/*.phtml',
+        ]
+    }
+}
diff --git a/src/view/frontend/templates/widget/helper/stars.phtml b/src/view/frontend/templates/widget/helper/stars.phtml
new file mode 100644
index 0000000..ea21a04
--- /dev/null
+++ b/src/view/frontend/templates/widget/helper/stars.phtml
@@ -0,0 +1,46 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magento\Framework\View\Element\Template;
+ use Hyva\Theme\ViewModel\HeroiconsSolid;
+ use Hyva\Theme\Model\ViewModelRegistry;
+
+ /** @var Template $block */
+ /** @var Escaper $escaper */
+ /** @var HeroiconsSolid $heroicons */
+
+$heroicons = $viewModels->require(HeroiconsSolid::class);
+
+$svgSize = $block->hasData('svgSize') ? $block->getData('svgSize') : '20';
+$starColor = $block->hasData('starColor') ? $block->getData('starColor') : '';
+
+$svgSizeStyle = 'width: ' . $svgSize . 'px; height: ' . $svgSize . 'px; ';
+$starColorStyle = $starColor ? 'color: ' . $starColor : '';
+
+$percent = $block->hasData('percent') ? $block->getData('percent') . '%' : '0%';
+?>
+
+<div data-element="box-stars" class="relative inline-flex" title="<?= $percent ?>">
+    <div style="width: <?= $percent; ?>;" 
+         class="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
+
+        <div class="inline-flex text-[#ffad0f]">
+            <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle . $starColorStyle]); ?>
+            <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle . $starColorStyle]); ?>
+            <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle . $starColorStyle]); ?>
+            <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle . $starColorStyle]); ?>
+            <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle . $starColorStyle]); ?>
+        </div>
+    </div>
+
+    <div class="inline-flex text-gray-300">
+        <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle]); ?>
+        <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle]); ?>
+        <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle]); ?>
+        <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle]); ?>
+        <?= $heroicons->starHtml('', null, null, ["style" => $svgSizeStyle]); ?>
+    </div>
+</div>
diff --git a/src/view/frontend/templates/widget/review/badge.phtml b/src/view/frontend/templates/widget/review/badge.phtml
new file mode 100644
index 0000000..cb008c8
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/badge.phtml
@@ -0,0 +1,182 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magmodules\KiyOhSR\Block\Widget\Review\Badge;
+ use Magento\Framework\Escaper;
+ use Hyva\Theme\ViewModel\HeroiconsOutline;
+ use Hyva\Theme\Model\ViewModelRegistry;
+
+/** @var Badge $block */
+/** @var Escaper $escaper */
+/** @var HeroiconsOutline $heroicons */
+
+$uniqId = $block->getUniqueId();
+
+$accountInfo = $block->getAccountInfo();
+$reviewsCount = $accountInfo[0]['total'];
+$reviewsAvgScore = $accountInfo[0]['avgRatingScore'];
+$reviewsAvgRating = $accountInfo[0]['avgRating'];
+
+$heroicons = $viewModels->require(HeroiconsOutline::class);
+?>
+
+<div x-data="BadgeWidget_<?= $uniqId ?>">
+    <section data-element="kiyoh-badge-widget-<?= $uniqId; ?>" 
+             @click="show = !show"
+             class="inline-grid gap-2 px-3 py-4 bg-white border border-gray-200 shadow rounded-xl
+                    group <?= !$block->showReviewLink() ? 'cursor-default': 'cursor-pointer' ?>">
+
+        <?php if ($block->showLogo() || $block->showStars()): ?>
+            <div data-element="box-summary" 
+                class="flex items-center gap-7 
+                        <?= $block->showLogo() && $block->showStars() ? 'justify-between' : 'justify-center'; ?>">
+
+                <?php if ($block->showLogo()): ?>
+                    <span class="flex items-center gap-2 text-lg font-semibold">
+                        <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="32" height="32"
+                             alt="<?= $block->escapeHtml(__('Kiyoh badge widget')); ?>" />
+                        <span class="text-gray-600">kiyoh</span>
+                    </span>
+                <?php endif; ?>
+
+                <?php if ($block->showStars()): ?>
+                    <?= $block->getLayout()
+                            ->createBlock('Magento\Framework\View\Element\Template')
+                            ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                            ->setData('svgSize', '22')
+                            ->setData('percent', $reviewsAvgRating * 10)
+                            ->toHtml();
+                    ?>
+                <?php endif;?>
+            </div>
+        <?php endif;?>
+
+        <div data-element="box-information" 
+            class="flex gap-5 text-sm <?= $block->showReviewLink() ? 'justify-between': 'justify-center' ?>">
+            <div>
+                <b><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+                <?= $block->escapeHtml(__('based on')); ?>
+                <b>
+                    <?= $block->escapeHtml($reviewsCount); ?> 
+                    <?= $reviewsCount > 1 
+                            ? $block->escapeHtml(__('reviews')) 
+                            : $block->escapeHtml(__('review')); ?>
+                </b>
+            </div>
+
+            <?php if ($block->showReviewLink()): ?>
+                <span data-element="link-icon" class="h-5 text-blue-500 transition-colors duration-300 group-hover:text-blue-700">
+                    <?= $heroicons->externalLinkHtml('', 20, 20, ["style" => "stroke-width: 1.5"]); ?>
+                </span>
+            <?php endif;?>
+        </div>
+    </section>
+
+    <?php if ($block->showReviewLink()): ?>
+        <div data-element="kiyoh-badge-reviews-<?= $uniqId; ?>"
+             class="fixed z-50 w-[90%] duration-300
+             <?= $block->getShowReviews() == 'popup' 
+                ? 'top-1/2 left-1/2 max-w-[480px] max-h-[90vh] transition-opacity 
+                -translate-x-1/2 -translate-y-1/2 [&>div]:max-h-[90vh] [&>div]:rounded-xl' 
+                : 'top-0 right-0 h-screen max-w-[400px] [&>div]:max-h-screen transition-transform' ?>"
+
+              style="display: none;"
+              x-show="show"
+              x-transition:enter="ease-in-out duration-300"
+              x-transition:enter-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>"
+              x-transition:enter-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+              x-transition:leave="ease-in-out duration-300"
+              x-transition:leave-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+              x-transition:leave-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>">
+
+            <div class="grid grid-rows-[auto_1fr] bg-white border border-gray-200">
+                <div data-element="reviews-summary" 
+                    class="relative grid grid-cols-[60px_1fr] gap-4 p-4 border-b border-gray-200">
+
+                    <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="60" height="60"
+                         alt="<?= $block->escapeHtml(__('Kiyoh badge widget')); ?>" />
+
+                    <div>
+                        <div data-element="reviews-summary-stars" class="-ml-1.5">
+                            <?= $block->getLayout()
+                                ->createBlock('Magento\Framework\View\Element\Template')
+                                ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                ->setData('svgSize', '30')
+                                ->setData('percent', $reviewsAvgRating * 10)
+                                ->toHtml();
+                            ?>
+                        </div>
+
+                        <div data-element="reviews-summary-text" class="text-gray-700 text-sm">
+                            <?= $block->escapeHtml(__('Rated with')); ?>
+                            <b class="text-[#ffad0f]"><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+                            <?= $block->escapeHtml(__('based on')); ?>
+                            <b class="text-[#ffad0f]">
+                                <?= $block->escapeHtml($reviewsCount); ?> 
+                                <?= $reviewsCount > 1 
+                                        ? $block->escapeHtml(__('reviews')) 
+                                        : $block->escapeHtml(__('review')); ?>
+                            </b>
+                        </div>
+                    </div>
+
+                    <span data-element="close" @click="show = !show"
+                          class="absolute top-3 right-3 opacity-50 cursor-pointer
+                                transition-opacity hover:opacity-100">
+                        <?= $heroicons->xHtml('', 24, 24); ?>
+                    </span>
+                </div>
+
+                <div data-element="reviews" class="h-full overflow-auto max-h-[calc(100%-10px)]">
+                    <?php foreach ($reviews = $block->getReviews() as $review): ?>
+                        <div data-element="review-item"
+                            class="grid gap-2.5 p-5 border-b border-gray-200 last:border-b-0">
+
+                            <b class="name text-base"><?= $block->escapeHtml($review['name']) ?></b>
+                            <div class="summary flex gap-3 -ml-0.5">
+                                <?= $block->getLayout()
+                                    ->createBlock('Magento\Framework\View\Element\Template')
+                                    ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                    ->setData('svgSize', '18')
+                                    ->setData('percent', floatval($review['total']) * 10)
+                                    ->toHtml();
+                                ?>
+
+                                <span class="opacity-60 text-sm"><?= $block->escapeHtml($review['created']) ?></span>
+                            </div>
+                            <div class="comment text-sm leading-6">
+                                <b class="block text-gray-700 mb-1"><?= $block->escapeHtml($review['default_oneliner']['rating']) ?></b>
+                                <span class="text-gray-500"><?= $block->escapeHtml($review['default_opinion']['rating']) ?></span>
+                            </div>
+                        </div>
+                    <?php endforeach;?>
+                </div>
+            </div>
+        </div>
+
+        <span data-element="kiyoh-badge-overlay-<?= $uniqId; ?>" 
+              @click="show = !show"
+              class="fixed top-0 right-0 bottom-0 left-0 z-40 bg-black/40"
+              style="display: none;"
+              x-show="show"
+              x-transition:enter="ease-in-out duration-300"
+              x-transition:enter-start="opacity-0 invisible"
+              x-transition:enter-end="opacity-100 visible"
+              x-transition:leave="ease-in-out duration-300"
+              x-transition:leave-start="opacity-100 visible"
+              x-transition:leave-end="opacity-0 invisible"></span>
+    <?php endif;?>
+</div>
+
+<script>
+    'use strict';
+
+    function BadgeWidget_<?= $uniqId ?>() {
+        return {
+            show: false,
+        }
+    }
+</script>
diff --git a/src/view/frontend/templates/widget/review/carousel.phtml b/src/view/frontend/templates/widget/review/carousel.phtml
new file mode 100644
index 0000000..1a5594b
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/carousel.phtml
@@ -0,0 +1,226 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magmodules\KiyOhSR\Block\Widget\Review\Carousel;
+ use Magento\Framework\Escaper;
+ use Hyva\Theme\ViewModel\HeroiconsOutline;
+ use Hyva\Theme\Model\ViewModelRegistry;
+
+/** @var Carousel $block */
+/** @var Escaper $escaper */
+/** @var HeroiconsOutline $heroicons */
+
+$uniqId = rand();
+
+if ($block->getTextLength() == 'small')  $txtLen = 2;
+if ($block->getTextLength() == 'medium') $txtLen = 4;
+if ($block->getTextLength() == 'large')  $txtLen = 6;
+
+$heroicons = $viewModels->require(HeroiconsOutline::class);
+?>
+
+<section data-element="kiyoh-carousel-widget-<?= $uniqId; ?>" 
+         x-data="KiyohCarousel_<?= $uniqId ?>">
+    
+    <div class="relative"
+         :class="{ 'px-10': options.arrows }"
+         :resize.window="resizeSlider"
+         @resize.window="resizeSlider"
+         @mouseover="options.autoplay ? clearInterval(interval) : null"
+         @mouseout="options.autoplay ? interval = setInterval(() => { arrowNext() }, options.autoplaySpeed) : null"
+         @touchstart="options.autoplay ? clearInterval(interval) : null"
+         @touchend="options.autoplay ? interval = setInterval(() => { arrowNext() }, options.autoplaySpeed) : null">
+
+         <div class="overflow-hidden select-none"
+             @mouseup="mouseEvent($event)"
+             @mousedown="mouseEvent($event)"
+             @touchend="mouseEvent($event)"
+             @touchstart="mouseEvent($event)">
+             
+             <div class="flex transition-transform"
+                :style="`transform: translateX(${currentTransform}); transition-duration: ${transformDuration};`"
+                :resize.window="setSLideStep($el)"
+                @resize.window="setSLideStep($el)">
+
+                <?php foreach ($reviews = $block->getReviews() as $review): ?>
+                    <div class="px-3" :style="{ 'min-width': slideWidth }">
+                        <div data-element="review-item"
+                            class="flex flex-col p-4 bg-white border border-gray-200 rounded-xl shadow h-full">
+                            
+                            <header class="flex items-center justify-between gap-5 pb-3 mb-5 border-b border-gray-200">
+                                <b class="name"><?= $block->escapeHtml($review['name']) ?></b>
+
+                                <?php if ($block->showStars()): ?>
+                                    <?php 
+                                        $starColor = $block->getSelectColor() ? $block->getSelectColor() : '#000000';
+                                    ?>
+
+                                    <?= $block->getLayout()
+                                        ->createBlock('Magento\Framework\View\Element\Template')
+                                        ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                        ->setData('svgSize', '18')
+                                        ->setData('starColor', $starColor)
+                                        ->setData('percent', floatval($review['total']) * 10)
+                                        ->toHtml();
+                                    ?>
+                                <?php endif;?>
+                            </header>
+
+                            <div class="comment text-sm leading-6">
+                                <b class="block text-gray-700 mb-1"><?= $block->escapeHtml($review['default_oneliner']['rating']) ?></b>
+                                <span class="text-gray-500 overflow-hidden"
+                                      style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <?=$block->escapeHtml($txtLen)?>;">
+                                    <?= $block->escapeHtml($review['default_opinion']['rating']) ?>
+                                </span>
+                            </div>
+
+                            <footer class="mt-auto grid-cols-[28px_1fr] items-center gap-3 pt-4 border-t border-gray-200
+                                        <?= !$block->showIcon() ? 'block' : 'grid' ?>">
+
+                                <?php if ($block->showIcon()): ?>
+                                    <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="24" height="24"
+                                         alt="<?= $block->escapeHtml(__('Kiyoh carousel widget')); ?>" />
+                                <?php endif;?>
+
+                                <span class="opacity-70 text-sm">
+                                    <?= $block->escapeHtml(__('A Kiyoh Review written')); ?>
+                                    <?= $block->escapeHtml($review['created']) ?>
+                                </span>
+                            </footer>
+                        </div>
+                    </div>
+                <?php endforeach;?>
+            </div>
+        </div>
+
+        <template x-if="options.arrows" >
+            <div class="slider-arrow">
+                <span class="absolute left-0 bottom-1/2 translate-y-3 p-1 opacity-50
+                             cursor-pointer transition-opacity duration-300 hover:opacity-75"
+                    data-element="arrow-left"
+                    @click="arrowPrev">
+                    <?= $heroicons->chevronLeftHtml('', 16, 16); ?>
+                </span>
+
+                <span class="arrow-right absolute right-0 bottom-1/2 translate-y-3 p-1 opacity-50
+                             cursor-pointer transition-opacity duration-300 hover:opacity-75"
+                    data-element="arrow-right"
+                    @click="arrowNext">
+                    <?= $heroicons->chevronRightHtml('', 16, 16); ?>
+                </span>
+            </div>
+        </template>
+    </div>
+</section>
+
+<script>
+    'use strict';
+
+    function KiyohCarousel_<?= $uniqId ?>() {
+        return {
+            options: {
+                arrows: <?= json_encode($block->showNavigationArrows()); ?>,
+                autoplay: <?= json_encode($block->isAutoplay()); ?>,
+                autoplaySpeed: 3000,
+                slidesToShow: 4,
+                breakpoints: {
+                    '639': 1,
+                    '1023': 2,
+                    '1279': 3,
+                    '2500': 4,
+                },
+            },
+
+            slideWidth: '100%',
+            slideCount: <?= count($block->getReviews()); ?>,
+            slideOnPage: 1,
+            activeSlidePage: 1,
+
+            wrapperWidth: 0,
+            stepWidth: 0,
+            currentTransform: '0',
+            transformDuration: '1.5s',
+
+            interval: null,
+            axisShiftX: 0, 
+
+            init() {
+                if (this.options.autoplay) {
+                    this.interval = setInterval(() => { this.arrowNext() }, this.options.autoplaySpeed);
+                }
+            },
+
+            setSlidePage(num) {
+                this.activeSlidePage = num;
+
+                if (!num) this.currentTransform = '0';
+
+                if ((this.wrapperWidth - this.stepWidth) >= this.stepWidth * (num - 1) && num) {
+                    this.currentTransform = `-${this.stepWidth * (num - 1)}px`;
+                } else {
+                    this.currentTransform = `-${this.wrapperWidth - this.stepWidth}px`;
+                }
+
+                setTimeout(() => { this.transformDuration = '1.5s' }, 50);
+            },
+
+            resizeSlider() {
+                // default state
+                this.slideWidth = `${100 / this.options.slidesToShow}%`;
+                this.slideOnPage = this.slideCount - this.options.slidesToShow;
+
+                const pObj = this.options.breakpoints,
+                    pArr = Object.keys(pObj).sort((a,b) => b - a),
+                    pLen = pArr.length;
+
+                for (let i = 0; i < pLen; i++) {
+                    if (window.innerWidth < +pArr[i]) { 
+                        this.slideWidth = `${100 / +pObj[pArr[i]]}%`;
+                        this.options.slidesToShow = +pObj[pArr[i]];
+                        this.slideOnPage = this.slideCount - +pObj[pArr[i]];
+                    }
+                }
+
+                // check active slide after resizing
+                if (this.activeSlidePage > this.slideOnPage) this.activeSlidePage = this.slideOnPage;
+            },
+
+            setSLideStep(el) {
+                setTimeout(() => {
+                    this.wrapperWidth = el.scrollWidth; 
+                    this.stepWidth = Math.ceil(el.clientWidth / this.options.slidesToShow);
+                    this.transformDuration = '0s';
+                    this.setSlidePage(this.activeSlidePage);
+                }, 50);
+            },
+
+            arrowNext() {
+                this.activeSlidePage + 1 <= this.slideOnPage
+                    ? this.setSlidePage(this.activeSlidePage + 1)
+                    : this.setSlidePage(1);
+            },
+
+            arrowPrev() {
+                this.activeSlidePage - 1 >= 1
+                    ? this.setSlidePage(this.activeSlidePage - 1)
+                    : this.setSlidePage(this.slideOnPage);
+            },
+
+            mouseEvent(event) {
+                if (event.type == 'mousedown' || event.type == 'touchstart') {
+                    this.axisShiftX = event.pageX || event.changedTouches[0].pageX;
+                } 
+
+                if (event.type == 'mouseup' || event.type == 'touchend') {
+                    let endTouch = event.pageX || event.changedTouches[0].pageX;
+
+                    if (endTouch < this.axisShiftX) this.arrowNext();
+                    if (endTouch > this.axisShiftX) this.arrowPrev();
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/view/frontend/templates/widget/review/floating.phtml b/src/view/frontend/templates/widget/review/floating.phtml
new file mode 100644
index 0000000..0db002c
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/floating.phtml
@@ -0,0 +1,182 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magmodules\KiyOhSR\Block\Widget\Review\Floating;
+ use Magento\Framework\Escaper;
+ use Hyva\Theme\ViewModel\HeroiconsOutline;
+ use Hyva\Theme\Model\ViewModelRegistry;
+
+/** @var Floating $block */
+/** @var Escaper $escaper */
+/** @var HeroiconsOutline $heroicons */
+
+$uniqId = $block->getUniqueId();
+
+$accountInfo = $block->getAccountInfo();
+$reviewsCount = $accountInfo[0]['total'];
+$reviewsAvgScore = $accountInfo[0]['avgRatingScore'];
+$reviewsAvgRating = $accountInfo[0]['avgRating'];
+
+if ($block->getWidgetPosition() == 'top_right') $floatingClass = 'top-4 right-4';
+if ($block->getWidgetPosition() == 'top_left') $floatingClass = 'top-4 left-4';
+if ($block->getWidgetPosition() == 'bottom_right') $floatingClass = 'bottom-4 right-4';
+if ($block->getWidgetPosition() == 'bottom_left') $floatingClass = 'bottom-4 left-4';
+
+$heroicons = $viewModels->require(HeroiconsOutline::class);
+?>
+
+<div x-data="FloatingWidget_<?= $uniqId ?>">
+    <section data-element="kiyoh-floating-widget-<?= $uniqId; ?>" 
+             @click="show = !show"
+             class="fixed z-30 flex-col items-center justify-center gap-1 px-4 py-3
+                    bg-white border border-gray-200 rounded-xl shadow group
+                    <?= !$block->showOnCheckout() ? 'no-checkout' : '' ?> <?= $floatingClass; ?>
+                    <?= !$block->showReviewLink() ? 'cursor-default' : 'cursor-pointer'; ?> 
+                    <?= !$block->showOnMobile() ? 'hidden md:inline-flex' : 'inline-flex'; ?>"
+    >
+
+        <?php if ($block->showLogo()): ?>
+            <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="32" height="32"
+                 alt="<?= $block->escapeHtml(__('Kiyoh floating widget')); ?>" />
+        <?php endif; ?>
+
+        <?= $block->getLayout()
+                ->createBlock('Magento\Framework\View\Element\Template')
+                ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                ->setData('svgSize', '22')
+                ->setData('percent', $reviewsAvgRating * 10)
+                ->toHtml();
+        ?>
+
+        <div data-element="box-information" 
+            class="flex items-center justify-between gap-4 text-xs [&_span]:relative [&_span]:top-0.5 mt-0.5">
+            <span>
+                <?= $block->escapeHtml($reviewsCount); ?> 
+                <?= $reviewsCount > 1 
+                        ? $block->escapeHtml(__('reviews')) 
+                        : $block->escapeHtml(__('review')); ?>
+            </span>
+
+            <?php if ($block->showReviewLink()): ?>
+                <span data-element="link-icon"
+                     class="h-3.5 text-blue-500 transition-colors duration-300 group-hover:text-blue-700">
+                    <?= $heroicons->externalLinkHtml('', 14, 14, ["style" => "stroke-width: 1.5"]); ?>
+                </span>
+            <?php endif;?>
+        </div>
+    </section>
+
+    <?php if ($block->showReviewLink()): ?>
+        <div data-element="kiyoh-floating-reviews-<?= $uniqId; ?>"
+             class="fixed z-50 w-[90%] duration-300
+                <?= $block->getShowReviews() == 'popup' 
+                ? 'top-1/2 left-1/2 max-w-[480px] max-h-[90vh] transition-opacity 
+                -translate-x-1/2 -translate-y-1/2 [&>div]:max-h-[90vh] [&>div]:rounded-xl' 
+                : 'top-0 right-0 h-screen max-w-[400px] [&>div]:max-h-screen transition-transform' ?>"
+
+                style="display: none;"
+                x-show="show"
+                x-transition:enter="ease-in-out duration-300"
+                x-transition:enter-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>"
+                x-transition:enter-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+                x-transition:leave="ease-in-out duration-300"
+                x-transition:leave-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+                x-transition:leave-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>">
+
+            <div class="grid grid-rows-[auto_1fr] bg-white border border-gray-200">
+                <div data-element="reviews-summary" 
+                     class="relative grid justify-center gap-3 p-4 pb-8 border-b border-gray-200 text-center">
+
+                     <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="60" height="60"
+                          alt="<?= $block->escapeHtml(__('Kiyoh badge widget')); ?>" class="mx-auto" />
+
+                    <div>
+                        <div data-element="reviews-summary-stars" class="mb-2">
+                            <?= $block->getLayout()
+                                ->createBlock('Magento\Framework\View\Element\Template')
+                                ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                ->setData('svgSize', '30')
+                                ->setData('percent', $reviewsAvgRating * 10)
+                                ->toHtml();
+                            ?>
+                        </div>
+
+                        <div data-element="reviews-summary-text" class="text-sm text-gray-700">
+                            <?= $block->escapeHtml(__('Rated with')); ?>
+                            <b class="text-[#ffad0f]"><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+                            <?= $block->escapeHtml(__('based on')); ?>
+                            <b class="text-[#ffad0f]">
+                                <?= $block->escapeHtml($reviewsCount); ?> 
+                                <?= $reviewsCount > 1 
+                                        ? $block->escapeHtml(__('reviews')) 
+                                        : $block->escapeHtml(__('review')); ?>
+                            </b>
+                        </div>
+                    </div>
+
+                    <span data-element="close" @click="show = !show"
+                          class="absolute top-3 right-3 flex p-1.5 rounded-full bg-gray-300 text-white
+                                 opacity-80 cursor-pointer transition-opacity duration-300 hover:opacity-100">
+                        <?= $heroicons->xHtml('', 24, 24); ?>
+                    </span>
+                </div>
+
+                <div data-element="reviews" class="h-full overflow-auto max-h-[calc(100%-10px)]">
+                    <?php foreach ($reviews = $block->getReviews() as $review): ?>
+                        <div data-element="review-item"
+                            class="grid gap-2.5 p-5 border-b border-gray-200 last:border-b-0">
+
+                            <b class="name text-base"><?= $block->escapeHtml($review['name']) ?></b>
+                            <div class="summary flex gap-3 -ml-0.5">
+                                <?= $block->getLayout()
+                                    ->createBlock('Magento\Framework\View\Element\Template')
+                                    ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                    ->setData('svgSize', '18')
+                                    ->setData('percent', floatval($review['total']) * 10)
+                                    ->toHtml();
+                                ?>
+
+                                <span class="opacity-60 text-sm"><?= $block->escapeHtml($review['created']) ?></span>
+                            </div>
+                            <div class="comment text-sm leading-6">
+                                <b class="block text-gray-700 mb-1"><?= $block->escapeHtml($review['default_oneliner']['rating']) ?></b>
+                                <span class="text-gray-500"><?= $block->escapeHtml($review['default_opinion']['rating']) ?></span>
+                            </div>
+                        </div>
+                    <?php endforeach;?>
+                </div>
+            </div>
+        </div>
+
+        <span data-element="kiyoh-floating-overlay-<?= $uniqId; ?>" 
+                @click="show = !show"
+                class="fixed top-0 right-0 bottom-0 left-0 z-40 bg-black/40"
+                style="display: none;"
+                x-show="show"
+                x-transition:enter="ease-in-out duration-300"
+                x-transition:enter-start="opacity-0 invisible"
+                x-transition:enter-end="opacity-100 visible"
+                x-transition:leave="ease-in-out duration-300"
+                x-transition:leave-start="opacity-100 visible"
+                x-transition:leave-end="opacity-0 invisible"></span>
+    <?php endif;?>
+</div>
+
+<script>
+    'use strict';
+
+    function FloatingWidget_<?= $uniqId ?>() {
+        return {
+            show: false,
+        }
+    }
+</script>
+
+<style>
+    .checkout-index-index [data-element*="kiyoh-floating-widget"].no-checkout {
+        display: none;
+    }
+</style>
diff --git a/src/view/frontend/templates/widget/review/overview.phtml b/src/view/frontend/templates/widget/review/overview.phtml
new file mode 100644
index 0000000..8fdaa64
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/overview.phtml
@@ -0,0 +1,312 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+use Magmodules\KiyOhSR\Block\Widget\Review\Overview;
+use Magento\Framework\Escaper;
+use Hyva\Theme\ViewModel\HeroiconsOutline;
+use Hyva\Theme\Model\ViewModelRegistry;
+
+/** @var Overview $block */
+/** @var Escaper $escaper */
+/** @var HeroiconsOutline $heroicons */
+
+$uniqId = rand();
+
+$accountInfo = $block->getAccountInfo();
+$reviewsCount = $accountInfo[0]['total'];
+$reviewsAvgRating = $accountInfo[0]['avgRating'];
+$reviewsAvgScore = $block->getConvertedAvgScore();
+
+$extraClass = !$block->showSummaryBlock() &&
+              !$block->showRatingFilter() &&
+              !$block->showWriteReviewButton() ? '!grid-cols-1' : '';
+
+$reviewsPerStars = $block->getReviewsPerStars();
+$starsItem = ['5', '4', '3', '2', '1'];
+?>
+
+<section data-element="kiyoh-overview-widget-<?= $uniqId; ?>"
+         x-data="KiyohOverview_<?= $uniqId ?>"
+         x-init="getSortOrder"
+         class="grid items-start gap-10 md:grid-cols-[300px_1fr] md:overflow-x-clip
+                lg:grid-cols-[380px_1fr] <?= $extraClass; ?>">
+
+    <?php if ($block->showSummaryBlock() || $block->showRatingFilter() || $block->showWriteReviewButton()): ?>
+        <div data-element="sidebar" class="grid gap-5 md:sticky md:top-5">
+            <?php if ($block->showSummaryBlock()): ?>
+                <div data-element="summary"
+                     class="px-5 py-6 bg-white border border-gray-200 rounded-xl shadow [&_[data-element=box-stars]]:-mr-1">
+
+                    <header class="flex items-center justify-between gap-6 pb-5 border-b border-gray-200">
+                        <span class="flex items-center gap-2 text-2xl font-semibold">
+                            <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="48" height="48"
+                                alt="<?= $block->escapeHtml(__('Kiyoh overview widget')); ?>" />
+                            <span class="text-gray-600">kiyoh</span>
+                        </span>
+
+                        <div class="flex flex-col items-end">
+                            <b class="text-[#ffad0f]"><?= /* @noEscape */ $reviewsAvgScore; ?></b>
+                            <?= $block->getLayout()
+                                    ->createBlock('Magento\Framework\View\Element\Template')
+                                    ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                    ->setData('svgSize', '24')
+                                    ->setData('percent', $reviewsAvgRating * 10)
+                                    ->toHtml();
+                            ?>
+                        </div>
+                    </header>
+
+                    <div data-element="box-information"
+                         class="mt-4 mb-7 text-sm text-gray-700">
+                        <?= $block->escapeHtml(__('Rated with a')); ?>
+                        <b class="text-[#ffad0f]"><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+                        <?= $block->escapeHtml(__('based on')); ?>
+                        <b class="text-[#ffad0f]">
+                            <?= $block->escapeHtml($reviewsCount); ?>
+                            <?= $reviewsCount > 1
+                                    ? $block->escapeHtml(__('reviews'))
+                                    : $block->escapeHtml(__('review')); ?>
+                        </b>
+                    </div>
+
+                    <div data-element="stars-counting" class="grid gap-3">
+                        <?php foreach ($starsItem as $star): ?>
+                            <div data-element="stars-item" 
+                                 class="grid grid-cols-[auto_1fr_30px] gap-3 text-sm">
+                                <span class="opacity-70"><?= $star; ?></span>
+
+                                <div class="w-full flex h-6 border border-gray-200 rounded-xl shadow">
+                                    <div class="rounded-xl
+                                                <?= $star == '5' ? 'bg-[#8fdaa0]' : '' ?>
+                                                <?= $star == '4' ? 'bg-[#c1e98f]' : '' ?>
+                                                <?= $star == '3' ? 'bg-[#f1d86d]' : '' ?>
+                                                <?= $star == '2' ? 'bg-[#f2ba63]' : '' ?>
+                                                <?= $star == '1' ? 'bg-[#e2805d]' : '' ?>" 
+                                         style="width: <?= $reviewsPerStars[$star] / $reviewsCount * 100 ?>%;"></div>
+                                </div>
+
+                                <span class="opacity-70 text-right"><?= $reviewsPerStars[$star] ?></span>
+                            </div>
+                        <?php endforeach; ?>
+                    </div>
+
+                    <?php if ($block->showFirstAndLast()): ?>
+                        <div data-element="first-and-last" class="text-sm opacity-70 mt-7">
+                            <?= $block->escapeHtml(__('First Review')); ?>
+                            <span class="font-semibold"><?= $block->getFirstDate() ?></span>
+
+                            <?= $block->escapeHtml(__('and last Review')); ?>
+                            <span class="font-semibold"><?= $block->getLastDate() ?></span>
+                        </div>
+                    <?php endif;?>
+                </div>
+            <?php endif;?>
+
+            <?php if ($block->showRatingFilter()): ?>
+                <div data-element="rating-filter"
+                     class="px-4 pt-5 pb-6 bg-white border border-gray-200 rounded-xl shadow">
+
+                    <h3 class="mb-5 ml-1 text-lg">
+                        <?= $block->escapeHtml(__('Filter on Rating')); ?>
+                    </h3>
+                    <div class="grid grid-cols-[repeat(auto-fill,_minmax(115px,_1fr))] gap-2.5
+                                md:grid-cols-[repeat(auto-fill,_minmax(100px,_1fr))]">
+                        <?php for($index = 5; $index > 0; $index--): ?>
+                            <div data-filter="<?= $index; ?>"
+                                 @click="() => filterByStars(<?= $index; ?>)"
+                                 class="flex items-center opacity-50 transition-opacity duration-300 cursor-pointer
+                                        hover:opacity-75"
+                                 :class="{ '!opacity-100': activeFilter.includes(<?= $index; ?>)}">
+                                <?= $block->getLayout()
+                                        ->createBlock('Magento\Framework\View\Element\Template')
+                                        ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                        ->setData('svgSize', '20')
+                                        ->setData('percent', $index * 20)
+                                        ->toHtml();
+                                ?>
+                            </div>
+                        <?php endfor; ?>
+
+                        <div data-filter="clear" 
+                             @click="clearFilter"
+                             class="text-sm flex items-center opacity-50 transition-opacity duration-300
+                                    cursor-pointer hover:opacity-75 md:justify-center">
+                            <?= $block->escapeHtml(__('Clear Filter')); ?>
+                        </div>
+                    </div>
+                </div>
+            <?php endif;?>
+
+            <?php if ($block->showWriteReviewButton()): ?>
+                <a  href="<?= $block->escapeUrl($block->getReviewUrl()); ?>" 
+                    data-element="write-review"
+                    class="p-3 bg-blue-500 rounded-xl text-white text-center transition-colors duration-300 hover:bg-blue-700">
+                    <?= $block->escapeHtml(__('Write a Review')); ?>
+                </a>
+            <?php endif;?>
+        </div>
+    <?php endif;?>
+
+    <div class="box">
+        <?php if ($block->showSortingOption()): ?>
+            <div data-element="box-sorting"
+                 class="flex items-center justify-center gap-2 flex-wrap pb-3 mb-6 
+                        border-b border-gray-200 lg:justify-end">
+
+                <span class="hidden mr-2 opacity-70 lg:inline-block">
+                    <?= $block->escapeHtml(__('Sort By')); ?>
+                </span>
+                <span data-element="button" data-sort="newest"
+                      @click="() => sortBy('newest')"
+                      class="px-5 py-1.5 bg-blue-500 transition-colors duration-300 hover:bg-blue-700
+                            cursor-pointer text-white text-sm rounded-xl lg:px-7"
+                      :class="{ 'bg-blue-700': activeSorting === 'newest' }">
+                    <?= $block->escapeHtml(__('Newest')); ?>
+                </span>
+                <span data-element="button" data-sort="oldest"
+                      @click="() => sortBy('oldest')"
+                      class="px-5 py-1.5 bg-blue-500 transition-colors duration-300 hover:bg-blue-700
+                             cursor-pointer text-white text-sm rounded-xl lg:px-7"
+                      :class="{ 'bg-blue-700': activeSorting === 'oldest' }">
+                    <?= $block->escapeHtml(__('Oldest')); ?>
+                </span>
+                <span data-element="button" data-sort="lowest"
+                      @click="() => sortBy('lowest')"
+                      class="px-5 py-1.5 bg-blue-500 transition-colors duration-300 hover:bg-blue-700
+                             cursor-pointer text-white text-sm rounded-xl lg:px-7"
+                      :class="{ 'bg-blue-700': activeSorting === 'lowest' }">
+                    <?= $block->escapeHtml(__('Lowest')); ?>
+                </span>
+                <span data-element="button" data-sort="highest"
+                      @click="() => sortBy('highest')"
+                      class="px-5 py-1.5 bg-blue-500 transition-colors duration-300 hover:bg-blue-700
+                             cursor-pointer text-white text-sm rounded-xl lg:px-7"
+                      :class="{ 'bg-blue-700': activeSorting === 'highest' }">
+                    <?= $block->escapeHtml(__('Highest')); ?>
+                </span>
+            </div>
+        <?php endif;?>
+
+        <div data-element="box-review" class="flex flex-col">
+            <?php foreach ($reviews = $block->getReviews() as $index=>$review): ?>
+                <div data-element="review-item" 
+                     data-rating="<?= ceil(floatval($review['total'])/2); ?>"
+                     data-time="<?= $block->escapeHtml($review['created']) ?>"
+                     class="mb-4 pb-4 border-b border-gray-200"
+                     :class="{
+                        'hidden': filtering,
+                        '!block [&~[data-element=no-data]]:hidden': activeFilter.includes(<?= ceil(floatval($review['total'])/2); ?>)
+                     }"
+                     :style="{ 'order': sortOrder.active[<?= $index; ?>] }">
+
+                    <header class="flex gap-5 items-center justify-between mb-3">
+                        <b class="name"><?= $block->escapeHtml($review['name']) ?></b>
+                        <div class="summary text-sm flex items-center gap-4">
+                            <span class="relative top-0.5 opacity-50">
+                                <?= $block->escapeHtml($review['created']) ?>
+                            </span>
+
+                            <?= $block->getLayout()
+                                ->createBlock('Magento\Framework\View\Element\Template')
+                                ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                ->setData('svgSize', '20')
+                                ->setData('percent', floatval($review['total']) * 10)
+                                ->toHtml();
+                            ?>
+                        </div>
+                    </header>
+
+                    <div class="comment text-sm leading-6">
+                        <b class="block text-gray-700 mb-1"><?= $block->escapeHtml($review['default_oneliner']['rating']) ?></b>
+                        <span class="text-gray-500"><?= $block->escapeHtml($review['default_opinion']['rating']) ?></span>
+                    </div>
+                </div>
+            <?php endforeach;?>
+
+            <h3 data-element="no-data"
+                :class="{ 
+                    'block': filtering,
+                    'hidden': !filtering,
+                }">
+                <?= $block->escapeHtml(__("Sorry, there's no reviews for this filter.")); ?>
+            </h3>
+        </div>
+    </div>
+</section>
+
+<script>
+    'use strict';
+
+    function KiyohOverview_<?= $uniqId ?>() {
+        return {
+            sortOrder: {
+                active: [],
+                base: [],
+                newest: [],
+                oldest: [],
+                lowest: [],
+                highest: [],
+            },
+            activeSorting: '',
+            activeFilter: [],
+            filtering: false,
+            reviews: document.querySelectorAll('[data-element="kiyoh-overview-widget-<?= $uniqId; ?>"] [data-element="review-item"]'),
+
+            filterByStars(star) {
+                const index = this.activeFilter.indexOf(star);
+                this.activeReview = 0;
+
+                index === -1 
+                    ? this.activeFilter.push(star)
+                    : this.activeFilter.splice(index, 1);
+
+                this.filtering = this.activeFilter.length > 0;
+            },
+
+            clearFilter() {
+                this.activeFilter = [];
+                this.filtering = false;
+            },
+
+            getSortOrder() {
+                // Get Base Sort Order
+                for (let i = 0; i < this.reviews.length; i++) {
+                    this.sortOrder.base.push(i);
+                }
+
+                // Get all sorting arrays
+                Array.from(this.reviews).forEach((item) => {
+                    const stars = +item.getAttribute('data-rating');
+                    const time = new Date(item.getAttribute('data-time')).getTime()/100000;
+
+                    this.sortOrder.oldest.push(time);
+                    this.sortOrder.newest.push(time - time * 2);
+                    this.sortOrder.lowest.push(stars);
+                    this.sortOrder.highest.push(stars - stars * 2);
+                });
+
+                this.sortOrder.active = this.sortOrder.base;
+            },
+
+            sortBy(type) {
+                if (this.activeSorting === type) {
+                    this.sortOrder.active = this.sortOrder.base;
+                    this.activeSorting = '';
+                } else {
+                    this.sortOrder.active = this.sortOrder[type];
+                    this.activeSorting = type;
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+    @media screen and (min-width: 769px) {
+        div.page-wrapper {
+            overflow: unset;
+        }
+    }
+</style>
diff --git a/src/view/frontend/templates/widget/review/sidebar.phtml b/src/view/frontend/templates/widget/review/sidebar.phtml
new file mode 100644
index 0000000..877587b
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/sidebar.phtml
@@ -0,0 +1,232 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magmodules\KiyOhSR\Block\Widget\Review\Sidebar;
+ use Magento\Framework\Escaper;
+ use Hyva\Theme\ViewModel\HeroiconsOutline;
+ use Hyva\Theme\Model\ViewModelRegistry;
+
+/** @var Sidebar $block */
+/** @var Escaper $escaper */
+/** @var HeroiconsOutline $heroicons */
+
+$uniqId = $block->getUniqueId();
+
+$accountInfo = $block->getAccountInfo();
+$reviewsCount = $accountInfo[0]['total'];
+$reviewsAvgScore = $accountInfo[0]['avgRatingScore'];
+$reviewsAvgRating = $accountInfo[0]['avgRating'];
+
+if ($block->getTextLength() == 'small')  $txtLen = 2;
+if ($block->getTextLength() == 'medium') $txtLen = 4;
+if ($block->getTextLength() == 'large')  $txtLen = 6;
+
+$heroicons = $viewModels->require(HeroiconsOutline::class);
+?>
+
+<section data-element="kiyoh-sidebar-widget-<?= $uniqId; ?>"
+         x-data="KiyohSidebar_<?= $uniqId ?>"
+         class="max-w-xs bg-white border border-gray-200 rounded-xl shadow overflow-hidden">
+    
+    <header class="grid gap-2.5 p-4 bg-[#f9f9f9]">
+        <?php if ($block->showLogoInHeader() || $block->showStarsInHeader()): ?>
+            <div data-element="box-summary"
+                 class="flex items-center justify-between gap-11">
+
+                <?php if ($block->showLogoInHeader()): ?>
+                    <span class="flex items-center gap-2 text-lg font-semibold">
+                        <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="32" height="32"
+                             alt="<?= $block->escapeHtml(__('Kiyoh badge widget')); ?>" />
+                        <span class="text-gray-600">kiyoh</span>
+                    </span>
+                <?php endif; ?>
+
+                <?php if ($block->showStarsInHeader()): ?>
+                    <?= $block->getLayout()
+                            ->createBlock('Magento\Framework\View\Element\Template')
+                            ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                            ->setData('svgSize', '22')
+                            ->setData('percent', $reviewsAvgRating * 10)
+                            ->toHtml();
+                    ?>
+                <?php endif;?>
+            </div>
+        <?php endif;?>
+
+        <div data-element="box-information" class="text-sm text-gray-700 pl-0.5">
+            <b><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+            <?= $block->escapeHtml(__('based on')); ?>
+            <b>
+                <?= $block->escapeHtml($reviewsCount); ?>
+                <?= $reviewsCount > 1
+                        ? $block->escapeHtml(__('reviews'))
+                        : $block->escapeHtml(__('review')); ?>
+            </b>
+        </div>
+    </header>
+
+    <div class="relative pb-4"
+         @mouseover="options.autoplay ? clearInterval(interval) : null"
+         @mouseout="options.autoplay ? interval = setInterval(() => { arrowNext() }, options.autoplaySpeed) : null"
+         @touchstart="options.autoplay ? clearInterval(interval) : null"
+         @touchend="options.autoplay ? interval = setInterval(() => { arrowNext() }, options.autoplaySpeed) : null">
+
+        <div class="overflow-hidden select-none"
+             @mouseup="mouseEvent($event)"
+             @mousedown="mouseEvent($event)"
+             @touchend="mouseEvent($event)"
+             @touchstart="mouseEvent($event)">
+
+            <div class="flex transition-transform"
+                 data-element="kiyoh-sidebar-slider"
+                 :style="`transform: translateX(${currentTransform}); transition-duration: ${transformDuration};`"
+                 :resize.window="setSLideStep($el)"
+                 @resize.window="setSLideStep($el)">
+
+                <?php foreach ($reviews = $block->getReviews() as $review): ?>
+                    <div class="px-2 min-w-full">
+                        <div data-element="review-item" class="flex flex-col px-4 pt-4">
+                            <header class="flex justify-between gap-5 pb-3 mb-5 border-b border-gray-200">
+                                <b class="name"><?= $block->escapeHtml($review['name']) ?></b>
+
+                                <?php if ($block->showStarsPerReview()): ?>
+                                    <?php
+                                        $starColor = $block->getSelectColor() ? $block->getSelectColor() : '#000000';
+                                    ?>
+
+                                    <?= $block->getLayout()
+                                        ->createBlock('Magento\Framework\View\Element\Template')
+                                        ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                                        ->setData('svgSize', '18')
+                                        ->setData('starColor', $starColor)
+                                        ->setData('percent', floatval($review['total']) * 10)
+                                        ->toHtml();
+                                    ?>
+                                <?php endif; ?>
+                            </header>
+
+                            <div class="comment text-sm leading-6">
+                                <b class="block text-gray-700 mb-1"><?= $block->escapeHtml($review['default_oneliner']['rating']) ?></b>
+                                <span class="text-gray-500"
+                                      style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <?=$block->escapeHtml($txtLen)?>;">
+                                    <?= $block->escapeHtml($review['default_opinion']['rating']) ?>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                <?php endforeach;?>
+            </div>
+        </div>
+
+        <!-- Dots -->
+        <div class="flex flex-wrap gap-2 justify-center mt-7 px-9">
+            <template x-for="(dot, index) in new Array(slideOnPage)">
+                <span class="inline-block w-3 h-3 rounded-full bg-gray-300 cursor-pointer
+                            transition-colors duration-300"
+                        :class="{ '!bg-black': activeSlidePage == index + 1 }"
+                        @click="setSlidePage(index + 1)"></span>
+            </template>
+        </div>
+
+        <!-- Arrow -->
+        <template x-if="options.arrows" >
+            <div class="slider-arrow absolute bottom-5 left-1 right-1">
+                <span class="absolute left-0 bottom-1/2 translate-y-3 p-1 opacity-50
+                             cursor-pointer transition-opacity duration-300 hover:opacity-75"
+                      data-element="arrow-left"
+                      @click="arrowPrev">
+                    <?= $heroicons->chevronLeftHtml('', 16, 16); ?>
+                </span>
+
+                <span class="absolute right-0 bottom-1/2 translate-y-3 p-1 opacity-50
+                             cursor-pointer transition-opacity duration-300 hover:opacity-75"
+                      data-element="arrow-right"
+                      @click="arrowNext">
+                    <?= $heroicons->chevronRightHtml('', 16, 16); ?>
+                </span>
+            </div>
+        </template>
+    </div>
+</section>
+
+<script>
+    'use strict';
+
+    function KiyohSidebar_<?= $uniqId ?>() {
+        return {
+            options: {
+                arrows: <?= json_encode($block->showNavigationArrows()); ?>,
+                autoplay: <?= json_encode($block->isAutoplay()); ?>,
+                autoplaySpeed: 3000,
+            },
+
+            slideOnPage: <?= count($block->getReviews()); ?>,
+            activeSlidePage: 1,
+
+            wrapperWidth: 0,
+            stepWidth: 0,
+            currentTransform: '0',
+            transformDuration: '1.5s',
+
+            interval: null,
+            axisShiftX: 0, 
+
+            init() {
+                if (this.options.autoplay) {
+                    this.interval = setInterval(() => { this.arrowNext() }, this.options.autoplaySpeed);
+                }
+            },
+
+            setSlidePage(num) {
+                this.activeSlidePage = num;
+
+                if (!num) this.currentTransform = '0';
+
+                if ((this.wrapperWidth - this.stepWidth) >= this.stepWidth * (num - 1) && num) {
+                    this.currentTransform = `-${this.stepWidth * (num - 1)}px`;
+                } else {
+                    this.currentTransform = `-${this.wrapperWidth - this.stepWidth}px`;
+                }
+
+                setTimeout(() => { this.transformDuration = '1.5s' }, 50);
+            },
+
+            setSLideStep(el) {
+                setTimeout(() => {
+                    this.wrapperWidth = el.scrollWidth; 
+                    this.stepWidth = el.clientWidth;
+                    this.transformDuration = '0s';
+                    this.setSlidePage(this.activeSlidePage);
+                }, 50);
+            },
+
+            arrowNext() {
+                this.activeSlidePage + 1 <= this.slideOnPage
+                    ? this.setSlidePage(this.activeSlidePage + 1)
+                    : this.setSlidePage(1);
+            },
+
+            arrowPrev() {
+                this.activeSlidePage - 1 >= 1
+                    ? this.setSlidePage(this.activeSlidePage - 1)
+                    : this.setSlidePage(this.slideOnPage);
+            },
+
+            mouseEvent(event) {
+                if (event.type == 'mousedown' || event.type == 'touchstart') {
+                    this.axisShiftX = event.pageX || event.changedTouches[0].pageX;
+                } 
+
+                if (event.type == 'mouseup' || event.type == 'touchend') {
+                    let endTouch = event.pageX || event.changedTouches[0].pageX;
+
+                    if (endTouch < this.axisShiftX) this.arrowNext();
+                    if (endTouch > this.axisShiftX) this.arrowPrev();
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/view/frontend/templates/widget/review/textual.phtml b/src/view/frontend/templates/widget/review/textual.phtml
new file mode 100644
index 0000000..eb4698a
--- /dev/null
+++ b/src/view/frontend/templates/widget/review/textual.phtml
@@ -0,0 +1,50 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+ use Magmodules\KiyOhSR\Block\Widget\Review\Textual;
+ use Magento\Framework\Escaper;
+
+/** @var Textual $block */
+/** @var Escaper $escaper */
+
+$uniqId = $block->getUniqueId();
+
+$accountInfo = $block->getAccountInfo();
+$reviewsCount = $accountInfo[0]['total'];
+$reviewsAvgScore = $accountInfo[0]['avgRatingScore'];
+$reviewsAvgRating = $accountInfo[0]['avgRating'];
+?>
+
+<section data-element="kiyoh-textual-widget-<?= $uniqId; ?>"
+         class="inline-flex items-center flex-wrap gap-3 px-3 py-2
+              bg-white border border-gray-200 shadow rounded-xl">
+    <?php if ($block->showLogo()): ?>
+        <img src="<?= $block->escapeUrl($block->getLogoUrl()); ?>" width="28" height="28"
+             alt="<?= $block->escapeHtml(__('Kiyoh textual widget')); ?>" />
+    <?php endif;?>
+
+    <?php if ($block->showStars()): ?>
+        <?= $block->getLayout()
+                ->createBlock('Magento\Framework\View\Element\Template')
+                ->setTemplate('Magmodules_HyvaKiyOhSR::widget/helper/stars.phtml')
+                ->setData('svgSize', '22')
+                ->setData('percent', $reviewsAvgRating * 10)
+                ->toHtml();
+        ?>
+    <?php endif;?>
+
+    <div class="text pt-0.5 text-sm text-gray-700">
+        <?= $block->escapeHtml(__('Our store is rated with a')); ?>
+        <b><?= $block->escapeHtml($reviewsAvgScore); ?></b>
+        <?= $block->escapeHtml(__('based on')); ?>
+        <b>
+            <?= $block->escapeHtml($reviewsCount); ?> 
+            <?= $reviewsCount > 1 
+                    ? $block->escapeHtml(__('reviews')) 
+                    : $block->escapeHtml(__('review')); ?>
+        </b>
+    </div>
+</section>