diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
new file mode 100644
index 0000000..f9f26d4
--- /dev/null
+++ b/app/Http/Controllers/DashboardController.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use stdClass;
+
+class DashboardController extends Controller
+{
+    /**
+     * Display the specified resource.
+     */
+    public function show(Request $request)
+    {
+        $user = $request->user()->load('portfolios');
+
+        $dashboard = new stdClass;
+        $dashboard->marketGainLoss = rand(-200, 3999);
+        $dashboard->totalCostBasis = rand(-200, 3999);
+        $dashboard->totalMarketValue = rand(-200, 3999);
+        $dashboard->realizedGainLoss = rand(-200, 3999);
+        $dashboard->dividendsEarned = rand(-200, 3999);
+
+        return view('dashboard', compact('user', 'dashboard'));
+    }
+}
diff --git a/app/Http/Controllers/PortfolioController.php b/app/Http/Controllers/PortfolioController.php
index 16483a2..90e3777 100644
--- a/app/Http/Controllers/PortfolioController.php
+++ b/app/Http/Controllers/PortfolioController.php
@@ -20,6 +20,13 @@ class PortfolioController extends Controller
      */
     public function show(Portfolio $portfolio)
     {
+
+        $portfolio->marketGainLoss = rand(-200, 3999);
+        $portfolio->totalCostBasis = rand(-200, 3999);
+        $portfolio->totalMarketValue = rand(-200, 3999);
+        $portfolio->realizedGainLoss = rand(-200, 3999);
+        $portfolio->dividendsEarned = rand(-200, 3999);
+
         return view('portfolio.show', compact('portfolio'));
     }
 }
diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php
index 61e37d2..cf31202 100644
--- a/resources/views/components/ib-apex-chart.blade.php
+++ b/resources/views/components/ib-apex-chart.blade.php
@@ -73,92 +73,79 @@
     $seriesData = json_encode($seriesData)
 @endphp
 
-    <div 
-        id="chart"
-        wire:key="{{ rand() }}"
-        x-data="{
-            data: {{ $seriesData }},
-            init(){
+<div 
+    id="chart"
+    wire:key="{{ rand() }}"
+    x-data="{
+        data: {{ $seriesData }},
+        init(){
 
-                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();
+            this.data.chart.events = {
+                mounted: function (chartContext, config) {
+                    console.log('moount', chartContext)
+                    renderCustomLegend(chartContext);
+                },
+                updated: function (chartContext, config) {
+                    console.log('update')
+                    renderCustomLegend(chartContext);
                 }
-
-                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);
-                    }
-                }
-
-                var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
-
-                chart.render();
-
-                function renderCustomLegend(chartContext) {
-                    var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
-
-                    if (!legendContainer) return;
-
-                    legendContainer.innerHTML = ''; // Clear any existing legend items
-                    
-                    chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
-                    
-                        var seriesColor = chartContext.w.config.colors[i];
-                        var legendItem = document.createElement('div');
-                        legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
-                        legendItem.setAttribute('data-series-index', i);
-
-                        var colorBox = document.createElement('span');
-                        colorBox.id = seriesName
-                        colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
-                        colorBox.style.backgroundColor = seriesColor;
-
-                        var labelText = document.createElement('span');
-                        labelText.textContent = seriesName;
-
-                        legendItem.appendChild(colorBox);
-                        legendItem.appendChild(labelText);
-                        legendContainer.appendChild(legendItem);
-
-                        // Initial visibility state
-                        var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
-                        if (isCollapsed) {
-                            legendItem.classList.add('opacity-50');
-                        }
-
-                        legendItem.addEventListener('click', function () {
-                          
-                            var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
-                            var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
-
-                            chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
-
-                            if (isCurrentlyCollapsed) {
-                                this.classList.remove('opacity-50');
-                            } else {
-                                this.classList.add('opacity-50');
-                            }
-                        });
-                    });
-                }
-
             }
