diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index b362a0cf7..44b64f29e 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/types';
-
 const config: StorybookConfig = {
   stories: [
     '../src/components/**/*.mdx',
@@ -13,6 +12,8 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/vue3-vite',
   },
+  docs: {
+    autodocs: false,
+  },
 };
-
 module.exports = config;
diff --git a/frontend/src/components/QuestionCandidateFilter.vue b/frontend/src/components/QuestionCandidateFilter.vue
new file mode 100644
index 000000000..ae77a5473
--- /dev/null
+++ b/frontend/src/components/QuestionCandidateFilter.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useElectionStore } from '@/stores/electionStore';
+import { ref, watch } from 'vue';
+
+import PillGroupComponent from '@/components/design-system/input/PillGroupComponent.vue';
+import PillGroupItemComponent from '@/components/design-system/input/PillGroupItemComponent.vue';
+import TitleText from './design-system/typography/TitleText.vue';
+
+export interface Props {
+  modelValue?: Set<string>;
+}
+
+defineProps<Props>();
+const emit = defineEmits(['update:modelValue']);
+
+const electionStore = useElectionStore();
+
+const uniqueCandidateIds = new Set<string>(
+  electionStore.calculator?.candidates.map((x) => x.id)
+);
+const selectedCandidateIds = ref(new Set<string>(uniqueCandidateIds));
+const onSelectAllClicked = (event: MouseEvent) => {
+  if ((event.target as HTMLInputElement).checked) {
+    uniqueCandidateIds.forEach((x) => {
+      selectedCandidateIds.value.add(x);
+    });
+  } else {
+    selectedCandidateIds.value.clear();
+  }
+};
+
+watch(
+  selectedCandidateIds,
+  (newValue, oldValue) => {
+    emit('update:modelValue', newValue);
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<template>
+  <form>
+    <TitleText class="tag-filter-title" tag="h3" size="small">
+      Filtrovat podle kandidujících
+    </TitleText>
+    <pill-group-component>
+      <pill-group-item-component
+        key="select-all"
+        type="checkbox"
+        group-name="select-all"
+        :checked="true"
+        @click="onSelectAllClicked"
+      >
+        Vybrat vše
+      </pill-group-item-component>
+      <pill-group-item-component
+        v-for="(candidateId, idx) in uniqueCandidateIds"
+        :key="idx"
+        v-model="selectedCandidateIds"
+        type="checkbox"
+        :group-name="candidateId"
+        :value="candidateId"
+        :checked="selectedCandidateIds.has(candidateId)"
+      >
+        {{
+          electionStore.calculator?.candidates.find((x) => x.id === candidateId)
+            ?.name
+        }}
+      </pill-group-item-component>
+    </pill-group-component>
+  </form>
+</template>
+<style lang="scss" scoped>
+.tag-filter-title {
+  padding-bottom: var(--spacing-small);
+}
+</style>
diff --git a/frontend/src/components/QuestionCard.vue b/frontend/src/components/QuestionCard.vue
index c374f661e..96169ec14 100644
--- a/frontend/src/components/QuestionCard.vue
+++ b/frontend/src/components/QuestionCard.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Question } from '@/types/question';
 
-import AccordionComponent from '@/components/design-system/containers/AccordionComponent.vue';
 import BodyText from '@/components/design-system/typography/BodyText.vue';
 import CardComponent from '@/components/design-system/containers/CardComponent.vue';
 import HeadingComponent from '@/components/design-system/typography/HeadingComponent.vue';
@@ -23,7 +22,7 @@ defineProps<Props>();
     corner="top-left"
     border
     shadow
-    padding="medium"
+    :padding="Object('medium')"
     padding-responsive
     padding-asymmetric
   >
diff --git a/frontend/src/components/QuestionTagFilter.vue b/frontend/src/components/QuestionTagFilter.vue
new file mode 100644
index 000000000..dabacb0ff
--- /dev/null
+++ b/frontend/src/components/QuestionTagFilter.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useElectionStore } from '@/stores/electionStore';
+import { ref, watch } from 'vue';
+
+import PillGroupComponent from '@/components/design-system/input/PillGroupComponent.vue';
+import PillGroupItemComponent from '@/components/design-system/input/PillGroupItemComponent.vue';
+import TitleText from './design-system/typography/TitleText.vue';
+
+export interface Props {
+  modelValue?: Set<string>;
+}
+
+defineProps<Props>();
+const emit = defineEmits(['update:modelValue']);
+
+const electionStore = useElectionStore();
+
+const uniqueTags = electionStore.uniqueQuestionTags;
+const selectedTags = ref(new Set<string>(electionStore.uniqueQuestionTags));
+const onSelectAllClicked = (event: MouseEvent) => {
+  if ((event.target as HTMLInputElement).checked) {
+    electionStore.uniqueQuestionTags.forEach((x) => {
+      selectedTags.value.add(x);
+    });
+  } else {
+    selectedTags.value.clear();
+  }
+};
+
+watch(
+  selectedTags,
+  (newValue, oldValue) => {
+    emit('update:modelValue', newValue);
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<template>
+  <form>
+    <TitleText class="tag-filter-title" tag="h3" size="small">
+      Filtrovat podle témat
+    </TitleText>
+    <pill-group-component>
+      <pill-group-item-component
+        key="select-all"
+        type="checkbox"
+        group-name="select-all"
+        :checked="true"
+        @click="onSelectAllClicked"
+      >
+        Vybrat vše
+      </pill-group-item-component>
+      <pill-group-item-component
+        v-for="(tag, idx) in uniqueTags"
+        :key="idx"
+        v-model="selectedTags"
+        type="checkbox"
+        :group-name="tag"
+        :value="tag"
+        :checked="selectedTags.has(tag)"
+      >
+        {{ tag }}
+      </pill-group-item-component>
+    </pill-group-component>
+  </form>
+</template>
+<style lang="scss" scoped>
+.tag-filter-title {
+  padding-bottom: var(--spacing-small);
+}
+</style>
diff --git a/frontend/src/components/design-system/containers/CardComponent.vue b/frontend/src/components/design-system/containers/CardComponent.vue
index 3d542077c..d067f9cea 100644
--- a/frontend/src/components/design-system/containers/CardComponent.vue
+++ b/frontend/src/components/design-system/containers/CardComponent.vue
@@ -22,10 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'rgb(var(--color-neutral-bg-container))',
   border: false,
   borderKind: 'normal',
-  // eslint-disable-next-line vue/require-valid-default-prop
   borderRadius: 'small',
-  // eslint-disable-next-line vue/require-valid-default-prop
-  padding: 'medium',
+  padding: Object('medium') as Props['padding'],
   responsive: true,
   shadow: false,
 });
