diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php
index d142666..61e37d2 100644
--- a/resources/views/components/ib-apex-chart.blade.php
+++ b/resources/views/components/ib-apex-chart.blade.php
@@ -1,7 +1,7 @@
-@props(['data' => [], 'name' => 'apex-chart' ])
+@props(['seriesData' => [], 'name' => 'apex-chart' ])
 
 @php
-    $data = array_merge([
+    $seriesData = array_merge([
       'chart' => [
         'type' => "area",
         'stacked' => true,
@@ -40,6 +40,10 @@
         'axisTicks' => [
           'show' => false
         ],
+        'labels' => [
+          'offsetX' => 15,
+          'offsetY' => 0
+        ],
         'tooltip' => [
           'enabled' => false
         ]
@@ -65,30 +69,37 @@
       'legend' => [
         'show' => false,
       ],
-    ], $data);
-    $data = json_encode($data)
+    ], $seriesData);
+    $seriesData = json_encode($seriesData)
 @endphp
 
     <div 
         id="chart"
         wire:key="{{ rand() }}"
         x-data="{
-            data: {{ $data }},
+            data: {{ $seriesData }},
             init(){
-                
-                this.data.series = [{
-                    'name': 'Total Views',
-                    'data': generateDayWiseTimeSeries(0, 18)
-                },{
-                    'name': 'Unique Views',
-                    'data': generateDayWiseTimeSeries(1, 18)
-                }]
+
+                var charts = document.querySelectorAll('.apex-chart')
+                charts.forEach((chart)=>{
+                  console.log(chart)
+                })
+
+                var existingChart = ApexCharts.getChartByID('{{ $name }}');
+                if (existingChart) {
+                console.log('found it')
+                    existingChart.destroy();
+                }
+
+                console.log('did not find')
 
                 this.data.chart.events = {
                     mounted: function (chartContext, config) {
+                        console.log('moount', chartContext)
                         renderCustomLegend(chartContext);
                     },
                     updated: function (chartContext, config) {
+                        console.log('update')
                         renderCustomLegend(chartContext);
                     }
                 }
@@ -97,7 +108,7 @@
 
                 chart.render();
 
-                async function renderCustomLegend(chartContext) {
+                function renderCustomLegend(chartContext) {
                     var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
 
                     if (!legendContainer) return;
@@ -145,37 +156,9 @@
                     });
                 }
 
-                function generateRandomArray(length, min, max) {
-                  const randomArray = [];
-                  for (let i = 0; i < length; i++) {
-                    randomArray.push(Math.floor(Math.random() * (max - min + 1)) + min);
-                  }
-                  return randomArray;
-                }
-
-                function generateDayWiseTimeSeries(s, count) {
-                    var values = [
-                      generateRandomArray(20, 2, 60), 
-                      generateRandomArray(20, 2, 60)
-                    ];
-                    var i = 0;
-                    var series = [];
-                    var x = new Date('11 Nov 2012').getTime();
-                    while (i < count) {
-                        series.push([x, values[s][i]]);
-                        x += 86400000;
-                        i++;
-                    }
-                    return series;
-                }
-
-
-
-
-
             }
         }"
     >
-        <div id="chart-{{ $name }}"></div>
+        <div id="chart-{{ $name }}" class="apex-chart"></div>
     </div>
     
diff --git a/resources/views/components/ib-toolbar.blade.php b/resources/views/components/ib-toolbar.blade.php
index c8e4da1..575dc1c 100644
--- a/resources/views/components/ib-toolbar.blade.php
+++ b/resources/views/components/ib-toolbar.blade.php
@@ -1,6 +1,6 @@
 @props(['title' => ''])
 
-<div {{ $attributes->merge(['class' => 'flex mb-6']) }} class="">
+<div {{ $attributes->merge(['class' => 'flex items-center mb-6']) }} class="">
     <h1 class="text-2xl font-medium mr-3"> {{ $title }} </h1>
     
     {{ $slot }}
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 96f031d..1c4ecc7 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -30,96 +30,92 @@ new class extends Component {
 
     public ?Portfolio $portfolio;
 
-    public array $myChart = [
-        'type' => 'line',
-        'data' => [
-            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-            'datasets' => [
-                [
-                    'label' => '# of Votes',
-                    'data' => [2000, 2204, 3001, 2981, 2845],
-                    'tension' => 0.4,
-                    'pointStyle' => 'rect',
-                    'pointRadius' => 4,
-                    'pointHoverRadius' => 6
-                ],
-                
-            ]
-        ],
-        'options' => [
-            'scales' => [
-                // 'y' => [
-                //     'display' => false,
-                // ],
-                'x' => [
-                    // 'type' => 'time',
-                    'time' => [
-                        // Luxon format string
-                        // 'tooltipFormat' => 'DD'
-                    ],
-                ],
-            ],
-            'aspectRatio' => 0,
-            'plugins' => [
-                'htmlLegend' => [
-                    // ID of the container to put the legend in
-                    'containerID' => 'chart-legend',
-                ],
-                'legend' => [
-                    'display' => false,
-                    // 'position' => 'right'
-                ]
-            ]
-        ]
 
-    ];
+    private function generateDateSeries($startDate, $endDate) {
+        $dateArray = [];
+        $currentDate = strtotime($startDate);
+        $endDate = strtotime($endDate);
+
+        while ($currentDate <= $endDate) {
+            // Generate a random integer
+            $randomInt = rand(1000, 3000);
+
+            // Format the current date to 'Y-m-d'
+            $formattedDate = date('Y-m-d', $currentDate);
+
+            // Append the date and random integer to the array
+            $dateArray[] = [$formattedDate, $randomInt];
+
+            // Move to the next day
+            $currentDate = strtotime("+1 day", $currentDate);
+        }
+
+        return $dateArray;
+    }
+
+    public array $myChart;
+
+    public function mount() {
+
+        $this->myChart = [
+            'series' => [
+                [
+                    'name' => 'Total Views',
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
+                ],      
+                [
+                    'name' => 'Second Views',
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
+                ],    
+            ],
+
+        ];
+
+    }
 
     
 }; ?>
   
 <div x-data>
 