-        }"
-    >
-        <div id="chart-{{ $name }}" class="apex-chart"></div>
-    </div>
-    
+
+            var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
+
+            chart.render();
+
+            function renderCustomLegend(chartContext) {
+                var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
+
+                if (!legendContainer) return;
+
+                legendContainer.innerHTML = ''; // Clear any existing legend items
+                
+                chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
+                
+                    var seriesColor = chartContext.w.config.colors[i];
+                    var legendItem = document.createElement('div');
+                    legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
+                    legendItem.setAttribute('data-series-index', i);
+
+                    var colorBox = document.createElement('span');
+                    colorBox.id = seriesName
+                    colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
+                    colorBox.style.backgroundColor = seriesColor;
+
+                    var labelText = document.createElement('span');
+                    labelText.textContent = seriesName;
+
+                    legendItem.appendChild(colorBox);
+                    legendItem.appendChild(labelText);
+                    legendContainer.appendChild(legendItem);
+
+                    // Initial visibility state
+                    var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
+                    if (isCollapsed) {
+                        legendItem.classList.add('opacity-50');
+                    }
+
+                    legendItem.addEventListener('click', function () {
+                      
+                        var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
+                        var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
+
+                        chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
+
+                        if (isCurrentlyCollapsed) {
+                            this.classList.remove('opacity-50');
+                        } else {
+                            this.classList.add('opacity-50');
+                        }
+                    });
+                });
+            }
+
+        }
+    }"
+>
+    <div id="chart-{{ $name }}" class="apex-chart"></div>
+</div>
+
diff --git a/resources/views/components/partials/side-bar.blade.php b/resources/views/components/partials/side-bar.blade.php
index 429087c..cb55a9e 100644
--- a/resources/views/components/partials/side-bar.blade.php
+++ b/resources/views/components/partials/side-bar.blade.php
@@ -3,7 +3,15 @@
     <x-menu-item title="{{ __('Dashboard') }}" icon="o-home" link="{{ @route('dashboard') }}" />
     <x-menu-sub title="{{ __('Portfolios') }}" icon="o-document-duplicate">
         @foreach (auth()->user()->portfolios as $portfolio)
-            <x-menu-item title="{{ $portfolio->title }}" icon="o-document" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}" />
+        <x-menu-item  icon="o-document" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}" exact>
+            <x-slot:title> 
+                {{ $portfolio->title }} 
+                @if($portfolio->wishlist)
+                <x-badge value="{{ __('Wishlist') }}" class="badge-primary badge-sm ml-2" />
+                @endif
+            </x-slot:title>
+            
+        </x-menu-item>
         @endforeach
 
         <x-menu-item title="{{ __('Create Portfolio') }}" icon="o-document-plus" link="{{ @route('portfolio.create') }}" />
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 0820ae9..ada1d93 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,62 +1,59 @@
 <x-app-layout>
 
-    <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
+    @livewire('portfolio-performance-cards', [
+        'name' => 'dashboard'
+    ])
 
-        @livewire('portfolio-performance-chart', [
-            'name' => 'dashboard'
-        ])
-        
-    </x-card>
+    <div class="grid sm:grid-cols-5 gap-5">
+        @php
+            $formatter = new NumberFormatter('en_US', NumberFormatter::CURRENCY);
+        @endphp
 
-    <div class="grid md:grid-cols-5 gap-5">
-        <x-stat
-            class="bg-slate-100 dark:bg-base-200"
-            title="Market Gain/Loss"
-            value="22.124"
-            icon="o-arrow-trending-up"
-        />
-        <x-stat
-            class="bg-slate-100 dark:bg-base-200"
-            title="Total Cost Basis"
-            value="22.124"
-            icon="o-arrow-trending-up"
-        />
-        <x-stat
-            class="bg-slate-100 dark:bg-base-200"
-            title="Total Market Value"
-            value="22.124"
-            icon="o-arrow-trending-up"
-        />
-        <x-stat
-            class="bg-slate-100 dark:bg-base-200"
-            title="Realized Gain/Loss"
-            value="22.124"
-            icon="o-arrow-trending-up"
-        />
-        <x-stat
-            class="bg-slate-100 dark:bg-base-200"
-            title="Dividends Earned"
-            value="22.124"
-            icon="o-arrow-trending-up"
-        />
+        <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+            <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Market Gain/Loss') }}</div>
+            <div class="font-black text-xl"> {{ $formatter->formatCurrency($dashboard->marketGainLoss, 'USD') }} </div>
+        </x-card>
         
