diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
new file mode 100644
index 0000000000..e8fc2c675b
--- /dev/null
+++ b/src/components/ui/CardDescriptor.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { useSlots, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+const slots = useSlots();
+const route = useRoute();
+const { t } = useI18n();
+
+const module = computed(() => {
+    return route.matched[1];
+});
+</script>
+
+<template>
+    <div class="descriptor">
+        <div class="header bg-primary q-pa-sm">
+            <router-link :to="{ name: `${module.name}List` }">
+                <q-btn round flat dense size="md" icon="view_list" color="white">
+                    <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+            <router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
+                <q-btn round flat dense size="md" icon="launch" color="white">
+                    <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
+                </q-btn>
+            </router-link>
+
+            <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
+                <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
+                <q-menu>
+                    <q-list>
+                        <slot name="menu" />
+                    </q-list>
+                </q-menu>
+            </q-btn>
+        </div>
+
+        <div v-if="$props.data" class="q-py-sm">
+            <slot name="body" />
+        </div>
+
+        <!-- Skeleton -->
+        <div id="descriptor-skeleton" v-if="!$props.data">
+            <div class="col q-pl-sm q-pa-sm">
+                <q-skeleton type="text" square height="45px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+                <q-skeleton type="text" square height="18px" />
+            </div>
+
+            <q-card-actions>
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+                <q-skeleton size="40px" />
+            </q-card-actions>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.descriptor {
+    max-width: 256px;
+
+    h5 {
+        margin: 0 15px;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+    }
+
+    .q-card__actions {
+        justify-content: center;
+    }
+
+    #descriptor-skeleton .q-card__actions {
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 29b3b4ee78..4ef530103f 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -13,7 +14,7 @@ const state = useState();
 onMounted(async () => {
     await fetch();
 });
-const claim = ref({});
+const claim = ref();
 
 async function fetch() {
     const entityId = route.params.id;
@@ -46,8 +47,71 @@ function stateColor(code) {
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
-        <q-scroll-area class="fit text-grey-8 descriptor">
-            <div class="header bg-primary q-pa-sm">
+        <q-scroll-area class="fit">
+            <card-descriptor module="" :data="claim">
+                <template #menu>
+                    <q-item clickable v-ripple>Option 1</q-item>
+                    <q-item clickable v-ripple>Option 2</q-item>
+                </template>
+                <template #body>
+                    <q-list>
+                        <q-item-label header class="ellipsis text-h5" :lines="1">
+                            {{ claim.client.name }}
+                            <q-tooltip>{{ claim.client.name }}</q-tooltip>
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
+                                <q-item-label>#{{ claim.id }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
+                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
+                                <q-item-label>{{ claim.worker.user.name }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
+                                <q-item-label>
+                                    <q-chip :color="stateColor(claim.claimState.code)" dense>
+                                        {{ claim.claimState.description }}
+                                    </q-chip>
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
+                                <q-item-label>{{ claim.ticketFk }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+
+                    <q-card-actions>
+                        <q-btn
+                            size="md"
+                            icon="vn:client"
+                            color="primary"
+                            :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
+                        >
+                            <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                            size="md"
+                            icon="vn:ticket"
+                            color="primary"
+                            :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
+                        >
+                            <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
+                        </q-btn>
+                    </q-card-actions>
+                </template>
+            </card-descriptor>
+            <!-- <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ path: '/claim/list' }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
                         <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
@@ -61,17 +125,17 @@ function stateColor(code) {
 
                 <q-btn round flat dense size="md" icon="more_vert" color="white">
                     <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
-                    <!-- <q-menu>
+                    <q-menu>
                         <q-list>
                             <q-item clickable v-ripple>Option 1</q-item>
                             <q-item clickable v-ripple>Option 2</q-item>
                         </q-list>
-                    </q-menu> -->
+                    </q-menu>
                 </q-btn>
-            </div>
+            </div> -->
 
-            <div v-if="claim.client" class="q-py-sm">
-                <q-list>
+            <!-- <div v-if="claim.client" class="q-py-sm"> -->
+            <!-- <q-list>
                     <q-item-label header class="ellipsis text-h5" :lines="1">
                         {{ claim.client.name }}
                         <q-tooltip>{{ claim.client.name }}</q-tooltip>
@@ -106,8 +170,8 @@ function stateColor(code) {
                             <q-item-label>{{ claim.ticketFk }}</q-item-label>
                         </q-item-section>
                     </q-item>
-                </q-list>
-                <q-card-actions>
+                </q-list> -->
+            <!-- <q-card-actions>
                     <q-btn
                         size="md"
                         icon="vn:client"
@@ -124,10 +188,10 @@ function stateColor(code) {
                     >
                         <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
                     </q-btn>
-                </q-card-actions>
-            </div>
+                </q-card-actions> -->
+            <!-- </div> -->
             <!-- Skeleton -->
-            <div id="descriptor-skeleton" v-if="!claim.client">
+            <!-- <div id="descriptor-skeleton" v-if="!claim.client">
                 <div class="col q-pl-sm q-pa-sm">
                     <q-skeleton type="text" square height="45px" />
                     <q-skeleton type="text" square height="18px" />
@@ -142,7 +206,7 @@ function stateColor(code) {
                     <q-skeleton size="40px" />
                     <q-skeleton size="40px" />
                 </q-card-actions>
-            </div>
+            </div> -->
 
             <q-separator />
 
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
new file mode 100644
index 0000000000..e69de29bb2