-    <div class="grid mb-6 gap-5">
 
-        <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg ">
+    <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
 
-    
-            <div class="flex justify-between items-center mb-2">
-                    
-                <div class="flex items-center">
-                    
-                    <h2 class="text-xl mr-4">Performance</h2>
-                    <div id="chart-legend-dashboard" class="flex space-around"></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 justify-between items-center mb-2">
+                
+            <div class="flex items-center">
+                
+                <h2 class="text-xl mr-4">Performance</h2>
+                <div id="chart-legend-dashboard" class="flex space-around"></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="h-[280px] mb-5"
-            >
-                <x-ib-apex-chart :data="[]" name="dashboard"  />
-            </div>
-    
+        </div>
+        
+        <div
+            class="h-[280px] mb-5"
+        >
+            <x-ib-apex-chart :key="Str::uuid()" :series-data="$myChart" name="dashboard"  />
+        </div>
 
-        </x-card>
 
-    </div>
-    
+    </x-card>
+
     <div class="grid md:grid-cols-5 gap-5">
         <x-stat
             class="bg-slate-100 dark:bg-base-200"
diff --git a/resources/views/livewire/portfolio/show.blade.php b/resources/views/livewire/portfolio/show.blade.php
index d5bc84f..3118269 100644
--- a/resources/views/livewire/portfolio/show.blade.php
+++ b/resources/views/livewire/portfolio/show.blade.php
@@ -30,23 +30,47 @@ new class extends Component {
 
     public ?Portfolio $portfolio;
 
-    public array $myChart = [
-        'type' => 'line',
-        'data' => [
-            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-            'datasets' => [
+    private function generateDateSeries($startDate, $endDate) {
+        $dateArray = [];
+        $currentDate = strtotime($startDate);
+        $endDate = strtotime($endDate);
+
+        while ($currentDate <= $endDate) {
+            // Generate a random integer
+            $randomInt = rand(1000, 3000);
+
+            // Format the current date to 'Y-m-d'
+            $formattedDate = date('Y-m-d', $currentDate);
+
+            // Append the date and random integer to the array
+            $dateArray[] = [$formattedDate, $randomInt];
+
+            // Move to the next day
+            $currentDate = strtotime("+1 day", $currentDate);
+        }
+
+        return $dateArray;
+    }
+
+    public array $myChart;
+
+    public function mount() {
+
+        $this->myChart = [
+            'series' => [
                 [
-                    'label' => '# of Votes',
-                    'data' => [2000, 2204, 3001, 2981, 2845],
-                    'tension' => 0.4,
-                    'pointStyle' => 'rect',
-                    'pointRadius' => 4,
-                    'pointHoverRadius' => 6
-                ],
-                
-            ]
-        ],
-    ];
+                    'name' => 'Total Views',
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
+                ],      
+                [
+                    'name' => 'Second Views',
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
+                ],    
+            ],
+
+        ];
+
+    }
 }; ?>
   
 <div x-data>
@@ -62,6 +86,10 @@ new class extends Component {
 
     <x-ib-toolbar :title="$portfolio->title">
 
+        @if($portfolio->wishlist)
+        <x-badge value="Wishlist" class="badge-primary mr-3" />
+        @endif
+
         <x-button 
             title="Edit Portfolio" 
             icon="o-pencil" 
@@ -70,48 +98,42 @@ new class extends Component {
         />
     </x-ib-toolbar>
 
-    <div class="grid mb-6 gap-5">
+    <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
 
-        <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg ">
-
-            
-
-            <div class="flex justify-between items-center mb-2">
-                    
-                <div class="flex items-center">
-                    
-                    <h2 class="text-xl mr-4">Performance</h2>
-                    <div id="chart-legend-portfolio-{{ $portfolio->id }}" class="flex space-around"></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 justify-between items-center mb-2">
+                
+            <div class="flex items-center">
+                
+                <h2 class="text-xl mr-4">Performance</h2>
+                <div id="chart-legend-portfolio-{{ $portfolio->id }}" class="flex space-around"></div>
                 
             </div>
-            
-            {{-- <div
-                class="h-[280px]"
+
+            <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'] }}')"
+                        />
                 
-            > --}}
-                <x-ib-apex-chart :data="[]" name="portfolio-{{ $portfolio->id }}" />
-            {{-- </div> --}}
+                    @endforeach
+                </x-menu>
+            </x-dropdown>
+            
+        </div>
+        
+        <div
+            class="h-[280px] mb-5"
+            
+        >
+            <x-ib-apex-chart :series-data="$myChart" :key="Str::uuid()" name="portfolio-{{ $portfolio->id }}" />
+        </div>
 
-        </x-card>
+    </x-card>
 
-    </div>
-    
     <div class="grid md:grid-cols-5 gap-5">
         <x-stat
             class="bg-slate-100 dark:bg-base-200"