+        <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+            <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Total Cost Basis') }}</div>
+            <div class="font-black text-xl"> {{ $formatter->formatCurrency($dashboard->totalCostBasis, 'USD') }} </div>
+        </x-card>
+        
+        <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+            <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Total Market Value') }}</div>
+            <div class="font-black text-xl"> {{ $formatter->formatCurrency($dashboard->totalMarketValue, 'USD') }} </div>
+        </x-card>
+        
+        <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+            <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Realized Gain/Loss') }}</div>
+            <div class="font-black text-xl"> {{ $formatter->formatCurrency($dashboard->realizedGainLoss, 'USD') }} </div>
+        </x-card>
+
+        <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+            <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Dividends Earned') }}</div>
+            <div class="font-black text-xl"> {{ $formatter->formatCurrency($dashboard->dividendsEarned, 'USD') }} </div>
+        </x-card>
+            
     </div>
 
     <div class="mt-6 grid md:grid-cols-7 gap-5">
 
-        <x-ib-card title="My portfolios" class="md:col-span-4">
-         
-            @php
-                $users = App\Models\User::take(3)->get();
-            @endphp
+        <x-ib-card title="{{ __('My portfolios') }}" class="md:col-span-4">
             
-            @foreach($users as $user)
-                <x-list-item no-separator :item="$user" avatar="profile_photo_url" link="/docs/installation" />
+            @foreach($user->portfolios as $portfolio)
+                <x-list-item no-separator :item="$portfolio" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id]) }}">
+                    <x-slot:value>
+                        {{ $portfolio->title }}
+                        @if($portfolio->wishlist)
+                            <x-badge value="{{ __('Wishlist') }}" class="badge-primary badge-sm ml-2" />
+                        @endif
+                    </x-slot:value>
+                </x-list-item>
             @endforeach
 
         </x-ib-card>
 
-        <x-ib-card title="Top performers" class="md:col-span-3">
+        <x-ib-card title="{{ __('Top performers') }}" class="md:col-span-3">
          
             @php
                 $users = App\Models\User::take(3)->get();
@@ -68,7 +65,7 @@
 
         </x-ib-card>
         
-        <x-ib-card title="Top headlines" class="md:col-span-3">
+        <x-ib-card title="{{ __('Top headlines') }}" class="md:col-span-3">
          
             @php
                 $users = App\Models\User::take(3)->get();
@@ -80,7 +77,7 @@
 
         </x-ib-card>
 
-        <x-ib-card title="Recent activity" class="md:col-span-4">
+        <x-ib-card title="{{ __('Recent activity') }}" class="md:col-span-4">
          
             @php
                 $users = App\Models\User::take(3)->get();
diff --git a/resources/views/livewire/manage-portfolio-form.blade.php b/resources/views/livewire/manage-portfolio-form.blade.php
index 716399d..74e2850 100644
--- a/resources/views/livewire/manage-portfolio-form.blade.php
+++ b/resources/views/livewire/manage-portfolio-form.blade.php
@@ -42,7 +42,7 @@ new class extends Component {
         // $this->portfolio->owner_id = auth()->user()->id;
         $this->portfolio->save();
 
-        $this->success('Portfolio updated', redirectTo: "/portfolio/{$this->portfolio->id}");
+        $this->success(__('Portfolio updated'), redirectTo: "/portfolio/{$this->portfolio->id}");
     }
 
     public function save()
@@ -65,7 +65,7 @@ new class extends Component {
         // $portfolio->owner_id = auth()->user()->id;
         $portfolio->save();
 
-        $this->success('Portfolio created', redirectTo: "/portfolio/{$portfolio->id}");
+        $this->success(__('Portfolio created'), redirectTo: "/portfolio/{$portfolio->id}");
     }
 
     public function delete()