diff --git a/frontend/src/components/design-system/input/PillGroupComponent.stories.ts b/frontend/src/components/design-system/input/PillGroupComponent.stories.ts
index 1ad1be630..c70f6b98c 100644
--- a/frontend/src/components/design-system/input/PillGroupComponent.stories.ts
+++ b/frontend/src/components/design-system/input/PillGroupComponent.stories.ts
@@ -29,6 +29,7 @@ export const PillGroup: StoryFn<typeof PillGroupComponent> = (args) => ({
      <pill-group-item-component
       v-for="(item, idx) in args.items"
       :value="item.value"
+      type="checkbox"
       :groupName="args.groupName"
       :checked="idx === 0"
       :key="idx"
diff --git a/frontend/src/components/design-system/input/PillGroupComponent.vue b/frontend/src/components/design-system/input/PillGroupComponent.vue
index 56a13780a..ede4d1a4c 100644
--- a/frontend/src/components/design-system/input/PillGroupComponent.vue
+++ b/frontend/src/components/design-system/input/PillGroupComponent.vue
@@ -13,5 +13,6 @@
   padding: 0;
   margin: 0;
   list-style-type: none;
+  flex-wrap: wrap;
 }
 </style>
diff --git a/frontend/src/components/design-system/input/PillGroupItemComponent.vue b/frontend/src/components/design-system/input/PillGroupItemComponent.vue
index 510163295..a7a58a78a 100644
--- a/frontend/src/components/design-system/input/PillGroupItemComponent.vue
+++ b/frontend/src/components/design-system/input/PillGroupItemComponent.vue
@@ -1,19 +1,32 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed } from 'vue';
 import LabelText from '@/components/design-system/typography/LabelText.vue';
 
 export interface Props {
   groupName: string;
+  type: 'radio' | 'checkbox';
   value?: string;
   checked?: boolean;
+  modelValue?: Set<string>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   value: 'on',
   checked: false,
+  modelValue: undefined,
 });
 
