diff --git a/client/components/Generic/FacultyFilter.js b/client/components/Generic/FacultyFilter.js
index e3a6e4a0..2b5627a9 100644
--- a/client/components/Generic/FacultyFilter.js
+++ b/client/components/Generic/FacultyFilter.js
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { clearLevelSpecificFilters, setFaculty } from 'Utilities/redux/filterReducer'
 import './Generic.scss'
 
-const FacultyFilter = ({ size, label }) => {
+const FacultyFilter = ({ label }) => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const lang = useSelector(state => state.language)
@@ -45,16 +45,17 @@ const FacultyFilter = ({ size, label }) => {
     )
   }
   return (
-    <div className={`faculty-filter-${size}`}>
+    <div>
       <label>{label}</label>
       <Dropdown
         data-cy="faculty-filter"
         fluid
-        selection
         multiple
+        selection
         options={faculties ? getOptions() : []}
         onChange={handleChange}
         value={selectedFaculties}
+        className="responsive-dropdown"
       />
     </div>
   )
diff --git a/client/components/Generic/FormFilter.js b/client/components/Generic/FormFilter.js
index 2cc4635c..8b73be86 100644
--- a/client/components/Generic/FormFilter.js
+++ b/client/components/Generic/FormFilter.js
@@ -32,7 +32,7 @@ const FormFilter = ({ version = null }) => {
   }
 
   return (
-    <div className={filterForm !== 4 ? `form-filter-small` : `form-filter-small-${filterForm}`}>
+    <div className="form-filter-small">
       <label>{t('chooseForm')}</label>
       <Select
         className="button basic gray"
diff --git a/client/components/Generic/Generic.scss b/client/components/Generic/Generic.scss
index 56d49636..7422353d 100644
--- a/client/components/Generic/Generic.scss
+++ b/client/components/Generic/Generic.scss
@@ -103,12 +103,13 @@
 }
 
 @mixin filter-basics {
-  margin: 2em 0em 0.5em 0em;
-  > label {
-    font-size: 1.05em;
-    margin-bottom: 0.5em;
-    display: block;
-  }
+  // margin: 2em 0em 0.5em 0em;
+  //   > label {
+  //   font-size: 1.05em;
+  //   margin-bottom: 0.5em;
+     display: flex;
+     align-items: center;
+  // }
 }
 
 @mixin filter-no-margin-top {
@@ -140,8 +141,6 @@
     width: 300px;
   }
   &-large {
-    @include filter-basics;
-    width: 100%;
   }
 }
 
