diff --git a/frontend/src/components/filtering/by-reviewing-service.vue b/frontend/src/components/filtering/by-reviewing-service.vue
index ac2791ce..1cfa145f 100644
--- a/frontend/src/components/filtering/by-reviewing-service.vue
+++ b/frontend/src/components/filtering/by-reviewing-service.vue
@@ -4,7 +4,7 @@ v-card(flat)
   v-card-text
     v-chip-group(v-model="selectedReviewers" mandatory column multiple)
       span(v-for="service in this.reviewing_services" :key="`${service.id}-chip`")
-        v-chip(:value="service.id" :disabled="loadingRecords" filter filter-icon="mdi-check" 
+        v-chip(:value="service.id" :disabled="loadingRecords" filter filter-icon="mdi-check" outlined
                active-class="active-chip" text-color="black")
           img(v-if="imageFileName(service.id)" :src="require(`@/assets/partner-logos/` + imageFileName(service.id))" height="24px" :alt="serviceId2Name(service.id)").pa-1
           | {{ serviceId2Name(service.id) }}
diff --git a/frontend/src/components/filtering/by-simple-search-query.vue b/frontend/src/components/filtering/by-simple-search-query.vue
index 8b962370..e060c173 100644
--- a/frontend/src/components/filtering/by-simple-search-query.vue
+++ b/frontend/src/components/filtering/by-simple-search-query.vue
@@ -4,7 +4,6 @@ v-card(flat).flex-grow-1
   v-card-text.d-flex.d-flex-row.align-center
     v-text-field(
       :value="currentQuery" v-on:keyup.enter="currentQuery = $event.target.value"
-      :loading="loadingRecords"
       placeholder="keywords, authors, doi"
       prepend-icon="mdi-magnify"
       hide-details
diff --git a/frontend/src/components/highlights/article.vue b/frontend/src/components/highlights/article.vue
index ad9e375f..483e9fb8 100644
--- a/frontend/src/components/highlights/article.vue
+++ b/frontend/src/components/highlights/article.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   v-container(fluid)
     v-row(v-if="article")
-      v-col
-        HighlightedListItem(:article="article" :expandedReview="expandedReview")
+      v-col.d-flex.align-center
+        HighlightedListItem(:article="article" :expandedReview="expandedReview" :open-preprint-boxes=[0, 1, 2] :open-reviewed-boxes=[0, 1, 2]).ml-auto.mr-auto
     v-row(v-else)
       v-col
         v-card
@@ -95,25 +95,18 @@ export default {
       let url = null;
       if (params.slug) {
         this.article_slug = params.slug
-        url = `/api/v1/slug/${params.slug}`
+        url = `/api/v2/paper/?slug=${params.slug}`
       } else if (params.doi) {
         this.article_doi = params.doi
-        url = `/api/v1/doi/${params.doi}`
+        url = `/api/v2/paper/?doi=${params.doi}`
       }
       httpClient.get(url).then((response) => {
-        let article = response.data[0]
+        let article = response.data
         if (article.doi) {  // if the backend doesn't find the article it
                             // returns an article with all its properties set to null
           this.article = article
-          // return httpClient.get(`/api/v1/review/${doi}`)
         }
       })
-      // .then((response) => {
-      //   if (response.data[0]) {
-      //     let review_process = response.data[0].review_process
-      //     this.article.review_process = review_process
-      //   }
-      // })
     },
     generateMyUrl () {
       if (this.article_slug) {
diff --git a/frontend/src/components/highlights/index.vue b/frontend/src/components/highlights/index.vue
index 8747696e..a476959f 100644
--- a/frontend/src/components/highlights/index.vue
+++ b/frontend/src/components/highlights/index.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-div.d-flex.mr-auto.ml-auto
+div(style="max-width: 100%;").d-flex.mr-auto.ml-auto
   v-container(v-if="loadingRecords").mt-6
     v-progress-circular(:size="70" :width="7" color="primary" indeterminate).ml-auto
 
-  span(v-else).mt-3
+  span(v-else style="max-width:100%;").mt-3
     v-container(fluid v-if="paging.totalItems > 0" :class="{'highlights-loading': loadingRecords}")
       h2 {{ paging.totalItems }} reviewed preprints found {{ query != '' ? `for search term "${query}" ` : '' }} in the selected sources
     v-container(fluid v-if="paging.totalItems == 0")
@@ -20,7 +20,7 @@ div.d-flex.mr-auto.ml-auto
           )
       v-row(v-if="paging.totalItems > 0")
         v-col.d-flex
-          v-btn-toggle(v-model="sortBy")
+          v-btn-toggle(v-model="sortBy" mandatory)
             v-tooltip(bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small v-bind="attrs" v-on="on" outlined value="preprint-date")
@@ -45,8 +45,8 @@ div.d-flex.mr-auto.ml-auto
               span Sort earliest first
 
       v-row(v-for="article in records" :key="article.id")
-        v-col
-          HighlightedListItem(:article="article")
+        v-col(cols=12)
+          HighlightedListItem(:article="article" :open-preprint-boxes="[]" :open-reviewed-boxes="[0]")
       v-row(v-if="paging.totalItems > 0" justify="start")
         v-col(cols=6).px-0.d-flex
           v-pagination(
diff --git a/frontend/src/components/highlights/list-item.vue b/frontend/src/components/highlights/list-item.vue
index 084ffa09..6af5f333 100644
--- a/frontend/src/components/highlights/list-item.vue
+++ b/frontend/src/components/highlights/list-item.vue
@@ -1,51 +1,34 @@
 <template lang="pug">
-v-card(v-if="article" color="tertiary")
-  v-card-title
-    div
+v-card(v-if="article" color="tertiary" style="max-width: 70%;")
+  v-card-title.pb-3
+    span.d-flex.flex-row
       router-link(:to="generateInternalUrl").paper-title
-        | {{ article.title }}
-
-      v-tooltip(bottom transition="fade-transition")
-        template(v-slot:activator="{ on, hover, attrs }")
-          v-btn(@click="copyFullUrlToClipboard" v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false")
-            v-icon(color="primary").ml-3 mdi-link-variant
-        span Copy link to clipboard
-
-      v-tooltip(bottom transition="fade-transition")
-        template(v-slot:activator="{ on, hover, attrs }")
-          v-btn(@click="copyCitationToClipboard" v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false")
-            v-icon(color="primary").ml-1 mdi-format-quote-open
-        span Copy formatted citation
-
-      v-tooltip(bottom transition="fade-transition")
-        template(v-slot:activator="{ on, hover, attrs }")
-          a(v-bind="attrs" v-on="on" :href="getTweetHref")
-            v-icon(color="primary").ml-1 mdi-twitter
-        span Share on X
+        p(style="vertical-align:baseline;") {{ article.title }}
+      v-menu(close-on-click='' transition='slide-y-transition')
+        template(v-slot:activator='{ on, attrs }')
+          v-btn(color="primary" v-ripple="false" v-bind="attrs" v-on="on" depressed plain icon).ml-1.pb-2
+            v-icon mdi-share-variant
+        v-list(dense flat outlined)
+          v-list-item
+            v-list-item-title
+              v-btn(@click="copyFullUrlToClipboard" elevation=0 plain depressed v-ripple="false")
+                v-icon(color="primary") mdi-link-variant
+                span.ml-2 Copy link to clipboard
+          v-list-item
+            v-list-item-title
+              v-btn(@click="copyCitationToClipboard" elevation=0 plain depressed v-ripple="false")
+                v-icon(color="primary") mdi-format-quote-open
+                span.ml-2 Copy citation
+          v-list-item
+            v-list-item-title
+              v-btn(elevation=0 plain depressed v-ripple="false")
+                a(:href="getTweetHref" target="_blank")
+                  v-icon(color="gray") mdi-twitter
+                  span.ml-2 Share on X
       
-  v-card-subtitle
+  v-card-subtitle.pb-1
     p.mb-0 {{ authorList }}
 
-    div(v-if="hasFigureKeywords").d-flex.flex-row.align-center
-      v-list-item.px-0
-        span.d-flex.flex-row.no-pointer-events
-          v-chip-group(v-if="article.main_topics.length > 0" :key="0" column)
-            v-chip(v-for="(item, index) in article.main_topics" small outlined :key="`topics-${index}`").purple--text {{ item.slice(0,3).join(", ") }}
-          v-chip-group(v-if="article.highlighted_entities.length > 0" :key="1" column)
-            v-chip(v-for="(item, index) in article.highlighted_entities" small outlined :key="`highlighted-entities-${index}`").red--text {{ item }}
-          v-chip-group(v-if="article.entities.length > 0" :key="2" column)
-            v-chip(v-for="(item, index) in article.entities" small outlined :key="`entities-${index}`").orange--text {{ item }}
-          v-chip-group(v-if="article.assays.length > 0" :key="3" column)
-            v-chip(v-for="(item, index) in article.assays" small outlined :key="`assays-${index}`").green--text {{ item }}
-        
-        v-tooltip(bottom transition="fade-transition")
-          template(v-slot:activator="{ on, hover, attrs }")
-            span(v-bind="attrs" v-on="on")
-                v-icon(color="grey-lighten-1") mdi-information-outline
-          span <!-- TODO: Explain what these are and what the colors mean -->
-            h3 Keywords deduced from the figures. 
-            p(style="max-width: 200px;") Green text means this, orange text means that...
-
     span
       | Posted
       |
@@ -57,56 +40,123 @@ v-card(v-if="article" color="tertiary")
       a(:href="href(article.doi)" target="_blank" rel="noopener" class="ml-2")
         |
         | doi.org/{{ article.doi }}
+        
+  v-card-text
+    v-expansion-panels(accordion multiple v-model="openPreprintBoxes").mb-3.mt-1
+      v-expansion-panel(mandatory eager)
+        v-expansion-panel-header(color="tertiary")
+            span
+              h3.mb-1 Abstract
+              span.sample-text.hide-when-expanded.text-body-2 {{ preview(article.abstract) }}
+        v-expansion-panel-content(color="tertiary")
+          p(class="text--primary").text-body-1 {{ article.abstract }}
 
-    span.d-flex.flex-row.align-center
-      span.mr-3 Reviewed by 
-      v-bottom-sheet(v-model="dialog" inset)
-        template(v-slot:activator="{ on, attrs }")
-          v-chip-group
-            v-chip(
-              color="secondary"
-              outlined
-              @click="selectReviewerInfo(source)"
-              v-bind="attrs"
-              v-on="on" v-for='source in article.reviewed_by')
-              | {{ serviceId2Name(source) }}
-              v-icon(right) mdi-information
+      v-expansion-panel(v-if="hasFigureKeywords")
+        v-expansion-panel-header(color="tertiary")
+          span.d-flex.align-center
+            h3 Preprint figure keywords
+            v-tooltip(bottom transition="fade-transition")
+              template(v-slot:activator="{ on, hover, attrs }")
+                span(v-on:click.stop v-bind="attrs" v-on="on").ml-1
+                  v-icon(color="grey-lighten-1") mdi-information-outline
+              span <!-- TODO: Explain what these are and what the colors mean -->
+                h3 Keywords deduced from the figures. 
+                p(style="max-width: 250px;") Green text means this, orange text means that...
+      
+        v-expansion-panel-content(color="tertiary")
+          div.d-flex.flex-row.align-center
+            v-list-item.px-0
+              span.d-flex.flex-row.no-pointer-events
+                v-chip-group(v-if="article.main_topics.length > 0" :key="0" column)
+                  v-chip(v-for="(item, index) in article.main_topics"  outlined :key="`topics-${index}`").purple--text {{ item.slice(0,3).join(", ") }}
+                v-chip-group(v-if="article.highlighted_entities.length > 0" :key="1" column)
+                  v-chip(v-for="(item, index) in article.highlighted_entities"  outlined :key="`highlighted-entities-${index}`").red--text {{ item }}
+                v-chip-group(v-if="article.entities.length > 0" :key="2" column)
+                  v-chip(v-for="(item, index) in article.entities"  outlined :key="`entities-${index}`").orange--text {{ item }}
+                v-chip-group(v-if="article.assays.length > 0" :key="3" column)
+                  v-chip(v-for="(item, index) in article.assays"  outlined :key="`assays-${index}`").green--text {{ item }}
 
-        InfoCardsReviewServiceSummaryGraph(
-          :service_name="serviceId2Name(selectedSource)",
-          :url="reviewingService(selectedSource).url",
-          :peer_review_policy="reviewingService(selectedSource).peer_review_policy",
-          :review_requested_by="reviewingService(selectedSource).review_requested_by",
-          :reviewer_selected_by="reviewingService(selectedSource).reviewer_selected_by",
-          :review_coverage="reviewingService(selectedSource).review_coverage",
-          :reviewer_identity_known_to="reviewingService(selectedSource).reviewer_identity_known_to",
-          :competing_interests="reviewingService(selectedSource).competing_interests",
-          :public_interaction="reviewingService(selectedSource).public_interaction",
-          :opportunity_for_author_response="reviewingService(selectedSource).opportunity_for_author_response",
-          :recommendation="reviewingService(selectedSource).recommendation",
-        ).px-0.mt-2
+    v-expansion-panels(accordion multiple v-model="openReviewedBoxes")
+      v-expansion-panel(readonly)
+        v-expansion-panel-header(hide-actions)
+          span.d-flex.flex-column
+            h3(style="color: black;") Preprint review timeline
+            //- TODO: enable this when the functionality is ready
+              //- v-tooltip(bottom transition="fade-transition")
+              //-   template(v-slot:activator="{ on, hover, attrs }")
+              //-     v-btn(@click="???" v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false")
+              //-       v-icon(color="primary") mdi-download-circle
+              //-   span Download all review data
 
-  v-card-text
-    v-container(fluid).article-content
-      //- Vertical 1-col layout with review process first, abstract second on smaller screens, horizontal 2-col layout
-      //-  with abstract left, review process right on larger screens. Entities always at the bottom in single column.
-      v-row
-        v-col(order="2" order-md="1" cols="12" md="7")
-          v-card.article-card
-            v-card-title Abstract
-            v-card-text
-              p(class="text--primary") {{ article.abstract }}
+            span.pb-0.d-flex.flex-row.align-center
+              b.mr-3 Reviewed by
+              v-bottom-sheet(v-model="dialog" inset)
+                template(v-slot:activator="{ on, attrs }")
+                  v-chip-group
+                    v-chip(
+                      v-ripple="false" small
+                      color="secondary"
+                      outlined
+                      @click="selectReviewerInfo(source)"
+                      v-bind="attrs"
+                      v-on="on" v-for='source in article.reviewed_by')
+                      img(v-if="imageFileName(source)" :src="require(`@/assets/partner-logos/` + imageFileName(source))" height="24px" :alt="serviceId2Name(source)").pa-1
+                      span(v-else) {{ serviceId2Name(service.id) }}
+                      v-icon(right small) mdi-information
 
-        v-col(order="1" order-md="2" cols="12" md="5")
-          div.review-process
-            render-rev-summary(:ref='article.doi + "-rev-summary"')
+                InfoCardsReviewServiceSummaryGraph(
+                  :service_name="serviceId2Name(selectedSource)",
+                  :url="reviewingService(selectedSource).url",
+                  :peer_review_policy="reviewingService(selectedSource).peer_review_policy",
+                  :review_requested_by="reviewingService(selectedSource).review_requested_by",
+                  :reviewer_selected_by="reviewingService(selectedSource).reviewer_selected_by",
+                  :review_coverage="reviewingService(selectedSource).review_coverage",
+                  :reviewer_identity_known_to="reviewingService(selectedSource).reviewer_identity_known_to",
+                  :competing_interests="reviewingService(selectedSource).competing_interests",
+                  :public_interaction="reviewingService(selectedSource).public_interaction",
+                  :opportunity_for_author_response="reviewingService(selectedSource).opportunity_for_author_response",
+                  :recommendation="reviewingService(selectedSource).recommendation",
+                ).px-0.mt-2
+        
+        v-expansion-panel-content(eager).pt-0
+          span.review-process.d-flex.align-start.justify-start
             render-rev-timeline(:ref='article.doi + "-rev-timeline"')
+
+      v-expansion-panel(v-if="maybeReviewSummary")
+        v-expansion-panel-header
+          span
+            span.d-flex.align-center
+              h3 Automated summary of preprint reviews
+              v-tooltip(bottom transition="fade-transition")
+                template(v-slot:activator="{ on, hover, attrs }")
+                  span(v-on:click.stop v-bind="attrs" v-on="on").ml-1
+                    v-icon(color="grey-lighten-1") mdi-information-outline
+                p(style="max-width: 250px;")
+                  | This summary was generated automatically using ChatGPT-4 based on the content of the reviews. 
+                  | Currently, this feature is limited to Review Commons reviews.
+                  | To access the full content of the original reviews, click on "Peer Review".
+            span.sample-text.hide-when-expanded.text-body-2 {{ preview(maybeReviewSummary) }}
+            
+        v-expansion-panel-content(eager)
+          p(class="text--primary").text-body-1 {{ maybeReviewSummary }}
+
+      v-expansion-panel
+        v-expansion-panel-header 
+          h3 Cite this reviewed preprint
+            v-tooltip(bottom transition="fade-transition")
+                template(v-slot:activator="{ on, hover, attrs }")
+                  v-btn(@click="copyCitationToClipboard" v-on:click.stop v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false")
+                    v-icon(color="primary") mdi-format-quote-open
+                span Copy reviewed preprint citation
+        v-expansion-panel-content
+          span.d-flex.flex-row.align-top
+            p(v-html="this.citationText(false)").mb-2.text-body-1
 </template>
 
 <script>
 import MarkdownIt from 'markdown-it'
 import { BASE_URL } from '../../lib/http'
-import { serviceId2Name } from '../../store/by-filters'
+import { serviceId2Name, normalizeServiceName } from '../../store/by-filters'
 import '@source-data/render-rev'
 import { parse as parseDocmaps } from '@source-data/render-rev/src/docmaps.js'
 import { mapGetters } from 'vuex'
@@ -119,11 +169,18 @@ export default {
   props: {
     article: Object,
     expandedReview: Object,
+
+    // Props for the expansion panels that should be opened by default, passed from the parent component
+    openPreprintBoxes: Array,
+    openReviewedBoxes: Array
   },
   data() {
     return {
       dialog: false,
-      selectedSource: null
+      selectedSource: null,
+
+      // We grab the review from the docmaps, as it's easier to work with it by not relying on the render-rev component
+      maybeReviewSummary: null,
     }
   },
   methods: {
@@ -170,10 +227,35 @@ export default {
       navigator.clipboard.writeText(this.getFullStandaloneDoiUrl);
     },
     copyCitationToClipboard () {
-      navigator.clipboard.writeText(this.citationText);
+      navigator.clipboard.writeText(this.citationText(true));
     },
     selectReviewerInfo(value) {
       this.selectedSource = value;
+    },
+    imageFileName(id) {
+      const availableSourceLogos = require.context('../../assets/partner-logos/', true, /\.(svg|png|jpg)/).keys()
+
+      let normalizedServiceName = normalizeServiceName(serviceId2Name(id))
+      let filename = availableSourceLogos.find(i => i.includes(normalizedServiceName))
+      if (filename)
+        return filename.substring(2) // substring to remove the `./` part of the name
+      else return null
+    },
+    preview(text) {
+      return text.split(/\s+/).slice(0, 25).join(" ") + "...";
+    },
+    citationText(stripHtmlFormatting) {
+      const date = new Date(this.article.pub_date)       
+      const year = date.getFullYear()
+      
+      const reviewedByText = this.article.reviewed_by.map(r => "peer reviewed by <b><i>" + serviceId2Name(r) + "</i></b>").join(", ")
+
+      let citationText = `${this.authorList} (${year}). ${this.article.title}. <b><i>${this.article.journal}</i></b> doi.org/${this.article.doi}, ${reviewedByText} ${this.getFullStandaloneDoiUrl}.`
+      
+      if (stripHtmlFormatting)
+        return citationText.replace(/<[^>]*>?/gm, '')
+      else 
+        return citationText
     }
   },
   computed: {
@@ -209,15 +291,6 @@ export default {
       let fullLink = "https://twitter.com/intent/tweet?text=" + tweetContent
       return fullLink
     },
-    citationText() {
-      const date = new Date(this.article.pub_date)
-      const year = date.getFullYear()
-      
-      const reviewedByText = this.article.reviewed_by.map(r => "peer reviewed by " + serviceId2Name(r)).join(", ")
-
-      let citationText = `${this.authorList} (${year}). ${this.article.title}. ${this.article.journal} doi.org/${this.article.doi}, ${reviewedByText} ${this.getFullStandaloneDoiUrl}.`
-      return citationText
-    }
   },
   mounted() {
     const doi = this.article.doi;
@@ -226,7 +299,9 @@ export default {
       .then(response => response.json())
       .then(parseDocmaps)
       .then(reviewProcess => {
-        this.$refs[doi + "-rev-summary"].reviewProcess = reviewProcess;
+        let reviewWithSummary = reviewProcess.timeline.groups.map(g => g.items).flat().find(i => i.type === "reviews" && i.summaries.length > 0);
+        if (reviewWithSummary)
+          this.maybeReviewSummary = reviewWithSummary.summaries[0]
 
         const timeline = this.$refs[doi + "-rev-timeline"];
         timeline.reviewProcess = reviewProcess;
@@ -240,8 +315,6 @@ export default {
           renderMarkdown: src => md.render(src),
         };
       });
-
-
   }
 }
 </script>
@@ -256,17 +329,6 @@ export default {
     --rr-timeline-summary-text-color: black;
     --rr-timeline-width: 100%;
   }
-  .v-sheet.v-card.article-card {
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-    border-radius: 4px;
-  }
-
-  @media screen and (max-width: 1080px) {
-    .container.container--fluid.article-content {
-      padding: 0;
-    }
-  }
-
   .v-chip.v-chip--outlined.v-chip.v-chip {
     background-color: white !important;
   }
@@ -283,4 +345,21 @@ export default {
   a:hover {
     color: #217b90;
   }
+
+  .sample-text {
+    opacity: 0.6;
+  }
+
+  .v-expansion-panel-header--active .hide-when-expanded {
+    display: none;
+  }
+
+  .v-expansion-panel-header:not(.v-expansion-panel-header--active) .hide-when-not-expanded {
+    display: none;
+  }
+
+  .paper-title {
+    letter-spacing: normal;
+    line-height: normal;
+  }
 </style>
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index b5513aab..548c4d4e 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -14,7 +14,7 @@ const opts = {
       light: {
         primary: '#0a5769',
         secondary: '#0d648c',
-        tertiary: '#e1ecf7',
+        tertiary: '#e1ecf0',
         accent: '#aecbeb',
         error: '#b71c1c'
       },
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 27bd5bb8..df3a0e48 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 v-container(fluid).pa-0.ma-0
-  v-row.pl-3.pr-3
+  v-row.pa-3
     v-col(cols=3)
       v-card.fixed-filter-panel
         v-card-text
@@ -37,15 +37,13 @@ export default {
 
 <style lang="scss">
 .fixed-filter-panel {
-  margin: 0;
-  padding: 0;
   position: sticky !important;
-  top: 150px;
+  top: 160px;
 }
 
 .v-app-bar--hide-shadow  ~ main .fixed-filter-panel {
   position: sticky !important;
-  top: 40px;
+  top: 25px;
 }
 </style>