diff --git a/package-lock.json b/package-lock.json
index c8b3f87..348a7fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "@fortawesome/free-solid-svg-icons": "^5.15.3",
                 "@fortawesome/vue-fontawesome": "^3.0.0-4",
                 "@popperjs/core": "^2.10.1",
+                "@vueuse/core": "^6.6.2",
                 "chart.js": "^2.9.4",
                 "simple-syntax-highlighter": "^2.0.6",
                 "tailwind-scrollbar": "^1.3.0",
@@ -2064,6 +2065,78 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
             "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w=="
         },
+        "node_modules/@vueuse/core": {
+            "version": "6.6.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-6.6.2.tgz",
+            "integrity": "sha512-AUB7WVYFwMPeNtC99m1j3PWf+45EyNWJ78VDaB9F/6LCYeKlcG/6aACL9xWSPslZUz9OsYTO9ZfPhNgv2YqxVw==",
+            "dependencies": {
+                "@vueuse/shared": "6.6.2",
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.1.0",
+                "vue": "^2.6.0 || ^3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+            "version": "6.6.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-6.6.2.tgz",
+            "integrity": "sha512-wY4GAM5G1vlLRS4O71vw7PH5G5/Yub0xb2+OyIyDjZW/1S5J6bdkpFBp6AJbZ5k3ACtjTDxlUYhPQnrdJTwzTA==",
+            "dependencies": {
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.1.0",
+                "vue": "^2.6.0 || ^3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "vue": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.11.4",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
+            "integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -12227,6 +12300,31 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
             "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w=="
         },
+        "@vueuse/core": {
+            "version": "6.6.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-6.6.2.tgz",
+            "integrity": "sha512-AUB7WVYFwMPeNtC99m1j3PWf+45EyNWJ78VDaB9F/6LCYeKlcG/6aACL9xWSPslZUz9OsYTO9ZfPhNgv2YqxVw==",
+            "requires": {
+                "@vueuse/shared": "6.6.2",
+                "vue-demi": "*"
+            },
+            "dependencies": {
+                "@vueuse/shared": {
+                    "version": "6.6.2",
+                    "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-6.6.2.tgz",
+                    "integrity": "sha512-wY4GAM5G1vlLRS4O71vw7PH5G5/Yub0xb2+OyIyDjZW/1S5J6bdkpFBp6AJbZ5k3ACtjTDxlUYhPQnrdJTwzTA==",
+                    "requires": {
+                        "vue-demi": "*"
+                    }
+                },
+                "vue-demi": {
+                    "version": "0.11.4",
+                    "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
+                    "integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
+                    "requires": {}
+                }
+            }
+        },
         "@webassemblyjs/ast": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
diff --git a/package.json b/package.json
index 7116a30..1305388 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
         "@popperjs/core": "^2.10.1",
+        "@vueuse/core": "^6.6.2",
         "chart.js": "^2.9.4",
         "simple-syntax-highlighter": "^2.0.6",
         "tailwind-scrollbar": "^1.3.0",
diff --git a/resources/css/app.css b/resources/css/app.css
index 277a708..4ce4723 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,7 +7,10 @@
 @import "./components/breadcrumb.css";
 @import "./components/button.css";
 @import "./components/collapsible.css";
+@import "./components/dropdown.css";
 @import "./components/loading.css";
+@import "./components/radius.css";
+
 
 /*Utilities*/
 @import 'tailwindcss/utilities';
@@ -169,15 +172,6 @@
     @apply inline-flex space-x-2 justify-end
 }
 
-/*Dropdown*/
-.dropdown{
-    @apply relative flex flex-row justify-between border whitespace-nowrap font-semibold p-2 items-center gap-2 cursor-pointer
-}
-/*Dropdown Child*/
-.dropdown-content{
-    @apply flex flex-col whitespace-normal z-10 absolute border rounded-md mt-1 overflow-hidden bg-white
-}
-
 /*Form Input*/
 /*SelectInput*/
 .select-container{
diff --git a/resources/css/components/dropdown.css b/resources/css/components/dropdown.css
new file mode 100644
index 0000000..cd4d17a
--- /dev/null
+++ b/resources/css/components/dropdown.css
@@ -0,0 +1,48 @@
+.dropdown {
+    @apply relative max-w-min select-none
+}
+
+.dropdown-button-trigger {
+    @apply relative whitespace-nowrap space-x-2
+}
+
+.dropdown-button-trigger-content {
+    @apply flex flex-col whitespace-normal z-10 absolute border rounded-md mt-1 overflow-hidden bg-white
+}
+
+.dropdown-rich-trigger {
+    @apply cursor-pointer
+}
+
+.dropdown-rich-trigger-content {
+    @apply absolute flex flex-col whitespace-normal z-10
+}
+
+.dropdown-content-container {
+    @apply relative z-40
+}
+
+
+.dropdown-content-left {
+    @apply origin-top-left left-0
+}
+
+.dropdown-content-center {
+    @apply origin-top
+}
+
+.dropdown-content-right {
+    @apply origin-top-right right-0
+}
+
+.dropdown-content-wide {
+    @apply min-w-22
+}
+
+.dropdown-content-fit {
+    @apply min-w-min
+}
+
+.dropdown-trigger-icon {
+    @apply w-5 h-5 transform duration-300
+}
diff --git a/resources/css/components/radius.css b/resources/css/components/radius.css
new file mode 100644
index 0000000..f2738c5
--- /dev/null
+++ b/resources/css/components/radius.css
@@ -0,0 +1,58 @@
+/*TODO:Apply all of them*/
+.radius-0{
+    @apply rounded-none
+}
+.radius-1{
+    @apply rounded-sm
+}
+.radius-2{
+    @apply rounded
+}
+.radius-3{
+    @apply rounded-md
+}
+.radius-4{
+    @apply rounded-lg
+}
+.radius-5{
+    @apply rounded-xl
+}
+.radius-6{
+    @apply rounded-2xl
+}
+.radius-7{
+    @apply rounded-3xl
+}
+.radius-8{
+    @apply rounded-full
+}
+
+/*<editor-fold desc="Group Radius">*/
+.group-radius-0{
+    @apply rounded-none
+}
+.group-radius-1{
+    @apply first:rounded-t-sm last:rounded-b-sm
+}
+.group-radius-2{
+    @apply first:rounded-t last:rounded-b
+}
+.group-radius-3{
+    @apply first:rounded-t-md last:rounded-b-md
+}
+.group-radius-4{
+    @apply first:rounded-t-lg last:rounded-b-lg
+}
+.group-radius-5{
+    @apply first:rounded-t-xl last:rounded-b-xl
+}
+.group-radius-6{
+    @apply first:rounded-t-2xl last:rounded-b-2xl
+}
+.group-radius-7{
+    @apply first:rounded-t-3xl last:rounded-b-3xl
+}
+.group-radius-8{
+    @apply first:rounded-t-full last:rounded-b-full
+}
+/*</editor-fold>*/
diff --git a/resources/js/Components/Alert/TAlert.vue b/resources/js/Components/Alert/TAlert.vue
index e0d4a16..b1b14c6 100644
--- a/resources/js/Components/Alert/TAlert.vue
+++ b/resources/js/Components/Alert/TAlert.vue
@@ -3,11 +3,7 @@
         <!--Alert Container-->
         <div
             v-if="showAlertBox"
-            :class="[
-                'alert',
-                radiusStyle,
-                styleClass
-                ]"
+            :class="styleClass()"
         >
             <!--Inline Line-->
             <div v-if="design.includes('line')"
@@ -53,35 +49,32 @@
 </template>
 
 <script>
-import {defineComponent, ref} from 'vue'
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
+import {defineComponent, ref, toRefs} from 'vue'
 import TXCircleIcon from "@/Components/Icon/TXCircleIcon";
 
 export default defineComponent({
     name: "TAlert",
     components: {TXCircleIcon},
-    mixins: [radiusSizeMixin],
     props: {
         id: {
             type: String
         },
         closeable: {
             type: Boolean,
-            required: false,
             default: false
         },
         timer: {
             type: Number,
             required: false
         },
-        type: {
-            type: String,
-            default: null
-        },
         title: {
             type: String,
             default: null
         },
+        radius: {
+            type: Number,
+            default: 3
+        },
         design: {
             type: String,
             default: 'filled'
@@ -89,40 +82,42 @@ export default defineComponent({
         color: {
             type: String,
             default: 'white'
-        },
-        gradientDirection: {
-            type: String,
-            default: 'r'
         }
     },
     setup(props, {slots, emit}) {
+        /*Definitions*/
+        const {design, color, radius, timer, id} = toRefs(props)
         const showAlertBox = ref(true)
-        /*Design Check*/
-        const design = props.design
-        const color = props.color
-        const styleClass = 'alert-' + design + '-' + color + ' alert-' + design + '-base'
+
+        /*Generating Style Classes*/
+        const styleClass = () => {
+            return  'alert ' +
+                'alert-' + design.value + '-' + color.value + ' '+
+                'alert-' + design.value + '-base' + ' '+
+                'radius-'+radius.value
+        }
 
         /*Close Function*/
         const close = () => {
             showAlertBox.value = false;
-            emit('destroy', props.id)
+            emit('destroy', id.value)
         }
 
         /*Timer*/
         const timerCounter = ref(0)
         const countDownCounter = ref(0)
 
-        if (props.timer) {
+        if (timer.value) {
             /*Timer Function*/
             let timerFn = setTimeout(() => {
                 showAlertBox.value = false;
-                emit('destroy', props.id)
-            }, props.timer)
+                emit('destroy', id.value)
+            }, timer.value)
 
             /*Count Down Function*/
             let countDownFn = setInterval(() => {
-                if (props.timer >= timerCounter.value) {
-                    countDownCounter.value = 100 - (timerCounter.value / props.timer) * 100
+                if (timer.value >= timerCounter.value) {
+                    countDownCounter.value = 100 - (timerCounter.value / timer.value) * 100
                     timerCounter.value += 4
                 } else {
                     clearInterval(countDownFn)
diff --git a/resources/js/Components/Avatar/TAvatar.vue b/resources/js/Components/Avatar/TAvatar.vue
index d17af16..ab1914e 100644
--- a/resources/js/Components/Avatar/TAvatar.vue
+++ b/resources/js/Components/Avatar/TAvatar.vue
@@ -3,19 +3,19 @@
     <div :class="[
         'avatar-container',
         isAvatarGroup && 'avatar-container-group',
-        sizeStyleClass
+        sizeStyle()
         ]">
         <Link v-if="link" :href="link">
-        <img :class="[
-            radiusStyle,
-            sizeStyleClass,
+            <img :class="[
+            radiusStyle(),
+            sizeStyle(),
             isAvatarGroup ? 'avatar-group-image' : ''
             ]"
-             :src="avatarURL"/>
+                 :src="avatarURL"/>
         </Link>
         <img v-else :class="[
-            radiusStyle,
-            sizeStyleClass,
+            radiusStyle(),
+            sizeStyle(),
             isAvatarGroup ? 'avatar-group-image' : ''
             ]"
              :src="avatarURL"/>
@@ -24,7 +24,7 @@
             :class="[
                 'avatar-indicator',
                 size<7 ? 'text-2xs' : 'text-normal',
-                indicatorStyleClass
+                indicatorStyle()
                 ]">
             <div v-text="size>3 ? indicator.label : null"/>
         </div>
@@ -32,13 +32,11 @@
 </template>
 
 <script>
-import { defineComponent,getCurrentInstance,ref } from 'vue'
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
+import {defineComponent, getCurrentInstance, ref, toRefs} from 'vue'
 import {Link} from '@inertiajs/inertia-vue3';
 
 export default defineComponent({
     name: "TAvatar",
-    mixins: [radiusSizeMixin],
     props: {
         src: {
             type: String,
@@ -53,6 +51,10 @@ export default defineComponent({
             require: false,
             default: 3
         },
+        radius: {
+            type: Number,
+            default: 3
+        },
         indicator: {
             type: Object,
             require: false,
@@ -61,27 +63,33 @@ export default defineComponent({
     components: {
         Link
     },
-    setup(props){
-        /*Size Check*/
-        const size = props.size;
-        const indicator = props.indicator;
+    setup(props) {
+        /*Definitions*/
+        const {size, indicator, src, radius} = toRefs(props)
 
-        const sizeStyleClass = 'avatar-size-' + size;
-        const indicatorStyleClass = indicator ? (' avatar-indicator-position-' + indicator.position  + ' avatar-indicator-'+ indicator.color) : '';
+        /*Generating Style Classes*/
+        const sizeStyle = () => {
+            return 'avatar-size-' + size.value;
+        }
+        const indicatorStyle = () => {
+            return indicator.value ? (' avatar-indicator-position-' + indicator.value.position + ' avatar-indicator-' + indicator.value.color) : '';
+        }
+        const radiusStyle = () => {
+            return 'radius-'+radius.value
+        }
 
         /*Is Avatar Group*/
         const isAvatarGroup = getCurrentInstance().parent.type.name === 'TAvatarGroup';
 
         /*Avatar Url Generator*/
-
         const avatarURL = ref();
-        if (!props.src) {
+        if (!src.value) {
             avatarURL.value = '/img/samples/dummyAvatar.svg'
         } else {
-            avatarURL.value = props.src
+            avatarURL.value = src.value
         }
 
-        return {isAvatarGroup,avatarURL,sizeStyleClass,indicatorStyleClass}
+        return {isAvatarGroup, avatarURL, sizeStyle, indicatorStyle, radiusStyle}
     }
 });
 </script>
diff --git a/resources/js/Components/Badge/TBadge.vue b/resources/js/Components/Badge/TBadge.vue
index 8d27989..de96e01 100644
--- a/resources/js/Components/Badge/TBadge.vue
+++ b/resources/js/Components/Badge/TBadge.vue
@@ -4,7 +4,6 @@
             'badge',
             (collapsible || (selectable && !selectIndicator)) && 'cursor-pointer',
             selectable && !modelValue && !selectActiveStyle && 'filter grayscale opacity-50',
-            radiusStyle,
             styleClass()
         ]"
         @click.stop="collapsible && toggle(); (selectable && !selectIndicator) && select()"
@@ -74,14 +73,12 @@
 
 <script>
 import {defineComponent, ref, toRefs} from 'vue'
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
 import TPlusIcon from "@/Components/Icon/TPlusIcon";
 import TXCircleIcon from "@/Components/Icon/TXCircleIcon";
 
 export default defineComponent({
     name: "TBadge",
     components: {TXCircleIcon, TPlusIcon},
-    mixins: [radiusSizeMixin],
     props: {
         design: {
             type: String,
@@ -91,6 +88,10 @@ export default defineComponent({
             type: String,
             default: 'white'
         },
+        radius: {
+            type: Number,
+            default: 3
+        },
         selectable: {
             type: Boolean,
             default: false
@@ -119,26 +120,26 @@ export default defineComponent({
         }
     },
     setup(props, {emit}) {
-        const {design, color, selectable, selectActiveStyle, selectPassiveStyle} = toRefs(props)
+        /*Definitions*/
+        const {design, color, radius,selectable, selectActiveStyle, selectPassiveStyle, modelValue} = toRefs(props)
+        const showContent = ref(false)
+        const value = ref(modelValue.value)
+        const activeColor = ref();
+        const activeDesign = ref();
 
         /*Select*/
-        const value = ref(props.modelValue)
         const select = () => {
             value.value = !value.value
             emit('update:modelValue', value.value)
         }
 
         /*Toggle*/
-        const showContent = ref(false)
         const toggle = () => {
             showContent.value = !showContent.value
         }
 
-        /*Design Check*/
+        /*Generating Style Classes*/
         const styleClass = () => {
-            const activeColor = ref();
-            const activeDesign = ref();
-
             if(selectable.value){
                 /*Select Style Check*/
                 if(selectActiveStyle.value && !selectPassiveStyle.value){
@@ -159,9 +160,12 @@ export default defineComponent({
                 activeDesign.value = design.value;
             }
 
-            return 'badge-' + activeDesign.value + '-' + activeColor.value + ' badge-' + activeDesign.value + '-base'
+            return 'badge-' + activeDesign.value + '-' + activeColor.value + ' ' +
+                'badge-' + activeDesign.value + '-base'+ ' ' +
+                'radius-' + radius.value
         }
 
+        /*Slot Check*/
         const hasSlot = name => !!slots[name]
 
         return {hasSlot, showContent, toggle, select, styleClass}
diff --git a/resources/js/Components/Breadcrumb/TBreadcrumb.vue b/resources/js/Components/Breadcrumb/TBreadcrumb.vue
index c68c8b3..e8ca81f 100644
--- a/resources/js/Components/Breadcrumb/TBreadcrumb.vue
+++ b/resources/js/Components/Breadcrumb/TBreadcrumb.vue
@@ -2,19 +2,12 @@
     <div>
         <div
             v-if="design==='filled'"
-            :class="[
-            'breadcrumb',
-            styleClass,
-            position === 'right' && 'flex-row-reverse'
-            ]">
+            :class="filledStyle()">
             <div id="breadcrumb-filled-container">
                 <div
                     v-for="(item,index) in breadcrumbs"
                     :key="index"
-                    :class="[
-                    'breadcrumb-filled-item',
-                    item.active && 'breadcrumb-item-active '
-                    ]">
+                    :class="filledContainerStyle(item)">
                     <!--Icon-->
                     <div v-if="$slots[item.key]">
                         <slot :name="item.key" :props="item"/>
@@ -32,18 +25,12 @@
 
         <div
             v-if="design==='block'"
-            :class="[
-            'breadcrumb breadcrumb-block-base',
-            position === 'right' && 'flex-row-reverse'
-        ]">
-            <div id="breadcrumb-block-container" :class="styleClass">
+            :class="blockStyle()">
+            <div id="breadcrumb-block-container" :class="blockSubStyle()">
                 <div
                     v-for="(item,index) in breadcrumbs"
                     :key="index"
-                    :class="[
-              'breadcrumb-block-item',
-              item.active ? 'breadcrumb-item-active' : 'text-gray-700'
-              ]">
+                    :class="blockContainerStyle(item)">
                     <!--Icon-->
                     <div v-if="$slots[item.key]">
                         <slot :name="item.key" :props="item"/>
@@ -87,19 +74,59 @@ export default defineComponent({
     },
     components: {TChevronRightIcon},
     setup(props, {slots}) {
+        /*Definitions*/
         const {breadcrumbs, design, color, position} = toRefs(props)
 
-        /*Design Check*/
-        const styleClass = ref()
-        if (design.value === 'filled') {
-            styleClass.value = 'breadcrumb-' + design.value + '-' + color.value + ' breadcrumb-' + design.value + '-base'
-        } else if (design.value === 'block') {
-            styleClass.value = 'breadcrumb-block-' + color.value
+        /*Generating Style Classes*/
+        const styleClass = () => {
+            let style;
+            if (design.value === 'filled') {
+                style = 'breadcrumb-' + design.value + '-' + color.value + ' breadcrumb-' + design.value + '-base'
+            } else if (design.value === 'block') {
+                style = 'breadcrumb-block-' + color.value
+            }
+
+            return style
+        }
+        const filledStyle = () => {
+            return 'breadcrumb' + ' ' +
+                'breadcrumb-' + design.value + '-' + color.value + ' '+
+                'breadcrumb-' + design.value + '-base' + ' ' +
+                (position.value === 'right' ? 'flex-row-reverse' : '')
+        }
+        const filledContainerStyle = (item) => {
+            return 'breadcrumb-filled-item' + ' ' +
+                (item.active ? 'breadcrumb-item-active' : '')
+        }
+        const blockStyle = () => {
+            return 'breadcrumb' + ' ' +
+                'breadcrumb-' + design.value + '-base' + ' ' +
+                (position.value === 'right' ? 'flex-row-reverse' : '')
+        }
+        const blockSubStyle = () => {
+            return 'breadcrumb-' + design.value + '-' + color.value + ' '
+        }
+        const blockContainerStyle = (item) => {
+            return 'breadcrumb-block-item'+ ' ' +
+                (item.active ? 'breadcrumb-item-active' : 'text-gray-700')
         }
 
+        /*Slot Check*/
         const hasSlot = name => !!slots[name]
 
-        return {breadcrumbs, design, color, position, hasSlot, styleClass}
+        return {
+            breadcrumbs,
+            design,
+            color,
+            position,
+            hasSlot,
+            styleClass,
+            filledContainerStyle,
+            filledStyle,
+            blockStyle,
+            blockSubStyle,
+            blockContainerStyle
+        }
     }
 })
 </script>
diff --git a/resources/js/Components/Button/TButton.vue b/resources/js/Components/Button/TButton.vue
index 1311735..f70d1f7 100644
--- a/resources/js/Components/Button/TButton.vue
+++ b/resources/js/Components/Button/TButton.vue
@@ -1,32 +1,22 @@
 <template>
     <button
         v-if="type === 'submit' || type === 'button'"
-        :class="[
-            'button',
-            border && 'border',
-            radiusStyle,
-            styleClass,
-            loading || loadingWithContent ? 'pointer-events-none' : '',
-            ]"
+        :class="styleClass ()"
         :onclick="!disabled ? 'window.location.href=\''+link+'\'' : ''"
         :type="type">
         <component :is="loadingComponent" v-if="loadingWithContent" :color="loadingColor ? loadingColor : color"/>
 
-        <div :class="{invisible: loading}" class="flex justify-center items-center whitespace-nowrap flex-shrink-0 gap-1 space-x-1">
-            <slot />
+        <div :class="{invisible: loading}"
+             class="flex justify-center items-center whitespace-nowrap flex-shrink-0 gap-1 space-x-1">
+            <slot/>
         </div>
-        <component :is="loadingComponent" v-if="loading" :color="loadingColor ? loadingColor : color" class="mx-auto absolute"/>
+        <component :is="loadingComponent" v-if="loading" :color="loadingColor ? loadingColor : color"
+                   class="mx-auto absolute"/>
     </button>
     <Link
         v-else
         :href="link"
-        :class="[
-            'button',
-            border && 'border',
-            radiusStyle,
-            styleClass,
-            loading || loadingWithContent ? 'pointer-events-none' : '',
-            ]"
+        :class="styleClass()"
     >
         <slot></slot>
     </Link>
@@ -34,15 +24,12 @@
 
 <script>
 import {defineComponent, defineAsyncComponent, toRefs, ref} from 'vue'
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-import {buttonStyleMixin} from "@/Mixins/Styles/buttonStyleMixin";
 import {Link} from '@inertiajs/inertia-vue3';
 import ThreeBars from "@/Components/Loading/Animations/ThreeBars";
 import ThreeDots from "@/Components/Loading/Animations/ThreeDots";
 
 export default defineComponent({
     name: "TButton",
-    mixins: [radiusSizeMixin],
     props: {
         size: {
             type: String,
@@ -56,6 +43,10 @@ export default defineComponent({
             type: String,
             default: 'blue'
         },
+        radius: {
+            type: Number,
+            default: 3
+        },
         link: {
             type: String,
             default: '#'
@@ -94,26 +85,46 @@ export default defineComponent({
         Link
     },
     setup(props) {
-        const {color, design, disabled, link, size, type, loadingColor,loadingDesign} = toRefs(props)
-        /*Design Check*/
-        const styleClass = ref()
-        styleClass.value =
-            'button-' + size.value +
-            ' button-' + design.value + '-base' +
-            ' button-' + design.value + '-' + color.value +
-            (disabled.value ? ' button-disabled' : '')
+        /*Definitions*/
+        const {
+            color,
+            design,
+            border,
+            radius,
+            disabled,
+            link,
+            size,
+            type,
+            loading,
+            loadingWithContent,
+            loadingColor,
+            loadingDesign
+        } = toRefs(props)
+
+        /*Generating Style Classes*/
+        const styleClass = () => {
+            return 'button' + ' ' +
+                'button-' + size.value + ' ' +
+                'button-' + design.value + '-base' + ' ' +
+                'button-' + design.value + '-' + color.value + ' ' +
+                'radius-' + radius.value + ' ' +
+                (disabled.value ? ' button-disabled' : '') + ' ' +
+                (border.value ? 'border' : '') + ' ' +
+                (loading.value || loadingWithContent.value ? 'pointer-events-none' : '')
+        }
+
 
         /*Loading Component*/
         const activeLoadingComponent = ref();
-        if(loadingDesign.value === 'three-bars'){
+        if (loadingDesign.value === 'three-bars') {
             activeLoadingComponent.value = 'ThreeBars'
-        }else {
+        } else {
             activeLoadingComponent.value = 'ThreeDots'
         }
 
-        const loadingComponent = defineAsyncComponent(()=>import(`@/Components/Loading/Animations/${activeLoadingComponent.value}.vue`))
+        const loadingComponent = defineAsyncComponent(() => import(`@/Components/Loading/Animations/${activeLoadingComponent.value}.vue`))
 
-        return {size, link, type, loadingColor, styleClass,loadingComponent}
+        return {size, link, type, loadingColor, styleClass, loadingComponent}
     }
 })
 </script>
diff --git a/resources/js/Components/Collapsible/TCollapsible.vue b/resources/js/Components/Collapsible/TCollapsible.vue
index de889a1..d1b3dde 100644
--- a/resources/js/Components/Collapsible/TCollapsible.vue
+++ b/resources/js/Components/Collapsible/TCollapsible.vue
@@ -1,14 +1,11 @@
 <template>
-    <div
-        :class="styleClass()"
-    >
+    <div :class="styleClass()">
         <slot></slot>
     </div>
 </template>
 
 <script>
-import {defineComponent, inject, provide, ref, toRef, toRefs} from 'vue'
-
+import {defineComponent, provide, ref, toRefs} from 'vue'
 
 export default defineComponent({
     name: "Collapsible",
@@ -21,7 +18,7 @@ export default defineComponent({
             type: Number,
             default: 3
         },
-        accordion:{
+        accordion: {
             type: Boolean,
             default: false
         },
@@ -55,7 +52,6 @@ export default defineComponent({
         const {
             openingType,
             modelValue,
-            border,
             triggerType,
             separated,
             radius,
@@ -65,37 +61,26 @@ export default defineComponent({
             triggerAlign,
             accordion
         } = toRefs(props)
-        const radiusSizes = {
-            1: 'first:rounded-t-sm last:rounded-b-sm',
-            2: 'first:rounded-t last:rounded-b',
-            3: 'first:rounded-t-md last:rounded-b-md',
-            4: 'first:rounded-t-lg last:rounded-b-lg',
-            5: 'first:rounded-t-xl last:rounded-b-xl',
-            6: 'first:rounded-t-2xl last:rounded-b-2xl',
-            7: 'first:rounded-t-3xl last:rounded-b-3xl',
-            8: 'first:rounded-t-full last:rounded-b-full'
-        }
 
         /*Provide*/
-        provide('openingType', ref(openingType.value))
+        provide('openingType', ref(openingType))
         provide('activeItems', ref(modelValue.value))
-        provide('radius', ref(radius.value))
-        provide('accordion', ref(accordion.value))
-        provide('separated', ref(separated.value))
-        provide('rootColor', ref(color.value))
-        provide('rootDesign', ref(design.value))
-        provide('rootTitleAlign', ref(titleAlign.value))
-        provide('rootTriggerAlign', ref(triggerAlign.value))
-        provide('rootTriggerType', ref(triggerType.value))
+        provide('radius', ref(radius))
+        provide('accordion', ref(accordion))
+        provide('separated', ref(separated))
+        provide('rootColor', ref(color))
+        provide('rootDesign', ref(design))
+        provide('rootTitleAlign', ref(titleAlign))
+        provide('rootTriggerAlign', ref(triggerAlign))
+        provide('rootTriggerType', ref(triggerType))
 
         /*Generating Style Classes*/
         const styleClass = () => {
-
-            return 'collapsible ' +
-                (separated.value ? 'space-y-2' : radiusSizes[radius.value])
+            return 'collapsible' + ' ' +
+                (separated.value ? 'space-y-2' : 'group-radius-' + radius.value)
         }
 
-        return {modelValue, styleClass}
+        return {styleClass}
     }
 })
 </script>
diff --git a/resources/js/Components/Collapsible/TCollapsibleItem.vue b/resources/js/Components/Collapsible/TCollapsibleItem.vue
index 873fe19..23ed7aa 100644
--- a/resources/js/Components/Collapsible/TCollapsibleItem.vue
+++ b/resources/js/Components/Collapsible/TCollapsibleItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="[
-        styleClass.container(),
+        containerStyle(),
         activeDesign.includes('line') ? 'justfiy-between' : 'flex-col'
         ]">
         <!--Inline Line-->
@@ -11,24 +11,24 @@
         <div class="w-full">
             <!--Header-->
             <div
-                :class="styleClass.header()"
+                :class="headerStyle()"
                 @click="updateStatus"
                 @mouseenter.passive="openingType.includes('hover') ? updateStatus('open') :''"
             >
                 <!--Title-->
-                <div :class="styleClass.title()">
+                <div :class="titleStyle()">
                     <slot name="title"/>
                 </div>
                 <!--DropDown Icons-->
                 <component
                     :is="activeTriggerType==='chevron' ? 'TChevronIcon' : 'TCrossIcon'"
-                    :class="styleClass.trigger()"
+                    :class="triggerStyle()"
                 />
             </div>
             <!--Content-->
             <transition name="content">
                 <div v-show="isVisibleContent()">
-                    <div :class="styleClass.content()" >
+                    <div :class="contentStyle()" >
                         <slot name="content"></slot>
                     </div>
                 </div>
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import {defineComponent, ref, inject, toRefs, reactive, onMounted, onUpdated} from 'vue'
+import {defineComponent, ref, inject, toRefs, reactive} from 'vue'
 import {uniqueId} from "lodash";
 import TChevronIcon from "@/Components/Icon/TChevronDownIcon";
 import TCrossIcon from "@/Components/Icon/TXIcon";
@@ -67,34 +67,23 @@ export default defineComponent({
         color: {
             type: String,
             default: 'white'
-        },
+        }
     },
     setup(props, {emit}) {
         /*Definitions*/
         const {itemKey, titleAlign, triggerAlign, design, color} = toRefs(props)
-        const styleClass = reactive({})
-        const radiusSizes = {
-            1: 'rounded-sm',
-            2: 'rounded',
-            3: 'rounded-md',
-            4: 'rounded-lg',
-            5: 'rounded-xl',
-            6: 'rounded-2xl',
-            7: 'rounded-3xl',
-            8: 'rounded-full'
-        }
 
         /*Injections*/
-        const activeItems = ref(inject('activeItems'))
-        const openingType = ref(inject('openingType'))
-        const accordion = ref(inject('accordion'))
-        const radius = ref(inject('radius'))
-        const separated = ref(inject('separated'))
-        const rootColor = ref(inject('rootColor'))
-        const rootDesign = ref(inject('rootDesign'))
-        const rootTitleAlign = ref(inject('rootTitleAlign'))
-        const rootTriggerAlign = ref(inject('rootTriggerAlign'))
-        const rootTriggerType = ref(inject('rootTriggerType'))
+        const activeItems = inject('activeItems')
+        const openingType = inject('openingType')
+        const accordion = inject('accordion')
+        const radius = inject('radius')
+        const separated = inject('separated')
+        const rootColor = inject('rootColor')
+        const rootDesign = inject('rootDesign')
+        const rootTitleAlign = inject('rootTitleAlign')
+        const rootTriggerAlign = inject('rootTriggerAlign')
+        const rootTriggerType = inject('rootTriggerType')
 
         /*Taken Over Definitions from Root */
         const activeColor = ref(rootColor.value ? rootColor.value : color.value)
@@ -146,13 +135,13 @@ export default defineComponent({
         }
 
         /*Generating Style Classes*/
-        styleClass.container = () => {
+        const containerStyle = () => {
             return 'collapsible-container ' +
                 'collapsible-' + activeDesign.value + '-base ' +
                 'collapsible-' + activeDesign.value + '-' + activeColor.value + ' ' +
-                (separated.value ? radiusSizes[radius.value] + ' border-0' : '')
+                (separated.value ? 'radius-' + radius.value + ' border-0' : '')
         }
-        styleClass.header = () => {
+        const headerStyle = () => {
             let triggerAlignStyle;
             /*Trigger Position*/
             if (activeTriggerAlign.value === 'left') {
@@ -164,7 +153,7 @@ export default defineComponent({
             return 'collapsible-header ' +
                 triggerAlignStyle
         }
-        styleClass.trigger = () => {
+        const triggerStyle = () => {
             let triggerAnimationStyle;
             if (isVisibleContent() && activeTriggerType.value === 'chevron' || activeTriggerType.value === 'cross') {
                 triggerAnimationStyle = 'rotate-0'
@@ -185,7 +174,7 @@ export default defineComponent({
             return 'collapsible-trigger-icon ' +
                 triggerAnimationStyle
         }
-        styleClass.title = () => {
+        const titleStyle = () => {
             let titleAlignStyle;
             if (activeTitleAlign.value === 'left') {
                 titleAlignStyle = 'text-left';
@@ -197,11 +186,11 @@ export default defineComponent({
 
             return 'collapsible-title ' + titleAlignStyle
         }
-        styleClass.content = () => {
+        const contentStyle = () => {
             return 'collapsible-content '
         }
 
-        return {isVisibleContent, openingType, updateStatus, styleClass, activeTriggerType,activeDesign}
+        return {isVisibleContent, openingType, updateStatus, contentStyle, containerStyle, titleStyle, triggerStyle,headerStyle, activeTriggerType,activeDesign}
     }
 })
 </script>
diff --git a/resources/js/Components/Dropdown/TDropdown.vue b/resources/js/Components/Dropdown/TDropdown.vue
index 0dec99a..7e54cc1 100644
--- a/resources/js/Components/Dropdown/TDropdown.vue
+++ b/resources/js/Components/Dropdown/TDropdown.vue
@@ -1,48 +1,41 @@
 <template>
-    <div v-click-outside="outside" class="relative max-w-min select-none">
+    <div class="dropdown" ref="dropDownItem">
 
-        <!--Trigger as a Title-->
+        <!--Trigger as a Simple Trigger-->
         <div
-            v-if="$slots.title"
-            :class="[
-            'dropdown',
-            calculatedTriggerStyle
-            ]"
-            @click="showContent = !showContent"
+            v-if="triggerType === 'button'"
+            :class="buttonTriggerStyle()"
+            @click="updateStatus"
         >
-            <slot name="title"/>
-            <t-chevron-down-icon
-                :class="[
-                'w-5 h-5 transform duration-300',
-                showContent ? 'rotate-90' : 'rotate-0'
-                ]"
-            />
+            <t-button type="button" :color="buttonColor" :design="buttonDesign" :size="buttonSize">
+                <slot name="trigger"/>
+                <t-chevron-down-icon :class="triggerIconStyle()"/>
+            </t-button>
+
         </div>
 
         <!--Trigger as a Rich Item-->
         <div
-            class="cursor-pointer"
-            v-if="$slots.trigger"
-            @click="showContent = !showContent"
+            class="dropdown-rich-trigger"
+            v-if="triggerType === 'rich'"
+            @click="updateStatus"
         >
             <slot name="trigger"/>
         </div>
 
         <!--Content-->
-        <transition name="drop-down">
-            <div>
+        <transition name="dropDown">
+            <div v-if="isVisible" class="dropdown-content-container">
+                <!--Button Trigger Content-->
                 <div
-                    v-if="showContent && $slots.title"
-                    :class="['dropdown-content',
-          calculatedContentStyle
-          ]">
-                    <slot></slot>
+                    v-if="triggerType === 'button'"
+                    :class="buttonTriggerContentStyle()">
+                    <slot/>
                 </div>
+                <!--Rich Trigger Content-->
                 <div
-                    v-if="showContent && $slots.trigger"
-                    :class="['absolute flex flex-col whitespace-normal z-10',
-          calculatedContentStyle
-          ]"
+                    v-if="triggerType === 'rich'"
+                    :class="richTriggerContentStyle()"
                 >
                     <slot/>
                 </div>
@@ -52,74 +45,113 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
-import {dropdownStyleMixin} from "@/Mixins/Styles/dropdownStyleMixin";
+import {defineComponent, provide, ref, toRefs} from 'vue';
+import {onClickOutside} from '@vueuse/core';
 import TChevronDownIcon from "@/Components/Icon/TChevronDownIcon";
+import TButton from "@/Components/Button/TButton";
 
 export default defineComponent({
     name: "TDropdown",
-    components: {TChevronDownIcon},
-    mixins: [dropdownStyleMixin],
-    directives: {
-        'click-outside': {
-            bind: function (el, binding, vNode) {
-                // Provided expression must evaluate to a function.
-                if (typeof binding.value !== 'function') {
-                    const compName = vNode.context.name
-                    let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
-                    if (compName) {
-                        warn += `Found in component '${compName}'`
-                    }
+    components: {TButton, TChevronDownIcon},
+    props: {
+        align: {
+            type: String,
+            default: 'left'
+        },
+        buttonColor: {
+            type: String,
+            default: 'blue'
+        },
+        buttonDesign: {
+            type: String,
+            default: 'filled'
+        },
+        buttonSize: {
+            type: String,
+            default: 'normal'
+        },
+        size: {
+            type: String,
+            default: 'wide'
+        },
+        triggerType: {
+            type: String,
+            default: 'button'
+        },
+        radius: {
+            type: Number,
+            default: 3
+        }
+    },
+    setup(props) {
+        /*Definitions*/
+        const {align, size, radius, triggerType} = toRefs(props)
+        const isVisible = ref(false)
+        const dropDownItem = ref(null)
 
-                    console.warn(warn)
-                }
-                // Define Handler and cache it on the element
-                const bubble = binding.modifiers.bubble
-                const handler = (e) => {
-                    if (bubble || (!el.contains(e.target) && el !== e.target)) {
-                        binding.value(e)
-                    }
-                }
-                el.__vueClickOutside__ = handler
+        /*Provides*/
+        provide('triggerType', ref(triggerType))
 
-                // add Event Listeners
-                document.addEventListener('click', handler)
-            },
+        /*Open-Close Actions*/
+        const updateStatus = () => {
+            isVisible.value = !isVisible.value
+        }
+        onClickOutside(dropDownItem, (event) => isVisible.value = false)
 
-            unbind: function (el) {
-                // Remove Event Listeners
-                document.removeEventListener('click', el.__vueClickOutside__)
-                el.__vueClickOutside__ = null
+        /*Generating Style Classes*/
 
-            }
+        const buttonTriggerStyle = () => {
+            return 'dropdown-button-trigger' + ' ' +
+                'radius-' + radius.value
         }
-    },
-    data() {
+        const contentStyle = () => {
+            return 'dropdown-content-' + align.value + ' ' +
+                'dropdown-content-' + size.value
+        }
+        const buttonTriggerContentStyle = () => {
+            return 'dropdown-button-trigger-content' + ' ' +
+                contentStyle()
+        }
+        const richTriggerContentStyle = () => {
+            return 'dropdown-rich-trigger-content' + ' ' +
+                contentStyle()
+        }
+        const triggerIconStyle = () => {
+            return 'dropdown-trigger-icon ' +
+                (isVisible.value ? 'rotate-90' : 'rotate-0')
+        }
+
+        /*Slot Check*/
+        const hasSlot = name => !!slots[name]
+
         return {
-            showContent: false,
+            isVisible,
+            updateStatus,
+            hasSlot,
+            dropDownItem,
+            triggerIconStyle,
+            buttonTriggerStyle,
+            buttonTriggerContentStyle,
+            richTriggerContentStyle
         }
     },
-    methods: {
-        outside() {
-            this.showContent = false
-        }
-    }
 })
 </script>
 
 <style scoped>
 /*TODO: Leave 75*/
-.drop-down-enter-active, .drop-down-leave active {
-    transition: all ease-in-out .2s;
+.dropDown-enter-active, .dropDown-leave-active {
+    transition: all ease-in-out 300ms;
+    z-index: 9999;
 }
 
-.drop-down-enter, .drop-down-leave-to {
-    transform: scale(.9);
+.dropDown-enter-from, .dropDown-leave-to {
+    transform: scaleY(.75) scaleX(.75);
     opacity: 0;
 }
 
-.drop-down-leave, drop-down-enter-to {
-    transform: scale(1);
+.dropDown-enter-to, .dropDown-leave-from {
+    transform: scaleY(1) scaleX(1);
     opacity: 1;
 }
 </style>
diff --git a/resources/js/Components/Dropdown/TDropdownItem.vue b/resources/js/Components/Dropdown/TDropdownItem.vue
index ab58f51..fffe07a 100644
--- a/resources/js/Components/Dropdown/TDropdownItem.vue
+++ b/resources/js/Components/Dropdown/TDropdownItem.vue
@@ -5,8 +5,7 @@
             v-if="link"
             class="flex flex-row items-center justify-start"
         >
-
-            <div v-if="$slots.icon" class="flex justify-center items-center w-5 h-5 mr-1">
+            <div v-if="$slots['icon']" class="flex justify-center items-center w-5 h-5 mr-1">
                 <slot name="icon"></slot>
             </div>
             <div class="flex">
@@ -19,7 +18,7 @@
 </template>
 
 <script>
-import {defineComponent} from 'vue'
+import {defineComponent, inject} from 'vue'
 import {Link} from '@inertiajs/inertia-vue3';
 
 export default defineComponent({
@@ -31,6 +30,15 @@ export default defineComponent({
         link: {
             type: String
         }
+    },
+    setup(props){
+        /*Definitions*/
+        const triggerType = inject('triggerType')
+
+        /*Slot Check*/
+        const hasSlot = name => !!slots[name]
+
+        return {hasSlot, triggerType}
     }
 })
 </script>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 9dc6358..30b0b64 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -84,7 +84,7 @@
                         <!--Notification and Logout Buttons-->
                         <div class="action-section">
                             <!--Notifications-->
-                            <t-dropdown align="right">
+                            <t-dropdown align="right" trigger-type="rich">
                                 <template #trigger>
                                     <button class="trigger-button">
                                         <span
@@ -126,7 +126,9 @@
                         </div>
                         <!--User Menu-->
                         <t-dropdown
-                            align="right">
+                            align="right"
+                            trigger-type="rich"
+                        >
                             <template #trigger>
                                 <!--If The user has a avatar-->
                                 <button
diff --git a/resources/js/Mixins/Styles/alertStyleMixin.js b/resources/js/Mixins/Styles/alertStyleMixin.js
deleted file mode 100644
index 88a7935..0000000
--- a/resources/js/Mixins/Styles/alertStyleMixin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-
-export const alertStyleMixin = {
-    mixins: [bgColorStyles, radiusSizeMixin],
-    props: {
-        type: {
-            type: String,
-            default: null
-        },
-        design: {
-            type: String,
-            default: null
-        },
-        color: {
-            type: String,
-            default: null
-        },
-    },
-    data() {
-        return {
-            types: ['success', 'danger', 'warning', 'info'],
-            designs: ['filled', 'light', 'gradient', 'inline', 'outline', 'elegant', 'block'],
-            colors: ['black', 'blue', 'gray', 'green', 'indigo', 'pink', 'purple', 'red', 'white', 'yellow']
-        }
-    },
-    computed: {
-        alertStyle() {
-            let style = '';
-            /*Style Migrating*/
-            style = this.bgColorStyle + ' ' + this.radiusStyle + ' ' + this.textColorStyle
-            return style
-        }
-    }
-}
diff --git a/resources/js/Mixins/Styles/avatarStyleMixin.js b/resources/js/Mixins/Styles/avatarStyleMixin.js
deleted file mode 100644
index a824211..0000000
--- a/resources/js/Mixins/Styles/avatarStyleMixin.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-
-export const avatarStyleMixin = {
-    props: {
-    },
-    mixins: [radiusSizeMixin, bgColorStyles],
-    data() {
-        return {
-            sizeStyles: {
-                '1': 'w-5 h-5',
-                '2': 'w-8 h-8',
-                '3': 'w-10 h-10',
-                '4': 'w-12 h-12',
-                '5': 'w-16 h-16',
-                '6': 'w-20 h-20',
-                '7': 'w-24 h-24',
-                '8': 'w-36 h-36',
-            },
-            indicatorPositionStyles: {
-                'lb': "-left-0.5 -bottom-0.5",
-                'rb': "-right-0.5 -bottom-0.5",
-                'lt': "-left-0.5 -top-0.5",
-                'rt': "-right-0.5 -top-0.5"
-            },
-        }
-    },
-    computed: {
-        calculatedIndicatorStyle() {
-            let style;
-            /*Position Style*/
-            style = this.indicatorPositionStyles[this.indicator.position]
-
-            /*Color Style*/
-            if (this.indicator.color.includes('solid')) {
-                /*Solid Colors*/
-                style += ' ' + this.solidColors[this.indicator.color]
-            } else if (this.indicator.color.includes('light')) {
-                /*Light Colors*/
-                style += ' ' + this.lightColors[this.indicator.color]
-            } else if (this.indicator.color.includes('gradient')) {
-                /*Gradient Colors*/
-                style += ' ' + this.gradientDirections[this.indicator.gradientDirection] + ' ' +
-                    this.gradientFirstColors[this.indicator.color.split('-')[1]] + ' ' +
-                    this.gradientSecondColors[this.indicator.color.split('-')[3]]
-            }
-
-            /*Text Color Styles*/
-            if (this.indicator.color.includes('solid')) {
-                /*Solid Colors*/
-                style += ' ' + this.solidTextColors[this.indicator.color]
-            } else if (this.indicator.color.includes('light')) {
-                /*Light Colors*/
-                style += ' ' + this.lightTextColors[this.indicator.color]
-            } else if (this.indicator.color.includes('gradient')) {
-                style += ' ' + this.solidTextColors[this.indicator.color]
-            }
-
-            return style
-        }
-    }
-}
diff --git a/resources/js/Mixins/Styles/badgeStyleMixin.js b/resources/js/Mixins/Styles/badgeStyleMixin.js
deleted file mode 100644
index da3d162..0000000
--- a/resources/js/Mixins/Styles/badgeStyleMixin.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-
-export const badgeStyleMixin = {
-    mixins: [radiusSizeMixin,bgColorStyles],
-    computed: {
-        calculatedBadgeStyle(){
-            let style = this.radiusStyle;
-            style += ' '+ this.textColorStyle;
-            style += ' '+ this.bgColorStyle;
-
-            return style
-        }
-    }
-}
\ No newline at end of file
diff --git a/resources/js/Mixins/Styles/breadcrumbStyleMixin.js b/resources/js/Mixins/Styles/breadcrumbStyleMixin.js
deleted file mode 100644
index 22993c3..0000000
--- a/resources/js/Mixins/Styles/breadcrumbStyleMixin.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-
-export const breadcrumbStyleMixin = {
-    mixins: [radiusSizeMixin],
-    data() {
-        return {
-            style1ActiveColors: {
-                'solid-red': 'border-red-600 text-red-600',
-                'solid-blue': 'border-blue-600 text-blue-600',
-                'solid-green': 'border-green-600 text-green-600',
-                'solid-yellow': 'border-yellow-600 text-yellow-600',
-                'solid-indigo': 'border-indigo-600 text-indigo-600',
-                'solid-pink': 'border-pink-600 text-pink-600',
-                'solid-purple': 'border-purple-600 text-purple-600',
-                'solid-gray': 'border-gray-600 text-gray-600',
-                'solid-black': 'border-black text-black',
-                'solid-white': 'border-gray-600 text-gray-600',
-            },
-            style2ActiveColors: {
-                'solid-red': 'bg-red-500 border-red-900',
-                'solid-blue': 'bg-blue-500 border-blue-900',
-                'solid-green': 'bg-green-500 border-green-900',
-                'solid-yellow': 'bg-yellow-500 border-yellow-900',
-                'solid-indigo': 'bg-indigo-500 border-indigo-900',
-                'solid-pink': 'bg-pink-500 border-pink-900',
-                'solid-purple': 'bg-purple-500 border-purple-900',
-                'solid-gray': 'bg-gray-500 border-gray-900',
-                'solid-black': 'bg-black border-gray-900',
-                'solid-white': 'bg-white border-gray-700 text-gray-600'
-            },
-        }
-    },
-}
\ No newline at end of file
diff --git a/resources/js/Mixins/Styles/buttonStyleMixin.js b/resources/js/Mixins/Styles/buttonStyleMixin.js
deleted file mode 100644
index ed1574f..0000000
--- a/resources/js/Mixins/Styles/buttonStyleMixin.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-
-export const buttonStyleMixin = {
-    props: {
-        color: {
-            type: String,
-            default: 'solid-green'
-        },
-    },
-    mixins: [bgColorStyles, radiusSizeMixin],
-    computed:{
-        calculatedButtonStyle() {
-            let style;
-            style = this.bgColorStyle +
-                ' ' + this.bgHoverColorStyle +
-                ' ' + this.textColorStyle +
-                ' ' + this.bgHoverColorStyle +
-                ' ' + this.radiusStyle
-            return style
-        }
-    }
-}
\ No newline at end of file
diff --git a/resources/js/Mixins/Styles/collapsibleStyleMixin.js b/resources/js/Mixins/Styles/collapsibleStyleMixin.js
deleted file mode 100644
index 063419f..0000000
--- a/resources/js/Mixins/Styles/collapsibleStyleMixin.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-
-export const collapsibleStyleMixin = {
-    mixins: [radiusSizeMixin,bgColorStyles],
-    data(){
-        return {
-
-        }
-    },
-    computed: {
-        /*Container*/
-        calculatedCollapsibleStyle(){
-            let style = this.radiusStyle
-            return style
-        },
-        /*Title*/
-        calculatedCollapsibleTitleStyle(){
-            let style = this.bgColorStyle
-            style += ' '+this.textColorStyle
-            return style
-        },
-        /*Content*/
-        calculatedCollapsibleItemContentStyle(){
-            let style = 'bg-opacity-10 border-none text-gray-600';
-            if(this.color.includes('gradient')){
-                style += ' ' + this.solidColors['solid-'+this.color.split('-')[1]]
-            }else{
-                style += ' ' + this.bgColorStyle
-            }
-            return style
-        }
-    }
-}
diff --git a/resources/js/Mixins/Styles/dropdownStyleMixin.js b/resources/js/Mixins/Styles/dropdownStyleMixin.js
deleted file mode 100644
index 453db66..0000000
--- a/resources/js/Mixins/Styles/dropdownStyleMixin.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
-import {bgColorStyles} from "@/Mixins/Styles/bgColorStyles";
-export const dropdownStyleMixin = {
-    props: {
-        align: {
-            type: String,
-            default: 'left'
-        },
-        size: {
-            type: String,
-            default: 'wide'
-        }
-    },
-    mixins: [radiusSizeMixin,bgColorStyles],
-    data(){
-        return {
-
-            alignStyles:{
-                'left': 'origin-top-left left-0',
-                'right': 'origin-top-right right-0',
-                'center': 'origin-top'
-            },
-            sizeStyles: {
-                'wide': 'min-w-22',
-                'fit': 'min-w-min'
-            }
-        }
-    },
-    computed: {
-        calculatedTriggerStyle(){
-            let style;
-            style = this.bgColorStyle +
-                ' ' + this.bgHoverColorStyle +
-                ' ' + this.textColorStyle +
-                ' ' + this.bgHoverColorStyle +
-                ' ' + this.radiusStyle
-            return style
-        },
-        calculatedContentStyle(){
-            let style;
-            style += ' ' + this.alignStyles[this.align],
-            style += ' ' + this.sizeStyles[this.size]
-
-            return style
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/resources/js/Pages/Samples/Components/Avatar.vue b/resources/js/Pages/Samples/Components/Avatar.vue
index f1a12fe..9af2fb7 100644
--- a/resources/js/Pages/Samples/Components/Avatar.vue
+++ b/resources/js/Pages/Samples/Components/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-layout>
+  <app-layout title="Avatars">
     <template #header>Avatars</template>
     <template #subHeader>User avatars and team members avatar group</template>
     <template #default>
diff --git a/resources/js/Pages/Samples/Components/Badge.vue b/resources/js/Pages/Samples/Components/Badge.vue
index aeb98bf..41b2057 100644
--- a/resources/js/Pages/Samples/Components/Badge.vue
+++ b/resources/js/Pages/Samples/Components/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-    <app-layout>
+    <app-layout title="Badges">
         <template #header>
             Badges
         </template>
diff --git a/resources/js/Pages/Samples/Components/Breadcrumb.vue b/resources/js/Pages/Samples/Components/Breadcrumb.vue
index a7d2a95..82ad678 100644
--- a/resources/js/Pages/Samples/Components/Breadcrumb.vue
+++ b/resources/js/Pages/Samples/Components/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-    <app-layout>
+    <app-layout title="Breadcrumb">
         <template #header>Breadcrumb</template>
         <template #subHeader>2 Different breadcrumbs style</template>
         <template #default>
diff --git a/resources/js/Pages/Samples/Components/Button.vue b/resources/js/Pages/Samples/Components/Button.vue
index 214ac4b..004f03c 100644
--- a/resources/js/Pages/Samples/Components/Button.vue
+++ b/resources/js/Pages/Samples/Components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <app-layout>
+    <app-layout title="Buttons">
         <template #header>Buttons</template>
         <template #subHeader>For all use (1.296 variations)</template>
         <template #default>
diff --git a/resources/js/Pages/Samples/Components/Collapsible.vue b/resources/js/Pages/Samples/Components/Collapsible.vue
index b306b8d..02d6318 100644
--- a/resources/js/Pages/Samples/Components/Collapsible.vue
+++ b/resources/js/Pages/Samples/Components/Collapsible.vue
@@ -97,7 +97,7 @@
                             :separated="true"
                         >
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive2 = $event"
                                 item-key="TailAdmin"
                                 color="red"
                             >
@@ -111,7 +111,7 @@
                                 </template>
                             </t-collapsible-item>
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive2 = $event"
                                 item-key="LaraQuality"
                                 color="blue"
                             >
@@ -128,7 +128,7 @@
                                 </template>
                             </t-collapsible-item>
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive2 = $event"
                                 item-key="LaraCoin"
                                 color="indigo"
                             >
@@ -154,7 +154,7 @@
                             Hover + Separated + Cross + Accordion
                         </template>
                         <t-collapsible
-                            v-model="collapsibleActive2"
+                            v-model="collapsibleActive3"
                             :accordion="true"
                             opening-type="hover"
                             trigger-type="cross"
@@ -163,7 +163,7 @@
                             :separated="false"
                         >
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive3 = $event"
                                 item-key="TailAdmin"
                                 color="red"
                             >
@@ -177,7 +177,7 @@
                                 </template>
                             </t-collapsible-item>
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive3 = $event"
                                 item-key="LaraQuality"
                                 color="blue"
                             >
@@ -194,7 +194,7 @@
                                 </template>
                             </t-collapsible-item>
                             <t-collapsible-item
-                                @active="collapsibleActive = $event"
+                                @active="collapsibleActive3 = $event"
                                 item-key="LaraCoin"
                                 color="indigo"
                             >
diff --git a/resources/js/Pages/Samples/Components/Dropdown.vue b/resources/js/Pages/Samples/Components/Dropdown.vue
index fe8288b..62491dd 100644
--- a/resources/js/Pages/Samples/Components/Dropdown.vue
+++ b/resources/js/Pages/Samples/Components/Dropdown.vue
@@ -1,88 +1,159 @@
 <template>
-  <app-layout>
-    <template #header>
-      Dropdowns
-    </template>
-    <template #subHeader>
-      Menu or multi functional buttons
-    </template>
-    <template #default>
-      <grid-section :col="1">
-        <t-content-card :width="1">
-          <template #title>Simple</template>
-          <template #subTitle>Link (Blank, Internal, External and Route) and Icons</template>
-          <template #content>
-            <div class="flex flex-wrap items-center justify-center space-x-4">
-              <!--Indigo-->
-              <t-dropdown color="solid-white" size="fit">
-                <template #title>
-                  Fit Links
-                </template>
-                <t-dropdown-item>Menu 1</t-dropdown-item>
-                <t-dropdown-item>Menu 2</t-dropdown-item>
-                <t-dropdown-item>Menu 3</t-dropdown-item>
-              </t-dropdown>
-              <!--With Icon-->
-              <t-dropdown color="gradient-red-to-pink" align="right">
-                <template #title>
-                  Wide Links
-                </template>
-                <t-dropdown-item :link="route('alert')">
-                  <font-awesome-icon slot="icon" icon="info"/>
-                  Alert Component
-                </t-dropdown-item>
-                <t-dropdown-item :link="route('badge')">
-                  <font-awesome-icon slot="icon" icon="dot-circle"/>
-                  Badge Component
-                </t-dropdown-item>
-                <t-dropdown-item :link="route('list')">
-                  <font-awesome-icon slot="icon" icon="layer-group"/>
-                  List Component
-                </t-dropdown-item>
-              </t-dropdown>
+    <app-layout title="Dropdowns">
+        <template #header>
+            Dropdowns
+        </template>
+        <template #subHeader>
+            Menu or multi functional buttons
+        </template>
+        <template #default>
+            <grid-section :col="1">
+                <t-content-card :width="1">
+                    <template #button-trigger>Simple</template>
+                    <template #subTitle>Link (Blank, Internal, External and Route) and Icons</template>
+                    <template #content>
+                        <div class="flex flex-wrap items-center justify-center space-x-4">
+                            <!--Indigo-->
+                            <t-dropdown color="solid-white" size="fit">
+                                <template #trigger>
+                                    Fit Links
+                                </template>
+                                <t-dropdown-item>Menu 1</t-dropdown-item>
+                                <t-dropdown-item>Menu 2</t-dropdown-item>
+                                <t-dropdown-item>Menu 3</t-dropdown-item>
+                            </t-dropdown>
 
-              <!--Trigger-->
-              <t-dropdown size="fit" align="right">
-                <template #trigger>
-                  <t-avatar src="https://i.pravatar.cc" :indicator="{color:'solid-green',position:'rb'}"/>
-                </template>
-                <div class="bg-white rounded-md border mt-1 overflow-hidden w-32">
-                  <t-dropdown-item>
-                    <t-user-circle-icon class="w-5 h-5 inline-block"/>
-                    Profile
-                  </t-dropdown-item>
-                  <t-dropdown-item>
-                    <t-cash-icon class="w-5  inline-block"/>
-                    Wallet
-                  </t-dropdown-item>
-                  <span class="inline-flex px-2 pb-2 pt-1 -mb-1 border-t border-red-500 w-full gap-1 h-full items-center text-red-500 bg-gray-100 hover:bg-red-500 hover:text-white">
+                            <!--With Icon-->
+                            <t-dropdown color="gradient-red-to-pink" align="right">
+                                <template #trigger>
+                                    Wide Links
+                                </template>
+                                <t-dropdown-item :link="route('alert')">
+                                    <template #icon>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                                        </svg>
+                                    </template>
+                                    Alert Component
+                                </t-dropdown-item>
+                                <t-dropdown-item :link="route('badge')">
+                                    <template #icon>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+                                        </svg>
+                                    </template>
+                                    Badge Component
+                                </t-dropdown-item>
+                                <t-dropdown-item :link="route('list')">
+                                    <template #icon>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                                        </svg>
+                                    </template>
+                                    List Component
+                                </t-dropdown-item>
+                            </t-dropdown>
+
+                            <!--Rich Trigger-->
+                            <t-dropdown size="fit" align="right" trigger-type="rich">
+                                <div class="bg-white rounded-md border mt-1 overflow-hidden w-32">
+                                    <t-dropdown-item>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                        </svg>
+                                        Profile
+                                    </t-dropdown-item>
+                                    <t-dropdown-item>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+                                        </svg>
+                                        Wallet
+                                    </t-dropdown-item>
+                                    <span
+                                        class="inline-flex px-2 pb-2 pt-1 -mb-1 border-t border-red-500 w-full gap-1 h-full items-center text-red-500 bg-gray-100 hover:bg-red-500 hover:text-white">
                       <t-log-out-icon class="w-5 h-5"/>
                     Logout
                   </span>
-                </div>
-              </t-dropdown>
-            </div>
-          </template>
-        </t-content-card>
-      </grid-section>
-      <!--Sample Codes-->
-      <ssh-pre :copy-button="true" label="Code" language="html">{{ sampleCode.html }}</ssh-pre>
-      <ssh-pre :copy-button="true" label="JS" language="js">{{ sampleCode.js }}</ssh-pre>
-      <!--Variables Table-->
-      <t-table
-          :content="sampleCode.table.content"
-          :header="sampleCode.table.header"
-          :searchable="['variable','details']"
-          class="mt-5"
-          color="solid-blue"
-      >
-        <template #details="{props}">
+                                </div>
+                                <template #trigger>
+                                    <t-avatar src="https://i.pravatar.cc"
+                                              :indicator="{color:'solid-green',position:'rb'}"/>
+                                </template>
+                            </t-dropdown>
+
+                            <!--Table Action Trigger-->
+                            <t-dropdown align="right" size="fit" trigger-type="rich">
+                                <template #trigger>
+                                    <div class="flex justify-center items-center h-10 w-10 hover:bg-gray-200 rounded-md">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+                                             viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                  d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
+                                        </svg>
+                                    </div>
+                                </template>
+                                <t-list :radius="3">
+                                    <t-list-item class="hover:bg-red-100 hover:text-red-500 cursor-pointer text-sm">
+                                        <div class="flex items-center h-6">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
+                                                 viewBox="0 0 24 24"
+                                                 stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                      stroke-width="2"
+                                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                            </svg>
+                                            Delete
+                                        </div>
+                                    </t-list-item>
+                                    <t-list-item class="hover:bg-blue-100 hover:text-blue-500 cursor-pointer text-sm">
+                                        <div class="flex items-center h-6">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
+                                                 viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                      stroke-width="2"
+                                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                                            </svg>
+                                            Edit
+                                        </div>
+                                    </t-list-item>
+                                    <t-list-item class="hover:bg-blue-100 hover:text-blue-500 cursor-pointer text-sm">
+                                        <div class="flex items-center h-6">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
+                                                 viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                      stroke-width="2"
+                                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                      stroke-width="2"
+                                                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                                            </svg>
+                                            View
+                                        </div>
+                                    </t-list-item>
+                                </t-list>
+                            </t-dropdown>
+                        </div>
+                    </template>
+                </t-content-card>
+            </grid-section>
+            <!--Sample Codes-->
+            <ssh-pre :copy-button="true" label="Code" language="html">{{ sampleCode.html }}</ssh-pre>
+            <ssh-pre :copy-button="true" label="JS" language="js">{{ sampleCode.js }}</ssh-pre>
+            <!--Variables Table-->
+            <t-table
+                :content="sampleCode.table.content"
+                :header="sampleCode.table.header"
+                :searchable="['variable','details']"
+                class="mt-5"
+                color="solid-blue"
+            >
+                <template #details="{props}">
               <span class="whitespace-nowrap tablet:whitespace-normal" v-html="props.details">
               </span>
+                </template>
+            </t-table>
         </template>
-      </t-table>
-    </template>
-  </app-layout>
+    </app-layout>
 </template>
 
 <script>
@@ -94,96 +165,97 @@ import TDropdown from "@/Components/Dropdown/TDropdown";
 import TDropdownItem from "@/Components/Dropdown/TDropdownItem";
 import TContentCard from "@/Components/Card/TContentCard";
 import TTable from "@/Components/Table/TTable";
-/*Codehighlighter*/
-import "simple-syntax-highlighter/dist/sshpre.css";
-import SshPre from "simple-syntax-highlighter";
+import TList from "@/Components/List/TList";
+import TListItem from "@/Components/List/TListItem";
 import TAvatar from "@/Components/Avatar/TAvatar";
 import TLogOutIcon from "@/Components/Icon/TLogOutIcon";
 import TCashIcon from "@/Components/Icon/TCashIcon";
 import TUserCircleIcon from "@/Components/Icon/TUserCircleIcon";
+/*Codehighlighter*/
+import "simple-syntax-highlighter/dist/sshpre.css";
+import SshPre from "simple-syntax-highlighter";
 
 export default {
-  name: "Dropdown",
-  components: {
-    TUserCircleIcon,
-    TCashIcon,
-    TLogOutIcon, TAvatar, TContentCard, GridSection, AppLayout, TDropdown, TDropdownItem, SshPre, TTable},
-  data() {
-    return {
-      sampleCode: {
-        html:
-            '<t-dropdown color="solid-red" size="wide">\n' +
-            '    <!--If you want to the dropdown looking like a button-->\n' +
-            '    <template #title>\n' +
-            '      Title\n' +
-            '    </template>\n' +
-            '    <!--Or For what you want to use whatever-->\n' +
-            '    <template #trigger>\n' +
-            '      <t-avatar :src="avatar.jpg"/>\n' +
-            '    </template>\n' +
-            '    <!--Route links, you must define links in the web.php-->\n' +
-            '    <t-dropdown-item :link="route(\'alert\')">\n' +
-            '        <!--You can use any icon component but you must use slot="icon" attributes-->\n' +
-            '        <font-awesome-icon icon="info" slot="icon"/>\n' +
-            '        Alert Component\n' +
-            '    </t-dropdown-item>\n' +
-            '    <!--You can internal links-->\n' +
-            '    <t-dropdown-item link="/login">\n' +
-            '        <!--You can use any icon component but you must use slot="icon" attributes-->\n' +
-            '        <font-awesome-icon icon="dot-circle" slot="user"/>\n' +
-            '        Login\n' +
-            '    </t-dropdown-item>\n' +
-            '    <!--You can external links-->\n' +
-            '    <t-dropdown-item link="http://tailadmin.dev">\n' +
-            '        TailAdmin\n' +
-            '    </t-dropdown-item>\n' +
-            '</t-dropdown>',
-        js:
-            'import TDropdown from "@/Components/Dropdown/TDropdown";\n' +
-            'import TDropdownItem from "@/Components/Dropdown/TDropdownItem";' +
-            '\n' +
-            'export default {\n' +
-            '  name: "Dropdown",\n' +
-            '  components: {TDropdown, TDropdownItem},\n' +
-            '  }',
-        table: {
-          header: [
-            {key: 'variable', label: 'Variable'},
-            {key: 'type', label: 'Value Type'},
-            {key: 'details', label: 'Details'},
-          ],
-          content: [
-            {
-              variable: 'link',
-              type: 'String',
-              details: 'There are three link\'s types. Internal (/login), External (https://tailadmin.dev) and Route (route(\'login\'))'
-            },
-            {
-              variable: 'color',
-              type: 'String',
-              details: "Your dropdown theme.<br><b>Options Solid:</b> solid-red, solid-blue, solid-green, solid-yellow, solid-indigo, solid-pink, solid-purple, solid-gray, solid-black, solid-white,<br>" +
-                  "<b>Options Light:</b> light-red, light-blue, light-green, light-yellow, light-indigo, light-pink, light-purple, light-gray<br" +
-                  "><b>Options Gradient:</b> gradient-red-to-pink. Red is first color and Pink is second color. You change red end pink with red, blue, green, yellow, indigo, pink, purple and gray)"
-            },
-            {
-              variable: 'gradient-direction',
-              type: 'String',
-              details: "If you use to the gradient color, you can select gradient's direction. <br><b>Options:</b> r, l, b, t, tl, bl, tr, br<br>" +
-                  "<b>Default:</b> r<br>(Means: l: left, r: right, b: bottom, t: top)"
-            },
-            {
-              variable: 'size',
-              type: 'String',
-              details: 'You can select size/width type<br><b>Options:</b> fit, wide<br><b>Default:</b> wide<br>Wide: The width is min 15rem, Fit: The with is min. content\'s width'
+    name: "Dropdown",
+    components: {
+        TListItem,
+        TList,
+        TUserCircleIcon,
+        TCashIcon,
+        TLogOutIcon, TAvatar, TContentCard, GridSection, AppLayout, TDropdown, TDropdownItem, SshPre, TTable
+    },
+    data() {
+        return {
+            sampleCode: {
+                html:
+                    '<t-dropdown color="solid-red" size="wide" trigger-type="rich">\n' +
+                    '    <!--If you want to the dropdown looking like a button-->\n' +
+                    '    <template #trigger>\n' +
+                    '      Title\n' +
+                    '    </template>\n' +
+                    '    <!--Or For what you want to use whatever-->\n' +
+                    '    <template #trigger>\n' +
+                    '      <t-avatar :src="avatar.jpg"/>\n' +
+                    '    </template>\n' +
+                    '    <!--Route links, you must define links in the web.php-->\n' +
+                    '    <t-dropdown-item :link="route(\'alert\')">\n' +
+                    '        <!--You can use any icon component but you must use slot="icon" attributes-->\n' +
+                    '        <font-awesome-icon icon="info" slot="icon"/>\n' +
+                    '        Alert Component\n' +
+                    '    </t-dropdown-item>\n' +
+                    '    <!--You can internal links-->\n' +
+                    '    <t-dropdown-item link="/login">\n' +
+                    '        <!--You can use any icon component but you must use slot="icon" attributes-->\n' +
+                    '        <font-awesome-icon icon="dot-circle" slot="user"/>\n' +
+                    '        Login\n' +
+                    '    </t-dropdown-item>\n' +
+                    '    <!--You can external links-->\n' +
+                    '    <t-dropdown-item link="http://tailadmin.dev">\n' +
+                    '        TailAdmin\n' +
+                    '    </t-dropdown-item>\n' +
+                    '</t-dropdown>',
+                js:
+                    'import TDropdown from "@/Components/Dropdown/TDropdown";\n' +
+                    'import TDropdownItem from "@/Components/Dropdown/TDropdownItem";' +
+                    '\n' +
+                    'export default {\n' +
+                    '  name: "Dropdown",\n' +
+                    '  components: {TDropdown, TDropdownItem},\n' +
+                    '  }',
+                table: {
+                    header: [
+                        {key: 'variable', label: 'Variable'},
+                        {key: 'type', label: 'Value Type'},
+                        {key: 'details', label: 'Details'},
+                    ],
+                    content: [
+                        {
+                            variable: 'link',
+                            type: 'String',
+                            details: 'There are three link\'s types. Internal (/login), External (https://tailadmin.dev) and Route (route(\'login\'))'
+                        },
+                        {
+                            variable: 'color',
+                            type: 'String',
+                            details: "Your dropdown theme.<br><b>Options Solid:</b> solid-red, solid-blue, solid-green, solid-yellow, solid-indigo, solid-pink, solid-purple, solid-gray, solid-black, solid-white,<br>" +
+                                "<b>Options Light:</b> light-red, light-blue, light-green, light-yellow, light-indigo, light-pink, light-purple, light-gray<br" +
+                                "><b>Options Gradient:</b> gradient-red-to-pink. Red is first color and Pink is second color. You change red end pink with red, blue, green, yellow, indigo, pink, purple and gray)"
+                        },
+                        {
+                            variable: 'gradient-direction',
+                            type: 'String',
+                            details: "If you use to the gradient color, you can select gradient's direction. <br><b>Options:</b> r, l, b, t, tl, bl, tr, br<br>" +
+                                "<b>Default:</b> r<br>(Means: l: left, r: right, b: bottom, t: top)"
+                        },
+                        {
+                            variable: 'size',
+                            type: 'String',
+                            details: 'You can select size/width type<br><b>Options:</b> fit, wide<br><b>Default:</b> wide<br>Wide: The width is min 15rem, Fit: The with is min. content\'s width'
+                        }
+                    ]
+                }
             }
-          ]
         }
-      }
     }
-  }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/Pages/Settings/User.vue b/resources/js/Pages/Settings/User.vue
index 26904dc..961116c 100644
--- a/resources/js/Pages/Settings/User.vue
+++ b/resources/js/Pages/Settings/User.vue
@@ -5,7 +5,7 @@
         <initial-vertical-menu :menu="menuList"/>
         <t-table :content="users" :header="headers" class="mt-4" :searchable="['name']">
             <template #id="{props}">
-                <t-dropdown align="right" size="fit">
+                <t-dropdown align="right" size="fit" trigger-type="rich">
                     <template #trigger>
                         <t-dots-vertical-icon class="w-6 h-6 cursor-pointer"/>
                     </template>