diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php
index cf31202..a197862 100644
--- a/resources/views/components/ib-apex-chart.blade.php
+++ b/resources/views/components/ib-apex-chart.blade.php
@@ -82,12 +82,10 @@
 
             this.data.chart.events = {
                 mounted: function (chartContext, config) {
-                    console.log('moount', chartContext)
-                    renderCustomLegend(chartContext);
+                    renderLegend(chartContext);
                 },
                 updated: function (chartContext, config) {
-                    console.log('update')
-                    renderCustomLegend(chartContext);
+                    renderLegend(chartContext);
                 }
             }
 
@@ -95,7 +93,15 @@
 
             chart.render();
 
-            function renderCustomLegend(chartContext) {
+            // reset custom zoom button
+            var resetZoomButton = document.querySelector('#chart-reset-zoom-{{ $name }}');
+            resetZoomButton.addEventListener('click', function () {
+              chart.resetSeries()
+                        
+            });
+
+            // generate custom legend view
+            function renderLegend(chartContext) {
                 var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
 
                 if (!legendContainer) return;
@@ -146,6 +152,6 @@
         }
     }"
 >
-    <div id="chart-{{ $name }}" class="apex-chart"></div>
+  <div id="chart-{{ $name }}" class="apex-chart"></div>
 </div>
 
diff --git a/resources/views/livewire/portfolio-performance-cards.blade.php b/resources/views/livewire/portfolio-performance-cards.blade.php
index 2c9b336..7702ff6 100644
--- a/resources/views/livewire/portfolio-performance-cards.blade.php
+++ b/resources/views/livewire/portfolio-performance-cards.blade.php
@@ -88,21 +88,24 @@ new class extends Component {
             <div id="chart-legend-{{ $name }}" class="flex space-between"></div>
             
         </div>
-
-        <x-dropdown label="{{ $scope }}" class="btn-ghost btn-sm">
-                
-            <x-menu>
-                @foreach($options as $option)
-
-                    <x-menu-item 
-                        title="{{ $option['name'] }}" 
-                        x-on:click="$wire.changeScope('{{ $option['id'] }}')"
-                    />
-            
-                @endforeach
-            </x-menu>
-        </x-dropdown>
         
+        <div class="flex items-center">
+            <x-button title="{{ __('Reset chart') }}" icon="o-arrow-path" class="btn-ghost btn-sm btn-circle mr-2" id="chart-reset-zoom-{{ $name }}" />
+
+            <x-dropdown title="{{ __('Choose time period') }}" label="{{ $scope }}" class="btn-ghost btn-sm">
+                    
+                <x-menu>
+                    @foreach($options as $option)
+
+                        <x-menu-item 
+                            title="{{ $option['name'] }}" 
+                            x-on:click="$wire.changeScope('{{ $option['id'] }}')"
+                        />
+                
+                    @endforeach
+                </x-menu>
+            </x-dropdown>
+        </div>
     </div>
 
     <div