diff --git a/src/pages/Order/Card/OrderSummaryDialog.vue b/src/pages/Order/Card/OrderSummaryDialog.vue
new file mode 100644
index 000000000..ebe891f4a
--- /dev/null
+++ b/src/pages/Order/Card/OrderSummaryDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import OrderSummary from "pages/Order/Card/OrderSummary.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <OrderSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 28f0c3f1d..362a68b4d 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -4,15 +4,18 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
+import {useQuasar} from "quasar";
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
-import OrderFilter from "pages/Order/Card/OrderFilter.vue";
+import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
+import OrderSummaryDialog from "pages/Order/Card/OrderSummaryDialog.vue";
 
 const stateStore = useStateStore();
+const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
 
@@ -22,6 +25,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: OrderSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -119,14 +131,14 @@ function navigate(id) {
                                 :value="toCurrency(row?.total)"
                             />
                         </template>
-                        <!--                        <template #actions>-->
-                        <!--                            <QBtn-->
-                        <!--                                :label="t('components.smartCard.openSummary')"-->
-                        <!--                                @click.stop="viewSummary(row.id)"-->
-                        <!--                                color="primary"-->
-                        <!--                                style="margin-top: 15px"-->
-                        <!--                            />-->
-                        <!--                        </template>-->
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
                     </CardList>
                 </template>
             </VnPaginate>