@@ -73,17 +73,17 @@ new class extends Component {
 
         $this->portfolio->delete();
 
-        $this->success('Portfolio deleted', redirectTo: "/dashboard");
+        $this->success(__('Portfolio deleted'), redirectTo: "/dashboard");
     }
 }; ?>
 
 <div class="grid lg:grid-cols-4 gap-10">
     <x-form wire:submit="{{ $portfolio ? 'update' : 'save' }}" class="col-span-3">
-        <x-input label="Title" wire:model="title" required />
+        <x-input label="{{ __('Title') }}" wire:model="title" required />
 
-        <x-textarea label="Notes" wire:model="notes" rows="5" />
+        <x-textarea label="{{ __('Notes') }}" wire:model="notes" rows="5" />
 
-        <x-toggle label="Wishlist" wire:model="wishlist" />
+        <x-toggle label="{{ __('Wishlist') }}" wire:model="wishlist" />
 
         <x-slot:actions>
             @if ($portfolio)
@@ -96,7 +96,7 @@ new class extends Component {
             @endif
 
             @if (!$hideCancel)
-            <x-button label="Cancel" link="/dashboard" />
+            <x-button label="{{ __('Cancel') }}" link="/dashboard" />
             @endif
             <x-button label="{{ $portfolio ? 'Update' : 'Create' }}" type="submit" icon="o-paper-airplane" class="btn-primary" spinner="save" />
         </x-slot:actions>
diff --git a/resources/views/livewire/portfolio-performance-card.blade.php b/resources/views/livewire/portfolio-performance-card.blade.php
deleted file mode 100644
index 5013d0a..0000000
--- a/resources/views/livewire/portfolio-performance-card.blade.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-use App\Models\Portfolio;
-use Livewire\Attributes\{Title, Rule};
-use Livewire\Volt\Component;
-
-new class extends Component {
-
-    // props
-    public ?Portfolio $portfolio;
-    public String $name = 'portfolio';
-    public String $scope = 'YTD';
-    public ?Int $value;
-    public Array $options = [
-        ['id' => '1M', 'name' => '1 month'],
-        ['id' => '3M', 'name' => '3 months'],
-        ['id' => 'YTD', 'name' => 'Year to date'],
-        ['id' => '1Y', 'name' => '1 year'],
-        ['id' => '3Y', 'name' => '3 years'],
-        ['id' => 'ALL', 'name' => 'All time']
-    ];
-
-    protected $listeners = ['data-scope-updated' => 'test'];
-
-    public function test()
-    {
-        $this->value = 148;
-    }
-
-    // methods
-    public function mount() 
-    {
-        //
-        
-    }
-
-}; ?>
-
-<x-stat
-    class="bg-slate-100 dark:bg-base-200"
-    title="Market Gain/Loss"
-    :value="$value"
-    icon="o-arrow-trending-up"
-/>
diff --git a/resources/views/livewire/portfolio-performance-chart.blade.php b/resources/views/livewire/portfolio-performance-cards.blade.php
similarity index 95%
rename from resources/views/livewire/portfolio-performance-chart.blade.php
rename to resources/views/livewire/portfolio-performance-cards.blade.php
index 59f271b..2c9b336 100644
--- a/resources/views/livewire/portfolio-performance-chart.blade.php
+++ b/resources/views/livewire/portfolio-performance-cards.blade.php
@@ -38,6 +38,8 @@ new class extends Component {
             ],
 
         ];
+        
+        // $this->marketGainLoss = rand(-200, 3999);
     }
 
     public function changeScope($scope)
@@ -77,7 +79,7 @@ new class extends Component {
 
 }; ?>
 
