diff --git a/components/style-components/typography/Opacity.vue b/components/style-components/typography/Opacity.vue
new file mode 100755
index 0000000..dfb8491
--- /dev/null
+++ b/components/style-components/typography/Opacity.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <p class="text-high-emphasis">High-emphasis has an opacity of 87% in light skin and 100% in dark.</p>
+        <p class="text-medium-emphasis">Medium-emphasis text and hint text have opacities of 60% in light skin and 70% in dark.</p>
+        <p class="text-disabled">Disabled text has an opacity of 38% in light skin and 50% in dark.</p>
+    </div>
+</template>
diff --git a/components/style-components/typography/TextAlignment.vue b/components/style-components/typography/TextAlignment.vue
new file mode 100755
index 0000000..d593941
--- /dev/null
+++ b/components/style-components/typography/TextAlignment.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <p class="text-left">Left aligned on all viewport sizes.</p>
+        <p class="text-center">Center aligned on all viewport sizes.</p>
+        <p class="text-right">Right aligned on all viewport sizes.</p>
+        <p class="text-sm-left">Left aligned on viewports SM (small) or wider.</p>
+        <p class="text-right text-md-left">Left aligned on viewports MD (medium) or wider.</p>
+        <p class="text-right text-lg-left">Left aligned on viewports LG (large) or wider.</p>
+        <p class="text-right text-xl-left">Left aligned on viewports XL (extra-large) or wider.</p>
+    </div>
+</template>
diff --git a/components/style-components/typography/TextDecoration.vue b/components/style-components/typography/TextDecoration.vue
new file mode 100755
index 0000000..c0e2e44
--- /dev/null
+++ b/components/style-components/typography/TextDecoration.vue
@@ -0,0 +1,8 @@
+<template>
+    <div class="d-flex justify-space-between flex-row">
+        <a href="#" class="text-decoration-none">Non-underlined link</a>
+        <div class="text-decoration-line-through">Line-through text</div>
+        <div class="text-decoration-overline">Overline text</div>
+        <div class="text-decoration-underline">Underline text</div>
+    </div>
+</template>
diff --git a/components/widgets/banners/Banner2.vue b/components/widgets/banners/Banner2.vue
new file mode 100755
index 0000000..6e6d1ab
--- /dev/null
+++ b/components/widgets/banners/Banner2.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-card elevation="0" rounded="md" class="bg-lightinfo mt-6">
+        <v-card-item class="py-0">
+            <v-row class="d-flex align-center">
+                <v-col cols="12" sm="7">
+                    <h5 class="text-h5 pt-3 mb-4">Track your every Transaction Easily</h5>
+                    <p class="topacity-80 mb-1 textSecondary text-body-1 lh-md">Track and record your every income and expence easily to control your balance</p>
+                    <v-btn flat color="info" class="mt-4" size="large">Download</v-btn>
+                </v-col>
+                <v-col cols="12" sm="5">
+                    <div class="px-11 pt-5 pb-0">
+                     <img src="@/assets/images/backgrounds/track-bg.png" height="215"  class="mb-n10 ml-sm-5" alt="image"/>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template> 
\ No newline at end of file
diff --git a/components/widgets/banners/Banner3.vue b/components/widgets/banners/Banner3.vue
new file mode 100755
index 0000000..228756c
--- /dev/null
+++ b/components/widgets/banners/Banner3.vue
@@ -0,0 +1,12 @@
+<template>
+    <v-card elevation="10" class=" mt-6">
+        <v-card-item class="text-center">
+            <img src="@/assets/images/backgrounds/maintenance.svg" width="200" alt="image" />
+            <h5 class="text-h5 pt-3 mb-0">Oops something went wrong!</h5>
+            <p class="text-body-1  mt-3 textSecondary">
+               Trying again to bypasses these<br> temporary error.
+            </p>
+            <v-btn flat class="mt-4" size="large" color="error">Retry</v-btn>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/banners/Banner4.vue b/components/widgets/banners/Banner4.vue
new file mode 100755
index 0000000..6b9e38c
--- /dev/null
+++ b/components/widgets/banners/Banner4.vue
@@ -0,0 +1,12 @@
+<template>
+    <v-card elevation="10" class=" mt-6">
+        <v-card-item class="text-center">
+            <img src="@/assets/images/products/empty-shopping-cart.svg" alt="image" width="200" />
+            <h5 class="text-h5 pt-3 mb-0">Oop, Your cart is empty!</h5>
+            <p class="text-body-1 mt-3 textSecondary">
+               Get back to shopping and get  rewards from it.
+            </p>
+            <v-btn flat class="mt-4" size="large" color="primary">Go for shopping</v-btn>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/banners/Banner5.vue b/components/widgets/banners/Banner5.vue
new file mode 100755
index 0000000..7d06783
--- /dev/null
+++ b/components/widgets/banners/Banner5.vue
@@ -0,0 +1,13 @@
+<template>
+    <v-card elevation="10" class=" mt-sm-0 mt-6">
+        <v-card-item class="text-center">
+            <p class="text-body-1 mb-4 textSecondary">LEVEL UP</p>
+            <img src="@/assets/images/backgrounds/gold.png" alt="image" width="150" />
+            <h5 class="text-h5 pt-3 mb-0">You reach all Notifications</h5>
+            <p class="text-body-1 mt-3 textSecondary">
+              Congratulations,<br> Tap to continue next task.
+            </p>
+            <v-btn flat color="primary" class="mt-4"  size="large">Yes, Got it!</v-btn>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/banners/Banner6.vue b/components/widgets/banners/Banner6.vue
new file mode 100755
index 0000000..ac49316
--- /dev/null
+++ b/components/widgets/banners/Banner6.vue
@@ -0,0 +1,25 @@
+<template>
+    <v-card elevation="10" class=" mt-6">
+        <v-card-item class="text-center">
+            <h5 class="text-h5 mb-6">Mutual Friend Revealed</h5>
+                <v-badge content="1" color="error"  
+                    offset-x="18"
+                    offset-y="18"
+                >
+                    <v-avatar size="140">
+                        <img src="@/assets/images/profile/user-3.jpg" height="140" alt="image" />    
+                    </v-avatar>
+                </v-badge>
+            
+                <h5 class="text-h5 pt-3 mt-3 mb-0">Tommoie Henderson</h5>
+            <p class="text-body-1 mt-3 textSecondary">
+              Accept the request and<br> type a message
+            </p>
+            <div class="d-flex justify-center gap-3 mt-4">
+                <v-btn flat color="primary" size="large">accept</v-btn>
+            <v-btn flat variant="tonal"  size="large"  color="error">remove</v-btn>
+            </div>
+          
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/banners/WelcomCard.vue b/components/widgets/banners/WelcomCard.vue
new file mode 100755
index 0000000..8ebf62b
--- /dev/null
+++ b/components/widgets/banners/WelcomCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <v-card elevation="10" class="bg-primary-gt position-relative profit-card overflow-hidden">
+        <v-card-item>
+            <v-row>
+                <v-col cols="12" md="6">
+                    <h5 class="text-h5 text-white mb-4">Welcome back David!</h5>
+                    <p class="opacity-80 mb-1 text-white text-body-1 lh-md">You have earned 54% more than last month which is great thing.</p>
+                    <v-btn flat color="error" size="large" class="mt-4">check</v-btn>    
+                </v-col>
+            </v-row>
+        </v-card-item>
+        <img src="@/assets/images/backgrounds/welcome-bg2.png" alt="matdash-img" class="position-absolute" />
+    </v-card>
+</template>
diff --git a/components/widgets/cards/BlogCards.vue b/components/widgets/cards/BlogCards.vue
new file mode 100755
index 0000000..38aa560
--- /dev/null
+++ b/components/widgets/cards/BlogCards.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { blogCard } from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="4" sm="4" v-for="card in blogCard" :key="card.title">
+            <v-card elevation="10"  rounded="md" class="card-hover">
+                <div>
+                    <v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
+                        <v-card-item
+                            ><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
+                        ></v-card-item>
+                    </v-img>
+                    <v-avatar size="40" class="mt-n7 mx-6">
+                        <img :src="card.avatar" alt="icon" height="40" />
+                    </v-avatar>
+                    <v-card-item class="pt-4">
+                        <v-chip class="text-body-2 font-weight-medium bg-light" size="small" rounded="sm" v-text="card.category"></v-chip>
+                        <h5 class="text-h5 text-13 my-6 custom-text-primary">
+                            <RouterLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</RouterLink>
+                        </h5>
+                        <div class="d-flex align-center justify-space-between">
+                            <div>
+                                <v-avatar class="" size="18">
+                                    <EyeIcon size="18" class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-1 ml-2 textSecondary" v-text="card.view"></span>
+                                <v-avatar class="ml-4" size="18">
+                                    <Message2Icon size="18"  class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-1 ml-2 textSecondary" v-text="card.comments"></span>
+                            </div>
+                            <div>
+                                <v-avatar size="10">
+                                    <CircleIcon size="10" class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-2 ml-2 textSecondary" v-text="card.time"></span>
+                            </div>
+                        </div>
+                    </v-card-item>
+                </div>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/FollowerCards.vue b/components/widgets/cards/FollowerCards.vue
new file mode 100755
index 0000000..b0e9eec
--- /dev/null
+++ b/components/widgets/cards/FollowerCards.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {followerCard} from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row class="pt-3">
+        <v-col cols="12" md="4" v-for="card in followerCard" :key="card.title">
+            <v-card elevation="10"  rounded="md">
+                <v-card-item>
+                    <div class="d-flex align-center">
+                        <v-avatar size="40" >    
+                            <img :src="card.avatar" :alt="card.avatar" width="40"/>
+                        </v-avatar>
+                        <div class="pl-4 mt-n1">
+                            <h5 class="text-h5" v-text="card.title"></h5>
+                            <p class="text-body-1 textSecondary d-flex align-center"><MapPinIcon size="15" class="mr-1"/>{{card.location}}</p>
+                        </div>
+                        <v-btn class="ml-auto" color="primary" flat>Follow</v-btn>
+                    </div>    
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/GiftCards.vue b/components/widgets/cards/GiftCards.vue
new file mode 100755
index 0000000..20f2fae
--- /dev/null
+++ b/components/widgets/cards/GiftCards.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import img1 from '@/assets/images/products/s1.jpg';
+import img2 from '@/assets/images/products/s2.jpg';
+/*import tabler icons*/
+import { GiftIcon } from 'vue-tabler-icons';
+const gift = [
+    {
+        title: 'Andrew Grant',
+        avatar: img1
+    },
+    {
+        title: 'Leo Pratt',
+        avatar: img2
+    }
+];
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="6" v-for="card in gift" :key="card.title">
+            <v-card elevation="10"  rounded="md">
+                <v-card-item>
+                    <div class="d-flex align-center justify-space-between">
+                        <h5 class="text-h6" v-text="card.title"></h5>
+                        <v-btn size="30" icon variant="flat" class="mx-1">
+                            <v-avatar size="25" >
+                                <GiftIcon class="text-secondary" size="20" />
+                            </v-avatar>
+                        </v-btn>
+                    </div>
+                    <v-avatar rounded="lg" class="w-100 mt-2 mb-6" size="160" cla>
+                        <img :src="card.avatar" :alt="card.avatar" class="w-100"/>
+                    </v-avatar>
+                    <v-btn  color="primary" block flat>Gift to Friend ($50.00)</v-btn>
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/MusicCards.vue b/components/widgets/cards/MusicCards.vue
new file mode 100755
index 0000000..1a43c5a
--- /dev/null
+++ b/components/widgets/cards/MusicCards.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {musicCard} from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="4" v-for="card in musicCard" :key="card.title">
+            <v-card elevation="10"  class="overflow-visible">
+                <v-row class="mt-md-0 mt-sm-3 mt-3">
+                    <v-col cols="6" sm="6">
+                        <v-card-item class="pb-3">
+                            <h5 class="text-h5" v-text="card.title"></h5>
+                            <div class="text-body-1 textSecondary mt-1" v-text="card.subheader"></div>
+                            <div class="d-flex align-center justify-center mt-8 ">
+                            <v-btn size="20" icon variant="flat" class="grey100">
+                                <v-avatar size="20">
+                                    <PlayerSkipBackIcon size="15" color="grey100" />
+                                </v-avatar>
+                            </v-btn>
+                            <v-btn size="20" icon variant="flat" class="mx-6 text-error">
+                                <v-avatar size="20">
+                                    <PlayerPlayIcon size="15" class="text-error" />
+                                </v-avatar>
+                            </v-btn>
+                            <v-btn size="20" icon variant="flat" class="grey100">
+                                <v-avatar size="20">
+                                    <PlayerSkipForwardIcon size="15" />
+                                </v-avatar>
+                            </v-btn>
+                        </div>
+                        </v-card-item>
+                        
+                    </v-col>
+                    <v-col cols="6" sm="6" class="py-0 pl-0">
+                        <img :src="card.img"  class="rounded-e-md w-100 h-100 obj-cover"></img>
+                    </v-col>
+                </v-row>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/PaymentGateways.vue b/components/widgets/cards/PaymentGateways.vue
new file mode 100755
index 0000000..9bac3a1
--- /dev/null
+++ b/components/widgets/cards/PaymentGateways.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { paymentGateways } from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <v-card-title class="text-h5">Payment Gateways</v-card-title>
+            <v-card-subtitle class="text-subtitle-1 ">Platform For Income</v-card-subtitle>
+            <div class="mt-sm-10  mt-5">
+                <div class="d-flex gap-3 align-center mt-6" v-for="list in paymentGateways" :key="list.title">
+                    <v-avatar :class="'rounded-md bg-light' + list.bgcolor" size="45">
+                        <img :src="list.img" :alt="list.img" width="25" />
+                    </v-avatar>
+                    <div>
+                        <h5 class="text-h6 mb-1">{{ list.title }}</h5>
+                        <p class="text-subtitle-1 textSecondary">{{ list.subtitle }}</p>
+                    </div>
+                    <div :class="'ml-auto font-weight-semibold text-subtitle-1 text-medium-' + list.disable">{{ list.rank }}</div>
+                </div>
+                <v-btn class="mt-10" block flat color="primary">View all transactions</v-btn>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/cards/ProductCards.vue b/components/widgets/cards/ProductCards.vue
new file mode 100755
index 0000000..3d24a1e
--- /dev/null
+++ b/components/widgets/cards/ProductCards.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { productsCard } from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="3" sm="6" v-for="card in productsCard" :key="card.title">
+            <v-card elevation="10"  rounded="md" class="card-hover overflow-hidden">
+                <RouterLink :to="card.link" >
+                    <v-img :src="card.photo" height="100%" class="rounded-t-md"></v-img>
+                </RouterLink>
+                <div class="d-flex justify-end mr-3 mt-n4">
+                    <v-btn size="30" icon variant="flat" class="bg-primary d-flex">
+                        <v-avatar size="30" class="text-white">
+                            <BasketIcon size="17" />
+                        </v-avatar>
+                        <v-tooltip
+                            activator="parent"
+                            location="bottom"
+                        >Add To Cart
+                        </v-tooltip>
+                    </v-btn>
+                </div>
+                <v-card-item class="pa-6 pt-1">
+                    <h6 class="text-h6" v-text="card.title"></h6>
+                    <div class="d-flex align-center justify-space-between mt-1">
+                        <div>
+                            <span class="text-h6" v-text="'$'+ card.price"></span>
+                            <span class="text-body-1 ml-2 text-medium-emphasis text-decoration-line-through" v-text="'$'+ card.salesPrice"></span>
+                        </div>
+                        <v-rating density="compact" color="warning" size="small" v-model="card.rating" readonly></v-rating>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/ProfileCards.vue b/components/widgets/cards/ProfileCards.vue
new file mode 100755
index 0000000..29509ac
--- /dev/null
+++ b/components/widgets/cards/ProfileCards.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {profileCards, socialiconCard} from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="4" v-for="card in profileCards" :key="card.title">
+            <v-card elevation="10" class=" text-center" rounded="md">
+                <v-card-item>
+                    <v-avatar size="80">    
+                        <img :src="card.avatar" :alt="card.avatar" width="80"/>
+                    </v-avatar>
+                    <div class="mt-4">
+                        <h5 class="text-h5" v-text="card.title"></h5>
+                        <p class="text-body-2 mt-1 textSecondary " v-text="card.subtitle"></p>
+                    </div>
+                </v-card-item>
+                <v-divider class="mt-1"></v-divider>
+                <div class="text-center d-flex justify-center pa-3">
+                    <v-btn size="30" icon variant="flat" v-for="icon in socialiconCard" :key="icon.name">
+                        <v-avatar size="22">
+                           <component :is="icon.icon" :class="'text-'+ icon.color" stroke-width="2" size="18" />
+                        </v-avatar>
+                    </v-btn>
+                </div>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/cards/Settings.vue b/components/widgets/cards/Settings.vue
new file mode 100755
index 0000000..a273e98
--- /dev/null
+++ b/components/widgets/cards/Settings.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*import tabler icons*/
+import { VolumeIcon,MessageIcon } from 'vue-tabler-icons';
+const slider = ref(50);
+const model = ref(false);
+</script>
+<template>
+    <v-card elevation="10"  rounded="md">
+        <v-card-item>
+            <v-card-title class="text-h5">Settings</v-card-title>
+            <div class="d-flex mt-5">
+                <v-avatar class="rounded-md bg-primary" size="48">
+                    <VolumeIcon size="22" />
+                </v-avatar>
+                <div class="pl-4 w-100">
+                    <div class="d-flex align-center justify-space-between">
+                        <h6 class="text-h6">Sound</h6>
+                        <p class="text-subtitle-1 textSecondary">45%</p>
+                    </div>    
+                    <v-slider v-model="slider" hide-details class="ml-0" color="primary"></v-slider>
+                </div>
+            </div>
+            <v-divider class="mt-4"></v-divider>
+            <div class="d-flex mt-4">
+                <v-avatar class="rounded-md bg-secondary" size="48">
+                    <MessageIcon size="22" class="text-surface"/>
+                </v-avatar>
+                <div class="pl-4 w-100 d-flex align-center">
+                    <div class="">
+                        <h6 class="text-h6 mb-1">Chat</h6>
+                        <p class="text-subtitle-1 textSecondary">Turn on chat during call</p>
+                    </div>  
+                    <div class="ml-auto">  
+                        <v-switch v-model="model"  hide-details color="primary" inset ></v-switch>
+                    </div>    
+                </div>
+            </div>
+            <v-divider class="mt-4"></v-divider>
+            <div class="d-flex justify-end mt-4 gap-3">
+                <v-btn  color="error" variant="tonal">Cancel</v-btn>
+                <v-btn  color="primary">save</v-btn>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/cards/UpcommingActivityCard.vue b/components/widgets/cards/UpcommingActivityCard.vue
new file mode 100755
index 0000000..d920edb
--- /dev/null
+++ b/components/widgets/cards/UpcommingActivityCard.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {upcommingCards} from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item class="pb-sm-8 pb-6">
+            <v-card-title class="text-h5">Upcoming Activity</v-card-title>
+            <v-card-subtitle class="text-subtitle-1 ">In New year</v-card-subtitle>
+            <div class="">
+                <div class="d-flex align-center mt-6" v-for="list in upcommingCards" :key="list.title">
+                    <v-avatar :class="'rounded-md bg-light'+ list.bgcolor"  size="45">    
+                        <component :is="list.icon" :class="'text-'+ list.bgcolor" stroke-width="2" size="20" />
+                    </v-avatar>
+                    <div class="pl-4 ">
+                        <h5 class="text-h6 mb-1" v-text="list.title"></h5>
+                        <p class="text-subtitle-1 textSecondary" v-text="list.subtitle"></p>
+                    </div>
+                    <div class="ml-auto font-weight-medium text-subtitle-1 textSecondary" v-text="list.rank"></div>
+                </div>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/cards/UserCards.vue b/components/widgets/cards/UserCards.vue
new file mode 100755
index 0000000..2010653
--- /dev/null
+++ b/components/widgets/cards/UserCards.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { userCards } from '@/_mockApis/components/widget/card';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="3" sm="6" v-for="card in userCards" :key="card.title">
+            <v-card elevation="10"  rounded="md">
+                <v-card-item>
+                    <v-avatar size="80" >    
+                        <img :src="card.avatar" :alt="card.avatar" width="80"/>
+                    </v-avatar>
+                    <div class="mt-6">
+                        <h5 class="text-h5 mb-2" v-text="card.title"></h5>
+                        <div class="d-flex align-center justify-space-between">
+                            <div class="ml-2 d-flex ">
+                                <v-avatar size="32" class="ml-n2 avtar-border" v-for="user in card.userGroup" :key="user.icon">
+                                    <img :src="user.icon" alt="avatar" height="32"/>
+                                </v-avatar>
+                            </div>
+                            <p class="text-subtitle-1 textSecondary">{{card.subtitle}}</p>
+                        </div>    
+                    </div>
+                    <div class="mt-6">
+                        <v-btn color="primary" variant="tonal"  block >Add friend</v-btn>
+                        <v-btn color="secondary" variant="tonal" class="mt-3" block >Remove</v-btn>
+                    </div>    
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
diff --git a/components/widgets/charts/CurrentValue.vue b/components/widgets/charts/CurrentValue.vue
new file mode 100755
index 0000000..50ed435
--- /dev/null
+++ b/components/widgets/charts/CurrentValue.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+/* Chart Color */
+const theme = useTheme();
+const primary = theme.current.value.colors.primary;
+const lightprimary = theme.current.value.colors.lightprimary;
+const secondary = theme.current.value.colors.secondary;
+/* Chart 1 */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'bar',
+            height: 200,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            stacked: true,
+            sparkline: {
+                enabled: true
+            }
+        },
+        colors: [primary, primary],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                barHeight: '60%',
+                columnWidth: '20%',
+                borderRadius: [6],
+                borderRadiusApplication: 'end',
+                borderRadiusWhenStacked: 'all'
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        yaxis: {
+            min: -5,
+            max: 5,
+            tickAmount: 4
+        },
+        xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+            axisTicks: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'light'
+        }
+    };
+});
+const Chart = [
+    {
+        name: '',
+        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
+    },
+    {
+        name: '',
+        data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
+    }
+];
+
+/* Chart 2 */
+const chartOptions2 = computed(() => {
+    return {
+        chart: {
+            type: 'bar',
+            height: 200,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            stacked: true,
+            sparkline: {
+                enabled: true
+            }
+        },
+        colors: [secondary, secondary],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                barHeight: '60%',
+                columnWidth: '20%',
+                borderRadius: [6],
+                borderRadiusApplication: 'end',
+                borderRadiusWhenStacked: 'all'
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        yaxis: {
+            min: -5,
+            max: 5,
+            tickAmount: 4
+        },
+        xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+            axisTicks: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'light'
+        }
+    };
+});
+const Chart2 = [
+    {
+        name: '',
+        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
+    },
+    {
+        name: '',
+        data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
+    }
+];
+
+/* Chart 3 */
+const chartOptions3 = computed(() => {
+    return {
+        chart: {
+            type: 'donut',
+            height: 180,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            stacked: true,
+            sparkline: {
+                enabled: true
+            }
+        },
+        labels: ['Income', 'Current', 'Expance'],
+        colors: [primary, 'rgba(var(--v-theme-light))', secondary],
+        plotOptions: {
+            pie: {
+                startAngle: 0,
+                endAngle: 360,
+                donut: {
+                    size: '89%',
+                    background: 'transparent',
+
+                    labels: {
+                        show: true,
+                        name: {
+                            show: true,
+                            offsetY: 7
+                        },
+                        value: {
+                            show: false
+                        },
+                        total: {
+                            show: true,
+                            fontSize: '20px',
+                            fontWeight: '600',
+                            label: '$98,260'
+                        }
+                    }
+                }
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            show: false
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            theme: 'dark',
+            fillSeriesColor: false,
+        }
+    };
+});
+const Chart3 = [55,55,55];
+
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-flex align-center justify-space-between">
+                <v-card-title class="text-h5">Current Value</v-card-title>
+                <div class="">
+                    <v-btn color="primary" flat>buy</v-btn>
+                    <v-btn color="primary" variant="outlined" flat class="ml-2">sell</v-btn>
+                </div>
+            </div>
+            <v-row class="mt-4 mb-1">
+                <!--Income Chart-->
+                <v-col cols="12" sm="4">
+                    <v-card variant="outlined" >
+                        <v-card-item>
+                            <apexchart type="bar" height="200" :options="chartOptions" :series="Chart"> </apexchart>
+                            <v-card-subtitle class="text-subtitle-1">Income</v-card-subtitle>
+                            <div class="d-flex align-center justify-space-between mt-1">
+                                <h4 class="text-h4">$25,260</h4>
+                                <p class="text-body-1 text-success">+1.25%</p>
+                            </div>
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+                <!--Expence Chart-->
+                <v-col cols="12" sm="4">
+                    <v-card variant="outlined" >
+                        <v-card-item>
+                            <apexchart type="bar" height="200" :options="chartOptions2" :series="Chart2"> </apexchart>
+                            <v-card-subtitle class="text-subtitle-1">Expance</v-card-subtitle>
+                            <div class="d-flex align-center justify-space-between mt-1">
+                                <h4 class="text-h4">$12,260</h4>
+                                <p class="text-body-1 text-success">+4.25%</p>
+                            </div>
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+                <!--Current Year Chart-->
+                <v-col cols="12" sm="4">
+                    <v-card variant="outlined" >
+                        <v-card-item>
+                            <apexchart class="mb-5" type="donut" height="180" :options="chartOptions3" :series="Chart3"> </apexchart>
+                            <v-card-subtitle class="text-subtitle-1">Current Year</v-card-subtitle>
+                            <div class="d-flex align-center justify-space-between mt-1">
+                                <h4 class="text-h4">$98,260</h4>
+                                <p class="text-subtitle-1 text-success">+2.5%</p>
+                            </div>
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/Customer.vue b/components/widgets/charts/Customer.vue
new file mode 100755
index 0000000..93bdab8
--- /dev/null
+++ b/components/widgets/charts/Customer.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getSecondary } from '@/utils/UpdateColors';
+
+/*Chart*/
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'area',
+            height: 80,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            sparkline: {
+                enabled: true
+            },
+            group: 'sparklines'
+        },
+        colors: [getSecondary.value],
+        stroke: {
+            curve: 'smooth',
+            width: 2
+        },
+        fill: {
+            type: 'solid',
+            opacity: 0.05
+        },
+        markers: {
+            size: 0
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                show: false
+            }
+        }
+    };
+});
+const Chart = [
+    {
+        name: '',
+        data: [30, 25, 35, 20, 30, 40]
+    }
+];
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <p class="text-subtitle-1 textSecondary">Customers</p>
+            <h4 class="text-h4 my-2">36,358</h4>
+            <div>
+                <v-avatar class="bg-lighterror" size="20">
+                    <ArrowDownRightIcon size="15" class="text-error" />
+                </v-avatar>
+                <span class="text-body-1 ml-2 textSecondary">+9%</span>
+            </div>
+        </v-card-item>
+        <apexchart class="" type="area" height="80" :options="chartOptions" :series="Chart"> </apexchart>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/Earned.vue b/components/widgets/charts/Earned.vue
new file mode 100755
index 0000000..3342ad9
--- /dev/null
+++ b/components/widgets/charts/Earned.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const primary = theme.current.value.colors.primary;
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'area',
+            height: 90,
+            fontFamily: `inherit`,
+            foreColor: '#adb0bb',
+            sparkline: {
+                enabled: true
+            }
+        },
+        colors: [primary],
+        stroke: {
+            curve: 'smooth',
+            width: 2
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false
+        },
+        xaxis: {
+            axisBorder: {
+                show: true
+            },
+            axisTicks: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'light'
+        }
+    };
+});
+const Chart = {
+    series: [
+        {
+            name: '',
+            data: [0, 3, 1, 2, 8, 1, 5, 1]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-flex justify-space-between align-end">
+                <div>
+                    <v-card-title class="text-h5">2,545 </v-card-title>
+                    <v-card-subtitle class="text-subtitle-1 pb-0">Earned</v-card-subtitle>
+                </div>
+                <p class="text-subtitle-1 text-success">+1.20%</p>    
+            </div>
+        </v-card-item>
+        <apexchart class="mt-3" type="area" height="90" :options="chartOptions" :series="Chart.series"> </apexchart>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/Followers.vue b/components/widgets/charts/Followers.vue
new file mode 100755
index 0000000..5bc8403
--- /dev/null
+++ b/components/widgets/charts/Followers.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const primary = theme.current.value.colors.primary;
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'area',
+            fontFamily: `inherit`,
+            foreColor: '#adb0bb',
+            toolbar: {
+                show: false
+            },
+            sparkline: {
+                enabled: true
+            },
+            group: 'sparklines'
+        },
+        colors: [primary],
+        stroke: {
+           curve: 'smooth',
+           width: 2
+        },
+         tooltip: {
+            theme: 'dark',
+            x: {
+                format: 'dd/MM/yy HH:mm'
+            }
+        }
+    };
+});
+
+const Chart = {
+    series: [
+        {
+            name:'',
+            data: [0, 150, 110, 240, 200, 200, 300, 200],
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10" class="overflow-hidden">
+        <v-card-item>
+            <div class="d-flex justify-space-between align-end">
+                <div>
+                    <v-card-title class="text-h5">2,545</v-card-title>
+                    <v-card-subtitle class="text-subtitle-1 pb-0">Followers</v-card-subtitle>
+                </div>
+                <p class="text-subtitle-1 text-success">+1.20%</p>    
+            </div>
+        </v-card-item>
+        <apexchart class="mt-4" type="area" height="88" :options="chartOptions" :series="Chart.series"> </apexchart>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/MonthlyEarnings.vue b/components/widgets/charts/MonthlyEarnings.vue
new file mode 100755
index 0000000..ee0ebd9
--- /dev/null
+++ b/components/widgets/charts/MonthlyEarnings.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getPrimary } from '@/utils/UpdateColors';
+
+/* Chart */
+const areachartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'area',
+            height: 80,
+            fontFamily: `inherit`,
+            foreColor: '#a1aab2',
+            toolbar: {
+                show: false
+            },
+            sparkline: {
+                enabled: true
+            },
+            group: 'sparklines'
+        },
+        colors: [getPrimary.value],
+        stroke: {
+            curve: 'smooth',
+            width: 2
+        },
+        fill: {
+            type: 'gradient',
+            color: [getPrimary.value],
+            gradient: {
+                shadeIntensity: 0,
+                inverseColors: false,
+                opacityFrom: 0.3,
+                opacityTo: 0.5,
+                stops: [100]
+            }
+        },
+        markers: {
+            size: 0
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                show: false
+            }
+        }
+    };
+});
+
+const areaChart = {
+    series: [
+        {
+            name: '',
+            data: [25, 66, 20, 40, 12, 58, 20]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item class="">
+            <div class="d-flex align-center justify-space-between">
+                <v-card-title class="text-h5">Monthly Earnings</v-card-title>
+                <v-avatar class="rounded-md bg-lightprimary text-primary">
+                    <img src="@/assets/images/svgs/icon-master-card-2.svg" alt="ico" />
+                </v-avatar>
+            </div>
+            <div class="mb-8 d-flex align-center mt-5">
+                <h3 class="text-h3 font-weight-bold">$6,820</h3>
+                <div class="d-flex align-center">
+                    <v-avatar class="bg-lightsuccess text-success ml-2" size="20">
+                        <ArrowUpLeftIcon size="18" />
+                    </v-avatar>
+                    <span class="text-subtitle-1 ml-2 textSecondary">+9%</span>
+                </div>
+            </div>
+        </v-card-item>
+        <div class="pt-2">
+            <apexchart type="area" height="80" :options="areachartOptions" :series="areaChart.series"> </apexchart>
+        </div>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/MostVisited.vue b/components/widgets/charts/MostVisited.vue
new file mode 100755
index 0000000..b5458ad
--- /dev/null
+++ b/components/widgets/charts/MostVisited.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const select = ref('March 2022');
+const items = ref(['March 2022', 'April 2022', 'May 2022']);
+const theme = useTheme();
+const primary = theme.current.value.colors.primary;
+const secondary = theme.current.value.colors.secondary;
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            height: 265,
+            type: 'bar',
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb',
+            toolbar: {
+                show: false
+            },
+            stacked: true
+        },
+        colors: [primary, secondary],
+        plotOptions: {
+            bar: {
+                borderRadius: [6],
+                horizontal: false,
+                barHeight: '60%',
+                columnWidth: '40%',
+                borderRadiusApplication: 'end',
+                borderRadiusWhenStacked: 'all'
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        yaxis: {
+            tickAmount: 4
+        },
+        xaxis: {
+            categories: ['01', '02', '03', '04', '05', '06'],
+            axisTicks: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'dark',
+            fillSeriesColor: false,
+            x: {
+                show: false
+            }
+        }
+    };
+});
+const Chart = [
+    {
+        name: 'San Francisco',
+        data: [44, 55, 41, 67, 22, 43]
+    },
+    {
+        name: 'Diego',
+        data: [13, 23, 20, 8, 13, 27]
+    }
+];
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <div class="d-sm-flex align-center justify-space-between">
+                <v-card-title class="text-h5 mb-0">Most Visited</v-card-title>
+                <div class="my-sm-0 my-2">
+                    <v-select
+                        v-model="select"
+                        :items="items"
+                        class="text-body-1"
+                        variant="outlined"
+                        density="compact"
+                        hide-details
+                    ></v-select>
+                </div>
+            </div>
+            <div class="mx-n3 mt-5">
+                <apexchart type="bar" height="265" class="rounded-bars" :options="chartOptions" :series="Chart"> </apexchart>      
+            </div>
+           
+            <div class="d-flex align-center pb-1 justify-center">
+                <p class="text-body-1 textSecondary d-flex align-center">
+                    <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> San Francisco
+                </p>
+                <p class="text-body-1 textSecondary pl-5 d-flex align-center">
+                    <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Diego
+                </p>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/PageImpression.vue b/components/widgets/charts/PageImpression.vue
new file mode 100755
index 0000000..d370b83
--- /dev/null
+++ b/components/widgets/charts/PageImpression.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+import { ArrowDownRightIcon } from 'vue-tabler-icons';
+const theme = useTheme();
+const secondary = theme.current.value.colors.secondary;
+const lightsecondary = theme.current.value.colors.lightsecondary;
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            toolbar: {
+                show: false
+            },
+            height: 100,
+            type: 'bar',
+            sparkline: {
+                enabled: true
+            },
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb'
+        },
+        colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary],
+
+        plotOptions: {
+            bar: {
+                borderRadius: 3,
+                columnWidth: '64%',
+                distributed: true,
+                endingShape: 'rounded'
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        xaxis: {
+            labels: {
+                show: false
+            },
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            }
+        },
+        yaxis: {
+            labels: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'dark'
+        }
+    };
+});
+const Chart = {
+    series: [
+        {
+            name: '',
+            data: [20, 15, 30, 25, 10]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <v-card-title class="text-h5">Page Impressions</v-card-title>
+            <v-row>
+                <v-col cols="5">
+                    <h4 class="text-h4 mt-6">$456,120</h4>
+                    <p class="text-12 textSecondary">(Change Yesterday)</p>
+                    <div class="pt-2">
+                        <v-avatar class="bg-lighterror" size="20">
+                            <ArrowDownRightIcon size="15" class="text-error" />
+                        </v-avatar>
+                        <span class="text-body-1 ms-2 textSecondary">+9%</span>
+                    </div>
+                </v-col>
+                <v-col cols="7">
+                    <apexchart class="" type="bar" height="100" :options="chartOptions" :series="Chart.series"> </apexchart>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/Projects.vue b/components/widgets/charts/Projects.vue
new file mode 100755
index 0000000..17131b0
--- /dev/null
+++ b/components/widgets/charts/Projects.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getPrimary, getSecondary } from '@/utils/UpdateColors';
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            toolbar: {
+                show: false
+            },
+            height: 80,
+            type: 'bar',
+            sparkline: {
+                enabled: true
+            },
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb'
+        },
+        colors: [getPrimary.value],
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 3,
+                columnWidth: '40%',
+                distributed: true,
+                endingShape: 'all',
+                borderRadiusApplication: 'end'
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            show: true,
+            width: 2.5,
+            colors: ['rgba(0,0,0,0.01)']
+        },
+        xaxis: {
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            },
+            labels: {
+                show: false
+            }
+        },
+        yaxis: {
+            labels: {
+                show: false
+            }
+        },
+        axisBorder: {
+            show: false
+        },
+        fill: {
+            opacity: 1
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                show: false
+            }
+        }
+    };
+});
+const Chart = [
+    {
+        name: '',
+        data: [4, 10, 9, 7, 9, 10]
+    }
+];
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <p class="text-subtitle-1 textSecondary">Projects</p>
+            <h4 class="text-h4 my-1">78,298</h4>
+            <div>
+                <v-avatar class="bg-lightsuccess" size="20">
+                    <ArrowUpLeftIcon size="15" class="text-success" />
+                </v-avatar>
+                <span class="text-body-1 ms-2 textSecondary">+9%</span>
+            </div>
+            <apexchart class="" type="bar" height="80" :options="chartOptions" :series="Chart"> </apexchart>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/RevenueUpdates.vue b/components/widgets/charts/RevenueUpdates.vue
new file mode 100755
index 0000000..62c7e98
--- /dev/null
+++ b/components/widgets/charts/RevenueUpdates.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { getPrimary, getSecondary } from '@/utils/UpdateColors';
+
+const select = ref('March 2022');
+const items = ref(['March 2022', 'April 2022', 'May 2022']);
+
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            height: 320,
+            type: 'bar',
+            fontFamily: `inherit`,
+            foreColor: '#adb0bb',
+            toolbar: {
+                show: false
+            },
+            stacked: true
+        },
+        colors: [getPrimary.value, getSecondary.value],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                barHeight: '60%',
+                columnWidth: '20%',
+                borderRadius: [6],
+                borderRadiusApplication: 'end',
+                borderRadiusWhenStacked: 'all'
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false
+        },
+        yaxis: {
+            min: -5,
+            max: 5,
+            tickAmount: 4
+        },
+        xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            axisTicks: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                format: 'dd/MM/yy HH:mm'
+            }
+        }
+    };
+});
+const seriescolumnchart = [
+    {
+        name: '',
+        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
+    },
+    {
+        name: '',
+        data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8]
+    }
+];
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <v-card-title class="text-h5">Revenue Updates</v-card-title>
+            <v-card-subtitle class="text-subtitle-1 textSecondary">Overview of Profit</v-card-subtitle>
+            <div class="d-flex align-center mt-6">
+                <p class="text-body-1 textSecondary d-flex align-center">
+                    <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="primary"></v-icon> Footware
+                </p>
+                <p class="text-body-1 textSecondary pl-5 d-flex align-center">
+                    <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-2" size="10" color="secondary"></v-icon> Fashionware
+                </p>
+            </div>
+            <div class="mx-n4">
+                <apexchart class="pt-1 revenuechart" type="bar" height="320" :options="chartOptions" :series="seriescolumnchart">
+                </apexchart>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
+
+<style type="text/css">
+.revenuechart .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
+    clip-path: inset(0 0 5% 0 round 20px);
+}
+</style>
diff --git a/components/widgets/charts/SalesOverview.vue b/components/widgets/charts/SalesOverview.vue
new file mode 100755
index 0000000..65da14a
--- /dev/null
+++ b/components/widgets/charts/SalesOverview.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getPrimary, getSecondary, getLightPrimary } from '@/utils/UpdateColors';
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        labels: ['Profit', 'Revenue', 'Expance'],
+        chart: {
+            height: 240,
+            type: 'donut',
+            foreColor: '#adb0bb',
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            }
+        },
+        colors: [getPrimary.value, getLightPrimary.value, getSecondary.value],
+        plotOptions: {
+            pie: {
+                donut: {
+                    size: '89%',
+                    background: 'transparent',
+
+                    labels: {
+                        show: true,
+                        name: {
+                            show: true,
+                            offsetY: 7
+                        },
+                        value: {
+                            show: false
+                        },
+                        total: {
+                            show: true,
+                            fontSize: '20px',
+                            fontWeight: '600',
+                            label: '$500,458'
+                        }
+                    }
+                }
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            show: false
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            theme: 'dark',
+            fillSeriesColor: false,
+            x: {
+                format: 'dd/MM/yy HH:mm'
+            }
+        }
+    };
+});
+const seriescolumnchart = [55, 55, 55];
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <v-card-title class="text-h5">Sales Overview</v-card-title>
+            <v-card-subtitle class="text-subtitle-1 textSecondary">Every month</v-card-subtitle>
+            <apexchart class="mt-6" type="donut" height="240" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
+            <v-row class="mt-5">
+                <v-col cols="6">
+                    <div class="d-flex align-center gap-2">
+                        <v-avatar class="rounded-md bg-lightprimary text-primary">
+                            <GridDotsIcon size="22" />
+                        </v-avatar>
+                        <div>
+                            <h3 class="text-h6">$23,450</h3>
+                            <p class="text-body-1 textSecondary">Profit</p>
+                        </div>
+                    </div>
+                </v-col>
+                <v-col cols="6" class="d-flex justify-lg-start justify-end">
+                    <div class="d-flex align-center gap-2">
+                        <v-avatar class="rounded-md bg-lightsecondary text-secondary">
+                            <GridDotsIcon size="22" />
+                        </v-avatar>
+                        <div>
+                            <h3 class="text-h6">$23,450</h3>
+                            <p class="text-body-1 textSecondary">Expance</p>
+                        </div>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/TotalEarning.vue b/components/widgets/charts/TotalEarning.vue
new file mode 100755
index 0000000..a617216
--- /dev/null
+++ b/components/widgets/charts/TotalEarning.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const secondary = theme.current.value.colors.secondary;
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'bar',
+            height: 55,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            sparkline: {
+                enabled: true
+            }
+        },
+        colors: [secondary],
+        grid: {
+            show: false
+        },
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                columnWidth: '60%',
+                barHeight: '18%',
+                borderRadius: 3
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            show: true,
+            width: 2.5,
+            colors: ['rgba(0,0,0,0.01)']
+        },
+        xaxis: {
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            },
+            labels: {
+                show: false
+            }
+        },
+        yaxis: {
+            labels: {
+                show: false
+            }
+        },
+        axisBorder: {
+            show: false
+        },
+        fill: {
+            opacity: 1
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                show: false
+            }
+        }
+    };
+});
+const seriescolumnchart = [
+    {
+        name: 'projects',
+        data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 12, 9]
+    }
+];
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <v-card-subtitle class="text-subtitle-1">Total Earning</v-card-subtitle>
+            <v-card-title class="text-h5">$78,298</v-card-title>
+             <div class="mx-n1">
+              <apexchart class="mt-sm-13 mt-10" type="bar" height="55" :options="chartOptions" :series="seriescolumnchart"> </apexchart>
+             </div>     
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/Views.vue b/components/widgets/charts/Views.vue
new file mode 100755
index 0000000..1ca1a8c
--- /dev/null
+++ b/components/widgets/charts/Views.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const secondary = theme.current.value.colors.secondary;
+const lightsecondary = theme.current.value.colors.lightsecondary;
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'bar',
+            height: 80,
+            fontFamily: `inherit`,
+            sparkline: {
+                enabled: true
+            }
+        },
+        colors: [lightsecondary, lightsecondary, secondary, lightsecondary, lightsecondary, lightsecondary],
+
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                columnWidth: '50%',
+                distributed: true,
+                endingShape: 'rounded'
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        xaxis: {
+            categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+            labels: {
+                show: false
+            },
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            }
+        },
+        yaxis: {
+            labels: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'dark'
+        }
+    };
+});
+const Chart = {
+    series: [
+        {
+            name: '',
+            data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-flex justify-space-between align-end">
+                <div>
+                    <v-card-title class="text-h5">15,480</v-card-title>
+                    <v-card-subtitle class="text-subtitle-1 pb-0">Views</v-card-subtitle>
+                </div>
+                <p class="text-subtitle-1 text-error">-4.150%</p>    
+            </div>
+            <div class="mx-n1">
+                <apexchart class="mt-6" type="bar" height="80" :options="chartOptions" :series="Chart.series"> </apexchart>
+            </div>
+           
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/components/widgets/charts/YearlyBreakup.vue b/components/widgets/charts/YearlyBreakup.vue
new file mode 100755
index 0000000..b16e513
--- /dev/null
+++ b/components/widgets/charts/YearlyBreakup.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
+
+/ Chart /
+const chartOptions = computed(() => {
+    return {
+        labels: ['', '', ''],
+        chart: {
+            type: 'donut',
+            height: 150,
+            fontFamily: `inherit`,
+            foreColor: '#a1aab2',
+            toolbar: {
+                show: false
+            }
+        },
+        colors: [getPrimary.value, 'rgba(var(--v-theme-light))', '#F9F9FD'],
+        plotOptions: {
+            pie: {
+                startAngle: 0,
+                endAngle: 360,
+                donut: {
+                    size: '75%',
+                    background: 'transparent'
+                }
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            enabled: false
+        },
+        responsive: [
+            {
+                breakpoint: 991,
+                options: {
+                    chart: {
+                        height: 140
+                    }
+                }
+            },
+            {
+                breakpoint: 600,
+                options: {
+                    chart: {
+                        height: 130
+                    }
+                }
+            }
+        ]
+    };
+});
+const Chart = [38, 40, 25];
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-sm-flex align-center justify-space-between">
+                <v-card-title class="text-h5">Yearly Breakup</v-card-title>
+            </div>
+            <v-row>
+                <v-col cols="7" sm="7">
+                    <div class="mt-3">
+                        <h3 class="text-h3">$36,358</h3>
+                        <div class="mt-2 d-flex gap-2 align-center">
+                            <v-avatar class="bg-lightsuccess text-success" size="25">
+                                <ArrowUpLeftIcon size="20" />
+                            </v-avatar>
+                            <span class="text-body-1">+9%</span>
+                            <span class="text-body-1 textSecondary ">last year</span>
+                        </div>
+                        <div class="d-flex align-center mt-sm-10 mt-8">
+                            <p class="text-body-1 textSecondary">
+                                <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="primary"></v-icon> 2023
+                            </p>
+                            <p class="text-body-1 textSecondary pl-5">
+                                <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="light    "></v-icon> 2024
+                            </p>
+                        </div>
+                    </div>
+                </v-col>
+                <v-col cols="5" sm="5">
+                    <div class="d-flex align-center flex-shrink-0">
+                        <apexchart class="pt-6" type="donut" height="150" :options="chartOptions" :series="Chart"> </apexchart>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>
\ No newline at end of file
diff --git a/components/widgets/charts/YearlySales.vue b/components/widgets/charts/YearlySales.vue
new file mode 100755
index 0000000..2f7342e
--- /dev/null
+++ b/components/widgets/charts/YearlySales.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getPrimary, getLight100, getLightPrimary } from '@/utils/UpdateColors';
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            height: 310,
+            type: 'bar',
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb',
+            toolbar: {
+                show: false
+            }
+        },
+        colors: [
+            getLightPrimary.value,
+            getLightPrimary.value,
+            getPrimary.value,
+            getLightPrimary.value,
+            getLightPrimary.value,
+            getLightPrimary.value,
+            getLightPrimary.value,
+            ,
+            getLightPrimary.value,
+            ,
+            getLightPrimary.value,
+            getLightPrimary.value
+        ],
+        plotOptions: {
+            bar: {
+                borderRadius: 3,
+                columnWidth: '53%',
+                distributed: true,
+                endingShape: 'rounded'
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            yaxis: {
+                lines: {
+                    show: false
+                }
+            },
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            }
+        },
+        xaxis: {
+            categories: [['Apr'], ['May'], ['June'], ['July'], ['Aug'], ['Sept'], ['Oct']],
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            }
+        },
+        yaxis: {
+            labels: {
+                show: false
+            }
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                format: 'dd/MM/yy HH:mm'
+            }
+        }
+    };
+});
+const Chart = {
+    series: [
+        {
+            name: '',
+            data: [20, 15, 30, 25, 10, 15, 12]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <v-card-title class="text-h5">Yearly Sales</v-card-title>
+            <v-card-subtitle class="text-subtitle-1 textSecondary">Total Sales</v-card-subtitle>
+            <div class="mx-n2">
+                <apexchart type="bar" height="310" :options="chartOptions" :series="Chart.series"> </apexchart>
+            </div>
+            <v-row class="mt-1">
+                <v-col cols="6">
+                    <div class="d-flex align-center gap-2">
+                        <v-avatar class="rounded-md bg-lightprimary text-primary">
+                            <GridDotsIcon size="22" />
+                        </v-avatar>
+                        <div>
+                            <p class="text-body-1 textSecondary">Salary</p>
+                            <h3 class="text-h6">$36,358</h3>
+                        </div>
+                    </div>
+                </v-col>
+                <v-col cols="6" class="d-flex justify-end">
+                    <div class="d-flex align-center gap-2">
+                        <v-avatar class="rounded-md bg-grey100 textSecondary">
+                            <GridDotsIcon size="22" class="text-medium-emphasis" />
+                        </v-avatar>
+                        <div>
+                            <p class="text-body-1 textSecondary">Expance</p>
+                            <h3 class="text-h6">$5,296</h3>
+                        </div>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>