diff --git a/src/assets/app.scss b/src/assets/app.scss
index c237e41..9ffdf58 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -72,3 +72,13 @@ h3 {
 .p-badge {
   background: theme('colors.gray.300');
 }
+
+.p-buttonset .p-button:first-of-type:not(:only-of-type) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.p-buttonset .p-button:last-of-type:not(:only-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index 52fa17d..d14bb8e 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -5,20 +5,20 @@
   import WorkflowsTable from "@/components/workflows/WorkflowsTable.vue"
   import { useI18n } from "vue-i18n"
   import { mapGtId, setEvalColors } from "@/helpers/utils"
-  import { store } from "@/helpers/store"
   import Filters from "@/components/workflows/filters/Filters.vue"
   import SelectButton from "primevue/selectbutton"
   import WorkflowsTimeline from "@/components/workflows/WorkflowsTimeline.vue"
   import filtersStore from "@/store/filters-store"
+  import workflowsStore from "@/store/workflows-store"
 
   const { t } = useI18n()
 
   const data = ref([])
 
   const filteredData = ref([])
-  const defs = ref({})
   const router = useRouter()
   const route = useRoute()
+  const loading = ref(false)
 
   const options = ref([
     { name: t('timeline'), value: 'timeline' },
@@ -37,54 +37,39 @@
   onMounted(async () => {
     await router.isReady()
 
-    const filtered = options.value.filter((option) => {
+    loading.value = true
+
+    const option = options.value.find((option) => {
       return route.query.view && route.query.view === option.value
     })
-    selectedOption.value = filtered.length > 0 ? filtered[0] : options.value[0]
-
-    let gtList = store.gtList
-
-    if (!gtList.length) {
-      gtList = await api.getGroundTruth()
-      store.setGTList(gtList)
-    }
-
-    let workflows = store.workflows
-
-    if (!workflows.length) {
-      workflows = await api.getWorkflows()
-      store.setWorkflows(workflows)
-    }
-
-    const runs = []
 
-    for await (let gt of gtList) {
-      try {
-        const latestRuns = await api.getLatestRuns(gt.id,)
-        if (latestRuns.length > 0) {
-          runs.push(...latestRuns)
-        }
-      } catch (e) {
-      }
+    if (option) {
+      selectedOption.value = option
     }
-    data.value = runs
 
-    defs.value = await api.getEvalDefinitions()
+    workflowsStore.runs = await api.getRuns()
+    workflowsStore.gt = await api.getGroundTruth()
+    workflowsStore.workflows = await api.getWorkflows()
 
-    filteredData.value = data.value
+    loading.value = false
 
-    setEvalColors(data.value)
+    setEvalColors(workflowsStore.runs)
   })
 </script>
 <template>
-  <div class="flex mb-3">
-    <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
-  </div>
-  <div><Filters /></div>
-  <div v-if="selectedOption">
-    <WorkflowsTimeline v-if="selectedOption.value === 'timeline'" />
-    <WorkflowsTable v-else :data="filteredData" :defs="defs" />
-  </div>
+  <template v-if="loading">
+    Loading...
+  </template>
+  <template v-else>
+    <div class="flex mb-3">
+      <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
+      <Filters class="ml-auto w-1/3"/>
+    </div>
+    <div v-if="selectedOption">
+      <WorkflowsTimeline v-if="selectedOption.value === 'timeline'" />
+      <WorkflowsTable v-else />
+    </div>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index ee780de..09f9f04 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { watch, ref } from "vue"
+import { watch, ref, onMounted, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { createReadableMetricValue, getEvalColor, mapGtId } from "@/helpers/utils"
 import type { EvaluationRun } from "@/types"
 import Dropdown from 'primevue/dropdown'
+import workflowsStore from "@/store/workflows-store"
+import api from "@/helpers/api"
+import filtersStore from "@/store/filters-store"
 
 const { t } = useI18n()
-const props = defineProps<{
-  data: EvaluationRun[]
-  defs: any,
-}>()
+
 const groupedData = ref({})
 const evals = ref([])
 
@@ -22,21 +22,47 @@ const sortOptions = ref([{
 }])
 
 const sortBy = ref(sortOptions.value[0])
+const latestRuns = ref<EvaluationRun[]>([])
+const filteredRuns = ref<EvaluationRun[]>([])
+const evalDefinitions = ref([])
+const loading = ref(false)
+
+onMounted(async () => {
+  loading.value = true
+  latestRuns.value = workflowsStore.getLatestRuns()
+  evalDefinitions.value = await api.getEvalDefinitions()
+  setFilteredRuns()
+  groupRuns(sortBy.value.value)
+  loading.value = false
+})
 
-watch(sortBy, ({ value }) => {
-  if (value === 'workflows') groupByWorkflows()
-  else if (value === 'documents') groupByDocuments()
+watch(() => filtersStore.gt, () => {
+  setFilteredRuns()
+  groupRuns(sortBy.value.value)
 })
 
+watch(sortBy, () => {
+  groupRuns(sortBy.value.value)
+})
+
+function setFilteredRuns() {
+  filteredRuns.value = latestRuns.value.filter(({ metadata }) => filtersStore.gt.findIndex(({ value }) => value === mapGtId(metadata.gt_workspace.id)) > -1)
+}
+
+function groupRuns(groupBy: string) {
+  if (groupBy === 'workflows') groupByWorkflows()
+  else if (groupBy === 'documents') groupByDocuments()
+}
+
 const groupByWorkflows = () => {
-  groupedData.value = props.data.filter(item => !!(item.metadata.ocr_workflow)).reduce((acc, cur) => {
+  groupedData.value = filteredRuns.value.filter(item => !!(item.metadata.ocr_workflow)).reduce((acc, cur) => {
     const ocrWorkflowId = mapGtId(cur.metadata.ocr_workflow['id'])
-    const label = cur.metadata.ocr_workflow.label
+    const label = workflowsStore.getWorkflowById(ocrWorkflowId)?.label
 
     evals.value = Object.keys(cur.evaluation_results.document_wide)
 
     const subject = {
-      label: cur.metadata.gt_workspace.label,
+      label: workflowsStore.getGtById(mapGtId(cur.metadata.gt_workspace.id))?.label,
       evaluations: Object.keys(cur.evaluation_results.document_wide).map(key => ({
         name: key,
         value: cur.evaluation_results.document_wide[key]
@@ -59,12 +85,12 @@ const groupByWorkflows = () => {
 }
 
 const groupByDocuments = () => {
-  groupedData.value = props.data.filter(item => !!(item.metadata.gt_workspace)).reduce((acc, cur) => {
+  groupedData.value = filteredRuns.value.filter(item => !!(item.metadata.gt_workspace)).reduce((acc, cur) => {
     const gtWorkspaceId = mapGtId(cur.metadata.gt_workspace['id'])
-    const label = cur.metadata.gt_workspace.label
+    const label = workflowsStore.getGtById(gtWorkspaceId)?.label
     evals.value = Object.keys(cur.evaluation_results.document_wide)
     const subject = {
-      label: cur.metadata.ocr_workflow.label,
+      label: workflowsStore.getWorkflowById(mapGtId(cur.metadata.ocr_workflow['id']))?.label,
       evaluations: Object.keys(cur.evaluation_results.document_wide).map(key => ({
         name: key,
         value: cur.evaluation_results.document_wide[key]
@@ -85,31 +111,32 @@ const groupByDocuments = () => {
     return acc
   }, {})
 }
-
-watch(() => props.data, groupByDocuments, { immediate: true })
 </script>
 
 <template>
-  <div>
+  <template v-if="loading">
+    Loading...
+  </template>
+  <template v-else>
     <div class="flex mb-4" v-if="evals.length > 0">
       <div class="flex items-center ml-auto">
         <p class="mr-2">{{ $t('group_by') }}:</p>
         <Dropdown v-model="sortBy" :options="sortOptions" optionLabel="label" placeholder="Choose something.." class="" />
       </div>
     </div>
-    <table v-if="evals.length > 0" class="w-full border border-collapse text-sm">
+    <table v-if="evals.length > 0" class="w-full border border-collapse rounded text-sm">
       <thead>
       <tr>
         <th class="p-2 border">{{ sortBy.value === 'documents' ? $t('documents') : $t('workflows') }}</th>
         <th class="p-2 border">{{ sortBy.value === 'documents' ? $t('workflows') : $t('documents') }}</th>
         <th v-for="(evalKey, i) in evals" :key="i" class="p-2 border">
           <span class="def-label flex items-center justify-center cursor-pointer">
-            {{ defs[evalKey] ? defs[evalKey].label : evalKey }}
+            {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].label : evalKey }}
             <i-icon name="ink-info"/>
             <div class="def-tooltip">
               <div class="flex p-2 bg-white border rounded">
-                {{ defs[evalKey] ? defs[evalKey].short_descr : $t('no_description') }}.
-                <a v-if="defs[evalKey]" :href="defs[evalKey].url">{{ $t('details') }}</a>
+                {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].short_descr : $t('no_description') }}.
+                <a v-if="evalDefinitions[evalKey]" :href="evalDefinitions[evalKey].url">{{ $t('details') }}</a>
               </div>
             </div>
           </span>
@@ -119,7 +146,7 @@ watch(() => props.data, groupByDocuments, { immediate: true })
       <tbody>
       <template v-for="(key, i) in Object.keys(groupedData)" :key="i">
         <tr v-for="(subject, j) in groupedData[key].subjects" :key="j">
-          <td v-if="j === 0" :rowspan="groupedData[key].subjects.length" class="align-top pl-2 border">
+          <td v-if="j === 0" :rowspan="groupedData[key].subjects.length" class="align-top pl-2 border w-1/3">
             <span class="font-bold">{{ groupedData[key].label }}</span>
           </td>
           <td class="align-top pl-2 border">{{ subject.label }}</td>
@@ -140,7 +167,7 @@ watch(() => props.data, groupByDocuments, { immediate: true })
       </tbody>
     </table>
     <div v-else>{{ $t('no_table_data') }}</div>
-  </div>
+  </template>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index e365ed4..8a033b4 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import api from '@/helpers/api'
 import TimelineItem from "@/components/workflows/timeline/TimelineItem.vue"
 import Dropdown from 'primevue/dropdown'
-import { computed, onMounted, ref } from "vue"
-import { EvaluationMetrics } from '@/helpers/metrics'
+import {computed, onMounted, ref, watch} from "vue"
+import {EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type {DropdownOption, EvaluationResultsDocumentWide, Workflow} from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
+import timelineStore from "@/store/timeline-store"
 
 const { t } = useI18n()
 const gtList = computed(() => workflowsStore.gt.filter(({ id }) => filtersStore.gt.findIndex(({ value }) => value === id) > -1))
@@ -19,19 +19,16 @@ const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() =>
 
 onMounted(async () => {
   selectedMetric.value = metrics.value[0]
-
-  if (!gtList.value.length) {
-    workflowsStore.gt = await api.getGroundTruth()
-    filtersStore.gt = workflowsStore.gt.map(({ id, label }) => ({ value: id, label }))
-  }
-
   workflows.value = workflowsStore.workflows
-
-  if (!workflows.value.length) {
-    workflows.value = await api.getWorkflows()
-    workflowsStore.workflows = workflows.value
-  }
 })
+
+watch(selectedMetric,
+  () => timelineStore.setMaxValue(
+    selectedMetricValue.value,
+    getMaxValueByMetric(selectedMetricValue.value, workflowsStore.runs)
+  ),
+    { immediate: true }
+)
 </script>
 
 <template>
@@ -49,7 +46,7 @@ onMounted(async () => {
     </div>
     <div class="flex flex-col space-y-4">
       <template v-if="gtList.length > 0">
-        <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :workflows="workflows" :metric="selectedMetricValue" />
+        <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
       </template>
       <template v-else>
         <div class="my-6">An error has occurred. Please try again later!</div>
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index dfa981e..6e7cf5a 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -18,8 +18,9 @@ onMounted(() => {
     :options="gtOptions"
     optionLabel="label"
     placeholder="Select Ground Truth"
-    panel-class="max-w-[400px]"
-    max-selected-labels="3"
+    panel-class="max-w-[500px]"
+    max-selected-labels="1"
+    filter
     class="relative"
   >
     <template #option="{ option }: { option: FilterOption }">
diff --git a/src/components/workflows/timeline/MetricAverageChart.vue b/src/components/workflows/timeline/MetricAverageChart.vue
index f47c228..4cf333b 100644
--- a/src/components/workflows/timeline/MetricAverageChart.vue
+++ b/src/components/workflows/timeline/MetricAverageChart.vue
@@ -12,7 +12,7 @@ import timelineStore from "@/store/timeline-store";
 const { t } = useI18n()
 
 const props = defineProps<{
-  gtId: string,
+  runs: EvaluationRun[],
   metric: keyof EvaluationResultsDocumentWide,
   startDate: Date,
   endDate: Date
@@ -24,16 +24,14 @@ const runs = ref<EvaluationRun[]>([])
 const op = ref<OverlayPanel | null>(null)
 
 onMounted(async () => {
-  const { gtId } = props
-  runs.value = await api.getRuns(gtId)
   init()
 })
 
 watch(() => props.metric, init)
 
 function init() {
-  if (!runs.value) return
-  data.value = getTimelineData(runs.value, props.metric)
+  if (!props.runs) return
+  data.value = getTimelineData(props.runs, props.metric)
 }
 
 function getTimelineData(runs: EvaluationRun[], metric: string): TimelineChartDataPoint[] {
diff --git a/src/components/workflows/timeline/MetricChart.vue b/src/components/workflows/timeline/MetricChart.vue
index 45a87b8..46f71a2 100644
--- a/src/components/workflows/timeline/MetricChart.vue
+++ b/src/components/workflows/timeline/MetricChart.vue
@@ -1,36 +1,32 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue"
-import api from "@/helpers/api"
 import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
-import { extendMaxValue, getMaxValueByMetric } from '@/helpers/metrics'
 import type { EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint } from "@/types"
 import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
 import OverlayPanel from 'primevue/overlaypanel'
 import BaseTimelineDetailedChart from "@/components/workflows/timeline/BaseTimelineDetailedChart.vue"
 import timelineStore from "@/store/timeline-store"
 
-const props = defineProps(['gtId', 'workflowId', 'metric', 'startDate', 'endDate'])
-const runs = ref<EvaluationRun[]>([])
+const props = defineProps<{
+  runs: EvaluationRun[],
+  metric: keyof EvaluationResultsDocumentWide,
+  startDate: Date,
+  endDate: Date
+}>()
+
 const data = ref([])
 const maxY = computed(() => timelineStore.maxValues[props.metric] ?? 0 )
 const op = ref<OverlayPanel | null>(null)
 
 onMounted(async () => {
-  const { gtId, workflowId } = props
-  runs.value = await api.getRuns(gtId, workflowId)
   init()
 })
 
 watch(() => props.metric, init)
 
 function init() {
-  if (!runs.value) return
-  data.value = getTimelineData(runs.value, props.metric)
-
-  const maxValueByMetric = getMaxValueByMetric(props.metric, runs.value)
-  if (maxValueByMetric > maxY.value) {
-    timelineStore.setMaxValue(props.metric, extendMaxValue(maxValueByMetric))
-  }
+  if (!props.runs) return
+  data.value = getTimelineData(props.runs, props.metric)
 }
 
 function getTimelineData(runs: EvaluationRun[], metric: keyof EvaluationResultsDocumentWide) {
@@ -47,8 +43,6 @@ function tooltipContent(d: TimelineChartDataPoint) {
   return metricChartTooltipContent(d, props.metric)
 }
 
-
-
 </script>
 
 <template>
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 819ddee..5e17874 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -3,15 +3,15 @@ import Panel from "primevue/panel"
 import OverlayPanel from 'primevue/overlaypanel'
 import StepsAcronyms from '@/helpers/workflow-steps-acronyms'
 import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
-import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
+import type { EvaluationResultsDocumentWide, EvaluationRun, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { ref } from "vue"
+import { onMounted, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
+import workflowsStore from "@/store/workflows-store"
 
 const props = defineProps<{
   gt: GroundTruth,
-  workflows: Workflow[],
   metric: keyof EvaluationResultsDocumentWide
 }>()
 
@@ -19,6 +19,11 @@ const op = ref<OverlayPanel>()
 const selectedStep = ref<WorkflowStep | null>(null)
 const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
+const workflows = ref<Workflow[]>([])
+
+onMounted(() => {
+  workflows.value = workflowsStore.workflows
+})
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
@@ -55,7 +60,7 @@ function hideParametersOverlay() {
         <div class="w-1/2 flex justify-end">
           <div class="flex overflow-x-auto">
             <MetricAverageChart
-              :gt-id="gt.id"
+              :runs="workflowsStore.getRuns(gt.id)"
               :metric="metric"
               class=""
               :width="400"
@@ -84,8 +89,7 @@ function hideParametersOverlay() {
             </td>
             <td class="overflow-x-auto">
               <MetricChart
-                :gt-id="gt.id"
-                :workflow-id="workflow.id"
+                :runs="workflowsStore.getRuns(gt.id, workflow.id)"
                 :metric="metric"
                 :width="400"
                 :start-date="startDate"
diff --git a/src/store/workflows-store.ts b/src/store/workflows-store.ts
index 0d80999..ccd9059 100644
--- a/src/store/workflows-store.ts
+++ b/src/store/workflows-store.ts
@@ -1,10 +1,46 @@
 import { reactive } from "vue"
-import type { GroundTruth, Workflow } from "@/types"
+import type { EvaluationRun, GroundTruth, Workflow } from "@/types"
+import { mapGtId } from "@/helpers/utils"
+
+function normalizeDate(dateString: string): string {
+  return new Date(new Date(dateString).setHours(0, 0, 0, 0)).toDateString()
+}
 
 export default reactive<{
   gt: GroundTruth[],
-  workflows: Workflow[]
+  workflows: Workflow[],
+  runs: EvaluationRun[],
+  getRuns: (gtId: string, workflowId?: string) => EvaluationRun[]
+  getLatestRuns: () => EvaluationRun[],
+  getGtById: (id: string) => GroundTruth | null
+  getWorkflowById: (id: string) => Workflow | null
 }>({
   gt: [],
-  workflows: []
+  workflows: [],
+  runs: [],
+  getRuns(gtId: string, workflowId?: string) {
+    return this.runs
+      .filter(
+        ({ metadata }) => {
+          const matchGt = mapGtId(metadata.gt_workspace.id) === gtId
+          const matchWorkflow =  mapGtId(metadata.ocr_workflow.id) === workflowId
+
+          return matchGt && (workflowId ? matchWorkflow : true)
+        }
+      )
+  },
+  getLatestRuns() {
+    const dates = Object.keys(this.runs.reduce((acc, cur) => {
+      acc[normalizeDate(cur.metadata.timestamp)] = null
+      return acc
+    }, <{ [key: string]: null}>{}))
+
+    return this.runs.filter(({ metadata }) => normalizeDate(metadata.timestamp) === dates[dates.length - 1])
+  },
+  getGtById(id: string): GroundTruth | null {
+    return this.gt.find((item) => item.id === id) ?? null
+  },
+  getWorkflowById(id: string): Workflow | null {
+    return this.workflows.find((item) => item.id === id) ?? null
+  }
 })