-const isChecked = ref(props.checked);
+const isChecked = computed(() => props.checked);
+
+const emit = defineEmits(['update:modelValue']);
+const onInput = (payload: Event) => {
+  if (props.modelValue?.has((payload.target as HTMLInputElement).value)) {
+    props.modelValue.delete((payload.target as HTMLInputElement).value);
+  } else {
+    props.modelValue?.add((payload.target as HTMLInputElement).value);
+  }
+  emit('update:modelValue', props.modelValue);
+};
 </script>
 
 <template>
@@ -22,10 +35,11 @@ const isChecked = ref(props.checked);
       <input
         ref="input"
         class="pill-input"
-        type="radio"
+        :type="props.type"
         :value="value || 'on'"
         :name="props.groupName"
         :checked="isChecked"
+        @input="onInput"
       />
       <LabelText class="pill-label">
         <slot />
diff --git a/frontend/src/routes/comparison/ComparisonGrid.vue b/frontend/src/routes/comparison/ComparisonGrid.vue
index 2caa701bb..c40c73488 100644
--- a/frontend/src/routes/comparison/ComparisonGrid.vue
+++ b/frontend/src/routes/comparison/ComparisonGrid.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import type { Question } from '@/types/question';
 import type { Candidate } from '@/types/candidate';
@@ -27,17 +27,48 @@ export interface Props {
   answers: UserAnswer[];
   candidates: Candidate[];
   candidateAnswers: CandidateAnswer[];
+  selectedTags?: Set<string>;
+  selectedCandidateIds?: Set<string>;
 }
 
 const props = defineProps<Props>();
+const isQuestionInTagSet = (question: Question) => {
+  if (!props.selectedTags) {
+    return true;
+  }
+  return (
+    question.tags?.find((tag) => {
+      return props.selectedTags?.has(tag);
+    }) !== undefined
+  );
+};
+
+const isCandidateInCandidateSet = (candidate: Candidate) => {
+  if (!props.selectedCandidateIds) {
+    return true;
+  } else {
+    return props.selectedCandidateIds?.has(candidate.id);
+  }
+};
 
-const questionCount = computed(() => props.questions.length);
+const questionsToShow = computed(() =>
+  props.questions.filter((x) => isQuestionInTagSet(x))
+);
+const candidatesToShow = computed(() =>
+  props.candidates.filter((x) => isCandidateInCandidateSet(x))
+);
+console.debug(candidatesToShow);
 const results = calculateRelativeAgreement(
   props.candidateAnswers,
   props.answers
 );
-const candidateOrder = results.map((response) => response.cId);
-const candidateCount = computed(() => candidateOrder.length);
+const candidateOrder = computed(() =>
+  results
+    .filter((x) =>
+      props.selectedCandidateIds ? props.selectedCandidateIds.has(x.cId) : true
+    )
+    .map((response) => response.cId)
+);
 
 const mapAnswerToIcon = (answer: string | UserAnswerEnum) => {
   switch (answer) {
@@ -82,11 +113,26 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
       return 'neutral';
   }
 };
+
+//this ensures stickiness of the header
+const calculateStickeHeaderPos = () => {
+  const bot = document
+    .getElementsByClassName('sticky-header')[0]
+    ?.getBoundingClientRect().bottom;
+  const headers = document.querySelectorAll('#comparison-grid > .header');
+  for (let index = 0; index < headers.length; index++) {
+    const element = headers[index] as HTMLElement;
+    element.style.top = `${bot}px`;
+  }
+};
+window.onload = calculateStickeHeaderPos;
+window.onresize = calculateStickeHeaderPos;
+window.onscroll = calculateStickeHeaderPos;
 </script>
 
 <template>
-  <div class="grid">
-    <template v-for="i in candidateCount + 1" :key="i">
+  <div id="comparison-grid" class="grid">
+    <template v-for="i in candidateOrder.length + 1" :key="i">
       <DividerComponent
         :class="['line', i === 1 ? 'user-line' : '']"
         vertical
@@ -94,7 +140,7 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
         :color="i === 1 ? 'rgb(var(--color-neutral-border-strong))' : undefined"
         :style="{
           'grid-column': i === 1 ? 1 : 2 * (i - 1),
-          'grid-row': `1 / span ${2 * questionCount + 1}`,
+          'grid-row': `1 / span ${2 * questionsToShow.length + 1}`,
         }"
       />
     </template>
