diff --git a/ui/src/components/Properties.vue b/ui/src/components/Properties.vue
new file mode 100644
index 00000000000..8cd90224fa3
--- /dev/null
+++ b/ui/src/components/Properties.vue
@@ -0,0 +1,250 @@
+<template>
+    <div class="properties-wrapper">
+        <el-button type="primary" :icon="TableColumn" @click.stop="toggleContainer">
+            {{ $t("properties.button") }}
+        </el-button>
+
+        <div 
+            class="properties-container" 
+            :class="{visible: showContainer}" 
+            ref="containerRef"
+            @click.stop
+        >
+            <el-input
+                v-model="searchQuery"
+                :placeholder="$t('properties.searchPlaceholder')"
+                :prefix-icon="Magnify"
+                class="rounded-2 w-100 mb-2"
+            />
+            <div class="pe-2 scrollable-container">
+                <div class="mt-2 shown-group" v-if="shownProperties.length > 0">
+                    <div class="text-start mb-1 group-title">
+                        {{ $t("properties.shownInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="shown-list">
+                        <li v-for="property in filteredShownProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, true)">
+                                <Eye />
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <el-divider />
+                <div class="hidden-group">
+                    <div class="text-start mb-1 group-title" id="hidden-title" v-if="hiddenProperties.length > 0">
+                        {{ $t("properties.hiddenInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="hidden-list">
+                        <li v-for="property in filteredHiddenProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, false)">
+                                <EyeOff />
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {ref, computed, onMounted, onUnmounted} from "vue";
+    import TableColumn from "vue-material-design-icons/TableColumn.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import Magnify from "vue-material-design-icons/Magnify.vue";
+    import EyeOff from "vue-material-design-icons/EyeOff.vue";
+
+    const props = defineProps({
+        columns: {
+            type: Array,
+            required: true
+        },
+        modelValue: {
+            type: Array,
+            required: true
+        },
+        storageKey: {
+            type: String,
+            required: true,
+            default: "default-storage-key"
+        }
+    });
+
+    const emit = defineEmits(["update:modelValue"]);
+
+    const containerRef = ref(null);
+    const showContainer = ref(false);
+    const searchQuery = ref("");
+
+    const handleClickOutside = (event) => {
+        if (containerRef.value && !containerRef.value.contains(event.target)) {
+            showContainer.value = false;
+        }
+    };
+
+    // Initialize from localStorage when component mounts
+    onMounted(() => {
+        const savedColumns = localStorage.getItem(props.storageKey)?.split(",") || [];
+        if (savedColumns.length > 0) {
+            emit("update:modelValue", savedColumns);
+        }
+        document.addEventListener("click", handleClickOutside);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener("click", handleClickOutside);
+    });
+
+    const shownProperties = computed(() => {
+        return props.modelValue;
+    });
+
+    const hiddenProperties = computed(() => {
+        return props.columns
+            .map(col => col.prop)
+            .filter(prop => !props.modelValue.includes(prop));
+    });
+
+    const toggleContainer = () => {
+        showContainer.value = !showContainer.value;
+    };
+
+    const toggleProperty = (prop, isShown) => {
+        const newValue = [...props.modelValue];
+        if (isShown) {
+            // Removing from shown
+            const index = newValue.indexOf(prop);
+            if (index > -1) {
+                newValue.splice(index, 1);
+            }
+        } else {
+            // Adding to shown
+            newValue.push(prop);
+        }
+        // Saving to localStorage immediately when changed
+        localStorage.setItem(props.storageKey, newValue.join(","));
+        emit("update:modelValue", newValue);
+    };
+
+    const filteredShownProperties = computed(() => {
+        return [...shownProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const filteredHiddenProperties = computed(() => {
+        return [...hiddenProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const getColumnLabel = (prop) => {
+        const column = props.columns.find(col => col.prop === prop);
+        return column ? column.label : prop;
+    };
+</script>
+
+<style scoped lang="scss">
+.properties-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.properties-container {
+    position: absolute;
+    z-index: 1000;
+    background-color: var(--bs-gray-100);
+    border: 1px solid var(--ks-border-primary);
+    border-radius: 8px;
+    padding: 1rem;
+    width: 280px;
+    opacity: 0;
+    visibility: hidden;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 7px;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    &.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+}
+
+.scrollable-container {
+    max-height: 300px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--el-scrollbar-bg-color);
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--el-color-primary);
+        border-radius: 3px;
+
+        &:hover {
+            background: var(--el-color-primary-light-3);
+        }
+    }
+}
+
+.container-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.group-title {
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-extra-small);
+}
+
+.property-list {
+    li {  
+        padding: 8px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 10px;
+    }
+}
+
+.property-name {
+    font-size: var(--el-font-size-small);
+    color: var(--el-text-color-regular);
+}
+
+:deep(.el-input__prefix-inner) {
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-large);
+}
+
+.eye-icon {
+    cursor: pointer;
+    transition: opacity 0.2s;
+    color: var(--el-text-color-regular);
+    font-size: 16px;
+
+    &:hover {
+        color: var(--el-text-color-secondary);
+    }
+}
+
+:deep(.el-input__inner::placeholder) {
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-small);
+}
+</style>
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index b9a420230eb..fb09d2f280c 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -53,6 +53,15 @@
                 <el-card v-if="showStatChart()" shadow="never" class="mb-4">
                     <ExecutionsBar v-if="daily" :data="daily" :total="executionsCount" />
                 </el-card>
+                
+                <!-- Properties component moved here -->
+                <div v-if="executions.length" class="text-end mb-3">
+                    <Properties 
+                        :columns="optionalColumns" 
+                        v-model="displayColumns"
+                        :storage-key="storageKey"
+                    />
+                </div>
             </template>
 
             <template #table v-if="executions.length">
@@ -149,6 +158,7 @@
                     </template>
                     <template #default>
                         <el-table-column
+                            v-if="displayColumn('id')"
                             prop="id"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
@@ -164,8 +174,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.startDate"
                             v-if="displayColumn('state.startDate')"
+                            prop="state.startDate"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('start date')"
@@ -176,8 +186,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.endDate"
                             v-if="displayColumn('state.endDate')"
+                            prop="state.endDate"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('end date')"
@@ -188,8 +198,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.duration"
                             v-if="displayColumn('state.duration')"
+                            prop="state.duration"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('duration')"
@@ -234,8 +244,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.current"
                             v-if="displayColumn('state.current')"
+                            prop="state.current"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('state')"
@@ -246,6 +256,7 @@
                         </el-table-column>
 
                         <el-table-column
+                            v-if="displayColumn('flowRevision')"
                             prop="flowRevision"
                             :label="$t('revision')"
                             class-name="shrink"
@@ -256,8 +267,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="inputs"
                             v-if="displayColumn('inputs')"
+                            prop="inputs"
                             :label="$t('inputs')"
                             align="center"
                         >
@@ -272,8 +283,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="taskRunList.taskId"
                             v-if="displayColumn('taskRunList.taskId')"
+                            prop="taskRunList.taskId"
                             :label="$t('task id')"
                         >
                             <template #header="scope">
@@ -291,7 +302,7 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column column-key="action" class-name="row-action">
+                        <el-table-column v-if="displayColumn('action')" column-key="action" class-name="row-action">
                             <template #default="scope">
                                 <router-link
                                     :to="{name: 'executions/update', params: {namespace: scope.row.namespace, flowId: scope.row.flowId, id: scope.row.id}, query: {revision: scope.row.flowRevision}}"
@@ -365,6 +376,7 @@
     import KestraFilter from "../filter/KestraFilter.vue"
     import QueueFirstInLastOut from "vue-material-design-icons/QueueFirstInLastOut.vue";
     import RunFast from "vue-material-design-icons/RunFast.vue";
+    import Properties from "../Properties.vue";
 </script>
 
 <script>
@@ -460,57 +472,57 @@
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_CHART)),
                 optionalColumns: [
                     {
-                        label: "start date",
+                        label: this.$t("id"),
+                        prop: "id",
+                        default: true
+                    },
+                    {
+                        label: this.$t("start date"),
                         prop: "state.startDate",
                         default: true
                     },
                     {
-                        label: "end date",
+                        label: this.$t("end date"),
                         prop: "state.endDate",
                         default: true
                     },
                     {
-                        label: "duration",
+                        label: this.$t("duration"),
                         prop: "state.duration",
                         default: true
                     },
                     {
-                        label: "state",
+                        label: this.$t("state"),
                         prop: "state.current",
                         default: true
                     },
                     {
-                        label: "triggers",
-                        prop: "triggers",
-                        default: true
-                    },
-                    {
-                        label: "labels",
+                        label: this.$t("labels"),
                         prop: "labels",
                         default: true
                     },
                     {
-                        label: "inputs",
-                        prop: "inputs",
-                        default: false
-                    },
-                    {
-                        label: "namespace",
+                        label: this.$t("namespace"),
                         prop: "namespace",
                         default: true
                     },
                     {
-                        label: "flow",
+                        label: this.$t("flow"),
                         prop: "flowId",
                         default: true
                     },
                     {
-                        label: "revision",
+                        label: this.$t("revision"),
                         prop: "flowRevision",
                         default: false
                     },
                     {
-                        label: "task id",
+                        label: this.$t("inputs"),
+                        prop: "inputs",
+                        default: false
+                    },
+                    {
+                        label: this.$t("task id"),
                         prop: "taskRunList.taskId",
                         default: false
                     }
@@ -532,8 +544,19 @@
                 this.storageKey = storageKeys.DISPLAY_FLOW_EXECUTIONS_COLUMNS;
                 this.optionalColumns = this.optionalColumns.filter(col => col.prop !== "namespace" && col.prop !== "flowId")
             }
-            this.displayColumns = localStorage.getItem(this.storageKey)?.split(",")
-                || this.optionalColumns.filter(col => col.default).map(col => col.prop);
+            
+            // Load saved columns from localStorage
+            const savedColumns = localStorage.getItem(this.storageKey)?.split(",");
+            if (savedColumns) {
+                this.displayColumns = savedColumns;
+            } else {
+                // Use default columns if nothing is saved
+                this.displayColumns = this.optionalColumns
+                    .filter(col => col.default)
+                    .map(col => col.prop);
+                localStorage.setItem(this.storageKey, this.displayColumns.join(","));
+            }
+
             if (this.isConcurrency) {
                 this.emitStateCount([State.RUNNING, State.PAUSED])
             }
@@ -646,7 +669,7 @@
                 this.displayColumns = event;
             },
             displayColumn(column) {
-                return this.hidden ? !this.hidden.includes(column) : this.displayColumns.includes(column);
+                return this.displayColumns.includes(column);
             },
             onShowChartChange(value) {
                 this.showChart = value;
@@ -952,6 +975,10 @@
                 }, false)).then(() => {
                     this.$emit("state-count", this.total);
                 });
+            },
+            updateDisplayColumns(columns) {
+                this.displayColumns = columns;
+                localStorage.setItem(this.storageKey, columns.join(","));
             }
         },
         watch: {
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 114aed406d5..cf0791bf6f0 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -59,6 +59,13 @@
                     <el-card v-if="showStatChart()" shadow="never" class="mb-4">
                         <ExecutionsBar :data="daily" :total="executionsCount" />
                     </el-card>
+                    <div v-if="flows.length" class="text-end mb-3">
+                        <Properties 
+                            :columns="optionalColumns" 
+                            v-model="displayColumns"
+                            :storage-key="storageKey"
+                        />
+                    </div>
                 </template>
 
                 <template #table>
@@ -100,6 +107,7 @@
                         </template>
                         <template #default>
                             <el-table-column
+                                v-if="displayColumn('id')"
                                 prop="id"
                                 sortable="custom"
                                 :sort-orders="['ascending', 'descending']"
@@ -122,13 +130,14 @@
                                 </template>
                             </el-table-column>
 
-                            <el-table-column :label="$t('labels')">
+                            <el-table-column v-if="displayColumn('labels')" :label="$t('labels')">
                                 <template #default="scope">
                                     <labels :labels="scope.row.labels" />
                                 </template>
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('namespace')"
                                 prop="namespace"
                                 sortable="custom"
                                 :sort-orders="['ascending', 'descending']"
@@ -137,9 +146,9 @@
                             />
 
                             <el-table-column
+                                v-if="displayColumn('state.startDate') && user.hasAny(permission.EXECUTION)"
                                 prop="state.startDate"
                                 :label="$t('last execution date')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                             >
                                 <template #default="scope">
                                     <date-ago v-if="lastExecutionByFlowReady" :inverted="true" :date="getLastExecution(scope.row).startDate" />
@@ -147,9 +156,9 @@
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('state.current') && user.hasAny(permission.EXECUTION)"
                                 prop="state.current"
                                 :label="$t('last execution status')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                             >
                                 <template #default="scope">
                                     <status v-if="lastExecutionByFlowReady && getLastExecution(scope.row).lastStatus" :status="getLastExecution(scope.row).lastStatus" size="small" />
@@ -157,9 +166,9 @@
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('state') && user.hasAny(permission.EXECUTION)"
                                 prop="state"
                                 :label="$t('execution statistics')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                                 class-name="row-graph"
                             >
                                 <template #default="scope">
@@ -173,13 +182,13 @@
                                 </template>
                             </el-table-column>
 
-                            <el-table-column :label="$t('triggers')" class-name="row-action">
+                            <el-table-column v-if="displayColumn('triggers')" :label="$t('triggers')" class-name="row-action">
                                 <template #default="scope">
                                     <trigger-avatar :flow="scope.row" />
                                 </template>
                             </el-table-column>
 
-                            <el-table-column column-key="action" class-name="row-action">
+                            <el-table-column v-if="displayColumn('details')" column-key="action" class-name="row-action">
                                 <template #default="scope">
                                     <router-link
                                         :to="{name: 'flows/update', params : {namespace: scope.row.namespace, id: scope.row.id}}"
@@ -207,8 +216,9 @@
     import TrashCan from "vue-material-design-icons/TrashCan.vue";
     import FileDocumentRemoveOutline from "vue-material-design-icons/FileDocumentRemoveOutline.vue";
     import FileDocumentCheckOutline from "vue-material-design-icons/FileDocumentCheckOutline.vue";
+    import KestraFilter from "../filter/KestraFilter.vue";
+    import Properties from "../Properties.vue";
 
-    import KestraFilter from "../filter/KestraFilter.vue"
 </script>
 
 <script>
@@ -271,8 +281,65 @@
                 dailyReady: false,
                 file: undefined,
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_FLOWS_CHART)),
+                optionalColumns: [
+                    {
+                        label: this.$t("id"),
+                        prop: "id",
+                        default: true
+                    },
+                    {
+                        label: this.$t("labels"),
+                        prop: "labels",
+                        default: true
+                    },
+                    {
+                        label: this.$t("namespace"),
+                        prop: "namespace",
+                        default: true
+                    },
+                    {
+                        label: this.$t("last execution date"),
+                        prop: "state.startDate",
+                        default: true
+                    },
+                    {
+                        label: this.$t("last execution status"),
+                        prop: "state.current",
+                        default: true
+                    },
+                    {
+                        label: this.$t("execution statistics"),
+                        prop: "state",
+                        default: true
+                    },
+                    {
+                        label: this.$t("triggers"),
+                        prop: "triggers",
+                        default: true
+                    },
+                    {
+                        label: this.$t("details"),
+                        prop: "details",
+                        default: true
+                    }
+                ],
+                displayColumns: [],
+                storageKey: storageKeys.DISPLAY_FLOWS_COLUMNS,
             };
         },
