From ccaf4c9fb38335cd16066c9648add1dbc1a276be Mon Sep 17 00:00:00 2001
From: "dwi.firman" <dwi.firman@rssa.id>
Date: Wed, 9 Jul 2025 14:30:47 +0700
Subject: [PATCH] add ddocker file dan beberapa page componen untuk templating

---
 .idea/workspace.xml                           | 557 ++++++++++++
 Dockerfile                                    |  24 +
 .../typography/DefaultText.vue                |  25 -
 .../style-components/typography/Heading.vue   |  49 --
 docker-compose.yml                            |  19 +
 .editorconfig => src/.editorconfig            |   0
 .env.example => src/.env.example              |   0
 .gitignore => src/.gitignore                  |   0
 {.idea => src/.idea}/.gitignore               |   0
 src/.idea/full-matdash-nuxt-stim.iml          |  12 +
 src/.idea/modules.xml                         |   8 +
 src/.idea/vcs.xml                             |   6 +
 .npmrc => src/.npmrc                          |   0
 README.md => src/README.md                    |   0
 .../_mockApis}/apps/blog/index.ts             |   0
 .../_mockApis}/apps/chat/index.ts             |   0
 .../_mockApis}/apps/contact/index.ts          |   0
 .../_mockApis}/apps/ecommerce/Editproduc.ts   |   0
 .../apps/ecommerce/billing-address.ts         |   0
 .../_mockApis}/apps/ecommerce/index.ts        |   0
 .../_mockApis}/apps/ecommerce/products.ts     |   0
 .../_mockApis}/apps/email/index.ts            |   0
 .../_mockApis}/apps/invoice/index.ts          |   0
 .../_mockApis}/apps/kanban/index.ts           |   0
 .../_mockApis}/apps/notes/index.ts            |   0
 .../_mockApis}/apps/tickets/index.ts          |   0
 .../_mockApis}/apps/userprofile/followers.ts  |   0
 .../_mockApis}/apps/userprofile/friends.ts    |   0
 .../_mockApis}/apps/userprofile/gallery.ts    |   0
 .../_mockApis}/apps/userprofile/photos.ts     |   0
 .../_mockApis}/apps/userprofile/posts.ts      |   0
 .../components/dashboard/dashboard1.ts        |   0
 .../components/dashboard/dashboard2.ts        |   0
 .../components/dashboard/dashboard3.ts        |   0
 .../components/datatable/dataTable.ts         |   0
 .../components/pages/accountNotification.ts   |   0
 .../_mockApis}/components/pages/auth.ts       |   0
 .../_mockApis}/components/pages/faqData.ts    |   0
 .../components/pages/pricingData.ts           |   0
 .../components/pages/searchLinks.ts           |   0
 .../components/table/basicTables.ts           |   0
 .../_mockApis}/components/widget/card.ts      |   0
 .../_mockApis}/front-pages/PagesData.ts       |   0
 {_mockApis => src/_mockApis}/headerData.ts    |   0
 {_mockApis => src/_mockApis}/index.ts         |   0
 .../_mockApis}/landingpage/curoselData.ts     |   0
 .../_mockApis}/landingpage/lpPage.ts          |   0
 {_mockApis => src/_mockApis}/mockAdapter.ts   |   0
 app.vue => src/app.vue                        |   0
 .../assets}/images/backgrounds/active-bg.png  | Bin
 .../assets}/images/backgrounds/blog.jpg       | Bin
 .../assets}/images/backgrounds/bronze.png     | Bin
 .../business-woman-checking-her-mail.png      | Bin
 .../assets}/images/backgrounds/empty_mail.png | Bin
 .../assets}/images/backgrounds/errorimg.svg   |   0
 .../assets}/images/backgrounds/gold.png       | Bin
 .../assets}/images/backgrounds/img1.jpg       | Bin
 .../images/backgrounds/kanban-img-1.jpg       | Bin
 .../images/backgrounds/kanban-img-2.jpg       | Bin
 .../images/backgrounds/kanban-img-3.jpg       | Bin
 .../images/backgrounds/kanban-img-4.jpg       | Bin
 .../assets}/images/backgrounds/line-bg-2.svg  |   0
 .../assets}/images/backgrounds/line-bg.svg    |   0
 .../assets}/images/backgrounds/login-bg.jpg   | Bin
 .../assets}/images/backgrounds/login-bg.svg   |   0
 .../assets}/images/backgrounds/login-side.png | Bin
 .../images/backgrounds/maintenance.svg        |   0
 .../assets}/images/backgrounds/mega-dd-bg.jpg | Bin
 .../assets}/images/backgrounds/my-card.jpg    | Bin
 .../assets}/images/backgrounds/nyan-cat.gif   | Bin
 .../assets}/images/backgrounds/payment.svg    |   0
 .../images/backgrounds/preview-img.png        | Bin
 .../assets}/images/backgrounds/profile-bg.jpg | Bin
 .../assets}/images/backgrounds/profilebg.jpg  | Bin
 .../assets}/images/backgrounds/silver.png     | Bin
 .../assets}/images/backgrounds/track-bg.png   | Bin
 .../images/backgrounds/unauthorization.svg    |   0
 .../assets}/images/backgrounds/weather.jpg    | Bin
 .../assets}/images/backgrounds/weatherbg.jpg  | Bin
 .../website-under-construction.svg            |   0
 .../assets}/images/backgrounds/welcome-bg.png | Bin
 .../images/backgrounds/welcome-bg2.png        | Bin
 .../assets}/images/blog/blog-img1.jpg         | Bin
 .../assets}/images/blog/blog-img10.jpg        | Bin
 .../assets}/images/blog/blog-img11.jpg        | Bin
 .../assets}/images/blog/blog-img2.jpg         | Bin
 .../assets}/images/blog/blog-img3.jpg         | Bin
 .../assets}/images/blog/blog-img4.jpg         | Bin
 .../assets}/images/blog/blog-img5.jpg         | Bin
 .../assets}/images/blog/blog-img6.jpg         | Bin
 .../assets}/images/blog/blog-img7.jpg         | Bin
 .../assets}/images/blog/blog-img8.jpg         | Bin
 .../assets}/images/blog/blog-img9.jpg         | Bin
 .../assets}/images/breadcrumb/ChatBc.png      | Bin
 .../assets}/images/breadcrumb/emailSv.png     | Bin
 .../assets}/images/chat/icon-adobe.svg        |   0
 .../assets}/images/chat/icon-chrome.svg       |   0
 .../assets}/images/chat/icon-figma.svg        |   0
 .../assets}/images/chat/icon-javascript.svg   |   0
 .../assets}/images/chat/icon-zip-folder.svg   |   0
 .../assets}/images/flag/icon-flag-en.svg      |   0
 .../assets}/images/flag/icon-flag-fr.svg      |   0
 .../assets}/images/flag/icon-flag-ro.svg      |   0
 .../assets}/images/flag/icon-flag-vn.svg      |   0
 .../assets}/images/flag/icon-flag-zh.svg      |   0
 .../front-pages/background/contact-icon.png   | Bin
 .../front-pages/background/facebook.svg       |   0
 .../front-pages/background/feature-image.png  | Bin
 .../front-pages/background/instagram.svg      |   0
 .../front-pages/background/left-shape.png     | Bin
 .../front-pages/background/left-widget.png    | Bin
 .../front-pages/background/main-banner.png    | Bin
 .../images/front-pages/background/quotes.svg  |   0
 .../front-pages/background/right-shape.png    | Bin
 .../front-pages/background/right-widget.png   | Bin
 .../images/front-pages/background/twitter.svg |   0
 .../background/white-icon-logo.svg            |   0
 .../front-pages/background/white-logo.svg     |   0
 .../front-pages/componies/capgemini.svg       |   0
 .../images/front-pages/componies/dell.svg     |   0
 .../images/front-pages/componies/infosys.svg  |   0
 .../images/front-pages/componies/intel.svg    |   0
 .../images/front-pages/componies/oracle.svg   |   0
 .../images/front-pages/componies/samsung.svg  |   0
 .../images/front-pages/leaders/leader1.png    | Bin
 .../images/front-pages/leaders/leader2.png    | Bin
 .../images/front-pages/leaders/leader3.png    | Bin
 .../images/front-pages/leaders/leader4.png    | Bin
 .../images/front-pages/leaders/leader5.png    | Bin
 .../front-pages/payments/american-exp.svg     |   0
 .../front-pages/payments/dinners-clb.svg      |   0
 .../images/front-pages/payments/discover.svg  |   0
 .../images/front-pages/payments/jcb.svg       |   0
 .../images/front-pages/payments/maesro.svg    |   0
 .../images/front-pages/payments/master.svg    |   0
 .../images/front-pages/payments/paypal.svg    |   0
 .../images/front-pages/payments/visa.svg      |   0
 .../front-pages/technology/Apexchart.svg      |   0
 .../images/front-pages/technology/Pinia.svg   |   0
 .../front-pages/technology/Typescript.svg     |   0
 .../images/front-pages/technology/Vite.svg    |   0
 .../images/front-pages/technology/Vuejs.svg   |   0
 .../images/front-pages/technology/Vuetify.svg |   0
 .../assets}/images/kanban/task-img1.png       | Bin
 .../assets}/images/kanban/task-img2.png       | Bin
 .../landingpage/apps/app-blog-detail.jpg      | Bin
 .../images/landingpage/apps/app-blog.jpg      | Bin
 .../images/landingpage/apps/app-calendar.jpg  | Bin
 .../images/landingpage/apps/app-chat.jpg      | Bin
 .../images/landingpage/apps/app-contact.jpg   | Bin
 .../images/landingpage/apps/app-email.jpg     | Bin
 .../images/landingpage/apps/app-invoice.jpg   | Bin
 .../images/landingpage/apps/app-kanban.jpg    | Bin
 .../images/landingpage/apps/app-note.jpg      | Bin
 .../landingpage/apps/app-product-detail.jpg   | Bin
 .../landingpage/apps/app-productlist.jpg      | Bin
 .../images/landingpage/apps/app-shop.jpg      | Bin
 .../landingpage/apps/app-user-profile.jpg     | Bin
 .../images/landingpage/background/c2a.png     | Bin
 .../landingpage/background/slider-group.png   | Bin
 .../assets}/images/landingpage/bannerimg1.png | Bin
 .../assets}/images/landingpage/bannerimg2.png | Bin
 .../images/landingpage/demos/demo-dark.jpg    | Bin
 .../images/landingpage/demos/demo-default.jpg | Bin
 .../landingpage/demos/demo-horizontal.jpg     | Bin
 .../images/landingpage/demos/demo-main.jpg    | Bin
 .../images/landingpage/demos/demo-mini.jpg    | Bin
 .../images/landingpage/demos/demo-rtl.jpg     | Bin
 .../assets}/images/landingpage/favicon.png    | Bin
 .../landingpage/frameworks/logo-apexchart.svg |   0
 .../landingpage/frameworks/logo-figma.svg     |   0
 .../landingpage/frameworks/logo-pinia.svg     |   0
 .../images/landingpage/frameworks/logo-ts.svg |   0
 .../images/landingpage/frameworks/logo-vc.svg |   0
 .../landingpage/frameworks/logo-vue.svg       |   0
 .../landingpage/frameworks/logo-vuetify.svg   |   0
 .../images/landingpage/frontpages/aboutus.jpg | Bin
 .../landingpage/frontpages/blogpage.jpg       | Bin
 .../landingpage/frontpages/contactus.jpg      | Bin
 .../landingpage/frontpages/homepage.jpg       | Bin
 .../landingpage/frontpages/portfolio.jpg      | Bin
 .../images/landingpage/frontpages/pricing.jpg | Bin
 .../images/landingpage/shape/badge.svg        |   0
 .../images/landingpage/shape/line-bg-2.svg    |   0
 .../images/landingpage/shape/line-bg.svg      |   0
 .../images/landingpage/shape/shape-1.svg      |   0
 .../images/landingpage/shape/shape-2.svg      |   0
 .../assets}/images/logos/logo-icon.svg        |   0
 {assets => src/assets}/images/logos/logo.svg  |   0
 .../assets}/images/products/dash-prd-1.jpg    | Bin
 .../assets}/images/products/dash-prd-2.jpg    | Bin
 .../assets}/images/products/dash-prd-3.jpg    | Bin
 .../assets}/images/products/dash-prd-4.jpg    | Bin
 .../images/products/empty-shopping-bag.gif    | Bin
 .../images/products/empty-shopping-cart.svg   |   0
 .../images/products/payment-complete.svg      |   0
 .../assets}/images/products/payment.svg       |   0
 .../assets}/images/products/product-1.jpg     | Bin
 .../assets}/images/products/product-2.jpg     | Bin
 .../assets}/images/products/product-3.jpg     | Bin
 .../assets}/images/products/product-4.jpg     | Bin
 {assets => src/assets}/images/products/s1.jpg | Bin
 .../assets}/images/products/s10.jpg           | Bin
 .../assets}/images/products/s11.jpg           | Bin
 .../assets}/images/products/s12.jpg           | Bin
 {assets => src/assets}/images/products/s2.jpg | Bin
 {assets => src/assets}/images/products/s3.jpg | Bin
 {assets => src/assets}/images/products/s4.jpg | Bin
 {assets => src/assets}/images/products/s5.jpg | Bin
 {assets => src/assets}/images/products/s6.jpg | Bin
 {assets => src/assets}/images/products/s7.jpg | Bin
 {assets => src/assets}/images/products/s8.jpg | Bin
 {assets => src/assets}/images/products/s9.jpg | Bin
 .../assets}/images/profile/user-1.jpg         | Bin
 .../assets}/images/profile/user-10.jpg        | Bin
 .../assets}/images/profile/user-11.jpg        | Bin
 .../assets}/images/profile/user-12.jpg        | Bin
 .../assets}/images/profile/user-13.jpg        | Bin
 .../assets}/images/profile/user-14.jpg        | Bin
 .../assets}/images/profile/user-15.jpg        | Bin
 .../assets}/images/profile/user-2.jpg         | Bin
 .../assets}/images/profile/user-3.jpg         | Bin
 .../assets}/images/profile/user-4.jpg         | Bin
 .../assets}/images/profile/user-5.jpg         | Bin
 .../assets}/images/profile/user-6.jpg         | Bin
 .../assets}/images/profile/user-7.jpg         | Bin
 .../assets}/images/profile/user-8.jpg         | Bin
 .../assets}/images/profile/user-9.jpg         | Bin
 .../assets}/images/svgs/apple-icon.svg        |   0
 .../assets}/images/svgs/cart-icon.svg         |   0
 .../assets}/images/svgs/facebook-icon.svg     |   0
 .../assets}/images/svgs/google-icon.svg       |   0
 .../assets}/images/svgs/icon-account.svg      |   0
 .../assets}/images/svgs/icon-adobe.svg        |   0
 .../assets}/images/svgs/icon-bars.svg         |   0
 .../assets}/images/svgs/icon-briefcase.svg    |   0
 .../assets}/images/svgs/icon-chrome.svg       |   0
 .../assets}/images/svgs/icon-connect.svg      |   0
 .../images/svgs/icon-dd-application.svg       |   0
 .../assets}/images/svgs/icon-dd-cart.svg      |   0
 .../assets}/images/svgs/icon-dd-chat.svg      |   0
 .../assets}/images/svgs/icon-dd-date.svg      |   0
 .../assets}/images/svgs/icon-dd-invoice.svg   |   0
 .../assets}/images/svgs/icon-dd-lifebuoy.svg  |   0
 .../images/svgs/icon-dd-message-box.svg       |   0
 .../assets}/images/svgs/icon-dd-mobile.svg    |   0
 .../assets}/images/svgs/icon-favorites.svg    |   0
 .../assets}/images/svgs/icon-figma.svg        |   0
 .../assets}/images/svgs/icon-inbox.svg        |   0
 .../assets}/images/svgs/icon-javascript.svg   |   0
 .../assets}/images/svgs/icon-mailbox.svg      |   0
 .../images/svgs/icon-master-card-2.svg        |   0
 .../assets}/images/svgs/icon-master-card.svg  |   0
 .../assets}/images/svgs/icon-office-bag-2.svg |   0
 .../assets}/images/svgs/icon-office-bag.svg   |   0
 .../assets}/images/svgs/icon-paypal.svg       |   0
 .../assets}/images/svgs/icon-pie.svg          |   0
 .../images/svgs/icon-speech-bubble.svg        |   0
 .../assets}/images/svgs/icon-tasks.svg        |   0
 .../assets}/images/svgs/icon-user-male.svg    |   0
 .../assets}/images/svgs/icon-zip-folder.svg   |   0
 .../assets}/images/svgs/mastercard.svg        |   0
 {assets => src/assets}/images/svgs/paypal.svg |   0
 .../components}/auth/BoxedLoginForm.vue       |   0
 .../components}/auth/BoxedRegisterForm.vue    |   0
 .../components}/auth/LoginForm.vue            |   0
 .../components}/auth/RegisterForm.vue         |   0
 .../components}/auth/ResetForm.vue            |   0
 .../components}/auth/TwoStepForm.vue          |   0
 .../components}/auth/Unauthorization.vue      |   0
 .../components}/dashboard/BlogCards.vue       |   0
 .../components}/dashboard/DailyActivities.vue |   0
 .../components}/dashboard/NewCustomer.vue     |   0
 .../components}/dashboard/RevenueCard.vue     |   0
 .../components}/dashboard/RevenueProducts.vue |   0
 .../components}/dashboard/TotalIncome.vue     |   0
 .../components}/dashboards/BlogCards.vue      |   0
 .../dashboards/DailyActivities.vue            |   0
 .../components}/dashboards/NewCustomer.vue    |   0
 .../components}/dashboards/RevenueCard.vue    |   0
 .../dashboards/RevenueProducts.vue            |   0
 .../components}/dashboards/TotalIncome.vue    |   0
 .../dashboards/dashboard1/CustomerCard.vue    |   0
 .../dashboards/dashboard1/CustomerChart.vue   |   0
 .../dashboards/dashboard1/Performence.vue     |   0
 .../dashboards/dashboard1/ProjectCard.vue     |   0
 .../dashboards/dashboard1/RevenueForcast.vue  |   0
 .../dashboards/dashboard1/RevenueProducts.vue |   0
 .../dashboards/dashboard1/SalesOverview.vue   |   0
 .../dashboards/dashboard1/TotalSettelment.vue |   0
 .../dashboards/dashboard1/WelcomeCard.vue     |   0
 .../dashboards/dashboard1/index.vue.ex        |   0
 .../dashboards/dashboard2/AnnualProfit.vue    |   0
 .../dashboards/dashboard2/DailyActivities.vue |   0
 .../dashboards/dashboard2/NewCustomer.vue     |   0
 .../dashboards/dashboard2/ProfitCard.vue      |   0
 .../dashboards/dashboard2/ProifileCard.vue    |   0
 .../dashboards/dashboard2/RevenueCard.vue     |   0
 .../dashboard2/SalesFromLocation.vue          |   0
 .../dashboard2/SubscriptionCard.vue           |   0
 .../dashboards/dashboard2/TotalIncome.vue     |   0
 .../dashboards/dashboard2/UsersChart.vue      |   0
 .../dashboards/dashboard2/WeeklySchedule.vue  |   0
 .../dashboards/dashboard2/WeeklyState.vue     |   0
 .../dashboards/dashboard3/Calendarcard.vue    |   0
 .../dashboards/dashboard3/IconCards.vue       |   0
 .../components}/dashboards/snackbar.vue       |   0
 .../forms/form-custom/CustomFrom.vue          | 138 +++
 .../form-elements/autocomplete/ComboBox.vue   |  17 +
 .../autocomplete/MultipleOptions.vue          |  31 +
 .../autocomplete/WithCaption.vue              |  33 +
 .../form-elements/button/BaseButtons.vue      |  10 +
 .../form-elements/button/ColorsButtons.vue    |  12 +
 .../forms/form-elements/button/IconColor.vue  |  19 +
 .../form-elements/button/IconColorSizes.vue   |   9 +
 .../form-elements/button/IconsButtons.vue     |   9 +
 .../form-elements/button/OutlineIconColor.vue |  19 +
 .../form-elements/button/OutlineSizes.vue     |  23 +
 .../form-elements/button/OutlinedButtons.vue  |  11 +
 .../form-elements/button/OutlinedIconSize.vue |   9 +
 .../form-elements}/button/SizeButtons.vue     |   0
 .../form-elements/button/TextButtons.vue      |  12 +
 .../button/buttonGroup/Default.vue            |  18 +
 .../button/buttonGroup/Outlined.vue           |  14 +
 .../button/buttonGroup/Plain.vue              |  14 +
 .../form-elements/button/buttonGroup/Text.vue |  14 +
 .../checkbox/BasicCheckboxes.vue              |  15 +
 .../checkbox/ColorCheckboxes.vue              |  11 +
 .../form-elements/checkbox/CustomCheckbox.vue |   7 +
 .../checkbox/LabelCheckboxes.vue              |  11 +
 .../form-elements/combobox/ComboboxDense.vue  |  25 +
 .../combobox/ComboboxMultiple.vue             |  49 ++
 .../custominput/InputAppendPrepend.vue        |  14 +
 .../form-elements/custominput/InputError.vue  |   5 +
 .../custominput/InputHideDetails.vue          |  26 +
 .../custominput/InputLoading.vue              |   3 +
 .../custominput/InputMultipleError.vue        |   5 +
 .../form-elements/custominput/InputRules.vue  |  21 +
 .../form-elements/datetime/DatePicker.vue     |   3 +
 .../form-elements/datetime/TimePicker.vue     |   3 +
 .../fileinput/FileInputAccept.vue             |   8 +
 .../fileinput/FileInputChips.vue              |   9 +
 .../fileinput/FileInputCounter.vue            |  10 +
 .../fileinput/FileInputDensity.vue            |   7 +
 .../fileinput/FileInputMultiple.vue           |   8 +
 .../fileinput/FileInputPrepand.vue            |   8 +
 .../fileinput/FileInputSelection.vue          |  31 +
 .../fileinput/FileInputValidation.vue         |  18 +
 .../forms/form-elements/radio/Color.vue       |  13 +
 .../forms/form-elements/radio/Default.vue     |  13 +
 .../form-elements/radio/DefaultDirection.vue  |  12 +
 .../form-elements/radio/InlineDirection.vue   |  19 +
 .../forms/form-elements/radio/Label.vue       |  14 +
 .../form-elements/radio/LabelwithColor.vue    |  14 +
 .../forms/form-elements/select/SelectChip.vue |  73 ++
 .../form-elements/select/SelectDefault.vue    |  15 +
 .../form-elements/select/SelectDensity.vue    |  28 +
 .../form-elements/select/SelectMultiple.vue   |  73 ++
 .../form-elements/select/SelectReadOnly.vue   |  16 +
 .../forms/form-elements/slider/Custom.vue     |  46 +
 .../forms/form-elements/slider/Default.vue    |   9 +
 .../forms/form-elements/slider/Disabled.vue   |  10 +
 .../forms/form-elements/slider/Steps.vue      |   7 +
 .../forms/form-elements/slider/TickSize.vue   |   7 +
 .../forms/form-elements/slider/Ticks.vue      |   7 +
 .../forms/form-elements/slider/Vertical.vue   |  18 +
 .../forms/form-elements/slider/Volume.vue     |  21 +
 .../form-elements/stepper/Alternatelabel.vue  |  15 +
 .../stepper/AlternativeErrors.vue             |  48 ++
 .../form-elements/stepper/EditableStepper.vue |  28 +
 .../form-elements/stepper/ItemStepper.vue     |  24 +
 .../form-elements/stepper/LinearSteppers.vue  |  77 ++
 .../form-elements/stepper/NoEditable.vue      |  25 +
 .../form-elements/stepper/OptionalSteps.vue   |  52 ++
 .../forms/form-elements/switch/Colors.vue     |  13 +
 .../forms/form-elements/switch/Default.vue    |  10 +
 .../forms/form-elements/switch/Inset.vue      |  10 +
 .../form-elements/switch/InsetColors.vue      |  13 +
 .../forms/form-elements/switch/Label.vue      |   4 +
 .../forms/form-elements/switch/States.vue     |  14 +
 .../form-elements/treeview/Activatable.vue    |  77 ++
 .../forms/form-elements/treeview/Basic.vue    |  77 ++
 .../forms/form-elements/treeview/Colors.vue   |  77 ++
 .../form-elements/treeview/DenseMode.vue      |  77 ++
 .../forms/form-elements/treeview/OpenAll.vue  |  77 ++
 .../form-horizontal/AccountDetailsTab.vue     |  81 ++
 .../forms/form-horizontal/BasicLayout.vue     |  57 ++
 .../forms/form-horizontal/BasicWithIcons.vue  |  81 ++
 .../forms/form-horizontal/Collapsible.vue     | 147 ++++
 .../forms/form-horizontal/FormLabelAlign.vue  | 120 +++
 .../forms/form-horizontal/FormSeprator.vue    | 120 +++
 .../forms/form-horizontal/PersonalInfoTab.vue |  75 ++
 .../forms/form-horizontal/SocialLinksTab.vue  |  64 ++
 .../forms/form-layouts/BasicHeaderForm.vue    |  64 ++
 .../forms/form-layouts/DefaultForm.vue        |  90 ++
 .../forms/form-layouts/DisabledForm.vue       |  28 +
 .../forms/form-layouts/FormLeftIcon.vue       |  37 +
 .../forms/form-layouts/FormRightIcon.vue      |  58 ++
 .../forms/form-layouts/InputVarients.vue      |  13 +
 .../forms/form-layouts/OrdinaryForm.vue       |  32 +
 .../forms/form-validation/CheckBox.vue        |  35 +
 .../forms/form-validation/MailValidation.vue  |  66 ++
 .../forms/form-validation/OnType.vue          |  45 +
 .../forms/form-validation/Radio.vue           |  30 +
 .../forms/form-validation/Select.vue          |  36 +
 .../forms/form-validation/TextInput.vue       |  69 ++
 .../forms/form-validation/VeeValidation.vue   |  59 ++
 .../forms/form-vertical/AccountDetailsTab.vue |  54 ++
 .../forms/form-vertical/BasicLayout.vue       |  35 +
 .../forms/form-vertical/BasicWithIcons.vue    |  61 ++
 .../forms/form-vertical/Collapsible.vue       | 132 +++
 .../forms/form-vertical/FormSeprator.vue      | 119 +++
 .../forms/form-vertical/PersonalInfoTab.vue   |  46 +
 .../forms/form-vertical/SocialLinksTab.vue    |  36 +
 .../forms/plugins/editor/EditorMenu.vue       |  43 +
 .../forms/plugins/editor/EditorMenubar.vue    | 146 ++++
 .../components}/layout/full/Main.vue          |   0
 .../layout/full/customizer/Customizer.vue     |   0
 .../components}/layout/full/logo/Logo.vue     |   0
 .../components}/layout/full/logo/LogoDark.vue |   0
 .../layout/full/logo/LogoLight.vue            |   0
 .../layout/full/vertical-header/AppsLink.vue  |   0
 .../full/vertical-header/LanguageDD.vue       |   0
 .../full/vertical-header/Navigations.vue      |   0
 .../full/vertical-header/NotificationDD.vue   |   0
 .../layout/full/vertical-header/ProfileDD.vue |   0
 .../vertical-header/RightMobileSidebar.vue    |   0
 .../layout/full/vertical-header/Searchbar.vue |   0
 .../full/vertical-header/ThemeToggler.vue     |   0
 .../full/vertical-header/VerticalHeader.vue   |   0
 .../vertical-sidebar/Dropdown/Dropdown.vue    |   0
 .../layout/full/vertical-sidebar/Icon.vue     |   0
 .../full/vertical-sidebar/MinIconItems.ts     |   0
 .../NavCollapse/NavCollapse.vue               |   0
 .../vertical-sidebar/NavGroup/NavGroup.vue    |   0
 .../full/vertical-sidebar/NavItem/NavItem.vue |   0
 .../full/vertical-sidebar/VerticalSidebar.vue |  30 +-
 .../full/vertical-sidebar/sidebarItem.ts      |   2 +-
 .../pages/account-settings/AccountTab.vue     | 175 ++++
 .../pages/account-settings/BillsTab.vue       | 163 ++++
 .../account-settings/NotificationTab.vue      |  93 +++
 .../pages/account-settings/SecurityTab.vue    |  99 +++
 src/components/pages/faq/FaqQuestion.vue      |  18 +
 .../pages/faq/StillHaveQuestions.vue          |  30 +
 .../pages/search-results/SearchLinks.vue      |  24 +
 src/components/shared/AppBaseCard.vue         |  68 ++
 src/components/shared/AppEmailCard.vue        |  62 ++
 src/components/shared/BaseBreadcrumb.vue      |  43 +
 .../components}/shared/CardHeaderFooter.vue   |   0
 .../components}/shared/UiChildCard.vue        |   0
 .../components}/shared/UiParentCard.vue       |   3 +-
 .../components}/shared/UiParentCardLogo.vue   |   2 +-
 .../components}/shared/UiTableCard.vue        |   0
 .../components}/shared/UiTextfieldPrimary.vue |   0
 .../components}/shared/WidgetCard.vue         |   0
 .../components}/shared/WidgetCardv2.vue       |   0
 .../style-components/shadow/Shadow.vue        |   0
 .../typography/DefaultText.vue                |  31 +
 .../style-components/typography/Heading.vue   |  41 +
 .../style-components/typography/Opacity.vue   |   7 +
 .../typography/TextAlignment.vue              |  11 +
 .../typography/TextDecoration.vue             |   8 +
 src/components/ui-components/alert/Action.vue |  21 +
 .../components}/ui-components/alert/Basic.vue |   0
 .../ui-components/alert/Closable.vue          |   0
 .../ui-components/alert/Description.vue       |  18 +
 .../ui-components/alert/Filled.vue            |   0
 src/components/ui-components/alert/Icons.vue  |  26 +
 .../ui-components/alert/Outlined.vue          |  26 +
 .../ui-components/avatar/BasicAvatar.vue      |  13 +
 .../ui-components/avatar/IconAvatar.vue       |  24 +
 .../ui-components/avatar/ImageAvatar.vue      |  13 +
 .../ui-components/avatar/LetterAvatar.vue     |   9 +
 .../ui-components/avatar/SizeAvatar.vue       |  20 +
 .../ui-components/avatar/VariantAvatar.vue    |  18 +
 .../ui-components/banners/Banner2.vue         |  18 +
 .../ui-components/banners/Banner3.vue         |  12 +
 .../ui-components/banners/Banner4.vue         |  12 +
 .../ui-components/banners/Banner5.vue         |  13 +
 .../ui-components/banners/Banner6.vue         |  25 +
 .../ui-components/banners/WelcomCard.vue      |  17 +
 .../ui-components/button/BaseButtons.vue      |   0
 .../ui-components/button/ColorsButtons.vue    |   0
 .../ui-components/button/IconColorSizes.vue   |   0
 .../ui-components/button/OutlinedButtons.vue  |   0
 .../ui-components/button/SizeButtons.vue      |  23 +
 .../ui-components/button/TextButtons.vue      |   0
 .../ui-components/cards/BlogCards.vue         |  45 +
 .../ui-components/cards/CardsContentWrap.vue  |   0
 .../ui-components/cards/CardsMedia.vue        |   0
 .../ui-components/cards/CardsProps.vue        |   0
 .../ui-components/cards/CardsSlots.vue        |   0
 .../ui-components/cards/CardsTwitter.vue      |   0
 .../ui-components/cards/CardsWeather.vue      |   0
 .../ui-components/cards/FollowerCards.vue     |  23 +
 .../ui-components/cards/GiftCards.vue         |  39 +
 .../ui-components/cards/MusicCards.vue        |  40 +
 .../ui-components/cards/PaymentGateways.vue   |  24 +
 .../ui-components/cards/ProductCards.vue      |  36 +
 .../ui-components/cards/ProfileCards.vue      |  28 +
 .../ui-components/cards/Settings.vue          |  46 +
 .../cards/UpcommingActivityCard.vue           |  23 +
 .../ui-components/cards/UserCards.vue         |  31 +
 .../ui-components/charts/CurrentValue.vue     | 267 ++++++
 .../ui-components/charts/Customer.vue         |  61 ++
 .../ui-components/charts/Earned.vue           |  67 ++
 .../ui-components/charts/Followers.vue        |  57 ++
 .../ui-components/charts/MonthlyEarnings.vue  |  82 ++
 .../ui-components/charts/MostVisited.vue      | 113 +++
 .../ui-components/charts/PageImpression.vue   | 100 +++
 .../ui-components/charts/Projects.vue         |  98 +++
 .../ui-components/charts/RevenueUpdates.vue   |  99 +++
 .../ui-components/charts/SalesOverview.vue    |  96 +++
 .../ui-components/charts/TotalEarning.vue     |  88 ++
 src/components/ui-components/charts/Views.vue |  91 ++
 .../ui-components/charts/YearlyBreakup.vue    |  98 +++
 .../ui-components/charts/YearlySales.vue      | 124 +++
 .../ui-components/chip/Closable.vue           |  10 +
 .../ui-components/chip/CustomIcon.vue         |  18 +
 .../ui-components/chip/CustomIconOutlined.vue |  18 +
 .../ui-components/chip/Disabled.vue           |  18 +
 .../ui-components/chip/FilledColor.vue        |  62 ++
 .../ui-components/chip/LabelChip.vue          |   9 +
 .../ui-components/chip/Outlined.vue           |  62 ++
 src/components/ui-components/chip/Sizes.vue   |   9 +
 .../dialogs/DialogsActivator.vue              |  26 +
 .../ui-components/dialogs/DialogsForm.vue     |  92 ++
 .../dialogs/DialogsFullscreen.vue             |  76 ++
 .../ui-components/dialogs/DialogsModel.vue    |  23 +
 .../ui-components/dialogs/DialogsNested.vue   |  78 ++
 .../dialogs/DialogsPersistent.vue             |  32 +
 .../dialogs/DialogsScrollable.vue             |  50 ++
 .../dialogs/DialogsTransitions.vue            |  25 +
 .../ui-components/expansionpanel/Advance.vue  |  65 ++
 .../ui-components/expansionpanel/Basic.vue    |  19 +
 .../expansionpanel/CustomizedIcon.vue         |  43 +
 .../expansionpanel/DefaultExpand.vue          |  23 +
 .../ui-components/expansionpanel/Inset.vue    |  19 +
 .../ui-components/expansionpanel/Popout.vue   |  19 +
 .../ui-components/list/CustomAlignList.vue    |  59 ++
 .../ui-components/list/DisabledList.vue       |  43 +
 .../ui-components/list/FolderList.vue         |  42 +
 .../ui-components/list/NestedList.vue         |  40 +
 .../ui-components/list/RoundedList.vue        |  37 +
 .../ui-components/list/ScrollableList.vue     |   9 +
 .../ui-components/list/SimpleList.vue         |  48 ++
 .../ui-components/list/SwitchList.vue         |  40 +
 .../menus/MenusActivatorTooltip.vue           |  33 +
 .../ui-components/menus/MenusAnchor.vue       |  25 +
 .../ui-components/menus/MenusHover.vue        |  26 +
 .../ui-components/menus/MenusPopover.vue      |  68 ++
 .../ui-components/ratting/BasicRatting.vue    |   9 +
 .../ratting/ClearableRatting.vue              |   9 +
 .../ui-components/ratting/HalfRatting.vue     |   9 +
 .../ui-components/ratting/HoverRatting.vue    |   9 +
 .../ui-components/ratting/IconsRatting.vue    |  28 +
 .../ui-components/ratting/LabelRatting.vue    |  22 +
 .../ui-components/ratting/LengthRatting.vue   |   9 +
 .../ui-components/ratting/ReadOnlyRatting.vue |   9 +
 .../ui-components/ratting/SizeRatting.vue     |   7 +
 .../ui-components/tabs/AlignCenterTabs.vue    |  90 ++
 .../ui-components/tabs/AlignEndTabs.vue       |  90 ++
 .../ui-components/tabs/BasicTabs.vue          |  25 +
 .../ui-components/tabs/CenterTabs.vue         |  28 +
 .../ui-components/tabs/ColorTabs.vue          |  25 +
 .../ui-components/tabs/CustomIcons.vue        |  19 +
 .../ui-components/tabs/DisableTabs.vue        |  26 +
 .../ui-components/tabs/IconTabs.vue           |  32 +
 .../ui-components/tabs/IconsWithLabelTabs.vue |  37 +
 .../ui-components/tooltip/IconTooltip.vue     |  40 +
 .../ui-components/tooltip/SimpleTooltip.vue   |  20 +
 .../ui-components/tooltip/ToggleTolltip.vue   |  19 +
 src/components/widgets/banners/Banner2.vue    |  18 +
 src/components/widgets/banners/Banner3.vue    |  12 +
 src/components/widgets/banners/Banner4.vue    |  12 +
 src/components/widgets/banners/Banner5.vue    |  13 +
 src/components/widgets/banners/Banner6.vue    |  25 +
 src/components/widgets/banners/WelcomCard.vue |  17 +
 src/components/widgets/cards/BlogCards.vue    |  45 +
 .../widgets/cards/FollowerCards.vue           |  23 +
 src/components/widgets/cards/GiftCards.vue    |  39 +
 src/components/widgets/cards/MusicCards.vue   |  40 +
 .../widgets/cards/PaymentGateways.vue         |  24 +
 src/components/widgets/cards/ProductCards.vue |  36 +
 src/components/widgets/cards/ProfileCards.vue |  28 +
 src/components/widgets/cards/Settings.vue     |  46 +
 .../widgets/cards/UpcommingActivityCard.vue   |  23 +
 src/components/widgets/cards/UserCards.vue    |  31 +
 .../widgets/charts/CurrentValue.vue           | 267 ++++++
 src/components/widgets/charts/Customer.vue    |  61 ++
 src/components/widgets/charts/Earned.vue      |  67 ++
 src/components/widgets/charts/Followers.vue   |  57 ++
 .../widgets/charts/MonthlyEarnings.vue        |  82 ++
 src/components/widgets/charts/MostVisited.vue | 113 +++
 .../widgets/charts/PageImpression.vue         | 100 +++
 src/components/widgets/charts/Projects.vue    |  98 +++
 .../widgets/charts/RevenueUpdates.vue         |  99 +++
 .../widgets/charts/SalesOverview.vue          |  96 +++
 .../widgets/charts/TotalEarning.vue           |  88 ++
 src/components/widgets/charts/Views.vue       |  91 ++
 .../widgets/charts/YearlyBreakup.vue          |  98 +++
 src/components/widgets/charts/YearlySales.vue | 124 +++
 .../composables}/useSessionLogin.ts           |   0
 config.ts => src/config.ts                    |   0
 {data => src/data}/dashboard/dashboardData.ts |   0
 error.vue => src/error.vue                    |   0
 src/layouts/Logo.vue                          |  11 +
 src/layouts/LogoIcon.vue                      |  11 +
 {layouts => src/layouts}/blank.vue            |   0
 {layouts => src/layouts}/default.vue          |   0
 {middleware => src/middleware}/auth.ts        |   0
 nuxt.config.ts => src/nuxt.config.ts          |   4 +-
 package-lock.json => src/package-lock.json    | 790 +++++++++++++++++-
 package.json => src/package.json              |  10 +-
 {pages => src/pages}/Icons.vue                |   0
 {pages => src/pages}/SambelPage_copy.vue      |   0
 {pages => src/pages}/Sample-Page.vue          |   0
 {pages => src/pages}/SamplePage.vue           |   0
 {pages => src/pages}/auth/401.vue             |   0
 {pages => src/pages}/auth/Login.vue           |   0
 {pages => src/pages}/auth/Register.vue        |   0
 .../pages}/dashboards/dashboard1.vue          |   0
 .../pages}/dashboards/dashboard2.vue          |   0
 .../pages}/dashboards/dashboard3.vue          |   0
 src/pages/forms/Editor.vue                    |  68 ++
 src/pages/forms/Form-Validation.vue           |  64 ++
 .../forms/form-elements/Autocomplete.vue      |  58 ++
 src/pages/forms/form-elements/Button.vue      | 157 ++++
 src/pages/forms/form-elements/Checkbox.vue    |  64 ++
 src/pages/forms/form-elements/Date-Time.vue   |  51 ++
 src/pages/forms/form-elements/Radio.vue       |  81 ++
 src/pages/forms/form-elements/Slider.vue      |  90 ++
 src/pages/forms/form-elements/Stepper.vue     |  76 ++
 src/pages/forms/form-elements/Switch.vue      |  78 ++
 src/pages/forms/form-elements/TextField.vue   | 289 +++++++
 src/pages/forms/form-elements/Time-Picker.vue |  84 ++
 {pages => src/pages}/index.vue                |   0
 src/pages/pages/Account-Settings.vue          |  67 ++
 src/pages/tables/datatables/CrudTable.vue     | 272 ++++++
 src/pages/tables/datatables/Filtering.vue     | 109 +++
 src/pages/tables/datatables/Selection.vue     |  60 ++
 src/pages/ui-components/Accordion.vue         |  77 ++
 {pages => src/pages}/ui-components/Alerts.vue |   0
 src/pages/ui-components/Avatar.vue            |  80 ++
 .../pages}/ui-components/Buttons.vue          |   0
 {pages => src/pages}/ui-components/Cards.vue  |   0
 src/pages/ui-components/Chip.vue              |  84 ++
 src/pages/ui-components/Dialogs.vue           |  84 ++
 src/pages/ui-components/List.vue              |  92 ++
 src/pages/ui-components/Menus.vue             |  59 ++
 {pages => src/pages}/ui-components/Tables.vue |   0
 src/pages/ui-components/Tabs.vue              | 100 +++
 src/pages/ui-components/Tooltip.vue           |  42 +
 src/pages/ui-components/Typography.vue        |  49 ++
 {pages => src/pages}/ui/Shadow.vue            |   0
 {pages => src/pages}/ui/Typography.vue        |   0
 src/pages/widgets/Banners.vue                 |  54 ++
 src/pages/widgets/Cards.vue                   |  80 ++
 src/pages/widgets/Charts.vue                  | 103 +++
 {plugins => src/plugins}/i18n.ts              |   0
 {plugins => src/plugins}/vuetify.ts           |   0
 pnpm-lock.yaml => src/pnpm-lock.yaml          |   0
 {public => src/public}/favicon.ico            | Bin
 {public => src/public}/favicon.svg            |   0
 .../public}/images/backgrounds/errorimg.svg   |   0
 .../public}/images/backgrounds/rupee.png      | Bin
 .../public}/images/blog/blog-img1.jpg         | Bin
 .../public}/images/blog/blog-img2.jpg         | Bin
 .../public}/images/blog/blog-img3.jpg         | Bin
 .../public}/images/logos/dark-logo.svg        |   0
 {public => src/public}/images/logos/icon.svg  |   0
 .../public}/images/logos/light-logo.svg       |   0
 .../public}/images/logos/logo-adminmart.svg   |   0
 .../public}/images/logos/logo-icon.svg        |   0
 {public => src/public}/images/logos/logo.svg  |   0
 .../public}/images/products/dash-prd-1.jpg    | Bin
 .../public}/images/products/dash-prd-2.jpg    | Bin
 .../public}/images/products/dash-prd-3.jpg    | Bin
 .../public}/images/products/dash-prd-4.jpg    | Bin
 .../public}/images/profile/user-1.jpg         | Bin
 .../public}/images/profile/user-2.jpg         | Bin
 .../public}/images/profile/user-3.jpg         | Bin
 .../images/technology/angular-cat-icon.svg    |   0
 .../public}/images/technology/bt-cat-icon.svg |   0
 .../images/technology/next-cat-icon.svg       |   0
 .../images/technology/nuxt-cat-icon.svg       |   0
 .../images/technology/react-cat-icon.svg      |   0
 .../images/technology/tailwind-icon.svg       |   0
 .../images/technology/vue-cat-icon.svg        |   0
 {scss => src/scss}/_override.scss             |   0
 {scss => src/scss}/_variables.scss            |   0
 {scss => src/scss}/components/_VAlert.scss    |   0
 .../scss}/components/_VBreadcrumb.scss        |   0
 {scss => src/scss}/components/_VButtons.scss  |   0
 {scss => src/scss}/components/_VCard.scss     |   0
 {scss => src/scss}/components/_VCarousel.scss |   0
 {scss => src/scss}/components/_VChip.scss     |   0
 .../scss}/components/_VDatatables.scss        |   0
 .../scss}/components/_VExpansionpanel.scss    |   0
 {scss => src/scss}/components/_VField.scss    |   0
 {scss => src/scss}/components/_VInput.scss    |   0
 {scss => src/scss}/components/_VLabs.scss     |   0
 {scss => src/scss}/components/_VList.scss     |   0
 .../scss}/components/_VNavigationDrawer.scss  |   0
 .../scss}/components/_VPagination.scss        |   0
 .../scss}/components/_VSelectionControl.scss  |   0
 {scss => src/scss}/components/_VShadow.scss   |   0
 {scss => src/scss}/components/_VStepper.scss  |   0
 {scss => src/scss}/components/_VSwitch.scss   |   0
 {scss => src/scss}/components/_VTable.scss    |   0
 {scss => src/scss}/components/_VTabs.scss     |   0
 .../scss}/components/_VTextField.scss         |   0
 {scss => src/scss}/components/_VTextarea.scss |   0
 {scss => src/scss}/components/_VTooltip.scss  |   0
 {scss => src/scss}/front/_general.scss        |   0
 {scss => src/scss}/front/_header.scss         |   0
 {scss => src/scss}/landingpage/_general.scss  |   0
 {scss => src/scss}/landingpage/_header.scss   |   0
 {scss => src/scss}/layout/_container.scss     |   0
 {scss => src/scss}/layout/_customizer.scss    |   0
 {scss => src/scss}/layout/_dark.scss          |   0
 {scss => src/scss}/layout/_horizontal.scss    |   0
 {scss => src/scss}/layout/_reboot.scss        |   0
 {scss => src/scss}/layout/_rtl.scss           |   0
 {scss => src/scss}/layout/_sidebar.scss       |   0
 {scss => src/scss}/layout/_text.scss          |   0
 {scss => src/scss}/layout/_topbar.scss        |   0
 {scss => src/scss}/pages/_apps.scss           |   0
 {scss => src/scss}/pages/_auth.scss           |   0
 {scss => src/scss}/pages/_dashboards.scss     |   0
 {scss => src/scss}/pages/_editor.scss         |   0
 {scss => src/scss}/style.scss                 |   0
 {scssold => src/scssold}/_override.scss       |   0
 {scssold => src/scssold}/_variables.scss      |   0
 .../scssold}/components/_VButtons.scss        |   0
 .../scssold}/components/_VCard.scss           |   0
 .../scssold}/components/_VField.scss          |   0
 .../scssold}/components/_VInput.scss          |   0
 .../components/_VNavigationDrawer.scss        |   0
 .../scssold}/components/_VShadow.scss         |   0
 .../scssold}/components/_VTable.scss          |   0
 .../scssold}/layout/_container.scss           |   0
 {scssold => src/scssold}/layout/_sidebar.scss |   0
 {scssold => src/scssold}/layout/_topbar.scss  |   0
 .../scssold}/pages/_dashboards.scss           |   0
 {scssold => src/scssold}/style.scss           |   0
 {server => src/server}/api/auth/[...].ts      |   0
 {server => src/server}/api/session.get.ts     |   0
 {server => src/server}/api/token.get.ts       |   0
 {store => src/store}/customizer.ts            |   0
 {stores => src/stores}/userInfo.ts.ex         |   0
 {theme => src/theme}/DarkTheme.ts             |   0
 {theme => src/theme}/LightTheme.ts            |   0
 tsconfig.json => src/tsconfig.json            |   0
 {types => src/types}/dashboard/index.ts       |   0
 {types => src/types}/sessionUserTypes.ts      |   0
 {types => src/types}/themeTypes/ThemeType.ts  |   0
 {utils => src/utils}/UpdateColors.ts          |   0
 {utils => src/utils}/axios.ts                 |   0
 {utils => src/utils}/helper.ts                |   0
 {utils => src/utils}/locales/ar.json          |   0
 {utils => src/utils}/locales/en.json          |   0
 {utils => src/utils}/locales/fr.json          |   0
 {utils => src/utils}/locales/messages.ts      |   0
 {utils => src/utils}/locales/zh.json          |   0
 765 files changed, 14619 insertions(+), 95 deletions(-)
 create mode 100644 .idea/workspace.xml
 create mode 100644 Dockerfile
 delete mode 100644 components/style-components/typography/DefaultText.vue
 delete mode 100644 components/style-components/typography/Heading.vue
 create mode 100644 docker-compose.yml
 rename .editorconfig => src/.editorconfig (100%)
 rename .env.example => src/.env.example (100%)
 rename .gitignore => src/.gitignore (100%)
 rename {.idea => src/.idea}/.gitignore (100%)
 create mode 100644 src/.idea/full-matdash-nuxt-stim.iml
 create mode 100644 src/.idea/modules.xml
 create mode 100644 src/.idea/vcs.xml
 rename .npmrc => src/.npmrc (100%)
 rename README.md => src/README.md (100%)
 rename {_mockApis => src/_mockApis}/apps/blog/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/chat/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/contact/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/ecommerce/Editproduc.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/ecommerce/billing-address.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/ecommerce/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/ecommerce/products.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/email/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/invoice/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/kanban/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/notes/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/tickets/index.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/userprofile/followers.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/userprofile/friends.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/userprofile/gallery.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/userprofile/photos.ts (100%)
 rename {_mockApis => src/_mockApis}/apps/userprofile/posts.ts (100%)
 rename {_mockApis => src/_mockApis}/components/dashboard/dashboard1.ts (100%)
 rename {_mockApis => src/_mockApis}/components/dashboard/dashboard2.ts (100%)
 rename {_mockApis => src/_mockApis}/components/dashboard/dashboard3.ts (100%)
 rename {_mockApis => src/_mockApis}/components/datatable/dataTable.ts (100%)
 rename {_mockApis => src/_mockApis}/components/pages/accountNotification.ts (100%)
 rename {_mockApis => src/_mockApis}/components/pages/auth.ts (100%)
 rename {_mockApis => src/_mockApis}/components/pages/faqData.ts (100%)
 rename {_mockApis => src/_mockApis}/components/pages/pricingData.ts (100%)
 rename {_mockApis => src/_mockApis}/components/pages/searchLinks.ts (100%)
 rename {_mockApis => src/_mockApis}/components/table/basicTables.ts (100%)
 rename {_mockApis => src/_mockApis}/components/widget/card.ts (100%)
 rename {_mockApis => src/_mockApis}/front-pages/PagesData.ts (100%)
 rename {_mockApis => src/_mockApis}/headerData.ts (100%)
 rename {_mockApis => src/_mockApis}/index.ts (100%)
 rename {_mockApis => src/_mockApis}/landingpage/curoselData.ts (100%)
 rename {_mockApis => src/_mockApis}/landingpage/lpPage.ts (100%)
 rename {_mockApis => src/_mockApis}/mockAdapter.ts (100%)
 rename app.vue => src/app.vue (100%)
 rename {assets => src/assets}/images/backgrounds/active-bg.png (100%)
 rename {assets => src/assets}/images/backgrounds/blog.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/bronze.png (100%)
 rename {assets => src/assets}/images/backgrounds/business-woman-checking-her-mail.png (100%)
 rename {assets => src/assets}/images/backgrounds/empty_mail.png (100%)
 rename {assets => src/assets}/images/backgrounds/errorimg.svg (100%)
 rename {assets => src/assets}/images/backgrounds/gold.png (100%)
 rename {assets => src/assets}/images/backgrounds/img1.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/kanban-img-1.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/kanban-img-2.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/kanban-img-3.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/kanban-img-4.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/line-bg-2.svg (100%)
 rename {assets => src/assets}/images/backgrounds/line-bg.svg (100%)
 rename {assets => src/assets}/images/backgrounds/login-bg.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/login-bg.svg (100%)
 rename {assets => src/assets}/images/backgrounds/login-side.png (100%)
 rename {assets => src/assets}/images/backgrounds/maintenance.svg (100%)
 rename {assets => src/assets}/images/backgrounds/mega-dd-bg.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/my-card.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/nyan-cat.gif (100%)
 rename {assets => src/assets}/images/backgrounds/payment.svg (100%)
 rename {assets => src/assets}/images/backgrounds/preview-img.png (100%)
 rename {assets => src/assets}/images/backgrounds/profile-bg.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/profilebg.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/silver.png (100%)
 rename {assets => src/assets}/images/backgrounds/track-bg.png (100%)
 rename {assets => src/assets}/images/backgrounds/unauthorization.svg (100%)
 rename {assets => src/assets}/images/backgrounds/weather.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/weatherbg.jpg (100%)
 rename {assets => src/assets}/images/backgrounds/website-under-construction.svg (100%)
 rename {assets => src/assets}/images/backgrounds/welcome-bg.png (100%)
 rename {assets => src/assets}/images/backgrounds/welcome-bg2.png (100%)
 rename {assets => src/assets}/images/blog/blog-img1.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img10.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img11.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img2.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img3.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img4.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img5.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img6.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img7.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img8.jpg (100%)
 rename {assets => src/assets}/images/blog/blog-img9.jpg (100%)
 rename {assets => src/assets}/images/breadcrumb/ChatBc.png (100%)
 rename {assets => src/assets}/images/breadcrumb/emailSv.png (100%)
 rename {assets => src/assets}/images/chat/icon-adobe.svg (100%)
 rename {assets => src/assets}/images/chat/icon-chrome.svg (100%)
 rename {assets => src/assets}/images/chat/icon-figma.svg (100%)
 rename {assets => src/assets}/images/chat/icon-javascript.svg (100%)
 rename {assets => src/assets}/images/chat/icon-zip-folder.svg (100%)
 rename {assets => src/assets}/images/flag/icon-flag-en.svg (100%)
 rename {assets => src/assets}/images/flag/icon-flag-fr.svg (100%)
 rename {assets => src/assets}/images/flag/icon-flag-ro.svg (100%)
 rename {assets => src/assets}/images/flag/icon-flag-vn.svg (100%)
 rename {assets => src/assets}/images/flag/icon-flag-zh.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/contact-icon.png (100%)
 rename {assets => src/assets}/images/front-pages/background/facebook.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/feature-image.png (100%)
 rename {assets => src/assets}/images/front-pages/background/instagram.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/left-shape.png (100%)
 rename {assets => src/assets}/images/front-pages/background/left-widget.png (100%)
 rename {assets => src/assets}/images/front-pages/background/main-banner.png (100%)
 rename {assets => src/assets}/images/front-pages/background/quotes.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/right-shape.png (100%)
 rename {assets => src/assets}/images/front-pages/background/right-widget.png (100%)
 rename {assets => src/assets}/images/front-pages/background/twitter.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/white-icon-logo.svg (100%)
 rename {assets => src/assets}/images/front-pages/background/white-logo.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/capgemini.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/dell.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/infosys.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/intel.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/oracle.svg (100%)
 rename {assets => src/assets}/images/front-pages/componies/samsung.svg (100%)
 rename {assets => src/assets}/images/front-pages/leaders/leader1.png (100%)
 rename {assets => src/assets}/images/front-pages/leaders/leader2.png (100%)
 rename {assets => src/assets}/images/front-pages/leaders/leader3.png (100%)
 rename {assets => src/assets}/images/front-pages/leaders/leader4.png (100%)
 rename {assets => src/assets}/images/front-pages/leaders/leader5.png (100%)
 rename {assets => src/assets}/images/front-pages/payments/american-exp.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/dinners-clb.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/discover.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/jcb.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/maesro.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/master.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/paypal.svg (100%)
 rename {assets => src/assets}/images/front-pages/payments/visa.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Apexchart.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Pinia.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Typescript.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Vite.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Vuejs.svg (100%)
 rename {assets => src/assets}/images/front-pages/technology/Vuetify.svg (100%)
 rename {assets => src/assets}/images/kanban/task-img1.png (100%)
 rename {assets => src/assets}/images/kanban/task-img2.png (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-blog-detail.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-blog.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-calendar.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-chat.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-contact.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-email.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-invoice.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-kanban.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-note.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-product-detail.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-productlist.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-shop.jpg (100%)
 rename {assets => src/assets}/images/landingpage/apps/app-user-profile.jpg (100%)
 rename {assets => src/assets}/images/landingpage/background/c2a.png (100%)
 rename {assets => src/assets}/images/landingpage/background/slider-group.png (100%)
 rename {assets => src/assets}/images/landingpage/bannerimg1.png (100%)
 rename {assets => src/assets}/images/landingpage/bannerimg2.png (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-dark.jpg (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-default.jpg (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-horizontal.jpg (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-main.jpg (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-mini.jpg (100%)
 rename {assets => src/assets}/images/landingpage/demos/demo-rtl.jpg (100%)
 rename {assets => src/assets}/images/landingpage/favicon.png (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-apexchart.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-figma.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-pinia.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-ts.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-vc.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-vue.svg (100%)
 rename {assets => src/assets}/images/landingpage/frameworks/logo-vuetify.svg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/aboutus.jpg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/blogpage.jpg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/contactus.jpg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/homepage.jpg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/portfolio.jpg (100%)
 rename {assets => src/assets}/images/landingpage/frontpages/pricing.jpg (100%)
 rename {assets => src/assets}/images/landingpage/shape/badge.svg (100%)
 rename {assets => src/assets}/images/landingpage/shape/line-bg-2.svg (100%)
 rename {assets => src/assets}/images/landingpage/shape/line-bg.svg (100%)
 rename {assets => src/assets}/images/landingpage/shape/shape-1.svg (100%)
 rename {assets => src/assets}/images/landingpage/shape/shape-2.svg (100%)
 rename {assets => src/assets}/images/logos/logo-icon.svg (100%)
 rename {assets => src/assets}/images/logos/logo.svg (100%)
 rename {assets => src/assets}/images/products/dash-prd-1.jpg (100%)
 rename {assets => src/assets}/images/products/dash-prd-2.jpg (100%)
 rename {assets => src/assets}/images/products/dash-prd-3.jpg (100%)
 rename {assets => src/assets}/images/products/dash-prd-4.jpg (100%)
 rename {assets => src/assets}/images/products/empty-shopping-bag.gif (100%)
 rename {assets => src/assets}/images/products/empty-shopping-cart.svg (100%)
 rename {assets => src/assets}/images/products/payment-complete.svg (100%)
 rename {assets => src/assets}/images/products/payment.svg (100%)
 rename {assets => src/assets}/images/products/product-1.jpg (100%)
 rename {assets => src/assets}/images/products/product-2.jpg (100%)
 rename {assets => src/assets}/images/products/product-3.jpg (100%)
 rename {assets => src/assets}/images/products/product-4.jpg (100%)
 rename {assets => src/assets}/images/products/s1.jpg (100%)
 rename {assets => src/assets}/images/products/s10.jpg (100%)
 rename {assets => src/assets}/images/products/s11.jpg (100%)
 rename {assets => src/assets}/images/products/s12.jpg (100%)
 rename {assets => src/assets}/images/products/s2.jpg (100%)
 rename {assets => src/assets}/images/products/s3.jpg (100%)
 rename {assets => src/assets}/images/products/s4.jpg (100%)
 rename {assets => src/assets}/images/products/s5.jpg (100%)
 rename {assets => src/assets}/images/products/s6.jpg (100%)
 rename {assets => src/assets}/images/products/s7.jpg (100%)
 rename {assets => src/assets}/images/products/s8.jpg (100%)
 rename {assets => src/assets}/images/products/s9.jpg (100%)
 rename {assets => src/assets}/images/profile/user-1.jpg (100%)
 rename {assets => src/assets}/images/profile/user-10.jpg (100%)
 rename {assets => src/assets}/images/profile/user-11.jpg (100%)
 rename {assets => src/assets}/images/profile/user-12.jpg (100%)
 rename {assets => src/assets}/images/profile/user-13.jpg (100%)
 rename {assets => src/assets}/images/profile/user-14.jpg (100%)
 rename {assets => src/assets}/images/profile/user-15.jpg (100%)
 rename {assets => src/assets}/images/profile/user-2.jpg (100%)
 rename {assets => src/assets}/images/profile/user-3.jpg (100%)
 rename {assets => src/assets}/images/profile/user-4.jpg (100%)
 rename {assets => src/assets}/images/profile/user-5.jpg (100%)
 rename {assets => src/assets}/images/profile/user-6.jpg (100%)
 rename {assets => src/assets}/images/profile/user-7.jpg (100%)
 rename {assets => src/assets}/images/profile/user-8.jpg (100%)
 rename {assets => src/assets}/images/profile/user-9.jpg (100%)
 rename {assets => src/assets}/images/svgs/apple-icon.svg (100%)
 rename {assets => src/assets}/images/svgs/cart-icon.svg (100%)
 rename {assets => src/assets}/images/svgs/facebook-icon.svg (100%)
 rename {assets => src/assets}/images/svgs/google-icon.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-account.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-adobe.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-bars.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-briefcase.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-chrome.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-connect.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-application.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-cart.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-chat.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-date.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-invoice.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-lifebuoy.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-message-box.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-dd-mobile.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-favorites.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-figma.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-inbox.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-javascript.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-mailbox.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-master-card-2.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-master-card.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-office-bag-2.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-office-bag.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-paypal.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-pie.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-speech-bubble.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-tasks.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-user-male.svg (100%)
 rename {assets => src/assets}/images/svgs/icon-zip-folder.svg (100%)
 rename {assets => src/assets}/images/svgs/mastercard.svg (100%)
 rename {assets => src/assets}/images/svgs/paypal.svg (100%)
 rename {components => src/components}/auth/BoxedLoginForm.vue (100%)
 rename {components => src/components}/auth/BoxedRegisterForm.vue (100%)
 rename {components => src/components}/auth/LoginForm.vue (100%)
 rename {components => src/components}/auth/RegisterForm.vue (100%)
 rename {components => src/components}/auth/ResetForm.vue (100%)
 rename {components => src/components}/auth/TwoStepForm.vue (100%)
 rename {components => src/components}/auth/Unauthorization.vue (100%)
 rename {components => src/components}/dashboard/BlogCards.vue (100%)
 rename {components => src/components}/dashboard/DailyActivities.vue (100%)
 rename {components => src/components}/dashboard/NewCustomer.vue (100%)
 rename {components => src/components}/dashboard/RevenueCard.vue (100%)
 rename {components => src/components}/dashboard/RevenueProducts.vue (100%)
 rename {components => src/components}/dashboard/TotalIncome.vue (100%)
 rename {components => src/components}/dashboards/BlogCards.vue (100%)
 rename {components => src/components}/dashboards/DailyActivities.vue (100%)
 rename {components => src/components}/dashboards/NewCustomer.vue (100%)
 rename {components => src/components}/dashboards/RevenueCard.vue (100%)
 rename {components => src/components}/dashboards/RevenueProducts.vue (100%)
 rename {components => src/components}/dashboards/TotalIncome.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/CustomerCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/CustomerChart.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/Performence.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/ProjectCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/RevenueForcast.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/RevenueProducts.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/SalesOverview.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/TotalSettelment.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/WelcomeCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard1/index.vue.ex (100%)
 rename {components => src/components}/dashboards/dashboard2/AnnualProfit.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/DailyActivities.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/NewCustomer.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/ProfitCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/ProifileCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/RevenueCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/SalesFromLocation.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/SubscriptionCard.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/TotalIncome.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/UsersChart.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/WeeklySchedule.vue (100%)
 rename {components => src/components}/dashboards/dashboard2/WeeklyState.vue (100%)
 rename {components => src/components}/dashboards/dashboard3/Calendarcard.vue (100%)
 rename {components => src/components}/dashboards/dashboard3/IconCards.vue (100%)
 rename {components => src/components}/dashboards/snackbar.vue (100%)
 create mode 100644 src/components/forms/form-custom/CustomFrom.vue
 create mode 100644 src/components/forms/form-elements/autocomplete/ComboBox.vue
 create mode 100644 src/components/forms/form-elements/autocomplete/MultipleOptions.vue
 create mode 100644 src/components/forms/form-elements/autocomplete/WithCaption.vue
 create mode 100644 src/components/forms/form-elements/button/BaseButtons.vue
 create mode 100644 src/components/forms/form-elements/button/ColorsButtons.vue
 create mode 100644 src/components/forms/form-elements/button/IconColor.vue
 create mode 100644 src/components/forms/form-elements/button/IconColorSizes.vue
 create mode 100644 src/components/forms/form-elements/button/IconsButtons.vue
 create mode 100644 src/components/forms/form-elements/button/OutlineIconColor.vue
 create mode 100644 src/components/forms/form-elements/button/OutlineSizes.vue
 create mode 100644 src/components/forms/form-elements/button/OutlinedButtons.vue
 create mode 100644 src/components/forms/form-elements/button/OutlinedIconSize.vue
 rename {components/ui-components => src/components/forms/form-elements}/button/SizeButtons.vue (100%)
 create mode 100644 src/components/forms/form-elements/button/TextButtons.vue
 create mode 100644 src/components/forms/form-elements/button/buttonGroup/Default.vue
 create mode 100644 src/components/forms/form-elements/button/buttonGroup/Outlined.vue
 create mode 100644 src/components/forms/form-elements/button/buttonGroup/Plain.vue
 create mode 100644 src/components/forms/form-elements/button/buttonGroup/Text.vue
 create mode 100644 src/components/forms/form-elements/checkbox/BasicCheckboxes.vue
 create mode 100644 src/components/forms/form-elements/checkbox/ColorCheckboxes.vue
 create mode 100644 src/components/forms/form-elements/checkbox/CustomCheckbox.vue
 create mode 100644 src/components/forms/form-elements/checkbox/LabelCheckboxes.vue
 create mode 100644 src/components/forms/form-elements/combobox/ComboboxDense.vue
 create mode 100644 src/components/forms/form-elements/combobox/ComboboxMultiple.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputAppendPrepend.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputError.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputHideDetails.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputLoading.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputMultipleError.vue
 create mode 100644 src/components/forms/form-elements/custominput/InputRules.vue
 create mode 100644 src/components/forms/form-elements/datetime/DatePicker.vue
 create mode 100644 src/components/forms/form-elements/datetime/TimePicker.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputAccept.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputChips.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputCounter.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputDensity.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputMultiple.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputPrepand.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputSelection.vue
 create mode 100644 src/components/forms/form-elements/fileinput/FileInputValidation.vue
 create mode 100644 src/components/forms/form-elements/radio/Color.vue
 create mode 100644 src/components/forms/form-elements/radio/Default.vue
 create mode 100644 src/components/forms/form-elements/radio/DefaultDirection.vue
 create mode 100644 src/components/forms/form-elements/radio/InlineDirection.vue
 create mode 100644 src/components/forms/form-elements/radio/Label.vue
 create mode 100644 src/components/forms/form-elements/radio/LabelwithColor.vue
 create mode 100644 src/components/forms/form-elements/select/SelectChip.vue
 create mode 100644 src/components/forms/form-elements/select/SelectDefault.vue
 create mode 100644 src/components/forms/form-elements/select/SelectDensity.vue
 create mode 100644 src/components/forms/form-elements/select/SelectMultiple.vue
 create mode 100644 src/components/forms/form-elements/select/SelectReadOnly.vue
 create mode 100644 src/components/forms/form-elements/slider/Custom.vue
 create mode 100644 src/components/forms/form-elements/slider/Default.vue
 create mode 100644 src/components/forms/form-elements/slider/Disabled.vue
 create mode 100644 src/components/forms/form-elements/slider/Steps.vue
 create mode 100644 src/components/forms/form-elements/slider/TickSize.vue
 create mode 100644 src/components/forms/form-elements/slider/Ticks.vue
 create mode 100644 src/components/forms/form-elements/slider/Vertical.vue
 create mode 100644 src/components/forms/form-elements/slider/Volume.vue
 create mode 100644 src/components/forms/form-elements/stepper/Alternatelabel.vue
 create mode 100644 src/components/forms/form-elements/stepper/AlternativeErrors.vue
 create mode 100644 src/components/forms/form-elements/stepper/EditableStepper.vue
 create mode 100644 src/components/forms/form-elements/stepper/ItemStepper.vue
 create mode 100644 src/components/forms/form-elements/stepper/LinearSteppers.vue
 create mode 100644 src/components/forms/form-elements/stepper/NoEditable.vue
 create mode 100644 src/components/forms/form-elements/stepper/OptionalSteps.vue
 create mode 100644 src/components/forms/form-elements/switch/Colors.vue
 create mode 100644 src/components/forms/form-elements/switch/Default.vue
 create mode 100644 src/components/forms/form-elements/switch/Inset.vue
 create mode 100644 src/components/forms/form-elements/switch/InsetColors.vue
 create mode 100644 src/components/forms/form-elements/switch/Label.vue
 create mode 100644 src/components/forms/form-elements/switch/States.vue
 create mode 100644 src/components/forms/form-elements/treeview/Activatable.vue
 create mode 100644 src/components/forms/form-elements/treeview/Basic.vue
 create mode 100644 src/components/forms/form-elements/treeview/Colors.vue
 create mode 100644 src/components/forms/form-elements/treeview/DenseMode.vue
 create mode 100644 src/components/forms/form-elements/treeview/OpenAll.vue
 create mode 100644 src/components/forms/form-horizontal/AccountDetailsTab.vue
 create mode 100644 src/components/forms/form-horizontal/BasicLayout.vue
 create mode 100644 src/components/forms/form-horizontal/BasicWithIcons.vue
 create mode 100644 src/components/forms/form-horizontal/Collapsible.vue
 create mode 100644 src/components/forms/form-horizontal/FormLabelAlign.vue
 create mode 100644 src/components/forms/form-horizontal/FormSeprator.vue
 create mode 100644 src/components/forms/form-horizontal/PersonalInfoTab.vue
 create mode 100644 src/components/forms/form-horizontal/SocialLinksTab.vue
 create mode 100644 src/components/forms/form-layouts/BasicHeaderForm.vue
 create mode 100644 src/components/forms/form-layouts/DefaultForm.vue
 create mode 100644 src/components/forms/form-layouts/DisabledForm.vue
 create mode 100644 src/components/forms/form-layouts/FormLeftIcon.vue
 create mode 100644 src/components/forms/form-layouts/FormRightIcon.vue
 create mode 100644 src/components/forms/form-layouts/InputVarients.vue
 create mode 100644 src/components/forms/form-layouts/OrdinaryForm.vue
 create mode 100644 src/components/forms/form-validation/CheckBox.vue
 create mode 100644 src/components/forms/form-validation/MailValidation.vue
 create mode 100644 src/components/forms/form-validation/OnType.vue
 create mode 100644 src/components/forms/form-validation/Radio.vue
 create mode 100644 src/components/forms/form-validation/Select.vue
 create mode 100644 src/components/forms/form-validation/TextInput.vue
 create mode 100644 src/components/forms/form-validation/VeeValidation.vue
 create mode 100644 src/components/forms/form-vertical/AccountDetailsTab.vue
 create mode 100644 src/components/forms/form-vertical/BasicLayout.vue
 create mode 100644 src/components/forms/form-vertical/BasicWithIcons.vue
 create mode 100644 src/components/forms/form-vertical/Collapsible.vue
 create mode 100644 src/components/forms/form-vertical/FormSeprator.vue
 create mode 100644 src/components/forms/form-vertical/PersonalInfoTab.vue
 create mode 100644 src/components/forms/form-vertical/SocialLinksTab.vue
 create mode 100644 src/components/forms/plugins/editor/EditorMenu.vue
 create mode 100644 src/components/forms/plugins/editor/EditorMenubar.vue
 rename {components => src/components}/layout/full/Main.vue (100%)
 rename {components => src/components}/layout/full/customizer/Customizer.vue (100%)
 rename {components => src/components}/layout/full/logo/Logo.vue (100%)
 rename {components => src/components}/layout/full/logo/LogoDark.vue (100%)
 rename {components => src/components}/layout/full/logo/LogoLight.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/AppsLink.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/LanguageDD.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/Navigations.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/NotificationDD.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/ProfileDD.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/RightMobileSidebar.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/Searchbar.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/ThemeToggler.vue (100%)
 rename {components => src/components}/layout/full/vertical-header/VerticalHeader.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/Dropdown/Dropdown.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/Icon.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/MinIconItems.ts (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/NavGroup/NavGroup.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/NavItem/NavItem.vue (100%)
 rename {components => src/components}/layout/full/vertical-sidebar/VerticalSidebar.vue (85%)
 rename {components => src/components}/layout/full/vertical-sidebar/sidebarItem.ts (99%)
 create mode 100644 src/components/pages/account-settings/AccountTab.vue
 create mode 100644 src/components/pages/account-settings/BillsTab.vue
 create mode 100644 src/components/pages/account-settings/NotificationTab.vue
 create mode 100644 src/components/pages/account-settings/SecurityTab.vue
 create mode 100644 src/components/pages/faq/FaqQuestion.vue
 create mode 100644 src/components/pages/faq/StillHaveQuestions.vue
 create mode 100644 src/components/pages/search-results/SearchLinks.vue
 create mode 100644 src/components/shared/AppBaseCard.vue
 create mode 100644 src/components/shared/AppEmailCard.vue
 create mode 100644 src/components/shared/BaseBreadcrumb.vue
 rename {components => src/components}/shared/CardHeaderFooter.vue (100%)
 rename {components => src/components}/shared/UiChildCard.vue (100%)
 rename {components => src/components}/shared/UiParentCard.vue (88%)
 rename {components => src/components}/shared/UiParentCardLogo.vue (92%)
 rename {components => src/components}/shared/UiTableCard.vue (100%)
 rename {components => src/components}/shared/UiTextfieldPrimary.vue (100%)
 rename {components => src/components}/shared/WidgetCard.vue (100%)
 rename {components => src/components}/shared/WidgetCardv2.vue (100%)
 rename {components => src/components}/style-components/shadow/Shadow.vue (100%)
 create mode 100644 src/components/style-components/typography/DefaultText.vue
 create mode 100644 src/components/style-components/typography/Heading.vue
 create mode 100644 src/components/style-components/typography/Opacity.vue
 create mode 100644 src/components/style-components/typography/TextAlignment.vue
 create mode 100644 src/components/style-components/typography/TextDecoration.vue
 create mode 100644 src/components/ui-components/alert/Action.vue
 rename {components => src/components}/ui-components/alert/Basic.vue (100%)
 rename {components => src/components}/ui-components/alert/Closable.vue (100%)
 create mode 100644 src/components/ui-components/alert/Description.vue
 rename {components => src/components}/ui-components/alert/Filled.vue (100%)
 create mode 100644 src/components/ui-components/alert/Icons.vue
 create mode 100644 src/components/ui-components/alert/Outlined.vue
 create mode 100644 src/components/ui-components/avatar/BasicAvatar.vue
 create mode 100644 src/components/ui-components/avatar/IconAvatar.vue
 create mode 100644 src/components/ui-components/avatar/ImageAvatar.vue
 create mode 100644 src/components/ui-components/avatar/LetterAvatar.vue
 create mode 100644 src/components/ui-components/avatar/SizeAvatar.vue
 create mode 100644 src/components/ui-components/avatar/VariantAvatar.vue
 create mode 100644 src/components/ui-components/banners/Banner2.vue
 create mode 100644 src/components/ui-components/banners/Banner3.vue
 create mode 100644 src/components/ui-components/banners/Banner4.vue
 create mode 100644 src/components/ui-components/banners/Banner5.vue
 create mode 100644 src/components/ui-components/banners/Banner6.vue
 create mode 100644 src/components/ui-components/banners/WelcomCard.vue
 rename {components => src/components}/ui-components/button/BaseButtons.vue (100%)
 rename {components => src/components}/ui-components/button/ColorsButtons.vue (100%)
 rename {components => src/components}/ui-components/button/IconColorSizes.vue (100%)
 rename {components => src/components}/ui-components/button/OutlinedButtons.vue (100%)
 create mode 100644 src/components/ui-components/button/SizeButtons.vue
 rename {components => src/components}/ui-components/button/TextButtons.vue (100%)
 create mode 100644 src/components/ui-components/cards/BlogCards.vue
 rename {components => src/components}/ui-components/cards/CardsContentWrap.vue (100%)
 rename {components => src/components}/ui-components/cards/CardsMedia.vue (100%)
 rename {components => src/components}/ui-components/cards/CardsProps.vue (100%)
 rename {components => src/components}/ui-components/cards/CardsSlots.vue (100%)
 rename {components => src/components}/ui-components/cards/CardsTwitter.vue (100%)
 rename {components => src/components}/ui-components/cards/CardsWeather.vue (100%)
 create mode 100644 src/components/ui-components/cards/FollowerCards.vue
 create mode 100644 src/components/ui-components/cards/GiftCards.vue
 create mode 100644 src/components/ui-components/cards/MusicCards.vue
 create mode 100644 src/components/ui-components/cards/PaymentGateways.vue
 create mode 100644 src/components/ui-components/cards/ProductCards.vue
 create mode 100644 src/components/ui-components/cards/ProfileCards.vue
 create mode 100644 src/components/ui-components/cards/Settings.vue
 create mode 100644 src/components/ui-components/cards/UpcommingActivityCard.vue
 create mode 100644 src/components/ui-components/cards/UserCards.vue
 create mode 100644 src/components/ui-components/charts/CurrentValue.vue
 create mode 100644 src/components/ui-components/charts/Customer.vue
 create mode 100644 src/components/ui-components/charts/Earned.vue
 create mode 100644 src/components/ui-components/charts/Followers.vue
 create mode 100644 src/components/ui-components/charts/MonthlyEarnings.vue
 create mode 100644 src/components/ui-components/charts/MostVisited.vue
 create mode 100644 src/components/ui-components/charts/PageImpression.vue
 create mode 100644 src/components/ui-components/charts/Projects.vue
 create mode 100644 src/components/ui-components/charts/RevenueUpdates.vue
 create mode 100644 src/components/ui-components/charts/SalesOverview.vue
 create mode 100644 src/components/ui-components/charts/TotalEarning.vue
 create mode 100644 src/components/ui-components/charts/Views.vue
 create mode 100644 src/components/ui-components/charts/YearlyBreakup.vue
 create mode 100644 src/components/ui-components/charts/YearlySales.vue
 create mode 100644 src/components/ui-components/chip/Closable.vue
 create mode 100644 src/components/ui-components/chip/CustomIcon.vue
 create mode 100644 src/components/ui-components/chip/CustomIconOutlined.vue
 create mode 100644 src/components/ui-components/chip/Disabled.vue
 create mode 100644 src/components/ui-components/chip/FilledColor.vue
 create mode 100644 src/components/ui-components/chip/LabelChip.vue
 create mode 100644 src/components/ui-components/chip/Outlined.vue
 create mode 100644 src/components/ui-components/chip/Sizes.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsActivator.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsForm.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsFullscreen.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsModel.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsNested.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsPersistent.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsScrollable.vue
 create mode 100644 src/components/ui-components/dialogs/DialogsTransitions.vue
 create mode 100644 src/components/ui-components/expansionpanel/Advance.vue
 create mode 100644 src/components/ui-components/expansionpanel/Basic.vue
 create mode 100644 src/components/ui-components/expansionpanel/CustomizedIcon.vue
 create mode 100644 src/components/ui-components/expansionpanel/DefaultExpand.vue
 create mode 100644 src/components/ui-components/expansionpanel/Inset.vue
 create mode 100644 src/components/ui-components/expansionpanel/Popout.vue
 create mode 100644 src/components/ui-components/list/CustomAlignList.vue
 create mode 100644 src/components/ui-components/list/DisabledList.vue
 create mode 100644 src/components/ui-components/list/FolderList.vue
 create mode 100644 src/components/ui-components/list/NestedList.vue
 create mode 100644 src/components/ui-components/list/RoundedList.vue
 create mode 100644 src/components/ui-components/list/ScrollableList.vue
 create mode 100644 src/components/ui-components/list/SimpleList.vue
 create mode 100644 src/components/ui-components/list/SwitchList.vue
 create mode 100644 src/components/ui-components/menus/MenusActivatorTooltip.vue
 create mode 100644 src/components/ui-components/menus/MenusAnchor.vue
 create mode 100644 src/components/ui-components/menus/MenusHover.vue
 create mode 100644 src/components/ui-components/menus/MenusPopover.vue
 create mode 100644 src/components/ui-components/ratting/BasicRatting.vue
 create mode 100644 src/components/ui-components/ratting/ClearableRatting.vue
 create mode 100644 src/components/ui-components/ratting/HalfRatting.vue
 create mode 100644 src/components/ui-components/ratting/HoverRatting.vue
 create mode 100644 src/components/ui-components/ratting/IconsRatting.vue
 create mode 100644 src/components/ui-components/ratting/LabelRatting.vue
 create mode 100644 src/components/ui-components/ratting/LengthRatting.vue
 create mode 100644 src/components/ui-components/ratting/ReadOnlyRatting.vue
 create mode 100644 src/components/ui-components/ratting/SizeRatting.vue
 create mode 100644 src/components/ui-components/tabs/AlignCenterTabs.vue
 create mode 100644 src/components/ui-components/tabs/AlignEndTabs.vue
 create mode 100644 src/components/ui-components/tabs/BasicTabs.vue
 create mode 100644 src/components/ui-components/tabs/CenterTabs.vue
 create mode 100644 src/components/ui-components/tabs/ColorTabs.vue
 create mode 100644 src/components/ui-components/tabs/CustomIcons.vue
 create mode 100644 src/components/ui-components/tabs/DisableTabs.vue
 create mode 100644 src/components/ui-components/tabs/IconTabs.vue
 create mode 100644 src/components/ui-components/tabs/IconsWithLabelTabs.vue
 create mode 100644 src/components/ui-components/tooltip/IconTooltip.vue
 create mode 100644 src/components/ui-components/tooltip/SimpleTooltip.vue
 create mode 100644 src/components/ui-components/tooltip/ToggleTolltip.vue
 create mode 100644 src/components/widgets/banners/Banner2.vue
 create mode 100644 src/components/widgets/banners/Banner3.vue
 create mode 100644 src/components/widgets/banners/Banner4.vue
 create mode 100644 src/components/widgets/banners/Banner5.vue
 create mode 100644 src/components/widgets/banners/Banner6.vue
 create mode 100644 src/components/widgets/banners/WelcomCard.vue
 create mode 100644 src/components/widgets/cards/BlogCards.vue
 create mode 100644 src/components/widgets/cards/FollowerCards.vue
 create mode 100644 src/components/widgets/cards/GiftCards.vue
 create mode 100644 src/components/widgets/cards/MusicCards.vue
 create mode 100644 src/components/widgets/cards/PaymentGateways.vue
 create mode 100644 src/components/widgets/cards/ProductCards.vue
 create mode 100644 src/components/widgets/cards/ProfileCards.vue
 create mode 100644 src/components/widgets/cards/Settings.vue
 create mode 100644 src/components/widgets/cards/UpcommingActivityCard.vue
 create mode 100644 src/components/widgets/cards/UserCards.vue
 create mode 100644 src/components/widgets/charts/CurrentValue.vue
 create mode 100644 src/components/widgets/charts/Customer.vue
 create mode 100644 src/components/widgets/charts/Earned.vue
 create mode 100644 src/components/widgets/charts/Followers.vue
 create mode 100644 src/components/widgets/charts/MonthlyEarnings.vue
 create mode 100644 src/components/widgets/charts/MostVisited.vue
 create mode 100644 src/components/widgets/charts/PageImpression.vue
 create mode 100644 src/components/widgets/charts/Projects.vue
 create mode 100644 src/components/widgets/charts/RevenueUpdates.vue
 create mode 100644 src/components/widgets/charts/SalesOverview.vue
 create mode 100644 src/components/widgets/charts/TotalEarning.vue
 create mode 100644 src/components/widgets/charts/Views.vue
 create mode 100644 src/components/widgets/charts/YearlyBreakup.vue
 create mode 100644 src/components/widgets/charts/YearlySales.vue
 rename {composables => src/composables}/useSessionLogin.ts (100%)
 rename config.ts => src/config.ts (100%)
 rename {data => src/data}/dashboard/dashboardData.ts (100%)
 rename error.vue => src/error.vue (100%)
 create mode 100644 src/layouts/Logo.vue
 create mode 100644 src/layouts/LogoIcon.vue
 rename {layouts => src/layouts}/blank.vue (100%)
 rename {layouts => src/layouts}/default.vue (100%)
 rename {middleware => src/middleware}/auth.ts (100%)
 rename nuxt.config.ts => src/nuxt.config.ts (95%)
 rename package-lock.json => src/package-lock.json (93%)
 rename package.json => src/package.json (82%)
 rename {pages => src/pages}/Icons.vue (100%)
 rename {pages => src/pages}/SambelPage_copy.vue (100%)
 rename {pages => src/pages}/Sample-Page.vue (100%)
 rename {pages => src/pages}/SamplePage.vue (100%)
 rename {pages => src/pages}/auth/401.vue (100%)
 rename {pages => src/pages}/auth/Login.vue (100%)
 rename {pages => src/pages}/auth/Register.vue (100%)
 rename {pages => src/pages}/dashboards/dashboard1.vue (100%)
 rename {pages => src/pages}/dashboards/dashboard2.vue (100%)
 rename {pages => src/pages}/dashboards/dashboard3.vue (100%)
 create mode 100644 src/pages/forms/Editor.vue
 create mode 100644 src/pages/forms/Form-Validation.vue
 create mode 100644 src/pages/forms/form-elements/Autocomplete.vue
 create mode 100644 src/pages/forms/form-elements/Button.vue
 create mode 100644 src/pages/forms/form-elements/Checkbox.vue
 create mode 100644 src/pages/forms/form-elements/Date-Time.vue
 create mode 100644 src/pages/forms/form-elements/Radio.vue
 create mode 100644 src/pages/forms/form-elements/Slider.vue
 create mode 100644 src/pages/forms/form-elements/Stepper.vue
 create mode 100644 src/pages/forms/form-elements/Switch.vue
 create mode 100644 src/pages/forms/form-elements/TextField.vue
 create mode 100644 src/pages/forms/form-elements/Time-Picker.vue
 rename {pages => src/pages}/index.vue (100%)
 create mode 100644 src/pages/pages/Account-Settings.vue
 create mode 100644 src/pages/tables/datatables/CrudTable.vue
 create mode 100644 src/pages/tables/datatables/Filtering.vue
 create mode 100644 src/pages/tables/datatables/Selection.vue
 create mode 100644 src/pages/ui-components/Accordion.vue
 rename {pages => src/pages}/ui-components/Alerts.vue (100%)
 create mode 100644 src/pages/ui-components/Avatar.vue
 rename {pages => src/pages}/ui-components/Buttons.vue (100%)
 rename {pages => src/pages}/ui-components/Cards.vue (100%)
 create mode 100644 src/pages/ui-components/Chip.vue
 create mode 100644 src/pages/ui-components/Dialogs.vue
 create mode 100644 src/pages/ui-components/List.vue
 create mode 100644 src/pages/ui-components/Menus.vue
 rename {pages => src/pages}/ui-components/Tables.vue (100%)
 create mode 100644 src/pages/ui-components/Tabs.vue
 create mode 100644 src/pages/ui-components/Tooltip.vue
 create mode 100644 src/pages/ui-components/Typography.vue
 rename {pages => src/pages}/ui/Shadow.vue (100%)
 rename {pages => src/pages}/ui/Typography.vue (100%)
 create mode 100644 src/pages/widgets/Banners.vue
 create mode 100644 src/pages/widgets/Cards.vue
 create mode 100644 src/pages/widgets/Charts.vue
 rename {plugins => src/plugins}/i18n.ts (100%)
 rename {plugins => src/plugins}/vuetify.ts (100%)
 rename pnpm-lock.yaml => src/pnpm-lock.yaml (100%)
 rename {public => src/public}/favicon.ico (100%)
 rename {public => src/public}/favicon.svg (100%)
 rename {public => src/public}/images/backgrounds/errorimg.svg (100%)
 rename {public => src/public}/images/backgrounds/rupee.png (100%)
 rename {public => src/public}/images/blog/blog-img1.jpg (100%)
 rename {public => src/public}/images/blog/blog-img2.jpg (100%)
 rename {public => src/public}/images/blog/blog-img3.jpg (100%)
 rename {public => src/public}/images/logos/dark-logo.svg (100%)
 rename {public => src/public}/images/logos/icon.svg (100%)
 rename {public => src/public}/images/logos/light-logo.svg (100%)
 rename {public => src/public}/images/logos/logo-adminmart.svg (100%)
 rename {public => src/public}/images/logos/logo-icon.svg (100%)
 rename {public => src/public}/images/logos/logo.svg (100%)
 rename {public => src/public}/images/products/dash-prd-1.jpg (100%)
 rename {public => src/public}/images/products/dash-prd-2.jpg (100%)
 rename {public => src/public}/images/products/dash-prd-3.jpg (100%)
 rename {public => src/public}/images/products/dash-prd-4.jpg (100%)
 rename {public => src/public}/images/profile/user-1.jpg (100%)
 rename {public => src/public}/images/profile/user-2.jpg (100%)
 rename {public => src/public}/images/profile/user-3.jpg (100%)
 rename {public => src/public}/images/technology/angular-cat-icon.svg (100%)
 rename {public => src/public}/images/technology/bt-cat-icon.svg (100%)
 rename {public => src/public}/images/technology/next-cat-icon.svg (100%)
 rename {public => src/public}/images/technology/nuxt-cat-icon.svg (100%)
 rename {public => src/public}/images/technology/react-cat-icon.svg (100%)
 rename {public => src/public}/images/technology/tailwind-icon.svg (100%)
 rename {public => src/public}/images/technology/vue-cat-icon.svg (100%)
 rename {scss => src/scss}/_override.scss (100%)
 rename {scss => src/scss}/_variables.scss (100%)
 rename {scss => src/scss}/components/_VAlert.scss (100%)
 rename {scss => src/scss}/components/_VBreadcrumb.scss (100%)
 rename {scss => src/scss}/components/_VButtons.scss (100%)
 rename {scss => src/scss}/components/_VCard.scss (100%)
 rename {scss => src/scss}/components/_VCarousel.scss (100%)
 rename {scss => src/scss}/components/_VChip.scss (100%)
 rename {scss => src/scss}/components/_VDatatables.scss (100%)
 rename {scss => src/scss}/components/_VExpansionpanel.scss (100%)
 rename {scss => src/scss}/components/_VField.scss (100%)
 rename {scss => src/scss}/components/_VInput.scss (100%)
 rename {scss => src/scss}/components/_VLabs.scss (100%)
 rename {scss => src/scss}/components/_VList.scss (100%)
 rename {scss => src/scss}/components/_VNavigationDrawer.scss (100%)
 rename {scss => src/scss}/components/_VPagination.scss (100%)
 rename {scss => src/scss}/components/_VSelectionControl.scss (100%)
 rename {scss => src/scss}/components/_VShadow.scss (100%)
 rename {scss => src/scss}/components/_VStepper.scss (100%)
 rename {scss => src/scss}/components/_VSwitch.scss (100%)
 rename {scss => src/scss}/components/_VTable.scss (100%)
 rename {scss => src/scss}/components/_VTabs.scss (100%)
 rename {scss => src/scss}/components/_VTextField.scss (100%)
 rename {scss => src/scss}/components/_VTextarea.scss (100%)
 rename {scss => src/scss}/components/_VTooltip.scss (100%)
 rename {scss => src/scss}/front/_general.scss (100%)
 rename {scss => src/scss}/front/_header.scss (100%)
 rename {scss => src/scss}/landingpage/_general.scss (100%)
 rename {scss => src/scss}/landingpage/_header.scss (100%)
 rename {scss => src/scss}/layout/_container.scss (100%)
 rename {scss => src/scss}/layout/_customizer.scss (100%)
 rename {scss => src/scss}/layout/_dark.scss (100%)
 rename {scss => src/scss}/layout/_horizontal.scss (100%)
 rename {scss => src/scss}/layout/_reboot.scss (100%)
 rename {scss => src/scss}/layout/_rtl.scss (100%)
 rename {scss => src/scss}/layout/_sidebar.scss (100%)
 rename {scss => src/scss}/layout/_text.scss (100%)
 rename {scss => src/scss}/layout/_topbar.scss (100%)
 rename {scss => src/scss}/pages/_apps.scss (100%)
 rename {scss => src/scss}/pages/_auth.scss (100%)
 rename {scss => src/scss}/pages/_dashboards.scss (100%)
 rename {scss => src/scss}/pages/_editor.scss (100%)
 rename {scss => src/scss}/style.scss (100%)
 rename {scssold => src/scssold}/_override.scss (100%)
 rename {scssold => src/scssold}/_variables.scss (100%)
 rename {scssold => src/scssold}/components/_VButtons.scss (100%)
 rename {scssold => src/scssold}/components/_VCard.scss (100%)
 rename {scssold => src/scssold}/components/_VField.scss (100%)
 rename {scssold => src/scssold}/components/_VInput.scss (100%)
 rename {scssold => src/scssold}/components/_VNavigationDrawer.scss (100%)
 rename {scssold => src/scssold}/components/_VShadow.scss (100%)
 rename {scssold => src/scssold}/components/_VTable.scss (100%)
 rename {scssold => src/scssold}/layout/_container.scss (100%)
 rename {scssold => src/scssold}/layout/_sidebar.scss (100%)
 rename {scssold => src/scssold}/layout/_topbar.scss (100%)
 rename {scssold => src/scssold}/pages/_dashboards.scss (100%)
 rename {scssold => src/scssold}/style.scss (100%)
 rename {server => src/server}/api/auth/[...].ts (100%)
 rename {server => src/server}/api/session.get.ts (100%)
 rename {server => src/server}/api/token.get.ts (100%)
 rename {store => src/store}/customizer.ts (100%)
 rename {stores => src/stores}/userInfo.ts.ex (100%)
 rename {theme => src/theme}/DarkTheme.ts (100%)
 rename {theme => src/theme}/LightTheme.ts (100%)
 rename tsconfig.json => src/tsconfig.json (100%)
 rename {types => src/types}/dashboard/index.ts (100%)
 rename {types => src/types}/sessionUserTypes.ts (100%)
 rename {types => src/types}/themeTypes/ThemeType.ts (100%)
 rename {utils => src/utils}/UpdateColors.ts (100%)
 rename {utils => src/utils}/axios.ts (100%)
 rename {utils => src/utils}/helper.ts (100%)
 rename {utils => src/utils}/locales/ar.json (100%)
 rename {utils => src/utils}/locales/en.json (100%)
 rename {utils => src/utils}/locales/fr.json (100%)
 rename {utils => src/utils}/locales/messages.ts (100%)
 rename {utils => src/utils}/locales/zh.json (100%)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..502bb6e
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,557 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="6778ea38-eb15-4937-9a8c-cd2ced17d3d1" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/Dockerfile" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.editorconfig" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.env.example" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.npmrc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/blog/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/chat/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/contact/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/ecommerce/Editproduc.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/ecommerce/billing-address.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/ecommerce/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/ecommerce/products.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/email/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/invoice/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/kanban/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/notes/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/tickets/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/userprofile/followers.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/userprofile/friends.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/userprofile/gallery.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/userprofile/photos.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/apps/userprofile/posts.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/dashboard/dashboard1.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/dashboard/dashboard2.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/dashboard/dashboard3.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/datatable/dataTable.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/pages/accountNotification.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/pages/auth.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/pages/faqData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/pages/pricingData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/pages/searchLinks.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/table/basicTables.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/components/widget/card.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/front-pages/PagesData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/headerData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/landingpage/curoselData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/landingpage/lpPage.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/_mockApis/mockAdapter.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/app.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/active-bg.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/blog.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/bronze.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/business-woman-checking-her-mail.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/empty_mail.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/errorimg.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/gold.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/img1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/kanban-img-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/kanban-img-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/kanban-img-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/kanban-img-4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/line-bg-2.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/line-bg.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/login-bg.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/login-bg.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/login-side.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/maintenance.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/mega-dd-bg.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/my-card.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/nyan-cat.gif" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/payment.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/preview-img.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/profile-bg.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/profilebg.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/silver.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/track-bg.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/unauthorization.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/weather.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/weatherbg.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/website-under-construction.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/welcome-bg.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/backgrounds/welcome-bg2.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img10.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img11.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img5.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img6.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img7.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img8.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/blog/blog-img9.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/breadcrumb/ChatBc.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/breadcrumb/emailSv.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/chat/icon-adobe.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/chat/icon-chrome.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/chat/icon-figma.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/chat/icon-javascript.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/chat/icon-zip-folder.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/flag/icon-flag-en.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/flag/icon-flag-fr.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/flag/icon-flag-ro.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/flag/icon-flag-vn.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/flag/icon-flag-zh.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/contact-icon.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/facebook.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/feature-image.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/instagram.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/left-shape.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/left-widget.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/main-banner.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/quotes.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/right-shape.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/right-widget.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/twitter.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/white-icon-logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/background/white-logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/capgemini.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/dell.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/infosys.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/intel.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/oracle.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/componies/samsung.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/leaders/leader1.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/leaders/leader2.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/leaders/leader3.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/leaders/leader4.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/leaders/leader5.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/american-exp.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/dinners-clb.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/discover.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/jcb.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/maesro.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/master.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/paypal.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/payments/visa.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Apexchart.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Pinia.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Typescript.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Vite.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Vuejs.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/front-pages/technology/Vuetify.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/kanban/task-img1.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/kanban/task-img2.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-blog-detail.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-blog.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-calendar.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-chat.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-contact.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-email.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-invoice.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-kanban.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-note.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-product-detail.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-productlist.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-shop.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/apps/app-user-profile.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/background/c2a.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/background/slider-group.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/bannerimg1.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/bannerimg2.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-dark.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-default.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-horizontal.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-main.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-mini.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/demos/demo-rtl.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/favicon.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-apexchart.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-figma.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-pinia.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-ts.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-vc.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-vue.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frameworks/logo-vuetify.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/aboutus.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/blogpage.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/contactus.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/homepage.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/portfolio.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/frontpages/pricing.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/shape/badge.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/shape/line-bg-2.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/shape/line-bg.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/shape/shape-1.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/landingpage/shape/shape-2.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/logos/logo-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/logos/logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/dash-prd-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/dash-prd-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/dash-prd-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/dash-prd-4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/empty-shopping-bag.gif" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/empty-shopping-cart.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/payment-complete.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/payment.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/product-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/product-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/product-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/product-4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s10.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s11.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s12.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s5.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s6.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s7.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s8.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/products/s9.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-10.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-11.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-12.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-13.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-14.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-15.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-5.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-6.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-7.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-8.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/profile/user-9.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/apple-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/cart-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/facebook-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/google-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-account.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-adobe.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-bars.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-briefcase.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-chrome.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-connect.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-application.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-cart.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-chat.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-date.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-invoice.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-lifebuoy.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-message-box.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-dd-mobile.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-favorites.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-figma.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-inbox.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-javascript.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-mailbox.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-master-card-2.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-master-card.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-office-bag-2.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-office-bag.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-paypal.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-pie.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-speech-bubble.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-tasks.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-user-male.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/icon-zip-folder.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/mastercard.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/assets/images/svgs/paypal.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/BoxedLoginForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/BoxedRegisterForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/LoginForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/RegisterForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/ResetForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/TwoStepForm.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/auth/Unauthorization.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/BlogCards.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/DailyActivities.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/NewCustomer.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/RevenueCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/RevenueProducts.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboard/TotalIncome.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/BlogCards.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/DailyActivities.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/NewCustomer.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/RevenueCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/RevenueProducts.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/TotalIncome.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/CustomerCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/CustomerChart.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/Performence.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/ProjectCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/RevenueForcast.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/RevenueProducts.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/SalesOverview.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/TotalSettelment.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/WelcomeCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard1/index.vue.ex" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/AnnualProfit.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/DailyActivities.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/NewCustomer.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/ProfitCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/ProifileCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/RevenueCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/SalesFromLocation.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/SubscriptionCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/TotalIncome.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/UsersChart.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/WeeklySchedule.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard2/WeeklyState.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard3/Calendarcard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/dashboard3/IconCards.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/dashboards/snackbar.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/Main.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/customizer/Customizer.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/logo/Logo.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/logo/LogoDark.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/logo/LogoLight.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/AppsLink.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/LanguageDD.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/Navigations.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/NotificationDD.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/ProfileDD.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/RightMobileSidebar.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/Searchbar.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/ThemeToggler.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-header/VerticalHeader.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/Icon.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/MinIconItems.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/NavItem/NavItem.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/VerticalSidebar.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/layout/full/vertical-sidebar/sidebarItem.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/CardHeaderFooter.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/UiChildCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/UiParentCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/UiParentCardLogo.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/UiTableCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/UiTextfieldPrimary.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/WidgetCard.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/shared/WidgetCardv2.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/style-components/shadow/Shadow.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/style-components/typography/DefaultText.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/style-components/typography/Heading.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/alert/Basic.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/alert/Closable.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/alert/Filled.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/BaseButtons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/ColorsButtons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/IconColorSizes.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/OutlinedButtons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/SizeButtons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/button/TextButtons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsContentWrap.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsMedia.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsProps.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsSlots.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsTwitter.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ui-components/cards/CardsWeather.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/composables/useSessionLogin.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/config.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/data/dashboard/dashboardData.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/error.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/layouts/blank.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/layouts/default.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/middleware/auth.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/nuxt.config.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/Icons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/SambelPage_copy.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/Sample-Page.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/SamplePage.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/auth/401.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/auth/Login.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/auth/Register.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/dashboards/dashboard1.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/dashboards/dashboard2.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/dashboards/dashboard3.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/index.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui-components/Alerts.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui-components/Buttons.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui-components/Cards.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui-components/Tables.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui/Shadow.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/ui/Typography.vue" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/plugins/i18n.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/plugins/vuetify.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/favicon.ico" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/favicon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/backgrounds/errorimg.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/backgrounds/rupee.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/blog/blog-img1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/blog/blog-img2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/blog/blog-img3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/dark-logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/light-logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/logo-adminmart.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/logo-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/logos/logo.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/products/dash-prd-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/products/dash-prd-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/products/dash-prd-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/products/dash-prd-4.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/profile/user-1.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/profile/user-2.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/profile/user-3.jpg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/angular-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/bt-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/next-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/nuxt-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/react-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/tailwind-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/images/technology/vue-cat-icon.svg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/_override.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/_variables.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VAlert.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VBreadcrumb.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VButtons.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VCard.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VCarousel.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VChip.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VDatatables.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VExpansionpanel.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VField.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VInput.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VLabs.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VList.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VNavigationDrawer.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VPagination.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VSelectionControl.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VShadow.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VStepper.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VSwitch.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VTable.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VTabs.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VTextField.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VTextarea.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/components/_VTooltip.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/front/_general.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/front/_header.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/landingpage/_general.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/landingpage/_header.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_container.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_customizer.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_dark.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_horizontal.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_reboot.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_rtl.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_sidebar.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_text.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/layout/_topbar.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/pages/_apps.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/pages/_auth.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/pages/_dashboards.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/pages/_editor.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scss/style.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/_override.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/_variables.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VButtons.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VCard.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VField.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VInput.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VNavigationDrawer.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VShadow.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/components/_VTable.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/layout/_container.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/layout/_sidebar.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/layout/_topbar.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/pages/_dashboards.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/scssold/style.scss" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/server/api/auth/[...].ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/server/api/session.get.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/server/api/token.get.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/store/customizer.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/stores/userInfo.ts.ex" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/theme/DarkTheme.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/theme/LightTheme.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/types/dashboard/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/types/sessionUserTypes.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/types/themeTypes/ThemeType.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/UpdateColors.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/axios.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/helper.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/locales/ar.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/locales/en.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/locales/fr.json" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/locales/messages.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/utils/locales/zh.json" beforeDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="Dockerfile" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "customColor": "",
+  "associatedIndex": 7
+}]]></component>
+  <component name="ProjectId" id="2zcv6OS30tQaFL7YdDNhHQkWzwE" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "git-widget-placeholder": "master",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "ts.external.directory.path": "C:\\Users\\FIRMAN STIM\\Music\\full-matdash-nuxt-stim\\src\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
+  },
+  "keyToStringList": {
+    "com.intellij.ide.scratch.ScratchImplUtil$2/New Scratch File": [
+      "yaml"
+    ]
+  }
+}]]></component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-js-predefined-d6986cc7102b-09060db00ec0-JavaScript-WS-251.26927.40" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="6778ea38-eb15-4937-9a8c-cd2ced17d3d1" name="Changes" comment="" />
+      <created>1752043000254</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1752043000254</updated>
+      <workItem from="1752043001577" duration="2431000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..0caa372
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:22.14.0-alpine
+LABEL authors="FIRMAN STIM"
+
+# Set working directory
+WORKDIR /app/src
+
+# Copy package files first to leverage Docker cache
+COPY src/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY src/ .
+
+# Set host and port
+ENV HOST=0.0.0.0
+ENV PORT=3001
+
+# Expose port
+EXPOSE 3000
+
+# Start development server
+CMD ["npm", "run", "dev"]
\ No newline at end of file
diff --git a/components/style-components/typography/DefaultText.vue b/components/style-components/typography/DefaultText.vue
deleted file mode 100644
index 3dfcc6a..0000000
--- a/components/style-components/typography/DefaultText.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const colortext = ref(
-    [
-        ['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
-        ['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
-        ['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
-        ['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
-        ['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
-        ['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
-    ]
-)
-</script>
-<template>
-    <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
-        <div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
-            <v-card elevation="10" >
-                <div class="py-6 px-4">  
-                    <h5 :class="[cls1, '']">{{ name1 }} </h5>
-                    <div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
-                 </div>   
-            </v-card>
-        </div>    
-    </div>
-</template>
diff --git a/components/style-components/typography/Heading.vue b/components/style-components/typography/Heading.vue
deleted file mode 100644
index 829e8c2..0000000
--- a/components/style-components/typography/Heading.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const headings = ref([
-    ['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
-    ['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
-    ['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
-    ['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
-    ['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
-    ['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
-]);
-
-const subtext = ref(
-    [
-        ['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
-        ['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
-        ['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
-        ['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
-        ['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
-        ['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
-    ]
-)
-</script>
-<template>
-    <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
-        <div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
-            <v-card elevation="10">
-                <div class="py-6 px-4">
-                    <div :class="[cls, '']">{{ name }}</div>
-                    <div class="text-body-1">
-                        <div class="text-muted">{{ val }}</div>
-                    </div>
-                </div>
-            </v-card>
-        </div>
-    </div>
-
-    <div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
-        <div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
-            <v-card elevation="10">
-                <div class="py-6 px-4">
-                    <div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
-                    <div class="text-body-1 ">
-                        <div class="text-muted">{{ prop }}</div>
-                    </div>
-                </div>
-            </v-card>
-        </div>
-    </div>
-</template>
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..360b3ea
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,19 @@
+version: '3.8'
+services:
+  web:
+    container_name: nuxtsim
+    restart: always
+    build:
+      dockerfile: Dockerfile
+    ports:
+      - "3001:80"
+#    volumes:
+#      - ./src:/app
+    environment:
+      - KEYCLOAK_ID="keuangan-firman"
+      - KEYCLOAK_REALM="sandbox"
+      - KEYCLOAK_URL="https://auth.rssa.top"
+      - KEYCLOAK_SECRET="AA9XP2moa3pkGSgeRjX2UzYjYCgpM7Dj"
+      - KEYCLOAK_ISSUER="https://auth.rssa.top/realms/sandbox"
+    # volumes:
+    #   - .:/app
\ No newline at end of file
diff --git a/.editorconfig b/src/.editorconfig
similarity index 100%
rename from .editorconfig
rename to src/.editorconfig
diff --git a/.env.example b/src/.env.example
similarity index 100%
rename from .env.example
rename to src/.env.example
diff --git a/.gitignore b/src/.gitignore
similarity index 100%
rename from .gitignore
rename to src/.gitignore
diff --git a/.idea/.gitignore b/src/.idea/.gitignore
similarity index 100%
rename from .idea/.gitignore
rename to src/.idea/.gitignore
diff --git a/src/.idea/full-matdash-nuxt-stim.iml b/src/.idea/full-matdash-nuxt-stim.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/src/.idea/full-matdash-nuxt-stim.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/src/.idea/modules.xml b/src/.idea/modules.xml
new file mode 100644
index 0000000..4070c4d
--- /dev/null
+++ b/src/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/full-matdash-nuxt-stim.iml" filepath="$PROJECT_DIR$/.idea/full-matdash-nuxt-stim.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/.idea/vcs.xml b/src/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/src/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.npmrc b/src/.npmrc
similarity index 100%
rename from .npmrc
rename to src/.npmrc
diff --git a/README.md b/src/README.md
similarity index 100%
rename from README.md
rename to src/README.md
diff --git a/_mockApis/apps/blog/index.ts b/src/_mockApis/apps/blog/index.ts
similarity index 100%
rename from _mockApis/apps/blog/index.ts
rename to src/_mockApis/apps/blog/index.ts
diff --git a/_mockApis/apps/chat/index.ts b/src/_mockApis/apps/chat/index.ts
similarity index 100%
rename from _mockApis/apps/chat/index.ts
rename to src/_mockApis/apps/chat/index.ts
diff --git a/_mockApis/apps/contact/index.ts b/src/_mockApis/apps/contact/index.ts
similarity index 100%
rename from _mockApis/apps/contact/index.ts
rename to src/_mockApis/apps/contact/index.ts
diff --git a/_mockApis/apps/ecommerce/Editproduc.ts b/src/_mockApis/apps/ecommerce/Editproduc.ts
similarity index 100%
rename from _mockApis/apps/ecommerce/Editproduc.ts
rename to src/_mockApis/apps/ecommerce/Editproduc.ts
diff --git a/_mockApis/apps/ecommerce/billing-address.ts b/src/_mockApis/apps/ecommerce/billing-address.ts
similarity index 100%
rename from _mockApis/apps/ecommerce/billing-address.ts
rename to src/_mockApis/apps/ecommerce/billing-address.ts
diff --git a/_mockApis/apps/ecommerce/index.ts b/src/_mockApis/apps/ecommerce/index.ts
similarity index 100%
rename from _mockApis/apps/ecommerce/index.ts
rename to src/_mockApis/apps/ecommerce/index.ts
diff --git a/_mockApis/apps/ecommerce/products.ts b/src/_mockApis/apps/ecommerce/products.ts
similarity index 100%
rename from _mockApis/apps/ecommerce/products.ts
rename to src/_mockApis/apps/ecommerce/products.ts
diff --git a/_mockApis/apps/email/index.ts b/src/_mockApis/apps/email/index.ts
similarity index 100%
rename from _mockApis/apps/email/index.ts
rename to src/_mockApis/apps/email/index.ts
diff --git a/_mockApis/apps/invoice/index.ts b/src/_mockApis/apps/invoice/index.ts
similarity index 100%
rename from _mockApis/apps/invoice/index.ts
rename to src/_mockApis/apps/invoice/index.ts
diff --git a/_mockApis/apps/kanban/index.ts b/src/_mockApis/apps/kanban/index.ts
similarity index 100%
rename from _mockApis/apps/kanban/index.ts
rename to src/_mockApis/apps/kanban/index.ts
diff --git a/_mockApis/apps/notes/index.ts b/src/_mockApis/apps/notes/index.ts
similarity index 100%
rename from _mockApis/apps/notes/index.ts
rename to src/_mockApis/apps/notes/index.ts
diff --git a/_mockApis/apps/tickets/index.ts b/src/_mockApis/apps/tickets/index.ts
similarity index 100%
rename from _mockApis/apps/tickets/index.ts
rename to src/_mockApis/apps/tickets/index.ts
diff --git a/_mockApis/apps/userprofile/followers.ts b/src/_mockApis/apps/userprofile/followers.ts
similarity index 100%
rename from _mockApis/apps/userprofile/followers.ts
rename to src/_mockApis/apps/userprofile/followers.ts
diff --git a/_mockApis/apps/userprofile/friends.ts b/src/_mockApis/apps/userprofile/friends.ts
similarity index 100%
rename from _mockApis/apps/userprofile/friends.ts
rename to src/_mockApis/apps/userprofile/friends.ts
diff --git a/_mockApis/apps/userprofile/gallery.ts b/src/_mockApis/apps/userprofile/gallery.ts
similarity index 100%
rename from _mockApis/apps/userprofile/gallery.ts
rename to src/_mockApis/apps/userprofile/gallery.ts
diff --git a/_mockApis/apps/userprofile/photos.ts b/src/_mockApis/apps/userprofile/photos.ts
similarity index 100%
rename from _mockApis/apps/userprofile/photos.ts
rename to src/_mockApis/apps/userprofile/photos.ts
diff --git a/_mockApis/apps/userprofile/posts.ts b/src/_mockApis/apps/userprofile/posts.ts
similarity index 100%
rename from _mockApis/apps/userprofile/posts.ts
rename to src/_mockApis/apps/userprofile/posts.ts
diff --git a/_mockApis/components/dashboard/dashboard1.ts b/src/_mockApis/components/dashboard/dashboard1.ts
similarity index 100%
rename from _mockApis/components/dashboard/dashboard1.ts
rename to src/_mockApis/components/dashboard/dashboard1.ts
diff --git a/_mockApis/components/dashboard/dashboard2.ts b/src/_mockApis/components/dashboard/dashboard2.ts
similarity index 100%
rename from _mockApis/components/dashboard/dashboard2.ts
rename to src/_mockApis/components/dashboard/dashboard2.ts
diff --git a/_mockApis/components/dashboard/dashboard3.ts b/src/_mockApis/components/dashboard/dashboard3.ts
similarity index 100%
rename from _mockApis/components/dashboard/dashboard3.ts
rename to src/_mockApis/components/dashboard/dashboard3.ts
diff --git a/_mockApis/components/datatable/dataTable.ts b/src/_mockApis/components/datatable/dataTable.ts
similarity index 100%
rename from _mockApis/components/datatable/dataTable.ts
rename to src/_mockApis/components/datatable/dataTable.ts
diff --git a/_mockApis/components/pages/accountNotification.ts b/src/_mockApis/components/pages/accountNotification.ts
similarity index 100%
rename from _mockApis/components/pages/accountNotification.ts
rename to src/_mockApis/components/pages/accountNotification.ts
diff --git a/_mockApis/components/pages/auth.ts b/src/_mockApis/components/pages/auth.ts
similarity index 100%
rename from _mockApis/components/pages/auth.ts
rename to src/_mockApis/components/pages/auth.ts
diff --git a/_mockApis/components/pages/faqData.ts b/src/_mockApis/components/pages/faqData.ts
similarity index 100%
rename from _mockApis/components/pages/faqData.ts
rename to src/_mockApis/components/pages/faqData.ts
diff --git a/_mockApis/components/pages/pricingData.ts b/src/_mockApis/components/pages/pricingData.ts
similarity index 100%
rename from _mockApis/components/pages/pricingData.ts
rename to src/_mockApis/components/pages/pricingData.ts
diff --git a/_mockApis/components/pages/searchLinks.ts b/src/_mockApis/components/pages/searchLinks.ts
similarity index 100%
rename from _mockApis/components/pages/searchLinks.ts
rename to src/_mockApis/components/pages/searchLinks.ts
diff --git a/_mockApis/components/table/basicTables.ts b/src/_mockApis/components/table/basicTables.ts
similarity index 100%
rename from _mockApis/components/table/basicTables.ts
rename to src/_mockApis/components/table/basicTables.ts
diff --git a/_mockApis/components/widget/card.ts b/src/_mockApis/components/widget/card.ts
similarity index 100%
rename from _mockApis/components/widget/card.ts
rename to src/_mockApis/components/widget/card.ts
diff --git a/_mockApis/front-pages/PagesData.ts b/src/_mockApis/front-pages/PagesData.ts
similarity index 100%
rename from _mockApis/front-pages/PagesData.ts
rename to src/_mockApis/front-pages/PagesData.ts
diff --git a/_mockApis/headerData.ts b/src/_mockApis/headerData.ts
similarity index 100%
rename from _mockApis/headerData.ts
rename to src/_mockApis/headerData.ts
diff --git a/_mockApis/index.ts b/src/_mockApis/index.ts
similarity index 100%
rename from _mockApis/index.ts
rename to src/_mockApis/index.ts
diff --git a/_mockApis/landingpage/curoselData.ts b/src/_mockApis/landingpage/curoselData.ts
similarity index 100%
rename from _mockApis/landingpage/curoselData.ts
rename to src/_mockApis/landingpage/curoselData.ts
diff --git a/_mockApis/landingpage/lpPage.ts b/src/_mockApis/landingpage/lpPage.ts
similarity index 100%
rename from _mockApis/landingpage/lpPage.ts
rename to src/_mockApis/landingpage/lpPage.ts
diff --git a/_mockApis/mockAdapter.ts b/src/_mockApis/mockAdapter.ts
similarity index 100%
rename from _mockApis/mockAdapter.ts
rename to src/_mockApis/mockAdapter.ts
diff --git a/app.vue b/src/app.vue
similarity index 100%
rename from app.vue
rename to src/app.vue
diff --git a/assets/images/backgrounds/active-bg.png b/src/assets/images/backgrounds/active-bg.png
similarity index 100%
rename from assets/images/backgrounds/active-bg.png
rename to src/assets/images/backgrounds/active-bg.png
diff --git a/assets/images/backgrounds/blog.jpg b/src/assets/images/backgrounds/blog.jpg
similarity index 100%
rename from assets/images/backgrounds/blog.jpg
rename to src/assets/images/backgrounds/blog.jpg
diff --git a/assets/images/backgrounds/bronze.png b/src/assets/images/backgrounds/bronze.png
similarity index 100%
rename from assets/images/backgrounds/bronze.png
rename to src/assets/images/backgrounds/bronze.png
diff --git a/assets/images/backgrounds/business-woman-checking-her-mail.png b/src/assets/images/backgrounds/business-woman-checking-her-mail.png
similarity index 100%
rename from assets/images/backgrounds/business-woman-checking-her-mail.png
rename to src/assets/images/backgrounds/business-woman-checking-her-mail.png
diff --git a/assets/images/backgrounds/empty_mail.png b/src/assets/images/backgrounds/empty_mail.png
similarity index 100%
rename from assets/images/backgrounds/empty_mail.png
rename to src/assets/images/backgrounds/empty_mail.png
diff --git a/assets/images/backgrounds/errorimg.svg b/src/assets/images/backgrounds/errorimg.svg
similarity index 100%
rename from assets/images/backgrounds/errorimg.svg
rename to src/assets/images/backgrounds/errorimg.svg
diff --git a/assets/images/backgrounds/gold.png b/src/assets/images/backgrounds/gold.png
similarity index 100%
rename from assets/images/backgrounds/gold.png
rename to src/assets/images/backgrounds/gold.png
diff --git a/assets/images/backgrounds/img1.jpg b/src/assets/images/backgrounds/img1.jpg
similarity index 100%
rename from assets/images/backgrounds/img1.jpg
rename to src/assets/images/backgrounds/img1.jpg
diff --git a/assets/images/backgrounds/kanban-img-1.jpg b/src/assets/images/backgrounds/kanban-img-1.jpg
similarity index 100%
rename from assets/images/backgrounds/kanban-img-1.jpg
rename to src/assets/images/backgrounds/kanban-img-1.jpg
diff --git a/assets/images/backgrounds/kanban-img-2.jpg b/src/assets/images/backgrounds/kanban-img-2.jpg
similarity index 100%
rename from assets/images/backgrounds/kanban-img-2.jpg
rename to src/assets/images/backgrounds/kanban-img-2.jpg
diff --git a/assets/images/backgrounds/kanban-img-3.jpg b/src/assets/images/backgrounds/kanban-img-3.jpg
similarity index 100%
rename from assets/images/backgrounds/kanban-img-3.jpg
rename to src/assets/images/backgrounds/kanban-img-3.jpg
diff --git a/assets/images/backgrounds/kanban-img-4.jpg b/src/assets/images/backgrounds/kanban-img-4.jpg
similarity index 100%
rename from assets/images/backgrounds/kanban-img-4.jpg
rename to src/assets/images/backgrounds/kanban-img-4.jpg
diff --git a/assets/images/backgrounds/line-bg-2.svg b/src/assets/images/backgrounds/line-bg-2.svg
similarity index 100%
rename from assets/images/backgrounds/line-bg-2.svg
rename to src/assets/images/backgrounds/line-bg-2.svg
diff --git a/assets/images/backgrounds/line-bg.svg b/src/assets/images/backgrounds/line-bg.svg
similarity index 100%
rename from assets/images/backgrounds/line-bg.svg
rename to src/assets/images/backgrounds/line-bg.svg
diff --git a/assets/images/backgrounds/login-bg.jpg b/src/assets/images/backgrounds/login-bg.jpg
similarity index 100%
rename from assets/images/backgrounds/login-bg.jpg
rename to src/assets/images/backgrounds/login-bg.jpg
diff --git a/assets/images/backgrounds/login-bg.svg b/src/assets/images/backgrounds/login-bg.svg
similarity index 100%
rename from assets/images/backgrounds/login-bg.svg
rename to src/assets/images/backgrounds/login-bg.svg
diff --git a/assets/images/backgrounds/login-side.png b/src/assets/images/backgrounds/login-side.png
similarity index 100%
rename from assets/images/backgrounds/login-side.png
rename to src/assets/images/backgrounds/login-side.png
diff --git a/assets/images/backgrounds/maintenance.svg b/src/assets/images/backgrounds/maintenance.svg
similarity index 100%
rename from assets/images/backgrounds/maintenance.svg
rename to src/assets/images/backgrounds/maintenance.svg
diff --git a/assets/images/backgrounds/mega-dd-bg.jpg b/src/assets/images/backgrounds/mega-dd-bg.jpg
similarity index 100%
rename from assets/images/backgrounds/mega-dd-bg.jpg
rename to src/assets/images/backgrounds/mega-dd-bg.jpg
diff --git a/assets/images/backgrounds/my-card.jpg b/src/assets/images/backgrounds/my-card.jpg
similarity index 100%
rename from assets/images/backgrounds/my-card.jpg
rename to src/assets/images/backgrounds/my-card.jpg
diff --git a/assets/images/backgrounds/nyan-cat.gif b/src/assets/images/backgrounds/nyan-cat.gif
similarity index 100%
rename from assets/images/backgrounds/nyan-cat.gif
rename to src/assets/images/backgrounds/nyan-cat.gif
diff --git a/assets/images/backgrounds/payment.svg b/src/assets/images/backgrounds/payment.svg
similarity index 100%
rename from assets/images/backgrounds/payment.svg
rename to src/assets/images/backgrounds/payment.svg
diff --git a/assets/images/backgrounds/preview-img.png b/src/assets/images/backgrounds/preview-img.png
similarity index 100%
rename from assets/images/backgrounds/preview-img.png
rename to src/assets/images/backgrounds/preview-img.png
diff --git a/assets/images/backgrounds/profile-bg.jpg b/src/assets/images/backgrounds/profile-bg.jpg
similarity index 100%
rename from assets/images/backgrounds/profile-bg.jpg
rename to src/assets/images/backgrounds/profile-bg.jpg
diff --git a/assets/images/backgrounds/profilebg.jpg b/src/assets/images/backgrounds/profilebg.jpg
similarity index 100%
rename from assets/images/backgrounds/profilebg.jpg
rename to src/assets/images/backgrounds/profilebg.jpg
diff --git a/assets/images/backgrounds/silver.png b/src/assets/images/backgrounds/silver.png
similarity index 100%
rename from assets/images/backgrounds/silver.png
rename to src/assets/images/backgrounds/silver.png
diff --git a/assets/images/backgrounds/track-bg.png b/src/assets/images/backgrounds/track-bg.png
similarity index 100%
rename from assets/images/backgrounds/track-bg.png
rename to src/assets/images/backgrounds/track-bg.png
diff --git a/assets/images/backgrounds/unauthorization.svg b/src/assets/images/backgrounds/unauthorization.svg
similarity index 100%
rename from assets/images/backgrounds/unauthorization.svg
rename to src/assets/images/backgrounds/unauthorization.svg
diff --git a/assets/images/backgrounds/weather.jpg b/src/assets/images/backgrounds/weather.jpg
similarity index 100%
rename from assets/images/backgrounds/weather.jpg
rename to src/assets/images/backgrounds/weather.jpg
diff --git a/assets/images/backgrounds/weatherbg.jpg b/src/assets/images/backgrounds/weatherbg.jpg
similarity index 100%
rename from assets/images/backgrounds/weatherbg.jpg
rename to src/assets/images/backgrounds/weatherbg.jpg
diff --git a/assets/images/backgrounds/website-under-construction.svg b/src/assets/images/backgrounds/website-under-construction.svg
similarity index 100%
rename from assets/images/backgrounds/website-under-construction.svg
rename to src/assets/images/backgrounds/website-under-construction.svg
diff --git a/assets/images/backgrounds/welcome-bg.png b/src/assets/images/backgrounds/welcome-bg.png
similarity index 100%
rename from assets/images/backgrounds/welcome-bg.png
rename to src/assets/images/backgrounds/welcome-bg.png
diff --git a/assets/images/backgrounds/welcome-bg2.png b/src/assets/images/backgrounds/welcome-bg2.png
similarity index 100%
rename from assets/images/backgrounds/welcome-bg2.png
rename to src/assets/images/backgrounds/welcome-bg2.png
diff --git a/assets/images/blog/blog-img1.jpg b/src/assets/images/blog/blog-img1.jpg
similarity index 100%
rename from assets/images/blog/blog-img1.jpg
rename to src/assets/images/blog/blog-img1.jpg
diff --git a/assets/images/blog/blog-img10.jpg b/src/assets/images/blog/blog-img10.jpg
similarity index 100%
rename from assets/images/blog/blog-img10.jpg
rename to src/assets/images/blog/blog-img10.jpg
diff --git a/assets/images/blog/blog-img11.jpg b/src/assets/images/blog/blog-img11.jpg
similarity index 100%
rename from assets/images/blog/blog-img11.jpg
rename to src/assets/images/blog/blog-img11.jpg
diff --git a/assets/images/blog/blog-img2.jpg b/src/assets/images/blog/blog-img2.jpg
similarity index 100%
rename from assets/images/blog/blog-img2.jpg
rename to src/assets/images/blog/blog-img2.jpg
diff --git a/assets/images/blog/blog-img3.jpg b/src/assets/images/blog/blog-img3.jpg
similarity index 100%
rename from assets/images/blog/blog-img3.jpg
rename to src/assets/images/blog/blog-img3.jpg
diff --git a/assets/images/blog/blog-img4.jpg b/src/assets/images/blog/blog-img4.jpg
similarity index 100%
rename from assets/images/blog/blog-img4.jpg
rename to src/assets/images/blog/blog-img4.jpg
diff --git a/assets/images/blog/blog-img5.jpg b/src/assets/images/blog/blog-img5.jpg
similarity index 100%
rename from assets/images/blog/blog-img5.jpg
rename to src/assets/images/blog/blog-img5.jpg
diff --git a/assets/images/blog/blog-img6.jpg b/src/assets/images/blog/blog-img6.jpg
similarity index 100%
rename from assets/images/blog/blog-img6.jpg
rename to src/assets/images/blog/blog-img6.jpg
diff --git a/assets/images/blog/blog-img7.jpg b/src/assets/images/blog/blog-img7.jpg
similarity index 100%
rename from assets/images/blog/blog-img7.jpg
rename to src/assets/images/blog/blog-img7.jpg
diff --git a/assets/images/blog/blog-img8.jpg b/src/assets/images/blog/blog-img8.jpg
similarity index 100%
rename from assets/images/blog/blog-img8.jpg
rename to src/assets/images/blog/blog-img8.jpg
diff --git a/assets/images/blog/blog-img9.jpg b/src/assets/images/blog/blog-img9.jpg
similarity index 100%
rename from assets/images/blog/blog-img9.jpg
rename to src/assets/images/blog/blog-img9.jpg
diff --git a/assets/images/breadcrumb/ChatBc.png b/src/assets/images/breadcrumb/ChatBc.png
similarity index 100%
rename from assets/images/breadcrumb/ChatBc.png
rename to src/assets/images/breadcrumb/ChatBc.png
diff --git a/assets/images/breadcrumb/emailSv.png b/src/assets/images/breadcrumb/emailSv.png
similarity index 100%
rename from assets/images/breadcrumb/emailSv.png
rename to src/assets/images/breadcrumb/emailSv.png
diff --git a/assets/images/chat/icon-adobe.svg b/src/assets/images/chat/icon-adobe.svg
similarity index 100%
rename from assets/images/chat/icon-adobe.svg
rename to src/assets/images/chat/icon-adobe.svg
diff --git a/assets/images/chat/icon-chrome.svg b/src/assets/images/chat/icon-chrome.svg
similarity index 100%
rename from assets/images/chat/icon-chrome.svg
rename to src/assets/images/chat/icon-chrome.svg
diff --git a/assets/images/chat/icon-figma.svg b/src/assets/images/chat/icon-figma.svg
similarity index 100%
rename from assets/images/chat/icon-figma.svg
rename to src/assets/images/chat/icon-figma.svg
diff --git a/assets/images/chat/icon-javascript.svg b/src/assets/images/chat/icon-javascript.svg
similarity index 100%
rename from assets/images/chat/icon-javascript.svg
rename to src/assets/images/chat/icon-javascript.svg
diff --git a/assets/images/chat/icon-zip-folder.svg b/src/assets/images/chat/icon-zip-folder.svg
similarity index 100%
rename from assets/images/chat/icon-zip-folder.svg
rename to src/assets/images/chat/icon-zip-folder.svg
diff --git a/assets/images/flag/icon-flag-en.svg b/src/assets/images/flag/icon-flag-en.svg
similarity index 100%
rename from assets/images/flag/icon-flag-en.svg
rename to src/assets/images/flag/icon-flag-en.svg
diff --git a/assets/images/flag/icon-flag-fr.svg b/src/assets/images/flag/icon-flag-fr.svg
similarity index 100%
rename from assets/images/flag/icon-flag-fr.svg
rename to src/assets/images/flag/icon-flag-fr.svg
diff --git a/assets/images/flag/icon-flag-ro.svg b/src/assets/images/flag/icon-flag-ro.svg
similarity index 100%
rename from assets/images/flag/icon-flag-ro.svg
rename to src/assets/images/flag/icon-flag-ro.svg
diff --git a/assets/images/flag/icon-flag-vn.svg b/src/assets/images/flag/icon-flag-vn.svg
similarity index 100%
rename from assets/images/flag/icon-flag-vn.svg
rename to src/assets/images/flag/icon-flag-vn.svg
diff --git a/assets/images/flag/icon-flag-zh.svg b/src/assets/images/flag/icon-flag-zh.svg
similarity index 100%
rename from assets/images/flag/icon-flag-zh.svg
rename to src/assets/images/flag/icon-flag-zh.svg
diff --git a/assets/images/front-pages/background/contact-icon.png b/src/assets/images/front-pages/background/contact-icon.png
similarity index 100%
rename from assets/images/front-pages/background/contact-icon.png
rename to src/assets/images/front-pages/background/contact-icon.png
diff --git a/assets/images/front-pages/background/facebook.svg b/src/assets/images/front-pages/background/facebook.svg
similarity index 100%
rename from assets/images/front-pages/background/facebook.svg
rename to src/assets/images/front-pages/background/facebook.svg
diff --git a/assets/images/front-pages/background/feature-image.png b/src/assets/images/front-pages/background/feature-image.png
similarity index 100%
rename from assets/images/front-pages/background/feature-image.png
rename to src/assets/images/front-pages/background/feature-image.png
diff --git a/assets/images/front-pages/background/instagram.svg b/src/assets/images/front-pages/background/instagram.svg
similarity index 100%
rename from assets/images/front-pages/background/instagram.svg
rename to src/assets/images/front-pages/background/instagram.svg
diff --git a/assets/images/front-pages/background/left-shape.png b/src/assets/images/front-pages/background/left-shape.png
similarity index 100%
rename from assets/images/front-pages/background/left-shape.png
rename to src/assets/images/front-pages/background/left-shape.png
diff --git a/assets/images/front-pages/background/left-widget.png b/src/assets/images/front-pages/background/left-widget.png
similarity index 100%
rename from assets/images/front-pages/background/left-widget.png
rename to src/assets/images/front-pages/background/left-widget.png
diff --git a/assets/images/front-pages/background/main-banner.png b/src/assets/images/front-pages/background/main-banner.png
similarity index 100%
rename from assets/images/front-pages/background/main-banner.png
rename to src/assets/images/front-pages/background/main-banner.png
diff --git a/assets/images/front-pages/background/quotes.svg b/src/assets/images/front-pages/background/quotes.svg
similarity index 100%
rename from assets/images/front-pages/background/quotes.svg
rename to src/assets/images/front-pages/background/quotes.svg
diff --git a/assets/images/front-pages/background/right-shape.png b/src/assets/images/front-pages/background/right-shape.png
similarity index 100%
rename from assets/images/front-pages/background/right-shape.png
rename to src/assets/images/front-pages/background/right-shape.png
diff --git a/assets/images/front-pages/background/right-widget.png b/src/assets/images/front-pages/background/right-widget.png
similarity index 100%
rename from assets/images/front-pages/background/right-widget.png
rename to src/assets/images/front-pages/background/right-widget.png
diff --git a/assets/images/front-pages/background/twitter.svg b/src/assets/images/front-pages/background/twitter.svg
similarity index 100%
rename from assets/images/front-pages/background/twitter.svg
rename to src/assets/images/front-pages/background/twitter.svg
diff --git a/assets/images/front-pages/background/white-icon-logo.svg b/src/assets/images/front-pages/background/white-icon-logo.svg
similarity index 100%
rename from assets/images/front-pages/background/white-icon-logo.svg
rename to src/assets/images/front-pages/background/white-icon-logo.svg
diff --git a/assets/images/front-pages/background/white-logo.svg b/src/assets/images/front-pages/background/white-logo.svg
similarity index 100%
rename from assets/images/front-pages/background/white-logo.svg
rename to src/assets/images/front-pages/background/white-logo.svg
diff --git a/assets/images/front-pages/componies/capgemini.svg b/src/assets/images/front-pages/componies/capgemini.svg
similarity index 100%
rename from assets/images/front-pages/componies/capgemini.svg
rename to src/assets/images/front-pages/componies/capgemini.svg
diff --git a/assets/images/front-pages/componies/dell.svg b/src/assets/images/front-pages/componies/dell.svg
similarity index 100%
rename from assets/images/front-pages/componies/dell.svg
rename to src/assets/images/front-pages/componies/dell.svg
diff --git a/assets/images/front-pages/componies/infosys.svg b/src/assets/images/front-pages/componies/infosys.svg
similarity index 100%
rename from assets/images/front-pages/componies/infosys.svg
rename to src/assets/images/front-pages/componies/infosys.svg
diff --git a/assets/images/front-pages/componies/intel.svg b/src/assets/images/front-pages/componies/intel.svg
similarity index 100%
rename from assets/images/front-pages/componies/intel.svg
rename to src/assets/images/front-pages/componies/intel.svg
diff --git a/assets/images/front-pages/componies/oracle.svg b/src/assets/images/front-pages/componies/oracle.svg
similarity index 100%
rename from assets/images/front-pages/componies/oracle.svg
rename to src/assets/images/front-pages/componies/oracle.svg
diff --git a/assets/images/front-pages/componies/samsung.svg b/src/assets/images/front-pages/componies/samsung.svg
similarity index 100%
rename from assets/images/front-pages/componies/samsung.svg
rename to src/assets/images/front-pages/componies/samsung.svg
diff --git a/assets/images/front-pages/leaders/leader1.png b/src/assets/images/front-pages/leaders/leader1.png
similarity index 100%
rename from assets/images/front-pages/leaders/leader1.png
rename to src/assets/images/front-pages/leaders/leader1.png
diff --git a/assets/images/front-pages/leaders/leader2.png b/src/assets/images/front-pages/leaders/leader2.png
similarity index 100%
rename from assets/images/front-pages/leaders/leader2.png
rename to src/assets/images/front-pages/leaders/leader2.png
diff --git a/assets/images/front-pages/leaders/leader3.png b/src/assets/images/front-pages/leaders/leader3.png
similarity index 100%
rename from assets/images/front-pages/leaders/leader3.png
rename to src/assets/images/front-pages/leaders/leader3.png
diff --git a/assets/images/front-pages/leaders/leader4.png b/src/assets/images/front-pages/leaders/leader4.png
similarity index 100%
rename from assets/images/front-pages/leaders/leader4.png
rename to src/assets/images/front-pages/leaders/leader4.png
diff --git a/assets/images/front-pages/leaders/leader5.png b/src/assets/images/front-pages/leaders/leader5.png
similarity index 100%
rename from assets/images/front-pages/leaders/leader5.png
rename to src/assets/images/front-pages/leaders/leader5.png
diff --git a/assets/images/front-pages/payments/american-exp.svg b/src/assets/images/front-pages/payments/american-exp.svg
similarity index 100%
rename from assets/images/front-pages/payments/american-exp.svg
rename to src/assets/images/front-pages/payments/american-exp.svg
diff --git a/assets/images/front-pages/payments/dinners-clb.svg b/src/assets/images/front-pages/payments/dinners-clb.svg
similarity index 100%
rename from assets/images/front-pages/payments/dinners-clb.svg
rename to src/assets/images/front-pages/payments/dinners-clb.svg
diff --git a/assets/images/front-pages/payments/discover.svg b/src/assets/images/front-pages/payments/discover.svg
similarity index 100%
rename from assets/images/front-pages/payments/discover.svg
rename to src/assets/images/front-pages/payments/discover.svg
diff --git a/assets/images/front-pages/payments/jcb.svg b/src/assets/images/front-pages/payments/jcb.svg
similarity index 100%
rename from assets/images/front-pages/payments/jcb.svg
rename to src/assets/images/front-pages/payments/jcb.svg
diff --git a/assets/images/front-pages/payments/maesro.svg b/src/assets/images/front-pages/payments/maesro.svg
similarity index 100%
rename from assets/images/front-pages/payments/maesro.svg
rename to src/assets/images/front-pages/payments/maesro.svg
diff --git a/assets/images/front-pages/payments/master.svg b/src/assets/images/front-pages/payments/master.svg
similarity index 100%
rename from assets/images/front-pages/payments/master.svg
rename to src/assets/images/front-pages/payments/master.svg
diff --git a/assets/images/front-pages/payments/paypal.svg b/src/assets/images/front-pages/payments/paypal.svg
similarity index 100%
rename from assets/images/front-pages/payments/paypal.svg
rename to src/assets/images/front-pages/payments/paypal.svg
diff --git a/assets/images/front-pages/payments/visa.svg b/src/assets/images/front-pages/payments/visa.svg
similarity index 100%
rename from assets/images/front-pages/payments/visa.svg
rename to src/assets/images/front-pages/payments/visa.svg
diff --git a/assets/images/front-pages/technology/Apexchart.svg b/src/assets/images/front-pages/technology/Apexchart.svg
similarity index 100%
rename from assets/images/front-pages/technology/Apexchart.svg
rename to src/assets/images/front-pages/technology/Apexchart.svg
diff --git a/assets/images/front-pages/technology/Pinia.svg b/src/assets/images/front-pages/technology/Pinia.svg
similarity index 100%
rename from assets/images/front-pages/technology/Pinia.svg
rename to src/assets/images/front-pages/technology/Pinia.svg
diff --git a/assets/images/front-pages/technology/Typescript.svg b/src/assets/images/front-pages/technology/Typescript.svg
similarity index 100%
rename from assets/images/front-pages/technology/Typescript.svg
rename to src/assets/images/front-pages/technology/Typescript.svg
diff --git a/assets/images/front-pages/technology/Vite.svg b/src/assets/images/front-pages/technology/Vite.svg
similarity index 100%
rename from assets/images/front-pages/technology/Vite.svg
rename to src/assets/images/front-pages/technology/Vite.svg
diff --git a/assets/images/front-pages/technology/Vuejs.svg b/src/assets/images/front-pages/technology/Vuejs.svg
similarity index 100%
rename from assets/images/front-pages/technology/Vuejs.svg
rename to src/assets/images/front-pages/technology/Vuejs.svg
diff --git a/assets/images/front-pages/technology/Vuetify.svg b/src/assets/images/front-pages/technology/Vuetify.svg
similarity index 100%
rename from assets/images/front-pages/technology/Vuetify.svg
rename to src/assets/images/front-pages/technology/Vuetify.svg
diff --git a/assets/images/kanban/task-img1.png b/src/assets/images/kanban/task-img1.png
similarity index 100%
rename from assets/images/kanban/task-img1.png
rename to src/assets/images/kanban/task-img1.png
diff --git a/assets/images/kanban/task-img2.png b/src/assets/images/kanban/task-img2.png
similarity index 100%
rename from assets/images/kanban/task-img2.png
rename to src/assets/images/kanban/task-img2.png
diff --git a/assets/images/landingpage/apps/app-blog-detail.jpg b/src/assets/images/landingpage/apps/app-blog-detail.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-blog-detail.jpg
rename to src/assets/images/landingpage/apps/app-blog-detail.jpg
diff --git a/assets/images/landingpage/apps/app-blog.jpg b/src/assets/images/landingpage/apps/app-blog.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-blog.jpg
rename to src/assets/images/landingpage/apps/app-blog.jpg
diff --git a/assets/images/landingpage/apps/app-calendar.jpg b/src/assets/images/landingpage/apps/app-calendar.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-calendar.jpg
rename to src/assets/images/landingpage/apps/app-calendar.jpg
diff --git a/assets/images/landingpage/apps/app-chat.jpg b/src/assets/images/landingpage/apps/app-chat.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-chat.jpg
rename to src/assets/images/landingpage/apps/app-chat.jpg
diff --git a/assets/images/landingpage/apps/app-contact.jpg b/src/assets/images/landingpage/apps/app-contact.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-contact.jpg
rename to src/assets/images/landingpage/apps/app-contact.jpg
diff --git a/assets/images/landingpage/apps/app-email.jpg b/src/assets/images/landingpage/apps/app-email.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-email.jpg
rename to src/assets/images/landingpage/apps/app-email.jpg
diff --git a/assets/images/landingpage/apps/app-invoice.jpg b/src/assets/images/landingpage/apps/app-invoice.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-invoice.jpg
rename to src/assets/images/landingpage/apps/app-invoice.jpg
diff --git a/assets/images/landingpage/apps/app-kanban.jpg b/src/assets/images/landingpage/apps/app-kanban.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-kanban.jpg
rename to src/assets/images/landingpage/apps/app-kanban.jpg
diff --git a/assets/images/landingpage/apps/app-note.jpg b/src/assets/images/landingpage/apps/app-note.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-note.jpg
rename to src/assets/images/landingpage/apps/app-note.jpg
diff --git a/assets/images/landingpage/apps/app-product-detail.jpg b/src/assets/images/landingpage/apps/app-product-detail.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-product-detail.jpg
rename to src/assets/images/landingpage/apps/app-product-detail.jpg
diff --git a/assets/images/landingpage/apps/app-productlist.jpg b/src/assets/images/landingpage/apps/app-productlist.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-productlist.jpg
rename to src/assets/images/landingpage/apps/app-productlist.jpg
diff --git a/assets/images/landingpage/apps/app-shop.jpg b/src/assets/images/landingpage/apps/app-shop.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-shop.jpg
rename to src/assets/images/landingpage/apps/app-shop.jpg
diff --git a/assets/images/landingpage/apps/app-user-profile.jpg b/src/assets/images/landingpage/apps/app-user-profile.jpg
similarity index 100%
rename from assets/images/landingpage/apps/app-user-profile.jpg
rename to src/assets/images/landingpage/apps/app-user-profile.jpg
diff --git a/assets/images/landingpage/background/c2a.png b/src/assets/images/landingpage/background/c2a.png
similarity index 100%
rename from assets/images/landingpage/background/c2a.png
rename to src/assets/images/landingpage/background/c2a.png
diff --git a/assets/images/landingpage/background/slider-group.png b/src/assets/images/landingpage/background/slider-group.png
similarity index 100%
rename from assets/images/landingpage/background/slider-group.png
rename to src/assets/images/landingpage/background/slider-group.png
diff --git a/assets/images/landingpage/bannerimg1.png b/src/assets/images/landingpage/bannerimg1.png
similarity index 100%
rename from assets/images/landingpage/bannerimg1.png
rename to src/assets/images/landingpage/bannerimg1.png
diff --git a/assets/images/landingpage/bannerimg2.png b/src/assets/images/landingpage/bannerimg2.png
similarity index 100%
rename from assets/images/landingpage/bannerimg2.png
rename to src/assets/images/landingpage/bannerimg2.png
diff --git a/assets/images/landingpage/demos/demo-dark.jpg b/src/assets/images/landingpage/demos/demo-dark.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-dark.jpg
rename to src/assets/images/landingpage/demos/demo-dark.jpg
diff --git a/assets/images/landingpage/demos/demo-default.jpg b/src/assets/images/landingpage/demos/demo-default.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-default.jpg
rename to src/assets/images/landingpage/demos/demo-default.jpg
diff --git a/assets/images/landingpage/demos/demo-horizontal.jpg b/src/assets/images/landingpage/demos/demo-horizontal.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-horizontal.jpg
rename to src/assets/images/landingpage/demos/demo-horizontal.jpg
diff --git a/assets/images/landingpage/demos/demo-main.jpg b/src/assets/images/landingpage/demos/demo-main.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-main.jpg
rename to src/assets/images/landingpage/demos/demo-main.jpg
diff --git a/assets/images/landingpage/demos/demo-mini.jpg b/src/assets/images/landingpage/demos/demo-mini.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-mini.jpg
rename to src/assets/images/landingpage/demos/demo-mini.jpg
diff --git a/assets/images/landingpage/demos/demo-rtl.jpg b/src/assets/images/landingpage/demos/demo-rtl.jpg
similarity index 100%
rename from assets/images/landingpage/demos/demo-rtl.jpg
rename to src/assets/images/landingpage/demos/demo-rtl.jpg
diff --git a/assets/images/landingpage/favicon.png b/src/assets/images/landingpage/favicon.png
similarity index 100%
rename from assets/images/landingpage/favicon.png
rename to src/assets/images/landingpage/favicon.png
diff --git a/assets/images/landingpage/frameworks/logo-apexchart.svg b/src/assets/images/landingpage/frameworks/logo-apexchart.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-apexchart.svg
rename to src/assets/images/landingpage/frameworks/logo-apexchart.svg
diff --git a/assets/images/landingpage/frameworks/logo-figma.svg b/src/assets/images/landingpage/frameworks/logo-figma.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-figma.svg
rename to src/assets/images/landingpage/frameworks/logo-figma.svg
diff --git a/assets/images/landingpage/frameworks/logo-pinia.svg b/src/assets/images/landingpage/frameworks/logo-pinia.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-pinia.svg
rename to src/assets/images/landingpage/frameworks/logo-pinia.svg
diff --git a/assets/images/landingpage/frameworks/logo-ts.svg b/src/assets/images/landingpage/frameworks/logo-ts.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-ts.svg
rename to src/assets/images/landingpage/frameworks/logo-ts.svg
diff --git a/assets/images/landingpage/frameworks/logo-vc.svg b/src/assets/images/landingpage/frameworks/logo-vc.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-vc.svg
rename to src/assets/images/landingpage/frameworks/logo-vc.svg
diff --git a/assets/images/landingpage/frameworks/logo-vue.svg b/src/assets/images/landingpage/frameworks/logo-vue.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-vue.svg
rename to src/assets/images/landingpage/frameworks/logo-vue.svg
diff --git a/assets/images/landingpage/frameworks/logo-vuetify.svg b/src/assets/images/landingpage/frameworks/logo-vuetify.svg
similarity index 100%
rename from assets/images/landingpage/frameworks/logo-vuetify.svg
rename to src/assets/images/landingpage/frameworks/logo-vuetify.svg
diff --git a/assets/images/landingpage/frontpages/aboutus.jpg b/src/assets/images/landingpage/frontpages/aboutus.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/aboutus.jpg
rename to src/assets/images/landingpage/frontpages/aboutus.jpg
diff --git a/assets/images/landingpage/frontpages/blogpage.jpg b/src/assets/images/landingpage/frontpages/blogpage.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/blogpage.jpg
rename to src/assets/images/landingpage/frontpages/blogpage.jpg
diff --git a/assets/images/landingpage/frontpages/contactus.jpg b/src/assets/images/landingpage/frontpages/contactus.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/contactus.jpg
rename to src/assets/images/landingpage/frontpages/contactus.jpg
diff --git a/assets/images/landingpage/frontpages/homepage.jpg b/src/assets/images/landingpage/frontpages/homepage.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/homepage.jpg
rename to src/assets/images/landingpage/frontpages/homepage.jpg
diff --git a/assets/images/landingpage/frontpages/portfolio.jpg b/src/assets/images/landingpage/frontpages/portfolio.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/portfolio.jpg
rename to src/assets/images/landingpage/frontpages/portfolio.jpg
diff --git a/assets/images/landingpage/frontpages/pricing.jpg b/src/assets/images/landingpage/frontpages/pricing.jpg
similarity index 100%
rename from assets/images/landingpage/frontpages/pricing.jpg
rename to src/assets/images/landingpage/frontpages/pricing.jpg
diff --git a/assets/images/landingpage/shape/badge.svg b/src/assets/images/landingpage/shape/badge.svg
similarity index 100%
rename from assets/images/landingpage/shape/badge.svg
rename to src/assets/images/landingpage/shape/badge.svg
diff --git a/assets/images/landingpage/shape/line-bg-2.svg b/src/assets/images/landingpage/shape/line-bg-2.svg
similarity index 100%
rename from assets/images/landingpage/shape/line-bg-2.svg
rename to src/assets/images/landingpage/shape/line-bg-2.svg
diff --git a/assets/images/landingpage/shape/line-bg.svg b/src/assets/images/landingpage/shape/line-bg.svg
similarity index 100%
rename from assets/images/landingpage/shape/line-bg.svg
rename to src/assets/images/landingpage/shape/line-bg.svg
diff --git a/assets/images/landingpage/shape/shape-1.svg b/src/assets/images/landingpage/shape/shape-1.svg
similarity index 100%
rename from assets/images/landingpage/shape/shape-1.svg
rename to src/assets/images/landingpage/shape/shape-1.svg
diff --git a/assets/images/landingpage/shape/shape-2.svg b/src/assets/images/landingpage/shape/shape-2.svg
similarity index 100%
rename from assets/images/landingpage/shape/shape-2.svg
rename to src/assets/images/landingpage/shape/shape-2.svg
diff --git a/assets/images/logos/logo-icon.svg b/src/assets/images/logos/logo-icon.svg
similarity index 100%
rename from assets/images/logos/logo-icon.svg
rename to src/assets/images/logos/logo-icon.svg
diff --git a/assets/images/logos/logo.svg b/src/assets/images/logos/logo.svg
similarity index 100%
rename from assets/images/logos/logo.svg
rename to src/assets/images/logos/logo.svg
diff --git a/assets/images/products/dash-prd-1.jpg b/src/assets/images/products/dash-prd-1.jpg
similarity index 100%
rename from assets/images/products/dash-prd-1.jpg
rename to src/assets/images/products/dash-prd-1.jpg
diff --git a/assets/images/products/dash-prd-2.jpg b/src/assets/images/products/dash-prd-2.jpg
similarity index 100%
rename from assets/images/products/dash-prd-2.jpg
rename to src/assets/images/products/dash-prd-2.jpg
diff --git a/assets/images/products/dash-prd-3.jpg b/src/assets/images/products/dash-prd-3.jpg
similarity index 100%
rename from assets/images/products/dash-prd-3.jpg
rename to src/assets/images/products/dash-prd-3.jpg
diff --git a/assets/images/products/dash-prd-4.jpg b/src/assets/images/products/dash-prd-4.jpg
similarity index 100%
rename from assets/images/products/dash-prd-4.jpg
rename to src/assets/images/products/dash-prd-4.jpg
diff --git a/assets/images/products/empty-shopping-bag.gif b/src/assets/images/products/empty-shopping-bag.gif
similarity index 100%
rename from assets/images/products/empty-shopping-bag.gif
rename to src/assets/images/products/empty-shopping-bag.gif
diff --git a/assets/images/products/empty-shopping-cart.svg b/src/assets/images/products/empty-shopping-cart.svg
similarity index 100%
rename from assets/images/products/empty-shopping-cart.svg
rename to src/assets/images/products/empty-shopping-cart.svg
diff --git a/assets/images/products/payment-complete.svg b/src/assets/images/products/payment-complete.svg
similarity index 100%
rename from assets/images/products/payment-complete.svg
rename to src/assets/images/products/payment-complete.svg
diff --git a/assets/images/products/payment.svg b/src/assets/images/products/payment.svg
similarity index 100%
rename from assets/images/products/payment.svg
rename to src/assets/images/products/payment.svg
diff --git a/assets/images/products/product-1.jpg b/src/assets/images/products/product-1.jpg
similarity index 100%
rename from assets/images/products/product-1.jpg
rename to src/assets/images/products/product-1.jpg
diff --git a/assets/images/products/product-2.jpg b/src/assets/images/products/product-2.jpg
similarity index 100%
rename from assets/images/products/product-2.jpg
rename to src/assets/images/products/product-2.jpg
diff --git a/assets/images/products/product-3.jpg b/src/assets/images/products/product-3.jpg
similarity index 100%
rename from assets/images/products/product-3.jpg
rename to src/assets/images/products/product-3.jpg
diff --git a/assets/images/products/product-4.jpg b/src/assets/images/products/product-4.jpg
similarity index 100%
rename from assets/images/products/product-4.jpg
rename to src/assets/images/products/product-4.jpg
diff --git a/assets/images/products/s1.jpg b/src/assets/images/products/s1.jpg
similarity index 100%
rename from assets/images/products/s1.jpg
rename to src/assets/images/products/s1.jpg
diff --git a/assets/images/products/s10.jpg b/src/assets/images/products/s10.jpg
similarity index 100%
rename from assets/images/products/s10.jpg
rename to src/assets/images/products/s10.jpg
diff --git a/assets/images/products/s11.jpg b/src/assets/images/products/s11.jpg
similarity index 100%
rename from assets/images/products/s11.jpg
rename to src/assets/images/products/s11.jpg
diff --git a/assets/images/products/s12.jpg b/src/assets/images/products/s12.jpg
similarity index 100%
rename from assets/images/products/s12.jpg
rename to src/assets/images/products/s12.jpg
diff --git a/assets/images/products/s2.jpg b/src/assets/images/products/s2.jpg
similarity index 100%
rename from assets/images/products/s2.jpg
rename to src/assets/images/products/s2.jpg
diff --git a/assets/images/products/s3.jpg b/src/assets/images/products/s3.jpg
similarity index 100%
rename from assets/images/products/s3.jpg
rename to src/assets/images/products/s3.jpg
diff --git a/assets/images/products/s4.jpg b/src/assets/images/products/s4.jpg
similarity index 100%
rename from assets/images/products/s4.jpg
rename to src/assets/images/products/s4.jpg
diff --git a/assets/images/products/s5.jpg b/src/assets/images/products/s5.jpg
similarity index 100%
rename from assets/images/products/s5.jpg
rename to src/assets/images/products/s5.jpg
diff --git a/assets/images/products/s6.jpg b/src/assets/images/products/s6.jpg
similarity index 100%
rename from assets/images/products/s6.jpg
rename to src/assets/images/products/s6.jpg
diff --git a/assets/images/products/s7.jpg b/src/assets/images/products/s7.jpg
similarity index 100%
rename from assets/images/products/s7.jpg
rename to src/assets/images/products/s7.jpg
diff --git a/assets/images/products/s8.jpg b/src/assets/images/products/s8.jpg
similarity index 100%
rename from assets/images/products/s8.jpg
rename to src/assets/images/products/s8.jpg
diff --git a/assets/images/products/s9.jpg b/src/assets/images/products/s9.jpg
similarity index 100%
rename from assets/images/products/s9.jpg
rename to src/assets/images/products/s9.jpg
diff --git a/assets/images/profile/user-1.jpg b/src/assets/images/profile/user-1.jpg
similarity index 100%
rename from assets/images/profile/user-1.jpg
rename to src/assets/images/profile/user-1.jpg
diff --git a/assets/images/profile/user-10.jpg b/src/assets/images/profile/user-10.jpg
similarity index 100%
rename from assets/images/profile/user-10.jpg
rename to src/assets/images/profile/user-10.jpg
diff --git a/assets/images/profile/user-11.jpg b/src/assets/images/profile/user-11.jpg
similarity index 100%
rename from assets/images/profile/user-11.jpg
rename to src/assets/images/profile/user-11.jpg
diff --git a/assets/images/profile/user-12.jpg b/src/assets/images/profile/user-12.jpg
similarity index 100%
rename from assets/images/profile/user-12.jpg
rename to src/assets/images/profile/user-12.jpg
diff --git a/assets/images/profile/user-13.jpg b/src/assets/images/profile/user-13.jpg
similarity index 100%
rename from assets/images/profile/user-13.jpg
rename to src/assets/images/profile/user-13.jpg
diff --git a/assets/images/profile/user-14.jpg b/src/assets/images/profile/user-14.jpg
similarity index 100%
rename from assets/images/profile/user-14.jpg
rename to src/assets/images/profile/user-14.jpg
diff --git a/assets/images/profile/user-15.jpg b/src/assets/images/profile/user-15.jpg
similarity index 100%
rename from assets/images/profile/user-15.jpg
rename to src/assets/images/profile/user-15.jpg
diff --git a/assets/images/profile/user-2.jpg b/src/assets/images/profile/user-2.jpg
similarity index 100%
rename from assets/images/profile/user-2.jpg
rename to src/assets/images/profile/user-2.jpg
diff --git a/assets/images/profile/user-3.jpg b/src/assets/images/profile/user-3.jpg
similarity index 100%
rename from assets/images/profile/user-3.jpg
rename to src/assets/images/profile/user-3.jpg
diff --git a/assets/images/profile/user-4.jpg b/src/assets/images/profile/user-4.jpg
similarity index 100%
rename from assets/images/profile/user-4.jpg
rename to src/assets/images/profile/user-4.jpg
diff --git a/assets/images/profile/user-5.jpg b/src/assets/images/profile/user-5.jpg
similarity index 100%
rename from assets/images/profile/user-5.jpg
rename to src/assets/images/profile/user-5.jpg
diff --git a/assets/images/profile/user-6.jpg b/src/assets/images/profile/user-6.jpg
similarity index 100%
rename from assets/images/profile/user-6.jpg
rename to src/assets/images/profile/user-6.jpg
diff --git a/assets/images/profile/user-7.jpg b/src/assets/images/profile/user-7.jpg
similarity index 100%
rename from assets/images/profile/user-7.jpg
rename to src/assets/images/profile/user-7.jpg
diff --git a/assets/images/profile/user-8.jpg b/src/assets/images/profile/user-8.jpg
similarity index 100%
rename from assets/images/profile/user-8.jpg
rename to src/assets/images/profile/user-8.jpg
diff --git a/assets/images/profile/user-9.jpg b/src/assets/images/profile/user-9.jpg
similarity index 100%
rename from assets/images/profile/user-9.jpg
rename to src/assets/images/profile/user-9.jpg
diff --git a/assets/images/svgs/apple-icon.svg b/src/assets/images/svgs/apple-icon.svg
similarity index 100%
rename from assets/images/svgs/apple-icon.svg
rename to src/assets/images/svgs/apple-icon.svg
diff --git a/assets/images/svgs/cart-icon.svg b/src/assets/images/svgs/cart-icon.svg
similarity index 100%
rename from assets/images/svgs/cart-icon.svg
rename to src/assets/images/svgs/cart-icon.svg
diff --git a/assets/images/svgs/facebook-icon.svg b/src/assets/images/svgs/facebook-icon.svg
similarity index 100%
rename from assets/images/svgs/facebook-icon.svg
rename to src/assets/images/svgs/facebook-icon.svg
diff --git a/assets/images/svgs/google-icon.svg b/src/assets/images/svgs/google-icon.svg
similarity index 100%
rename from assets/images/svgs/google-icon.svg
rename to src/assets/images/svgs/google-icon.svg
diff --git a/assets/images/svgs/icon-account.svg b/src/assets/images/svgs/icon-account.svg
similarity index 100%
rename from assets/images/svgs/icon-account.svg
rename to src/assets/images/svgs/icon-account.svg
diff --git a/assets/images/svgs/icon-adobe.svg b/src/assets/images/svgs/icon-adobe.svg
similarity index 100%
rename from assets/images/svgs/icon-adobe.svg
rename to src/assets/images/svgs/icon-adobe.svg
diff --git a/assets/images/svgs/icon-bars.svg b/src/assets/images/svgs/icon-bars.svg
similarity index 100%
rename from assets/images/svgs/icon-bars.svg
rename to src/assets/images/svgs/icon-bars.svg
diff --git a/assets/images/svgs/icon-briefcase.svg b/src/assets/images/svgs/icon-briefcase.svg
similarity index 100%
rename from assets/images/svgs/icon-briefcase.svg
rename to src/assets/images/svgs/icon-briefcase.svg
diff --git a/assets/images/svgs/icon-chrome.svg b/src/assets/images/svgs/icon-chrome.svg
similarity index 100%
rename from assets/images/svgs/icon-chrome.svg
rename to src/assets/images/svgs/icon-chrome.svg
diff --git a/assets/images/svgs/icon-connect.svg b/src/assets/images/svgs/icon-connect.svg
similarity index 100%
rename from assets/images/svgs/icon-connect.svg
rename to src/assets/images/svgs/icon-connect.svg
diff --git a/assets/images/svgs/icon-dd-application.svg b/src/assets/images/svgs/icon-dd-application.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-application.svg
rename to src/assets/images/svgs/icon-dd-application.svg
diff --git a/assets/images/svgs/icon-dd-cart.svg b/src/assets/images/svgs/icon-dd-cart.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-cart.svg
rename to src/assets/images/svgs/icon-dd-cart.svg
diff --git a/assets/images/svgs/icon-dd-chat.svg b/src/assets/images/svgs/icon-dd-chat.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-chat.svg
rename to src/assets/images/svgs/icon-dd-chat.svg
diff --git a/assets/images/svgs/icon-dd-date.svg b/src/assets/images/svgs/icon-dd-date.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-date.svg
rename to src/assets/images/svgs/icon-dd-date.svg
diff --git a/assets/images/svgs/icon-dd-invoice.svg b/src/assets/images/svgs/icon-dd-invoice.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-invoice.svg
rename to src/assets/images/svgs/icon-dd-invoice.svg
diff --git a/assets/images/svgs/icon-dd-lifebuoy.svg b/src/assets/images/svgs/icon-dd-lifebuoy.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-lifebuoy.svg
rename to src/assets/images/svgs/icon-dd-lifebuoy.svg
diff --git a/assets/images/svgs/icon-dd-message-box.svg b/src/assets/images/svgs/icon-dd-message-box.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-message-box.svg
rename to src/assets/images/svgs/icon-dd-message-box.svg
diff --git a/assets/images/svgs/icon-dd-mobile.svg b/src/assets/images/svgs/icon-dd-mobile.svg
similarity index 100%
rename from assets/images/svgs/icon-dd-mobile.svg
rename to src/assets/images/svgs/icon-dd-mobile.svg
diff --git a/assets/images/svgs/icon-favorites.svg b/src/assets/images/svgs/icon-favorites.svg
similarity index 100%
rename from assets/images/svgs/icon-favorites.svg
rename to src/assets/images/svgs/icon-favorites.svg
diff --git a/assets/images/svgs/icon-figma.svg b/src/assets/images/svgs/icon-figma.svg
similarity index 100%
rename from assets/images/svgs/icon-figma.svg
rename to src/assets/images/svgs/icon-figma.svg
diff --git a/assets/images/svgs/icon-inbox.svg b/src/assets/images/svgs/icon-inbox.svg
similarity index 100%
rename from assets/images/svgs/icon-inbox.svg
rename to src/assets/images/svgs/icon-inbox.svg
diff --git a/assets/images/svgs/icon-javascript.svg b/src/assets/images/svgs/icon-javascript.svg
similarity index 100%
rename from assets/images/svgs/icon-javascript.svg
rename to src/assets/images/svgs/icon-javascript.svg
diff --git a/assets/images/svgs/icon-mailbox.svg b/src/assets/images/svgs/icon-mailbox.svg
similarity index 100%
rename from assets/images/svgs/icon-mailbox.svg
rename to src/assets/images/svgs/icon-mailbox.svg
diff --git a/assets/images/svgs/icon-master-card-2.svg b/src/assets/images/svgs/icon-master-card-2.svg
similarity index 100%
rename from assets/images/svgs/icon-master-card-2.svg
rename to src/assets/images/svgs/icon-master-card-2.svg
diff --git a/assets/images/svgs/icon-master-card.svg b/src/assets/images/svgs/icon-master-card.svg
similarity index 100%
rename from assets/images/svgs/icon-master-card.svg
rename to src/assets/images/svgs/icon-master-card.svg
diff --git a/assets/images/svgs/icon-office-bag-2.svg b/src/assets/images/svgs/icon-office-bag-2.svg
similarity index 100%
rename from assets/images/svgs/icon-office-bag-2.svg
rename to src/assets/images/svgs/icon-office-bag-2.svg
diff --git a/assets/images/svgs/icon-office-bag.svg b/src/assets/images/svgs/icon-office-bag.svg
similarity index 100%
rename from assets/images/svgs/icon-office-bag.svg
rename to src/assets/images/svgs/icon-office-bag.svg
diff --git a/assets/images/svgs/icon-paypal.svg b/src/assets/images/svgs/icon-paypal.svg
similarity index 100%
rename from assets/images/svgs/icon-paypal.svg
rename to src/assets/images/svgs/icon-paypal.svg
diff --git a/assets/images/svgs/icon-pie.svg b/src/assets/images/svgs/icon-pie.svg
similarity index 100%
rename from assets/images/svgs/icon-pie.svg
rename to src/assets/images/svgs/icon-pie.svg
diff --git a/assets/images/svgs/icon-speech-bubble.svg b/src/assets/images/svgs/icon-speech-bubble.svg
similarity index 100%
rename from assets/images/svgs/icon-speech-bubble.svg
rename to src/assets/images/svgs/icon-speech-bubble.svg
diff --git a/assets/images/svgs/icon-tasks.svg b/src/assets/images/svgs/icon-tasks.svg
similarity index 100%
rename from assets/images/svgs/icon-tasks.svg
rename to src/assets/images/svgs/icon-tasks.svg
diff --git a/assets/images/svgs/icon-user-male.svg b/src/assets/images/svgs/icon-user-male.svg
similarity index 100%
rename from assets/images/svgs/icon-user-male.svg
rename to src/assets/images/svgs/icon-user-male.svg
diff --git a/assets/images/svgs/icon-zip-folder.svg b/src/assets/images/svgs/icon-zip-folder.svg
similarity index 100%
rename from assets/images/svgs/icon-zip-folder.svg
rename to src/assets/images/svgs/icon-zip-folder.svg
diff --git a/assets/images/svgs/mastercard.svg b/src/assets/images/svgs/mastercard.svg
similarity index 100%
rename from assets/images/svgs/mastercard.svg
rename to src/assets/images/svgs/mastercard.svg
diff --git a/assets/images/svgs/paypal.svg b/src/assets/images/svgs/paypal.svg
similarity index 100%
rename from assets/images/svgs/paypal.svg
rename to src/assets/images/svgs/paypal.svg
diff --git a/components/auth/BoxedLoginForm.vue b/src/components/auth/BoxedLoginForm.vue
similarity index 100%
rename from components/auth/BoxedLoginForm.vue
rename to src/components/auth/BoxedLoginForm.vue
diff --git a/components/auth/BoxedRegisterForm.vue b/src/components/auth/BoxedRegisterForm.vue
similarity index 100%
rename from components/auth/BoxedRegisterForm.vue
rename to src/components/auth/BoxedRegisterForm.vue
diff --git a/components/auth/LoginForm.vue b/src/components/auth/LoginForm.vue
similarity index 100%
rename from components/auth/LoginForm.vue
rename to src/components/auth/LoginForm.vue
diff --git a/components/auth/RegisterForm.vue b/src/components/auth/RegisterForm.vue
similarity index 100%
rename from components/auth/RegisterForm.vue
rename to src/components/auth/RegisterForm.vue
diff --git a/components/auth/ResetForm.vue b/src/components/auth/ResetForm.vue
similarity index 100%
rename from components/auth/ResetForm.vue
rename to src/components/auth/ResetForm.vue
diff --git a/components/auth/TwoStepForm.vue b/src/components/auth/TwoStepForm.vue
similarity index 100%
rename from components/auth/TwoStepForm.vue
rename to src/components/auth/TwoStepForm.vue
diff --git a/components/auth/Unauthorization.vue b/src/components/auth/Unauthorization.vue
similarity index 100%
rename from components/auth/Unauthorization.vue
rename to src/components/auth/Unauthorization.vue
diff --git a/components/dashboard/BlogCards.vue b/src/components/dashboard/BlogCards.vue
similarity index 100%
rename from components/dashboard/BlogCards.vue
rename to src/components/dashboard/BlogCards.vue
diff --git a/components/dashboard/DailyActivities.vue b/src/components/dashboard/DailyActivities.vue
similarity index 100%
rename from components/dashboard/DailyActivities.vue
rename to src/components/dashboard/DailyActivities.vue
diff --git a/components/dashboard/NewCustomer.vue b/src/components/dashboard/NewCustomer.vue
similarity index 100%
rename from components/dashboard/NewCustomer.vue
rename to src/components/dashboard/NewCustomer.vue
diff --git a/components/dashboard/RevenueCard.vue b/src/components/dashboard/RevenueCard.vue
similarity index 100%
rename from components/dashboard/RevenueCard.vue
rename to src/components/dashboard/RevenueCard.vue
diff --git a/components/dashboard/RevenueProducts.vue b/src/components/dashboard/RevenueProducts.vue
similarity index 100%
rename from components/dashboard/RevenueProducts.vue
rename to src/components/dashboard/RevenueProducts.vue
diff --git a/components/dashboard/TotalIncome.vue b/src/components/dashboard/TotalIncome.vue
similarity index 100%
rename from components/dashboard/TotalIncome.vue
rename to src/components/dashboard/TotalIncome.vue
diff --git a/components/dashboards/BlogCards.vue b/src/components/dashboards/BlogCards.vue
similarity index 100%
rename from components/dashboards/BlogCards.vue
rename to src/components/dashboards/BlogCards.vue
diff --git a/components/dashboards/DailyActivities.vue b/src/components/dashboards/DailyActivities.vue
similarity index 100%
rename from components/dashboards/DailyActivities.vue
rename to src/components/dashboards/DailyActivities.vue
diff --git a/components/dashboards/NewCustomer.vue b/src/components/dashboards/NewCustomer.vue
similarity index 100%
rename from components/dashboards/NewCustomer.vue
rename to src/components/dashboards/NewCustomer.vue
diff --git a/components/dashboards/RevenueCard.vue b/src/components/dashboards/RevenueCard.vue
similarity index 100%
rename from components/dashboards/RevenueCard.vue
rename to src/components/dashboards/RevenueCard.vue
diff --git a/components/dashboards/RevenueProducts.vue b/src/components/dashboards/RevenueProducts.vue
similarity index 100%
rename from components/dashboards/RevenueProducts.vue
rename to src/components/dashboards/RevenueProducts.vue
diff --git a/components/dashboards/TotalIncome.vue b/src/components/dashboards/TotalIncome.vue
similarity index 100%
rename from components/dashboards/TotalIncome.vue
rename to src/components/dashboards/TotalIncome.vue
diff --git a/components/dashboards/dashboard1/CustomerCard.vue b/src/components/dashboards/dashboard1/CustomerCard.vue
similarity index 100%
rename from components/dashboards/dashboard1/CustomerCard.vue
rename to src/components/dashboards/dashboard1/CustomerCard.vue
diff --git a/components/dashboards/dashboard1/CustomerChart.vue b/src/components/dashboards/dashboard1/CustomerChart.vue
similarity index 100%
rename from components/dashboards/dashboard1/CustomerChart.vue
rename to src/components/dashboards/dashboard1/CustomerChart.vue
diff --git a/components/dashboards/dashboard1/Performence.vue b/src/components/dashboards/dashboard1/Performence.vue
similarity index 100%
rename from components/dashboards/dashboard1/Performence.vue
rename to src/components/dashboards/dashboard1/Performence.vue
diff --git a/components/dashboards/dashboard1/ProjectCard.vue b/src/components/dashboards/dashboard1/ProjectCard.vue
similarity index 100%
rename from components/dashboards/dashboard1/ProjectCard.vue
rename to src/components/dashboards/dashboard1/ProjectCard.vue
diff --git a/components/dashboards/dashboard1/RevenueForcast.vue b/src/components/dashboards/dashboard1/RevenueForcast.vue
similarity index 100%
rename from components/dashboards/dashboard1/RevenueForcast.vue
rename to src/components/dashboards/dashboard1/RevenueForcast.vue
diff --git a/components/dashboards/dashboard1/RevenueProducts.vue b/src/components/dashboards/dashboard1/RevenueProducts.vue
similarity index 100%
rename from components/dashboards/dashboard1/RevenueProducts.vue
rename to src/components/dashboards/dashboard1/RevenueProducts.vue
diff --git a/components/dashboards/dashboard1/SalesOverview.vue b/src/components/dashboards/dashboard1/SalesOverview.vue
similarity index 100%
rename from components/dashboards/dashboard1/SalesOverview.vue
rename to src/components/dashboards/dashboard1/SalesOverview.vue
diff --git a/components/dashboards/dashboard1/TotalSettelment.vue b/src/components/dashboards/dashboard1/TotalSettelment.vue
similarity index 100%
rename from components/dashboards/dashboard1/TotalSettelment.vue
rename to src/components/dashboards/dashboard1/TotalSettelment.vue
diff --git a/components/dashboards/dashboard1/WelcomeCard.vue b/src/components/dashboards/dashboard1/WelcomeCard.vue
similarity index 100%
rename from components/dashboards/dashboard1/WelcomeCard.vue
rename to src/components/dashboards/dashboard1/WelcomeCard.vue
diff --git a/components/dashboards/dashboard1/index.vue.ex b/src/components/dashboards/dashboard1/index.vue.ex
similarity index 100%
rename from components/dashboards/dashboard1/index.vue.ex
rename to src/components/dashboards/dashboard1/index.vue.ex
diff --git a/components/dashboards/dashboard2/AnnualProfit.vue b/src/components/dashboards/dashboard2/AnnualProfit.vue
similarity index 100%
rename from components/dashboards/dashboard2/AnnualProfit.vue
rename to src/components/dashboards/dashboard2/AnnualProfit.vue
diff --git a/components/dashboards/dashboard2/DailyActivities.vue b/src/components/dashboards/dashboard2/DailyActivities.vue
similarity index 100%
rename from components/dashboards/dashboard2/DailyActivities.vue
rename to src/components/dashboards/dashboard2/DailyActivities.vue
diff --git a/components/dashboards/dashboard2/NewCustomer.vue b/src/components/dashboards/dashboard2/NewCustomer.vue
similarity index 100%
rename from components/dashboards/dashboard2/NewCustomer.vue
rename to src/components/dashboards/dashboard2/NewCustomer.vue
diff --git a/components/dashboards/dashboard2/ProfitCard.vue b/src/components/dashboards/dashboard2/ProfitCard.vue
similarity index 100%
rename from components/dashboards/dashboard2/ProfitCard.vue
rename to src/components/dashboards/dashboard2/ProfitCard.vue
diff --git a/components/dashboards/dashboard2/ProifileCard.vue b/src/components/dashboards/dashboard2/ProifileCard.vue
similarity index 100%
rename from components/dashboards/dashboard2/ProifileCard.vue
rename to src/components/dashboards/dashboard2/ProifileCard.vue
diff --git a/components/dashboards/dashboard2/RevenueCard.vue b/src/components/dashboards/dashboard2/RevenueCard.vue
similarity index 100%
rename from components/dashboards/dashboard2/RevenueCard.vue
rename to src/components/dashboards/dashboard2/RevenueCard.vue
diff --git a/components/dashboards/dashboard2/SalesFromLocation.vue b/src/components/dashboards/dashboard2/SalesFromLocation.vue
similarity index 100%
rename from components/dashboards/dashboard2/SalesFromLocation.vue
rename to src/components/dashboards/dashboard2/SalesFromLocation.vue
diff --git a/components/dashboards/dashboard2/SubscriptionCard.vue b/src/components/dashboards/dashboard2/SubscriptionCard.vue
similarity index 100%
rename from components/dashboards/dashboard2/SubscriptionCard.vue
rename to src/components/dashboards/dashboard2/SubscriptionCard.vue
diff --git a/components/dashboards/dashboard2/TotalIncome.vue b/src/components/dashboards/dashboard2/TotalIncome.vue
similarity index 100%
rename from components/dashboards/dashboard2/TotalIncome.vue
rename to src/components/dashboards/dashboard2/TotalIncome.vue
diff --git a/components/dashboards/dashboard2/UsersChart.vue b/src/components/dashboards/dashboard2/UsersChart.vue
similarity index 100%
rename from components/dashboards/dashboard2/UsersChart.vue
rename to src/components/dashboards/dashboard2/UsersChart.vue
diff --git a/components/dashboards/dashboard2/WeeklySchedule.vue b/src/components/dashboards/dashboard2/WeeklySchedule.vue
similarity index 100%
rename from components/dashboards/dashboard2/WeeklySchedule.vue
rename to src/components/dashboards/dashboard2/WeeklySchedule.vue
diff --git a/components/dashboards/dashboard2/WeeklyState.vue b/src/components/dashboards/dashboard2/WeeklyState.vue
similarity index 100%
rename from components/dashboards/dashboard2/WeeklyState.vue
rename to src/components/dashboards/dashboard2/WeeklyState.vue
diff --git a/components/dashboards/dashboard3/Calendarcard.vue b/src/components/dashboards/dashboard3/Calendarcard.vue
similarity index 100%
rename from components/dashboards/dashboard3/Calendarcard.vue
rename to src/components/dashboards/dashboard3/Calendarcard.vue
diff --git a/components/dashboards/dashboard3/IconCards.vue b/src/components/dashboards/dashboard3/IconCards.vue
similarity index 100%
rename from components/dashboards/dashboard3/IconCards.vue
rename to src/components/dashboards/dashboard3/IconCards.vue
diff --git a/components/dashboards/snackbar.vue b/src/components/dashboards/snackbar.vue
similarity index 100%
rename from components/dashboards/snackbar.vue
rename to src/components/dashboards/snackbar.vue
diff --git a/src/components/forms/form-custom/CustomFrom.vue b/src/components/forms/form-custom/CustomFrom.vue
new file mode 100644
index 0000000..00faeb2
--- /dev/null
+++ b/src/components/forms/form-custom/CustomFrom.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {Volume2Icon, VolumeIcon } from 'vue-tabler-icons';
+const select = ref('One');
+const items = ref(['One', 'Two', 'Three', 'Four']);
+const radios = ref('Male');
+const checked = ref(true);
+const range = ref([20, 40]);
+const sel1 = ref('750');
+const sel2 = ref('950');
+const select1 = ref(['750', '850', '950']);
+const select2 = ref(['950', '1050', '1150']);
+const volume = ref(40);
+const model = ref(true);
+
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" sm="4">
+            <v-label class="mb-2 font-weight-medium">Name</v-label>
+            <v-text-field variant="outlined" placeholder="Enter Text" color="primary"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Select Dropdown</v-label>
+            <v-select
+                :items="items"
+                item-title="items"
+                item-value="abbr"
+                return-object
+                single-line
+                variant="outlined"
+                v-model="select"
+            ></v-select>
+        </v-col>
+        <v-col cols="12" sm="4">
+            <v-label class="mb-2 font-weight-medium">Company Name</v-label>
+            <v-text-field variant="outlined" placeholder="Enter Text" color="primary"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Time</v-label>
+            <v-text-field variant="outlined" placeholder="hh:mm"  type="time" color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12" sm="4">
+            <v-label class="mb-2 font-weight-medium">Industry Type</v-label>
+            <v-text-field variant="outlined" placeholder="Disabled Filled" color="primary"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Date</v-label>
+            <v-text-field variant="outlined" type="date" color="primary"></v-text-field>
+        </v-col>
+        
+        <v-col cols="12">
+            <v-label class="mb-2 font-weight-medium">Lorem ipsum dolor sit amet</v-label>
+            <v-radio-group inline v-model="radios">
+                <v-row>
+                    <v-col cols="12" md="4"><v-radio label="Male" color="primary"  value="Male"></v-radio></v-col>
+                    <v-col cols="12" md="4"><v-radio label="Female" color="primary" value="Female"></v-radio></v-col>
+                    <v-col cols="12" md="4"><v-radio label="Disabled" color="primary" value="Disabled" disabled></v-radio></v-col>
+                </v-row>
+            </v-radio-group>
+            <v-label class="mb-2 font-weight-medium">Industry Type</v-label>
+            <v-row>
+                <v-col cols="12" md="4">
+                    <v-checkbox v-model="checked" color="primary" label="Enter text"></v-checkbox>
+                </v-col>
+                <v-col cols="12" md="4">
+                    <v-checkbox label="Enter text" color="primary"></v-checkbox>
+                </v-col>
+                <v-col cols="12" md="4">
+                    <v-checkbox label="Disabled" disabled></v-checkbox>
+                </v-col>
+            </v-row> 
+            <v-row>
+                <v-col cols="12" md="4">
+                    <v-label class="mb-2 font-weight-medium">Slider</v-label>
+                    <v-range-slider v-model="range" strict color="primary"></v-range-slider>
+                    <v-row>
+                        <v-col cols="12" md="6">
+                            <v-select
+                                :items="select1"
+                                item-title="select1"
+                                item-value="abbr"
+                                return-object
+                                single-line
+                                variant="outlined"
+                                v-model="sel1"
+                            ></v-select>
+                        </v-col> 
+                        <v-col cols="12" md="6">
+                            <v-select
+                                :items="select2"
+                                item-title="select2"
+                                item-value="abbr"
+                                return-object
+                                single-line
+                                variant="outlined"
+                                v-model="sel2"
+                            ></v-select>
+                        </v-col>
+                    </v-row>
+                    <v-label class="mb-2 font-weight-medium">Volume</v-label>
+                    <v-slider v-model="volume"  color="primary">
+                        <template v-slot:prepend>
+                            <v-btn size="small" variant="text" color="primary">
+                                <Volume2Icon stroke-width="1.5" size="20" />
+                            </v-btn>
+                        </template>
+                        <template v-slot:append>
+                            <v-btn size="small" variant="text" color="primary">
+                                <VolumeIcon stroke-width="1.5" size="20" />
+                            </v-btn>
+                        </template>
+                    </v-slider>
+                </v-col>
+            </v-row> 
+            <v-label class="mb-2 font-weight-medium mt-4">Switch</v-label>
+            <v-row>
+                <v-col cols="12" md="3" sm="6">
+                    <v-switch v-model="model"  hide-details color="primary" label="Enter text"  inset ></v-switch>
+                </v-col>
+                <v-col cols="12" md="3" sm="6">
+                    <v-switch hide-details color="primary" label="Enter text" inset></v-switch>
+                </v-col>
+                <v-col cols="12" md="3" sm="6">
+                    <v-switch  hide-details label="Disabled" disabled inset></v-switch>
+                </v-col>
+                <v-col cols="12" md="3" sm="6">
+                    <v-switch hide-details label="Disabled" v-model="model" color="primary" disabled inset></v-switch>
+                </v-col>
+            </v-row>
+            <v-row class="mt-6 ">
+                <v-col cols="12" md="6">
+                    <v-btn color="primary" class="mr-3" flat>add new</v-btn>
+                    <v-btn color="primary"  class="mr-3" disabled>add new</v-btn>
+                    <v-btn color="primary" variant="outlined"  class="mr-3" >add new</v-btn>
+                </v-col> 
+                <v-col cols="12" md="6" class="d-flex justify-end">
+                    <v-btn color="info" class="mr-3" flat>add new</v-btn>
+                    <v-btn color="success" flat>add new</v-btn>
+                </v-col>  
+            </v-row>      
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-elements/autocomplete/ComboBox.vue b/src/components/forms/form-elements/autocomplete/ComboBox.vue
new file mode 100644
index 0000000..9bafa66
--- /dev/null
+++ b/src/components/forms/form-elements/autocomplete/ComboBox.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// combo data
+const value = ref('The Dark Knight');
+const items = ref([
+    'The Dark Knight',
+    'Control with Control',
+    'Combo with Solo',
+    'The Dark',
+    'Fight Club',
+    'demo@company.com',
+    'Pulp Fiction'
+]);
+</script>
+<template>
+    <v-autocomplete v-model="value" :items="items" color="primary" variant="outlined" hide-details></v-autocomplete>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/autocomplete/MultipleOptions.vue b/src/components/forms/form-elements/autocomplete/MultipleOptions.vue
new file mode 100644
index 0000000..6863705
--- /dev/null
+++ b/src/components/forms/form-elements/autocomplete/MultipleOptions.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const items2 = ref([
+    'The Dark Knight',
+    'Control with Control',
+    'Combo with Solo',
+    'The Dark',
+    'Fight Club',
+    'demo@company.com',
+    'Pulp Fiction'
+]);
+const value = ref(['The Dark Knight']);
+const multi_value = ref(['The Dark Knight', 'Fight Club']);
+</script>
+
+<template>
+    <v-autocomplete
+        v-model="multi_value"
+        :items="items2"
+        variant="outlined"
+        color="primary"
+        label="Outlined"
+        multiple
+        hide-details
+        closable-chips
+    >
+        <template v-slot:chip>
+            <v-chip label color="primary" size="large" class="mb-1 text-subtitle-1 font-weight-regular"></v-chip>
+        </template>
+    </v-autocomplete>
+</template>
diff --git a/src/components/forms/form-elements/autocomplete/WithCaption.vue b/src/components/forms/form-elements/autocomplete/WithCaption.vue
new file mode 100644
index 0000000..da5ed68
--- /dev/null
+++ b/src/components/forms/form-elements/autocomplete/WithCaption.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// combo data
+const items = ref([
+    'The Dark Knight',
+    'Control with Control',
+    'Combo with Solo',
+    'The Dark',
+    'Fight Club',
+    'demo@company.com',
+    'Pulp Fiction'
+]);
+const value = ref('The Dark Knight');
+const cap_value = ref('demo@company.com');
+const cap_value2 = ref('demo@company.com');
+const multi_value = ref(['The Dark Knight', 'Fight Club']);
+</script>
+<template>
+    <v-autocomplete
+        v-model="cap_value"
+        :items="items"
+        color="primary"
+        label="Email Address"
+        variant="outlined"
+        hide-details
+    ></v-autocomplete>
+
+    <v-autocomplete v-model="cap_value2" :items="items" color="primary" label="Email Address" variant="outlined" hide-details class="mt-5">
+        <template v-slot:prepend-inner>
+            <MailIcon stroke-width="1.5" size="22" />
+        </template>
+    </v-autocomplete>
+</template>
diff --git a/src/components/forms/form-elements/button/BaseButtons.vue b/src/components/forms/form-elements/button/BaseButtons.vue
new file mode 100644
index 0000000..107a7f3
--- /dev/null
+++ b/src/components/forms/form-elements/button/BaseButtons.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="d-flex gap-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height d-flex justify-space-between">
+    <v-btn >elevates (default)</v-btn>
+    <v-btn variant="flat" color="primary">flat</v-btn>
+    <v-btn variant="tonal" color="primary">tonal</v-btn>
+    <v-btn variant="outlined" color="primary">outlined</v-btn>
+    <v-btn variant="text" color="primary">text</v-btn>
+    <v-btn variant="plain" color="primary">plain</v-btn>
+  </div>
+</template>
diff --git a/src/components/forms/form-elements/button/ColorsButtons.vue b/src/components/forms/form-elements/button/ColorsButtons.vue
new file mode 100644
index 0000000..d843a55
--- /dev/null
+++ b/src/components/forms/form-elements/button/ColorsButtons.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// buttons color data
+const btnsColor = ref(['primary', 'secondary', 'error', 'warning','success']);
+</script>
+<template>
+    <div class="d-flex gap-3 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="flat">
+            {{ btn }}
+        </v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/IconColor.vue b/src/components/forms/form-elements/button/IconColor.vue
new file mode 100644
index 0000000..17fb8e3
--- /dev/null
+++ b/src/components/forms/form-elements/button/IconColor.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="d-flex flex-wrap justify-center gap-3 align-center flex-column flex-sm-row fill-height">
+        <v-btn  icon color="primary" flat>
+            <SendIcon stroke-width="1.5" size="22" />
+        </v-btn>
+        <v-btn  icon color="secondary" flat>
+            <SendIcon stroke-width="1.5" size="22" />
+        </v-btn>
+        <v-btn  icon color="success" flat>
+            <SendIcon stroke-width="1.5" size="22" />
+        </v-btn>
+        <v-btn  icon color="error" flat>
+            <SendIcon stroke-width="1.5" size="22" />
+        </v-btn>
+        <v-btn  icon color="warning" flat>
+            <SendIcon stroke-width="1.5" size="22" />
+        </v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/IconColorSizes.vue b/src/components/forms/form-elements/button/IconColorSizes.vue
new file mode 100644
index 0000000..898def6
--- /dev/null
+++ b/src/components/forms/form-elements/button/IconColorSizes.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex flex-wrap justify-center gap-3 align-center flex-column flex-sm-row fill-height">
+        <v-btn color="primary" icon size="x-small" flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="secondary" icon  size="small" flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="success" icon flat><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="error" icon size="large" flat><BellIcon stroke-width="1.5" /></v-btn>
+        <v-btn color="warning" icon  size="x-large" flat><BellIcon stroke-width="1.5"  /></v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/IconsButtons.vue b/src/components/forms/form-elements/button/IconsButtons.vue
new file mode 100644
index 0000000..04fd1b4
--- /dev/null
+++ b/src/components/forms/form-elements/button/IconsButtons.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-btn flat color="error" variant="outlined" ><TrashIcon stroke-width="1.5" size="18" class="mr-2" />left icon </v-btn>
+        <v-btn flat color="secondary" variant="outlined"> right icon <SendIcon stroke-width="1.5" size="18"  class="ml-2" /></v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/OutlineIconColor.vue b/src/components/forms/form-elements/button/OutlineIconColor.vue
new file mode 100644
index 0000000..356f655
--- /dev/null
+++ b/src/components/forms/form-elements/button/OutlineIconColor.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="d-flex flex-wrap justify-center gap-3 align-center flex-column flex-sm-row fill-height">
+        <v-btn variant="outlined"  icon color="primary">
+            <SendIcon stroke-width="1.5" size="22"  />
+        </v-btn>
+        <v-btn variant="outlined"  icon color="secondary">
+            <SendIcon stroke-width="1.5" size="22"  />
+        </v-btn>
+        <v-btn variant="outlined"  icon color="success">
+            <SendIcon stroke-width="1.5" size="22"  />
+        </v-btn>
+        <v-btn variant="outlined"  icon color="error">
+            <SendIcon stroke-width="1.5" size="22"  />
+        </v-btn>
+        <v-btn variant="outlined"  icon color="warning">
+            <SendIcon stroke-width="1.5" size="22"  />
+        </v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/OutlineSizes.vue b/src/components/forms/form-elements/button/OutlineSizes.vue
new file mode 100644
index 0000000..381f6bf
--- /dev/null
+++ b/src/components/forms/form-elements/button/OutlineSizes.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="d-flex gap-2 justify-center align-center flex-column flex-md-row fill-height">
+        <v-btn size="x-small" variant="outlined" color="primary" flat>
+            Extra small
+        </v-btn>
+
+        <v-btn size="small" variant="outlined" color="primary" flat>
+            Small
+        </v-btn>
+
+        <v-btn color="primary" variant="outlined" flat>
+            Normal
+        </v-btn>
+
+        <v-btn color="primary" variant="outlined" size="large" flat>
+            Large
+        </v-btn>
+
+        <v-btn size="x-large" variant="outlined" color="primary" flat>
+            Extra large
+        </v-btn>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/button/OutlinedButtons.vue b/src/components/forms/form-elements/button/OutlinedButtons.vue
new file mode 100644
index 0000000..cb70036
--- /dev/null
+++ b/src/components/forms/form-elements/button/OutlinedButtons.vue
@@ -0,0 +1,11 @@
+
+<template>
+    <div class="d-flex gap-3 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height"> 
+       <v-btn color="primary" variant="outlined">primary</v-btn>
+        <v-btn color="secondary" variant="outlined">secondary</v-btn>
+        <v-btn variant="flat" disabled>
+            Disabled
+        </v-btn>
+        <v-btn color="info" variant="outlined">link</v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/OutlinedIconSize.vue b/src/components/forms/form-elements/button/OutlinedIconSize.vue
new file mode 100644
index 0000000..9c14703
--- /dev/null
+++ b/src/components/forms/form-elements/button/OutlinedIconSize.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex flex-wrap justify-center gap-3 align-center flex-column flex-sm-row fill-height">
+        <v-btn color="primary" icon size="x-small" variant="outlined"><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="secondary" icon  size="small" variant="outlined"><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="secondary" icon  variant="outlined"><BellIcon stroke-width="1.5"  /></v-btn>
+        <v-btn color="error" icon size="large" variant="outlined"><BellIcon stroke-width="1.5" /></v-btn>
+        <v-btn color="warning" icon  size="x-large" variant="outlined"><BellIcon stroke-width="1.5"  /></v-btn>
+    </div>
+</template>
diff --git a/components/ui-components/button/SizeButtons.vue b/src/components/forms/form-elements/button/SizeButtons.vue
similarity index 100%
rename from components/ui-components/button/SizeButtons.vue
rename to src/components/forms/form-elements/button/SizeButtons.vue
diff --git a/src/components/forms/form-elements/button/TextButtons.vue b/src/components/forms/form-elements/button/TextButtons.vue
new file mode 100644
index 0000000..dfe165d
--- /dev/null
+++ b/src/components/forms/form-elements/button/TextButtons.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// buttons color data
+const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+</script>
+<template>
+    <div class="d-flex flex-wrap gap-3 my-2 align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-btn v-for="btn in btnsColor" :key="btn" :color="btn" variant="text">
+            {{ btn }}
+        </v-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/button/buttonGroup/Default.vue b/src/components/forms/form-elements/button/buttonGroup/Default.vue
new file mode 100644
index 0000000..7ca2042
--- /dev/null
+++ b/src/components/forms/form-elements/button/buttonGroup/Default.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const toggle = ref(null);
+</script>
+<template>
+  <div class="d-flex justify-center">
+    <v-btn-toggle
+      v-model="toggle"
+      color="primary"
+      class="text-center"
+    >
+      <v-btn icon="mdi-format-align-left"></v-btn>
+      <v-btn icon="mdi-format-align-center"></v-btn>
+      <v-btn icon="mdi-format-align-right"></v-btn>
+      <v-btn icon="mdi-format-align-justify"></v-btn>
+    </v-btn-toggle>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/button/buttonGroup/Outlined.vue b/src/components/forms/form-elements/button/buttonGroup/Outlined.vue
new file mode 100644
index 0000000..5a23323
--- /dev/null
+++ b/src/components/forms/form-elements/button/buttonGroup/Outlined.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const toggle = ref(null);
+</script>
+<template>
+    <div class="d-flex justify-center">
+        <v-btn-toggle v-model="toggle" color="primary" variant="outlined">
+            <v-btn icon="mdi-format-align-left"></v-btn>
+            <v-btn icon="mdi-format-align-center"></v-btn>
+            <v-btn icon="mdi-format-align-right"></v-btn>
+            <v-btn icon="mdi-format-align-justify"></v-btn>
+        </v-btn-toggle>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/button/buttonGroup/Plain.vue b/src/components/forms/form-elements/button/buttonGroup/Plain.vue
new file mode 100644
index 0000000..1235936
--- /dev/null
+++ b/src/components/forms/form-elements/button/buttonGroup/Plain.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const toggle = ref(null);
+</script>
+<template>
+    <div class="d-flex justify-center">
+        <v-btn-toggle v-model="toggle" color="primary" variant="plain">
+            <v-btn icon="mdi-format-align-left"></v-btn>
+            <v-btn icon="mdi-format-align-center"></v-btn>
+            <v-btn icon="mdi-format-align-right"></v-btn>
+            <v-btn icon="mdi-format-align-justify"></v-btn>
+        </v-btn-toggle>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/button/buttonGroup/Text.vue b/src/components/forms/form-elements/button/buttonGroup/Text.vue
new file mode 100644
index 0000000..f2890a4
--- /dev/null
+++ b/src/components/forms/form-elements/button/buttonGroup/Text.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const toggle = ref(null);
+</script>
+<template>
+  <div class="d-flex justify-center">
+    <v-btn-toggle v-model="toggle" color="primary" variant="text">
+      <v-btn icon="mdi-format-align-left"></v-btn>
+      <v-btn icon="mdi-format-align-center"></v-btn>
+      <v-btn icon="mdi-format-align-right"></v-btn>
+      <v-btn icon="mdi-format-align-justify"></v-btn>
+    </v-btn-toggle>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/checkbox/BasicCheckboxes.vue b/src/components/forms/form-elements/checkbox/BasicCheckboxes.vue
new file mode 100644
index 0000000..5907be9
--- /dev/null
+++ b/src/components/forms/form-elements/checkbox/BasicCheckboxes.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const checkbox = ref(true);
+const checkbox2 = ref(false);
+const checkbox3 = ref(false);
+const checkbox4 = ref(false);
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center  align-center flex-column flex-sm-row">
+        <v-checkbox-btn color="primary" label="Primary" hide-details v-model="checkbox"></v-checkbox-btn>
+        <v-checkbox-btn color="primary" label="Secondary" hide-details v-model="checkbox2"></v-checkbox-btn>
+        <v-checkbox-btn color="primary" label="Success" v-model="checkbox3" hide-details></v-checkbox-btn>
+        <v-checkbox-btn color="primary" label="Warning" hide-details v-model="checkbox4"></v-checkbox-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/checkbox/ColorCheckboxes.vue b/src/components/forms/form-elements/checkbox/ColorCheckboxes.vue
new file mode 100644
index 0000000..f880625
--- /dev/null
+++ b/src/components/forms/form-elements/checkbox/ColorCheckboxes.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const colorChecked = ref(true);
+// checks color data
+const checksColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center align-center flex-column flex-sm-row">
+        <v-checkbox-btn v-for="btn in checksColor" :key="btn" :color="btn" hide-details v-model="colorChecked"></v-checkbox-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/checkbox/CustomCheckbox.vue b/src/components/forms/form-elements/checkbox/CustomCheckbox.vue
new file mode 100644
index 0000000..fe0e124
--- /dev/null
+++ b/src/components/forms/form-elements/checkbox/CustomCheckbox.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="d-flex gap-3 align-center justify-center">
+        <v-checkbox-btn :model-value="true" color='primary'></v-checkbox-btn>
+        <v-checkbox-btn :model-value="false" ></v-checkbox-btn>
+        <v-checkbox-btn indeterminate color='secondary'></v-checkbox-btn>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/checkbox/LabelCheckboxes.vue b/src/components/forms/form-elements/checkbox/LabelCheckboxes.vue
new file mode 100644
index 0000000..806dd85
--- /dev/null
+++ b/src/components/forms/form-elements/checkbox/LabelCheckboxes.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const checked = ref(true);
+const unchecked = ref(false);
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center align-center flex-column flex-sm-row">
+        <v-checkbox-btn color="primary" hide-details v-model="checked" label="Checked"></v-checkbox-btn>
+        <v-checkbox-btn color="primary" disabled hide-details v-model="unchecked" label="Unchecked"></v-checkbox-btn>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/combobox/ComboboxDense.vue b/src/components/forms/form-elements/combobox/ComboboxDense.vue
new file mode 100644
index 0000000..8955080
--- /dev/null
+++ b/src/components/forms/form-elements/combobox/ComboboxDense.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const values = ref('foo');
+const items = ref(["Programming", "Design", "Vue", "Vuetify"]);
+</script>
+<template>
+    <!-- ----------------------------------------------------------------------------- -->
+    <!-- Dense -->
+    <!-- ----------------------------------------------------------------------------- -->
+    <div>
+        <v-row>
+            <v-col cols="12">
+                <v-combobox v-model="values" :items="items" label="Default" hide-details></v-combobox>
+            </v-col>
+            <v-col cols="12">
+                <v-combobox v-model="values" :items="items" density="comfortable" label="Comfortable"  hide-details></v-combobox>
+            </v-col>
+            <v-col cols="12">
+                <v-combobox v-model="values" :items="items" density="compact" label="Compact"  hide-details></v-combobox>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+
diff --git a/src/components/forms/form-elements/combobox/ComboboxMultiple.vue b/src/components/forms/form-elements/combobox/ComboboxMultiple.vue
new file mode 100644
index 0000000..b30009e
--- /dev/null
+++ b/src/components/forms/form-elements/combobox/ComboboxMultiple.vue
@@ -0,0 +1,49 @@
+<script setup >
+import { ref } from 'vue'
+
+const select = ref(['Vuetify', 'Programming'])
+
+const items = [
+  'Programming',
+  'Design',
+  'Vue',
+  'Vuetify',
+]
+
+
+</script>
+<template>
+    <!-- ----------------------------------------------------------------------------- -->
+    <!-- Multiple Options -->
+    <!-- ----------------------------------------------------------------------------- -->
+    <div>
+            <v-row>
+                <v-col cols="12">
+                    <v-combobox v-model="select" :items="items" hide-details label="Select a favorite activity or create a new one"
+                        multiple></v-combobox>
+                </v-col>
+                <v-col cols="12">
+                    <v-combobox v-model="select" :items="items" hide-details label="I use chips" multiple chips></v-combobox>
+                </v-col>
+                <v-col cols="12">
+                    <v-combobox v-model="select" :items="items" hide-details label="I use a scoped slot" multiple >
+                        <template v-slot:selection="data" >
+                            <v-chip :key="JSON.stringify(data.item)" v-bind="data.attrs" :model-value="data.selected"
+                                :disabled="data.disabled" size="small" @click:close="data.parent.selectItem(data.item)">
+                                <template v-slot:prepend>
+                                    <v-avatar class="bg-primary text-uppercase" start>{{
+                                        data.item.title.slice(0, 1)
+                                    }}</v-avatar>
+                                </template>
+                                {{ data.item.title }}
+                            </v-chip>
+                        </template>
+                    </v-combobox>
+                </v-col>
+                <v-col cols="12">
+                    <v-combobox v-model="select" hide-details label="I'm readonly" chips multiple readonly></v-combobox>
+                </v-col>
+            </v-row>
+    </div>
+</template>
+
diff --git a/src/components/forms/form-elements/custominput/InputAppendPrepend.vue b/src/components/forms/form-elements/custominput/InputAppendPrepend.vue
new file mode 100644
index 0000000..3cbff5d
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputAppendPrepend.vue
@@ -0,0 +1,14 @@
+<template>
+    <v-text-field variant="underlined" hide-details>
+        <template v-slot:append>
+            <v-icon color="primary">
+                mdi-plus
+            </v-icon>
+        </template>
+        <template v-slot:prepend>
+            <v-icon color="secondary">
+                mdi-minus
+            </v-icon>
+        </template>
+    </v-text-field>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/custominput/InputError.vue b/src/components/forms/form-elements/custominput/InputError.vue
new file mode 100644
index 0000000..8e0ad07
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputError.vue
@@ -0,0 +1,5 @@
+<template>
+    <v-input :error-messages="['Fatal error']" error disabled>
+        Input
+    </v-input>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/custominput/InputHideDetails.vue b/src/components/forms/form-elements/custominput/InputHideDetails.vue
new file mode 100644
index 0000000..be23c37
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputHideDetails.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+const rules = ref([
+  (value: any) => !!value || "Required.",
+  (value: string | any[]) => (value && value.length >= 3) || "Min 3 characters",
+  (value: any) => (value || "").length <= 20 || "Max 20 characters",
+  (value: string) => {
+    const pattern =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return pattern.test(value) || "Invalid e-mail.";
+  },
+]);
+</script>
+<template>
+        <div>
+          <v-text-field
+            label="Main input"
+            :rules="rules"
+            hide-details="auto"
+            variant="outlined"
+          ></v-text-field>
+        </div>
+  </template>
+  
+
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/custominput/InputLoading.vue b/src/components/forms/form-elements/custominput/InputLoading.vue
new file mode 100644
index 0000000..991ce36
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputLoading.vue
@@ -0,0 +1,3 @@
+<template>
+    <v-text-field color="success" loading  hide-details variant="underlined"></v-text-field>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/custominput/InputMultipleError.vue b/src/components/forms/form-elements/custominput/InputMultipleError.vue
new file mode 100644
index 0000000..bf4d785
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputMultipleError.vue
@@ -0,0 +1,5 @@
+<template>
+    <v-input max-errors="2" :error-messages="['Fatal error', 'Another error']" error disabled>
+        Input
+    </v-input>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/custominput/InputRules.vue b/src/components/forms/form-elements/custominput/InputRules.vue
new file mode 100644
index 0000000..5135149
--- /dev/null
+++ b/src/components/forms/form-elements/custominput/InputRules.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+const rules = ref([
+  (value: any) => !!value || "Required.",
+  (value: string | any[]) => (value && value.length >= 3) || "Min 3 characters",
+  (value: any) => (value || "").length <= 20 || "Max 20 characters",
+  (value: string) => {
+    const pattern =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return pattern.test(value) || "Invalid e-mail.";
+  },
+]);
+</script>
+<template>
+        <div>
+            <v-text-field :rules="rules"  label="Enter Email" hide-details="auto"></v-text-field>
+        </div>
+  </template>
+  
+
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/datetime/DatePicker.vue b/src/components/forms/form-elements/datetime/DatePicker.vue
new file mode 100644
index 0000000..18606e8
--- /dev/null
+++ b/src/components/forms/form-elements/datetime/DatePicker.vue
@@ -0,0 +1,3 @@
+<template>
+    <v-text-field variant="outlined" hide-details type="date"></v-text-field>
+</template>
diff --git a/src/components/forms/form-elements/datetime/TimePicker.vue b/src/components/forms/form-elements/datetime/TimePicker.vue
new file mode 100644
index 0000000..b4a5895
--- /dev/null
+++ b/src/components/forms/form-elements/datetime/TimePicker.vue
@@ -0,0 +1,3 @@
+<template>
+    <v-text-field variant="outlined" hide-details type="time"></v-text-field>
+</template>
diff --git a/src/components/forms/form-elements/fileinput/FileInputAccept.vue b/src/components/forms/form-elements/fileinput/FileInputAccept.vue
new file mode 100644
index 0000000..d427cef
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputAccept.vue
@@ -0,0 +1,8 @@
+<template>
+    <v-file-input
+      accept="image/*"
+      label="File input" 
+      hide-details
+      variant="outlined"
+    ></v-file-input>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputChips.vue b/src/components/forms/form-elements/fileinput/FileInputChips.vue
new file mode 100644
index 0000000..46c6487
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputChips.vue
@@ -0,0 +1,9 @@
+<template>
+    <v-file-input
+      chips
+      multiple
+      label="File input w/ chips"
+      variant="outlined"
+      hide-details
+    ></v-file-input>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputCounter.vue b/src/components/forms/form-elements/fileinput/FileInputCounter.vue
new file mode 100644
index 0000000..af13269
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputCounter.vue
@@ -0,0 +1,10 @@
+<template>
+    <v-file-input
+      show-size
+      counter
+      multiple
+      label="File input"
+      variant="outlined"
+      hide-details
+    ></v-file-input>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputDensity.vue b/src/components/forms/form-elements/fileinput/FileInputDensity.vue
new file mode 100644
index 0000000..39f2a0d
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputDensity.vue
@@ -0,0 +1,7 @@
+<template>
+    <v-file-input
+      label="File input"
+      density="compact"
+      variant="outlined"
+    ></v-file-input>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputMultiple.vue b/src/components/forms/form-elements/fileinput/FileInputMultiple.vue
new file mode 100644
index 0000000..a7b3cab
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputMultiple.vue
@@ -0,0 +1,8 @@
+<template>
+    <v-file-input
+      multiple
+      label="File input"
+      hide-details
+      variant="outlined"
+    ></v-file-input>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputPrepand.vue b/src/components/forms/form-elements/fileinput/FileInputPrepand.vue
new file mode 100644
index 0000000..06c6ec1
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputPrepand.vue
@@ -0,0 +1,8 @@
+<template>
+    <v-file-input
+      label="File input"
+      variant="outlined"
+      prepend-icon="mdi-camera"
+      hide-details
+    ></v-file-input>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputSelection.vue b/src/components/forms/form-elements/fileinput/FileInputSelection.vue
new file mode 100644
index 0000000..f6a7c51
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputSelection.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const files = ref([]);
+</script>
+<template>
+    <!-- ----------------------------------------------------------------------------- -->
+    <!-- FileInputs Selection Slot -->
+    <!-- ----------------------------------------------------------------------------- -->
+    <div>
+        <v-file-input
+          v-model="files"
+          placeholder="Upload your documents"
+          label="File input"
+          multiple
+          variant="outlined"
+          hide-details="auto"
+          prepend-icon="mdi-paperclip"
+        >
+          <template v-slot:selection="{ fileNames }">
+            <template v-for="fileName in fileNames" :key="fileName">
+              <v-chip size="small" label color="primary" class="mr-2">
+                {{ fileName }}
+              </v-chip>
+            </template>
+          </template>
+        </v-file-input>
+      </div>
+  </template>
+  
+ 
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/fileinput/FileInputValidation.vue b/src/components/forms/form-elements/fileinput/FileInputValidation.vue
new file mode 100644
index 0000000..1017440
--- /dev/null
+++ b/src/components/forms/form-elements/fileinput/FileInputValidation.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rules = ref([
+    (value: { size: number }) =>
+        !value || value.size < 2000000 || "Avatar size should be less than 2 MB!",
+]);
+</script>
+<template>
+    <!-- ----------------------------------------------------------------------------- -->
+    <!-- FileInputs Validation -->
+    <!-- ----------------------------------------------------------------------------- -->
+    <div>
+        <v-file-input :rules="rules" accept="image/png, image/jpeg, image/bmp" placeholder="Pick an avatar"
+            prepend-icon="mdi-camera" variant="outlined" label="Avatar" hide-details="auto"></v-file-input>
+    </div>
+</template>
+
+ 
diff --git a/src/components/forms/form-elements/radio/Color.vue b/src/components/forms/form-elements/radio/Color.vue
new file mode 100644
index 0000000..b1fd147
--- /dev/null
+++ b/src/components/forms/form-elements/radio/Color.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioColors = ref('1');
+// radio color data
+const radioColor = ref(['primary', 'secondary', 'success', 'error']);
+</script>
+<template>
+    <div class="">
+        <v-radio-group v-model="radioColors" inline class="d-flex gap-3 justify-center align-center flex-column flex-sm-row">
+            <v-radio v-for="btn in radioColor" :key="btn" :color="btn"  value="1" hide-details></v-radio>
+        </v-radio-group>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/radio/Default.vue b/src/components/forms/form-elements/radio/Default.vue
new file mode 100644
index 0000000..418194a
--- /dev/null
+++ b/src/components/forms/form-elements/radio/Default.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioGroup = ref('1');
+</script>
+<template>
+    <div class="d-flex gap-3 align-center flex-column flex-sm-row">
+        <v-radio-group inline hide-details v-model="radioGroup" class="d-flex justify-center ">
+            <v-radio color="primary" value="1"></v-radio>
+            <v-radio disabled color="primary" value="3"></v-radio>
+            <v-radio color="primary" value="2"></v-radio>
+        </v-radio-group>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/radio/DefaultDirection.vue b/src/components/forms/form-elements/radio/DefaultDirection.vue
new file mode 100644
index 0000000..136c5ba
--- /dev/null
+++ b/src/components/forms/form-elements/radio/DefaultDirection.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioColumn = ref('1');
+</script>
+<template>
+    <div class="d-flex gap-3 align-center flex-column flex-sm-row">
+        <v-radio-group  hide-details v-model="radioColumn" column>
+            <v-radio label="Option 1" color="primary" value="1"></v-radio>
+            <v-radio label="Option 2" color="primary" value="2"></v-radio>
+        </v-radio-group>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/radio/InlineDirection.vue b/src/components/forms/form-elements/radio/InlineDirection.vue
new file mode 100644
index 0000000..c5118b3
--- /dev/null
+++ b/src/components/forms/form-elements/radio/InlineDirection.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioGroup3 = ref('1');
+</script>
+<template>
+    <div class="d-flex justify-center align-center flex-column flex-sm-row">
+        <v-radio-group hide-details v-model="radioGroup3" inline class="d-flex gap-3 justify-center">
+            <v-radio label="Option 1" color="primary" value="1"></v-radio>
+            <v-radio label="Option 2" color="primary" value="2"></v-radio>
+            <v-radio label="Option 3" color="primary" value="3"></v-radio>
+            <v-radio label="Option 4" color="primary" value="4"></v-radio>
+            <v-radio label="Option 5" color="primary" value="5"></v-radio>
+            <v-radio label="Option 6" color="primary" value="6"></v-radio>
+            <v-radio label="Option 7" color="primary" value="7"></v-radio>
+            <v-radio label="Option 8" color="primary" value="8"></v-radio>
+        </v-radio-group>
+
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/radio/Label.vue b/src/components/forms/form-elements/radio/Label.vue
new file mode 100644
index 0000000..3de5548
--- /dev/null
+++ b/src/components/forms/form-elements/radio/Label.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioGroup3 = ref('1');
+</script>
+<template>
+    <div class="d-flex  align-center flex-column flex-sm-row">
+        <v-radio-group hide-details v-model="radioGroup3" inline class="d-flex gap-3 justify-center">
+            <v-radio label="Primary" color="primary" value="1"></v-radio>
+            <v-radio label="Secondary" color="primary" value="2"></v-radio>
+            <v-radio label="Success" color="primary" value="3"></v-radio>
+            <v-radio label="Warning" color="primary" value="4"></v-radio>
+        </v-radio-group>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/radio/LabelwithColor.vue b/src/components/forms/form-elements/radio/LabelwithColor.vue
new file mode 100644
index 0000000..bf46f3d
--- /dev/null
+++ b/src/components/forms/form-elements/radio/LabelwithColor.vue
@@ -0,0 +1,14 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const radioColors = ref('1');
+// radio color data
+const radioColor = ref(['primary', 'secondary', 'success', 'error']);
+</script>
+<template>
+    <div class="">
+        <v-radio-group v-model="radioColors" inline class="d-flex gap-3 justify-center align-center flex-column flex-sm-row">
+            <v-radio v-for="btn in radioColor" :key="btn" :color="btn" :label="btn" value="1" hide-details></v-radio>
+        </v-radio-group>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/select/SelectChip.vue b/src/components/forms/form-elements/select/SelectChip.vue
new file mode 100644
index 0000000..754a699
--- /dev/null
+++ b/src/components/forms/form-elements/select/SelectChip.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const e6 = ref([]);
+const states = ref([
+    "Alabama",
+    "Alaska",
+    "American Samoa",
+    "Arizona",
+    "Arkansas",
+    "California",
+    "Colorado",
+    "Connecticut",
+    "Delaware",
+    "District of Columbia",
+    "Federated States of Micronesia",
+    "Florida",
+    "Georgia",
+    "Guam",
+    "Hawaii",
+    "Idaho",
+    "Illinois",
+    "Indiana",
+    "Iowa",
+    "Kansas",
+    "Kentucky",
+    "Louisiana",
+    "Maine",
+    "Marshall Islands",
+    "Maryland",
+    "Massachusetts",
+    "Michigan",
+    "Minnesota",
+    "Mississippi",
+    "Missouri",
+    "Montana",
+    "Nebraska",
+    "Nevada",
+    "New Hampshire",
+    "New Jersey",
+    "New Mexico",
+    "New York",
+    "North Carolina",
+    "North Dakota",
+    "Northern Mariana Islands",
+    "Ohio",
+    "Oklahoma",
+    "Oregon",
+    "Palau",
+    "Pennsylvania",
+    "Puerto Rico",
+    "Rhode Island",
+    "South Carolina",
+    "South Dakota",
+    "Tennessee",
+    "Texas",
+    "Utah",
+    "Vermont",
+    "Virgin Island",
+    "Virginia",
+    "Washington",
+    "West Virginia",
+    "Wisconsin",
+    "Wyoming",
+]);
+</script>
+<template>
+    <div>
+        <v-select v-model="e6" :items="states" label="Select item" multiple chips hint="What are the target regions"
+            persistent-hint></v-select>
+    </div>
+</template>
+
+
diff --git a/src/components/forms/form-elements/select/SelectDefault.vue b/src/components/forms/form-elements/select/SelectDefault.vue
new file mode 100644
index 0000000..5976367
--- /dev/null
+++ b/src/components/forms/form-elements/select/SelectDefault.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const items = ref(["Foo", "Bar", "Fizz", "Buzz"]);
+</script>
+<template>
+    <div>
+        <v-select
+          :items="items"
+          label="Select Item"
+          hide-details
+        ></v-select>
+    </div>
+  </template>
+
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/select/SelectDensity.vue b/src/components/forms/form-elements/select/SelectDensity.vue
new file mode 100644
index 0000000..3c5bc2e
--- /dev/null
+++ b/src/components/forms/form-elements/select/SelectDensity.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const items = ref(["Foo", "Bar", "Fizz", "Buzz"]);
+</script>
+<template>
+        <div>
+      <v-select
+        :items="items"
+        label="Compact"
+        density="compact"
+      ></v-select>
+  
+      <v-select
+        :items="items"
+        label="Comfortable"
+        density="comfortable"
+      ></v-select>
+  
+      <v-select
+        :items="items"
+        label="Default"
+        hide-details
+      ></v-select>
+    </div>
+  </template>
+  
+
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/select/SelectMultiple.vue b/src/components/forms/form-elements/select/SelectMultiple.vue
new file mode 100644
index 0000000..b2cae46
--- /dev/null
+++ b/src/components/forms/form-elements/select/SelectMultiple.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const e6 = ref([]);
+const states = ref([
+    "Alabama",
+    "Alaska",
+    "American Samoa",
+    "Arizona",
+    "Arkansas",
+    "California",
+    "Colorado",
+    "Connecticut",
+    "Delaware",
+    "District of Columbia",
+    "Federated States of Micronesia",
+    "Florida",
+    "Georgia",
+    "Guam",
+    "Hawaii",
+    "Idaho",
+    "Illinois",
+    "Indiana",
+    "Iowa",
+    "Kansas",
+    "Kentucky",
+    "Louisiana",
+    "Maine",
+    "Marshall Islands",
+    "Maryland",
+    "Massachusetts",
+    "Michigan",
+    "Minnesota",
+    "Mississippi",
+    "Missouri",
+    "Montana",
+    "Nebraska",
+    "Nevada",
+    "New Hampshire",
+    "New Jersey",
+    "New Mexico",
+    "New York",
+    "North Carolina",
+    "North Dakota",
+    "Northern Mariana Islands",
+    "Ohio",
+    "Oklahoma",
+    "Oregon",
+    "Palau",
+    "Pennsylvania",
+    "Puerto Rico",
+    "Rhode Island",
+    "South Carolina",
+    "South Dakota",
+    "Tennessee",
+    "Texas",
+    "Utah",
+    "Vermont",
+    "Virgin Island",
+    "Virginia",
+    "Washington",
+    "West Virginia",
+    "Wisconsin",
+    "Wyoming",
+]);
+</script>
+<template>
+    <div >
+        <v-select v-model="e6" :items="states" label="Select Multiple" multiple hint="Pick your favorite states"
+            persistent-hint></v-select>
+    </div>
+</template>
+
+
diff --git a/src/components/forms/form-elements/select/SelectReadOnly.vue b/src/components/forms/form-elements/select/SelectReadOnly.vue
new file mode 100644
index 0000000..1b24c47
--- /dev/null
+++ b/src/components/forms/form-elements/select/SelectReadOnly.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const items = ref(["Foo", "Bar", "Fizz", "Buzz"]);
+</script>
+<template>
+    <div>
+        <v-select
+          :items="items"
+          label="Select Item"
+          readonly 
+          hide-details
+        ></v-select>
+    </div>
+  </template>
+
+  
\ No newline at end of file
diff --git a/src/components/forms/form-elements/slider/Custom.vue b/src/components/forms/form-elements/slider/Custom.vue
new file mode 100644
index 0000000..44824ca
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Custom.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider1 = ref(50);
+const slider2 = ref(70);
+const slider3 = ref(80);
+const thumb = ref(30);
+const tickLabels = ref({
+  0: "Figs",
+  1: "Lemon",
+  2: "Pear",
+  3: "Apple",
+});
+const satisfactionEmojis = ref([
+  "😭",
+  "😢",
+  "☹️",
+  "🙁",
+  "😐",
+  "🙂",
+  "😊",
+  "😁",
+  "😄",
+  "😍",
+]);
+
+const slider = ref(45);
+</script>
+<template>
+  <div>
+    <v-slider step="10" v-model="thumb" :thumb-size="30" color="primary"></v-slider>
+
+    <v-slider v-model="slider1" color="secondary"></v-slider>
+
+    <v-slider v-model="slider2" color="primary" track-color="secondary"></v-slider>
+
+    <v-slider v-model="slider3" color="primary" thumb-color="secondary"></v-slider>
+
+    <v-slider :ticks="tickLabels" :max="3" step="1" color="primary" show-ticks="always" tick-size="4"></v-slider>
+
+    <v-slider v-model="slider" color="primary" thumb-label="always" class="mt-6" hide-details>
+      <template v-slot:thumb-label="{ modelValue }">
+        {{ satisfactionEmojis[Math.min(Math.floor(modelValue / 10), 9)] }}
+      </template>
+    </v-slider>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/slider/Default.vue b/src/components/forms/form-elements/slider/Default.vue
new file mode 100644
index 0000000..3ea7a03
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Default.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider1 = ref(50);
+</script>
+<template>
+
+        <v-slider v-model="slider1" hide-details color="primary" ></v-slider>
+
+</template>
diff --git a/src/components/forms/form-elements/slider/Disabled.vue b/src/components/forms/form-elements/slider/Disabled.vue
new file mode 100644
index 0000000..05fe5a4
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Disabled.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const slider2 = ref(40);
+</script>
+<template>
+
+        <v-slider v-model="slider2" hide-details color="primary" disabled></v-slider>
+
+</template>
diff --git a/src/components/forms/form-elements/slider/Steps.vue b/src/components/forms/form-elements/slider/Steps.vue
new file mode 100644
index 0000000..797a18f
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Steps.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider5 = ref(40);
+</script>
+<template>
+    <v-slider class="mt-3" v-model="slider5" hide-details color="primary" step="1" thumb-label="always"></v-slider>
+</template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/slider/TickSize.vue b/src/components/forms/form-elements/slider/TickSize.vue
new file mode 100644
index 0000000..62deb69
--- /dev/null
+++ b/src/components/forms/form-elements/slider/TickSize.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider6 = ref(40);
+</script>
+<template>
+    <v-slider class="mt-3" v-model="slider6" tick-size="4" hide-details color="primary" step="10" show-ticks="always" thumb-label="always"></v-slider>
+</template>
diff --git a/src/components/forms/form-elements/slider/Ticks.vue b/src/components/forms/form-elements/slider/Ticks.vue
new file mode 100644
index 0000000..39ffff0
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Ticks.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider6 = ref(40);
+</script>
+<template>
+    <v-slider class="mt-3" v-model="slider6" hide-details color="primary" step="10" show-ticks="always" thumb-label="always"></v-slider>
+</template>
diff --git a/src/components/forms/form-elements/slider/Vertical.vue b/src/components/forms/form-elements/slider/Vertical.vue
new file mode 100644
index 0000000..7c43db6
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Vertical.vue
@@ -0,0 +1,18 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const slider1 = ref(40);
+const slider2 = ref(50);
+const slider3 = ref(70);
+const slider4 = ref(80);
+const slider5 = ref(65);
+</script>
+<template>
+    <div class="d-flex">
+        <v-slider v-model="slider1" hide-details direction="vertical" color="primary"></v-slider>
+        <v-slider v-model="slider2" hide-details direction="vertical" color="primary"></v-slider>
+        <v-slider v-model="slider3" hide-details direction="vertical" color="primary"></v-slider>
+        <v-slider v-model="slider4" hide-details direction="vertical" color="primary"></v-slider>
+        <v-slider v-model="slider5" hide-details direction="vertical" color="primary" disabled></v-slider>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/slider/Volume.vue b/src/components/forms/form-elements/slider/Volume.vue
new file mode 100644
index 0000000..50232e3
--- /dev/null
+++ b/src/components/forms/form-elements/slider/Volume.vue
@@ -0,0 +1,21 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import {Volume2Icon, VolumeIcon } from 'vue-tabler-icons';
+const volume = ref(40);
+</script>
+<template>
+    <v-slider v-model="volume" hide-details color="primary" >
+        <template v-slot:prepend>
+            
+                <Volume2Icon stroke-width="1.5" size="20" />
+      
+        </template>
+        <template v-slot:append>
+           
+                <VolumeIcon stroke-width="1.5" size="20" />
+         
+        </template>
+    </v-slider>
+</template>
diff --git a/src/components/forms/form-elements/stepper/Alternatelabel.vue b/src/components/forms/form-elements/stepper/Alternatelabel.vue
new file mode 100644
index 0000000..d589729
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/Alternatelabel.vue
@@ -0,0 +1,15 @@
+<template>
+    <v-stepper alt-labels>
+      <v-stepper-header>
+        <v-stepper-item title="Ad unit details" value="1"></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item title="Ad sizes" value="2"></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item title="Ad templates" value="3"></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/stepper/AlternativeErrors.vue b/src/components/forms/form-elements/stepper/AlternativeErrors.vue
new file mode 100644
index 0000000..8a531a4
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/AlternativeErrors.vue
@@ -0,0 +1,48 @@
+<template>
+    <v-stepper alt-labels>
+      <v-stepper-header>
+        <v-stepper-item
+          value="1"
+          complete
+        >
+          <template v-slot:title>
+            Ad type
+          </template>
+        </v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          value="2"
+          complete
+        >
+          <template v-slot:title>
+            Ad style
+          </template>
+        </v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          :rules="[() => false]"
+          value="3"
+        >
+          <template v-slot:title>
+            Custom channels
+          </template>
+  
+          <template v-slot:subtitle>
+            Alert message
+          </template>
+        </v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item value="46">
+          <template v-slot:title>
+            Get code
+          </template>
+        </v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/stepper/EditableStepper.vue b/src/components/forms/form-elements/stepper/EditableStepper.vue
new file mode 100644
index 0000000..3effb96
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/EditableStepper.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-stepper>
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+          complete
+          editable
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad group"
+          value="2"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+          editable
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/stepper/ItemStepper.vue b/src/components/forms/form-elements/stepper/ItemStepper.vue
new file mode 100644
index 0000000..9cfc259
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/ItemStepper.vue
@@ -0,0 +1,24 @@
+<template>
+    <v-stepper :items="['Step 1', 'Step 2', 'Step 3']" class="border">
+        <template v-slot:item.1>
+            <v-card flat>
+                <h5 class="text-h6">Step One</h5>
+                <p class="textSecondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+            </v-card>
+        </template>
+
+        <template v-slot:item.2>
+            <v-card flat>
+                <h5 class="text-h6">Step Two</h5>
+                <p class="textSecondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+            </v-card>
+        </template>
+
+        <template v-slot:item.3>
+            <v-card flat>
+                <h5 class="text-h6">Step Three</h5>
+                <p class="textSecondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+            </v-card>
+        </template>
+    </v-stepper>
+</template>
diff --git a/src/components/forms/form-elements/stepper/LinearSteppers.vue b/src/components/forms/form-elements/stepper/LinearSteppers.vue
new file mode 100644
index 0000000..e6821d4
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/LinearSteppers.vue
@@ -0,0 +1,77 @@
+<template>
+    <v-stepper>
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad group"
+          value="2"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  
+    <br>
+  
+    <v-stepper model-value="2">
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad group"
+          value="2"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  
+    <br>
+  
+    <v-stepper model-value="3">
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad group"
+          value="2"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/stepper/NoEditable.vue b/src/components/forms/form-elements/stepper/NoEditable.vue
new file mode 100644
index 0000000..89e13ee
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/NoEditable.vue
@@ -0,0 +1,25 @@
+<template>
+    <v-stepper model-value="2">
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad group"
+          value="2"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/stepper/OptionalSteps.vue b/src/components/forms/form-elements/stepper/OptionalSteps.vue
new file mode 100644
index 0000000..fcdc0ef
--- /dev/null
+++ b/src/components/forms/form-elements/stepper/OptionalSteps.vue
@@ -0,0 +1,52 @@
+<template>
+    <v-stepper model-value="1">
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          subtitle="Optional"
+          title="Create an ad group"
+          value="2"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  
+    <br>
+  
+    <v-stepper model-value="2">
+      <v-stepper-header>
+        <v-stepper-item
+          title="Select campaign settings"
+          value="1"
+          complete
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          subtitle="Optional"
+          title="Create an ad group"
+          value="2"
+        ></v-stepper-item>
+  
+        <v-divider></v-divider>
+  
+        <v-stepper-item
+          title="Create an ad"
+          value="3"
+        ></v-stepper-item>
+      </v-stepper-header>
+    </v-stepper>
+  </template>
\ No newline at end of file
diff --git a/src/components/forms/form-elements/switch/Colors.vue b/src/components/forms/form-elements/switch/Colors.vue
new file mode 100644
index 0000000..a4a8fc5
--- /dev/null
+++ b/src/components/forms/form-elements/switch/Colors.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const model3 = ref(true);
+// switch color data
+const switchColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+</script>
+<template>
+    <div class="d-flex justify-center">
+        <div class="d-flex gap-4 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+            <v-switch v-for="btn in switchColor" :key="btn" :color="btn" :model-value="true"  hide-details></v-switch>
+        </div>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/switch/Default.vue b/src/components/forms/form-elements/switch/Default.vue
new file mode 100644
index 0000000..60a8f55
--- /dev/null
+++ b/src/components/forms/form-elements/switch/Default.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="d-flex justify-center">
+    <div class="d-flex gap-4 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-switch color="primary" :model-value="true" hide-details></v-switch>
+        <v-switch color="primary" :model-value="false" hide-details></v-switch>
+        <v-switch color="primary" :model-value="true" disabled hide-details></v-switch>
+        <v-switch color="primary" :model-value="false" disabled hide-details></v-switch>
+    </div>
+</div>
+</template>
diff --git a/src/components/forms/form-elements/switch/Inset.vue b/src/components/forms/form-elements/switch/Inset.vue
new file mode 100644
index 0000000..0afef25
--- /dev/null
+++ b/src/components/forms/form-elements/switch/Inset.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="d-flex justify-center">
+    <div class="d-flex gap-4 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-switch color="primary" :model-value="true" hide-details inset></v-switch>
+        <v-switch color="primary" :model-value="false" hide-details inset></v-switch>
+        <v-switch color="primary" :model-value="true" disabled hide-details inset></v-switch>
+        <v-switch color="primary" :model-value="false" disabled hide-details inset></v-switch>
+    </div>
+</div>
+</template>
diff --git a/src/components/forms/form-elements/switch/InsetColors.vue b/src/components/forms/form-elements/switch/InsetColors.vue
new file mode 100644
index 0000000..a17bbcc
--- /dev/null
+++ b/src/components/forms/form-elements/switch/InsetColors.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const model2 = ref(true);
+// switch color data
+const switchColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+</script>
+<template>
+     <div class="d-flex justify-center">
+    <div class="d-flex gap-4 justify-center align-center flex-column flex-wrap flex-xl-nowrap flex-sm-row fill-height">
+        <v-switch v-for="btn in switchColor" :key="btn" :color="btn"  :model-value="true" hide-details inset></v-switch>
+    </div>
+    </div>
+</template>
diff --git a/src/components/forms/form-elements/switch/Label.vue b/src/components/forms/form-elements/switch/Label.vue
new file mode 100644
index 0000000..3e7241d
--- /dev/null
+++ b/src/components/forms/form-elements/switch/Label.vue
@@ -0,0 +1,4 @@
+<template>
+        <v-switch color="primary" :model-value="true" label="Label" hide-details></v-switch>
+        <v-switch color="primary" disabled label="Disabled" :model-value="false" hide-details></v-switch>
+</template>
diff --git a/src/components/forms/form-elements/switch/States.vue b/src/components/forms/form-elements/switch/States.vue
new file mode 100644
index 0000000..bccd188
--- /dev/null
+++ b/src/components/forms/form-elements/switch/States.vue
@@ -0,0 +1,14 @@
+<template>
+    <v-switch
+      loading="warning"
+      :model-value="true"
+      label="on loading"
+      hide-details
+    ></v-switch>
+    <v-switch
+      :model-value="false"
+      loading="warning"
+      label="off loading"
+      hide-details
+    ></v-switch>
+</template>
diff --git a/src/components/forms/form-elements/treeview/Activatable.vue b/src/components/forms/form-elements/treeview/Activatable.vue
new file mode 100644
index 0000000..17ce34b
--- /dev/null
+++ b/src/components/forms/form-elements/treeview/Activatable.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const items = [
+    {
+        id: 1,
+        title: 'Applications :',
+        children: [
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' }
+        ]
+    },
+    {
+        id: 5,
+        title: 'Documents :',
+        children: [
+            {
+                id: 6,
+                title: 'vuetify :',
+                children: [
+                    {
+                        id: 7,
+                        title: 'src :',
+                        children: [
+                            { id: 8, title: 'index : ts' },
+                            { id: 9, title: 'bootstrap : ts' }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 10,
+                title: 'material2 :',
+                children: [
+                    {
+                        id: 11,
+                        title: 'src :',
+                        children: [
+                            { id: 12, title: 'v-btn : ts' },
+                            { id: 13, title: 'v-card : ts' },
+                            { id: 14, title: 'v-window : ts' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 15,
+        title: 'Downloads :',
+        children: [
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' }
+        ]
+    },
+    {
+        id: 19,
+        title: 'Videos :',
+        children: [
+            {
+                id: 20,
+                title: 'Tutorials :',
+                children: [
+                    { id: 21, title: 'Basic layouts : mp4' },
+                    { id: 22, title: 'Advanced techniques : mp4' },
+                    { id: 23, title: 'All about app : dir' }
+                ]
+            },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' }
+        ]
+    }
+];
+</script>
+<template>
+    <v-treeview :items="items" activatable></v-treeview>
+</template>
diff --git a/src/components/forms/form-elements/treeview/Basic.vue b/src/components/forms/form-elements/treeview/Basic.vue
new file mode 100644
index 0000000..aea4414
--- /dev/null
+++ b/src/components/forms/form-elements/treeview/Basic.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const items = [
+    {
+        id: 1,
+        title: 'Applications :',
+        children: [
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' }
+        ]
+    },
+    {
+        id: 5,
+        title: 'Documents :',
+        children: [
+            {
+                id: 6,
+                title: 'vuetify :',
+                children: [
+                    {
+                        id: 7,
+                        title: 'src :',
+                        children: [
+                            { id: 8, title: 'index : ts' },
+                            { id: 9, title: 'bootstrap : ts' }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 10,
+                title: 'material2 :',
+                children: [
+                    {
+                        id: 11,
+                        title: 'src :',
+                        children: [
+                            { id: 12, title: 'v-btn : ts' },
+                            { id: 13, title: 'v-card : ts' },
+                            { id: 14, title: 'v-window : ts' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 15,
+        title: 'Downloads :',
+        children: [
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' }
+        ]
+    },
+    {
+        id: 19,
+        title: 'Videos :',
+        children: [
+            {
+                id: 20,
+                title: 'Tutorials :',
+                children: [
+                    { id: 21, title: 'Basic layouts : mp4' },
+                    { id: 22, title: 'Advanced techniques : mp4' },
+                    { id: 23, title: 'All about app : dir' }
+                ]
+            },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' }
+        ]
+    }
+];
+</script>
+<template>
+    <v-treeview :items="items"></v-treeview>
+</template>
diff --git a/src/components/forms/form-elements/treeview/Colors.vue b/src/components/forms/form-elements/treeview/Colors.vue
new file mode 100644
index 0000000..8bf0805
--- /dev/null
+++ b/src/components/forms/form-elements/treeview/Colors.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const items = [
+    {
+        id: 1,
+        title: 'Applications :',
+        children: [
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' }
+        ]
+    },
+    {
+        id: 5,
+        title: 'Documents :',
+        children: [
+            {
+                id: 6,
+                title: 'vuetify :',
+                children: [
+                    {
+                        id: 7,
+                        title: 'src :',
+                        children: [
+                            { id: 8, title: 'index : ts' },
+                            { id: 9, title: 'bootstrap : ts' }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 10,
+                title: 'material2 :',
+                children: [
+                    {
+                        id: 11,
+                        title: 'src :',
+                        children: [
+                            { id: 12, title: 'v-btn : ts' },
+                            { id: 13, title: 'v-card : ts' },
+                            { id: 14, title: 'v-window : ts' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 15,
+        title: 'Downloads :',
+        children: [
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' }
+        ]
+    },
+    {
+        id: 19,
+        title: 'Videos :',
+        children: [
+            {
+                id: 20,
+                title: 'Tutorials :',
+                children: [
+                    { id: 21, title: 'Basic layouts : mp4' },
+                    { id: 22, title: 'Advanced techniques : mp4' },
+                    { id: 23, title: 'All about app : dir' }
+                ]
+            },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' }
+        ]
+    }
+];
+</script>
+<template>
+    <v-treeview :items="items" color="primary" activatable></v-treeview>
+</template>
diff --git a/src/components/forms/form-elements/treeview/DenseMode.vue b/src/components/forms/form-elements/treeview/DenseMode.vue
new file mode 100644
index 0000000..829935c
--- /dev/null
+++ b/src/components/forms/form-elements/treeview/DenseMode.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const items = [
+    {
+        id: 1,
+        title: 'Applications :',
+        children: [
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' }
+        ]
+    },
+    {
+        id: 5,
+        title: 'Documents :',
+        children: [
+            {
+                id: 6,
+                title: 'vuetify :',
+                children: [
+                    {
+                        id: 7,
+                        title: 'src :',
+                        children: [
+                            { id: 8, title: 'index : ts' },
+                            { id: 9, title: 'bootstrap : ts' }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 10,
+                title: 'material2 :',
+                children: [
+                    {
+                        id: 11,
+                        title: 'src :',
+                        children: [
+                            { id: 12, title: 'v-btn : ts' },
+                            { id: 13, title: 'v-card : ts' },
+                            { id: 14, title: 'v-window : ts' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 15,
+        title: 'Downloads :',
+        children: [
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' }
+        ]
+    },
+    {
+        id: 19,
+        title: 'Videos :',
+        children: [
+            {
+                id: 20,
+                title: 'Tutorials :',
+                children: [
+                    { id: 21, title: 'Basic layouts : mp4' },
+                    { id: 22, title: 'Advanced techniques : mp4' },
+                    { id: 23, title: 'All about app : dir' }
+                ]
+            },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' }
+        ]
+    }
+];
+</script>
+<template>
+    <v-treeview :items="items" density="compact"></v-treeview>
+</template>
diff --git a/src/components/forms/form-elements/treeview/OpenAll.vue b/src/components/forms/form-elements/treeview/OpenAll.vue
new file mode 100644
index 0000000..782f882
--- /dev/null
+++ b/src/components/forms/form-elements/treeview/OpenAll.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const items = [
+    {
+        id: 1,
+        title: 'Applications :',
+        children: [
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' }
+        ]
+    },
+    {
+        id: 5,
+        title: 'Documents :',
+        children: [
+            {
+                id: 6,
+                title: 'vuetify :',
+                children: [
+                    {
+                        id: 7,
+                        title: 'src :',
+                        children: [
+                            { id: 8, title: 'index : ts' },
+                            { id: 9, title: 'bootstrap : ts' }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 10,
+                title: 'material2 :',
+                children: [
+                    {
+                        id: 11,
+                        title: 'src :',
+                        children: [
+                            { id: 12, title: 'v-btn : ts' },
+                            { id: 13, title: 'v-card : ts' },
+                            { id: 14, title: 'v-window : ts' }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 15,
+        title: 'Downloads :',
+        children: [
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' }
+        ]
+    },
+    {
+        id: 19,
+        title: 'Videos :',
+        children: [
+            {
+                id: 20,
+                title: 'Tutorials :',
+                children: [
+                    { id: 21, title: 'Basic layouts : mp4' },
+                    { id: 22, title: 'Advanced techniques : mp4' },
+                    { id: 23, title: 'All about app : dir' }
+                ]
+            },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' }
+        ]
+    }
+];
+</script>
+<template>
+    <v-treeview :items="items" item-value="id" open-all></v-treeview>
+</template>
diff --git a/src/components/forms/form-horizontal/AccountDetailsTab.vue b/src/components/forms/form-horizontal/AccountDetailsTab.vue
new file mode 100644
index 0000000..6d47de1
--- /dev/null
+++ b/src/components/forms/form-horizontal/AccountDetailsTab.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/* Password hide/show */
+const show2 = ref(true);
+const show3 = ref(true);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">User Name</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="John" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Password</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field
+                        color="primary"
+                        variant="outlined"
+                        :type="show2 ? 'text' : 'password'"
+                        placeholder="john.deo"
+                        hide-details
+                        class="text-subtitle-1"
+                        :append-inner-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
+                        @click:append-inner="show2 = !show2"
+                    >
+                    </v-text-field>
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Email</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field
+                        color="primary"
+                        variant="outlined"
+                        type="email"
+                        placeholder="john.deo"
+                        suffix="@example.com"
+                        hide-details
+                    />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Confirm</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field
+                        color="primary"
+                        variant="outlined"
+                        :type="show3 ? 'text' : 'password'"
+                        placeholder="john.deo"
+                        hide-details
+                        class="text-subtitle-1"
+                        :append-inner-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
+                        @click:append-inner="show3 = !show3"
+                    >
+                    </v-text-field>
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6" class="mt-n6">
+            <v-row class="align-center">
+                <v-col cols="12" sm="9" offset-sm="3">
+                    <v-btn color="primary" flat>Submit</v-btn>
+                    <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                </v-col>
+            </v-row>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-horizontal/BasicLayout.vue b/src/components/forms/form-horizontal/BasicLayout.vue
new file mode 100644
index 0000000..b6b70d5
--- /dev/null
+++ b/src/components/forms/form-horizontal/BasicLayout.vue
@@ -0,0 +1,57 @@
+
+<template>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Name</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Company</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="ACME Inc." hide-details />
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Email</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="email" placeholder="john.deo" suffix="@example.com" hide-details />
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Phone No</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="412 2150 451" hide-details />
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Message</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-textarea
+                auto-grow
+                variant="outlined"
+                placeholder="Hi, Do you  have a moment to talk Jeo ?"
+                rows="2"
+                color="primary"
+                row-height="25"
+                shaped
+                hide-details
+            ></v-textarea>
+        </v-col>
+    </v-row>
+    <v-row>
+        <v-col cols="12" sm="9" offset-sm="3">
+           <v-btn color="primary" flat>Send</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-horizontal/BasicWithIcons.vue b/src/components/forms/form-horizontal/BasicWithIcons.vue
new file mode 100644
index 0000000..7da7676
--- /dev/null
+++ b/src/components/forms/form-horizontal/BasicWithIcons.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { UserIcon, BuildingArchIcon, MailIcon, PhoneIcon, Message2Icon } from 'vue-tabler-icons';
+</script>
+<template>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Name</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details>
+                <template v-slot:prepend-inner>
+                    <UserIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Company</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="ACME Inc." hide-details>
+                <template v-slot:prepend-inner>
+                    <BuildingArchIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Email</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="email" placeholder="john.deo" hide-details>
+                <template v-slot:prepend-inner>
+                    <MailIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Phone No</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="412 2150 451" hide-details>
+                <template v-slot:prepend-inner>
+                    <PhoneIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+    </v-row>
+    <v-row class="align-center mb-3">
+        <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+            <v-label class=" font-weight-medium">Message</v-label>
+        </v-col>
+        <v-col cols="12" sm="9">
+            <v-textarea
+                auto-grow
+                variant="outlined"
+                placeholder="Hi, Do you  have a moment to talk Jeo ?"
+                rows="2"
+                color="primary"
+                row-height="25"
+                shaped
+                hide-details
+            >
+                <template v-slot:prepend-inner>
+                    <Message2Icon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-textarea>
+        </v-col>
+    </v-row>
+    <v-row>
+        <v-col cols="12" sm="9" offset-sm="3">
+            <v-btn color="primary" flat>Send</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-horizontal/Collapsible.vue b/src/components/forms/form-horizontal/Collapsible.vue
new file mode 100644
index 0000000..e555687
--- /dev/null
+++ b/src/components/forms/form-horizontal/Collapsible.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { HelpIcon } from 'vue-tabler-icons';
+
+const radioColumn = ref('1');
+const radioInline = ref('1');
+const paymentradio = ref('1');
+</script>
+<template>
+    <h5 class="text-h5 mb-6 mt-3">Collapsible Section</h5>
+    <v-expansion-panels>
+        <!---Delivery Address--->
+        <v-expansion-panel elevation="10" >
+            <v-expansion-panel-title class="text-h6">Delivery Address</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-row>
+                    <v-col cols="12" md="6">
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">Full Name</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                            </v-col>
+                        </v-row>
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">Address</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-textarea
+                                    auto-grow
+                                    variant="outlined"
+                                    placeholder="150, Ring Road"
+                                    rows="2"
+                                    color="primary"
+                                    row-height="25"
+                                    shaped
+                                    hide-details
+                                ></v-textarea>
+                            </v-col>
+                        </v-row>
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">City</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="Vadodara" hide-details>
+                                </v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row class="align-start">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="mt-sm-2 mt-0 font-weight-medium">Address Type</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-radio-group v-model="radioColumn" column class="ml-n3" hide-details>
+                                    <v-radio label="Home (All day delivery)" color="primary" value="1"></v-radio>
+                                    <v-radio label="Office (Delivery between 10 AM - 5 PM)" color="primary" value="2"></v-radio>
+                                </v-radio-group>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+
+                    <v-col cols="12" md="6">
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">Phone No</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="1340 2154 123" hide-details>
+                                </v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">Pincode</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="120125" hide-details>
+                                </v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row class="align-center mb-3">
+                            <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                                <v-label class="font-weight-medium">Landmark</v-label>
+                            </v-col>
+                            <v-col cols="12" sm="9">
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="Nr.Wall Street" hide-details />
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+        <!---Delivery Options--->
+        <v-expansion-panel elevation="10" class=" mt-3">
+            <v-expansion-panel-title class="text-h6">Delivery Options</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-radio-group v-model="radioInline" inline hide-details class="ml-n3">
+                    <v-radio label="Standard 3-5 Days" color="primary" value="1"></v-radio>
+                    <v-radio label="Express" color="primary" value="2"></v-radio>
+                    <v-radio label="Overnight" color="primary" value="3"></v-radio>
+                </v-radio-group>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+        <!---Payment Method--->
+        <v-expansion-panel elevation="10" class=" mt-3">
+            <v-expansion-panel-title class="text-h6">Payment Method</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-radio-group v-model="paymentradio" inline hide-details class="ml-n3">
+                    <v-radio label="Credit/Debit/ATM Card" color="primary" value="1"></v-radio>
+                    <v-radio label="Cash on Delivery" color="primary" value="2"></v-radio>
+                </v-radio-group>
+                <v-row class="mt-4">
+                    <v-col cols="12" md="8">
+                        <v-label class="mb-2 font-weight-medium">Card Number</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="1250 4521 5630 1540" />
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Name</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                            </v-col>
+                            <v-col cols="12" md="3" sm="6">
+                                <v-label class="mb-2 font-weight-medium">Exp. Date</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="MM/YY" hide-details />
+                            </v-col>
+                            <v-col cols="12" md="3" sm="6">
+                                <v-label class="mb-2 font-weight-medium">CVV Code</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="456" hide-details>
+                                    <template v-slot:append-inner>
+                                        <HelpIcon stroke-width="1.5" size="22" class="text-medium-emphasis ml-3" />
+                                    </template>
+                                </v-text-field>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-btn color="primary" flat>Submit</v-btn>
+                        <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/forms/form-horizontal/FormLabelAlign.vue b/src/components/forms/form-horizontal/FormLabelAlign.vue
new file mode 100644
index 0000000..d9c06d0
--- /dev/null
+++ b/src/components/forms/form-horizontal/FormLabelAlign.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const show2 = ref(true);
+
+/*Location Select*/
+const select = ref('');
+const location = ref(['India', 'United Kingdom', 'Srilanka']);
+</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">Form Label Alignment</v-card-title>
+            </div>
+        </v-card-item>
+        <v-divider></v-divider>
+        <!----Account Details---->
+        <v-card-text class="pb-0">
+            <h6 class="text-h6">Account Details</h6>
+            <div class="mt-6">
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Username</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Email</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            type="email"
+                            placeholder="john.deo"
+                            suffix="@example.com"
+                            hide-details
+                        />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Password</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            :type="show2 ? 'text' : 'password'"
+                            placeholder="john.deo"
+                            hide-details
+                            :append-inner-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
+                            @click:append-inner="show2 = !show2"
+                        >
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-card-text>
+        <v-divider></v-divider>
+        <!----Personal Info---->
+        <v-card-text class="pb-1">
+            <h6 class="text-h6">Personal Info</h6>
+            <div class="mt-6">
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Full Name</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Country</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-select
+                            v-model="select"
+                            :items="location"
+                            item-title="state"
+                            item-value="abbr"
+                            label="Select"
+                            return-object
+                            single-line
+                            variant="outlined"
+                            hide-details
+                        ></v-select>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Birth Date</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="date" hide-details></v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0 text-right">
+                        <v-label class=" font-weight-medium">Phone No</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="123 4567 207" hide-details>
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="9" offset-sm="3">
+                        <v-btn color="primary" flat>Submit</v-btn>
+                        <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/src/components/forms/form-horizontal/FormSeprator.vue b/src/components/forms/form-horizontal/FormSeprator.vue
new file mode 100644
index 0000000..50e8063
--- /dev/null
+++ b/src/components/forms/form-horizontal/FormSeprator.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const show2 = ref(true);
+
+/*Location Select*/
+const select = ref('');
+const location = ref(['India', 'United Kingdom', 'Srilanka']);
+</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">Form Separator</v-card-title>
+            </div>
+        </v-card-item>
+        <v-divider></v-divider>
+        <!----Account Details---->
+        <v-card-text class="pb-0">
+            <h6 class="text-h6">Account Details</h6>
+            <div class="mt-6">
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Username</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Email</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            type="email"
+                            placeholder="john.deo"
+                            suffix="@example.com"
+                            hide-details
+                        />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Password</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            :type="show2 ? 'text' : 'password'"
+                            placeholder="john.deo"
+                            hide-details
+                            :append-inner-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
+                            @click:append-inner="show2 = !show2"
+                        >
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-card-text>
+        <v-divider></v-divider>
+        <!----Personal Info---->
+        <v-card-text class="pb-1">
+            <h6 class="text-h6">Personal Info</h6>
+            <div class="mt-6">
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Full Name</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Country</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-select
+                            v-model="select"
+                            :items="location"
+                            item-title="state"
+                            item-value="abbr"
+                            label="Select"
+                            return-object
+                            single-line
+                            variant="outlined"
+                            hide-details
+                        ></v-select>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Birth Date</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="date" hide-details></v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                        <v-label class=" font-weight-medium">Phone No</v-label>
+                    </v-col>
+                    <v-col cols="12" sm="9">
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="123 4567 207" hide-details>
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row class="align-center mb-3">
+                    <v-col cols="12" sm="9" offset-sm="3">
+                        <v-btn color="primary" flat>Submit</v-btn>
+                        <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/src/components/forms/form-horizontal/PersonalInfoTab.vue b/src/components/forms/form-horizontal/PersonalInfoTab.vue
new file mode 100644
index 0000000..8dab7e3
--- /dev/null
+++ b/src/components/forms/form-horizontal/PersonalInfoTab.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// import type { VTextField } from 'vuetify/lib/components';
+/*Location Select*/
+const select = ref('');
+const location = ref(['India', 'United Kingdom', 'Srilanka']);
+
+/*Language Select*/
+const selectlng = ref('');
+const language = ref(['English', 'French']);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">First Name</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <VTextField color="primary" type="text" placeholder="John" hide-details ></VTextField>
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Country</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <VSelect v-model="select" :items="location" single-line  hide-details></VSelect>
+                </v-col>
+            </v-row>
+            <v-row class="align-center">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Birth Date</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <VTextField color="primary"  type="date" hide-details></VTextField>
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Last Name</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="Doe" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Language</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <VSelect v-model="selectlng" :items="language" single-line  hide-details></VSelect>
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Phone no</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="123 4567 201" hide-details></v-text-field>
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6" class="mt-n6">
+            <v-row class="align-center">
+                <v-col cols="12" sm="9" offset-sm="3">
+                    <v-btn color="primary" flat>Submit</v-btn>
+                    <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                </v-col>
+            </v-row>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-horizontal/SocialLinksTab.vue b/src/components/forms/form-horizontal/SocialLinksTab.vue
new file mode 100644
index 0000000..8e9568f
--- /dev/null
+++ b/src/components/forms/form-horizontal/SocialLinksTab.vue
@@ -0,0 +1,64 @@
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Twitter</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://twitter.com/abc" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Google</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://plus.google.com/abc" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Instagram</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://instagram.com/abc" hide-details />
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6">
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Facebook</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://facebook.com/abc" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Linkedin</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://Linkedin.com/abc" hide-details />
+                </v-col>
+            </v-row>
+            <v-row class="align-center mb-3">
+                <v-col cols="12" sm="3" class="pb-sm-3 pb-0">
+                    <v-label class="font-weight-medium">Quora</v-label>
+                </v-col>
+                <v-col cols="12" sm="9">
+                    <v-text-field color="primary" variant="outlined" type="text" placeholder="https://Quora.com/abc" hide-details />
+                </v-col>
+            </v-row>
+        </v-col>
+        <v-col cols="12" md="6" class="mt-n6">
+            <v-row class="align-center">
+                <v-col cols="12" sm="9" offset-sm="3">
+                    <v-btn color="primary" flat>Submit</v-btn>
+                    <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                </v-col>
+            </v-row>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-layouts/BasicHeaderForm.vue b/src/components/forms/form-layouts/BasicHeaderForm.vue
new file mode 100644
index 0000000..b015544
--- /dev/null
+++ b/src/components/forms/form-layouts/BasicHeaderForm.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const select = ref('select');
+const gender = ref(['Male', 'Female']);
+const inline = ref(null);
+const country = ref(['USA', 'United Kingdom', 'India', 'Srilanka']);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="12">
+            <v-alert variant="tonal" type="warning" color="primary" class="mb-6"> Person Info </v-alert>
+
+            <v-row>
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">First Name</v-label>
+                    <v-text-field variant="outlined" color="primary"></v-text-field>
+                    <v-label class="mb-2 font-weight-medium">Select Gender</v-label>
+                    <v-select :items="gender" item-title="gender" item-value="abbr" return-object single-line variant="outlined"></v-select>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">Last Name</v-label>
+                    <v-text-field variant="outlined" color="primary"></v-text-field>
+                    <v-label class="mb-2 font-weight-medium">Date of Birth</v-label>
+                    <v-text-field color="primary" variant="outlined" type="date" ></v-text-field>
+                </v-col>
+            </v-row>
+            <v-label class="mb-2 font-weight-medium">Membership</v-label>
+            <v-radio-group v-model="inline" inline>
+                <v-radio label="Free" value="radio-1" color="primary"></v-radio>
+                <v-radio label="Paid" value="radio-2" color="primary"></v-radio>
+            </v-radio-group>
+            <!---Address--->
+            <v-alert variant="tonal" type="warning" color="primary" class="mb-6"> Address </v-alert>
+            <v-row>
+                <v-col cols="12">
+                    <v-label class="mb-2 font-weight-medium">Street</v-label>
+                    <v-text-field variant="outlined" color="primary" hide-details></v-text-field>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">City</v-label>
+                    <v-text-field variant="outlined" color="primary"></v-text-field>
+                    <v-label class="mb-2 font-weight-medium">Post Code</v-label>
+                    <v-text-field variant="outlined" color="primary"></v-text-field>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <v-label class="mb-2 font-weight-medium">State</v-label>
+                    <v-text-field variant="outlined" color="primary"></v-text-field>
+                    <v-label class="mb-2 font-weight-medium">Country</v-label>
+                    <v-select
+                        :items="country"
+                        item-title="country"
+                        item-value="abbr"
+                        return-object
+                        single-line
+                        variant="outlined"
+                    ></v-select>
+                </v-col>
+            </v-row>
+            
+            <v-btn color="error" class="mr-3">Cancel</v-btn>
+            <v-btn color="primary">Submit</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-layouts/DefaultForm.vue b/src/components/forms/form-layouts/DefaultForm.vue
new file mode 100644
index 0000000..99e10e8
--- /dev/null
+++ b/src/components/forms/form-layouts/DefaultForm.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const select = ref('select');
+const items = ref(['One', 'Two', 'Three', 'Four']);
+const defaultcheckbox1 = ref(false);
+const defaultcheckbox2 = ref(false);
+const defaultcheckbox3 = ref(false);
+const defaultcheckbox4 = ref(false);
+const defaultcheckbox5 = ref(false);
+const defaultcheckbox6 = ref(false);
+
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="12">
+            <v-label class="mb-2 font-weight-medium">Default Text</v-label>
+            <v-text-field variant="outlined" color="primary" model-value="George deo"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Email</v-label>
+            <v-text-field variant="outlined" color="primary"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Password</v-label>
+            <v-text-field variant="outlined" type="password" color="primary"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Read Only</v-label>
+            <v-text-field variant="outlined" color="primary" model-value="Hello World" readonly hide-details></v-text-field>
+            <v-row class="my-3">
+                <v-col cols="12" sm="8">
+                    <v-row>
+                        <v-col cols="12" lg="6" md="12">
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox1"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox2"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox3"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                        </v-col>
+                        <v-col cols="12" lg="6" md="12">
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox4"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox5"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                            <v-checkbox
+                                density="compact"
+                                v-model="defaultcheckbox6"
+                                hide-details
+                                color="primary"
+                                label="Check this custom checkbox"
+                            ></v-checkbox>
+                        </v-col>
+                    </v-row>
+                </v-col>
+            </v-row>
+            <v-label class="mb-2 font-weight-medium">Select</v-label>
+            <v-select
+                v-model="select"
+                :items="items"
+                item-title="state"
+                item-value="abbr"
+                label="Select"
+                return-object
+                single-line
+                variant="outlined"
+            ></v-select>
+            <v-btn color="primary" flat>Submit</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-layouts/DisabledForm.vue b/src/components/forms/form-layouts/DisabledForm.vue
new file mode 100644
index 0000000..fbdb606
--- /dev/null
+++ b/src/components/forms/form-layouts/DisabledForm.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-row>
+        <v-col cols="12" lg="12">
+            <v-label class="mb-2 font-weight-medium">Name</v-label>
+            <v-text-field variant="outlined" color="primary" disabled></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Email</v-label>
+            <v-text-field
+                hint="We'll never share your email with anyone else."
+                persistent-hint
+                variant="outlined"
+                placeholder="Enter email"
+                disabled
+                color="primary"
+            ></v-text-field>
+            <v-label class="mb-2 font-weight-medium mt-5">Password</v-label>
+            <v-text-field
+                persistent-hint
+                variant="outlined"
+                hide-details
+                type="password"
+                placeholder="Enter password"
+                color="primary"
+                disabled
+            ></v-text-field>
+            <v-btn color="primary" disabled class="mt-6" flat>Submit</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-layouts/FormLeftIcon.vue b/src/components/forms/form-layouts/FormLeftIcon.vue
new file mode 100644
index 0000000..397d600
--- /dev/null
+++ b/src/components/forms/form-layouts/FormLeftIcon.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { LockIcon, UserIcon, MailIcon } from 'vue-tabler-icons';
+const checkbox1 = ref(false);
+</script>
+<template>
+    <v-label class="mb-2 font-weight-medium">Username</v-label>
+    <v-text-field variant="outlined" type="text" placeholder="Username" color="primary">
+        <template v-slot:prepend-inner>
+            <UserIcon stroke-width="1.5" size="22" class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Email</v-label>
+    <v-text-field variant="outlined" type="email" placeholder="Email" color="primary">
+        <template v-slot:prepend-inner>
+            <MailIcon stroke-width="1.5" size="22" class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Password</v-label>
+    <v-text-field variant="outlined" type="password" placeholder="Password" color="primary">
+        <template v-slot:prepend-inner>
+            <LockIcon stroke-width="1.5" size="22" class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Confirm Password</v-label>
+    <v-text-field variant="outlined" type="password" color="primary" hide-details placeholder="Confirm Password">
+        <template v-slot:prepend-inner>
+            <LockIcon stroke-width="1.5" size="22" class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <div class="my-3">
+        <v-checkbox density="compact" v-model="checkbox1" hide-details color="primary" label="Check Me Out!"></v-checkbox>
+    </div>
+    <v-btn color="primary" class="mr-3" flat>Submit</v-btn>
+    <v-btn color="error" class="mr-3" flat>Cancel</v-btn>
+</template>
diff --git a/src/components/forms/form-layouts/FormRightIcon.vue b/src/components/forms/form-layouts/FormRightIcon.vue
new file mode 100644
index 0000000..4ecd864
--- /dev/null
+++ b/src/components/forms/form-layouts/FormRightIcon.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { LockIcon,UserIcon,MailIcon } from 'vue-tabler-icons';
+const checkbox1 = ref(false);
+</script>
+<template>
+    <v-label class="mb-2 font-weight-medium">Username</v-label>
+    <v-text-field
+        variant="outlined"
+        type="text"
+        placeholder="Username"
+        color="primary"
+    >  
+        <template v-slot:append-inner>
+            <UserIcon stroke-width="1.5" size="22"  class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Email</v-label>
+    <v-text-field
+        variant="outlined"
+        type="email"
+        placeholder="Email"
+        color="primary"
+    >  
+        <template v-slot:append-inner>
+            <MailIcon stroke-width="1.5" size="22"  class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Password</v-label>
+    <v-text-field
+        variant="outlined"
+        type="password"
+        placeholder="Password"
+        color="primary"
+    >  
+        <template v-slot:append-inner>
+            <LockIcon stroke-width="1.5" size="22" class="text-medium-emphasis" />
+        </template>
+    </v-text-field>
+    <v-label class="mb-2 font-weight-medium">Confirm Password</v-label>
+    <v-text-field
+        variant="outlined"
+        type="password"
+        color="primary"
+        hide-details
+        placeholder="Confirm Password"
+    >
+        <template v-slot:append-inner>
+            <LockIcon stroke-width="1.5" size="22"  class="text-medium-emphasis"  />
+        </template>
+    </v-text-field>
+     <div class="my-3">
+        <v-checkbox density="compact" v-model="checkbox1" hide-details color="primary" label="Check Me Out!"></v-checkbox>
+    </div>
+    <v-btn color="primary" class="mr-3">Submit</v-btn>
+    <v-btn color="error" class="mr-3">Cancel</v-btn>
+</template>
diff --git a/src/components/forms/form-layouts/InputVarients.vue b/src/components/forms/form-layouts/InputVarients.vue
new file mode 100644
index 0000000..81a7c12
--- /dev/null
+++ b/src/components/forms/form-layouts/InputVarients.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="12">
+            <v-label class="mb-2 font-weight-medium">Success Input</v-label>
+            <v-text-field variant="outlined" placeholder="Success value" color="success"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Error Input</v-label>
+            <v-text-field variant="outlined" color="error"></v-text-field>
+            <v-label class="mb-2 font-weight-medium">Input with Error text</v-label>
+            <v-text-field variant="outlined" color="error" hint="Incorrect entry." persistent-hint></v-text-field>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-layouts/OrdinaryForm.vue b/src/components/forms/form-layouts/OrdinaryForm.vue
new file mode 100644
index 0000000..ae8a0cd
--- /dev/null
+++ b/src/components/forms/form-layouts/OrdinaryForm.vue
@@ -0,0 +1,32 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const checkbox1 = ref(true);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="12">
+            <v-label class="mb-2 font-weight-medium">Email</v-label>
+            <v-text-field
+                hint="We'll never share your email with anyone else."
+                persistent-hint
+                variant="outlined"
+                placeholder="Enter email"
+                color="primary"
+            ></v-text-field>
+            <v-label class="mb-2 font-weight-medium mt-5">Password</v-label>
+            <v-text-field
+                persistent-hint
+                variant="outlined"
+                hide-details
+                type="password"
+                placeholder="Enter password"
+                color="primary"
+            ></v-text-field>
+            <div class="my-3">
+                <v-checkbox density="compact" v-model="checkbox1" hide-details color="primary" label="Check Me Out!"></v-checkbox>
+            </div>
+            <v-btn color="primary" flat>Submit</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-validation/CheckBox.vue b/src/components/forms/form-validation/CheckBox.vue
new file mode 100644
index 0000000..5b66b9d
--- /dev/null
+++ b/src/components/forms/form-validation/CheckBox.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+//Checkbox radio button
+const drinks = ref([
+    { id: 1, name: 'None' },
+    { id: 2, name: 'Tea' },
+    { id: 3, name: 'Coffee' }
+]);
+
+const selectedValues = ref([]);
+const myform = ref();
+const validateCheckbox = computed(() => {
+    return [selectedValues.value.length > 0 || 'Choose at-list one Drink'];
+});
+function submit() {
+    myform.value.validate();
+}
+function isLast(index: any) {
+    return drinks.value.length - 1 === index;
+}
+</script>
+<template>
+    <v-form ref="myform">
+        <div class="">
+            <div v-for="(drink, index) in drinks" :key="drink.id">
+                <v-checkbox v-model="selectedValues" :value="drink.id" :label="drink.name" color="primary"
+                    :hide-details="!isLast(index)" :rules="validateCheckbox" />
+            </div>
+        </div>
+        <div class="d-flex justify-sm-end"> 
+            <v-btn @click="submit" flat color="primary" class="mt-4"> Submit </v-btn>
+        </div>    
+    </v-form>
+    <!-- <p class="mt-3">Selected: {{ selectedValues }}</p> -->
+</template>
diff --git a/src/components/forms/form-validation/MailValidation.vue b/src/components/forms/form-validation/MailValidation.vue
new file mode 100644
index 0000000..d73bf96
--- /dev/null
+++ b/src/components/forms/form-validation/MailValidation.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { Form } from "vee-validate";
+import * as Yup from "yup";
+import TextInput from "./TextInput.vue";
+
+
+function onSubmit(values) {
+  alert(JSON.stringify(values, null, 2));
+}
+
+function onInvalidSubmit() {
+  const submitBtn = document.querySelector(".submit-btn");
+  submitBtn.classList.add("invalid");
+  setTimeout(() => {
+    submitBtn.classList.remove("invalid");
+  }, 1000);
+}
+
+// Using yup to generate a validation schema
+// https://vee-validate.logaretm.com/v4/guide/validation#validation-schemas-with-yup
+const schema = Yup.object().shape({
+  name: Yup.string().required(),
+  email: Yup.string().email().required(),
+  password: Yup.string().min(6).required(),
+  confirm_password: Yup.string()
+    .required()
+    .oneOf([Yup.ref("password")], "Passwords do not match"),
+});
+
+</script>
+
+<template>
+  <div>
+    <Form
+      @submit="onSubmit"
+      :validation-schema="schema"
+      @invalid-submit="onInvalidSubmit"
+    >
+    <v-row>
+      <v-col cols="12">
+      <v-label class="mb-2 font-weight-medium">Email</v-label>
+      <TextInput
+        name="email"
+        type="email"
+        success-message="Got it, we won't spam you!"
+      />
+    </v-col>
+    <v-col cols="12">
+      <v-label class="mb-2 font-weight-medium">Password</v-label>
+      <TextInput
+        name="password"
+        type="password"
+        success-message="Nice and secure!" 
+      />
+    </v-col>
+    <v-col cols="12">
+      <div class=" d-sm-flex align-center mb-4">
+        <v-checkbox density="compact"  hide-details color="primary" label="Remember this Device"></v-checkbox>
+        <div class="ml-auto"><a href="javascript:void(0)" class="text-primary text-decoration-none">Forgot password?</a></div>
+        </div>
+      <v-btn type="submit" class="submit-btn mt-2" flat color="primary">Submit</v-btn>
+    </v-col>
+    </v-row>
+    </Form>
+  </div>
+</template>
diff --git a/src/components/forms/form-validation/OnType.vue b/src/components/forms/form-validation/OnType.vue
new file mode 100644
index 0000000..49e47ac
--- /dev/null
+++ b/src/components/forms/form-validation/OnType.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Form } from 'vee-validate';
+const email = ref('');
+const rules = ref({
+    required: (value: any) => !!value || 'Required.',
+    counter: (value: any) => value.length <= 20 || 'Max 20 characters',
+    email: (value: any) => {
+        const pattern =
+            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+    },
+    firstname: (value: any) => value.length > 2 || 'More than two letters required',
+    lastname: (value: any) => value.length > 2 || 'More than two letters required'
+});
+
+const password = ref('');
+
+const pwdrules = ref({
+    required: (value: any) => !!value || 'Required.',
+    min: (v: any) => v.length >= 8 || 'Min 8 characters',
+    emailMatch: () => `The email and password you entered don't match`
+});
+
+</script>
+<template>
+    <Form>
+        <v-row>
+            <v-col cols="12">
+                <v-label class="mb-2 font-weight-medium">Email</v-label>
+                <v-text-field v-model="email" :rules="[rules.required, rules.email]" variant="outlined" hide-details="auto"
+                   ></v-text-field>
+            </v-col>
+            <v-col cols="12">
+                <v-label class="mb-2 font-weight-medium">Password</v-label>
+                <v-text-field color="primary" v-model="password" :rules="[pwdrules.required, pwdrules.min]" hide-details="auto"
+                    variant="outlined" hint="At least 8 characters" type="password" />
+            </v-col>
+            <v-col cols="12">
+                <div class="d-flex justify-sm-end"><v-btn type="submit" class="submit-btn mt-2" flat
+                        color="primary">Submit</v-btn></div>
+            </v-col>
+        </v-row>
+    </Form>
+</template>
diff --git a/src/components/forms/form-validation/Radio.vue b/src/components/forms/form-validation/Radio.vue
new file mode 100644
index 0000000..8f85b18
--- /dev/null
+++ b/src/components/forms/form-validation/Radio.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref,computed } from 'vue';
+//Checkbox radio button
+const drinks = ref([
+    { id: 1, name: 'None' },
+    { id: 2, name: 'Tea' },
+    { id: 3, name: 'Coffee' }
+]);
+
+const selectedRadioValues = ref([]);
+const myRadioform = ref(null);
+const validateRadio = computed(() => {
+    return [selectedRadioValues.value.length > 0 || 'Choose at-list one Drink'];
+});
+
+
+</script>
+<template>
+    <v-form ref="myRadioform">
+        <div class="d-flex gap-3">
+            <v-radio-group v-for="drink in drinks" :key="drink.id" v-model="selectedRadioValues" :rules="validateRadio" hide-details>
+                <v-radio :value="drink.id" :label="drink.name" color="primary" />
+            </v-radio-group>
+        </div>
+        <p class="text-error mb-4 text-subtitle-2" v-if="selectedRadioValues.length < 1">You have to choose one Drink</p>
+        <div class="d-flex justify-sm-end"> 
+            <v-btn @click="myRadioform" flat class="mt-3" color="primary">Submit</v-btn>
+        </div>    
+    </v-form>
+</template>
diff --git a/src/components/forms/form-validation/Select.vue b/src/components/forms/form-validation/Select.vue
new file mode 100644
index 0000000..e5d1936
--- /dev/null
+++ b/src/components/forms/form-validation/Select.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ref } from "vue";
+const defaultForm = Object.freeze({
+  age: "",
+});
+const form = ref(Object.assign({}, defaultForm));
+const rules = ref({
+  age: [(val: any) => (val || "").length > 0 || "This field is required"],
+});
+const age = ref(["Ten", "Twenty", "Thirty"]);
+// const conditions = ref(false);
+// const formIsValid = computed(() => {
+//   return (
+//     form.value.age
+//   );
+// });
+function submitForm() {
+  form.value = Object.assign({}, defaultForm);
+}
+</script>
+<template>
+      <v-form ref="form">
+            <v-label class="mb-2 font-weight-medium">Age</v-label>
+              <v-select
+                v-model="form.age"
+                :items="age"
+                :rules="rules.age"
+                color="primary"
+                variant="outlined"
+                required
+              ></v-select>
+          <v-btn color="primary" class="mt-3" flat  @click="submitForm">submit</v-btn>
+      </v-form>
+</template>
+
diff --git a/src/components/forms/form-validation/TextInput.vue b/src/components/forms/form-validation/TextInput.vue
new file mode 100644
index 0000000..2064a8a
--- /dev/null
+++ b/src/components/forms/form-validation/TextInput.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { toRef } from "vue";
+import { useField } from "vee-validate";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "text",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  successMessage: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+// use `toRef` to create reactive references to `name` prop which is passed to `useField`
+// this is important because vee-validte needs to know if the field name changes
+// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
+const name = toRef(props, "name");
+
+// we don't provide any rules here because we are using form-level validation
+// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  handleChange,
+  meta,
+} = useField(name, undefined, {
+  initialValue: props.value,
+});
+</script>
+<template>
+  <div
+    class="TextInput"
+    :class="{ 'has-error': !!errorMessage, success: meta.valid }"
+  >
+    <v-text-field
+      :name="name"
+      :type="type"
+      :v-model="inputValue"
+      variant="outlined"
+      :valid="meta.valid"
+      :label="label"
+      :color="meta.valid ? 'success' : ''"
+      :error-messages="errorMessage"
+      :placeholder="placeholder"
+      @input="handleChange"
+      @blur="handleBlur"
+      hide-details="auto"
+    />
+  </div>
+</template>
diff --git a/src/components/forms/form-validation/VeeValidation.vue b/src/components/forms/form-validation/VeeValidation.vue
new file mode 100644
index 0000000..cfdced8
--- /dev/null
+++ b/src/components/forms/form-validation/VeeValidation.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { Form } from "vee-validate";
+import * as Yup from "yup";
+import TextInput from "./TextInput.vue";
+
+
+function onInvalidSubmit() {
+  const submitBtn = document.querySelector(".submit-btn");
+  submitBtn.classList.add("invalid");
+  setTimeout(() => {
+    submitBtn.classList.remove("invalid");
+  }, 1000);
+}
+
+// Using yup to generate a validation schema
+// https://vee-validate.logaretm.com/v4/guide/validation#validation-schemas-with-yup
+const schema = Yup.object().shape({
+  name: Yup.string().required(),
+  email: Yup.string().email().required(),
+  password: Yup.string().min(6).required(),
+  confirm_password: Yup.string()
+    .required()
+    .oneOf([Yup.ref("password")], "Passwords do not match"),
+});
+
+</script>
+
+<template>
+  <div>
+    <Form :validation-schema="schema" @invalid-submit="onInvalidSubmit">
+      <v-row>
+        <v-col cols="12">
+          <v-label class="mb-2 font-weight-medium">Name</v-label>
+          <TextInput name="name" type="text" success="Nice to meet you!" />
+        </v-col>
+        <v-col cols="12">
+          <v-label class="mb-2 font-weight-medium">Email</v-label>
+          <TextInput name="email" type="email" success-message="Got it, we won't spam you!" />
+        </v-col>
+        <v-col cols="12">
+          <v-label class="mb-2 font-weight-medium">Password</v-label>
+          <TextInput name="password" type="password" success-message="Nice and secure!" />
+        </v-col>
+        <v-col cols="12">
+          <v-label class="mb-2 font-weight-medium">Confirm Password</v-label>
+          <TextInput name="confirm_password" type="password"  success-message="Glad you remembered it!" />
+        </v-col>
+        <v-col cols="12">
+          <div class=" d-sm-flex align-center mb-4">
+            <v-checkbox density="compact" hide-details color="primary" label="Remember this Device"></v-checkbox>
+            <div class="ml-auto"><a href="javascript:void(0)" class="text-primary text-decoration-none">Forgot
+                password?</a></div>
+          </div>
+          <v-btn type="submit" class="submit-btn mt-2" flat color="primary">Submit</v-btn>
+        </v-col>
+      </v-row>
+    </Form>
+  </div>
+</template>
diff --git a/src/components/forms/form-vertical/AccountDetailsTab.vue b/src/components/forms/form-vertical/AccountDetailsTab.vue
new file mode 100644
index 0000000..dc90e3f
--- /dev/null
+++ b/src/components/forms/form-vertical/AccountDetailsTab.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/* Password hide/show */
+const show2 = ref(true);
+const show3 = ref(true);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">User Name</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="John" hide-details />
+            </div>
+            <div >
+                <v-label class="font-weight-medium mb-2">Password</v-label>
+                <v-text-field
+                    color="primary"
+                    variant="outlined"
+                    :type="show2 ? 'text' : 'password'"
+                    placeholder="john.deo"
+                    hide-details
+                    class="text-subtitle-1"
+                    :append-inner-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
+                    @click:append-inner="show2 = !show2"
+                >
+                </v-text-field>
+            </div>
+        </v-col>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Email</v-label>
+                <v-text-field color="primary" variant="outlined" type="email" placeholder="john.deo" suffix="@example.com" hide-details />
+            </div>
+            <div>
+                <v-label class="font-weight-medium mb-2">Confirm</v-label>
+                <v-text-field
+                    color="primary"
+                    variant="outlined"
+                    :type="show3 ? 'text' : 'password'"
+                    placeholder="john.deo"
+                    hide-details
+                    class="text-subtitle-1"
+                    :append-inner-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
+                    @click:append-inner="show3 = !show3"
+                >
+                </v-text-field>
+            </div>
+        </v-col>
+        <v-col cols="12">
+            <v-btn color="primary" flat>Submit</v-btn>
+            <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-vertical/BasicLayout.vue b/src/components/forms/form-vertical/BasicLayout.vue
new file mode 100644
index 0000000..72eef25
--- /dev/null
+++ b/src/components/forms/form-vertical/BasicLayout.vue
@@ -0,0 +1,35 @@
+<template>
+    <v-row >
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Name</v-label>
+            <VTextField  type="text" placeholder="John Deo" variant="outlined" hide-details ></VTextField>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Company</v-label>
+            <VTextField  type="text" placeholder="ACME Inc." hide-details ></VTextField>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Email</v-label>
+            <VTextField  type="email" placeholder="john.deo" suffix="@example.com" hide-details ></VTextField>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Phone No</v-label>
+            <VTextField  type="text" placeholder="412 2150 451" hide-details ></VTextField>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Message</v-label>
+             <VTextarea
+                auto-grow
+                placeholder="Hi, Do you  have a moment to talk Jeo ?"
+                rows="2"
+                color="primary"
+                row-height="25"
+                shaped
+                hide-details
+            ></VTextarea>
+        </v-col>
+        <v-col cols="12" class="">
+            <v-btn color="primary" flat>Send</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-vertical/BasicWithIcons.vue b/src/components/forms/form-vertical/BasicWithIcons.vue
new file mode 100644
index 0000000..95bb895
--- /dev/null
+++ b/src/components/forms/form-vertical/BasicWithIcons.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { UserIcon, BuildingArchIcon, MailIcon, PhoneIcon, Message2Icon } from 'vue-tabler-icons';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Name</v-label>
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details>
+                <template v-slot:prepend-inner>
+                    <UserIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Company</v-label>
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="ACME Inc." hide-details>
+                <template v-slot:prepend-inner>
+                    <BuildingArchIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Email</v-label>
+            <v-text-field color="primary" variant="outlined" type="email" placeholder="john.deo" hide-details>
+                <template v-slot:prepend-inner>
+                    <MailIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Phone No</v-label>
+            <v-text-field color="primary" variant="outlined" type="text" placeholder="412 2150 451" hide-details>
+                <template v-slot:prepend-inner>
+                    <PhoneIcon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-medium mb-2">Message</v-label>
+            <v-textarea
+                auto-grow
+                variant="outlined"
+                placeholder="Hi, Do you  have a moment to talk Jeo ?"
+                rows="2"
+                color="primary"
+                row-height="25"
+                shaped
+                hide-details
+            >
+                <template v-slot:prepend-inner>
+                    <Message2Icon stroke-width="1.5" size="22" class="text-medium-emphasis mr-3" />
+                </template>
+            </v-textarea>
+        </v-col>
+        <v-col cols="12">
+            <v-btn color="primary" flat>Send</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-vertical/Collapsible.vue b/src/components/forms/form-vertical/Collapsible.vue
new file mode 100644
index 0000000..0f2914b
--- /dev/null
+++ b/src/components/forms/form-vertical/Collapsible.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { HelpIcon } from 'vue-tabler-icons';
+
+/*Location Select*/
+const select = ref('');
+const location = ref(['Alaska', 'Arizona', 'Hawaii']);
+
+const radioColumn = ref('1');
+const radioInline = ref('1');
+const paymentradio = ref('1');
+
+const openpanel = ref([0]);
+</script>
+<template>
+    <h5 class="text-h5 mb-6 mt-3">Collapsible Section</h5>
+    <v-expansion-panels v-model="openpanel">
+        <!---Delivery Address--->
+        <v-expansion-panel elevation="10"  >
+            <v-expansion-panel-title class="text-h6">Delivery Address</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-row>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">Full Name</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">Phone No</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="1340 2154 123" hide-details>
+                        </v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-label class="font-weight-medium mb-2">Address</v-label>
+                        <v-textarea
+                            auto-grow
+                            variant="outlined"
+                            placeholder="150, Ring Road"
+                            rows="2"
+                            color="primary"
+                            row-height="25"
+                            shaped
+                            hide-details
+                        ></v-textarea>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">Pincode</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="120125" hide-details> </v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">Landmark</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="Nr.Wall Street" hide-details />
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">City</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="Vadodara" hide-details> </v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">State</v-label>
+                        <v-select
+                            v-model="select"
+                            :items="location"
+                            item-title="state"
+                            item-value="abbr"
+                            label="Select"
+                            return-object
+                            single-line
+                            variant="outlined"
+                            hide-details
+                        ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <v-label class="font-weight-medium mb-2">Address Type</v-label>
+                        <v-radio-group v-model="radioColumn" inline class="ml-n3" hide-details>
+                            <v-radio label="Home (All day delivery)" color="primary" value="1"></v-radio>
+                            <v-radio label="Office (Delivery between 10 AM - 5 PM)" color="primary" value="2"></v-radio>
+                        </v-radio-group>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+        <!---Delivery Options--->
+        <v-expansion-panel elevation="10" class=" mt-3">
+            <v-expansion-panel-title class="text-h6">Delivery Options</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-radio-group v-model="radioInline" inline hide-details class="ml-n3">
+                    <v-radio label="Standard 3-5 Days" color="primary" value="1"></v-radio>
+                    <v-radio label="Express" color="primary" value="2"></v-radio>
+                    <v-radio label="Overnight" color="primary" value="3"></v-radio>
+                </v-radio-group>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+        <!---Payment Method--->
+        <v-expansion-panel elevation="10" class=" mt-3">
+            <v-expansion-panel-title class="text-h6">Payment Method</v-expansion-panel-title>
+            <v-expansion-panel-text class="mt-4">
+                <v-radio-group v-model="paymentradio" inline hide-details class="ml-n3">
+                    <v-radio label="Credit/Debit/ATM Card" color="primary" value="1"></v-radio>
+                    <v-radio label="Cash on Delivery" color="primary" value="2"></v-radio>
+                </v-radio-group>
+                <v-row class="mt-4">
+                    <v-col cols="12" md="8">
+                        <v-label class="mb-2 font-weight-medium">Card Number</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="1250 4521 5630 1540" />
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-label class="mb-2 font-weight-medium">Name</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                            </v-col>
+                            <v-col cols="12" md="3" sm="6">
+                                <v-label class="mb-2 font-weight-medium">Exp. Date</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="MM/YY" hide-details />
+                            </v-col>
+                            <v-col cols="12" md="3" sm="6">
+                                <v-label class="mb-2 font-weight-medium">CVV Code</v-label>
+                                <v-text-field color="primary" variant="outlined" type="text" placeholder="456" hide-details>
+                                    <template v-slot:append-inner>
+                                        <HelpIcon stroke-width="1.5" size="22" class="text-medium-emphasis ml-3" />
+                                    </template>
+                                </v-text-field>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-btn color="primary" flat>Submit</v-btn>
+                        <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/forms/form-vertical/FormSeprator.vue b/src/components/forms/form-vertical/FormSeprator.vue
new file mode 100644
index 0000000..9a568f3
--- /dev/null
+++ b/src/components/forms/form-vertical/FormSeprator.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const show2 = ref(true);
+const show3 = ref(true);
+
+/*Location Select*/
+const select = ref('');
+const location = ref(['India', 'United Kingdom', 'Srilanka']);
+const selectlng = ref('');
+const lang = ref(['English', 'French']);
+</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">Multi Column with Form Separator</v-card-title>
+            </div>
+        </v-card-item>
+        <v-divider></v-divider>
+        <!----Account Details---->
+        <v-card-text class="pb-0">
+            <h6 class="text-h6">Account Details</h6>
+            <v-row class="mt-5 mb-3">
+                <v-col cols="12" md="6">
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">Username</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </div>
+                    <div class="">
+                        <v-label class="font-weight-medium mb-2">Password</v-label>
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            :type="show2 ? 'text' : 'password'"
+                            placeholder="john.deo"
+                            hide-details
+                            :append-inner-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
+                            @click:append-inner="show2 = !show2"
+                        >
+                        </v-text-field>
+                    </div>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">Email</v-label>
+                        <v-text-field
+                            color="primary"
+                            variant="outlined"
+                            type="email"
+                            placeholder="john.deo"
+                            suffix="@example.com"
+                            hide-details
+                        />
+                    </div>
+                    <v-label class="font-weight-medium mb-2">Confirm Password</v-label>
+                    <v-text-field
+                        color="primary"
+                        variant="outlined"
+                        :type="show3 ? 'text' : 'password'"
+                        placeholder="john.deo"
+                        hide-details
+                        :append-inner-icon="show3 ? 'mdi-eye' : 'mdi-eye-off'"
+                        @click:append-inner="show3 = !show3"
+                    >
+                    </v-text-field>
+                </v-col>
+            </v-row>
+        </v-card-text>
+        <v-divider></v-divider>
+        <!----Personal Info---->
+        <v-card-text class="pb-1">
+            <h6 class="text-h6">Personal Info</h6>
+            <v-row class="mt-5 mb-3">
+                <v-col cols="12" md="6">
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">First Name</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="John Deo" hide-details />
+                    </div>
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">Country</v-label>
+                        <v-select
+                            v-model="select"
+                            :items="location"
+                            item-title="state"
+                            item-value="abbr"
+                            label="Select"
+                            return-object
+                            single-line
+                            variant="outlined"
+                            hide-details
+                        ></v-select>
+                    </div>
+                    <div>
+                        <v-label class="font-weight-medium mb-2">Birth Date</v-label>
+                        <v-text-field color="primary" variant="outlined" type="date" hide-details></v-text-field>
+                    </div>
+                </v-col>
+                <v-col cols="12" md="6">
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">Last Name</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="Deo" hide-details />
+                    </div>
+                    <div class="mb-6">
+                        <v-label class="font-weight-medium mb-2">Language</v-label>
+                        <v-select v-model="selectlng" :items="lang" single-line variant="outlined" hide-details></v-select>
+                    </div>
+                    <div>
+                        <v-label class="font-weight-medium mb-2">Phone No</v-label>
+                        <v-text-field color="primary" variant="outlined" type="text" placeholder="412 2150 451" hide-details />
+                    </div>
+                </v-col>
+                <v-col cols="12">
+                    <v-btn color="primary" flat>Submit</v-btn>
+                    <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/src/components/forms/form-vertical/PersonalInfoTab.vue b/src/components/forms/form-vertical/PersonalInfoTab.vue
new file mode 100644
index 0000000..3f205f3
--- /dev/null
+++ b/src/components/forms/form-vertical/PersonalInfoTab.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*Location Select*/
+const select = ref('');
+const location = ref(['India', 'United Kingdom', 'Srilanka']);
+
+/*Language Select*/
+const selectlng = ref('');
+const language = ref(['English', 'French']);
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">First Name</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="John" hide-details />
+            </div>
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Country</v-label>
+                <v-select v-model="select" :items="location" single-line variant="outlined" hide-details></v-select>
+            </div>
+            <div>
+                <v-label class="font-weight-medium mb-2">Birth Date</v-label>
+                <v-text-field color="primary" variant="outlined" type="date" hide-details></v-text-field>
+            </div>
+        </v-col>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Last Name</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="Doe" hide-details />
+            </div>
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Language</v-label>
+                <v-select v-model="selectlng" :items="language" single-line variant="outlined" hide-details></v-select>
+            </div>
+            <div>
+                <v-label class="font-weight-medium mb-2">Phone no</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="123 4567 201" hide-details></v-text-field>
+            </div>
+        </v-col>
+        <v-col cols="12">
+            <v-btn color="primary" flat>Submit</v-btn>
+            <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/form-vertical/SocialLinksTab.vue b/src/components/forms/form-vertical/SocialLinksTab.vue
new file mode 100644
index 0000000..31284b1
--- /dev/null
+++ b/src/components/forms/form-vertical/SocialLinksTab.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-row>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Twitter</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://twitter.com/abc" hide-details />
+            </div>
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Google</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://plus.google.com/abc" hide-details />
+            </div>
+            <div>
+                <v-label class="font-weight-medium mb-2">Instagram</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://instagram.com/abc" hide-details />
+            </div>
+        </v-col>
+        <v-col cols="12" md="6">
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Facebook</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://facebook.com/abc" hide-details />
+            </div>
+            <div class="mb-6">
+                <v-label class="font-weight-medium mb-2">Linkedin</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://Linkedin.com/abc" hide-details />
+            </div>
+            <div>
+                <v-label class="font-weight-medium mb-2">Quora</v-label>
+                <v-text-field color="primary" variant="outlined" type="text" placeholder="https://Quora.com/abc" hide-details />
+            </div>
+        </v-col>
+        <v-col cols="12">
+            <v-btn color="primary" flat>Submit</v-btn>
+            <v-btn class="bg-lighterror text-error ml-4" flat>Cancel</v-btn>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/components/forms/plugins/editor/EditorMenu.vue b/src/components/forms/plugins/editor/EditorMenu.vue
new file mode 100644
index 0000000..d4870cb
--- /dev/null
+++ b/src/components/forms/plugins/editor/EditorMenu.vue
@@ -0,0 +1,43 @@
+<script setup>
+import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg';
+
+const props = defineProps({
+    icon: String,
+    title: String,
+    action: Function,
+    isActive: Function
+});
+</script>
+<template>
+    <div>
+        <div class="menu-item" :class="{ 'is-active': isActive ? isActive() : null }" @click="action" :title="title">
+            <svg class="remix">
+                <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
+            </svg>
+        </div>
+    </div>
+</template>
+<style lang="scss">
+.menu-item {
+    width: 1.75rem;
+    height: 1.75rem;
+    color: inherit;
+    border: none;
+    background-color: transparent;
+    border-radius: 0.4rem;
+    padding: 0.25rem;
+    margin-right: 0.25rem;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+    }
+
+    &.is-active,
+    &:hover {
+        color: #fff;
+        background-color: rgb(var(--v-theme-primary));
+    }
+}
+</style>
diff --git a/src/components/forms/plugins/editor/EditorMenubar.vue b/src/components/forms/plugins/editor/EditorMenubar.vue
new file mode 100644
index 0000000..914aa52
--- /dev/null
+++ b/src/components/forms/plugins/editor/EditorMenubar.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { ref } from 'vue';
+import EditorMenu from './EditorMenu.vue';
+const props = defineProps({ editor: Object });
+const items = ref([
+    {
+        icon: 'bold',
+        title: 'Bold',
+        action: () => props.editor.chain().focus().toggleBold().run(),
+        isActive: () => props.editor.isActive('bold')
+    },
+    {
+        icon: 'italic',
+        title: 'Italic',
+        action: () => props.editor.chain().focus().toggleItalic().run(),
+        isActive: () => props.editor.isActive('italic')
+    },
+    {
+        icon: 'strikethrough',
+        title: 'Strike',
+        action: () => props.editor.chain().focus().toggleStrike().run(),
+        isActive: () => props.editor.isActive('strike')
+    },
+    {
+        icon: 'code-view',
+        title: 'Code',
+        action: () => props.editor.chain().focus().toggleCode().run(),
+        isActive: () => props.editor.isActive('code')
+    },
+    {
+        icon: 'mark-pen-line',
+        title: 'Highlight',
+        action: () => props.editor.chain().focus().toggleHighlight().run(),
+        isActive: () => props.editor.isActive('highlight')
+    },
+    {
+        type: 'divider'
+    },
+    {
+        icon: 'h-1',
+        title: 'Heading 1',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 1 })
+    },
+    {
+        icon: 'h-2',
+        title: 'Heading 2',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 2 })
+    },
+    {
+        icon: 'paragraph',
+        title: 'Paragraph',
+        action: () => props.editor.chain().focus().setParagraph().run(),
+        isActive: () => props.editor.isActive('paragraph')
+    },
+    {
+        icon: 'list-unordered',
+        title: 'Bullet List',
+        action: () => props.editor.chain().focus().toggleBulletList().run(),
+        isActive: () => props.editor.isActive('bulletList')
+    },
+    {
+        icon: 'list-ordered',
+        title: 'Ordered List',
+        action: () => props.editor.chain().focus().toggleOrderedList().run(),
+        isActive: () => props.editor.isActive('orderedList')
+    },
+    {
+        icon: 'list-check-2',
+        title: 'Task List',
+        action: () => props.editor.chain().focus().toggleTaskList().run(),
+        isActive: () => props.editor.isActive('taskList')
+    },
+    {
+        icon: 'code-box-line',
+        title: 'Code Block',
+        action: () => props.editor.chain().focus().toggleCodeBlock().run(),
+        isActive: () => props.editor.isActive('codeBlock')
+    },
+    {
+        type: 'divider'
+    },
+    {
+        icon: 'double-quotes-l',
+        title: 'Blockquote',
+        action: () => props.editor.chain().focus().toggleBlockquote().run(),
+        isActive: () => props.editor.isActive('blockquote')
+    },
+    {
+        icon: 'separator',
+        title: 'Horizontal Rule',
+        action: () => props.editor.chain().focus().setHorizontalRule().run()
+    },
+    {
+        type: 'divider'
+    },
+    {
+        icon: 'text-wrap',
+        title: 'Hard Break',
+        action: () => props.editor.chain().focus().setHardBreak().run()
+    },
+    {
+        icon: 'format-clear',
+        title: 'Clear Format',
+        action: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run()
+    },
+    {
+        type: 'divider'
+    },
+    {
+        icon: 'arrow-go-back-line',
+        title: 'Undo',
+        action: () => props.editor.chain().focus().undo().run()
+    },
+    {
+        icon: 'arrow-go-forward-line',
+        title: 'Redo',
+        action: () => props.editor.chain().focus().redo().run()
+    }
+]);
+</script>
+<template>
+    <perfect-scrollbar class="d-flex align-center cursor-pointer menuBar">
+        <template v-for="(item, index) in items">
+            <div class="divider" v-if="item.type === 'divider'" :key="`divider${index}`" />
+
+            <EditorMenu v-else :key="index" v-bind="item" />
+        </template>
+    </perfect-scrollbar>
+</template>
+<style lang="scss">
+.divider {
+    width: 2px;
+    height: 1.25rem;
+    background-color: rgba(#000, 0.1);
+    margin-left: 0.5rem;
+    margin-right: 0.75rem;
+}
+.menuBar {
+    border: 1px solid rgb(var(--v-theme-inputBorder), 0.3);
+    padding: 8px;
+    overflow: auto;
+    border-radius: 12px 12px 0 0;
+}
+</style>
diff --git a/components/layout/full/Main.vue b/src/components/layout/full/Main.vue
similarity index 100%
rename from components/layout/full/Main.vue
rename to src/components/layout/full/Main.vue
diff --git a/components/layout/full/customizer/Customizer.vue b/src/components/layout/full/customizer/Customizer.vue
similarity index 100%
rename from components/layout/full/customizer/Customizer.vue
rename to src/components/layout/full/customizer/Customizer.vue
diff --git a/components/layout/full/logo/Logo.vue b/src/components/layout/full/logo/Logo.vue
similarity index 100%
rename from components/layout/full/logo/Logo.vue
rename to src/components/layout/full/logo/Logo.vue
diff --git a/components/layout/full/logo/LogoDark.vue b/src/components/layout/full/logo/LogoDark.vue
similarity index 100%
rename from components/layout/full/logo/LogoDark.vue
rename to src/components/layout/full/logo/LogoDark.vue
diff --git a/components/layout/full/logo/LogoLight.vue b/src/components/layout/full/logo/LogoLight.vue
similarity index 100%
rename from components/layout/full/logo/LogoLight.vue
rename to src/components/layout/full/logo/LogoLight.vue
diff --git a/components/layout/full/vertical-header/AppsLink.vue b/src/components/layout/full/vertical-header/AppsLink.vue
similarity index 100%
rename from components/layout/full/vertical-header/AppsLink.vue
rename to src/components/layout/full/vertical-header/AppsLink.vue
diff --git a/components/layout/full/vertical-header/LanguageDD.vue b/src/components/layout/full/vertical-header/LanguageDD.vue
similarity index 100%
rename from components/layout/full/vertical-header/LanguageDD.vue
rename to src/components/layout/full/vertical-header/LanguageDD.vue
diff --git a/components/layout/full/vertical-header/Navigations.vue b/src/components/layout/full/vertical-header/Navigations.vue
similarity index 100%
rename from components/layout/full/vertical-header/Navigations.vue
rename to src/components/layout/full/vertical-header/Navigations.vue
diff --git a/components/layout/full/vertical-header/NotificationDD.vue b/src/components/layout/full/vertical-header/NotificationDD.vue
similarity index 100%
rename from components/layout/full/vertical-header/NotificationDD.vue
rename to src/components/layout/full/vertical-header/NotificationDD.vue
diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/src/components/layout/full/vertical-header/ProfileDD.vue
similarity index 100%
rename from components/layout/full/vertical-header/ProfileDD.vue
rename to src/components/layout/full/vertical-header/ProfileDD.vue
diff --git a/components/layout/full/vertical-header/RightMobileSidebar.vue b/src/components/layout/full/vertical-header/RightMobileSidebar.vue
similarity index 100%
rename from components/layout/full/vertical-header/RightMobileSidebar.vue
rename to src/components/layout/full/vertical-header/RightMobileSidebar.vue
diff --git a/components/layout/full/vertical-header/Searchbar.vue b/src/components/layout/full/vertical-header/Searchbar.vue
similarity index 100%
rename from components/layout/full/vertical-header/Searchbar.vue
rename to src/components/layout/full/vertical-header/Searchbar.vue
diff --git a/components/layout/full/vertical-header/ThemeToggler.vue b/src/components/layout/full/vertical-header/ThemeToggler.vue
similarity index 100%
rename from components/layout/full/vertical-header/ThemeToggler.vue
rename to src/components/layout/full/vertical-header/ThemeToggler.vue
diff --git a/components/layout/full/vertical-header/VerticalHeader.vue b/src/components/layout/full/vertical-header/VerticalHeader.vue
similarity index 100%
rename from components/layout/full/vertical-header/VerticalHeader.vue
rename to src/components/layout/full/vertical-header/VerticalHeader.vue
diff --git a/components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue b/src/components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue
similarity index 100%
rename from components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue
rename to src/components/layout/full/vertical-sidebar/Dropdown/Dropdown.vue
diff --git a/components/layout/full/vertical-sidebar/Icon.vue b/src/components/layout/full/vertical-sidebar/Icon.vue
similarity index 100%
rename from components/layout/full/vertical-sidebar/Icon.vue
rename to src/components/layout/full/vertical-sidebar/Icon.vue
diff --git a/components/layout/full/vertical-sidebar/MinIconItems.ts b/src/components/layout/full/vertical-sidebar/MinIconItems.ts
similarity index 100%
rename from components/layout/full/vertical-sidebar/MinIconItems.ts
rename to src/components/layout/full/vertical-sidebar/MinIconItems.ts
diff --git a/components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue b/src/components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue
similarity index 100%
rename from components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue
rename to src/components/layout/full/vertical-sidebar/NavCollapse/NavCollapse.vue
diff --git a/components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue b/src/components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue
similarity index 100%
rename from components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue
rename to src/components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue
diff --git a/components/layout/full/vertical-sidebar/NavItem/NavItem.vue b/src/components/layout/full/vertical-sidebar/NavItem/NavItem.vue
similarity index 100%
rename from components/layout/full/vertical-sidebar/NavItem/NavItem.vue
rename to src/components/layout/full/vertical-sidebar/NavItem/NavItem.vue
diff --git a/components/layout/full/vertical-sidebar/VerticalSidebar.vue b/src/components/layout/full/vertical-sidebar/VerticalSidebar.vue
similarity index 85%
rename from components/layout/full/vertical-sidebar/VerticalSidebar.vue
rename to src/components/layout/full/vertical-sidebar/VerticalSidebar.vue
index ed0959a..5f71dec 100644
--- a/components/layout/full/vertical-sidebar/VerticalSidebar.vue
+++ b/src/components/layout/full/vertical-sidebar/VerticalSidebar.vue
@@ -63,20 +63,22 @@ function showData(data: any) {
 const customizer = useCustomizerStore();
 const sidebarMenu = shallowRef(sidebarItems);
 
-const miniSidebar = MiniSideIcons.filter(menuIcon=>menuIcon.typeUser?.includes('super_admin'));
-
-const filterSidebarItems=(items:any, userType:string) => {
-  // const result = items.filter((item:any)=>item?.typeUser.includes(userType));
-  const result = items.filter((item:any)=>item.typeUser?.includes(userType))
-    .map((item:any)=>({
-      ...item,
-      children: item.children ? filterSidebarItems(item.children,userType):''
-    }))
-    .filter((item:any)=>item.children.length > 0||item.typeUser.includes(userType));
-  return result;
-}
-const filteredSidebarItems = filterSidebarItems(sidebarItems, 'super_admin');
-// console.log(filteredSidebarItems)
+const miniSidebar =MiniSideIcons
+const filteredSidebarItems=sidebarMenu
+//filtering Sidebar berdasarkan Role User
+// const miniSidebar = MiniSideIcons.filter(menuIcon=>menuIcon.typeUser?.includes('super_admin'));
+//
+// const filterSidebarItems=(items:any, userType:string) => {
+//   // const result = items.filter((item:any)=>item?.typeUser.includes(userType));
+//   const result = items.filter((item:any)=>item.typeUser?.includes(userType))
+//     .map((item:any)=>({
+//       ...item,
+//       children: item.children ? filterSidebarItems(item.children,userType):''
+//     }))
+//     .filter((item:any)=>item.children.length > 0||item.typeUser.includes(userType));
+//   return result;
+// }
+// const filteredSidebarItems = filterSidebarItems(sidebarItems, 'super_admin');
 
 </script>
 
diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/src/components/layout/full/vertical-sidebar/sidebarItem.ts
similarity index 99%
rename from components/layout/full/vertical-sidebar/sidebarItem.ts
rename to src/components/layout/full/vertical-sidebar/sidebarItem.ts
index 1047d91..584c4dd 100644
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/src/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -531,7 +531,7 @@ const sidebarItem: menu[] = [
       {
         title: 'Alert',
         icon: 'info-circle-linear',
-        to: '/ui-components/alert'
+        to: '/ui-components/alerts'
       },
       {
         title: 'Accordion',
diff --git a/src/components/pages/account-settings/AccountTab.vue b/src/components/pages/account-settings/AccountTab.vue
new file mode 100644
index 0000000..c445e86
--- /dev/null
+++ b/src/components/pages/account-settings/AccountTab.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+/*Location Select*/
+const select = ref('United States');
+const location = ref(['United States', 'United Kingdom', 'India', 'Russia']);
+
+/*Currency Select*/
+const Currencyselect = ref('US Dollar ($)');
+const Currency = ref(['US Dollar ($)','United Kingdom (Pound)', 'India (INR)', 'Russia (Ruble)',]);
+
+/*change password*/
+const currenypwd = ref('123456789142');
+const newpwd = ref('123456789142');
+const confirmpwd = ref('123456789142');
+
+/*personal detail*/
+const namemodel = ref('Mathew Anderson');
+const storemodel = ref('Maxima Studio');
+const storemail = ref('info@modernize.com');
+const storephone = ref('+91 12345 65478');
+const storeaddress = ref('814 Howard Street, 120065, India');
+
+</script>
+
+<template>
+    <v-card elevation="10" >
+        <v-row class="ma-sm-n2 ma-n1">
+            <v-col cols="12" sm="6">
+                <v-card  variant="outlined">
+                    <v-card-item>
+                        <h5 class="text-h5">Change Profile</h5>
+                        <div class="text-subtitle-1 textSecondary mt-2">Change your profile picture from here</div>
+                        <div class="text-center mt-6 mb-6">
+                            <v-avatar size="120">
+                                <img src="@/assets/images/profile/user-1.jpg" height="120" alt="image" />
+                            </v-avatar>
+                        </div>
+                        <div class="d-flex justify-center">
+                            <v-btn color="primary" class="mx-2" flat> Upload</v-btn>
+                            <v-btn color="error" class="mx-2" variant="outlined" flat>Reset</v-btn>
+                        </div>
+                        <div class="text-subtitle-1 textSecondary text-center my-sm-8 my-6">Allowed JPG, GIF or PNG. Max size of 800K</div>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+            <v-col cols="12" sm="6">
+                <v-card  variant="outlined">
+                    <v-card-item>
+                        <h5 class="text-h5">Change Password</h5>
+                        <div class="text-subtitle-1 textSecondary mt-2">To change your password please confirm here</div>
+                        <div class="mt-5">
+                            <v-label class="mb-2 font-weight-medium">Current Password</v-label>
+                            <v-text-field
+                                color="primary"
+                                variant="outlined"
+                                type="password"
+                                v-model="currenypwd"
+                            />
+                            <v-label class="mb-2 font-weight-medium">New Password</v-label>
+                            <v-text-field
+                                color="primary"
+                                variant="outlined"
+                                type="password"
+                                v-model="newpwd"
+                            />
+                            <v-label class="mb-2 font-weight-medium">Confirm Password</v-label>
+                            <v-text-field
+                                color="primary"
+                                variant="outlined"
+                                type="password"
+                                v-model="confirmpwd"
+                                hide-details
+                            />
+                        </div>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+            <v-col cols="12">
+                <v-card  variant="outlined">
+                    <v-card-item>
+                        <h5 class="text-h5">Personal Details</h5>
+                        <div class="text-subtitle-1 textSecondary mt-2">To change your personal detail , edit and save from here</div>
+                        <div class="mt-5">
+                            <v-row>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Your Name</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="namemodel"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Store Name</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="storemodel"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">        
+                                        <v-label class="mb-2 font-weight-medium">Location</v-label>
+                                         <v-select
+                                            v-model="select"
+                                            :items="location"
+                                            item-title="state"
+                                            item-value="abbr"
+                                            label="Select"
+                                            return-object
+                                            single-line
+                                            variant="outlined"
+                                            hide-details
+                                        ></v-select>
+                                </v-col>
+                                <v-col cols="12" md="6">        
+                                        <v-label class="mb-2 font-weight-medium">Currency</v-label>
+                                         <v-select
+                                            v-model="Currencyselect"
+                                            :items="Currency"
+                                            item-title="state"
+                                            item-value="abbr"
+                                            label="Select"
+                                            return-object
+                                            single-line
+                                            variant="outlined"
+                                            hide-details
+                                        ></v-select>
+                                </v-col>
+                                <v-col cols="12" md="6">        
+                                        <v-label class="mb-2 font-weight-medium">Email</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="email"
+                                            v-model="storemail"
+                                            hide-details
+                                        ></v-text-field>
+                                </v-col>
+                                <v-col cols="12" md="6">        
+                                        <v-label class="mb-2 font-weight-medium">Phone</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="storephone"
+                                            hide-details
+                                        ></v-text-field>
+                                </v-col>
+                                <v-col cols="12">        
+                                        <v-label class="mb-2 font-weight-medium">Address</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="storeaddress"
+                                            hide-details
+                                        ></v-text-field>
+                                </v-col>
+                            </v-row>
+                        </div>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+        </v-row>
+        <div class="d-flex justify-end mt-5">
+            <v-btn  color="primary" class="mr-4" flat>Save</v-btn>
+            <v-btn  class="bg-lighterror text-error"  flat>Cancel</v-btn>
+        </div>
+    </v-card>
+</template>
diff --git a/src/components/pages/account-settings/BillsTab.vue b/src/components/pages/account-settings/BillsTab.vue
new file mode 100644
index 0000000..3f30ab3
--- /dev/null
+++ b/src/components/pages/account-settings/BillsTab.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*import tabler icons*/
+import { CirclePlusIcon,PackageIcon,CreditCardIcon,PencilMinusIcon} from 'vue-tabler-icons';
+
+/*Billing info*/
+const businessname = ref('Visitor Analytics');
+const businesssector = ref('Arts, Media & Entertainment');
+const billingcountry = ref('Romania');
+
+
+</script>
+<template>
+    <v-row class="justify-center ma-n2">
+        <!----Billing Information----->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <h4 class="text-h4">Billing Information</h4>
+                    <div class="mt-6">
+                        <v-row>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Business Name*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="businessname"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Business Sector*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="businesssector"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Business Address*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Country*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            v-model="billingcountry"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">First Name*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            hide-details
+                                        />
+                                </v-col>
+                                <v-col cols="12" md="6">
+                                     <v-label class="mb-2 font-weight-medium">Last Name*</v-label>
+                                        <v-text-field
+                                            color="primary"
+                                            variant="outlined"
+                                            type="text"
+                                            hide-details
+                                        />
+                                </v-col>
+                        </v-row>        
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+        <!-----Date & Time------->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <h4 class="text-h4">Current Plan :<span class="text-success">Executive</span></h4>
+                    <div class="text-subtitle-1 textSecondary text-10 my-3">
+                        Thanks for being a premium member and supporting our development.
+                    </div>
+                        <div class="d-flex align-center mt-7">
+                            <v-avatar size="48" class="mr-2" rounded="md" color="lightprimary">
+                               <PackageIcon size="22" />
+                            </v-avatar>
+                            <div class="pl-4">
+                                <h5 class="text-subtitle-1 textSecondary mb-1">Current Plan</h5>
+                                <h6 class="text-h6">750.000 Monthly Visits</h6>
+                            </div>
+                            <div class="ml-auto">
+                               <v-btn size="35" icon variant="flat" class="lightprimary d-flex">
+                                    <v-avatar size="35">
+                                        <CirclePlusIcon size="22" />
+                                    </v-avatar>
+                                    <v-tooltip
+                                        activator="parent"
+                                        location="bottom"
+                                    >Add
+                                    </v-tooltip>
+                                </v-btn>
+                            </div>    
+                        </div>
+                        <div class="d-flex mt-5">
+                            <v-btn color="primary" class="mr-4" flat>Change Plan</v-btn>
+                            <v-btn class="text-error" variant="outlined" flat>Reset Plan</v-btn>
+                        </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+        <!-----Payment Method------->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <h4 class="text-h4">Payment Method</h4>
+                    <div class="text-subtitle-1 textSecondary text-10 my-3">
+                        On 26 December, 2023
+                    </div>
+                        <div class="d-flex align-center mt-7">
+                            <v-avatar size="48" class="mr-2" rounded="md" color="lightprimary">
+                               <CreditCardIcon size="22" />
+                            </v-avatar>
+                            <div class="pl-4">
+                                <h6 class="text-h6 mb-3 mt-n1">Visa</h6> 
+                                <h5 class="text-subtitle-1">*****2102</h5>
+                            </div>
+                            <div class="ml-auto">
+                               <v-btn size="35" icon variant="flat" class="lightprimary d-flex">
+                                    <v-avatar size="35">
+                                        <PencilMinusIcon size="22" />
+                                    </v-avatar>
+                                    <v-tooltip
+                                        activator="parent"
+                                        location="bottom"
+                                    >Edit
+                                    </v-tooltip>
+                                </v-btn>
+                            </div>    
+                        </div>
+                        <div class="mt-4">
+                            <div class="text-subtitle-1 textSecondary text-10 mb-3">
+                                If you updated your payment method, it will only be dislpayed here after your next billing cycle.
+                            </div>    
+                            <v-btn class="text-error" variant="tonal" flat>Cancel Subscription</v-btn>
+                        </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+    <div class="d-flex justify-end mt-5">
+            <v-btn  color="primary" class="mr-4" flat>Save</v-btn>
+            <v-btn  class="bg-lighterror text-error"  flat>Cancel</v-btn>
+        </div>
+</template>
diff --git a/src/components/pages/account-settings/NotificationTab.vue b/src/components/pages/account-settings/NotificationTab.vue
new file mode 100644
index 0000000..8e2c9d4
--- /dev/null
+++ b/src/components/pages/account-settings/NotificationTab.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {notificationTb} from '@/_mockApis/components/pages/accountNotification';
+const switchoff3 = ref(false);
+</script>
+<template>
+    <v-row class="justify-center ma-n2">
+        <!----Notification Preferences----->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <h4 class="text-h4">Notification Preferences</h4>
+                    <div class="text-subtitle-1 textSecondary text-10 my-3">
+                        Select the notificaitons ou would like to receive via email. Please note that you cannot opt out of receving service
+                        messages, such as payment, security or legal notifications.
+                    </div>
+                    <div class="my-6">
+                        <v-label class="mb-2 font-weight-medium">Email Address*</v-label>
+                        <v-text-field color="primary" variant="outlined" type="email" hide-details></v-text-field>
+                        <span class="text-subtitle-1 textSecondary d-block mt-2">Required for notificaitons.</span>
+                    </div>
+
+                    <div class="d-flex gap-3 align-sm-center align-start mt-3" v-for="list in notificationTb" :key="list.title">
+                        <v-avatar size="48" class="mr-2" rounded="md" color="light">
+                            <component :is="list.icon" stroke-width="2" size="22" />
+                        </v-avatar>
+                        <div >
+                            <h6 class="text-h6 mb-2">{{ list.title }}</h6>
+                            <p class="text-body-1 textSecondary">{{ list.subtitle }}</p>
+                        </div>
+                        <div class="ms-auto mr-1 pa-sm-1 pa-6 pl-7">
+                            <v-switch  :model-value="list.switch" hide-details color="primary"></v-switch>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+        <!-----Date & Time------->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <v-card-title class="text-h4">Date & Time</v-card-title>
+                    <div class="text-subtitle-1 textSecondary text-10 my-3">Time zones and calendar display settings.</div>
+                    <div>
+                        <div class="d-flex gap-3 align-center mt-7">
+                            <v-avatar size="48" class="mr-2" rounded="md" color="light">
+                                <ClockIcon size="22" />
+                            </v-avatar>
+                            <div >
+                                <h5 class="text-subtitle-1 textSecondary mb-1">Time zone</h5>
+                                <p class="text-h6">(UTC + 02:00) Athens, Bucharet</p>
+                            </div>
+                            <div class="ms-auto">
+                                <v-btn size="30" icon variant="flat" class="lightprimary d-flex">
+                                    <v-avatar size="30">
+                                        <DownloadIcon size="22" />
+                                    </v-avatar>
+                                    <v-tooltip activator="parent" location="bottom">Download </v-tooltip>
+                                </v-btn>
+                            </div>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+        <!-----Ignore Tracking------->
+        <v-col cols="12" md="9">
+            <v-card variant="outlined">
+                <v-card-item>
+                    <v-card-title class="text-h4">Ignore Tracking</v-card-title>
+                    <div>
+                        <div class="d-flex gap-3 align-center mt-7">
+                            <v-avatar size="48" class="mr-2" rounded="md" color="light">
+                                <PlayerPauseIcon size="22" />
+                            </v-avatar>
+                            <div >
+                                <h6 class="text-h6 mb-2">Ignore Browser Tracking</h6>
+                                <p class="text-body-1 textSecondary">Browser Cookie</p>
+                            </div>
+                            <div class="ms-auto mr-1 pa-sm-0 pl-sm-1 pa-6 pl-7">
+                                <v-switch v-model="switchoff3" hide-details color="primary"></v-switch>
+                            </div>
+                        </div>
+                    </div>
+                </v-card-item>
+            </v-card>
+        </v-col>
+    </v-row>
+    <div class="d-flex justify-end mt-5">
+        <v-btn  color="primary" class="mr-4" flat>Save</v-btn>
+        <v-btn  class="bg-lighterror text-error" flat>Cancel</v-btn>
+    </div>
+</template>
diff --git a/src/components/pages/account-settings/SecurityTab.vue b/src/components/pages/account-settings/SecurityTab.vue
new file mode 100644
index 0000000..f8ae9ed
--- /dev/null
+++ b/src/components/pages/account-settings/SecurityTab.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*import tabler icons*/
+import { DeviceLaptopIcon, DeviceMobileIcon, DotsVerticalIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-row class="ma-sm-n2 ma-n1">
+            <v-col cols="12" md="8">
+                <v-card variant="outlined">
+                    <v-card-item>
+                        <h4 class="text-h4">Two-factor Authentication</h4>
+                        <div class="d-sm-flex justify-space-between mt-4 mb-8">
+                            <div class="text-subtitle-1 textSecondary text-13 pr-5">
+                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis sapiente sunt earum officiis laboriosam
+                                ut.
+                            </div>
+                            <v-btn color="primary" class="mt-sm-0 mt-3" flat>Enable</v-btn>
+                        </div>
+                        <v-divider></v-divider>
+                        <div class="d-flex justify-space-between my-4">
+                            <div>
+                                <h6 class="text-h6 mb-1">Authentication App</h6>
+                                <p class="text-body-1 textSecondary">Google auth app</p>
+                            </div>
+                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
+                        </div>
+                        <v-divider></v-divider>
+                        <div class="d-flex justify-space-between my-4">
+                            <div>
+                                <h6 class="text-h6 mb-1">Another e-mail</h6>
+                                <p class="text-body-1 textSecondary">E-mail to send verification link</p>
+                            </div>
+                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
+                        </div>
+                        <v-divider></v-divider>
+                        <div class="d-flex justify-space-between my-4">
+                            <div>
+                                <h6 class="text-h6 mb-1">SMS Recovery</h6>
+                                <p class="text-body-1 textSecondary">Your phone number or something</p>
+                            </div>
+                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
+                        </div>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-card variant="outlined">
+                    <v-card-item>
+                        <v-avatar size="48" class="" rounded="md" color="lightprimary">
+                            <DeviceLaptopIcon class="text-primary" size="25" />
+                        </v-avatar>
+                        <h5 class="text-h5 mt-4">Devices</h5>
+                        <div class="text-subtitle-1 mt-3 textSecondary text-10">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit Rem.
+                        </div>
+                        <v-btn color="primary" class="mt-4" flat>Sign out from all devices</v-btn>
+                        <div class="mt-sm-8 mt-5">
+                            <div class="d-flex gap-3 align-center my-4">
+                                <v-avatar size="30" rounded="md" color="surface">
+                                    <DeviceMobileIcon size="25" />
+                                </v-avatar>
+                                <div class="">
+                                    <h6 class="text-h6 mb-1">iPhone 14</h6>
+                                    <p class="text-body-1 textSecondary">London UK, Oct 23 at 1:15 AM</p>
+                                </div>
+                                <v-btn size="30" icon variant="flat" class="lightprimary ms-auto">
+                                    <v-avatar size="20">
+                                        <DotsVerticalIcon />
+                                    </v-avatar>
+                                </v-btn>
+                            </div>
+                            <v-divider></v-divider>
+                            <div class="d-flex gap-3 align-center my-4">
+                                <v-avatar size="30" rounded="md" color="surface">
+                                    <DeviceLaptopIcon size="25" />
+                                </v-avatar>
+                                <div class="">
+                                    <h6 class="text-h6 mb-1">Macbook Air</h6>
+                                    <p class="text-body-1 textSecondary">Gujarat India, Oct 24 at 3:15 AM</p>
+                                </div>
+                                <v-btn size="30" icon variant="flat" class="lightprimary ms-auto">
+                                    <v-avatar size="20">
+                                        <DotsVerticalIcon />
+                                    </v-avatar>
+                                </v-btn>
+                            </div>
+                        </div>
+                        <v-btn color="primary" variant="tonal" class=" mt-5" block flat>Need Help?</v-btn>
+                    </v-card-item>
+                </v-card>
+            </v-col>
+        </v-row>
+        <div class="d-flex justify-end mt-5">
+            <v-btn  color="primary" class="mr-4" flat>Save</v-btn>
+            <v-btn  class="bg-lighterror text-error" flat>Cancel</v-btn>
+        </div>
+    </v-card>
+</template>
diff --git a/src/components/pages/faq/FaqQuestion.vue b/src/components/pages/faq/FaqQuestion.vue
new file mode 100644
index 0000000..d7115bb
--- /dev/null
+++ b/src/components/pages/faq/FaqQuestion.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { faqPage } from '@/_mockApis/components/pages/faqData';
+</script>
+<template>
+    <div class="text-center mb-8">
+        <h3 class="text-28">Frequently asked questions</h3>
+        <p class="text-16 textSecondary  mt-1">Get to know more about ready-to-use admin dashboard templates</p>
+    </div>
+    <v-expansion-panels elevation="10">
+        <v-expansion-panel elevation="10" v-for="item in faqPage" :key="item.question">
+            <v-expansion-panel-title class="text-h6 py-6">{{ item.question }}</v-expansion-panel-title>
+            <v-divider></v-divider>
+            <v-expansion-panel-text class="text-subtitle-1 text-10 textSecondary pt-3 pb-2">
+                {{ item.answer }}
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/pages/faq/StillHaveQuestions.vue b/src/components/pages/faq/StillHaveQuestions.vue
new file mode 100644
index 0000000..79d72ca
--- /dev/null
+++ b/src/components/pages/faq/StillHaveQuestions.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+/* user icon */
+import img1 from '@/assets/images/profile/user-10.jpg';
+import img2 from '@/assets/images/profile/user-2.jpg';
+import img3 from '@/assets/images/profile/user-3.jpg';
+</script>
+<template>
+    <v-card elevation="0" rounded="md" class="bg-lightprimary mt-sm-13 mt-8">
+        <v-card-item class="pa-sm-10 pa-6">
+            <div class="text-center">
+                <div class="ml-2 d-flex justify-center  mb-5">
+                    <v-avatar size="40" class="ml-n2 avtar-border">
+                        <img :src="img1" alt="avatar" height="40" />
+                    </v-avatar>
+                    <v-avatar size="40" class="ml-n2 avtar-border">
+                        <img :src="img2" alt="avatar" height="40" />
+                    </v-avatar>
+                    <v-avatar size="40" class="ml-n2 avtar-border">
+                        <img :src="img3" alt="avatar" height="40" />
+                    </v-avatar>
+                </div>
+                <h3 class="text-28">Still have questions</h3>
+                <p class="text-16 text-primary font-weight-medium mt-2">
+                    Can't find the answer your're looking for ? Please chat to our friendly team.
+                </p>
+                <v-btn color="primary" flat class="mt-5">Chat with us</v-btn>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/src/components/pages/search-results/SearchLinks.vue b/src/components/pages/search-results/SearchLinks.vue
new file mode 100644
index 0000000..6854587
--- /dev/null
+++ b/src/components/pages/search-results/SearchLinks.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { SearchLinkData } from '@/_mockApis/components/pages/searchLinks';
+import { RouterLink } from 'vue-router';
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <h5 class="text-h5">Search Result For "Angular Js"</h5>
+            <p class="textSecondary subtitle-1" >About 14,700 result ( 0.10 seconds)</p>
+
+            <div class="mt-4">
+                <div class="border-b py-5" v-for="item in SearchLinkData" :key="item.title">
+                    <h6 class="text-h5">{{ item.title }}</h6>
+                    <RouterLink class="text-primary text-decoration-none" :to="item.url">{{ item.linktitle }}</RouterLink>
+                    <p class="textSecondary">{{ item.subtitle }}</p>
+                </div>
+                <div class="mt-6 d-flex justify-start">
+                    <v-pagination :length="4"></v-pagination>
+                </div>
+                
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
diff --git a/src/components/shared/AppBaseCard.vue b/src/components/shared/AppBaseCard.vue
new file mode 100644
index 0000000..cafc1e7
--- /dev/null
+++ b/src/components/shared/AppBaseCard.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+const { xs, lgAndUp } = useDisplay();
+const sDrawer = ref(false);
+</script>
+
+<template>
+    <!---/Left chat list -->
+    <div class="d-flex mainbox rounded-md">
+        <div class="left-part" v-if="lgAndUp">
+            <!-- <perfect-scrollbar style="height: calc(100vh - 290px)"> -->
+            <slot name="leftpart"></slot>
+            <!-- </perfect-scrollbar> -->
+        </div>
+
+        <!---right chat conversation -->
+        <div class="right-part">
+            <!---Toggle Button For mobile-->
+            <v-btn block @click="sDrawer = !sDrawer" variant="text" class="d-lg-none d-md-flex d-sm-flex">
+                <Menu2Icon size="20" class="mr-2" /> Menu
+            </v-btn>
+            <v-divider class="d-lg-none d-block" />
+            <slot name="rightpart"></slot>
+        </div>
+
+        <!---right chat conversation -->
+    </div>
+
+    <v-navigation-drawer temporary v-model="sDrawer" width="320" top v-if="!lgAndUp">
+        <v-card-text class="pa-0">
+            <slot name="mobileLeftContent"></slot>
+        </v-card-text>
+    </v-navigation-drawer>
+    
+</template>
+
+<style lang="scss">
+.mainbox {
+    position: relative;
+    overflow: hidden;
+}
+.left-part {
+    width: 320px;
+    border-inline-end-width: thin !important;
+    border-inline-end-style: solid !important;
+    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    min-height: 500px;
+    transition: 0.1s ease-in;
+    flex-shrink: 0;
+}
+.v-theme--light {
+    .left-part {
+        background: white;
+    }
+}
+.v-theme--dark {
+    .left-part {
+        background: #2b2b2b;
+    }
+}
+
+
+.right-part{
+    width: 100%;
+}
+
+</style>
diff --git a/src/components/shared/AppEmailCard.vue b/src/components/shared/AppEmailCard.vue
new file mode 100644
index 0000000..90df114
--- /dev/null
+++ b/src/components/shared/AppEmailCard.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDisplay } from "vuetify";
+const { xs, lgAndUp } = useDisplay();
+
+const sDrawer = ref(false); // Sidebar drawer for mobile
+const eDrawer = ref(false); // Email details drawer
+const selectedEmail = ref(null); // To store the selected email details
+
+// Method to select an email and open the email details drawer
+const openEmailDetails = (email:any) => {
+  selectedEmail.value = email; // Store the selected email
+  eDrawer.value = true; // Open the email details drawer
+};
+
+</script>
+
+<template>
+  <div class="d-flex mainbox">
+    <div class="compose pa-6 " v-if="lgAndUp">
+      <slot name="mailCompose"></slot>
+    </div>
+
+    <div class="mail-list">
+     
+      <v-divider class="d-lg-none d-block" />
+      <slot name="mailList" :openEmailDetails="openEmailDetails"></slot> <!-- Pass the method as a slot prop -->
+    </div>
+
+    <div class="mail-details pa-6  d-md-block d-none">
+      <slot name="mailDetail"></slot>
+    </div>
+  </div>
+
+</template>
+
+<style lang="scss">
+.compose {
+  max-width: 235px;
+  width: 100%;
+}
+.mail-list {
+  max-width: 340px;
+  width: 100%;
+}
+.mail-details {
+  width: 100%;
+}
+
+@media screen and (max-width: 991px) {
+  .mail-list {
+    max-width: 100%;
+  }
+}
+@media screen and (min-width: 991px) {
+  .compose,.mail-list{
+    border-inline-end-width: thin !important;
+    border-inline-end-style: solid !important;
+    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  }
+}
+</style>
diff --git a/src/components/shared/BaseBreadcrumb.vue b/src/components/shared/BaseBreadcrumb.vue
new file mode 100644
index 0000000..aa6499c
--- /dev/null
+++ b/src/components/shared/BaseBreadcrumb.vue
@@ -0,0 +1,43 @@
+<script setup >
+import { Icon } from '@iconify/vue';
+const props = defineProps({
+    title: String,
+    breadcrumbs: Array ,
+    icon: String,
+    text: String
+});
+
+
+</script>
+
+<template>
+    <v-card elevation="10" class="mb-8">
+        <div class="px-6 py-4">
+            <div class="d-flex justify-space-between align-center">
+                <h5 class="text-h5">{{ title }}</h5>
+                <v-breadcrumbs :items="breadcrumbs" class="pa-0">
+                        <template v-slot:prepend>
+                            <router-link to="/" class="textSecondary lh-0">
+                                <Icon icon="solar:home-2-line-duotone" height="20"   />
+                            </router-link>
+                        </template>
+                        <template v-slot:divider>
+                            <div class="d-flex align-center textSecondary "></div>
+                        </template>
+                        <template v-slot:title="{ item }">
+                            <v-chip size="small" class="rounded-sm" color="primary" >{{ item.text }}</v-chip>
+                        </template>
+                    </v-breadcrumbs>
+                
+            </div>
+        </div>
+    </v-card>
+</template>
+
+<style lang="scss">
+.page-breadcrumb {
+    .v-toolbar {
+        background: transparent;
+    }
+}
+</style>
diff --git a/components/shared/CardHeaderFooter.vue b/src/components/shared/CardHeaderFooter.vue
similarity index 100%
rename from components/shared/CardHeaderFooter.vue
rename to src/components/shared/CardHeaderFooter.vue
diff --git a/components/shared/UiChildCard.vue b/src/components/shared/UiChildCard.vue
similarity index 100%
rename from components/shared/UiChildCard.vue
rename to src/components/shared/UiChildCard.vue
diff --git a/components/shared/UiParentCard.vue b/src/components/shared/UiParentCard.vue
similarity index 88%
rename from components/shared/UiParentCard.vue
rename to src/components/shared/UiParentCard.vue
index 63d79a5..465be28 100644
--- a/components/shared/UiParentCard.vue
+++ b/src/components/shared/UiParentCard.vue
@@ -7,13 +7,14 @@ const props = defineProps({
 // ===============================|| Ui Parent Card||=============================== //
 <template>
     <v-card elevation="10" >
-        <v-card-item>
+        <v-card-item class="py-4 px-6">
             <div class="d-sm-flex align-center justify-space-between">
                 <v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
                 <slot name="action"></slot>
                 <!-- </template> -->
             </div>
         </v-card-item>
+        <v-divider></v-divider>
         <v-card-text>
             <slot />
         </v-card-text>
diff --git a/components/shared/UiParentCardLogo.vue b/src/components/shared/UiParentCardLogo.vue
similarity index 92%
rename from components/shared/UiParentCardLogo.vue
rename to src/components/shared/UiParentCardLogo.vue
index 0148532..71ed00a 100644
--- a/components/shared/UiParentCardLogo.vue
+++ b/src/components/shared/UiParentCardLogo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import Logo from "@/layouts/full/logo/Logo.vue";
+import Logo from "@/layouts/Logo.vue";
 </script>
 
 // ===============================|| Ui Parent Card||=============================== //
diff --git a/components/shared/UiTableCard.vue b/src/components/shared/UiTableCard.vue
similarity index 100%
rename from components/shared/UiTableCard.vue
rename to src/components/shared/UiTableCard.vue
diff --git a/components/shared/UiTextfieldPrimary.vue b/src/components/shared/UiTextfieldPrimary.vue
similarity index 100%
rename from components/shared/UiTextfieldPrimary.vue
rename to src/components/shared/UiTextfieldPrimary.vue
diff --git a/components/shared/WidgetCard.vue b/src/components/shared/WidgetCard.vue
similarity index 100%
rename from components/shared/WidgetCard.vue
rename to src/components/shared/WidgetCard.vue
diff --git a/components/shared/WidgetCardv2.vue b/src/components/shared/WidgetCardv2.vue
similarity index 100%
rename from components/shared/WidgetCardv2.vue
rename to src/components/shared/WidgetCardv2.vue
diff --git a/components/style-components/shadow/Shadow.vue b/src/components/style-components/shadow/Shadow.vue
similarity index 100%
rename from components/style-components/shadow/Shadow.vue
rename to src/components/style-components/shadow/Shadow.vue
diff --git a/src/components/style-components/typography/DefaultText.vue b/src/components/style-components/typography/DefaultText.vue
new file mode 100644
index 0000000..142cec3
--- /dev/null
+++ b/src/components/style-components/typography/DefaultText.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from "vue"; 
+</script>
+<template>
+    <div class="d-flex flex-column gap-1">
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 text-primary">Text Primary</h5>
+            <div class="text-body-1 text-primary" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 textSecondary">Text Secondary</h5>
+            <div class="text-body-1 textSecondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 text-info">Text Info</h5>
+            <div class="text-body-1 textSecondary" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 text-warning">Text Warning</h5>
+            <div class="text-body-1 text-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 text-error">Text Error</h5>
+            <div class="text-body-1 text-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+        <v-card variant="outlined" class="my-3 pa-6">
+            <h5 class="text-h5 text-success">Text Success</h5>
+            <div class="text-body-1 text-success" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+        </v-card>
+    </div>
+</template>
diff --git a/src/components/style-components/typography/Heading.vue b/src/components/style-components/typography/Heading.vue
new file mode 100644
index 0000000..f9f9684
--- /dev/null
+++ b/src/components/style-components/typography/Heading.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const headings = ref([
+    ['h1.Heading', 'text-h1','font size: 36 | line-height: 60 | font weight: 600'],
+    ['h2.Heading', 'text-h2','font size: 30 | line-height: 36 | font weight: 600'],
+    ['h3.Heading', 'text-h3','font size: 22 | line-height: 32| font weight: 600'],
+    ['h4.Heading', 'text-h4','font size: 20 | line-height: 25 | font weight: 600'],
+    ['h5.Heading', 'text-h5','font size: 18 | line-height: 25 | font weight: 600'],
+    ['h6.Heading', 'text-h6','font size: 16 | line-height: 25 | font weight: 600'],
+]);   
+
+const subtext = ref(
+    [
+        ['Subtitle 1.', 'text-subtitle-1',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 15 | line-height: 17.6 | font weight: 400'],
+        ['Subtitle 2.', 'text-subtitle-2',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 13 | line-height: 16 | font weight: 400'],
+        ['Body 1.', 'text-body-1',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 14 | line-height: 24 | font weight: 400'],
+        ['Body 2.', 'text-body-2',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 12 | line-height: 24 | font weight: 400'],
+        ['Caption.', 'text-caption',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 14 | line-height: 24 | font weight: 400'],
+        ['OVERLINE.', 'text-overline letter-spacing-0',' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur','font size: 12 | line-height: 24 | font weight: 400']
+    ]
+)
+</script>
+<template>
+    <div class="d-flex flex-column gap-1">
+        <v-card variant="outlined" v-for="[name, cls,val] in headings" :key="name" class="my-3 pa-6">
+            <div :class="[cls, '']">{{ name }}</div>
+            <div class="text-caption ">
+                <div class="font-weight-medium textSecondary">{{ val }}</div>
+            </div>
+        </v-card>
+    </div>
+
+    <div class="d-flex flex-column gap-1">
+        <v-card variant="outlined" v-for="[name1, cls1,val1,prop] in subtext" :key="name1" class="my-3 pa-6">
+            <div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
+            <div class="text-caption ">
+                <div class="text-body-1 textSecondary">{{ prop }}</div>
+            </div>
+        </v-card>
+    </div>
+</template>
diff --git a/src/components/style-components/typography/Opacity.vue b/src/components/style-components/typography/Opacity.vue
new file mode 100644
index 0000000..dfb8491
--- /dev/null
+++ b/src/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/src/components/style-components/typography/TextAlignment.vue b/src/components/style-components/typography/TextAlignment.vue
new file mode 100644
index 0000000..d593941
--- /dev/null
+++ b/src/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/src/components/style-components/typography/TextDecoration.vue b/src/components/style-components/typography/TextDecoration.vue
new file mode 100644
index 0000000..c0e2e44
--- /dev/null
+++ b/src/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/src/components/ui-components/alert/Action.vue b/src/components/ui-components/alert/Action.vue
new file mode 100644
index 0000000..14e98db
--- /dev/null
+++ b/src/components/ui-components/alert/Action.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-alert type="warning"  density="compact" class="mb-4 single-line-alert" closable>
+        <div>This is an warning alert  — check it out!</div>
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-outline</v-icon>
+        </template>
+        <!-- <template v-slot:append>
+            <v-btn variant="text" color="warning" class="ml-auto">Undo</v-btn>
+        </template> -->
+    </v-alert>
+    <v-alert type="info"  density="compact" class="mb-4 single-line-alert" closable>
+        <div>This is an info alert  — check it out!</div>
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-circle-outline</v-icon>
+        </template>
+<!--         
+        <template v-slot:append>
+            <v-btn variant="text" color="info" class="ml-auto">Undo</v-btn>
+        </template> -->
+    </v-alert>
+</template>
diff --git a/components/ui-components/alert/Basic.vue b/src/components/ui-components/alert/Basic.vue
similarity index 100%
rename from components/ui-components/alert/Basic.vue
rename to src/components/ui-components/alert/Basic.vue
diff --git a/components/ui-components/alert/Closable.vue b/src/components/ui-components/alert/Closable.vue
similarity index 100%
rename from components/ui-components/alert/Closable.vue
rename to src/components/ui-components/alert/Closable.vue
diff --git a/src/components/ui-components/alert/Description.vue b/src/components/ui-components/alert/Description.vue
new file mode 100644
index 0000000..40d0329
--- /dev/null
+++ b/src/components/ui-components/alert/Description.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-alert type="error" variant="tonal" class="mb-4">
+        <h5 class="text-h6 text-capitalize">error</h5>
+        <div>This is an error alert — check it out!</div>
+    </v-alert>
+    <v-alert type="warning" variant="tonal" class="mb-4">
+        <h5 class="text-h6 text-capitalize">warning</h5>
+        <div>This is an warning alert — check it out!</div>
+    </v-alert>
+    <v-alert type="info" variant="tonal" class="mb-4">
+        <h5 class="text-h6 text-capitalize">info</h5>
+        <div>This is an info alert — check it out!</div>
+    </v-alert>
+    <v-alert type="success" variant="tonal" class="mb-4">
+        <h5 class="text-h6 text-capitalize">success</h5>
+        <div>This is an success alert — check it out!</div>
+    </v-alert>
+</template>
diff --git a/components/ui-components/alert/Filled.vue b/src/components/ui-components/alert/Filled.vue
similarity index 100%
rename from components/ui-components/alert/Filled.vue
rename to src/components/ui-components/alert/Filled.vue
diff --git a/src/components/ui-components/alert/Icons.vue b/src/components/ui-components/alert/Icons.vue
new file mode 100644
index 0000000..28023c9
--- /dev/null
+++ b/src/components/ui-components/alert/Icons.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-alert color="success" variant="tonal" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-checkbox-marked-circle-outline</v-icon>
+        </template>
+        <div>This is an success alert.</div>
+    </v-alert>
+    <v-alert color="info" variant="tonal" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-circle-outline</v-icon>
+        </template>
+        <div>This is an info alert.</div>
+    </v-alert>
+    <v-alert color="warning" variant="tonal" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-outline</v-icon>
+        </template>
+        <div>This is an warning alert.</div>
+    </v-alert>
+    <v-alert color="error" variant="tonal" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-circle-outline</v-icon>
+        </template>
+        <div>This is an error alert.</div>
+    </v-alert>
+</template>
diff --git a/src/components/ui-components/alert/Outlined.vue b/src/components/ui-components/alert/Outlined.vue
new file mode 100644
index 0000000..7b1acd8
--- /dev/null
+++ b/src/components/ui-components/alert/Outlined.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-alert type="error" variant="outlined" density="compact" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-circle-outline</v-icon>
+        </template>
+        <div>This is an error alert — check it out!</div>
+    </v-alert>
+    <v-alert type="warning" variant="outlined" density="compact" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-outline</v-icon>
+        </template>
+        <div>This is a warning alert — check it out!</div>
+    </v-alert>
+    <v-alert type="info" variant="outlined" density="compact" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-alert-circle-outline</v-icon>
+        </template>
+        <div>This is an info alert — check it out!</div>
+    </v-alert>
+    <v-alert type="success" variant="outlined" density="compact" class="mb-4">
+        <template v-slot:prepend>
+            <v-icon class="text-24">mdi-checkbox-marked-circle-outline</v-icon>
+        </template>
+        <div>This is a success alert — check it out!</div>
+    </v-alert>
+</template>
diff --git a/src/components/ui-components/avatar/BasicAvatar.vue b/src/components/ui-components/avatar/BasicAvatar.vue
new file mode 100644
index 0000000..102f2f0
--- /dev/null
+++ b/src/components/ui-components/avatar/BasicAvatar.vue
@@ -0,0 +1,13 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { UserIcon} from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="text-center">
+        <v-avatar variant="flat" color="primary">
+            <UserIcon />
+        </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/avatar/IconAvatar.vue b/src/components/ui-components/avatar/IconAvatar.vue
new file mode 100644
index 0000000..eabac39
--- /dev/null
+++ b/src/components/ui-components/avatar/IconAvatar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { MoodSmileIcon} from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex align-center gap-2 justify-center">
+        <v-avatar size="40" color="primary"  variant="flat">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" variant="flat" color="secondary" >
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" color="error"  variant="flat">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" color="warning"  variant="flat">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" color="success"  variant="flat">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/avatar/ImageAvatar.vue b/src/components/ui-components/avatar/ImageAvatar.vue
new file mode 100644
index 0000000..9d34798
--- /dev/null
+++ b/src/components/ui-components/avatar/ImageAvatar.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="d-flex align-center gap-2 justify-center">
+        <v-avatar size="40" variant="flat">
+            <img src="@/assets/images/profile/user-6.jpg" width="40" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="40" variant="flat">
+            <img src="@/assets/images/profile/user-2.jpg" width="40" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="40" variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
+        </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/avatar/LetterAvatar.vue b/src/components/ui-components/avatar/LetterAvatar.vue
new file mode 100644
index 0000000..fdb48ad
--- /dev/null
+++ b/src/components/ui-components/avatar/LetterAvatar.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex align-center gap-2 justify-center">
+        <v-avatar size="40" color="primary" variant="flat" class="text-h5 font-weight-medium"> A </v-avatar>
+        <v-avatar size="40" color="secondary" variant="flat" class="text-h5 font-weight-medium">B</v-avatar>
+        <v-avatar size="40" color="error" variant="flat" class="text-h5 font-weight-medium"> C </v-avatar>
+        <v-avatar size="40" color="warning" variant="flat" class="text-h5 font-weight-medium"> D </v-avatar>
+        <v-avatar size="40" color="success" variant="flat" class="text-h5 font-weight-medium"> E </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/avatar/SizeAvatar.vue b/src/components/ui-components/avatar/SizeAvatar.vue
new file mode 100644
index 0000000..112e98c
--- /dev/null
+++ b/src/components/ui-components/avatar/SizeAvatar.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="d-flex align-center gap-3 justify-center">
+        <v-avatar size="x-small"  variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="25" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="small"  variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="35" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="medium"  variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="large"  variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="48" alt="Julia" />
+        </v-avatar>
+        <v-avatar size="x-large"  variant="flat">
+            <img src="@/assets/images/profile/user-3.jpg" width="56" alt="Julia" />
+        </v-avatar>
+    </div>
+    
+</template>
diff --git a/src/components/ui-components/avatar/VariantAvatar.vue b/src/components/ui-components/avatar/VariantAvatar.vue
new file mode 100644
index 0000000..c8cc1fb
--- /dev/null
+++ b/src/components/ui-components/avatar/VariantAvatar.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// icons
+import { MoodSmileIcon} from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex align-center gap-2 justify-center">
+        <v-avatar size="40" color="primary"  variant="flat" rounded="sm">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" color="primary" variant="flat" rounded="md">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+        <v-avatar size="40" color="primary"  variant="flat" rounded="lg">
+            <MoodSmileIcon size="25" />
+        </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/banners/Banner2.vue b/src/components/ui-components/banners/Banner2.vue
new file mode 100644
index 0000000..6e6d1ab
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/banners/Banner3.vue b/src/components/ui-components/banners/Banner3.vue
new file mode 100644
index 0000000..228756c
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/banners/Banner4.vue b/src/components/ui-components/banners/Banner4.vue
new file mode 100644
index 0000000..6b9e38c
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/banners/Banner5.vue b/src/components/ui-components/banners/Banner5.vue
new file mode 100644
index 0000000..7d06783
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/banners/Banner6.vue b/src/components/ui-components/banners/Banner6.vue
new file mode 100644
index 0000000..ac49316
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/banners/WelcomCard.vue b/src/components/ui-components/banners/WelcomCard.vue
new file mode 100644
index 0000000..8ebf62b
--- /dev/null
+++ b/src/components/ui-components/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/ui-components/button/BaseButtons.vue b/src/components/ui-components/button/BaseButtons.vue
similarity index 100%
rename from components/ui-components/button/BaseButtons.vue
rename to src/components/ui-components/button/BaseButtons.vue
diff --git a/components/ui-components/button/ColorsButtons.vue b/src/components/ui-components/button/ColorsButtons.vue
similarity index 100%
rename from components/ui-components/button/ColorsButtons.vue
rename to src/components/ui-components/button/ColorsButtons.vue
diff --git a/components/ui-components/button/IconColorSizes.vue b/src/components/ui-components/button/IconColorSizes.vue
similarity index 100%
rename from components/ui-components/button/IconColorSizes.vue
rename to src/components/ui-components/button/IconColorSizes.vue
diff --git a/components/ui-components/button/OutlinedButtons.vue b/src/components/ui-components/button/OutlinedButtons.vue
similarity index 100%
rename from components/ui-components/button/OutlinedButtons.vue
rename to src/components/ui-components/button/OutlinedButtons.vue
diff --git a/src/components/ui-components/button/SizeButtons.vue b/src/components/ui-components/button/SizeButtons.vue
new file mode 100644
index 0000000..d5955b7
--- /dev/null
+++ b/src/components/ui-components/button/SizeButtons.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="d-flex gap-2 justify-space-around align-center flex-column flex-md-row fill-height">
+        <v-btn size="x-small" color="primary" flat>
+            Extra small
+        </v-btn>
+
+        <v-btn size="small" color="primary" flat>
+            Small
+        </v-btn>
+
+        <v-btn color="primary" flat>
+            Normal
+        </v-btn>
+
+        <v-btn color="primary" size="large" flat>
+            Large
+        </v-btn>
+
+        <v-btn size="x-large" color="primary" flat>
+            Extra large
+        </v-btn>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/ui-components/button/TextButtons.vue b/src/components/ui-components/button/TextButtons.vue
similarity index 100%
rename from components/ui-components/button/TextButtons.vue
rename to src/components/ui-components/button/TextButtons.vue
diff --git a/src/components/ui-components/cards/BlogCards.vue b/src/components/ui-components/cards/BlogCards.vue
new file mode 100644
index 0000000..38aa560
--- /dev/null
+++ b/src/components/ui-components/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/ui-components/cards/CardsContentWrap.vue b/src/components/ui-components/cards/CardsContentWrap.vue
similarity index 100%
rename from components/ui-components/cards/CardsContentWrap.vue
rename to src/components/ui-components/cards/CardsContentWrap.vue
diff --git a/components/ui-components/cards/CardsMedia.vue b/src/components/ui-components/cards/CardsMedia.vue
similarity index 100%
rename from components/ui-components/cards/CardsMedia.vue
rename to src/components/ui-components/cards/CardsMedia.vue
diff --git a/components/ui-components/cards/CardsProps.vue b/src/components/ui-components/cards/CardsProps.vue
similarity index 100%
rename from components/ui-components/cards/CardsProps.vue
rename to src/components/ui-components/cards/CardsProps.vue
diff --git a/components/ui-components/cards/CardsSlots.vue b/src/components/ui-components/cards/CardsSlots.vue
similarity index 100%
rename from components/ui-components/cards/CardsSlots.vue
rename to src/components/ui-components/cards/CardsSlots.vue
diff --git a/components/ui-components/cards/CardsTwitter.vue b/src/components/ui-components/cards/CardsTwitter.vue
similarity index 100%
rename from components/ui-components/cards/CardsTwitter.vue
rename to src/components/ui-components/cards/CardsTwitter.vue
diff --git a/components/ui-components/cards/CardsWeather.vue b/src/components/ui-components/cards/CardsWeather.vue
similarity index 100%
rename from components/ui-components/cards/CardsWeather.vue
rename to src/components/ui-components/cards/CardsWeather.vue
diff --git a/src/components/ui-components/cards/FollowerCards.vue b/src/components/ui-components/cards/FollowerCards.vue
new file mode 100644
index 0000000..b0e9eec
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/GiftCards.vue b/src/components/ui-components/cards/GiftCards.vue
new file mode 100644
index 0000000..20f2fae
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/MusicCards.vue b/src/components/ui-components/cards/MusicCards.vue
new file mode 100644
index 0000000..1a43c5a
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/PaymentGateways.vue b/src/components/ui-components/cards/PaymentGateways.vue
new file mode 100644
index 0000000..9bac3a1
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/ProductCards.vue b/src/components/ui-components/cards/ProductCards.vue
new file mode 100644
index 0000000..3d24a1e
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/ProfileCards.vue b/src/components/ui-components/cards/ProfileCards.vue
new file mode 100644
index 0000000..29509ac
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/Settings.vue b/src/components/ui-components/cards/Settings.vue
new file mode 100644
index 0000000..a273e98
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/UpcommingActivityCard.vue b/src/components/ui-components/cards/UpcommingActivityCard.vue
new file mode 100644
index 0000000..d920edb
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/cards/UserCards.vue b/src/components/ui-components/cards/UserCards.vue
new file mode 100644
index 0000000..2010653
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/CurrentValue.vue b/src/components/ui-components/charts/CurrentValue.vue
new file mode 100644
index 0000000..50ed435
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/Customer.vue b/src/components/ui-components/charts/Customer.vue
new file mode 100644
index 0000000..93bdab8
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/Earned.vue b/src/components/ui-components/charts/Earned.vue
new file mode 100644
index 0000000..3342ad9
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/Followers.vue b/src/components/ui-components/charts/Followers.vue
new file mode 100644
index 0000000..5bc8403
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/MonthlyEarnings.vue b/src/components/ui-components/charts/MonthlyEarnings.vue
new file mode 100644
index 0000000..ee0ebd9
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/MostVisited.vue b/src/components/ui-components/charts/MostVisited.vue
new file mode 100644
index 0000000..b5458ad
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/PageImpression.vue b/src/components/ui-components/charts/PageImpression.vue
new file mode 100644
index 0000000..d370b83
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/Projects.vue b/src/components/ui-components/charts/Projects.vue
new file mode 100644
index 0000000..17131b0
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/RevenueUpdates.vue b/src/components/ui-components/charts/RevenueUpdates.vue
new file mode 100644
index 0000000..62c7e98
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/SalesOverview.vue b/src/components/ui-components/charts/SalesOverview.vue
new file mode 100644
index 0000000..65da14a
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/TotalEarning.vue b/src/components/ui-components/charts/TotalEarning.vue
new file mode 100644
index 0000000..a617216
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/Views.vue b/src/components/ui-components/charts/Views.vue
new file mode 100644
index 0000000..1ca1a8c
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/YearlyBreakup.vue b/src/components/ui-components/charts/YearlyBreakup.vue
new file mode 100644
index 0000000..b16e513
--- /dev/null
+++ b/src/components/ui-components/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/src/components/ui-components/charts/YearlySales.vue b/src/components/ui-components/charts/YearlySales.vue
new file mode 100644
index 0000000..2f7342e
--- /dev/null
+++ b/src/components/ui-components/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>
diff --git a/src/components/ui-components/chip/Closable.vue b/src/components/ui-components/chip/Closable.vue
new file mode 100644
index 0000000..b5c9b97
--- /dev/null
+++ b/src/components/ui-components/chip/Closable.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="d-flex flex-wrap align-center gap-3">
+        <v-chip closable color="primary"> Primary Deletable</v-chip>
+        <v-chip closable color="secondary"> Secondary Deletable</v-chip>
+        <v-chip closable color="warning"> Warning Deletable</v-chip>
+        <v-chip closable color="success"> Success Deletable</v-chip>
+        <v-chip closable color="error"> Error Deletable</v-chip>
+        <v-chip closable color="info"> Info Deletable</v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/CustomIcon.vue b/src/components/ui-components/chip/CustomIcon.vue
new file mode 100644
index 0000000..6fb87ac
--- /dev/null
+++ b/src/components/ui-components/chip/CustomIcon.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
+        <v-chip color="primary">
+            <MoodSmileIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="secondary">
+            <UserCircleIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/CustomIconOutlined.vue b/src/components/ui-components/chip/CustomIconOutlined.vue
new file mode 100644
index 0000000..880be19
--- /dev/null
+++ b/src/components/ui-components/chip/CustomIconOutlined.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
+        <v-chip color="primary" variant="outlined">
+            <MoodSmileIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="secondary" variant="outlined">
+            <UserCircleIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/Disabled.vue b/src/components/ui-components/chip/Disabled.vue
new file mode 100644
index 0000000..583149e
--- /dev/null
+++ b/src/components/ui-components/chip/Disabled.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoodSmileIcon,ChecksIcon,UserCircleIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
+        <v-chip disabled variant="outlined">
+            <MoodSmileIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="secondary" disabled variant="outlined">
+            <UserCircleIcon class="mr-2" start size="20" />
+            Custom Icon
+            <ChecksIcon class="ml-2" start size="20" />
+        </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/FilledColor.vue b/src/components/ui-components/chip/FilledColor.vue
new file mode 100644
index 0000000..5cc554c
--- /dev/null
+++ b/src/components/ui-components/chip/FilledColor.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex flex-wrap align-center gap-3">
+        <v-chip class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Filled
+        </v-chip>
+        <v-chip class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="primary" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-6.jpg"  width="25" />
+            </v-avatar> Primary Filled 
+        </v-chip>
+        <v-chip color="primary" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-6.jpg"  width="25" />
+            </v-avatar> Primary Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="secondary" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled 
+        </v-chip>
+        <v-chip color="secondary" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="success" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-2.jpg"  width="25" />
+            </v-avatar> Default Filled 
+        </v-chip>
+        <v-chip color="success" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-2.jpg"  width="25" />
+            </v-avatar> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="warning" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Filled 
+        </v-chip>
+        <v-chip color="warning" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip color="error" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-5.jpg"  width="25" />
+            </v-avatar> Default Filled 
+        </v-chip>
+        <v-chip color="error" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-5.jpg"  width="25" />
+            </v-avatar> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/LabelChip.vue b/src/components/ui-components/chip/LabelChip.vue
new file mode 100644
index 0000000..d4836ec
--- /dev/null
+++ b/src/components/ui-components/chip/LabelChip.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
+        <v-chip label closable color="primary"> Primary </v-chip>
+        <v-chip label closable color="secondary"> Secondary </v-chip>
+        <v-chip label closable color="warning"> Warning </v-chip>
+        <v-chip label closable color="success"> Success </v-chip>
+        <v-chip label closable color="error"> Error </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/Outlined.vue b/src/components/ui-components/chip/Outlined.vue
new file mode 100644
index 0000000..61c9694
--- /dev/null
+++ b/src/components/ui-components/chip/Outlined.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoodSmileIcon, CircleXIcon } from 'vue-tabler-icons';
+</script>
+<template>
+    <div class="d-flex flex-wrap align-center gap-3">
+        <v-chip variant="outlined" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Filled
+        </v-chip>
+        <v-chip variant="outlined" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Deletable
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip variant="outlined" color="primary" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-3.jpg"  width="25" />
+            </v-avatar> Primary Filled 
+        </v-chip>
+        <v-chip variant="outlined" color="primary" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-3.jpg"  width="25" />
+            </v-avatar> Primary Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip variant="outlined" color="secondary" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Secondary Filled 
+        </v-chip>
+        <v-chip variant="outlined" color="secondary" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Secondary Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip variant="outlined" color="success" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-2.jpg"  width="25" />
+            </v-avatar> Default Filled 
+        </v-chip>
+        <v-chip variant="outlined" color="success" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-2.jpg"  width="25" />
+            </v-avatar> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip variant="outlined" color="warning" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Filled 
+        </v-chip>
+        <v-chip variant="outlined" color="warning" class="text-body-2">
+            <MoodSmileIcon class="mr-2" start size="20" /> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+        <v-chip variant="outlined" color="error" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-5.jpg"  width="25" />
+            </v-avatar> Default Filled 
+        </v-chip>
+        <v-chip variant="outlined" color="error" class="text-body-2">
+            <v-avatar start size="25">
+                <img src="@/assets/images/profile/user-5.jpg"  width="25" />
+            </v-avatar> Default Deletable 
+            <CircleXIcon class="ml-2" start size="20" />
+        </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/chip/Sizes.vue b/src/components/ui-components/chip/Sizes.vue
new file mode 100644
index 0000000..d7e071a
--- /dev/null
+++ b/src/components/ui-components/chip/Sizes.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="d-flex flex-column flex-sm-row flex-wrap flex-xl-nowrap align-center gap-3">
+        <v-chip color="primary" size="x-small"> x-small  </v-chip>
+        <v-chip color="primary" size="small"> small  </v-chip>
+        <v-chip color="primary"> Default </v-chip>
+        <v-chip color="primary" size="large"> large </v-chip>
+        <v-chip color="primary" size="x-large"> x-large </v-chip>
+    </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsActivator.vue b/src/components/ui-components/dialogs/DialogsActivator.vue
new file mode 100644
index 0000000..8997c21
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsActivator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dialog = ref(false);
+</script>
+
+<template>
+  <div class="text-center mt-4 mt-sm-0">
+    <v-btn color="primary" class="w-100" flat>
+      Open Simple Dialog
+      <v-dialog v-model="dialog" activator="parent"  class="dialog-mw">
+        <v-card>
+          <v-card-text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="primary"  @click="dialog = false" variant="tonal"
+              >Close Dialog</v-btn
+            >
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-btn>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsForm.vue b/src/components/ui-components/dialogs/DialogsForm.vue
new file mode 100644
index 0000000..f0654f9
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsForm.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialog = ref(false);
+</script>
+
+<template>
+  <!-- ----------------------------------------------------------------------------- -->
+  <!-- Form -->
+  <!-- ----------------------------------------------------------------------------- -->
+  <div class="text-center">
+    <v-dialog v-model="dialog" persistent  class="dialog-mw">
+      <template v-slot:activator="{ props }">
+        <v-btn color="warning" class="w-100" v-bind="props" flat> Open Form Dialog </v-btn>
+      </template>
+      <v-card style="height: 400px" class="overflow-auto">
+        <v-container>
+        <v-card-title class="pa-5">
+          <span class="text-h5">User Profile</span>
+        </v-card-title>
+        <v-card-text>
+          
+            <v-row>
+              <v-col cols="12" sm="6" md="4">
+                <v-text-field label="Legal first name*" required></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal middle name"
+                  hint="example of helper text only on focus"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal last name*"
+                  hint="example of persistent helper text"
+                  persistent-hint
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field label="Email*" required></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  label="Password*"
+                  type="password"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6">
+                <v-select
+                  :items="['0-17', '18-29', '30-54', '54+']"
+                  label="Age*"
+                  required
+                ></v-select>
+              </v-col>
+              <v-col cols="12" sm="6">
+                <v-autocomplete
+                  :items="[
+                    'Skiing',
+                    'Ice hockey',
+                    'Soccer',
+                    'Basketball',
+                    'Hockey',
+                    'Reading',
+                    'Writing',
+                    'Coding',
+                    'Basejump',
+                  ]"
+                  label="Interests"
+                  multiple
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+         
+          <small>*indicates required field</small>
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="error"  @click="dialog = false" variant="tonal" flat>
+            Close
+          </v-btn>
+          <v-btn color="success"  @click="dialog = false" variant="tonal" flat>
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-container>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsFullscreen.vue b/src/components/ui-components/dialogs/DialogsFullscreen.vue
new file mode 100644
index 0000000..46e1651
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsFullscreen.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import {XIcon } from "vue-tabler-icons"
+const dialog = ref(false);
+const notifications = ref(false);
+const sound = ref(true);
+const widgets = ref(false);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-dialog
+      v-model="dialog"
+      fullscreen
+      :scrim="false"
+      transition="dialog-bottom-transition"
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn color="error" class="w-100" dark v-bind="props" flat> Open Fullscreen Dialog </v-btn>
+      </template>
+      <v-card>
+        <v-toolbar dark color="primary" style="flex: unset">
+          <v-btn icon color="inherit" @click="dialog = false" flat>
+            <XIcon  width="20" />
+          </v-btn>
+          <v-toolbar-title>Settings</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-toolbar-items>
+            <v-btn dark variant="text" @click="dialog = false" flat> Save </v-btn>
+          </v-toolbar-items>
+        </v-toolbar>
+        <v-card-item>
+          <v-list lines="two" subheader>
+            User Controls
+            <v-list-item
+              title="Content filtering"
+              subtitle="Set the content filtering level to restrict apps that can be downloaded"
+            ></v-list-item>
+            <v-list-item
+              title="Password"
+              subtitle="Require password for purchase or use password to restrict purchase"
+            ></v-list-item>
+          </v-list>
+          <v-divider></v-divider>
+          <v-list lines="two" subheader>
+            General
+            <v-list-item
+              title="Notifications"
+              subtitle="Notify me about updates to apps or games that I downloaded"
+            >
+              <template v-slot:prepend>
+                <v-checkbox v-model="notifications"></v-checkbox>
+              </template>
+            </v-list-item>
+            <v-list-item
+              title="Sound"
+              subtitle="Auto-update apps at any time. Data charges may apply"
+            >
+              <template v-slot:prepend>
+                <v-checkbox v-model="sound"></v-checkbox>
+              </template>
+            </v-list-item>
+            <v-list-item
+              title="Auto-add widgets"
+              subtitle="Automatically add home screen widgets"
+            >
+              <template v-slot:prepend>
+                <v-checkbox v-model="widgets"></v-checkbox>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-card-item>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsModel.vue b/src/components/ui-components/dialogs/DialogsModel.vue
new file mode 100644
index 0000000..75097a4
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsModel.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialog = ref(false);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-btn color="secondary" class="w-100" @click="dialog = true" flat> Open Dialog </v-btn>
+    <v-dialog v-model="dialog" class="dialog-mw">
+      <v-card>
+        <v-card-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="secondary"  @click="dialog = false" variant="tonal" 
+            >Close Dialog</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsNested.vue b/src/components/ui-components/dialogs/DialogsNested.vue
new file mode 100644
index 0000000..b1a1d08
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsNested.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialog = ref(false);
+const dialog2 = ref(false);
+const dialog3 = ref(false);
+const notifications = ref(false);
+const sound = ref(true);
+const widgets = ref(false);
+const items = ref([
+  {
+    title: "Click Me",
+  },
+  {
+    title: "Click Me",
+  },
+  {
+    title: "Click Me",
+  },
+  {
+    title: "Click Me 2",
+  },
+]);
+const select = ref([
+  { text: "State 1" },
+  { text: "State 2" },
+  { text: "State 3" },
+  { text: "State 4" },
+  { text: "State 5" },
+  { text: "State 6" },
+  { text: "State 7" },
+]);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-btn color="secondary" class=" w-100" @click="dialog = true" flat>
+      Open Dialog 1
+    </v-btn>
+    <v-dialog v-model="dialog" class="dialog-mw">
+      <v-card class="pa-6">
+        <v-card-title> Dialog 1 </v-card-title>
+        <v-card-text>
+          <v-btn color="primary" class="" @click="dialog2 = true" flat>
+            Open Dialog 2
+          </v-btn>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="error" variant="tonal" @click="dialog = false" flat> Close </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialog2" class="dialog-mw">
+      <v-card class="pa-6">
+        <v-card-title> Dialog 2 </v-card-title>
+        <v-card-text>
+          <v-btn color="secondary" @click="dialog3 = !dialog3" flat>
+            Open Dialog 3
+          </v-btn>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="error" variant="tonal" @click="dialog2 = false" flat> Close </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialog3" class="dialog-mw">
+      <v-card class="pa-6">
+        <v-card-title>
+          <span>Dialog 3</span>
+        </v-card-title>
+        <v-card-actions>
+          <v-btn color="error" variant="tonal" @click="dialog3 = false" flat> Close </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsPersistent.vue b/src/components/ui-components/dialogs/DialogsPersistent.vue
new file mode 100644
index 0000000..1a7dff7
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsPersistent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialog = ref(false);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" persistent class="dialog-mw">
+      <template v-slot:activator="{ props }">
+        <v-btn color="primary" class="w-100" v-bind="props" flat> Open Dialog </v-btn>
+      </template>
+      <v-card class="pa-6">
+        <v-card-title class="text-h5">
+          Use Google's location service?
+        </v-card-title>
+        <v-card-text
+          >Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.</v-card-text
+        >
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="error" variant="tonal" @click="dialog = false" flat>
+            Disagree
+          </v-btn>
+          <v-btn color="success" variant="tonal" @click="dialog = false" flat>
+            Agree
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsScrollable.vue b/src/components/ui-components/dialogs/DialogsScrollable.vue
new file mode 100644
index 0000000..98d253b
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsScrollable.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialogm1 = ref("");
+const dialog = ref(false);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" scrollable class="dialog-mw">
+      <template v-slot:activator="{ props }">
+        <v-btn color="success" class="w-100" v-bind="props" flat> Open  Scrolling Dialog </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>Select Country</v-card-title>
+        <v-divider></v-divider>
+        <v-card-text style="height: 300px" class="overflow-auto">
+          <v-radio-group v-model="dialogm1" column>
+            <v-radio label="Bahamas, The" value="bahamas"></v-radio>
+            <v-radio label="Bahrain" value="bahrain"></v-radio>
+            <v-radio label="Bangladesh" value="bangladesh"></v-radio>
+            <v-radio label="Barbados" value="barbados"></v-radio>
+            <v-radio label="Belarus" value="belarus"></v-radio>
+            <v-radio label="Belgium" value="belgium"></v-radio>
+            <v-radio label="Belize" value="belize"></v-radio>
+            <v-radio label="Benin" value="benin"></v-radio>
+            <v-radio label="Bhutan" value="bhutan"></v-radio>
+            <v-radio label="Bolivia" value="bolivia"></v-radio>
+            <v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
+            <v-radio label="Botswana" value="botswana"></v-radio>
+            <v-radio label="Brazil" value="brazil"></v-radio>
+            <v-radio label="Brunei" value="brunei"></v-radio>
+            <v-radio label="Bulgaria" value="bulgaria"></v-radio>
+            <v-radio label="Burkina Faso" value="burkina"></v-radio>
+            <v-radio label="Burma" value="burma"></v-radio>
+            <v-radio label="Burundi" value="burundi"></v-radio>
+          </v-radio-group>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-btn color="error" variant="tonal" @click="dialog = false">
+            Close
+          </v-btn>
+          <v-btn color="success" variant="tonal" @click="dialog = false">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/dialogs/DialogsTransitions.vue b/src/components/ui-components/dialogs/DialogsTransitions.vue
new file mode 100644
index 0000000..c94baa0
--- /dev/null
+++ b/src/components/ui-components/dialogs/DialogsTransitions.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const dialog = ref(false);
+</script>
+
+<template>
+  <div class="text-center">
+    <v-dialog transition="dialog-bottom-transition" class="dialog-mw">
+      <template v-slot:activator="{ props }">
+        <v-btn color="success" class="w-100" v-bind="props" flat>Open Transition Dialog</v-btn>
+      </template>
+      <template v-slot:default="{ isActive }">
+        <v-card>
+          <v-toolbar color="primary" class="px-4">Opening from the bottom</v-toolbar>
+          <v-card-item>
+            <div class="text-h2 pa-12">Hello world!</div>
+          </v-card-item>
+          <v-card-actions class="justify-end">
+            <v-btn variant="tonal" @click="isActive.value = false" flat>Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+  </div>
+</template>
diff --git a/src/components/ui-components/expansionpanel/Advance.vue b/src/components/ui-components/expansionpanel/Advance.vue
new file mode 100644
index 0000000..eea9f73
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/Advance.vue
@@ -0,0 +1,65 @@
+<template>
+    <v-expansion-panels>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title>
+                <v-row no-gutters>
+                    <v-col cols="12" md="5"  class="d-flex justify-start">
+                        <h6 class="text-h6">General settings</h6>
+                    </v-col>
+                    <v-col cols="12" md="6"  class="d-flex justify-start  mt-md-0 mt-3">
+                        <h6 class="text-subtitle-1">i am an accordion</h6>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
+            </v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title>
+                <v-row no-gutters>
+                    <v-col cols="12" md="5" class="d-flex justify-start">
+                        <h6 class="text-h6">Users</h6>
+                    </v-col>
+                    <v-col cols="12" md="6" class="d-flex justify-start mt-md-0 mt-3">
+                        <h6 class="text-subtitle-1">You are currently not an owner</h6>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
+            </v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title>
+                <v-row no-gutters>
+                    <v-col cols="12" md="5" class="d-flex justify-start">
+                        <h6 class="text-h6">Advance Settings</h6>
+                    </v-col>
+                    <v-col cols="12" md="6" class="d-flex justify-start  mt-md-0 mt-3">
+                        <h6 class="text-subtitle-1">Filtering has been entirely disabled for whole web server</h6>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
+            </v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title>
+                <v-row no-gutters>
+                    <v-col cols="10" class="d-flex justify-start mt-md-0 mt-3">
+                        <h6 class="text-h6">Personal data</h6>
+                    </v-col>
+                </v-row>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
+            </v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
\ No newline at end of file
diff --git a/src/components/ui-components/expansionpanel/Basic.vue b/src/components/ui-components/expansionpanel/Basic.vue
new file mode 100644
index 0000000..9efc39b
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/Basic.vue
@@ -0,0 +1,19 @@
+<template>
+    <v-expansion-panels>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+         <v-divider></v-divider>       
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+        <v-divider></v-divider>
+        <v-expansion-panel elevation="10" >
+            <v-expansion-panel-title  class="text-h6">Accordion 3</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+        <v-divider></v-divider>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/ui-components/expansionpanel/CustomizedIcon.vue b/src/components/ui-components/expansionpanel/CustomizedIcon.vue
new file mode 100644
index 0000000..610b53d
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/CustomizedIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+</script>
+<template>
+    <v-expansion-panels>
+        <v-expansion-panel elevation="10">
+        <v-expansion-panel-title expand-icon="mdi-plus" collapse-icon="mdi-minus" class="text-h6">
+          Accordion 1
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </v-expansion-panel-text>
+        <v-divider></v-divider>
+      </v-expansion-panel>
+
+      <v-expansion-panel elevation="10">
+        <v-expansion-panel-title class="text-h6">
+            Accordion 2
+          <template v-slot:actions="{ expanded }">
+            <v-icon :color="!expanded ? 'teal' : ''" :icon="expanded ? 'mdi-pencil' : 'mdi-check'"></v-icon>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </v-expansion-panel-text>
+        <v-divider></v-divider>
+      </v-expansion-panel>
+
+      <v-expansion-panel elevation="10">
+        <v-expansion-panel-title disable-icon-rotate class="text-h6">
+            Accordion 3
+          <template v-slot:actions>
+            <v-icon color="primary" icon="mdi-alert-circle">
+            </v-icon>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </v-expansion-panel-text>
+        <v-divider></v-divider>
+      </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/ui-components/expansionpanel/DefaultExpand.vue b/src/components/ui-components/expansionpanel/DefaultExpand.vue
new file mode 100644
index 0000000..ba616f1
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/DefaultExpand.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const panel = ref([0]);
+</script>
+<template>
+    <v-expansion-panels v-model="panel">
+        <v-expansion-panel elevation="10" >
+            <v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+         <v-divider></v-divider>       
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+        <v-divider></v-divider>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title  class="text-h6">Accordion 3</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+        </v-expansion-panel>
+        
+    </v-expansion-panels>
+</template>
diff --git a/src/components/ui-components/expansionpanel/Inset.vue b/src/components/ui-components/expansionpanel/Inset.vue
new file mode 100644
index 0000000..d35faa7
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/Inset.vue
@@ -0,0 +1,19 @@
+<template>
+    <v-expansion-panels variant="inset">
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>       
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10" >
+            <v-expansion-panel-title  class="text-h6">Accordion 3</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/ui-components/expansionpanel/Popout.vue b/src/components/ui-components/expansionpanel/Popout.vue
new file mode 100644
index 0000000..f706763
--- /dev/null
+++ b/src/components/ui-components/expansionpanel/Popout.vue
@@ -0,0 +1,19 @@
+<template>
+    <v-expansion-panels variant="popout">
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 1</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10">
+            <v-expansion-panel-title class="text-h6">Accordion 2</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+        <v-expansion-panel elevation="10" >
+            <v-expansion-panel-title  class="text-h6">Accordion 3</v-expansion-panel-title>
+            <v-expansion-panel-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.</v-expansion-panel-text>
+            <v-divider></v-divider>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
diff --git a/src/components/ui-components/list/CustomAlignList.vue b/src/components/ui-components/list/CustomAlignList.vue
new file mode 100644
index 0000000..6f36f14
--- /dev/null
+++ b/src/components/ui-components/list/CustomAlignList.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import {ChevronUpIcon} from 'vue-tabler-icons';
+import {ChevronDownIcon} from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const component = props.icon;
+// custom list data
+const customs = shallowRef([
+    {
+        title: 'Bajaj Finsery',
+        profit: true,
+        percent: '10',
+        price: '1839.00'
+    },
+    {
+        title: 'TTML',
+        profit: false,
+        percent: '10',
+        price: '100.00'
+    },
+    {
+        title: 'Reliance',
+        profit: true,
+        percent: '10',
+        price: '200.00'
+    },
+    {
+        title: 'TTML',
+        profit: false,
+        percent: '10',
+        price: '189.00'
+    }
+]);
+</script>
+<template>
+    <v-list two-lines>
+        <template v-for="(custom, i) in customs" :key="i">
+            <v-list-item color="primary" class="py-3">
+                <v-list-item-title class="text-subtitle-1">{{ custom.title }}</v-list-item-title>
+                <v-list-item-subtitle v-if="custom.profit" class="text-subtitle-2 text-success text-high-emphasis"
+                    >{{ custom.percent }}% Profit</v-list-item-subtitle
+                >
+                <v-list-item-subtitle v-else class="text-subtitle-2 text-error "
+                    >{{ custom.percent }}% Loss</v-list-item-subtitle
+                >
+                <template v-slot:append>
+                    <v-list-item-subtitle class="text-subtitle-1 text-high-emphasis mr-3"> ${{ custom.price }}</v-list-item-subtitle>
+                    <v-chip color="success" label size="x-small" v-if="custom.profit">
+                        <ChevronUpIcon size="17" stroke-width="1.5" />
+                    </v-chip>
+                    <v-chip color="error" label size="x-small" v-else>
+                        <ChevronDownIcon size="17" stroke-width="1.5" />
+                    </v-chip>
+                </template>
+            </v-list-item>
+            <v-divider></v-divider>
+        </template>
+    </v-list>
+</template>
diff --git a/src/components/ui-components/list/DisabledList.vue b/src/components/ui-components/list/DisabledList.vue
new file mode 100644
index 0000000..96fdfba
--- /dev/null
+++ b/src/components/ui-components/list/DisabledList.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const component = props.icon;
+// List 1,3 Data
+const list1 = shallowRef([
+    {
+        name: 'Sample Page',
+        icon: AppsIcon,
+        id: 1,
+        link: '/basic/list'
+    },
+    {
+        name: 'Elements',
+        icon: CircleDotIcon,
+        id: 2,
+        link: ''
+    },
+    {
+        name: 'Page Layouts',
+        icon: FolderIcon,
+        id: 3,
+        link: ''
+    },
+
+]);
+
+</script>
+<template>
+    
+    <v-list disabled>
+        <v-card variant="outlined" class="py-2">
+        <v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
+            <template v-slot:prepend>
+                <component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title v-text="list.name"></v-list-item-title>
+        </v-list-item>
+    </v-card>
+    </v-list>
+
+</template>
diff --git a/src/components/ui-components/list/FolderList.vue b/src/components/ui-components/list/FolderList.vue
new file mode 100644
index 0000000..8da94fe
--- /dev/null
+++ b/src/components/ui-components/list/FolderList.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { FolderIcon,BriefcaseIcon,BeachIcon } from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const folders = shallowRef([
+    {
+        subtitle: 'Jan 9, 2022',
+        title: 'Photos',
+        icon:FolderIcon,
+    },
+    {
+        subtitle: 'Jan 17, 2022',
+        title: 'Works',
+        icon:BriefcaseIcon
+    },
+    {
+        subtitle: 'Jan 18, 2022',
+        title: 'Vacation',
+        icon:BeachIcon
+    }
+]);
+</script>
+<template>
+    <v-list lines="two">
+        <v-card variant="outlined">
+        <v-list-item v-for="folder in folders" :key="folder.title" :subtitle="folder.subtitle">
+            <template v-slot:prepend>
+                <v-avatar color="grey400">
+                    <component :is="folder.icon" size="20" stroke-width="1.5"  />
+                </v-avatar>
+            </template>
+
+            <template v-slot:title>
+                <h5 class="text-subtitle-1">{{ folder.title }}</h5>
+            </template>
+            <template v-slot:subtitle>
+                <span class="text-subtitle-2">{{ folder.subtitle }}</span>
+            </template>
+        </v-list-item>
+    </v-card>
+    </v-list>
+</template>
diff --git a/src/components/ui-components/list/NestedList.vue b/src/components/ui-components/list/NestedList.vue
new file mode 100644
index 0000000..6792bc8
--- /dev/null
+++ b/src/components/ui-components/list/NestedList.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { CircleDotIcon, DragDropIcon, InboxIcon, MailIcon, SendIcon } from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+// List 2 data
+const open = shallowRef(['Users']);
+</script>
+<template>
+    <v-list >
+        <v-card variant="outlined" class="py-2">
+            <div class="text-subttile-2 pl-4 py-3">Nested List Items</div>
+        <v-list-item  value="" class="mb-2" color="primary">
+            <template v-slot:prepend>
+                <SendIcon size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title >Sent Mail</v-list-item-title>
+        </v-list-item>  
+        <v-list-item  value="" class="mb-2" color="primary">
+            <template v-slot:prepend>
+                <MailIcon size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title >Drafts</v-list-item-title>
+        </v-list-item>  
+        <v-list-group value="Users">
+            <template v-slot:activator="{ props }">
+                <v-list-item v-bind="props" rounded="md" color="primary" title="inbox">
+                    <template v-slot:prepend>
+                        <InboxIcon size="20" stroke-width="1.5" class="mr-2" />
+                    </template>
+                </v-list-item>
+            </template>
+            <v-list-item value="Started" color="primary" title="Started" rounded="md">
+                <template v-slot:prepend>
+                    <CircleDotIcon size="15" stroke-width="1.5" class="mr-2" />
+                </template>
+            </v-list-item>
+        </v-list-group>
+        </v-card>
+    </v-list>
+</template>
diff --git a/src/components/ui-components/list/RoundedList.vue b/src/components/ui-components/list/RoundedList.vue
new file mode 100644
index 0000000..6369359
--- /dev/null
+++ b/src/components/ui-components/list/RoundedList.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import {AppsIcon} from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const component = props.icon;
+// List 1,3 Data
+const list1 = shallowRef([
+    {
+        name: 'Sample Page',
+        icon: AppsIcon,
+        id: 1,
+        link: '/'
+    },
+    {
+        name: 'Elements',
+        icon: AppsIcon,
+        id: 2,
+        link: ''
+    },
+    {
+        name: 'Page Layouts',
+        icon: AppsIcon,
+        id: 3,
+        link: ''
+    }
+]);
+</script>
+<template>
+    <v-list>
+        <v-list-item class="mb-1" v-for="(list, i) in list1" :value="list" rounded="xl" :key="i" color="primary">
+            <template v-slot:prepend>
+                <component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title v-text="list.name"></v-list-item-title>
+        </v-list-item>
+    </v-list>
+</template>
diff --git a/src/components/ui-components/list/ScrollableList.vue b/src/components/ui-components/list/ScrollableList.vue
new file mode 100644
index 0000000..3662ce9
--- /dev/null
+++ b/src/components/ui-components/list/ScrollableList.vue
@@ -0,0 +1,9 @@
+<template>
+    <perfect-scrollbar style="max-height: 250px">
+        <v-list>
+            <v-list-item v-for="(n, index) in 200" :value="n" :key="index" color="primary">
+                <v-list-item-title>Item {{ n }}</v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </perfect-scrollbar>
+</template>
diff --git a/src/components/ui-components/list/SimpleList.vue b/src/components/ui-components/list/SimpleList.vue
new file mode 100644
index 0000000..912d713
--- /dev/null
+++ b/src/components/ui-components/list/SimpleList.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const component = props.icon;
+// List 1,3 Data
+const list1 = shallowRef([
+    {
+        name: 'Sample Page',
+        icon: AppsIcon,
+        id: 1,
+        link: '/basic/list'
+    },
+    {
+        name: 'Elements',
+        icon: CircleDotIcon,
+        id: 2,
+        link: ''
+    },
+    {
+        name: 'Page Layouts',
+        icon: FolderIcon,
+        id: 3,
+        link: ''
+    },
+    {
+        name: 'Components',
+        icon: DragDropIcon,
+        id: 4,
+        link: ''
+    }
+]);
+
+</script>
+<template>
+    
+    <v-list>
+        <v-card variant="outlined" class="py-2">
+        <v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
+            <template v-slot:prepend>
+                <component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title v-text="list.name"></v-list-item-title>
+        </v-list-item>
+    </v-card>
+    </v-list>
+
+</template>
diff --git a/src/components/ui-components/list/SwitchList.vue b/src/components/ui-components/list/SwitchList.vue
new file mode 100644
index 0000000..b9363f5
--- /dev/null
+++ b/src/components/ui-components/list/SwitchList.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { WifiIcon,BluetoothIcon } from 'vue-tabler-icons';
+// List 4 data
+const swt1 = shallowRef(true);
+const swt2 = shallowRef(false);
+</script>
+<template>
+
+    <v-list >
+        <v-card variant="outlined" class="py-2">
+            <v-list-item  value="wifi" class="mb-2  "  color="primary">
+                <div class="d-flex align-center">
+                    <WifiIcon size="22" stroke-width="1.5" class="mr-2" />
+                    <div class="ml-3">Wi-Fi</div>
+                    <div class="ml-auto"><v-switch v-model="swt1" inset color="primary"  hide-details></v-switch></div>
+                </div>
+
+            </v-list-item>  
+            <v-list-item  value="bluetooth" class="mb-2  "  color="primary">
+                <div class="d-flex align-center">
+                    <BluetoothIcon size="22" stroke-width="1.5" class="mr-2" />
+                    <div class="ml-3">Bluetooth</div>
+                    <div class="ml-auto"><v-switch v-model="swt2" inset color="primary"  hide-details></v-switch></div>
+                </div>
+
+            </v-list-item>  
+        </v-card>
+    </v-list>
+
+
+    <!-- <div class="rounded-sm px-5 py-3 my-3">
+        <div class="d-flex align-center">
+            <WifiIcon size="20" stroke-width="1.5"/>
+
+        </div>
+        <v-switch v-model="swt1" inset label="Start DND Mode" color="primary" hide-details></v-switch>
+        <v-switch v-model="swt2" inset  label="Allow Notifications" color="primary" hide-details> </v-switch>
+    </div> -->
+</template>
diff --git a/src/components/ui-components/menus/MenusActivatorTooltip.vue b/src/components/ui-components/menus/MenusActivatorTooltip.vue
new file mode 100644
index 0000000..e29c129
--- /dev/null
+++ b/src/components/ui-components/menus/MenusActivatorTooltip.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, mergeProps } from "vue";
+const items = ref([
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me 2" }
+]);
+mergeProps();
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu>
+      <template v-slot:activator="{ props: menu }">
+        <v-tooltip anchor="top">
+          <template v-slot:activator="{ props: tooltip }">
+            <v-btn color="primary" v-bind="mergeProps(menu, tooltip)" flat>
+              Dropdown w/ Tooltip
+            </v-btn>
+          </template>
+          <span>I'm A Tooltip</span>
+        </v-tooltip>
+      </template>
+      <v-list>
+        <v-list-item v-for="(item, index) in items" :key="index">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
diff --git a/src/components/ui-components/menus/MenusAnchor.vue b/src/components/ui-components/menus/MenusAnchor.vue
new file mode 100644
index 0000000..957f638
--- /dev/null
+++ b/src/components/ui-components/menus/MenusAnchor.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const items = ref([{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }]);
+
+const locations = ref(['top', 'bottom', 'start', 'end', 'center']);
+const location = ref();
+</script>
+
+<template>
+    <div class="text-center mt-4">
+        <v-select v-model="location" :items="locations" label="Location"></v-select>
+        <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+                <v-btn color="primary" dark v-bind="props" flat> Dropdown </v-btn>
+            </template>
+
+            <v-list>
+                <v-list-item v-for="(item, index) in items" :key="index">
+                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+    </div>
+</template>
diff --git a/src/components/ui-components/menus/MenusHover.vue b/src/components/ui-components/menus/MenusHover.vue
new file mode 100644
index 0000000..f76fdfd
--- /dev/null
+++ b/src/components/ui-components/menus/MenusHover.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const items = ref([
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me 2" },
+]);
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu open-on-hover>
+      <template v-slot:activator="{ props }">
+        <v-btn color="secondary" v-bind="props" flat> Dropdown </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item v-for="(item, index) in items" :key="index">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
diff --git a/src/components/ui-components/menus/MenusPopover.vue b/src/components/ui-components/menus/MenusPopover.vue
new file mode 100644
index 0000000..5612cc3
--- /dev/null
+++ b/src/components/ui-components/menus/MenusPopover.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const fav = ref(true);
+const menu = ref(false);
+const message = ref(false);
+const hints = ref(true);
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu v-model="menu" :close-on-content-click="false" anchor="top">
+      <template v-slot:activator="{ props }">
+        <v-btn color="secondary" v-bind="props" flat> Menu as Popover </v-btn>
+      </template>
+
+      <v-card min-width="300">
+        <v-list>
+          <v-list-item
+            prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
+            title="John Leider"
+            subtitle="Founder of Vuetify"
+          >
+            <template v-slot:append>
+              <v-btn
+                variant="text"
+                :class="fav ? 'text-primary' : ''"
+                icon="mdi-heart"
+                @click="fav = !fav"
+              flat></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-item >
+            <v-switch
+              v-model="message"
+              color="primary"
+              label="Enable messages"
+              hide-details
+              class="pl-2"
+            ></v-switch>
+          </v-list-item>
+
+          <v-list-item>
+            <v-switch
+              v-model="hints"
+              color="primary"
+              label="Enable hints"
+              hide-details
+              class="pl-2"
+            ></v-switch>
+          </v-list-item>
+        </v-list>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn variant="text" @click="menu = false" flat> Cancel </v-btn>
+          <v-btn color="primary" variant="text" @click="menu = false" flat> Save </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
diff --git a/src/components/ui-components/ratting/BasicRatting.vue b/src/components/ui-components/ratting/BasicRatting.vue
new file mode 100644
index 0000000..1fcd34d
--- /dev/null
+++ b/src/components/ui-components/ratting/BasicRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating" density="compact" color="warning"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/ClearableRatting.vue b/src/components/ui-components/ratting/ClearableRatting.vue
new file mode 100644
index 0000000..9809633
--- /dev/null
+++ b/src/components/ui-components/ratting/ClearableRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating3 = ref(3);
+</script>
+<template>
+    <div >
+        <v-rating v-model="rating3" clearable density="compact" color="warning"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/HalfRatting.vue b/src/components/ui-components/ratting/HalfRatting.vue
new file mode 100644
index 0000000..1a5d40c
--- /dev/null
+++ b/src/components/ui-components/ratting/HalfRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating2 = ref(2.5);
+</script>
+<template>
+    <div>
+    <v-rating v-model="rating2"  half-increments density="compact" color="warning"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/HoverRatting.vue b/src/components/ui-components/ratting/HoverRatting.vue
new file mode 100644
index 0000000..c71bd86
--- /dev/null
+++ b/src/components/ui-components/ratting/HoverRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating5 = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating5" color="warning" hover density="compact"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/IconsRatting.vue b/src/components/ui-components/ratting/IconsRatting.vue
new file mode 100644
index 0000000..fc22037
--- /dev/null
+++ b/src/components/ui-components/ratting/IconsRatting.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating7 = ref(3.5);
+</script>
+<template>
+    <div >
+        <v-rating
+            class="d-block mb-4"
+            v-model="rating7"
+            color="error"
+            empty-icon="mdi-heart-outline"
+            full-icon="mdi-heart"
+            half-icon="mdi-heart-half"
+            half-increments density="compact"
+            hover
+        ></v-rating>
+        <v-rating
+            class="d-block mb-4"
+            v-model="rating7"
+            color="primary"
+            empty-icon="mdi-circle-outline"
+            full-icon="mdi-circle"
+            half-icon="mdi-circle-half"
+            half-increments density="compact"
+            hover
+        ></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/LabelRatting.vue b/src/components/ui-components/ratting/LabelRatting.vue
new file mode 100644
index 0000000..68c83c0
--- /dev/null
+++ b/src/components/ui-components/ratting/LabelRatting.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating6 = ref(3);
+const rating7 = ref(2);
+</script>
+<template>
+    <div >
+        <v-rating
+            v-model="rating6"
+            :item-labels="['sad', '', '', '', 'happy']"
+            item-label-position="top"
+            color="warning" density="compact"
+            hover
+        ></v-rating>
+        <v-rating class="mb-0 d-block"
+            v-model="rating6"
+            color="warning" density="compact"
+            hover
+        ></v-rating>
+
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/LengthRatting.vue b/src/components/ui-components/ratting/LengthRatting.vue
new file mode 100644
index 0000000..e78da85
--- /dev/null
+++ b/src/components/ui-components/ratting/LengthRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating = ref(3);
+</script>
+<template>
+    <div>
+        <v-rating v-model="rating" length="10" density="compact" color="warning"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/ReadOnlyRatting.vue b/src/components/ui-components/ratting/ReadOnlyRatting.vue
new file mode 100644
index 0000000..5c3fba7
--- /dev/null
+++ b/src/components/ui-components/ratting/ReadOnlyRatting.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const rating3 = ref(2);
+</script>
+<template>
+    <div >
+        <v-rating v-model="rating3" readonly   density="compact" color="warning"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/ratting/SizeRatting.vue b/src/components/ui-components/ratting/SizeRatting.vue
new file mode 100644
index 0000000..b328710
--- /dev/null
+++ b/src/components/ui-components/ratting/SizeRatting.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <v-rating class="d-block mb-2" color="warning" density="compact" value="3" size="x-small"></v-rating>
+        <v-rating class="d-block ml-n1" color="warning" density="compact" value="3" size="small"></v-rating>
+        <v-rating class="d-block ml-n2" color="warning" density="compact" value="3" size="large"></v-rating>
+    </div>
+</template>
diff --git a/src/components/ui-components/tabs/AlignCenterTabs.vue b/src/components/ui-components/tabs/AlignCenterTabs.vue
new file mode 100644
index 0000000..70b0aad
--- /dev/null
+++ b/src/components/ui-components/tabs/AlignCenterTabs.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import img1 from '@/assets/images/blog/blog-img1.jpg';
+import img2 from '@/assets/images/blog/blog-img2.jpg';
+import img3 from '@/assets/images/blog/blog-img3.jpg';
+import img4 from '@/assets/images/blog/blog-img4.jpg';
+import img5 from '@/assets/images/blog/blog-img5.jpg';
+
+import img6 from '@/assets/images/products/s3.jpg';
+import img7 from '@/assets/images/products/s4.jpg';
+import img8 from '@/assets/images/products/s5.jpg';
+import img9 from '@/assets/images/products/s6.jpg';
+import img10 from '@/assets/images/products/s7.jpg';
+import img11 from '@/assets/images/products/s8.jpg';
+import img12 from '@/assets/images/products/s9.jpg';
+import img13 from '@/assets/images/products/s10.jpg';
+import img14 from '@/assets/images/products/s11.jpg';
+import img15 from '@/assets/images/products/s12.jpg';
+
+const tab = ref(null);
+const tab1 = ref(
+  [
+    {img:  img1},
+    {img:  img2},
+    {img:  img3},
+    {img:  img4},
+    {img:  img5},
+    {img:  img1},
+  ]
+)
+const tab2 = ref(
+  [
+    {img:  img6},
+    {img:  img7},
+    {img:  img8},
+    {img:  img9},
+    {img:  img10},
+    {img:  img11},
+  ]
+)
+  const tab3 = ref(
+  [
+    {img:  img12},
+    {img:  img13},
+    {img:  img14},
+    {img:  img10},
+    {img:  img15},
+    {img:  img11},
+  ]
+)
+</script>
+<template>
+    <v-card elevation="0">
+      <v-tabs
+        v-model="tab"
+        color="primary"
+        align-tabs="center"
+      >
+        <v-tab value="1">Landscape</v-tab>
+        <v-tab value="2">Products</v-tab>
+        <v-tab value="3">Abstract</v-tab>
+      </v-tabs>
+
+      <v-card-text class="rounded-md pa-0 mt-6">
+        <v-window v-model="tab">
+            <v-window-item value="1">
+                  <v-row>
+                    <v-col v-for="item in tab1" :key="item.img"  cols="12" md="4" sm="6">
+                        <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+            <v-window-item value="2">
+                  <v-row>
+                    <v-col v-for="item in tab2" :key="item.img"  cols="12" md="4" sm="6">
+                      <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+            <v-window-item value="3">
+                  <v-row>
+                    <v-col v-for="item in tab3" :key="item.img"  cols="12" md="4" sm="6">
+                      <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+    </v-card>
+  </template>
\ No newline at end of file
diff --git a/src/components/ui-components/tabs/AlignEndTabs.vue b/src/components/ui-components/tabs/AlignEndTabs.vue
new file mode 100644
index 0000000..8880cb0
--- /dev/null
+++ b/src/components/ui-components/tabs/AlignEndTabs.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import img1 from '@/assets/images/blog/blog-img1.jpg';
+import img2 from '@/assets/images/blog/blog-img2.jpg';
+import img3 from '@/assets/images/blog/blog-img3.jpg';
+import img4 from '@/assets/images/blog/blog-img4.jpg';
+import img5 from '@/assets/images/blog/blog-img5.jpg';
+
+import img6 from '@/assets/images/products/s3.jpg';
+import img7 from '@/assets/images/products/s4.jpg';
+import img8 from '@/assets/images/products/s5.jpg';
+import img9 from '@/assets/images/products/s6.jpg';
+import img10 from '@/assets/images/products/s7.jpg';
+import img11 from '@/assets/images/products/s8.jpg';
+import img12 from '@/assets/images/products/s9.jpg';
+import img13 from '@/assets/images/products/s10.jpg';
+import img14 from '@/assets/images/products/s11.jpg';
+import img15 from '@/assets/images/products/s12.jpg';
+
+const tab = ref(null);
+const tab1 = ref(
+  [
+    {img:  img1},
+    {img:  img2},
+    {img:  img3},
+    {img:  img4},
+    {img:  img5},
+    {img:  img1},
+  ]
+)
+const tab2 = ref(
+  [
+    {img:  img6},
+    {img:  img7},
+    {img:  img8},
+    {img:  img9},
+    {img:  img10},
+    {img:  img11},
+  ]
+)
+  const tab3 = ref(
+  [
+    {img:  img12},
+    {img:  img13},
+    {img:  img14},
+    {img:  img10},
+    {img:  img15},
+    {img:  img11},
+  ]
+)
+</script>
+<template>
+    <v-card elevation="0">
+      <v-tabs
+        v-model="tab"
+        color="primary"
+        align-tabs="end"
+      >
+        <v-tab value="1">Landscape</v-tab>
+        <v-tab value="2">Products</v-tab>
+        <v-tab value="3">Abstract</v-tab>
+      </v-tabs>
+
+      <v-card-text class="rounded-md pa-0 mt-6">
+        <v-window v-model="tab">
+            <v-window-item value="1">
+                  <v-row>
+                    <v-col v-for="item in tab1" :key="item.img"  cols="12" md="4" sm="6">
+                        <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+            <v-window-item value="2">
+                  <v-row>
+                    <v-col v-for="item in tab2" :key="item.img"  cols="12" md="4" sm="6">
+                      <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+            <v-window-item value="3">
+                  <v-row>
+                    <v-col v-for="item in tab3" :key="item.img"  cols="12" md="4" sm="6">
+                      <v-img :src="item.img" alt="tab" cover  class="w-100"  height="250"></v-img>
+                    </v-col>
+                  </v-row>
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+    </v-card>
+  </template>
\ No newline at end of file
diff --git a/src/components/ui-components/tabs/BasicTabs.vue b/src/components/ui-components/tabs/BasicTabs.vue
new file mode 100644
index 0000000..656bda9
--- /dev/null
+++ b/src/components/ui-components/tabs/BasicTabs.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const tab = ref(null);
+</script>
+<template>
+    <v-tabs v-model="tab" bg-color="primary">
+        <v-tab value="one">Item One</v-tab>
+        <v-tab value="two">Item Two</v-tab>
+        <v-tab value="three">Item Three</v-tab>
+    </v-tabs>
+    <v-divider></v-divider>
+    <v-card-text class="bg-grey100 mt-4 rounded-md">
+        <v-window v-model="tab">
+            <v-window-item value="one">
+               Item One
+            </v-window-item>
+            <v-window-item value="two">
+                Item Two
+            </v-window-item>
+            <v-window-item value="three">
+                 Item Three
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+</template>
diff --git a/src/components/ui-components/tabs/CenterTabs.vue b/src/components/ui-components/tabs/CenterTabs.vue
new file mode 100644
index 0000000..f0b2537
--- /dev/null
+++ b/src/components/ui-components/tabs/CenterTabs.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
+const tab5 = ref(null);
+</script>
+<template>
+    <v-card elevation="0" >
+    <v-tabs
+      bg-color="primary"
+      center-active
+    >
+      <v-tab>One</v-tab>
+      <v-tab>Two</v-tab>
+      <v-tab>Three</v-tab>
+      <v-tab>Four</v-tab>
+      <v-tab>Five</v-tab>
+      <v-tab>Six</v-tab>
+      <v-tab>Seven</v-tab>
+      <v-tab>Eight</v-tab>
+      <v-tab>Nine</v-tab>
+      <v-tab>Ten</v-tab>
+      <v-tab>Eleven</v-tab>
+      <v-tab>Twelve</v-tab>
+      <v-tab>Thirteen</v-tab>
+      <v-tab>Fourteen</v-tab>
+    </v-tabs>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/src/components/ui-components/tabs/ColorTabs.vue b/src/components/ui-components/tabs/ColorTabs.vue
new file mode 100644
index 0000000..a7ca9b5
--- /dev/null
+++ b/src/components/ui-components/tabs/ColorTabs.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
+const tab6 = ref(null);
+</script>
+<template>
+    <v-tabs v-model="tab6">
+        <v-tab value="111111" color="secondary"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
+        <v-tab value="222222" color="warning"> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
+        <v-tab value="444444" color="primary"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
+    </v-tabs>
+    <v-card-text  class="bg-grey100 mt-4 rounded-md">
+        <v-window v-model="tab6">
+            <v-window-item value="111111">
+                item one
+            </v-window-item>
+            <v-window-item value="222222">
+                item two
+            </v-window-item>
+            <v-window-item value="444444">
+                item three
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+</template>
diff --git a/src/components/ui-components/tabs/CustomIcons.vue b/src/components/ui-components/tabs/CustomIcons.vue
new file mode 100644
index 0000000..1d6ed33
--- /dev/null
+++ b/src/components/ui-components/tabs/CustomIcons.vue
@@ -0,0 +1,19 @@
+
+
+<template>
+   <v-sheet elevation="0">
+     <v-tabs
+       bg-color="primary"
+       next-icon="mdi-arrow-right-bold-box-outline"
+       prev-icon="mdi-arrow-left-bold-box-outline"
+       show-arrows
+     >
+       <v-tab
+         v-for="i in 30"
+         :key="i"
+       >
+         Item {{ i }}
+       </v-tab>
+     </v-tabs>
+   </v-sheet>
+ </template>
\ No newline at end of file
diff --git a/src/components/ui-components/tabs/DisableTabs.vue b/src/components/ui-components/tabs/DisableTabs.vue
new file mode 100644
index 0000000..d3e987e
--- /dev/null
+++ b/src/components/ui-components/tabs/DisableTabs.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
+const tab4 = ref(null);
+</script>
+<template>
+    <v-tabs v-model="tab4" color="primary">
+        <v-tab value="1111"> <PhoneIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item One </v-tab>
+        <v-tab value="2222" disabled> <HeartIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Two </v-tab>
+        <v-tab value="4444"> <UserIcon stroke-width="1.5" width="20" class="v-icon--start" /> Item Three </v-tab>
+    </v-tabs>
+    <v-divider></v-divider>
+    <v-card-text class="bg-grey100 mt-4 rounded-md">
+        <v-window v-model="tab4">
+            <v-window-item value="1111">
+              item one
+            </v-window-item>
+            <v-window-item value="2222">
+               item two
+            </v-window-item>
+            <v-window-item value="4444">
+               item three
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+</template>
diff --git a/src/components/ui-components/tabs/IconTabs.vue b/src/components/ui-components/tabs/IconTabs.vue
new file mode 100644
index 0000000..3bf1550
--- /dev/null
+++ b/src/components/ui-components/tabs/IconTabs.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
+const tab3 = ref(null);
+</script>
+<template>
+    <v-tabs v-model="tab3" color="primary">
+        <v-tab value="111">
+            <PhoneIcon stroke-width="1.5" width="22" />
+        </v-tab>
+        <v-tab value="222">
+            <HeartIcon stroke-width="1.5" width="22" />
+        </v-tab>
+        <v-tab value="444">
+            <UserIcon stroke-width="1.5" width="22" />
+        </v-tab>
+    </v-tabs>
+    <v-divider></v-divider>
+    <v-card-text class="bg-grey100 mt-4 rounded-md">
+        <v-window v-model="tab3">
+            <v-window-item value="111">
+                Item One
+            </v-window-item>
+            <v-window-item value="222">
+               Item two
+            </v-window-item>
+            <v-window-item value="444">
+                Item three
+            </v-window-item>
+        </v-window>
+    </v-card-text>
+</template>
diff --git a/src/components/ui-components/tabs/IconsWithLabelTabs.vue b/src/components/ui-components/tabs/IconsWithLabelTabs.vue
new file mode 100644
index 0000000..e43d7c5
--- /dev/null
+++ b/src/components/ui-components/tabs/IconsWithLabelTabs.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, PhoneIcon, UserIcon } from "vue-tabler-icons";
+const tab = ref(null);
+</script>
+
+<template>
+    <v-card elevation="0">
+        <v-tabs v-model="tab" bg-color="primary"  stacked>
+            <v-tab value="1">
+                <PhoneIcon stroke-width="1.5" width="20" />
+                Recents
+            </v-tab>
+            <v-tab value="2">
+                <HeartIcon stroke-width="1.5" width="20" />
+                Favorites
+            </v-tab>
+            <v-tab value="3">
+                <UserIcon stroke-width="1.5" width="20" />
+                Nearby
+            </v-tab>
+        </v-tabs>
+        <v-card-text class="bg-grey100 rounded-md mt-4">
+            <v-window v-model="tab">
+                <v-window-item value="1">
+                    Item One
+                </v-window-item>
+                <v-window-item value="2">
+                    Item two
+                </v-window-item>
+                <v-window-item value="3">
+                    Item three
+                </v-window-item>
+            </v-window>
+        </v-card-text>
+    </v-card>
+</template>
diff --git a/src/components/ui-components/tooltip/IconTooltip.vue b/src/components/ui-components/tooltip/IconTooltip.vue
new file mode 100644
index 0000000..5590047
--- /dev/null
+++ b/src/components/ui-components/tooltip/IconTooltip.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, MoodSmileIcon, UserIcon } from "vue-tabler-icons";
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center">
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="primary" flat>
+            <UserIcon size="22"/>
+            <v-tooltip activator="parent" location="start">
+                    primary
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="secondary" flat>
+            <HeartIcon color="white" size="22" />
+            <v-tooltip activator="parent" location="top">
+                    secondary
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="warning" flat>
+            <MoodSmileIcon size="22" color="white"/>
+            <v-tooltip activator="parent" location="end">
+                    warning
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="error" flat>
+            <HeartIcon size="22"/>
+            <v-tooltip activator="parent" location="bottom">
+                    error
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+    </div>
+</template>
diff --git a/src/components/ui-components/tooltip/SimpleTooltip.vue b/src/components/ui-components/tooltip/SimpleTooltip.vue
new file mode 100644
index 0000000..94b8500
--- /dev/null
+++ b/src/components/ui-components/tooltip/SimpleTooltip.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="d-flex flex-column flex-sm-row gap-3 justify-center">
+        <v-btn  color="primary" flat>
+            Start
+            <v-tooltip activator="parent" location="start">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            End
+            <v-tooltip activator="parent" location="end">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            Top
+            <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            Bottom
+            <v-tooltip activator="parent" location="bottom">Tooltip</v-tooltip>
+        </v-btn>
+    </div>
+</template>
diff --git a/src/components/ui-components/tooltip/ToggleTolltip.vue b/src/components/ui-components/tooltip/ToggleTolltip.vue
new file mode 100644
index 0000000..35fcfcc
--- /dev/null
+++ b/src/components/ui-components/tooltip/ToggleTolltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const show = ref(false);    
+</script>
+<template>
+    <div class="d-flex">
+        <v-btn @click="show = !show" color="primary" flat>
+            {{ !show ? 'Show Tooltip' : 'Hide Tooltip' }}
+        </v-btn>
+        <v-tooltip v-model="show" top>
+            <template v-slot:activator="{ props }">
+                <v-btn icon v-bind="props" class="ml-6" color="primary" flat>
+                    <v-icon> mdi-cart </v-icon>
+                </v-btn>
+            </template>
+            <span>Programmatic tooltip</span>
+        </v-tooltip>
+    </div>
+</template>
diff --git a/src/components/widgets/banners/Banner2.vue b/src/components/widgets/banners/Banner2.vue
new file mode 100644
index 0000000..6e6d1ab
--- /dev/null
+++ b/src/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/src/components/widgets/banners/Banner3.vue b/src/components/widgets/banners/Banner3.vue
new file mode 100644
index 0000000..228756c
--- /dev/null
+++ b/src/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/src/components/widgets/banners/Banner4.vue b/src/components/widgets/banners/Banner4.vue
new file mode 100644
index 0000000..6b9e38c
--- /dev/null
+++ b/src/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/src/components/widgets/banners/Banner5.vue b/src/components/widgets/banners/Banner5.vue
new file mode 100644
index 0000000..7d06783
--- /dev/null
+++ b/src/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/src/components/widgets/banners/Banner6.vue b/src/components/widgets/banners/Banner6.vue
new file mode 100644
index 0000000..ac49316
--- /dev/null
+++ b/src/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/src/components/widgets/banners/WelcomCard.vue b/src/components/widgets/banners/WelcomCard.vue
new file mode 100644
index 0000000..8ebf62b
--- /dev/null
+++ b/src/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/src/components/widgets/cards/BlogCards.vue b/src/components/widgets/cards/BlogCards.vue
new file mode 100644
index 0000000..38aa560
--- /dev/null
+++ b/src/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/src/components/widgets/cards/FollowerCards.vue b/src/components/widgets/cards/FollowerCards.vue
new file mode 100644
index 0000000..b0e9eec
--- /dev/null
+++ b/src/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/src/components/widgets/cards/GiftCards.vue b/src/components/widgets/cards/GiftCards.vue
new file mode 100644
index 0000000..20f2fae
--- /dev/null
+++ b/src/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/src/components/widgets/cards/MusicCards.vue b/src/components/widgets/cards/MusicCards.vue
new file mode 100644
index 0000000..1a43c5a
--- /dev/null
+++ b/src/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/src/components/widgets/cards/PaymentGateways.vue b/src/components/widgets/cards/PaymentGateways.vue
new file mode 100644
index 0000000..9bac3a1
--- /dev/null
+++ b/src/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/src/components/widgets/cards/ProductCards.vue b/src/components/widgets/cards/ProductCards.vue
new file mode 100644
index 0000000..3d24a1e
--- /dev/null
+++ b/src/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/src/components/widgets/cards/ProfileCards.vue b/src/components/widgets/cards/ProfileCards.vue
new file mode 100644
index 0000000..29509ac
--- /dev/null
+++ b/src/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/src/components/widgets/cards/Settings.vue b/src/components/widgets/cards/Settings.vue
new file mode 100644
index 0000000..a273e98
--- /dev/null
+++ b/src/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/src/components/widgets/cards/UpcommingActivityCard.vue b/src/components/widgets/cards/UpcommingActivityCard.vue
new file mode 100644
index 0000000..d920edb
--- /dev/null
+++ b/src/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/src/components/widgets/cards/UserCards.vue b/src/components/widgets/cards/UserCards.vue
new file mode 100644
index 0000000..2010653
--- /dev/null
+++ b/src/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/src/components/widgets/charts/CurrentValue.vue b/src/components/widgets/charts/CurrentValue.vue
new file mode 100644
index 0000000..50ed435
--- /dev/null
+++ b/src/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/src/components/widgets/charts/Customer.vue b/src/components/widgets/charts/Customer.vue
new file mode 100644
index 0000000..93bdab8
--- /dev/null
+++ b/src/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/src/components/widgets/charts/Earned.vue b/src/components/widgets/charts/Earned.vue
new file mode 100644
index 0000000..3342ad9
--- /dev/null
+++ b/src/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/src/components/widgets/charts/Followers.vue b/src/components/widgets/charts/Followers.vue
new file mode 100644
index 0000000..5bc8403
--- /dev/null
+++ b/src/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/src/components/widgets/charts/MonthlyEarnings.vue b/src/components/widgets/charts/MonthlyEarnings.vue
new file mode 100644
index 0000000..ee0ebd9
--- /dev/null
+++ b/src/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/src/components/widgets/charts/MostVisited.vue b/src/components/widgets/charts/MostVisited.vue
new file mode 100644
index 0000000..b5458ad
--- /dev/null
+++ b/src/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/src/components/widgets/charts/PageImpression.vue b/src/components/widgets/charts/PageImpression.vue
new file mode 100644
index 0000000..d370b83
--- /dev/null
+++ b/src/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/src/components/widgets/charts/Projects.vue b/src/components/widgets/charts/Projects.vue
new file mode 100644
index 0000000..17131b0
--- /dev/null
+++ b/src/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/src/components/widgets/charts/RevenueUpdates.vue b/src/components/widgets/charts/RevenueUpdates.vue
new file mode 100644
index 0000000..62c7e98
--- /dev/null
+++ b/src/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/src/components/widgets/charts/SalesOverview.vue b/src/components/widgets/charts/SalesOverview.vue
new file mode 100644
index 0000000..65da14a
--- /dev/null
+++ b/src/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/src/components/widgets/charts/TotalEarning.vue b/src/components/widgets/charts/TotalEarning.vue
new file mode 100644
index 0000000..a617216
--- /dev/null
+++ b/src/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/src/components/widgets/charts/Views.vue b/src/components/widgets/charts/Views.vue
new file mode 100644
index 0000000..1ca1a8c
--- /dev/null
+++ b/src/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/src/components/widgets/charts/YearlyBreakup.vue b/src/components/widgets/charts/YearlyBreakup.vue
new file mode 100644
index 0000000..b16e513
--- /dev/null
+++ b/src/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/src/components/widgets/charts/YearlySales.vue b/src/components/widgets/charts/YearlySales.vue
new file mode 100644
index 0000000..2f7342e
--- /dev/null
+++ b/src/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>
diff --git a/composables/useSessionLogin.ts b/src/composables/useSessionLogin.ts
similarity index 100%
rename from composables/useSessionLogin.ts
rename to src/composables/useSessionLogin.ts
diff --git a/config.ts b/src/config.ts
similarity index 100%
rename from config.ts
rename to src/config.ts
diff --git a/data/dashboard/dashboardData.ts b/src/data/dashboard/dashboardData.ts
similarity index 100%
rename from data/dashboard/dashboardData.ts
rename to src/data/dashboard/dashboardData.ts
diff --git a/error.vue b/src/error.vue
similarity index 100%
rename from error.vue
rename to src/error.vue
diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
new file mode 100644
index 0000000..70ba15a
--- /dev/null
+++ b/src/layouts/Logo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import Logoimg from '@/assets/images/logos/logo.svg';
+</script>
+<template>
+  <div class="logo">
+    <RouterLink to="/">
+      <img :src="Logoimg" alt="home" />
+    </RouterLink>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/layouts/LogoIcon.vue b/src/layouts/LogoIcon.vue
new file mode 100644
index 0000000..05f6bf2
--- /dev/null
+++ b/src/layouts/LogoIcon.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import Logoiconimg from '@/assets/images/logos/logo-icon.svg';
+</script>
+<template>
+  <div class="logo">
+    <RouterLink to="/">
+      <img :src="Logoiconimg" alt="home" />
+    </RouterLink>
+  </div>
+</template>
\ No newline at end of file
diff --git a/layouts/blank.vue b/src/layouts/blank.vue
similarity index 100%
rename from layouts/blank.vue
rename to src/layouts/blank.vue
diff --git a/layouts/default.vue b/src/layouts/default.vue
similarity index 100%
rename from layouts/default.vue
rename to src/layouts/default.vue
diff --git a/middleware/auth.ts b/src/middleware/auth.ts
similarity index 100%
rename from middleware/auth.ts
rename to src/middleware/auth.ts
diff --git a/nuxt.config.ts b/src/nuxt.config.ts
similarity index 95%
rename from nuxt.config.ts
rename to src/nuxt.config.ts
index ae76711..1b17341 100644
--- a/nuxt.config.ts
+++ b/src/nuxt.config.ts
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
       "process.env.DEBUG": false
     },
     server: {
-      allowedHosts: ["meninjar.dev.rssa.id", "localhost:3000"]
+      allowedHosts: ["firman.dev.rssa.id", "localhost:3000","localhost:3001"]
     }
     // css: {
     //   preprocessorOptions: {
@@ -93,7 +93,7 @@ export default defineNuxtConfig({
     authSecret: process.env.AUTH_SECRET,
     keycloakClientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
     keycloakClientId: process.env.KEYCLOAK_CLIENT_ID,
-    // Move keycloakIssuer to public to expose on client side
+    // Move keycloakIssuer too public to expose on client side
     public: {
       // authUrl: process.env.AUTH_ORIGIN || "http://meninjar.dev.rssa.id:3000",
       // keycloakIssuer:
diff --git a/package-lock.json b/src/package-lock.json
similarity index 93%
rename from package-lock.json
rename to src/package-lock.json
index 2584b84..4c3f49f 100644
--- a/package-lock.json
+++ b/src/package-lock.json
@@ -17,14 +17,21 @@
         "@iconify/vue": "^4.1.1",
         "@mdi/font": "7.4.47",
         "@pinia/nuxt": "^0.11.1",
+        "@tiptap/extension-text-style": "^2.8.0",
+        "@tiptap/pm": "2.7.4",
+        "@tiptap/starter-kit": "2.7.4",
+        "@tiptap/vue-3": "2.7.4",
+        "@types/aos": "3.0.7",
         "@vueuse/i18n": "^4.0.0-beta.12",
         "apexcharts": "4.5.0",
         "axios": "^1.9.0",
         "axios-mock-adapter": "^2.1.0",
         "date-fns": "^4.1.0",
         "jsonwebtoken": "^9.0.2",
+        "remixicon": "4.1.0",
         "sass": "1.70.0",
         "sass-loader": "^16.0.5",
+        "svgmap": "^2.10.1",
         "typescript": "^5.8.3",
         "vee-validate": "^4.15.1",
         "vite": "^6.3.5",
@@ -33,7 +40,8 @@
         "vue-tabler-icons": "2.21.0",
         "vue3-apexcharts": "1.5.2",
         "vue3-perfect-scrollbar": "1.6.1",
-        "vuetify": "3.7.18"
+        "vuetify": "3.7.18",
+        "yup": "1.4.0"
       },
       "devDependencies": {
         "@sidebase/nuxt-auth": "^0.10.1",
@@ -2642,6 +2650,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@poppinss/colors": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.4.tgz",
@@ -2687,6 +2705,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.18",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.18.tgz",
@@ -3281,6 +3305,386 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.25.0.tgz",
+      "integrity": "sha512-pTLV0+g+SBL49/Y5A9ii7oHwlzIzpgroJVI3AcBk7/SeR7554ZzjxxtJmZkQ9/NxJO+k1jQp9grXaqqOLqC7cA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.25.0.tgz",
+      "integrity": "sha512-W+sVPlV9XmaNPUkxV2BinNEbk2hr4zw8VgKjqKQS9O0k2YIVRCfQch+4DudSAwBVMrVW97zVAKRNfictGFQ8vQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.25.0.tgz",
+      "integrity": "sha512-3cBX2EtdFR3+EDTkIshhpQpXoZQbFUzxf6u86Qm0qD49JnVOjX9iexnUp8MydXPZA6NVsKeEfMhf18gV7oxTEw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.25.0.tgz",
+      "integrity": "sha512-BnbfQWRXJDDy9/x/0Atu2Nka5ZAMyXLDFqzSLMAXqXSQcG6CZRTSNRgOCnjpda6Hq2yCtq7l/YEoXkbHT1ZZdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.25.0.tgz",
+      "integrity": "sha512-KD+q/q6KIU2anedjtjG8vELkL5rYFdNHWc5XcUJgQoxbOCK3/sBuOgcn9mnFA2eAS6UkraN9Yx0BXEDbXX2HOw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.25.0.tgz",
+      "integrity": "sha512-rRp6X2aNNnvo7Fbqc3olZ0vLb52FlCPPfetr9gy6/M9uQdVYDhJcFOPuRuXtZ8M8X+WpCZBV29BvZFeDqfw8bw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.25.0.tgz",
+      "integrity": "sha512-T4kXbZNZ/NyklzQ/FWmUnjD4hgmJPrIBazzCZ/E/rF/Ag2IvUsztBT0PN3vTa+DAZ+IbM61TjlIpyJs1R7OdbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.25.0.tgz",
+      "integrity": "sha512-3gEZlQKUSIRrC6Az8QS7SJi4CvhMWrA7RBChM1aRl9vMNN8Ul7dZZk5StYJGPjL/koTiceMqx9pNmTCBprsbvQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.25.0.tgz",
+      "integrity": "sha512-eSHqp+iUI2mGVwvIyENP02hi5TSyQ+bdwNwIck6bdzjRvXakm72+8uPfVSLGxRKAQZ0RFtmux8ISazgUqF/oSw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.25.0.tgz",
+      "integrity": "sha512-hPZ5SNpI14smTz4GpWQXTnxmeICINYiABSgXcsU5V66tik9OtxKwoCSR/gpU35esaAFUVRdjW7+sGkACLZD5AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.25.0.tgz",
+      "integrity": "sha512-s/3WDbgkvLac88h5iYJLPJCDw8tMhlss1hk9GAo+zzP4h0xfazYie09KrA0CBdfaSOFyeJK3wedzjKZBtdgX4w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.25.0.tgz",
+      "integrity": "sha512-h8be5Zdtsl5GQHxRXvYlGfIJsLvdbexflSTr12gr4kvcQqTdtrsqyu2eksfAK+p2szbiwP2G4VZlH0LNS47UXQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.25.0.tgz",
+      "integrity": "sha512-IrRKRRr7Bhpnq5aue1v5/e5N/eNdVV/THsgqqpLZO48pgN8Wv+TweOZe1Ntg/v8L4QSBC8iGMxxhiJZT8AzSkA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.25.0.tgz",
+      "integrity": "sha512-y3uJkJv+UngDaDYfcVJ4kx8ivc3Etk5ow6N+47AMCRjUUweQ/CLiJwJ2C7nL7L82zOzVbb/NoR/B3UeE4ts/wQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.25.0.tgz",
+      "integrity": "sha512-bZovyhdOexB3Cv9ddUogWT+cd3KbnenMIZKhgrJ+R0J27rlOtzeUD9TeIjn4V8Of9mTxm3XDKUZGLgPiriN8Ww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.25.0.tgz",
+      "integrity": "sha512-FZHmNqvWJ5SHYlUi+Qg3b2C0ZBt82DUDUqM+bqcQqSQu6B0c4IEc3+VHhjAJwEUIO9wX7xk/PsdM4Z5Ex4Lr3w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.25.0.tgz",
+      "integrity": "sha512-HLstO/R+dNjIFMXN15bANc8i/+CDpEgtEQhZNHqvSUJH9xQ5op0S05m5VvFI10qnwXNjwwXdhxUYwwjIDCiAgg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.25.0.tgz",
+      "integrity": "sha512-Hlid16nQdDFOGOx6mJT+zPEae2t1dGlJ18pqCqaVMuDnIpNIWmQutJk5QYxGVxr9awd2SpHTpQtdBTqcufbHtw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.25.0.tgz",
+      "integrity": "sha512-53gpWMPedkWVDp3u/1sLt6vnr3BWz4vArGCmmabLucCI2Yl4R6S/AQ9yj/+jOHvWbXCroCbKtmmwxJl32uGN2w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.25.0.tgz",
+      "integrity": "sha512-Z5YBKnv4N6MMD1LEo9XbmWnmdXavZKOOJt/OkXYFZ3KgzB52Z3q3DDfH+NyeCtKKSWqWVxbBHKLnsojDerSf2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.25.0.tgz",
+      "integrity": "sha512-HlZL86rihpP/R8+dqRrvzSRmiPpx6ctlAKM9PnWT/WRMeI4Y1AUq6PSHLz74wtYO1LH4PXys1ws3n+pLP4Mo6g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.25.0.tgz",
+      "integrity": "sha512-MKAXqDATEbuFEB1SeeAFy2VbefUMJ9jxQyybpaHjDX+Ik0Ddu+aYuJP/njvLuejXCqhrkS/AorxzmHUC4HNPbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.7.4.tgz",
+      "integrity": "sha512-YXjgPLN6/msTkKakuzgBm6Dd/Li3ORtysSki3fHnOFcy8R4c5JZLkYECQk6aJHsxvl/vGvNgaJy5yCDbhnaTAg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.0",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.0",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.22.3",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.4.0",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.0",
+        "prosemirror-view": "^1.33.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.7.4.tgz",
+      "integrity": "sha512-ALOphzdSZ+ZgOllc0gKxn7iDQ3c3BEBJzc5dQE1pJMeDHrGu/fAGXtffJOyJsVoBGTB14TXK6decMNUUwBApiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^2.7.4",
+        "@tiptap/extension-blockquote": "^2.7.4",
+        "@tiptap/extension-bold": "^2.7.4",
+        "@tiptap/extension-bullet-list": "^2.7.4",
+        "@tiptap/extension-code": "^2.7.4",
+        "@tiptap/extension-code-block": "^2.7.4",
+        "@tiptap/extension-document": "^2.7.4",
+        "@tiptap/extension-dropcursor": "^2.7.4",
+        "@tiptap/extension-gapcursor": "^2.7.4",
+        "@tiptap/extension-hard-break": "^2.7.4",
+        "@tiptap/extension-heading": "^2.7.4",
+        "@tiptap/extension-history": "^2.7.4",
+        "@tiptap/extension-horizontal-rule": "^2.7.4",
+        "@tiptap/extension-italic": "^2.7.4",
+        "@tiptap/extension-list-item": "^2.7.4",
+        "@tiptap/extension-ordered-list": "^2.7.4",
+        "@tiptap/extension-paragraph": "^2.7.4",
+        "@tiptap/extension-strike": "^2.7.4",
+        "@tiptap/extension-text": "^2.7.4",
+        "@tiptap/pm": "^2.7.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/vue-3": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-2.7.4.tgz",
+      "integrity": "sha512-Z75XzP7J3yFAB9qNvso8cX/f3R2PjKxGGk53RR2dhUT+Bsa7K5U8k6QB+ANl2RY+1t/p/LkQvaYLe6CBx9t1Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.7.4",
+        "@tiptap/extension-floating-menu": "^2.7.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3301,12 +3705,40 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aos": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.7.tgz",
+      "integrity": "sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.15.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.3.tgz",
@@ -4079,6 +4511,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/ast-kit": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-1.4.3.tgz",
@@ -4884,6 +5322,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cron-parser": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
@@ -7475,6 +7919,15 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -7724,6 +8177,23 @@
         "source-map-js": "^1.2.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -7740,6 +8210,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge-options": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
@@ -9008,6 +9484,12 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/oxc-parser": {
       "version": "0.72.3",
       "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.72.3.tgz",
@@ -10075,6 +10557,219 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",
+      "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz",
+      "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz",
+      "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+      "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.1.tgz",
+      "integrity": "sha512-AUvbm7qqmpZa5d9fPKMvH1Q5bqYQvAZWOGRvxsB6iFLyycvC9MwNemNVjHVrWgjaoxAfY8XVg7DbvQ/qxvI9Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.7.1.tgz",
+      "integrity": "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.25.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-transform": "^1.10.3",
+        "prosemirror-view": "^1.39.1"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-trailing-node/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz",
+      "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.0.tgz",
+      "integrity": "sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/protocols": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.2.tgz",
@@ -10099,6 +10794,15 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -10361,6 +11065,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/remixicon": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.1.0.tgz",
+      "integrity": "sha512-N5dmpN6bjB7GyHi8RqhKp8Fy1cfOch0m75KZQv4ZNFa2ffpXJY2FQ4TdgigZulTdwOoTwLKjBQ7GCC+bEw8LHg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -10507,6 +11217,12 @@
         }
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/run-applescript": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.0.0.tgz",
@@ -11360,6 +12076,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz",
+      "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/svgmap": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/svgmap/-/svgmap-2.12.2.tgz",
+      "integrity": "sha512-SCX1Oys3v1dz3mTEbQha+6lrHGyu3LwXBhcgW0HlTh7waQDMFqNUKD8hADvDaPkPapRvNCLMnXaVD1Pbxbnhow==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-pan-zoom": "^3.6.2"
+      }
+    },
     "node_modules/svgo": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
@@ -11502,6 +12233,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -11532,6 +12269,15 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
@@ -11581,6 +12327,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -11653,6 +12405,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
@@ -13290,6 +14048,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -13685,6 +14449,30 @@
         "node": ">=18"
       }
     },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zip-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
diff --git a/package.json b/src/package.json
similarity index 82%
rename from package.json
rename to src/package.json
index 9ca63ed..80d5aaa 100644
--- a/package.json
+++ b/src/package.json
@@ -11,6 +11,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/pm": "2.7.4",
+    "@tiptap/starter-kit": "2.7.4",
+    "@tiptap/vue-3": "2.7.4",
+    "@types/aos": "3.0.7",
     "@fullcalendar/core": "6.1.10",
     "@fullcalendar/daygrid": "6.1.10",
     "@fullcalendar/interaction": "6.1.10",
@@ -27,6 +32,8 @@
     "jsonwebtoken": "^9.0.2",
     "sass": "1.70.0",
     "sass-loader": "^16.0.5",
+    "remixicon": "4.1.0",
+    "svgmap": "^2.10.1",
     "typescript": "^5.8.3",
     "vee-validate": "^4.15.1",
     "vite": "^6.3.5",
@@ -35,7 +42,8 @@
     "vue-tabler-icons": "2.21.0",
     "vue3-apexcharts": "1.5.2",
     "vue3-perfect-scrollbar": "1.6.1",
-    "vuetify": "3.7.18"
+    "vuetify": "3.7.18",
+    "yup": "1.4.0"
   },
   "devDependencies": {
     "@sidebase/nuxt-auth": "^0.10.1",
diff --git a/pages/Icons.vue b/src/pages/Icons.vue
similarity index 100%
rename from pages/Icons.vue
rename to src/pages/Icons.vue
diff --git a/pages/SambelPage_copy.vue b/src/pages/SambelPage_copy.vue
similarity index 100%
rename from pages/SambelPage_copy.vue
rename to src/pages/SambelPage_copy.vue
diff --git a/pages/Sample-Page.vue b/src/pages/Sample-Page.vue
similarity index 100%
rename from pages/Sample-Page.vue
rename to src/pages/Sample-Page.vue
diff --git a/pages/SamplePage.vue b/src/pages/SamplePage.vue
similarity index 100%
rename from pages/SamplePage.vue
rename to src/pages/SamplePage.vue
diff --git a/pages/auth/401.vue b/src/pages/auth/401.vue
similarity index 100%
rename from pages/auth/401.vue
rename to src/pages/auth/401.vue
diff --git a/pages/auth/Login.vue b/src/pages/auth/Login.vue
similarity index 100%
rename from pages/auth/Login.vue
rename to src/pages/auth/Login.vue
diff --git a/pages/auth/Register.vue b/src/pages/auth/Register.vue
similarity index 100%
rename from pages/auth/Register.vue
rename to src/pages/auth/Register.vue
diff --git a/pages/dashboards/dashboard1.vue b/src/pages/dashboards/dashboard1.vue
similarity index 100%
rename from pages/dashboards/dashboard1.vue
rename to src/pages/dashboards/dashboard1.vue
diff --git a/pages/dashboards/dashboard2.vue b/src/pages/dashboards/dashboard2.vue
similarity index 100%
rename from pages/dashboards/dashboard2.vue
rename to src/pages/dashboards/dashboard2.vue
diff --git a/pages/dashboards/dashboard3.vue b/src/pages/dashboards/dashboard3.vue
similarity index 100%
rename from pages/dashboards/dashboard3.vue
rename to src/pages/dashboards/dashboard3.vue
diff --git a/src/pages/forms/Editor.vue b/src/pages/forms/Editor.vue
new file mode 100644
index 0000000..3d6ca82
--- /dev/null
+++ b/src/pages/forms/Editor.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue';
+
+import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import UiParentCard from '~/components/shared/UiParentCard.vue';
+import EditorMenubar from '~/components/forms/plugins/editor/EditorMenubar.vue';
+
+const editor = useEditor({
+  extensions: [StarterKit],
+  content: `
+  <h2>Hi there,</h2>
+      <p>
+        this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there
+        are all kind of basic text styles you’d probably expect from a text
+        editor. But wait until you see the lists:
+      </p>
+      <ul>
+        <li>That’s a bullet list with one …</li>
+        <li>… or two list items.</li>
+      </ul>
+      <p>
+        Isn’t that great? And all of that is editable. But wait, there’s more.
+        Let’s try a code block:
+      </p>
+      <pre><code class="language-css">body {
+  display: none;
+}</code></pre>
+      <p>
+        I know, I know, this is impressive. It’s only the tip of the iceberg
+        though. Give it a try and click a little bit around. Don’t forget to
+        check the other examples too.
+      </p>
+      <blockquote>
+        Wow, that’s amazing. Good work, boy! 👏
+        <br />
+        — Mom
+      </blockquote>
+      `
+});
+// template breadcrumb
+const page = ref({ title: 'Editor' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Editor',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <UiParentCard title="Editor">
+    <div v-if="editor">
+      <EditorMenubar :editor="editor" />
+    </div>
+    <editor-content :editor="editor" />
+  </UiParentCard>
+</template>
+
+<style lang="scss"></style>
diff --git a/src/pages/forms/Form-Validation.vue b/src/pages/forms/Form-Validation.vue
new file mode 100644
index 0000000..5e59d32
--- /dev/null
+++ b/src/pages/forms/Form-Validation.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref} from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+import VeeValidation from '@/components/forms/form-validation/VeeValidation.vue'
+import MailValidation from '@/components/forms/form-validation/MailValidation.vue'
+import OnType from '@/components/forms/form-validation/OnType.vue'
+import Radio from '@/components/forms/form-validation/Radio.vue'
+import CheckBox from '@/components/forms/form-validation/CheckBox.vue'
+import SelectBox from '@/components/forms/form-validation/Select.vue'
+import { Form } from 'vee-validate';
+// template breadcrumb
+const page = ref({ title: 'Form Validation' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Form Validation',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12" lg="6" class="mb-0">
+      <UiParentCardLogo>
+        <VeeValidation/>
+      </UiParentCardLogo>
+    </v-col>
+    <v-col cols="12" lg="6" class="mb-0">
+      <UiParentCardLogo>
+        <MailValidation/>
+      </UiParentCardLogo>
+      <UiParentCard title="Select" class="mt-6">
+        <SelectBox/>
+      </UiParentCard>
+    </v-col>
+    <v-col cols="12" lg="6" class="">
+      <UiParentCard title="On Leave">
+        <OnType/>
+      </UiParentCard>
+    </v-col>
+    <v-col cols="12" lg="6" class="">
+      <UiParentCard title="Checkboxes">
+        <CheckBox/>
+      </UiParentCard>
+    </v-col>
+    <v-col cols="12" lg="6" class="">
+      <UiParentCard title="Radio">
+        <Radio/>
+      </UiParentCard>
+    </v-col>
+
+  </v-row>
+</template>
\ No newline at end of file
diff --git a/src/pages/forms/form-elements/Autocomplete.vue b/src/pages/forms/form-elements/Autocomplete.vue
new file mode 100644
index 0000000..a3fbdce
--- /dev/null
+++ b/src/pages/forms/form-elements/Autocomplete.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+// icons
+import { AccessPointIcon, MailIcon } from 'vue-tabler-icons';
+import ComboBox from '@/components/forms/form-elements/autocomplete/ComboBox.vue';
+import WithCaption from '@/components/forms/form-elements/autocomplete/WithCaption.vue';
+import MultipleOptions from '@/components/forms/form-elements/autocomplete/MultipleOptions.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Autocomplete' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Autocomplete',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Autocomplete">
+                <v-row>
+                    <!-- Combo Box -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Combo Box">
+                            <ComboBox />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Caption -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="With Caption">
+                            <WithCaption />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Combo with Multiple Options -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Combo with Multiple Options">
+                            <MultipleOptions />
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Button.vue b/src/pages/forms/form-elements/Button.vue
new file mode 100644
index 0000000..0e943ba
--- /dev/null
+++ b/src/pages/forms/form-elements/Button.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*import tabler icons*/
+import { TrashIcon, SendIcon, BellIcon } from 'vue-tabler-icons';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+// icons
+import { AccessPointIcon } from 'vue-tabler-icons';
+import BaseButtons from '@/components/forms/form-elements/button/BaseButtons.vue';
+import ColorsButtons from '@/components/forms/form-elements/button/ColorsButtons.vue';
+import OutlinedButtons from '@/components/forms/form-elements/button/OutlinedButtons.vue';
+import IconsButtons from '@/components/forms/form-elements/button/IconsButtons.vue';
+import SizeButtons from '@/components/forms/form-elements/button/SizeButtons.vue';
+import TextButtons from '@/components/forms/form-elements/button/TextButtons.vue';
+import OutlineIconColor from '@/components/forms/form-elements/button/OutlineIconColor.vue';
+import OutlineSizes from '@/components/forms/form-elements/button/OutlineSizes.vue';
+import OutlinedIconSize from '@/components/forms/form-elements/button/OutlinedIconSize.vue';
+import IconColor from '@/components/forms/form-elements/button/IconColor.vue';
+import IconColorSizes from '@/components/forms/form-elements/button/IconColorSizes.vue';
+import Default from '@/components/forms/form-elements/button/buttonGroup/Default.vue';
+import Text from '@/components/forms/form-elements/button/buttonGroup/Text.vue';
+import Plain from '@/components/forms/form-elements/button/buttonGroup/Plain.vue';
+import Outlined from '@/components/forms/form-elements/button/buttonGroup/Outlined.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Buttons' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Buttons',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+// buttons color data
+const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
+
+</script>
+
+// ===============================|| Ui Buttons ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Buttons">
+                <v-row>
+                    <!-- Base Buttons -->
+                    <v-col cols="12" sm="12">
+                        <UiChildCard title="Base">
+                            <BaseButtons />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Color Buttons -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Colors">
+                            <ColorsButtons />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Sizes -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Size">
+                            <SizeButtons />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Outlined Buttons -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Outlined">
+                            <OutlinedButtons />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Icons -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Outlined Icon">
+                            <IconsButtons />
+                        </UiChildCard>
+                    </v-col>
+
+                    <!-- OutlineSizes -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Outline Size">
+                            <OutlineSizes />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Text Buttons -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Text Color">
+                            <TextButtons />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Icon Color -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Icon Color">
+                            <IconColor />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Outllined Icon Button -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Outlined Icon Color">
+                            <OutlineIconColor />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Icon Color Sizes -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Icon Size">
+                            <IconColorSizes />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Outllined Icon Button -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Outlined Icon Size">
+                            <OutlinedIconSize />
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+
+        <v-col cols="12">
+            <UiParentCard title="Button Group">
+                <v-row>
+                    <!-- Default -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default">
+                            <Default />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Text -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Text">
+                            <Text />
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Plain -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Plain">
+                            <Plain />
+                        </UiChildCard>
+                    </v-col>
+                     <!-- Outlined -->
+                     <v-col cols="12" lg="6">
+                        <UiChildCard title="Outlined">
+                            <Outlined />
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Checkbox.vue b/src/pages/forms/form-elements/Checkbox.vue
new file mode 100644
index 0000000..59bdec3
--- /dev/null
+++ b/src/pages/forms/form-elements/Checkbox.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+// icons
+import { AccessPointIcon } from 'vue-tabler-icons';
+import BasicCheckboxes from '@/components/forms/form-elements/checkbox/BasicCheckboxes.vue';
+import LabelCheckboxes from '@/components/forms/form-elements/checkbox/LabelCheckboxes.vue';
+import ColorCheckboxes from '@/components/forms/form-elements/checkbox/ColorCheckboxes.vue';
+import Custom from '@/components/forms/form-elements/checkbox/CustomCheckbox.vue';
+// template breadcrumb
+const page = ref({ title: 'Checkboxes' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Checkboxes',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+// ===============================|| Ui Checkbox ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Checkbox">
+                <v-row>
+                    <!-- Custom checkboxes -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Custom">
+                            <Custom/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Colors -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Colors">
+                            <ColorCheckboxes/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Basic checkboxes -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default">
+                            <BasicCheckboxes/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With label -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="States">
+                            <LabelCheckboxes/>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Date-Time.vue b/src/pages/forms/form-elements/Date-Time.vue
new file mode 100644
index 0000000..5e775c8
--- /dev/null
+++ b/src/pages/forms/form-elements/Date-Time.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+/*Components*/
+import DatePicker from '@/components/forms/form-elements/datetime/DatePicker.vue';
+import TimePicker from '@/components/forms/form-elements/datetime/TimePicker.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Date Picker' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Date Time',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+// ===============================|| Ui Checkbox ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Date Time">
+                <v-row>
+                    <!-- Date Picker -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Date Picker">
+                            <DatePicker/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Time Picker -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Time Picker">
+                            <TimePicker/>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Radio.vue b/src/pages/forms/form-elements/Radio.vue
new file mode 100644
index 0000000..f328df4
--- /dev/null
+++ b/src/pages/forms/form-elements/Radio.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+// icons
+import { AccessPointIcon } from 'vue-tabler-icons';
+import Default from '@/components/forms/form-elements/radio/Default.vue';
+import Label from '@/components/forms/form-elements/radio/Label.vue';
+import DefaultDirection from '@/components/forms/form-elements/radio/DefaultDirection.vue';
+import InlineDirection from '@/components/forms/form-elements/radio/InlineDirection.vue';
+import Color from '@/components/forms/form-elements/radio/Color.vue';
+import ColorwithLabel from '@/components/forms/form-elements/radio/LabelwithColor.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Radio' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Radio',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+// ===============================|| Ui Radio ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Radio">
+                <v-row>
+                    <!-- Default Radio -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default">
+                            <Default/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Radio with Label -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Label">
+                            <Label/> 
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Colors -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Colors">
+                            <Color/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Colors -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Colors with Label">
+                            <ColorwithLabel/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Default Direction -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default Direction">
+                            <DefaultDirection/>
+                        </UiChildCard>
+                    </v-col>
+                     <!-- Inline Direction -->
+                     <v-col cols="12" lg="6">
+                        <UiChildCard title="Inline Direction">
+                            <InlineDirection/>
+                        </UiChildCard>
+                    </v-col>
+                    
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Slider.vue b/src/pages/forms/form-elements/Slider.vue
new file mode 100644
index 0000000..cf818ad
--- /dev/null
+++ b/src/pages/forms/form-elements/Slider.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+ import Default from '@/components/forms/form-elements/slider/Default.vue';
+ import Disabled from '@/components/forms/form-elements/slider/Disabled.vue';
+ import Volume from '@/components/forms/form-elements/slider/Volume.vue';
+ import TickSize from '@/components/forms/form-elements/slider/TickSize.vue';
+ import Steps from '@/components/forms/form-elements/slider/Steps.vue';
+ import Ticks from '@/components/forms/form-elements/slider/Ticks.vue';
+ import Vertical from '@/components/forms/form-elements/slider/Vertical.vue';
+ import Custom from '@/components/forms/form-elements/slider/Custom.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Slider' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Slider',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Slider">
+                <v-row>
+                    <!-- Default Slider -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Default">
+                            <Default/>
+                        </UiChildCard>
+                    </v-col>
+                     <!-- Volume -->
+                     <v-col cols="12" lg="4">
+                        <UiChildCard title="Icon">
+                            <Volume/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Disabled -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Disabled">
+                             <Disabled/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Steps -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Steps">
+                            <Steps/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Ticks -->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Ticks">
+                            <Ticks/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Tick Size-->
+                    <v-col cols="12" lg="4">
+                        <UiChildCard title="Tick Size">
+                            <TickSize/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Custom-->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Custom">
+                            <Custom/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Vertical Slider -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Vertical">
+                            <Vertical/>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Stepper.vue b/src/pages/forms/form-elements/Stepper.vue
new file mode 100644
index 0000000..75716a7
--- /dev/null
+++ b/src/pages/forms/form-elements/Stepper.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+import NoEditable from '@/components/forms/form-elements/stepper/NoEditable.vue';
+import EditableStepper from '@/components/forms/form-elements/stepper/EditableStepper.vue';
+import Alternatelabel from '@/components/forms/form-elements/stepper/Alternatelabel.vue';
+import LinearSteppers from '@/components/forms/form-elements/stepper/LinearSteppers.vue';
+import OptionalSteps from '@/components/forms/form-elements/stepper/OptionalSteps.vue';
+import ItemStepper from '@/components/forms/form-elements/stepper/ItemStepper.vue';
+import AlternativeErrors from '@/components/forms/form-elements/stepper/AlternativeErrors.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Stepper' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Stepper',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Stepper">
+                <v-row>
+                    <v-col cols="12">
+                        <UiChildCard title="Non editable steps  " >
+                          <NoEditable/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Editable steps  " >
+                          <EditableStepper/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Alternate label" >
+                          <Alternatelabel/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Linear steppers" >
+                          <LinearSteppers/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Optional steps" >
+                          <OptionalSteps/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Alternative label with errors" >
+                          <AlternativeErrors/>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Items steps" >
+                          <ItemStepper/>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Switch.vue b/src/pages/forms/form-elements/Switch.vue
new file mode 100644
index 0000000..2afa352
--- /dev/null
+++ b/src/pages/forms/form-elements/Switch.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+import Default from '@/components/forms/form-elements/switch/Default.vue';
+import Label from '@/components/forms/form-elements/switch/Label.vue';
+import Inset from '@/components/forms/form-elements/switch/Inset.vue';
+import InsetColors from '@/components/forms/form-elements/switch/InsetColors.vue';
+import Colors from '@/components/forms/form-elements/switch/Colors.vue';
+import States from '@/components/forms/form-elements/switch/States.vue';
+// template breadcrumb
+const page = ref({ title: 'Switch' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Switch',
+        disabled: true,
+        href: '#'
+    }
+]);
+
+</script>
+
+// ===============================|| Ui Switch ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Switch">
+                <v-row>
+                    <!-- Default Switch -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default">
+                            <Default/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Inset -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Inset">
+                            <Inset/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- With Label -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="With Label">
+                            <Label/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- States -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="States">
+                            <States/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Colors -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Colors">
+                           <Colors/>
+                        </UiChildCard>
+                    </v-col>
+                    <!-- Inset Colors -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Inset Colors">
+                            <InsetColors/>
+                        </UiChildCard>
+                    </v-col>
+                    
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/TextField.vue b/src/pages/forms/form-elements/TextField.vue
new file mode 100644
index 0000000..8497f71
--- /dev/null
+++ b/src/pages/forms/form-elements/TextField.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+// icons
+import { MailIcon, LockIcon, EyeIcon } from 'vue-tabler-icons';
+
+// define consts
+const page = ref({ title: 'Textfield' });
+const caption_email1 = ref('demo@company.com');
+const caption_email2 = ref('demo@company.com');
+const caption_email3 = ref('demo@company.com');
+const validate_email1 = ref('demo.sd');
+const validate_email2 = ref('demo.sd');
+const multiline2 = ref('Default Value');
+const select_sm = ref('Small');
+const select_md = ref('Default');
+const full_text = ref('Default');
+const some_imp1 = ref('Default');
+const some_imp2 = ref('Default');
+const some_imp3 = ref('Default');
+
+// rules for email textfield
+const rules = ref({
+    required: (value: any) => !!value || 'Required.',
+    counter: (value: any) => value.length <= 20 || 'Max 20 characters',
+    email: (value: any) => {
+        const pattern =
+            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+    }
+});
+
+//  data of select
+const items = ref(['None', 'demo@company.com', 'Judiya@company.com', 'taju_diya@company.com']);
+
+// template breadcrumb
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Textfield',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Textfield">
+                <v-row>
+                    <v-col cols="12" lg="6">
+                        <!-- variant -->
+                        <UiChildCard title="Variant">
+                            <div>
+                                <v-text-field label="Outlined" color="primary" placeholder="Placeholder" variant="outlined"></v-text-field>
+
+                                <v-text-field label="Filled" color="primary" placeholder="Placeholder" variant="filled"></v-text-field>
+
+                                <v-text-field
+                                    label="Underlined"
+                                    color="primary"
+                                    placeholder="Placeholder"
+                                    variant="underlined"
+                                ></v-text-field>
+                            </div>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- general -->
+                        <UiChildCard title="General">
+                            <div>
+                                <v-text-field color="primary" placeholder="Email Address" variant="outlined"></v-text-field>
+
+                                <v-text-field
+                                    color="primary"
+                                    placeholder="Email Address"
+                                    value="demo@company.com"
+                                    variant="outlined"
+                                ></v-text-field>
+
+                                <v-text-field color="primary" placeholder="demo@company.com" variant="outlined" disabled></v-text-field>
+                            </div>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- with caption -->
+                        <UiChildCard title="With Caption">
+                            <v-text-field
+                                color="primary"
+                                v-model="caption_email1"
+                                label="Email Address"
+                                variant="outlined"
+                                placeholder="email address"
+                            >
+                                <template v-slot:prepend-inner>
+                                    <MailIcon stroke-width="1.5" size="22" />
+                                </template>
+                            </v-text-field>
+                            <v-text-field color="primary" v-model="caption_email2" label="Email Address" variant="outlined"></v-text-field>
+                            <v-text-field color="primary" v-model="caption_email3" label="Email Address" variant="outlined">
+                                <template v-slot:append-inner>
+                                    <MailIcon stroke-width="1.5" size="22" />
+                                </template>
+                            </v-text-field>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- with validation -->
+                        <UiChildCard title="With Validation">
+                            <v-text-field
+                                color="error"
+                                v-model="validate_email1"
+                                :rules="[rules.required, rules.email]"
+                                label="Email Address"
+                                variant="outlined"
+                                placeholder="demo"
+                                error
+                            >
+                                <template v-slot:prepend-inner>
+                                    <MailIcon stroke-width="1.5" size="22" />
+                                </template>
+                            </v-text-field>
+                            <v-text-field
+                                color="error"
+                                error
+                                v-model="validate_email2"
+                                :rules="[rules.required, rules.email]"
+                                label="Email Address"
+                                variant="outlined"
+                                placeholder="demo"
+                            >
+                            </v-text-field>
+                            <v-text-field color="error" label="Email Address" variant="outlined"> </v-text-field>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- With Icon & Adornments -->
+                        <UiChildCard title="With Icon & Adornments">
+                            <v-text-field variant="outlined" color="primary" placeholder="Email address">
+                                <template v-slot:prepend-inner>
+                                    <MailIcon stroke-width="1.5" size="22" />
+                                </template>
+                            </v-text-field>
+                            <v-text-field variant="outlined" color="primary" placeholder="Email address">
+                                <template v-slot:prepend-inner>
+                                    <LockIcon stroke-width="1.5" size="22" />
+                                </template>
+                                <template v-slot:append-inner>
+                                    <EyeIcon stroke-width="1.5" size="22" />
+                                </template>
+                            </v-text-field>
+                            <v-text-field placeholder="John Deo" color="primary" variant="outlined">
+                                <template v-slot:prepend-inner>
+                                    <span class="v-card-subtitle px-0">Mr</span>
+                                    <v-divider class="ml-3 my-3 mt-n1" vertical></v-divider>
+                                </template>
+                            </v-text-field>
+                            <v-text-field placeholder="Password" color="primary" variant="outlined">
+                                <template v-slot:append-inner>
+                                    <v-divider class="mr-3 my-3 mt-n1" vertical></v-divider>
+                                    <span class="v-card-subtitle px-0">.com</span>
+                                </template>
+                            </v-text-field>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- Multiline -->
+                        <UiChildCard title="Multiline">
+                            <v-textarea
+                                filled
+                                auto-grow
+                                label="Multiline Placeholder"
+                                rows="1"
+                                row-height="20"
+                                color="primary"
+                                variant="outlined"
+                            ></v-textarea>
+                            <v-textarea
+                                filled
+                                auto-grow
+                                label="Multiline Placeholder"
+                                variant="outlined"
+                                rows="4"
+                                color="primary"
+                                v-model="multiline2"
+                            ></v-textarea>
+                            <v-textarea
+                                clearable
+                                clear-icon="mdi-close-circle"
+                                variant="outlined"
+                                label="Multiline Clearable"
+                                rows="1"
+                                row-height="20"
+                                value="This is clearable text."
+                                color="primary"
+                            ></v-textarea>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- Select -->
+                        <UiChildCard title="Select">
+                            <v-select
+                                :items="items"
+                                color="primary"
+                                label="Email Address"
+                                variant="outlined"
+                                density="comfortable"
+                            ></v-select>
+                            <v-select
+                                :items="items"
+                                color="primary"
+                                label="Email Address"
+                                variant="outlined"
+                                density="compact"
+                                v-model="select_sm"
+                                outlined
+                            ></v-select>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <!-- size -->
+                        <UiChildCard title="Size">
+                            <v-text-field variant="outlined" color="primary" placeholder="Default" label="Default"> </v-text-field>
+                            <v-text-field variant="outlined" color="primary" placeholder="Default" density="compact"> </v-text-field>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <!-- Layout -->
+                        <UiChildCard title="Layout">
+                            <v-text-field
+                                label="Label"
+                                hint="Full Width!"
+                                v-model="full_text"
+                                persistent-hint
+                                variant="outlined"
+                                color="primary"
+                            ></v-text-field>
+                            <v-row class="mt-5">
+                                <v-col cols="12" lg="4">
+                                    <v-text-field
+                                        label="None"
+                                        hint="Some important text"
+                                        v-model="some_imp1"
+                                        persistent-hint
+                                        variant="outlined"
+                                        color="primary"
+                                    ></v-text-field>
+                                </v-col>
+
+                                <v-col cols="12" lg="4">
+                                    <v-text-field
+                                        label="Dense"
+                                        hint="Some important text"
+                                        v-model="some_imp2"
+                                        persistent-hint
+                                        variant="outlined"
+                                        color="primary"
+                                        density="compact"
+                                    ></v-text-field>
+                                </v-col>
+
+                                <v-col cols="12" lg="4">
+                                    <v-text-field
+                                        label="Normal"
+                                        hint="Some important text"
+                                        v-model="some_imp3"
+                                        persistent-hint
+                                        variant="outlined"
+                                        color="primary"
+                                    ></v-text-field>
+                                </v-col>
+                            </v-row>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/src/pages/forms/form-elements/Time-Picker.vue b/src/pages/forms/form-elements/Time-Picker.vue
new file mode 100644
index 0000000..3c9872a
--- /dev/null
+++ b/src/pages/forms/form-elements/Time-Picker.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+const picker = ref(null);
+const start = ref(null);
+const end = ref(null);
+
+// template breadcrumb
+const page = ref({ title: 'Time Picker' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Time Picker',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+// ===============================|| Ui Checkbox ||=============================== //
+<template>
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiParentCard title="Time Picker">
+                <v-row>
+                    <!-- Default -->
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Default">
+                            <v-time-picker class="mx-auto" ></v-time-picker>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Format">
+                            <v-time-picker format="24hr" class="mx-auto"></v-time-picker>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Scrollable">
+                            <v-time-picker v-model="picker" scrollable class="mx-auto"></v-time-picker>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12" lg="6">
+                        <UiChildCard title="Use seconds">
+                            <v-time-picker use-seconds class="mx-auto"></v-time-picker>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Colors">
+                            <v-row>
+                                <v-col cols="12" lg="6">
+                                    <v-time-picker color="primary" class="mx-auto"></v-time-picker>
+                                </v-col>
+                                <v-col cols="12" lg="6">
+                                    <v-time-picker color="error" class="mx-auto"></v-time-picker>
+                                </v-col>
+                            </v-row>
+                        </UiChildCard>
+                    </v-col>
+                    <v-col cols="12">
+                        <UiChildCard title="Range">
+                            <v-row>
+                                <v-col cols="12" lg="6">
+                                    <v-time-picker v-model="start" :max="end" class="mx-auto"></v-time-picker>
+                                </v-col>
+                                <v-col cols="12" lg="6">
+                                    <v-time-picker v-model="end" :min="start"  class="mx-auto"></v-time-picker>
+                                </v-col>
+                            </v-row>
+                        </UiChildCard>
+                    </v-col>
+                </v-row>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/index.vue b/src/pages/index.vue
similarity index 100%
rename from pages/index.vue
rename to src/pages/index.vue
diff --git a/src/pages/pages/Account-Settings.vue b/src/pages/pages/Account-Settings.vue
new file mode 100644
index 0000000..1d42465
--- /dev/null
+++ b/src/pages/pages/Account-Settings.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '~/components/shared/UiParentCard.vue';
+
+/*import tabler icons*/
+import { UserCircleIcon,BellIcon,ArticleIcon,LockIcon } from 'vue-tabler-icons';
+
+//components
+import AccountTab from '@/components/pages/account-settings/AccountTab.vue';
+import NotificationTab from '@/components/pages/account-settings/NotificationTab.vue';
+import BillsTab from '@/components/pages/account-settings/BillsTab.vue';
+import SecurityTab from '@/components/pages/account-settings/SecurityTab.vue';
+
+/*tab*/
+const tab = ref(null);
+
+// template breadcrumb
+const page = ref({ title: 'Account Setting' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Account Setting',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row class="justify-center">
+    <!--Account Settings tabs-->
+    <v-col cols="12" md="12">
+      <v-card elevation="10" class=" " rounded="md">
+        <v-tabs v-model="tab" bg-color="transparent"  height="70" color="primary">
+          <v-tab value="Account" class="text-medium-emphasis" ><UserCircleIcon class="mr-2" size="20"/> Account</v-tab>
+          <v-tab value="Notification"  class="text-medium-emphasis"><BellIcon class="mr-2" size="20"/>Notification</v-tab>
+          <v-tab value="Bills"  class="text-medium-emphasis"><ArticleIcon class="mr-2" size="20"/>Bills</v-tab>
+          <v-tab value="Security"  class="text-medium-emphasis"><LockIcon class="mr-2" size="20"/>Security</v-tab>
+        </v-tabs>
+        <v-divider></v-divider>
+        <v-card-text class="pa-sm-6 pa-3 pb-sm-6 pb-6">
+          <v-window v-model="tab">
+            <v-window-item value="Account">
+              <AccountTab/>
+            </v-window-item>
+            <v-window-item value="Notification">
+              <NotificationTab/>
+            </v-window-item>
+            <v-window-item value="Bills">
+              <BillsTab/>
+            </v-window-item>
+            <v-window-item value="Security">
+              <SecurityTab/>
+            </v-window-item>
+          </v-window>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/tables/datatables/CrudTable.vue b/src/pages/tables/datatables/CrudTable.vue
new file mode 100644
index 0000000..58b85bc
--- /dev/null
+++ b/src/pages/tables/datatables/CrudTable.vue
@@ -0,0 +1,272 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import { Icon } from '@iconify/vue';
+const page = ref({ title: 'CRUD Table' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'CRUD Table',
+    disabled: true,
+    href: '#'
+  }
+]);
+
+const dialog = ref(false)
+const dialogDelete = ref(false)
+const headers = ref([
+  {
+    title: 'Dessert (100g serving)',
+    align: 'start',
+    sortable: false,
+    key: 'name',
+  },
+  { title: 'Calories', key: 'calories' },
+  { title: 'Fat (g)', key: 'fat' },
+  { title: 'Carbs (g)', key: 'carbs' },
+  { title: 'Protein (g)', key: 'protein' },
+  { title: 'Actions', key: 'actions', sortable: false },
+])
+const desserts = ref([])
+const editedIndex = ref(-1)
+const editedItem = ref({
+  name: '',
+  calories: 0,
+  fat: 0,
+  carbs: 0,
+  protein: 0,
+})
+const defaultItem = ref({
+  name: '',
+  calories: 0,
+  fat: 0,
+  carbs: 0,
+  protein: 0,
+})
+const formTitle = computed(() => {
+  return editedIndex.value === -1 ? 'New Item' : 'Edit Item'
+})
+function initialize() {
+  desserts.value = [
+    {
+      name: 'Frozen Yogurt',
+      calories: 159,
+      fat: 6,
+      carbs: 24,
+      protein: 4,
+    },
+    {
+      name: 'Ice cream sandwich',
+      calories: 237,
+      fat: 9,
+      carbs: 37,
+      protein: 4.3,
+    },
+    {
+      name: 'Eclair',
+      calories: 262,
+      fat: 16,
+      carbs: 23,
+      protein: 6,
+    },
+    {
+      name: 'Cupcake',
+      calories: 305,
+      fat: 3.7,
+      carbs: 67,
+      protein: 4.3,
+    },
+    {
+      name: 'Gingerbread',
+      calories: 356,
+      fat: 16,
+      carbs: 49,
+      protein: 3.9,
+    },
+    {
+      name: 'Jelly bean',
+      calories: 375,
+      fat: 0,
+      carbs: 94,
+      protein: 0,
+    },
+    {
+      name: 'Lollipop',
+      calories: 392,
+      fat: 0.2,
+      carbs: 98,
+      protein: 0,
+    },
+    {
+      name: 'Honeycomb',
+      calories: 408,
+      fat: 3.2,
+      carbs: 87,
+      protein: 6.5,
+    },
+    {
+      name: 'Donut',
+      calories: 452,
+      fat: 25,
+      carbs: 51,
+      protein: 4.9,
+    },
+    {
+      name: 'KitKat',
+      calories: 518,
+      fat: 26,
+      carbs: 65,
+      protein: 7,
+    },
+  ]
+}
+function editItem(item) {
+  editedIndex.value = desserts.value.indexOf(item)
+  editedItem.value = Object.assign({}, item)
+  dialog.value = true
+}
+function deleteItem(item) {
+  editedIndex.value = desserts.value.indexOf(item)
+  editedItem.value = Object.assign({}, item)
+  dialogDelete.value = true
+}
+function deleteItemConfirm() {
+  desserts.value.splice(editedIndex.value, 1)
+  closeDelete()
+}
+function close() {
+  dialog.value = false
+  nextTick(() => {
+    editedItem.value = Object.assign({}, defaultItem.value)
+    editedIndex.value = -1
+  })
+}
+function closeDelete() {
+  dialogDelete.value = false
+  nextTick(() => {
+    editedItem.value = Object.assign({}, defaultItem.value)
+    editedIndex.value = -1
+  })
+}
+function save() {
+  if (editedIndex.value > -1) {
+    Object.assign(desserts.value[editedIndex.value], editedItem.value)
+  } else {
+    desserts.value.push(editedItem.value)
+  }
+  close()
+}
+watch(dialog, val => {
+  val || close()
+})
+watch(dialogDelete, val => {
+  val || closeDelete()
+})
+initialize()
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Crud Table">
+        <v-data-table class="border rounded-md datatabels" :headers="headers" :items="desserts" :sort-by="[{ key: 'calories', order: 'asc' }]">
+          <template v-slot:top>
+            <v-toolbar class="bg-lightprimary" flat>
+              <v-toolbar-title>My Crud Table</v-toolbar-title>
+              <v-divider class="mx-4" inset vertical></v-divider>
+              <v-spacer></v-spacer>
+              <v-dialog v-model="dialog" max-width="500px">
+                <template v-slot:activator="{ props }">
+                  <v-btn color="primary"  variant="flat" dark  v-bind="props" >Add New Item</v-btn>
+                </template>
+                <v-card>
+                  <v-card-title class="pa-4 bg-primary">
+                    <span class="text-h5">{{ formTitle }}</span>
+                  </v-card-title>
+
+                  <v-card-text>
+                    <v-container class="px-0">
+                      <v-row>
+                        <v-col cols="12" sm="6" md="4">
+                          <v-text-field v-model="editedItem.name"
+                                        label="Dessert name"></v-text-field>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="4">
+                          <v-text-field v-model="editedItem.calories"
+                                        label="Calories"></v-text-field>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="4">
+                          <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="4">
+                          <v-text-field v-model="editedItem.carbs"
+                                        label="Carbs (g)"></v-text-field>
+                        </v-col>
+                        <v-col cols="12" sm="6" md="4">
+                          <v-text-field v-model="editedItem.protein"
+                                        label="Protein (g)"></v-text-field>
+                        </v-col>
+                      </v-row>
+                    </v-container>
+                  </v-card-text>
+
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" variant="flat" dark   @click="close">
+                      Cancel
+                    </v-btn>
+                    <v-btn color="primary" variant="flat" dark   @click="save">
+                      Save
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
+              <v-dialog v-model="dialogDelete" max-width="500px">
+                <v-card>
+                  <v-card-title class="text-h5 text-center py-6">Are you sure you want to delete this item?</v-card-title>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" variant="flat" dark   @click="closeDelete">Cancel</v-btn>
+                    <v-btn color="primary" variant="flat" dark   @click="deleteItemConfirm">OK</v-btn>
+                    <v-spacer></v-spacer>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
+            </v-toolbar>
+          </template>
+          <template v-slot:item.actions="{ item }">
+            <div class="d-flex gap-3">
+              <Icon
+                icon="solar:pen-new-square-broken"
+                height="20"
+                class="text-primary cursor-pointer"
+                size="small"
+                @click="editItem(item)"
+              />
+              <Icon
+                icon="solar:trash-bin-minimalistic-linear"
+                height="20"
+                class="text-error cursor-pointer"
+                size="small"
+                @click="deleteItem(item)"
+              />
+            </div>
+          </template>
+          <template v-slot:no-data>
+            <v-btn color="primary" @click="initialize">
+              Reset
+            </v-btn>
+          </template>
+        </v-data-table>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
+  
+  
\ No newline at end of file
diff --git a/src/pages/tables/datatables/Filtering.vue b/src/pages/tables/datatables/Filtering.vue
new file mode 100644
index 0000000..af22d0f
--- /dev/null
+++ b/src/pages/tables/datatables/Filtering.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import { BasicDatatables, UppercaseFilter,Filtrable } from '@/_mockApis/components/datatable/dataTable';
+const page = ref({ title: 'Data Table Filtering' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Data Table Filtering',
+    disabled: true,
+    href: '#'
+  }
+]);
+
+/*Header Data*/
+const search = ref();
+const customsearch = ref();
+const headers : any = ref([
+  { title: 'Name', align: 'start', key: 'name' },
+  { title: 'Project Name', align: 'start', key: 'project' },
+  { title: 'Post', align: 'start', key: 'post' },
+  { title: 'Status', align: 'start', key: 'status' },
+  { title: 'Budget', align: 'end', key: 'budget' },
+])
+
+const filtrable = ref('')
+
+function filterOnlyCapsText(value: { toString: () => string; } | null, query: string | null, item: any) {
+  return value != null &&
+    query != null &&
+    typeof value === 'string' &&
+    value.toString().toLocaleUpperCase().indexOf(query) !== -1
+}
+
+
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Basic Filter">
+        <v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
+                      class="mb-5" />
+        <v-data-table items-per-page="5" :headers="headers"  :items="BasicDatatables" :search="search"
+                      class="border rounded-md datatabels">
+        </v-data-table>
+      </UiParentCard>
+
+      <UiParentCard title="Custom Filter" class="mt-6">
+        <v-text-field v-model="customsearch" append-inner-icon="mdi-magnify" label="Search (UPPER CASE ONLY)"
+                      single-line hide-details class="mb-5" />
+        <v-data-table items-per-page="5" :headers="headers" :items="UppercaseFilter" :search="customsearch"
+                      :custom-filter="filterOnlyCapsText" class="border rounded-md datatabels">
+        </v-data-table>
+      </UiParentCard>
+
+      <UiParentCard title="Filterable" class="mt-6">
+
+        <v-card flat>
+          <v-card-title class="d-flex align-center px-0 pb-3">
+
+            My Table
+
+            <v-spacer></v-spacer>
+
+            <v-text-field v-model="filtrable" prepend-inner-icon="mdi-magnify" density="compact" label="Search"
+                          single-line flat hide-details variant="solo-filled"></v-text-field>
+          </v-card-title>
+
+          <v-divider></v-divider>
+          <v-data-table v-model:search="filtrable" :items="Filtrable">
+            <template v-slot:header.stock>
+              <div class="text-end">Stock</div>
+            </template>
+
+            <template v-slot:item.image="{ item }">
+              <v-card class="my-2" elevation="2">
+                <v-img :src="`${item.image}`"
+                       height="80" class="rounded-md" cover></v-img>
+              </v-card>
+            </template>
+
+            <template v-slot:item.rating="{ item }">
+              <v-rating :model-value="item.rating" color="warning" density="compact" size="small"
+                        readonly></v-rating>
+            </template>
+
+            <template v-slot:item.stock="{ item }">
+              <div class="text-end">
+                <v-chip :color="item.stock ? 'success' : 'error'"
+                        :text="item.stock ? 'In stock' : 'Out of stock'" class="text-uppercase" label
+                        size="small"></v-chip>
+              </div>
+            </template>
+          </v-data-table>
+        </v-card>
+
+      </UiParentCard>
+
+
+    </v-col>
+  </v-row>
+</template>
+
diff --git a/src/pages/tables/datatables/Selection.vue b/src/pages/tables/datatables/Selection.vue
new file mode 100644
index 0000000..0a5dd7c
--- /dev/null
+++ b/src/pages/tables/datatables/Selection.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import { SelectedRow, BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
+const page = ref({ title: 'Data Tables Selection' });
+const selected = ref();
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Data Tables Selection',
+    disabled: true,
+    href: '#'
+  }
+]);
+
+/*Header Data*/
+const headers :any = ref([
+  { title: 'Name', align: 'start', key: 'name' },
+  { title: 'Project Name', align: 'start', key: 'project' },
+  { title: 'Post', align: 'start', key: 'post' },
+  { title: 'Status', align: 'start', key: 'status' },
+  { title: 'Budget', align: 'end', key: 'budget' },
+])
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Basic Selection" class="">
+        <v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name" show-select
+                      class="border rounded-md datatabels">
+        </v-data-table>
+      </UiParentCard>
+      <UiParentCard title="Selected Values" class="mt-6">
+        <v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
+                      v-model="selected" return-object show-select class="border rounded-md datatabels">
+        </v-data-table>
+        <v-card class="elevation-0 border mt-3 pa-4">
+          <pre>{{ selected }}</pre>
+        </v-card>
+      </UiParentCard>
+      <UiParentCard title="Selectable Rows" class="mt-6">
+        <v-data-table items-per-page="5" :headers="headers" :items="SelectedRow" item-value="name"
+                      item-selectable="selectable" show-select class="border rounded-md datatabels">
+        </v-data-table>
+      </UiParentCard>
+      <UiParentCard title="Select Strategies" class="mt-6">
+        <v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
+                      select-strategy="single" show-select class="border rounded-md datatabels">
+        </v-data-table>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
+
diff --git a/src/pages/ui-components/Accordion.vue b/src/pages/ui-components/Accordion.vue
new file mode 100644
index 0000000..706959e
--- /dev/null
+++ b/src/pages/ui-components/Accordion.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+import Basic from '@/components/ui-components/expansionpanel/Basic.vue';
+import DefaultExpand from '@/components/ui-components/expansionpanel/DefaultExpand.vue';
+import Inset from '@/components/ui-components/expansionpanel/Inset.vue';
+import Popout from '@/components/ui-components/expansionpanel/Popout.vue';
+import CustomizedIcon from '@/components/ui-components/expansionpanel/CustomizedIcon.vue';
+import Advance from '@/components/ui-components/expansionpanel/Advance.vue';
+// template breadcrumb
+const page = ref({ title: 'Accordian' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Accordian',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Accordian">
+        <v-row>
+          <!-- Basic -->
+          <v-col cols="12" >
+            <UiChildCard title="Basic">
+              <Basic/>
+            </UiChildCard>
+          </v-col>
+          <!-- Default Expand -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Default Expand">
+              <DefaultExpand/>
+            </UiChildCard>
+          </v-col>
+          <!-- Inset -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Inset">
+              <Inset/>
+            </UiChildCard>
+          </v-col>
+          <!-- Popout -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Popout">
+              <Popout/>
+            </UiChildCard>
+          </v-col>
+          <!-- Advance -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Advance">
+              <Advance/>
+            </UiChildCard>
+          </v-col>
+
+          <!-- Customized Icon -->
+          <v-col cols="12">
+            <UiChildCard title="Customized Icon">
+              <CustomizedIcon/>
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/pages/ui-components/Alerts.vue b/src/pages/ui-components/Alerts.vue
similarity index 100%
rename from pages/ui-components/Alerts.vue
rename to src/pages/ui-components/Alerts.vue
diff --git a/src/pages/ui-components/Avatar.vue b/src/pages/ui-components/Avatar.vue
new file mode 100644
index 0000000..4d2e044
--- /dev/null
+++ b/src/pages/ui-components/Avatar.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+// icons
+import { UserIcon, SearchIcon, FolderIcon, ContrastIcon } from 'vue-tabler-icons';
+import BasicAvatar from '@/components/ui-components/avatar/BasicAvatar.vue';
+import ImageAvatar from '@/components/ui-components/avatar/ImageAvatar.vue';
+import LetterAvatar from '@/components/ui-components/avatar/LetterAvatar.vue';
+import IconAvatar from '@/components/ui-components/avatar/IconAvatar.vue';
+import VariantAvatar from '@/components/ui-components/avatar/VariantAvatar.vue';
+import SizeAvatar from '@/components/ui-components/avatar/SizeAvatar.vue';
+
+
+// template breadcrumb
+const page = ref({ title: 'Avatar' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Avatar',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Avatar">
+        <v-row>
+          <!-- Basic Avatar -->
+          <!-- <v-col cols="12" lg="4">
+              <UiChildCard title="Basic Avatar">
+                 <BasicAvatar/>
+              </UiChildCard>
+          </v-col> -->
+          <!-- Image Avatar -->
+          <v-col cols="12" lg="4">
+            <UiChildCard title="Image Avatars">
+              <ImageAvatar/>
+            </UiChildCard>
+          </v-col>
+          <!-- Letter Avatar -->
+          <v-col cols="12" lg="4">
+            <UiChildCard title="Letter Avatars">
+              <LetterAvatar/>
+            </UiChildCard>
+          </v-col>
+          <!-- Icon Avatar -->
+          <v-col cols="12" lg="4">
+            <UiChildCard title="Icon Avatars">
+              <IconAvatar/>
+            </UiChildCard>
+          </v-col>
+          <!-- Variant Avatar -->
+          <v-col cols="12" lg="4">
+            <UiChildCard title="Variant" class="pb-10">
+              <VariantAvatar/>
+            </UiChildCard>
+          </v-col>
+          <!-- Size Avatar -->
+          <v-col cols="12" lg="8">
+            <UiChildCard title="Sizes">
+              <SizeAvatar/>
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/pages/ui-components/Buttons.vue b/src/pages/ui-components/Buttons.vue
similarity index 100%
rename from pages/ui-components/Buttons.vue
rename to src/pages/ui-components/Buttons.vue
diff --git a/pages/ui-components/Cards.vue b/src/pages/ui-components/Cards.vue
similarity index 100%
rename from pages/ui-components/Cards.vue
rename to src/pages/ui-components/Cards.vue
diff --git a/src/pages/ui-components/Chip.vue b/src/pages/ui-components/Chip.vue
new file mode 100644
index 0000000..5aa5ab9
--- /dev/null
+++ b/src/pages/ui-components/Chip.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+import FilledColor from '@/components/ui-components/chip/FilledColor.vue';
+import Outlined from '@/components/ui-components/chip/Outlined.vue';
+import CustomIcon from '@/components/ui-components/chip/CustomIcon.vue';
+import CustomIconOutlined from '@/components/ui-components/chip/CustomIconOutlined.vue';
+import Disabled from '@/components/ui-components/chip/Disabled.vue';
+import Sizes from '@/components/ui-components/chip/Sizes.vue';
+import Closable from '@/components/ui-components/chip/Closable.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Chip' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Chip',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Chip">
+        <v-row>
+          <!-- Filled Color -->
+          <v-col cols="12" >
+            <UiChildCard title="Filled">
+              <FilledColor/>
+            </UiChildCard>
+          </v-col>
+          <!-- Outlined -->
+          <v-col cols="12" >
+            <UiChildCard title="Outlined">
+              <Outlined/>
+            </UiChildCard>
+          </v-col>
+          <!-- Label with Icon -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Custom Icon">
+              <CustomIcon/>
+            </UiChildCard>
+          </v-col>
+          <!-- Outlined Color -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Custom Outlined Icon">
+              <CustomIconOutlined/>
+            </UiChildCard>
+          </v-col>
+          <!-- Disabled -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Disabled">
+              <Disabled/>
+            </UiChildCard>
+          </v-col>
+          <!-- Sizes -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Sizes">
+              <Sizes/>
+            </UiChildCard>
+          </v-col>
+          <!-- Closable -->
+          <v-col cols="12" >
+            <UiChildCard title="Closable">
+              <Closable/>
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/ui-components/Dialogs.vue b/src/pages/ui-components/Dialogs.vue
new file mode 100644
index 0000000..42ca315
--- /dev/null
+++ b/src/pages/ui-components/Dialogs.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+import DialogsActivator from '@/components/ui-components/dialogs/DialogsActivator.vue';
+import DialogsModel from '@/components/ui-components/dialogs/DialogsModel.vue';
+import DialogsFullscreen from '@/components/ui-components/dialogs/DialogsFullscreen.vue';
+import DialogsTransitions from '@/components/ui-components/dialogs/DialogsTransitions.vue';
+import DialogsPersistent from '@/components/ui-components/dialogs/DialogsPersistent.vue';
+import DialogsScrollable from '@/components/ui-components/dialogs/DialogsScrollable.vue';
+import DialogsForm from '@/components/ui-components/dialogs/DialogsForm.vue';
+import DialogsNested from '@/components/ui-components/dialogs/DialogsNested.vue';
+// template breadcrumb
+const page = ref({ title: 'Dialog' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Dialog',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Dialog">
+        <v-row>
+          <v-col cols="12" sm="12" lg="4">
+            <UiChildCard title="Simple">
+              <DialogsActivator />
+            </UiChildCard>
+          </v-col>
+          <v-col cols="12" sm="12" lg="4">
+            <UiChildCard title="V-model">
+              <DialogsModel />
+            </UiChildCard>
+          </v-col>
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Transition">
+              <DialogsTransitions />
+            </UiChildCard>
+          </v-col>
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Form">
+              <DialogsForm />
+            </UiChildCard>
+          </v-col>
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Full screen">
+              <DialogsFullscreen />
+            </UiChildCard>
+          </v-col>
+
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Persistent">
+              <DialogsPersistent />
+            </UiChildCard>
+          </v-col>
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Scrollable">
+              <DialogsScrollable />
+            </UiChildCard>
+          </v-col>
+
+          <v-col cols="12" sm="12" lg="4" class="d-flex align-items-stretch">
+            <UiChildCard title="Nested Dialog">
+              <DialogsNested />
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/ui-components/List.vue b/src/pages/ui-components/List.vue
new file mode 100644
index 0000000..51f72eb
--- /dev/null
+++ b/src/pages/ui-components/List.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+import SimpleList from '@/components/ui-components/list/SimpleList.vue';
+import NestedList from '@/components/ui-components/list/NestedList.vue';
+import FolderList from '@/components/ui-components/list/FolderList.vue';
+import DisabledList from '@/components/ui-components/list/DisabledList.vue';
+import SwitchList from '@/components/ui-components/list/SwitchList.vue';
+import RoundedList from '@/components/ui-components/list/RoundedList.vue';
+import CustomAlignList from '@/components/ui-components/list/CustomAlignList.vue';
+import ScrollableList from '@/components/ui-components/list/ScrollableList.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Lists' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Lists',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="List">
+        <v-row>
+          <!-- Basic -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Simple List">
+              <SimpleList/>
+            </UiChildCard>
+          </v-col>
+          <!-- Nested List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Nested List">
+              <NestedList/>
+            </UiChildCard>
+          </v-col>
+          <!-- Folder List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Folder List">
+              <FolderList/>
+            </UiChildCard>
+          </v-col>
+          <!-- DisabledList-->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Disabled List">
+              <DisabledList/>
+            </UiChildCard>
+          </v-col>
+          <!-- Radio Button List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Switch List">
+              <SwitchList/>
+            </UiChildCard>
+          </v-col>
+
+          <!-- Rounded List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Rounded List">
+              <RoundedList/>
+            </UiChildCard>
+          </v-col>
+          <!-- Custom Aligned List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Custom Aligned List">
+              <CustomAlignList/>
+            </UiChildCard>
+          </v-col>
+          <!-- Scrollable List -->
+          <v-col cols="12" lg="6">
+            <UiChildCard title="Scrollable List">
+              <ScrollableList/>
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/ui-components/Menus.vue b/src/pages/ui-components/Menus.vue
new file mode 100644
index 0000000..1d3effc
--- /dev/null
+++ b/src/pages/ui-components/Menus.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+import MenusAnchor from "@/components/ui-components/menus/MenusAnchor.vue";
+import MenusHover from "@/components/ui-components/menus/MenusHover.vue";
+import MenusActivatorTooltip from "@/components/ui-components/menus/MenusActivatorTooltip.vue";
+import MenusPopover from "@/components/ui-components/menus/MenusPopover.vue";
+
+const page = ref({ title: "Menus" });
+const breadcrumbs = ref([
+  {
+    text: "Dashboard",
+    disabled: false,
+    href: "#",
+  },
+  {
+    text: "Menus",
+    disabled: true,
+    href: "#",
+  },
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb
+    :title="page.title"
+    :breadcrumbs="breadcrumbs"
+  ></BaseBreadcrumb>
+  <v-row>
+    <UiParentCard title="Menus">
+      <v-row>
+        <v-col cols="12" sm="12" lg="6">
+          <UiChildCard title="Anchor">
+            <MenusAnchor />
+          </UiChildCard>
+        </v-col>
+        <v-col cols="12" sm="12" lg="6">
+          <UiChildCard title="Hover">
+            <MenusHover />
+          </UiChildCard>
+        </v-col>
+        <v-col cols="12" sm="12" lg="6">
+          <UiChildCard title="Activator and tooltip">
+            <MenusActivatorTooltip />
+          </UiChildCard>
+        </v-col>
+        <v-col cols="12" sm="12" lg="6">
+          <UiChildCard title="Popover">
+            <MenusPopover />
+          </UiChildCard>
+        </v-col>
+      </v-row>
+    </UiParentCard>
+  </v-row>
+</template>
diff --git a/pages/ui-components/Tables.vue b/src/pages/ui-components/Tables.vue
similarity index 100%
rename from pages/ui-components/Tables.vue
rename to src/pages/ui-components/Tables.vue
diff --git a/src/pages/ui-components/Tabs.vue b/src/pages/ui-components/Tabs.vue
new file mode 100644
index 0000000..8fbf762
--- /dev/null
+++ b/src/pages/ui-components/Tabs.vue
@@ -0,0 +1,100 @@
+
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+// icons
+import { UserIcon, UserPlusIcon, UsersIcon, PhotoIcon, StarIcon, FileDescriptionIcon, CreditCardIcon, KeyIcon } from 'vue-tabler-icons';
+
+import BasicTabs from "@/components/ui-components/tabs/BasicTabs.vue";
+import CenterTabs from "@/components/ui-components/tabs/CenterTabs.vue";
+import ColorTabs from "@/components/ui-components/tabs/ColorTabs.vue";
+import DisableTabs from "@/components/ui-components/tabs/DisableTabs.vue";
+import IconsWithLabelTabs from "@/components/ui-components/tabs/IconsWithLabelTabs.vue";
+import IconTabs from "@/components/ui-components/tabs/IconTabs.vue";
+import CustomIcons from "@/components/ui-components/tabs/CustomIcons.vue";
+import AlignCenterTabs from "@/components/ui-components/tabs/AlignCenterTabs.vue";
+import AlignEndTabs from "@/components/ui-components/tabs/AlignEndTabs.vue";
+// template breadcrumb
+const page = ref({ title: 'Tabs' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Tabs',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12">
+      <UiParentCard title="Tabs">
+        <v-row>
+          <!-- Basic -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Basic">
+              <BasicTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- With Icons -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Stacked">
+              <IconsWithLabelTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Center -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Center Active">
+              <CenterTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Custom Icons -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Custom Icons">
+              <CustomIcons/>
+            </UiChildCard>
+          </v-col>
+          <!-- Align Center -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Align Center">
+              <AlignCenterTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Align End -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Align End">
+              <AlignEndTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Icons -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Icon">
+              <IconTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Disabled -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Disabled">
+              <DisableTabs/>
+            </UiChildCard>
+          </v-col>
+          <!-- Colors -->
+          <v-col cols="12" lg="12">
+            <UiChildCard title="Colors">
+              <ColorTabs/>
+            </UiChildCard>
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/ui-components/Tooltip.vue b/src/pages/ui-components/Tooltip.vue
new file mode 100644
index 0000000..829c3b3
--- /dev/null
+++ b/src/pages/ui-components/Tooltip.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+
+import SimpleTooltip from "@/components/ui-components/tooltip/SimpleTooltip.vue";
+import IconTooltip from "@/components/ui-components/tooltip/IconTooltip.vue";
+import ToggleTolltip from "@/components/ui-components/tooltip/ToggleTolltip.vue";
+const page = ref({ title: 'Tooltip' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Tooltip',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12" md="6">
+      <UiParentCard title="Simple">
+        <SimpleTooltip/>
+      </UiParentCard>
+    </v-col>
+    <v-col cols="12" md="6">
+      <UiParentCard title="Icon">
+        <IconTooltip/>
+      </UiParentCard>
+    </v-col>
+    <v-col cols="12">
+      <UiParentCard title="Toggle Tolltip">
+        <ToggleTolltip/>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/ui-components/Typography.vue b/src/pages/ui-components/Typography.vue
new file mode 100644
index 0000000..35a4da9
--- /dev/null
+++ b/src/pages/ui-components/Typography.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+import Heading from "@/components/style-components/typography/Heading.vue";
+import Opacity from "@/components/style-components/typography/Opacity.vue";
+import TextAlignment from "@/components/style-components/typography/TextAlignment.vue";
+import TextDecoration from "@/components/style-components/typography/TextDecoration.vue";
+import Default from "@/components/style-components/typography/DefaultText.vue";
+const page = ref({ title: 'Typography' });
+const breadcrumbs = ref([
+  {
+    text: 'Dashboard',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Typography',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12" md="12">
+      <UiParentCard title="Basic Typography">
+        <UiChildCard title="Heading">
+          <Heading/>
+        </UiChildCard>
+        <UiChildCard title="Default Text" class="mt-5">
+          <Default/>
+        </UiChildCard>
+        <UiChildCard title="Text-alignment" class="mt-5">
+          <TextAlignment/>
+        </UiChildCard>
+        <UiChildCard title="Decoration" class="mt-5">
+          <TextDecoration/>
+        </UiChildCard>
+        <UiChildCard title="Opacity" class="mt-5">
+          <Opacity/>
+        </UiChildCard>
+      </UiParentCard>
+    </v-col>
+  </v-row>
+</template>
diff --git a/pages/ui/Shadow.vue b/src/pages/ui/Shadow.vue
similarity index 100%
rename from pages/ui/Shadow.vue
rename to src/pages/ui/Shadow.vue
diff --git a/pages/ui/Typography.vue b/src/pages/ui/Typography.vue
similarity index 100%
rename from pages/ui/Typography.vue
rename to src/pages/ui/Typography.vue
diff --git a/src/pages/widgets/Banners.vue b/src/pages/widgets/Banners.vue
new file mode 100644
index 0000000..a6cdf91
--- /dev/null
+++ b/src/pages/widgets/Banners.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/*Call Components*/
+import WelcomCard from '@/components/widgets/banners/WelcomCard.vue';
+import Banner2 from "@/components/widgets/banners/Banner2.vue";
+import Banner3 from "@/components/widgets/banners/Banner3.vue";
+import Banner4 from "@/components/widgets/banners/Banner4.vue";
+import Banner5 from "@/components/widgets/banners/Banner5.vue";
+import Banner6 from "@/components/widgets/banners/Banner6.vue";
+/* Breadcrumb component */
+import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Banner Widgets' });
+const breadcrumbs = ref([
+  {
+    text: 'Home',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Banner Widgets',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <v-col cols="12" lg="8">
+      <!--Banner 1-->
+      <WelcomCard/>
+      <!--Banner 2-->
+      <Banner2/>
+      <v-row>
+        <!--Banner 3-->
+        <v-col cols="12" sm="6">
+          <Banner3/>
+        </v-col>
+        <!--Banner 4-->
+        <v-col cols="12" sm="6">
+          <Banner4/>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12" lg="4">
+      <!--Banner 5-->
+      <Banner5/>
+      <!--Banner 6-->
+      <Banner6/>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/widgets/Cards.vue b/src/pages/widgets/Cards.vue
new file mode 100644
index 0000000..9c1107e
--- /dev/null
+++ b/src/pages/widgets/Cards.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/* Breadcrumb component */
+import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
+import BlogCards from "@/components/widgets/cards/BlogCards.vue";
+import ProductCards from "@/components/widgets/cards/ProductCards.vue";
+import MusicCards from "@/components/widgets/cards/MusicCards.vue";
+import FollowerCards from "@/components/widgets/cards/FollowerCards.vue";
+import UserCards from "@/components/widgets/cards/UserCards.vue";
+import ProfileCards from "@/components/widgets/cards/ProfileCards.vue";
+import Settings from "@/components/widgets/cards/Settings.vue";
+import GiftCards from "@/components/widgets/cards/GiftCards.vue";
+import UpcommingActivityCard from "@/components/widgets/cards/UpcommingActivityCard.vue";
+import DailyActivities from '~/components/dashboards/dashboard2/DailyActivities.vue';
+import PaymentGateways from '@/components/widgets/cards/PaymentGateways.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Cards Widgets' });
+const breadcrumbs = ref([
+  {
+    text: 'Home',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Cards Widgets',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <!-- Blog cards -->
+    <v-col cols="12">
+      <BlogCards/>
+    </v-col>
+    <!-- Product cards -->
+    <v-col cols="12">
+      <ProductCards/>
+    </v-col>
+    <!-- Music cards -->
+    <v-col cols="12">
+      <MusicCards/>
+    </v-col>
+    <!-- Follower cards -->
+    <v-col cols="12">
+      <FollowerCards/>
+    </v-col>
+    <!-- User cards -->
+    <v-col cols="12">
+      <UserCards/>
+    </v-col>
+    <!-- Profile cards -->
+    <v-col cols="12">
+      <ProfileCards/>
+    </v-col>
+    <!-- Settings cards -->
+    <v-col cols="12" md="4">
+      <Settings/>
+    </v-col>
+    <!-- Gift cards -->
+    <v-col cols="12" md="8">
+      <GiftCards/>
+    </v-col>
+    <!-- Payment Gateways card -->
+    <v-col cols="12" md="4">
+      <PaymentGateways/>
+    </v-col>
+    <!-- Upcomming Activity card -->
+    <v-col cols="12" md="4">
+      <UpcommingActivityCard/>
+    </v-col>
+    <!-- Recent Transactions -->
+    <v-col cols="12" md="4">
+      <DailyActivities/>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/pages/widgets/Charts.vue b/src/pages/widgets/Charts.vue
new file mode 100644
index 0000000..0d31281
--- /dev/null
+++ b/src/pages/widgets/Charts.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+/* Breadcrumb component */
+import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
+
+/*Call Components*/
+import Followers from '@/components/widgets/charts/Followers.vue';
+import Views from '@/components/widgets/charts/Views.vue';
+import Earned from '@/components/widgets/charts/Earned.vue';
+import TotalEarning from '@/components/widgets/charts/TotalEarning.vue';
+import CurrentValue from '@/components/widgets/charts/CurrentValue.vue';
+import MostVisited from '@/components/widgets/charts/MostVisited.vue';
+import PageImpression from '@/components/widgets/charts/PageImpression.vue';
+import YearlyBreakup from '@/components/widgets/charts/YearlyBreakup.vue';
+import YearlySales from '@/components/widgets/charts/YearlySales.vue';
+import MonthlyEarnings from '@/components/widgets/charts/MonthlyEarnings.vue';
+import Customer from '@/components/widgets/charts/Customer.vue';
+import Projects from '@/components/widgets/charts/Projects.vue';
+import RevenueUpdates from '@/components/widgets/charts/RevenueUpdates.vue';
+import SalesOverview from '@/components/widgets/charts/SalesOverview.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Charts Widgets' });
+const breadcrumbs = ref([
+  {
+    text: 'Home',
+    disabled: false,
+    href: '#'
+  },
+  {
+    text: 'Charts Widgets',
+    disabled: true,
+    href: '#'
+  }
+]);
+</script>
+<template>
+  <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+  <v-row>
+    <!-- Followers Chart -->
+    <v-col cols="12" sm="3">
+      <Followers />
+    </v-col>
+    <!-- Views Chart -->
+    <v-col cols="12" sm="3">
+      <Views />
+    </v-col>
+    <!-- Earned Chart -->
+    <v-col cols="12" sm="3">
+      <Earned />
+    </v-col>
+    <!-- TotalEarning Chart -->
+    <v-col cols="12" sm="3">
+      <TotalEarning />
+    </v-col>
+    <!-- Current Value -->
+    <v-col cols="12">
+      <CurrentValue />
+    </v-col>
+    <v-col cols="12" md="4">
+      <v-row>
+        <v-col cols="12">
+          <YearlyBreakup />
+        </v-col>
+        <v-col cols="12">
+          <MonthlyEarnings />
+        </v-col>
+        <v-col cols="12">
+          <MostVisited />
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col cols="12" md="4">
+      <v-row>
+        <v-col cols="12">
+          <YearlySales />
+        </v-col>
+        <v-col cols="12">
+          <PageImpression />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" sm="6">
+          <Customer/>
+        </v-col>
+        <v-col cols="12" sm="6">
+          <Projects />
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12" md="4">
+      <v-row>
+        <v-col cols="12">
+          <RevenueUpdates />
+        </v-col>
+        <v-col cols="12">
+          <SalesOverview/>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
diff --git a/plugins/i18n.ts b/src/plugins/i18n.ts
similarity index 100%
rename from plugins/i18n.ts
rename to src/plugins/i18n.ts
diff --git a/plugins/vuetify.ts b/src/plugins/vuetify.ts
similarity index 100%
rename from plugins/vuetify.ts
rename to src/plugins/vuetify.ts
diff --git a/pnpm-lock.yaml b/src/pnpm-lock.yaml
similarity index 100%
rename from pnpm-lock.yaml
rename to src/pnpm-lock.yaml
diff --git a/public/favicon.ico b/src/public/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to src/public/favicon.ico
diff --git a/public/favicon.svg b/src/public/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to src/public/favicon.svg
diff --git a/public/images/backgrounds/errorimg.svg b/src/public/images/backgrounds/errorimg.svg
similarity index 100%
rename from public/images/backgrounds/errorimg.svg
rename to src/public/images/backgrounds/errorimg.svg
diff --git a/public/images/backgrounds/rupee.png b/src/public/images/backgrounds/rupee.png
similarity index 100%
rename from public/images/backgrounds/rupee.png
rename to src/public/images/backgrounds/rupee.png
diff --git a/public/images/blog/blog-img1.jpg b/src/public/images/blog/blog-img1.jpg
similarity index 100%
rename from public/images/blog/blog-img1.jpg
rename to src/public/images/blog/blog-img1.jpg
diff --git a/public/images/blog/blog-img2.jpg b/src/public/images/blog/blog-img2.jpg
similarity index 100%
rename from public/images/blog/blog-img2.jpg
rename to src/public/images/blog/blog-img2.jpg
diff --git a/public/images/blog/blog-img3.jpg b/src/public/images/blog/blog-img3.jpg
similarity index 100%
rename from public/images/blog/blog-img3.jpg
rename to src/public/images/blog/blog-img3.jpg
diff --git a/public/images/logos/dark-logo.svg b/src/public/images/logos/dark-logo.svg
similarity index 100%
rename from public/images/logos/dark-logo.svg
rename to src/public/images/logos/dark-logo.svg
diff --git a/public/images/logos/icon.svg b/src/public/images/logos/icon.svg
similarity index 100%
rename from public/images/logos/icon.svg
rename to src/public/images/logos/icon.svg
diff --git a/public/images/logos/light-logo.svg b/src/public/images/logos/light-logo.svg
similarity index 100%
rename from public/images/logos/light-logo.svg
rename to src/public/images/logos/light-logo.svg
diff --git a/public/images/logos/logo-adminmart.svg b/src/public/images/logos/logo-adminmart.svg
similarity index 100%
rename from public/images/logos/logo-adminmart.svg
rename to src/public/images/logos/logo-adminmart.svg
diff --git a/public/images/logos/logo-icon.svg b/src/public/images/logos/logo-icon.svg
similarity index 100%
rename from public/images/logos/logo-icon.svg
rename to src/public/images/logos/logo-icon.svg
diff --git a/public/images/logos/logo.svg b/src/public/images/logos/logo.svg
similarity index 100%
rename from public/images/logos/logo.svg
rename to src/public/images/logos/logo.svg
diff --git a/public/images/products/dash-prd-1.jpg b/src/public/images/products/dash-prd-1.jpg
similarity index 100%
rename from public/images/products/dash-prd-1.jpg
rename to src/public/images/products/dash-prd-1.jpg
diff --git a/public/images/products/dash-prd-2.jpg b/src/public/images/products/dash-prd-2.jpg
similarity index 100%
rename from public/images/products/dash-prd-2.jpg
rename to src/public/images/products/dash-prd-2.jpg
diff --git a/public/images/products/dash-prd-3.jpg b/src/public/images/products/dash-prd-3.jpg
similarity index 100%
rename from public/images/products/dash-prd-3.jpg
rename to src/public/images/products/dash-prd-3.jpg
diff --git a/public/images/products/dash-prd-4.jpg b/src/public/images/products/dash-prd-4.jpg
similarity index 100%
rename from public/images/products/dash-prd-4.jpg
rename to src/public/images/products/dash-prd-4.jpg
diff --git a/public/images/profile/user-1.jpg b/src/public/images/profile/user-1.jpg
similarity index 100%
rename from public/images/profile/user-1.jpg
rename to src/public/images/profile/user-1.jpg
diff --git a/public/images/profile/user-2.jpg b/src/public/images/profile/user-2.jpg
similarity index 100%
rename from public/images/profile/user-2.jpg
rename to src/public/images/profile/user-2.jpg
diff --git a/public/images/profile/user-3.jpg b/src/public/images/profile/user-3.jpg
similarity index 100%
rename from public/images/profile/user-3.jpg
rename to src/public/images/profile/user-3.jpg
diff --git a/public/images/technology/angular-cat-icon.svg b/src/public/images/technology/angular-cat-icon.svg
similarity index 100%
rename from public/images/technology/angular-cat-icon.svg
rename to src/public/images/technology/angular-cat-icon.svg
diff --git a/public/images/technology/bt-cat-icon.svg b/src/public/images/technology/bt-cat-icon.svg
similarity index 100%
rename from public/images/technology/bt-cat-icon.svg
rename to src/public/images/technology/bt-cat-icon.svg
diff --git a/public/images/technology/next-cat-icon.svg b/src/public/images/technology/next-cat-icon.svg
similarity index 100%
rename from public/images/technology/next-cat-icon.svg
rename to src/public/images/technology/next-cat-icon.svg
diff --git a/public/images/technology/nuxt-cat-icon.svg b/src/public/images/technology/nuxt-cat-icon.svg
similarity index 100%
rename from public/images/technology/nuxt-cat-icon.svg
rename to src/public/images/technology/nuxt-cat-icon.svg
diff --git a/public/images/technology/react-cat-icon.svg b/src/public/images/technology/react-cat-icon.svg
similarity index 100%
rename from public/images/technology/react-cat-icon.svg
rename to src/public/images/technology/react-cat-icon.svg
diff --git a/public/images/technology/tailwind-icon.svg b/src/public/images/technology/tailwind-icon.svg
similarity index 100%
rename from public/images/technology/tailwind-icon.svg
rename to src/public/images/technology/tailwind-icon.svg
diff --git a/public/images/technology/vue-cat-icon.svg b/src/public/images/technology/vue-cat-icon.svg
similarity index 100%
rename from public/images/technology/vue-cat-icon.svg
rename to src/public/images/technology/vue-cat-icon.svg
diff --git a/scss/_override.scss b/src/scss/_override.scss
similarity index 100%
rename from scss/_override.scss
rename to src/scss/_override.scss
diff --git a/scss/_variables.scss b/src/scss/_variables.scss
similarity index 100%
rename from scss/_variables.scss
rename to src/scss/_variables.scss
diff --git a/scss/components/_VAlert.scss b/src/scss/components/_VAlert.scss
similarity index 100%
rename from scss/components/_VAlert.scss
rename to src/scss/components/_VAlert.scss
diff --git a/scss/components/_VBreadcrumb.scss b/src/scss/components/_VBreadcrumb.scss
similarity index 100%
rename from scss/components/_VBreadcrumb.scss
rename to src/scss/components/_VBreadcrumb.scss
diff --git a/scss/components/_VButtons.scss b/src/scss/components/_VButtons.scss
similarity index 100%
rename from scss/components/_VButtons.scss
rename to src/scss/components/_VButtons.scss
diff --git a/scss/components/_VCard.scss b/src/scss/components/_VCard.scss
similarity index 100%
rename from scss/components/_VCard.scss
rename to src/scss/components/_VCard.scss
diff --git a/scss/components/_VCarousel.scss b/src/scss/components/_VCarousel.scss
similarity index 100%
rename from scss/components/_VCarousel.scss
rename to src/scss/components/_VCarousel.scss
diff --git a/scss/components/_VChip.scss b/src/scss/components/_VChip.scss
similarity index 100%
rename from scss/components/_VChip.scss
rename to src/scss/components/_VChip.scss
diff --git a/scss/components/_VDatatables.scss b/src/scss/components/_VDatatables.scss
similarity index 100%
rename from scss/components/_VDatatables.scss
rename to src/scss/components/_VDatatables.scss
diff --git a/scss/components/_VExpansionpanel.scss b/src/scss/components/_VExpansionpanel.scss
similarity index 100%
rename from scss/components/_VExpansionpanel.scss
rename to src/scss/components/_VExpansionpanel.scss
diff --git a/scss/components/_VField.scss b/src/scss/components/_VField.scss
similarity index 100%
rename from scss/components/_VField.scss
rename to src/scss/components/_VField.scss
diff --git a/scss/components/_VInput.scss b/src/scss/components/_VInput.scss
similarity index 100%
rename from scss/components/_VInput.scss
rename to src/scss/components/_VInput.scss
diff --git a/scss/components/_VLabs.scss b/src/scss/components/_VLabs.scss
similarity index 100%
rename from scss/components/_VLabs.scss
rename to src/scss/components/_VLabs.scss
diff --git a/scss/components/_VList.scss b/src/scss/components/_VList.scss
similarity index 100%
rename from scss/components/_VList.scss
rename to src/scss/components/_VList.scss
diff --git a/scss/components/_VNavigationDrawer.scss b/src/scss/components/_VNavigationDrawer.scss
similarity index 100%
rename from scss/components/_VNavigationDrawer.scss
rename to src/scss/components/_VNavigationDrawer.scss
diff --git a/scss/components/_VPagination.scss b/src/scss/components/_VPagination.scss
similarity index 100%
rename from scss/components/_VPagination.scss
rename to src/scss/components/_VPagination.scss
diff --git a/scss/components/_VSelectionControl.scss b/src/scss/components/_VSelectionControl.scss
similarity index 100%
rename from scss/components/_VSelectionControl.scss
rename to src/scss/components/_VSelectionControl.scss
diff --git a/scss/components/_VShadow.scss b/src/scss/components/_VShadow.scss
similarity index 100%
rename from scss/components/_VShadow.scss
rename to src/scss/components/_VShadow.scss
diff --git a/scss/components/_VStepper.scss b/src/scss/components/_VStepper.scss
similarity index 100%
rename from scss/components/_VStepper.scss
rename to src/scss/components/_VStepper.scss
diff --git a/scss/components/_VSwitch.scss b/src/scss/components/_VSwitch.scss
similarity index 100%
rename from scss/components/_VSwitch.scss
rename to src/scss/components/_VSwitch.scss
diff --git a/scss/components/_VTable.scss b/src/scss/components/_VTable.scss
similarity index 100%
rename from scss/components/_VTable.scss
rename to src/scss/components/_VTable.scss
diff --git a/scss/components/_VTabs.scss b/src/scss/components/_VTabs.scss
similarity index 100%
rename from scss/components/_VTabs.scss
rename to src/scss/components/_VTabs.scss
diff --git a/scss/components/_VTextField.scss b/src/scss/components/_VTextField.scss
similarity index 100%
rename from scss/components/_VTextField.scss
rename to src/scss/components/_VTextField.scss
diff --git a/scss/components/_VTextarea.scss b/src/scss/components/_VTextarea.scss
similarity index 100%
rename from scss/components/_VTextarea.scss
rename to src/scss/components/_VTextarea.scss
diff --git a/scss/components/_VTooltip.scss b/src/scss/components/_VTooltip.scss
similarity index 100%
rename from scss/components/_VTooltip.scss
rename to src/scss/components/_VTooltip.scss
diff --git a/scss/front/_general.scss b/src/scss/front/_general.scss
similarity index 100%
rename from scss/front/_general.scss
rename to src/scss/front/_general.scss
diff --git a/scss/front/_header.scss b/src/scss/front/_header.scss
similarity index 100%
rename from scss/front/_header.scss
rename to src/scss/front/_header.scss
diff --git a/scss/landingpage/_general.scss b/src/scss/landingpage/_general.scss
similarity index 100%
rename from scss/landingpage/_general.scss
rename to src/scss/landingpage/_general.scss
diff --git a/scss/landingpage/_header.scss b/src/scss/landingpage/_header.scss
similarity index 100%
rename from scss/landingpage/_header.scss
rename to src/scss/landingpage/_header.scss
diff --git a/scss/layout/_container.scss b/src/scss/layout/_container.scss
similarity index 100%
rename from scss/layout/_container.scss
rename to src/scss/layout/_container.scss
diff --git a/scss/layout/_customizer.scss b/src/scss/layout/_customizer.scss
similarity index 100%
rename from scss/layout/_customizer.scss
rename to src/scss/layout/_customizer.scss
diff --git a/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
similarity index 100%
rename from scss/layout/_dark.scss
rename to src/scss/layout/_dark.scss
diff --git a/scss/layout/_horizontal.scss b/src/scss/layout/_horizontal.scss
similarity index 100%
rename from scss/layout/_horizontal.scss
rename to src/scss/layout/_horizontal.scss
diff --git a/scss/layout/_reboot.scss b/src/scss/layout/_reboot.scss
similarity index 100%
rename from scss/layout/_reboot.scss
rename to src/scss/layout/_reboot.scss
diff --git a/scss/layout/_rtl.scss b/src/scss/layout/_rtl.scss
similarity index 100%
rename from scss/layout/_rtl.scss
rename to src/scss/layout/_rtl.scss
diff --git a/scss/layout/_sidebar.scss b/src/scss/layout/_sidebar.scss
similarity index 100%
rename from scss/layout/_sidebar.scss
rename to src/scss/layout/_sidebar.scss
diff --git a/scss/layout/_text.scss b/src/scss/layout/_text.scss
similarity index 100%
rename from scss/layout/_text.scss
rename to src/scss/layout/_text.scss
diff --git a/scss/layout/_topbar.scss b/src/scss/layout/_topbar.scss
similarity index 100%
rename from scss/layout/_topbar.scss
rename to src/scss/layout/_topbar.scss
diff --git a/scss/pages/_apps.scss b/src/scss/pages/_apps.scss
similarity index 100%
rename from scss/pages/_apps.scss
rename to src/scss/pages/_apps.scss
diff --git a/scss/pages/_auth.scss b/src/scss/pages/_auth.scss
similarity index 100%
rename from scss/pages/_auth.scss
rename to src/scss/pages/_auth.scss
diff --git a/scss/pages/_dashboards.scss b/src/scss/pages/_dashboards.scss
similarity index 100%
rename from scss/pages/_dashboards.scss
rename to src/scss/pages/_dashboards.scss
diff --git a/scss/pages/_editor.scss b/src/scss/pages/_editor.scss
similarity index 100%
rename from scss/pages/_editor.scss
rename to src/scss/pages/_editor.scss
diff --git a/scss/style.scss b/src/scss/style.scss
similarity index 100%
rename from scss/style.scss
rename to src/scss/style.scss
diff --git a/scssold/_override.scss b/src/scssold/_override.scss
similarity index 100%
rename from scssold/_override.scss
rename to src/scssold/_override.scss
diff --git a/scssold/_variables.scss b/src/scssold/_variables.scss
similarity index 100%
rename from scssold/_variables.scss
rename to src/scssold/_variables.scss
diff --git a/scssold/components/_VButtons.scss b/src/scssold/components/_VButtons.scss
similarity index 100%
rename from scssold/components/_VButtons.scss
rename to src/scssold/components/_VButtons.scss
diff --git a/scssold/components/_VCard.scss b/src/scssold/components/_VCard.scss
similarity index 100%
rename from scssold/components/_VCard.scss
rename to src/scssold/components/_VCard.scss
diff --git a/scssold/components/_VField.scss b/src/scssold/components/_VField.scss
similarity index 100%
rename from scssold/components/_VField.scss
rename to src/scssold/components/_VField.scss
diff --git a/scssold/components/_VInput.scss b/src/scssold/components/_VInput.scss
similarity index 100%
rename from scssold/components/_VInput.scss
rename to src/scssold/components/_VInput.scss
diff --git a/scssold/components/_VNavigationDrawer.scss b/src/scssold/components/_VNavigationDrawer.scss
similarity index 100%
rename from scssold/components/_VNavigationDrawer.scss
rename to src/scssold/components/_VNavigationDrawer.scss
diff --git a/scssold/components/_VShadow.scss b/src/scssold/components/_VShadow.scss
similarity index 100%
rename from scssold/components/_VShadow.scss
rename to src/scssold/components/_VShadow.scss
diff --git a/scssold/components/_VTable.scss b/src/scssold/components/_VTable.scss
similarity index 100%
rename from scssold/components/_VTable.scss
rename to src/scssold/components/_VTable.scss
diff --git a/scssold/layout/_container.scss b/src/scssold/layout/_container.scss
similarity index 100%
rename from scssold/layout/_container.scss
rename to src/scssold/layout/_container.scss
diff --git a/scssold/layout/_sidebar.scss b/src/scssold/layout/_sidebar.scss
similarity index 100%
rename from scssold/layout/_sidebar.scss
rename to src/scssold/layout/_sidebar.scss
diff --git a/scssold/layout/_topbar.scss b/src/scssold/layout/_topbar.scss
similarity index 100%
rename from scssold/layout/_topbar.scss
rename to src/scssold/layout/_topbar.scss
diff --git a/scssold/pages/_dashboards.scss b/src/scssold/pages/_dashboards.scss
similarity index 100%
rename from scssold/pages/_dashboards.scss
rename to src/scssold/pages/_dashboards.scss
diff --git a/scssold/style.scss b/src/scssold/style.scss
similarity index 100%
rename from scssold/style.scss
rename to src/scssold/style.scss
diff --git a/server/api/auth/[...].ts b/src/server/api/auth/[...].ts
similarity index 100%
rename from server/api/auth/[...].ts
rename to src/server/api/auth/[...].ts
diff --git a/server/api/session.get.ts b/src/server/api/session.get.ts
similarity index 100%
rename from server/api/session.get.ts
rename to src/server/api/session.get.ts
diff --git a/server/api/token.get.ts b/src/server/api/token.get.ts
similarity index 100%
rename from server/api/token.get.ts
rename to src/server/api/token.get.ts
diff --git a/store/customizer.ts b/src/store/customizer.ts
similarity index 100%
rename from store/customizer.ts
rename to src/store/customizer.ts
diff --git a/stores/userInfo.ts.ex b/src/stores/userInfo.ts.ex
similarity index 100%
rename from stores/userInfo.ts.ex
rename to src/stores/userInfo.ts.ex
diff --git a/theme/DarkTheme.ts b/src/theme/DarkTheme.ts
similarity index 100%
rename from theme/DarkTheme.ts
rename to src/theme/DarkTheme.ts
diff --git a/theme/LightTheme.ts b/src/theme/LightTheme.ts
similarity index 100%
rename from theme/LightTheme.ts
rename to src/theme/LightTheme.ts
diff --git a/tsconfig.json b/src/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to src/tsconfig.json
diff --git a/types/dashboard/index.ts b/src/types/dashboard/index.ts
similarity index 100%
rename from types/dashboard/index.ts
rename to src/types/dashboard/index.ts
diff --git a/types/sessionUserTypes.ts b/src/types/sessionUserTypes.ts
similarity index 100%
rename from types/sessionUserTypes.ts
rename to src/types/sessionUserTypes.ts
diff --git a/types/themeTypes/ThemeType.ts b/src/types/themeTypes/ThemeType.ts
similarity index 100%
rename from types/themeTypes/ThemeType.ts
rename to src/types/themeTypes/ThemeType.ts
diff --git a/utils/UpdateColors.ts b/src/utils/UpdateColors.ts
similarity index 100%
rename from utils/UpdateColors.ts
rename to src/utils/UpdateColors.ts
diff --git a/utils/axios.ts b/src/utils/axios.ts
similarity index 100%
rename from utils/axios.ts
rename to src/utils/axios.ts
diff --git a/utils/helper.ts b/src/utils/helper.ts
similarity index 100%
rename from utils/helper.ts
rename to src/utils/helper.ts
diff --git a/utils/locales/ar.json b/src/utils/locales/ar.json
similarity index 100%
rename from utils/locales/ar.json
rename to src/utils/locales/ar.json
diff --git a/utils/locales/en.json b/src/utils/locales/en.json
similarity index 100%
rename from utils/locales/en.json
rename to src/utils/locales/en.json
diff --git a/utils/locales/fr.json b/src/utils/locales/fr.json
similarity index 100%
rename from utils/locales/fr.json
rename to src/utils/locales/fr.json
diff --git a/utils/locales/messages.ts b/src/utils/locales/messages.ts
similarity index 100%
rename from utils/locales/messages.ts
rename to src/utils/locales/messages.ts
diff --git a/utils/locales/zh.json b/src/utils/locales/zh.json
similarity index 100%
rename from utils/locales/zh.json
rename to src/utils/locales/zh.json