@@ -130,7 +176,7 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
           >
             <strong>
               {{
-                candidates.filter(
+                candidatesToShow.filter(
                   (candidate) => candidate.id === candidateId
                 )[0].short_name
               }}</strong
@@ -139,16 +185,19 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
         </FilledCircle>
       </div>
     </template>
-    <template v-for="(question, questionIndex) in questions" :key="question.id">
+    <template
+      v-for="(question, questionIndex) in questionsToShow"
+      :key="question.id"
+    >
       <QuestionCard
         class="question-card"
         :style="{
-          'grid-column': `1 / span ${2 * candidateCount + 1}`,
+          'grid-column': `1 / span ${2 * candidateOrder.length + 1}`,
           'grid-row': 2 * questionIndex + 2,
         }"
         :question="question"
-        :current-question="questionIndex + 1"
-        :question-count="questionCount"
+        :current-question="questions.findIndex((x) => x.id === question.id) + 1"
+        :question-count="$props.questions.length"
       />
       <div
         class="user-answers"
@@ -183,18 +232,16 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
           }"
         >
           <FilledCircle
-            :background-color="`rgb(var(--color-${mapAnswerToColor(candidateAnswers.filter(
-  (answer) =>
-    answer.candidate_id === candidateId &&
-    answer.question_id === question.id
-)[0].answer as string)}-bg-strong))`"
+            :background-color="`rgb(var(--color-${mapAnswerToColor(candidateAnswers.filter((answer) =>
+                answer.candidate_id === candidateId &&
+                answer.question_id === question.id
+            )[0].answer as string)}-bg-strong))`"
           >
             <IconComponent
-              :icon="mapAnswerToIcon(candidateAnswers.filter(
-  (answer) =>
-    answer.candidate_id === candidateId &&
-    answer.question_id === question.id
-)[0].answer as string)"
+              :icon="mapAnswerToIcon(candidateAnswers.filter((answer) =>
+                  answer.candidate_id === candidateId &&
+                  answer.question_id === question.id
+              )[0].answer as string)"
               color="rgb(var(--color-neutral-fg-inverse))"
             />
           </FilledCircle>
@@ -214,7 +261,7 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
             'grid-row': 2 * questionIndex + 3,
           }"
         >
-          <CardComponent corner="top-left" padding="medium">
+          <CardComponent corner="top-left" :padding="Object('medium')">
             <BodyText size="small">
               {{
                 candidateAnswers.filter(
@@ -233,11 +280,12 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
 
 <style lang="scss" scoped>
 .header {
+  padding-top: var(--spacing-extra-small);
   position: sticky;
-  top: calc(
-    2 * var(--responsive-spacing-large) + var(--spacing-medium) + 2 *
-      var(--spacing-extra-small) + var(--responsive-spacing-large)
-  );
+  // top: calc(
+  //   2 * var(--responsive-spacing-large) + var(--spacing-medium) + 2 *
+  //     var(--spacing-extra-small) + var(--responsive-spacing-large)
+  // );
   z-index: 100;
 }
 
@@ -256,6 +304,7 @@ const mapAnswerToColor = (answer: string | UserAnswerEnum) => {
 }
 
 .line {
+  margin-top: var(--spacing-extra-small);
   grid-row: 1 / span 2;
   justify-self: center;
 }
diff --git a/frontend/src/routes/comparison/ComparisonPage.vue b/frontend/src/routes/comparison/ComparisonPage.vue
index 43ff5c123..0408ef8ef 100644
--- a/frontend/src/routes/comparison/ComparisonPage.vue
+++ b/frontend/src/routes/comparison/ComparisonPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router';
-import { mdiCloseCircleOutline, mdiArrowLeft } from '@mdi/js';
+import { mdiCloseCircleOutline, mdiArrowLeft, mdiTune } from '@mdi/js';
 
 import { appRoutes } from '@/main';
 import { useElectionStore } from '@/stores/electionStore';
@@ -27,6 +27,10 @@ import StickyHeaderLayout from '@/components/layouts/StickyHeaderLayout.vue';
 import ComparisonGrid from './ComparisonGrid.vue';
 import ContainerComponent from '../../components/design-system/containers/ContainerComponent.vue';
 
+import { ref } from 'vue';
+import QuestionCandidateFilter from '@/components/QuestionCandidateFilter.vue';
+import QuestionTagFilter from '@/components/QuestionTagFilter.vue';
+
 const router = useRouter();
 const route = useRoute();
 const electionStore = useElectionStore();
@@ -45,6 +49,8 @@ const districtNameWithCode = showDistrictCode
   : districtName;
 
 const breadcrumbs = `${electionName} — ${districtNameWithCode}`;
+const selectedTags = ref(new Set<string>(electionStore.uniqueQuestionTags));
+const selectedCandidateIds = ref(new Set<string>());
 
 const handlePreviousClick = () => {
   router.push({
@@ -54,6 +60,8 @@ const handlePreviousClick = () => {
   });
 };
 
+const filterMenuIsVisible = ref(false);
+
 const questions = electionStore.calculator?.questions as Question[];
 const answers = electionStore.answers;
 const candidates = electionStore?.calculator?.candidates as Candidate[];
@@ -115,7 +123,27 @@ const candidateAnswers = electionStore.calculator?.answers as CandidateAnswer[];
               </IconButton>
             </template>
             <TitleText tag="h2" size="medium">Porovnání</TitleText>
+            <template #after>
+              <ButtonComponent
+                kind="link"
+                @click="filterMenuIsVisible = !filterMenuIsVisible"
+              >
+                <template #icon>
+                  <IconComponent :icon="mdiTune" title="Nastavit porovnání" />
+                </template>
+              </ButtonComponent>
+            </template>
           </SecondaryNavigationBar>
+          <QuestionTagFilter
+            v-show="filterMenuIsVisible"
+            v-model="selectedTags"
+            class="filter-menu"
+          />
+          <QuestionCandidateFilter
+            v-show="filterMenuIsVisible"
+            v-model="selectedCandidateIds"
+            class="filter-menu"
+          />
         </ResponsiveWrapper>
         <ResponsiveWrapper medium large extra-large huge>
           <SecondaryNavigationBar>
@@ -125,7 +153,28 @@ const candidateAnswers = electionStore.calculator?.answers as CandidateAnswer[];
               </IconButton>
             </template>
             <TitleText tag="h2" size="large">Porovnání</TitleText>
+            <template #after>
+              <ButtonComponent
+                kind="link"
+                @click="filterMenuIsVisible = !filterMenuIsVisible"
+              >
+                Nastavit porovnání
+                <template #iconAfter>
+                  <IconComponent :icon="mdiTune" />
+                </template>
+              </ButtonComponent>
+            </template>
           </SecondaryNavigationBar>
+          <QuestionTagFilter
+            v-show="filterMenuIsVisible"
+            v-model="selectedTags"
+            class="filter-menu"
+          />
+          <QuestionCandidateFilter
+            v-show="filterMenuIsVisible"
+            v-model="selectedCandidateIds"
+            class="filter-menu"
+          />
         </ResponsiveWrapper>
       </template>
       <BottomBarWrapper>
@@ -140,6 +189,8 @@ const candidateAnswers = electionStore.calculator?.answers as CandidateAnswer[];
               :answers="answers"
               :candidates="candidates"
               :candidate-answers="candidateAnswers"
+              :selected-tags="selectedTags"
+              :selected-candidate-ids="selectedCandidateIds"
             />
           </ContainerComponent>
         </div>
@@ -153,4 +204,9 @@ const candidateAnswers = electionStore.calculator?.answers as CandidateAnswer[];
   max-width: 100vw;
   overflow-x: scroll;
 }*/
+.filter-menu {
+  padding: var(--spacing-large);
+  padding-top: 0;
+  background: rgb(var(--color-neutral-bg-container));
+}
 </style>
diff --git a/frontend/src/stores/electionStore.ts b/frontend/src/stores/electionStore.ts
index a7d680fda..375b2bf37 100644
--- a/frontend/src/stores/electionStore.ts
+++ b/frontend/src/stores/electionStore.ts
@@ -58,6 +58,7 @@ export const useElectionStore = defineStore('election', {
       resultsId: null as null | string,
       resultsUpdateToken: null as null | string,
       encodedResults: null as null | string,
+      uniqueQuestionTags: new Set<string>(),
     };
   },
   getters: {
@@ -111,6 +112,7 @@ export const useElectionStore = defineStore('election', {
     },
     async loadCalculator(electionId: string, districtId: string) {
       this.calculator = undefined;
+      this.uniqueQuestionTags.clear();
       let calculator = undefined;
       try {
         calculator = await fetchCalculator(electionId, districtId);
@@ -121,6 +123,9 @@ export const useElectionStore = defineStore('election', {
       if (calculator !== undefined) {
         this.calculator = calculator;
         this.answers = calculator.questions.map((x) => {
+          x.tags?.forEach((tag) => {
+            this.uniqueQuestionTags.add(tag);
+          });
           return {
             answer: UserAnswerEnum.undefined,
             flag: false,