-<div>
+<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">
@@ -109,4 +111,4 @@ new class extends Component {
         <x-ib-apex-chart :series-data="$myChart" :name="$name" />
     </div>
 
-</div>
+</x-card>
\ No newline at end of file
diff --git a/resources/views/portfolio/show.blade.php b/resources/views/portfolio/show.blade.php
index 56e018c..fd4a613 100644
--- a/resources/views/portfolio/show.blade.php
+++ b/resources/views/portfolio/show.blade.php
@@ -27,50 +27,44 @@
             />
         </x-ib-toolbar>
 
-        <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
+        @livewire('portfolio-performance-cards', [
+            'name' => 'portfolio-'.$portfolio->id,
+            'portfolio' => $portfolio
+        ])
 
-            @livewire('portfolio-performance-chart', [
-                'name' => 'portfolio-'.$portfolio->id,
-                'portfolio' => $portfolio
-            ])
+        <div class="grid sm:grid-cols-5 gap-5">
+            @php
+                $formatter = new NumberFormatter('en_US', NumberFormatter::CURRENCY);
+            @endphp
 
-        </x-card>
-
-        <div class="grid md:grid-cols-5 gap-5">
-            @livewire('portfolio-performance-card')
-            {{-- <x-stat
-                class="bg-slate-100 dark:bg-base-200"
-                title="Market Gain/Loss"
-                value="22.124"
-                icon="o-arrow-trending-up"
-            /> --}}
-            <x-stat
-                class="bg-slate-100 dark:bg-base-200"
-                title="Total Cost Basis"
-                value="22.124"
-                icon="o-arrow-trending-up"
-            />
-            <x-stat
-                class="bg-slate-100 dark:bg-base-200"
-                title="Total Market Value"
-                value="22.124"
-                icon="o-arrow-trending-up"
-            />
-            <x-stat
-                class="bg-slate-100 dark:bg-base-200"
-                title="Realized Gain/Loss"
-                value="22.124"
-                icon="o-arrow-trending-up"
-            />
-            <x-stat
-                class="bg-slate-100 dark:bg-base-200"
-                title="Dividends Earned"
-                value="22.124"
-                icon="o-arrow-trending-up"
-            />
+            <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+                <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Market Gain/Loss') }}</div>
+                <div class="font-black text-xl"> {{ $formatter->formatCurrency($portfolio->marketGainLoss, 'USD') }} </div>
+            </x-card>
             
+            <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+                <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Total Cost Basis') }}</div>
+                <div class="font-black text-xl"> {{ $formatter->formatCurrency($portfolio->totalCostBasis, 'USD') }} </div>
+            </x-card>
+            
+            <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+                <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Total Market Value') }}</div>
+                <div class="font-black text-xl"> {{ $formatter->formatCurrency($portfolio->totalMarketValue, 'USD') }} </div>
+            </x-card>
+            
+            <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+                <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Realized Gain/Loss') }}</div>
+                <div class="font-black text-xl"> {{ $formatter->formatCurrency($portfolio->realizedGainLoss, 'USD') }} </div>
+            </x-card>
+
+            <x-card class="col-span-5 sm:col-span-1 bg-slate-100 dark:bg-base-200 rounded-lg">
+                <div class="text-sm text-gray-400 whitespace-nowrap">{{ __('Dividends Earned') }}</div>
+                <div class="font-black text-xl"> {{ $formatter->formatCurrency($portfolio->dividendsEarned, 'USD') }} </div>
+            </x-card>
+                
         </div>
 
+
         <div class="mt-6 grid md:grid-cols-7 gap-5">
 
             <x-ib-card title="All portfolio holdings" class="md:col-span-4">
diff --git a/routes/web.php b/routes/web.php
index d7d92a4..0d252c1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\PortfolioController;
 
 Route::get('/', function () {
@@ -9,7 +10,7 @@ Route::get('/', function () {
 
 Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified'])->group(function () {
 
-    Route::view('/dashboard', 'dashboard')->name('dashboard');
+    Route::get('/dashboard', [DashboardController::class, 'show'])->name('dashboard');
 
     Route::get('/portfolio/create', [PortfolioController::class, 'create'])->name('portfolio.create');
     Route::get('/portfolio/{portfolio}', [PortfolioController::class, 'show'])->name('portfolio.show');