diff --git a/client/components/Generic/LevelFilter.js b/client/components/Generic/LevelFilter.js
index f1511520..6d3f8cc7 100644
--- a/client/components/Generic/LevelFilter.js
+++ b/client/components/Generic/LevelFilter.js
@@ -31,10 +31,14 @@ const LevelFilter = ({ comparison }) => {
   }
 
   return (
-    <div className="level-filter">
-      <label>{comparison ? t('generic:compareLevel') : t('generic:levelFilter')}</label>
+    <div className="level-filter" style={{ display: 'flex', alignItems: 'center'}}>
+
       <Form>
         <Form.Group inline>
+        <Form.Field>
+      <label>{comparison ? t('generic:compareLevel') : t('generic:levelFilter')}</label>
+        </Form.Field>
+        
           <Form.Field>
             <Radio
               label={t('allProgrammes')}
diff --git a/client/components/Generic/ProgrammeList.js b/client/components/Generic/ProgrammeList.js
index e4b035fd..22fa3c36 100644
--- a/client/components/Generic/ProgrammeList.js
+++ b/client/components/Generic/ProgrammeList.js
@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { Button, Icon, Segment } from 'semantic-ui-react'
+import { Button, Icon, Accordion } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
 
 import { sortedItems } from 'Utilities/common'
@@ -10,7 +10,7 @@ import { formKeys } from '@root/config/data'
 const Programme = ({ p, lang, selectedFaculties, form }) => {
   return (
     <Fragment key={p.key}>
-      {p.name[lang]}
+      <span style={{ cursor: 'pointer' }}>{p.name[lang]}</span>
       {form &&
         form !== formKeys.EVALUATION_FACULTIES &&
         form !== formKeys.FACULTY_MONITORING &&
@@ -39,6 +39,7 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
   const lang = useSelector(state => state.language)
   const selectedFaculties = useSelector(({ filters }) => filters.faculty)
   const form = useSelector(state => state.filters.form)
+  const [isOpen, setIsOpen] = useState(false)
 
   const addToList = programme => {
     if (!picked.includes(programme)) {
@@ -47,11 +48,19 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
   }
 
   const labels =
-    form === formKeys.EVALUATION_FACULTIES || form == formKeys.FACULTY_MONITORING ? facultyLabels : programmeLabels
+    form === formKeys.EVALUATION_FACULTIES || form === formKeys.FACULTY_MONITORING ? facultyLabels : programmeLabels
+
   return (
-    <>
-      <Segment className="list-container" data-cy="report-programmes-list">
+    <Accordion styled active fluid data-cy="report-programmes-list" style={{ maxHeight: '400px', overflowY: 'auto' }}>
+      <Accordion.Title onClick={() => setIsOpen(!isOpen)}>
+        {t(labels.nowShowing)}
+        <span>
+          <Icon name={`caret ${isOpen ? 'down' : 'right'}`} />
+        </span>
+      </Accordion.Title>
+      <Accordion.Content active={isOpen}>
         <p className="list-header">{t(labels.nowShowing)}</p>
+
         {programmes.all.length > 0 ? (
           <Fragment key={programmes}>
             {sortedItems(programmes.all, 'name', lang).map(p => {
@@ -74,9 +83,7 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
               )
             })}
             <div className="ui divider" />
-            <p className={`list-header${programmes.chosen.length === 0 ? '-alert' : ''}`}>
-              {t(`${labels.chooseMore}`)}
-            </p>
+            <p className={`list-header${programmes.chosen.length === 0 ? '-alert' : ''}`}>{t(`${labels.chooseMore}`)}</p>
             {sortedItems(programmes.all, 'name', lang).map(p => {
               let pKey = p.key
               if (form === formKeys.EVALUATION_FACULTIES || form === formKeys.FACULTY_MONITORING) {
@@ -100,12 +107,12 @@ const ProgrammeList = ({ programmes, setPicked, picked }) => {
         ) : (
           <h4>{t('noData')}</h4>
         )}
-      </Segment>
-      <Button color="blue" onClick={() => setPicked(programmes.all)} data-cy="report-select-all">
-        {t('selectAll')}
-      </Button>
-      <Button onClick={() => setPicked([])}>{t('clearSelection')}</Button>
-    </>
+        <Button color="blue" onClick={() => setPicked(programmes.all)} data-cy="report-select-all">
+          {t('selectAll')}
+        </Button>
+        <Button onClick={() => setPicked([])}>{t('clearSelection')}</Button>
+      </Accordion.Content>
+    </Accordion>
   )
 }
 
diff --git a/client/components/ReportPage/FilterTray.js b/client/components/ReportPage/FilterTray.js
index e9d76e45..6b9457e2 100644
--- a/client/components/ReportPage/FilterTray.js
+++ b/client/components/ReportPage/FilterTray.js
@@ -1,11 +1,11 @@
 import React from 'react'
+import { Menu, Container } from 'semantic-ui-react'
 import { useSelector } from 'react-redux'
 import CompanionFilter from 'Components/Generic/CompanionFilter'
 import DoctoralSchoolFilter from 'Components/Generic/DoctoralSchoolFilter'
 import LevelFilter from 'Components/Generic/LevelFilter'
 import FacultyFilter from 'Components/Generic/FacultyFilter'
 import ProgrammeFilter from 'Components/Generic/ProgrammeFilter'
-import FormFilter from 'Components/Generic/FormFilter'
 import { useTranslation } from 'react-i18next'
 import '../Generic/Generic.scss'
 import { formKeys } from '@root/config/data'
@@ -29,15 +29,7 @@ const getLevelFilter = ({ filters }) => {
 
 const getProgrammeFilter = ({ form, filter, t, handleSearch, setFilter }) => {
   if (form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING)
-    return (
-      <ProgrammeFilter
-        handleChange={handleSearch}
-        label={t('programmeFilter')}
-        filter={filter}
-        onEmpty={() => setFilter('')}
-        t={t}
-      />
-    )
+    return <ProgrammeFilter handleChange={handleSearch} filter={filter} onEmpty={() => setFilter('')} t={t} />
   return null
 }
 
@@ -46,26 +38,33 @@ const FilterTray = ({ filter, setFilter }) => {
   const filters = useSelector(state => state.filters)
   const usersProgrammes = useSelector(state => state.studyProgrammes.usersProgrammes)
   const { faculty, level, form } = filters
-
+ 
   const handleSearch = ({ target }) => {
     const { value } = target
     setFilter(value)
   }
 
+  if (
+    !usersProgrammes ||
+    !usersProgrammes.length > 5 ||
+    form === formKeys.FACULTY_MONITORING ||
+    form === formKeys.EVALUATION_FACULTIES
+  )
+    return null
+
   return (
     <>
-      <FormFilter />
-      {usersProgrammes && usersProgrammes.length > 5 && (
-        <>
-          {form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING && (
-            <FacultyFilter size="small" label={t('report:facultyFilter')} />
-          )}
-          {getLevelFilter({ filters })}
-          {getCompanionFilter({ faculty, level })}
-          {getDoctoralSchoolFilter({ faculty, level })}
-          {getProgrammeFilter({ form, filter, t, handleSearch, setFilter })}
-        </>
-      )}
+        {form !== formKeys.EVALUATION_FACULTIES && form !== formKeys.FACULTY_MONITORING && (
+          <FacultyFilter size="large" label={t('report:facultyFilter')} />
+        )}
+      <Menu secondary>
+        <Menu.Item>{getLevelFilter({ filters })}</Menu.Item>
+      </Menu>
+      <Menu secondary>
+        <Menu.Item>{getProgrammeFilter({ form, filter, t, handleSearch, setFilter })}</Menu.Item>
+        <Menu.Item>{getDoctoralSchoolFilter({ faculty, level })}</Menu.Item>
+        <Menu.Item>{getCompanionFilter({ faculty, level })}</Menu.Item>
+      </Menu>
     </>
   )
 }
diff --git a/client/components/ReportPage/ReportPage.scss b/client/components/ReportPage/ReportPage.scss
index 2fa0e0f7..f6086fba 100644
--- a/client/components/ReportPage/ReportPage.scss
+++ b/client/components/ReportPage/ReportPage.scss
@@ -1,360 +1,9 @@
-@import '../../assets/colors.scss';
+.no-print {
 
-// Hiding any element when printing PDFs
-@media print {
-  .noprint {
-    display: none !important;
-  }
-}
-
-// Hide the tab-headers when printing PDFs
-.item {
   @media print {
-    display: none !important;
-  }
-}
 
-@mixin color-buttons-basics {
-  margin-bottom: 25px;
-  display: flex;
-  align-items: center;
-  padding: 3px;
-}
+    display: none;
 
-.report .report-tab {
-  padding: 10px;
-  margin-top: 2em;
-  width: 90%;
-  @media print {
-    width: 100% !important;
-  }
-  max-width: 1400px;
-  align-self: center;
-}
-
-.report {
-  & .info-header {
-    height: 50px;
-  }
-  & .header {
-    font-size: 1.1em;
-    & .center {
-      text-align: center;
-    }
-    & .left {
-      margin-left: 25px;
-    }
-    & .right {
-      text-align: end;
-    }
-  }
-  & .filter-container {
-    width: 90%;
-    max-width: 1400px;
-    align-self: center;
-    @media only screen and (max-width: 991px) and (min-width: 768px) {
-      max-width: 90%;
-    }
-    > h1 {
-      margin-bottom: 1.3em;
-      margin-top: 1em !important;
-    }
-  }
-  & .report-tab {
-    padding: 10px;
-    margin-top: 2em;
-    width: 90%;
-    @media print {
-      width: 100% !important;
-    }
-    max-width: 1400px;
-    align-self: center;
-  }
-  & .tab-pane {
-    margin-top: 1em;
-    padding: 10px;
-  }
-  & .side-note {
-    &-small {
-      font-weight: 300;
-      font-size: 0.8em;
-      color: $gray;
-    }
-    &-large {
-      font-weight: 400;
-      font-size: 1em;
-      color: $blue;
-    }
-  }
-  & .color-button {
-    &-active {
-      background-color: transparent;
-      border: 2px solid black !important;
-      border-radius: 6%;
-    }
-    &- {
-      background-color: transparent;
-      border: none;
-    }
-  }
-  & .color-buttons {
-    @include color-buttons-basics;
-    &-sticky {
-      position: sticky;
-      z-index: 4;
-      @include color-buttons-basics;
-      top: 60px;
-      > label {
-        font-size: 20px;
-        margin-right: 5px;
-      }
-    }  
   }
-}
 
-@mixin question-caret-basics {
-  max-width: 25px;
-  padding: 0em 0.5em !important;
-  display: flex !important;
-  flex-direction: column;
-  justify-content: center;
-}
-
-@mixin question-label-basics {
-  font-weight: bold;
-  margin-top: 0.4em;
-}
-
-@mixin answered-label-basics {
-  min-width: 85px;
-  position: absolute;
-  top: 20px;
-  right: 15px;
-  color: $white !important;
-}
-
-.report {
-  & .question {
-    &-caret {
-      @include question-caret-basics;
-    }
-    &-caret-disabled {
-      @include question-caret-basics;
-      color: $gray !important;
-      cursor: default;
-    }
-    &-header {
-      &-disabled {
-        cursor: default !important;
-      }
-    }
-    &-label {
-      @include question-label-basics;
-      color: $black;
-    }
-    &-label-disabled {
-      @include question-label-basics;
-      color: $gray;
-      cursor: default;
-      &:hover {
-        color: $gray !important;
-      }
-    }
-    &-description {
-      font-style: italic;
-      color: $dark-gray;
-      font-weight: 300;
-      margin-top: 1em;
-    }
-    &-description-disabled {
-      color: $gray;
-      cursor: default;
-    }
-    &-title-disabled {
-      color: $gray !important;
-      cursor: default;
-    }
-    &-content {
-      margin-left: 25px !important;
-      max-width: 1200px;
-    }
-    &-answered-label {
-      @include answered-label-basics;
-      background-color: $blue !important;
-      &-disabled {
-        @include answered-label-basics;
-        background-color: $gray !important;
-      }
-    }
-    &-extrainfo {
-      color: $gray;
-      font-weight: 300;
-      font-style: italic;
-    }
-  }
-}
-
-@mixin answer-circle-basics {
-  display: inline-block;
-  border-radius: 50%;
-  height: 10px;
-  width: 10px;
-}
-
-@mixin answer-circle-big-basics {
-  display: inline-block;
-  border-radius: 50%;
-  height: 26px;
-  width: 26px;
-  margin: 5px;
-}
-
-.report .answer {
-  &-header {
-    font-style: bold;
-  }
-  &-title {
-    word-break: break-word;
-  }
-  &-list {
-    list-style: none;
-    padding-left: 0;
-    margin-top: 0.6em;
-    margin-bottom: 2em;
-  }
-  &-row {
-    padding-top: 0.3em;
-  }
-  &-circle {
-    @include answer-circle-basics;
-  }
-  &-circle-green {
-    @include answer-circle-basics;
-    background: $background-green;
-  }
-  &-circle-yellow {
-    @include answer-circle-basics;
-    background: $background-yellow;
-  }
-  &-circle-red {
-    @include answer-circle-basics;
-    background: $background-red;
-  }
-  &-circle-gray {
-    @include answer-circle-basics;
-    background: $gray;
-  }
-  &-circle-big-green {
-    @include answer-circle-big-basics;
-    background: $background-green;
-  }
-  &-circle-big-yellow {
-    @include answer-circle-big-basics;
-    background: $background-yellow;
-  }
-  &-circle-big-red {
-    @include answer-circle-big-basics;
-    background: $background-red;
-  }
-  &-circle-big-gray {
-    @include answer-circle-big-basics;
-    background: $gray;
-  }
-  &-circle-big-all {
-    border-radius: 50%;
-    box-sizing: border-box;
-    border: 2px solid $black;
-    display: inline-block;
-    height: 26px;
-    width: 26px;
-    margin: 5px;
-  }
-}
-
-.color {
-  &-grid {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-evenly;
-    width: 100%;
-    margin: 4em 0em;
-  }
-  &-chart-area {
-    width: 425px;
-    margin: 10px;
-    margin-bottom: 40px;
-    display: flex;
-    flex-direction: column;
-    -ms-flex-direction: column;
-  }
-  &-pie-header {
-    flex-grow: 1;
-    text-align: center;
-    font-weight: 600;
-    > p {
-      margin-bottom: 3px;
-      font-weight: 400;
-    }
-  }
-  &-pie-headline {
-    max-width: 90%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  &-pie-chart {
-    position: relative;
-    display: inline-block;
-    flex-shrink: 1;
-    width: 100%;
-  }
-  &-pie-chart {
-    > svg {
-      > path:hover {
-        filter: brightness(0.8); 
-      }
-    }
-  }
-  &-pie-tip {
-    position: absolute;
-    float: right;
-    top: 75%;
-    width: 425px;
-    z-index: 5;
-    padding: 6px 10px;
-    border-radius: 2px;
-    background: $white;
-    color: $black;
-    font-size: 12px;
-    text-shadow: 0 1px 0 #fff;
-    line-height: 1.1;
-    letter-spacing: 0.06em;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
-    -webkit-transform: all 0.3s;
-    -moz-transform: all 0.3s;
-    -ms-transform: all 0.3s;
-    -o-transform: all 0.3s;
-    transform: all 0.3s;
-    overflow-y: auto;
-  }
-  &-pie-tip-close {
-    float: right;
-  }
-}
-
-@mixin question-title-basics {
-  display: flex;
-  gap: 0.3em;
-  align-items: center;
-}
-
-
-.question-title {
-  &-programme {
-    @include question-title-basics;
-  }
-  &-faculty {
-    @include question-title-basics;
-
-  }
 }
\ No newline at end of file
diff --git a/client/components/ReportPage/index.js b/client/components/ReportPage/index.js
index 2e555aae..1f0e9dea 100644
--- a/client/components/ReportPage/index.js
+++ b/client/components/ReportPage/index.js
@@ -14,6 +14,7 @@ import QuestionList from 'Components/Generic/QuestionList'
 import { answersByYear, filteredProgrammes, modifiedQuestions, answersByQuestions } from 'Utilities/common'
 import useDebounce from 'Utilities/useDebounce'
 import YearSelector from 'Components/Generic/YearSelector'
+import FormFilter from 'Components/Generic/FormFilter'
 import FilterTray from './FilterTray'
 import ColorAnswers from './ColorAnswers'
 import WrittenAnswers from './WrittenAnswers'
@@ -148,43 +149,43 @@ export default () => {
   if (usersProgrammes.length < 1) return <NoPermissions t={t} requestedForm={t('report:reportPage')} />
 
   return (
-    <div className="report">
-      <div className="info-header noprint" />
-      <Menu secondary>
-        <Menu.Item>
-          <Button as={Link} to="/yearly" icon labelPosition="left" size="small">
-            <Icon name="arrow left" />
-            {t('backToFrontPage')}
-          </Button>
-        </Menu.Item>
-        <Menu.Item>
-          <h1>{t('report:reportPage')}</h1>
-        </Menu.Item>
-        <Menu.Item>
-          <YearSelector size="small" />
-        </Menu.Item>
-      </Menu>
-      <Grid doubling columns={2} padded="vertically" className="filter-container noprint">
-        <Grid.Column width={10}>
-          <FilterTray filter={filter} setFilter={setFilter} />
-          <Accordion fluid styled className="question-filter">
-            <Accordion.Title active onClick={() => setOpenQuestions(!openQuestions)}>
-              {t('report:selectQuestions')}{' '}
-              <span className="noprint">
-                <Icon name={`caret ${openQuestions ? 'down' : 'right'}`} />
-              </span>
-            </Accordion.Title>
-            <Accordion.Content active={openQuestions}>
-              <QuestionList label="" questionsList={questionsList} />
-            </Accordion.Content>
-          </Accordion>
-        </Grid.Column>
-        <Grid.Column width={6}>
-          <ProgrammeList programmes={programmes} setPicked={setPicked} picked={picked} />
-        </Grid.Column>
-      </Grid>
+    <div style={{ width: '80%', maxWidth: '80%' }}>
+      <div className="no-print">
+        <Menu secondary>
+          <Menu.Item>
+            <Button as={Link} to="/yearly" icon="arrow left" size="small" />
+          </Menu.Item>
+          <Menu.Item>
+            <h1>{t('report:reportPage')}</h1>
+          </Menu.Item>
+          <Menu.Item>
+            <YearSelector size="small" />
+          </Menu.Item>
+          <Menu.Item>
+            <FormFilter />
+          </Menu.Item>
+        </Menu>
+        <FilterTray filter={filter} setFilter={setFilter} />
+        <Grid doubling columns={2} padded="vertically">
+          <Grid.Column>
+            <Accordion fluid styled style={{ maxHeight: '400px', overflowY: 'auto' }}>
+              <Accordion.Title active onClick={() => setOpenQuestions(!openQuestions)}>
+                {t('report:selectQuestions')}{' '}
+                <span>
+                  <Icon name={`caret ${openQuestions ? 'down' : 'right'}`} />
+                </span>
+              </Accordion.Title>
+              <Accordion.Content active={openQuestions}>
+                <QuestionList label="" questionsList={questionsList} />
+              </Accordion.Content>
+            </Accordion>
+          </Grid.Column>
+          <Grid.Column>
+            <ProgrammeList programmes={programmes} setPicked={setPicked} picked={picked} />
+          </Grid.Column>
+        </Grid>
+      </div>
       <Tab
-        className="report-tab"
         onTabChange={handleTabChange}
         activeIndex={activeTab}
         menu={{ secondary: true, pointing: true }}