+        created() {
+            // Loading saved columns from localStorage
+            const savedColumns = localStorage.getItem(this.storageKey)?.split(",");
+            if (savedColumns) {
+                this.displayColumns = savedColumns;
+            } else {
+                // Using default columns if nothing is saved
+                this.displayColumns = this.optionalColumns
+                    .filter(col => col.default)
+                    .map(col => col.prop);
+                localStorage.setItem(this.storageKey, this.displayColumns.join(","));
+            }
+        },
         computed: {
             ...mapState("flow", ["flows", "total"]),
             ...mapState("stat", ["dailyGroupByFlow", "daily", "lastExecutions"]),
@@ -564,6 +631,13 @@
             },
             rowClasses(row) {
                 return row && row.row && row.row.disabled ? "disabled" : "";
+            },
+            displayColumn(column) {
+                return this.displayColumns.includes(column);
+            },
+            updateDisplayColumns(columns) {
+                this.displayColumns = columns;
+                localStorage.setItem(this.storageKey, columns.join(","));
             }
         }
     };
diff --git a/ui/src/components/layout/DataTable.vue b/ui/src/components/layout/DataTable.vue
index 1623f532577..7c999ad8988 100644
--- a/ui/src/components/layout/DataTable.vue
+++ b/ui/src/components/layout/DataTable.vue
@@ -9,11 +9,11 @@
         <el-container data-component="FILENAME_PLACEHOLDER#container" direction="vertical" v-loading="isLoading">
             <slot name="top" data-component="FILENAME_PLACEHOLDER#top" />
 
-            <pagination v-if="!embed" :size="size" :top="true" :page="page" :total="total" :max="max" @page-changed="onPageChanged">
+            <!-- <pagination v-if="!embed" :size="size" :top="true" :page="page" :total="total" :max="max" @page-changed="onPageChanged">
                 <template #search>
                     <slot name="search" />
                 </template>
-            </pagination>
+            </pagination> -->
 
             <slot name="table" data-component="FILENAME_PLACEHOLDER#table" />
 
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index 62615a6fa00..cc8eb9fb423 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -1058,6 +1058,12 @@
     },
     "custom value": "Custom value",
     "chart": "Chart",
-    "chart preview": "Chart preview"
+    "chart preview": "Chart preview",
+    "properties": {
+      "button": "Select Columns",
+      "searchPlaceholder": "Search for a property...",
+      "shownInTable": "Shown in Table",
+      "hiddenInTable": "Hidden in Table"
+    }
   }
 }
\ No newline at end of file