diff --git a/package-lock.json b/package-lock.json
index 4a1b6ef32..6e2061173 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "impresso-frontend",
-  "version": "3.0.1",
+  "version": "3.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "impresso-frontend",
-      "version": "3.0.1",
+      "version": "3.0.5",
       "dependencies": {
         "@feathersjs/authentication-client": "5.0.25",
         "@feathersjs/feathers": "5.0.25",
diff --git a/package.json b/package.json
index c76680564..d4b148c0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impresso-frontend",
-  "version": "3.0.1",
+  "version": "3.0.5",
   "description": "Frontend app for impresso project",
   "author": "impresso <info@impresso-project.ch>",
   "contributors": [
diff --git a/src/components/TextReuseExplorerPage.vue b/src/components/TextReuseExplorerPage.vue
index 6f48c76cc..d4c909cbd 100644
--- a/src/components/TextReuseExplorerPage.vue
+++ b/src/components/TextReuseExplorerPage.vue
@@ -12,8 +12,8 @@
               <InfoButton name="text-reuse" class="ml-1" />
             </small>
           </h3>
-          <section class="text-serif TextReuseExplorerPage_summary">
-            <Ellipsis :initialHeight="60" :maxHeight="0">
+          <section class="TextReuseExplorerPage_summary">
+            <Ellipsis class="textbox-fancy text-serif" :initialHeight="60" :maxHeight="0">
               <span v-html="incipit" />
               <SearchQuerySummary
                 v-on:updated="summaryUpdatedHandler"
@@ -25,6 +25,7 @@
                 @item:click="handleAddToCollectionClick"
                 @create="handleAddToCollectionCreate"
                 :title="$t('addTrQueryResultsToCollection')"
+                right
               >
                 <template v-slot:empty>
                   <span class="text-muted d-block">{{ $t('no_collections_found') }}</span>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 6da0f3e89..15abfd18a 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -91,7 +91,7 @@
         >
           <span>{{ $t('collections') }}</span>
         </b-nav-item>
-        <b-nav-item-dropdown
+        <b-dropdown
           v-if="user && jobs.length"
           right
           no-caret
@@ -110,16 +110,20 @@
               </b-badge>
             </transition>
           </template>
-          <div v-if="!jobs.length" class="text-center text-white p-4">
+          <template v-slot:button-icon>
+            <Icon name="chevron" :scale="0.75" :strokeWidth="2" />
+          </template>
+          <div v-if="!jobs.length" class="bg-dark text-center text-white p-4">
             {{ $t('no-jobs-yet') }}
           </div>
           <div v-else class="jobs-list">
             <div class="list">
               <job-item
                 :item="job"
-                class="job px-3 pb-2 mt-2 border-bottom border-dark"
+                class="job px-3 py-2 border-bottom"
                 v-for="(job, i) in jobs"
                 :key="i"
+                style="border-color: var(--clr-grey-200) !important"
               />
             </div>
             <div class="pt-2 pb-1 d-flex justify-content-center">
@@ -135,7 +139,7 @@
               />
             </div>
           </div>
-        </b-nav-item-dropdown>
+        </b-dropdown>
       </b-navbar-nav>
       <!-- user area -->
       <b-navbar-nav v-if="user" class="TheHeader__userArea mx-2">
@@ -667,6 +671,37 @@ export default defineComponent({
     white-space: nowrap;
   }
 }
+
+#TheHeader.bg-dark .dropdown .dropdown-menu {
+  border-color: transparent;
+  background-color: var(--clr-grey-100);
+  color: var(--impresso-color-paper);
+  border-top-left-radius: var(--impresso-border-radius-sm);
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle {
+  display: flex;
+  align-items: center;
+  color: var(--impresso-color-paper);
+  border-color: transparent;
+  padding: 0 var(--spacing-2);
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):hover,
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):focus {
+  background-color: var(--clr-grey-100);
+  border-radius: var(--impresso-border-radius-sm);
+  box-shadow: none;
+}
+#TheHeader.bg-dark .dropdown.show .btn.dropdown-toggle {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+#TheHeader.bg-dark .dropdown-toggle[aria-expanded='true'] {
+  border-bottom: 1px solid var(--clr-grey-100) !important;
+}
 </style>
 
 <i18n lang="json">
@@ -682,7 +717,6 @@ export default defineComponent({
     "label_search": "Search | Search* ({n} filter) | Search* ({n} filters)",
     "label_search_with_items": "Search | Search* ({n} filter, {items}) | Search* ({n} filters, {items})",
     "label_newspapers": "Newspapers",
-    "label_entities": "Entities",
     "label_explore": "explore...",
     "label_topics": "Topics",
     "label_entities": "Entities",
diff --git a/src/components/UserArea.vue b/src/components/UserArea.vue
index 2af533f6a..a73f5e6da 100644
--- a/src/components/UserArea.vue
+++ b/src/components/UserArea.vue
@@ -133,12 +133,15 @@ const userPicture = computed(() => {
 }
 .UserArea.bg-dark.dropdown .btn.dropdown-toggle:not(.disabled):hover,
 .UserArea.bg-dark.dropdown .btn.dropdown-toggle:not(.disabled):focus {
-  background-color: var(--clr-grey-100);
+  /* background-color: var(--clr-grey-100); */
+  border-radius: var(--impresso-border-radius-sm);
+  /* box-shadow: none; */
 }
-
-.UserArea.bg-dark .dropdown-toggle[aria-expanded='true'] {
-  border-bottom: 1px solid var(--clr-grey-100) !important;
+.UserArea.bg-dark.dropdown.show .btn.dropdown-toggle {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
+
 .UserArea__userLabel,
 .UserArea__userLabel .user-fullname,
 .UserArea__userLabel .user-role {
diff --git a/src/components/modules/Pagination.vue b/src/components/modules/Pagination.vue
index a16134c18..d06a1c788 100644
--- a/src/components/modules/Pagination.vue
+++ b/src/components/modules/Pagination.vue
@@ -227,18 +227,19 @@ const goToLast = () => {
   background-color: var(--impresso-color-black);
 }
 .bg-dark .Pagination .pagination {
-  border: 1px solid var(--clr-white);
+  border: 1px solid var(--clr-grey-200);
   border-radius: var(--impresso-border-radius-xs);
   overflow: hidden;
 }
 .bg-dark .Pagination .pagination li.page-item > a,
 .bg-dark .Pagination .pagination li.page-item > .page-link {
   background-color: var(--impresso-color-black);
-  color: var(--clr-white);
-  border-color: var(--clr-white-rgba-20);
+  color: var(--clr-grey-400);
+  border-color: var(--clr-grey-400);
 }
 .bg-dark .Pagination .pagination li.page-item.active > .page-link {
-  background-color: var(--clr-white);
+  background-color: var(--clr-grey-400);
   color: var(--impresso-color-black);
+  border-color: var(--clr-grey-400) !important;
 }
 </style>
diff --git a/src/components/modules/SearchQuerySummary.vue b/src/components/modules/SearchQuerySummary.vue
index 41818a375..2dc4a614e 100644
--- a/src/components/modules/SearchQuerySummary.vue
+++ b/src/components/modules/SearchQuerySummary.vue
@@ -347,7 +347,6 @@ export default {
 
   span.item.newspaper,
   span.item.country {
-    color: black;
     font-family: var(--bs-font-serif);
     font-weight: bold;
     font-weight: var(--impresso-wght-bold);
diff --git a/src/components/modules/collections/AddToCollection.vue b/src/components/modules/collections/AddToCollection.vue
index cbf85cc84..977f0c0e3 100644
--- a/src/components/modules/collections/AddToCollection.vue
+++ b/src/components/modules/collections/AddToCollection.vue
@@ -6,9 +6,15 @@
     v-on:shown="() => (show = true)"
     v-on:hidden="() => (show = false)"
     :text="title"
+    :right="right"
   >
     <div v-if="!isLoggedIn" class="p-2 bg-light">
-      <b-button size="sm" class="w-100" variant="outline-primary" @click="$router.push({ name: 'login' })">
+      <b-button
+        size="sm"
+        class="w-100"
+        variant="outline-primary"
+        @click="$router.push({ name: 'login' })"
+      >
         {{ $t('login') }}
       </b-button>
     </div>
@@ -34,16 +40,15 @@
           or
         </slot> -->
         <!-- Using components -->
-        <div class="input-group input-group-sm p-3">
-
+        <div class="input-group input-group-sm sans p-3">
           <b-form-input v-model="q" placeholder="search collections ..."></b-form-input>
           <div class="input-group-append">
-            <b-button
-              variant="outline-secondary"
+            <button
+              class="btn btn-outline-secondary small btn-sm"
               @click="() => $emit('create', { name: q })"
-              size="sm"
-              >{{ $t('actions.create') }}</b-button
             >
+              {{ $t('actions.create') }}
+            </button>
           </div>
         </div>
       </template>
@@ -54,7 +59,7 @@
           :key="item.uid"
           @click="() => $emit('item:click', item)"
         >
-          <span class="mr-1 text-muted">{{ i + 1 }} of {{ total }}</span>
+          <span class="mr-1 text-muted sans">{{ i + 1 }} of {{ total }}</span>
           <ItemLabel type="collection" :item="item" />
         </div>
         <div v-if="isLoading" class="text-center p-3">
@@ -85,13 +90,17 @@ export default {
   name: 'AddToCollection',
   components: {
     List,
-    ItemLabel,
+    ItemLabel
   },
   props: {
     title: {
       type: String,
-      required: true,
+      required: true
     },
+    right: {
+      type: Boolean,
+      default: false
+    }
   },
   emits: ['item:click', 'create'],
   data() {
@@ -104,7 +113,7 @@ export default {
       q: '',
       total: -1,
       collections: [],
-      isLoading: false,
+      isLoading: false
     }
   },
   computed: {
@@ -116,14 +125,14 @@ export default {
       return {
         currentPage: this.paginationCurrentPage,
         perPage: this.paginationPerPage,
-        totalRows: this.total,
+        totalRows: this.total
       }
     },
     searchApiQueryParameters() {
       if (!this.show) {
         return {
           query: {},
-          hash: '',
+          hash: ''
         }
       }
       const query = {
@@ -131,19 +140,16 @@ export default {
         page: this.paginationCurrentPage,
         limit: this.paginationPerPage,
         orderBy: this.orderBy,
-        q: this.q,
+        q: this.q
       }
       return {
         query,
-        hash: JSON.stringify(query)
-          .split('')
-          .sort()
-          .join(''),
+        hash: JSON.stringify(query).split('').sort().join('')
       }
-    },
+    }
   },
   methods: {
-    loadCollections() {},
+    loadCollections() {}
   },
   watch: {
     searchApiQueryParameters: {
@@ -152,7 +158,7 @@ export default {
         if (!this.show || !this.isLoggedIn) {
           // eslint-disable-next-line
           console.debug(
-            '[AddToCollection] @searchApiQueryParameters \n cannot be loaded now.... not loggedin or dialog not shown',
+            '[AddToCollection] @searchApiQueryParameters \n cannot be loaded now.... not loggedin or dialog not shown'
           )
           return
         }
@@ -178,57 +184,47 @@ export default {
               creationDate: d.creation_date,
               lastModifiedDate: d.last_modified_date,
               countArticles: d.count_articles,
-              ...d,
-            }),
+              ...d
+            })
         )
         this.total = total
         this.isPristine = false
       },
-      immediate: false,
-    },
-  },
+      immediate: false
+    }
+  }
 }
 </script>
-<style lang="scss">
-.AddToCollection {
-  .dropdown-menu {
-    min-width: 300px;
-  }
-  h2 {
-    font-size: inherit;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    font-family: var(--font-family-heading);
-  }
-
-  .items {
-    height: 200px;
-
-    overflow: scroll;
-  }
+<style lang="css">
+.AddToCollection .dropdown-menu {
+  min-width: 300px;
+}
+.AddToCollection .items {
+  max-height: 50vh;
+  overflow: scroll;
 }
 .AddToCollection_item {
   display: block;
   padding: var(--spacing-2) var(--spacing-3);
-
   border-bottom: 1px solid;
-  &:hover {
-    background-color: var(--primary);
-    color: var(--white);
-  }
+  cursor: pointer;
+}
+.AddToCollection_item:hover {
+  background-color: var(--clr-grey-100);
+  color: var(--white);
+}
 
-  &:hover .text-muted {
-    color: var(--white);
-  }
+.AddToCollection_item:hover .text-muted {
+  color: var(--clr-grey-700) !important;
 }
 </style>
 <i18n lang="json">
-  {
-    "en": {
-      "no_collections_found": "No collections found",
-      "actions": {
-        "create": "new..."
-      }
+{
+  "en": {
+    "no_collections_found": "No collections found",
+    "actions": {
+      "create": "new..."
     }
   }
+}
 </i18n>
diff --git a/src/components/modules/lists/JobItem.vue b/src/components/modules/lists/JobItem.vue
index f005a8f89..ff35a40a1 100644
--- a/src/components/modules/lists/JobItem.vue
+++ b/src/components/modules/lists/JobItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="job-item">
-    <h2 class="sans p-0 m-0" style="font-size: 1rem">
+    <h2 class="sans mt-3 mb-1 font-weight-medium font-size-inherit">
       <span
         >{{
           $t(`jobs.type.${item.type}`, {
@@ -17,10 +17,13 @@
             collection_uid: item.extra.collection.id
           }
         }"
-        >{{ item.extra.collection.name }}</router-link
       >
+        {{ item.extra.collection.name }} </router-link
+      ><span class="small-caps ml-2" :class="[item.status]">{{
+        $t(`jobs.status.${item.status}`)
+      }}</span>
     </h2>
-    <div class="date small-caps">{{ $d(item.creationDate, 'precise') }} (#{{ item.id }})</div>
+    <div class="date">{{ $d(item.creationDate, 'precise') }} (#{{ item.id }})</div>
     <div>
       <blockquote v-if="hasSearchQuery" class="pl-2 my-1 border-left">
         <search-query-summary class="m-0" :search-query="{ filters: jobSearchFilters }" />
@@ -30,12 +33,7 @@
       </blockquote>
       <blockquote v-else v-html="item.description" class="pl-2 my-1 border-left small"></blockquote>
 
-      <div>
-        <span class="small-caps" :class="[item.status]">{{
-          $t(`jobs.status.${item.status}`)
-        }}</span>
-        <span class="text-white" v-if="item.isActive()">&nbsp;{{ percentage }} %</span>
-      </div>
+      <div class="text-white number" v-if="item.isRunning()">&nbsp;{{ percentage }} %</div>
       <div class="p-2 position-relative" v-if="item.isRunning()">
         <div class="progress">
           <div
@@ -49,14 +47,8 @@
         </div>
       </div>
     </div>
-    <b-button-group v-if="isExportable || hasSearchQuery">
-      <b-button
-        v-if="isExportable"
-        variant="outline-success"
-        class="mt-2"
-        size="sm"
-        v-on:click="onExport()"
-      >
+    <div class="d-flex justify-content-between" v-if="isExportable || hasSearchQuery">
+      <b-button v-if="isExportable" variant="outline-success" size="sm" v-on:click="onExport()">
         <div class="d-flex align-items-center">
           <div>
             {{ $t('actions.downloadCsv') }}
@@ -67,8 +59,8 @@
       <b-button
         :to="searchPageLink"
         v-if="hasSearchQuery"
-        variant="outline-primary"
-        class="mt-2"
+        variant="transparent"
+        class="text-white"
         size="sm"
       >
         <div class="d-flex align-items-center">
@@ -78,10 +70,10 @@
           <div class="d-flex dripicons dripicons-search ml-2" />
         </div>
       </b-button>
-    </b-button-group>
-    <b-button v-if="item.status === 'RUN'" size="sm" variant="outline-tertiary" @click="stopJob">
-      Stop</b-button
-    >
+      <b-button v-if="item.status === 'RUN'" size="sm" variant="outline-white" @click="stopJob">
+        Stop</b-button
+      >
+    </div>
   </div>
 </template>
 
@@ -162,19 +154,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.progress {
+  background-color: var(--clr-grey-200);
+  border-radius: 0;
+  height: 4px;
+}
 .job {
   color: #c6ccd2;
 }
 blockquote,
 h3,
 h3 a {
-  font-size: 0.9rem;
   color: white;
 }
+blockquote,
+.date {
+  font-size: var(--impresso-font-size-smaller);
+  opacity: 0.65;
+}
 .bg-dark h2 {
   color: inherit;
 }
 
+span.RUN {
+  background-color: var(--clr-grey-200);
+  color: white;
+  padding: 0 4px;
+  border-radius: 2px;
+}
 span.DON {
   background-color: var(--success);
   color: white;
@@ -195,7 +202,6 @@ span.DON {
         "store_collectable_items": "Indexing collection items",
         "TES": "Echo (TEST)",
         "test": "Echo (TEST)",
-        "RDX": "Remove {total} item(s) from your collection",
         "BCQ": "Saving {total} item(s) in your collection",
         "RDX": "Remove {total} item(s) from your collection",
         "execute_solr_query": "Saving items in your collection",
@@ -203,7 +209,7 @@ span.DON {
       },
       "status": {
         "DON": "done",
-        "RUN": "progress",
+        "RUN": "in progress",
         "ERR": "error",
         "STO": "stopped",
         "RIP": "removed"
diff --git a/src/pages/UserRegister.vue b/src/pages/UserRegister.vue
index 7116cdd39..461e019fc 100644
--- a/src/pages/UserRegister.vue
+++ b/src/pages/UserRegister.vue
@@ -6,11 +6,16 @@
           <div class="d-flex align-items-center my-5">
             <div class="colors-wrapper flex-shrink-1">
               <div>
-                <div class="color" v-for="(color, k) in user.colors" v-bind:key="k" :style="getColorBandStyle(color)"></div>
+                <div
+                  class="color"
+                  v-for="(color, k) in user.pattern"
+                  v-bind:key="k"
+                  :style="getColorBandStyle(color)"
+                ></div>
               </div>
             </div>
             <div class="ml-4">
-              <h1 class="user-fullname  m-0 sans font-weight-bold">
+              <h1 class="user-fullname m-0 sans font-weight-bold">
                 {{ userLabel }}
               </h1>
               <div class="user-displayname small-caps">
@@ -23,124 +28,169 @@
           <h1 class="border-bottom border-dark my-3 pb-3 sans">{{ $t('Register') }}</h1>
         </b-col>
       </b-row>
-      <b-alert v-if="featherError" show dismissible fade variant="danger">{{ featherError }}</b-alert>
+      <b-alert v-if="featherError" show dismissible fade variant="danger">{{
+        featherError
+      }}</b-alert>
       <b-row v-if="isCreated">
         <b-col md="6" offset-md="3">
           <p>
             Thank you for completing the first step of the registration.
-            <br/><br/>
+            <br /><br />
             <b>Action required</b>
-            <br/><br/>
-            Next, please download this <a href="https://impresso-project.ch/assets/documents/impresso_NDA.pdf" download>Non-Disclosure Agreement (NDA)</a>,
-            sign it and email it to <a href="mailto:info@impresso-project.ch">info@impresso-project.ch</a>.
-            <br/><br/>
-            Once we have received the signed NDA, your account will be activated within two working days.
+            <br /><br />
+            Next, please download this
+            <a href="https://impresso-project.ch/assets/documents/impresso_NDA.pdf" download
+              >Non-Disclosure Agreement (NDA)</a
+            >, sign it and email it to
+            <a href="mailto:info@impresso-project.ch">info@impresso-project.ch</a>. <br /><br />
+            Once we have received the signed NDA, your account will be activated within two working
+            days.
           </p>
         </b-col>
       </b-row>
       <b-row v-else>
         <b-col md="6" offset-md="3">
-            <form @submit.prevent="onSubmit">
+          <form @submit.prevent="onSubmit">
+            <b-form-group
+              id="input-group-0"
+              label="User Name"
+              label-for="username"
+              :description="v$.user.username.$errors[0]?.$message"
+            >
+              <b-form-input
+                id="username"
+                name="username"
+                required
+                v-model.trim="user.username"
+                :class="{ 'border-danger': v$.user.username.$error }"
+              />
+            </b-form-group>
+            <b-form-group
+              id="input-group-1"
+              label="Email address"
+              label-for="email"
+              :description="v$.user.email.$errors[0]?.$message"
+            >
+              <b-form-input
+                id="email"
+                name="email"
+                autocomplete="home email"
+                :class="{ 'border-danger': v$.user.email.$error }"
+                v-model.trim="user.email"
+              ></b-form-input>
+            </b-form-group>
+            <!-- password -->
+            <b-row>
+              <b-col>
                 <b-form-group
-                  id="input-group-0"
-                  label="User Name"
-                  label-for="username"
-                  :description="v$.user.username.$errors[0]?.$message">
-                  <b-form-input id="username" name="username" required
-                    v-model.trim="user.username"
-                    :class="{'border-danger': v$.user.username.$error }"
-                    />
+                  id="input-group-changepwd-2"
+                  :label="$t('form_password')"
+                  label-for="password"
+                  :description="v$.user.password.$errors[0]?.$message"
+                >
+                  <b-form-input
+                    id="password"
+                    name="password"
+                    v-model.trim="user.password"
+                    type="password"
+                    maxlength="80"
+                    :class="{ 'border-danger': v$.user.password.$error }"
+                  ></b-form-input>
+                </b-form-group>
+              </b-col>
+              <b-col>
+                <b-form-group
+                  id="input-group-changepwd-3"
+                  :label="$t('form_password_repeat')"
+                  label-for="repeat-password"
+                  :description="v$.repeatPassword.$errors[0]?.$message"
+                >
+                  <b-form-input
+                    id="repeat-password"
+                    name="repeat-password"
+                    v-model.trim="repeatPassword"
+                    maxlength="80"
+                    :class="{ 'border-danger': v$.repeatPassword.$error }"
+                    type="password"
+                  />
                 </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
                 <b-form-group
-                  id="input-group-1"
-                  label="Email address"
-                  label-for="email"
-                  :description="v$.user.email.$errors[0]?.$message">
+                  id="input-group-2"
+                  :label="$t('form_firstname')"
+                  label-for="firstname"
+                >
                   <b-form-input
-                    id="email" name="email" autocomplete="home email"
-                    :class="{'border-danger': v$.user.email.$error }"
-                    v-model.trim="user.email"
+                    id="firstname"
+                    name="firstname"
+                    autocomplete="firstname"
+                    v-model.trim="user.firstname"
+                    maxlength="20"
                   ></b-form-input>
                 </b-form-group>
-              <!-- password -->
-                <b-row>
-                  <b-col>
-                    <b-form-group
-                      id="input-group-changepwd-2"
-                      :label="$t('form_password')"
-                      label-for="password"
-                      :description="v$.user.password.$errors[0]?.$message">
-                      <b-form-input
-                        id="password" name="password"
-                        v-model.trim="user.password"
-                        type="password"
-                        maxlength="80"
-                        :class="{'border-danger': v$.user.password.$error }"
-                      ></b-form-input>
-                    </b-form-group>
-                  </b-col>
-                  <b-col>
-                      <b-form-group
-                        id="input-group-changepwd-3"
-                        :label="$t('form_password_repeat')"
-                        label-for="repeat-password"
-                        :description="v$.repeatPassword.$errors[0]?.$message">
-                        <b-form-input
-                          id="repeat-password" name="repeat-password"
-                          v-model.trim="repeatPassword"
-                          maxlength="80"
-                          :class="{'border-danger': v$.repeatPassword.$error }"
-                          type="password" />
-                      </b-form-group>
-                  </b-col>
-                </b-row>
-              <b-row>
-                <b-col>
-                  <b-form-group id="input-group-2" :label="$t('form_firstname')" label-for="firstname">
-                    <b-form-input
-                      id="firstname" name="firstname" autocomplete="firstname"
-                      v-model.trim="user.firstname"
-                      maxlength="20"></b-form-input>
-                  </b-form-group>
-                </b-col>
-                <b-col>
-                  <b-form-group id="input-group-3" :label="$t('form_lastname')" label-for="lastname">
-                    <b-form-input
-                      id="lastname" name="lastname" autocomplete="lastname"
-                      v-model.trim="user.lastname"
-                      maxlength="20"
-                    ></b-form-input>
-                  </b-form-group>
-                </b-col>
-              </b-row>
+              </b-col>
+              <b-col>
+                <b-form-group id="input-group-3" :label="$t('form_lastname')" label-for="lastname">
+                  <b-form-input
+                    id="lastname"
+                    name="lastname"
+                    autocomplete="lastname"
+                    v-model.trim="user.lastname"
+                    maxlength="20"
+                  ></b-form-input>
+                </b-form-group>
+              </b-col>
+            </b-row>
 
-              <b-form-group id="input-group-5" :label="$t('form_displayname')" label-for="displayname">
-                <b-form-input
-                  id="displayname"
-                  v-model.trim="user.displayName"
-                  maxlength="20" />
-              </b-form-group>
+            <b-form-group
+              id="input-group-5"
+              :label="$t('form_displayname')"
+              label-for="displayname"
+            >
+              <b-form-input id="displayname" v-model.trim="user.displayName" maxlength="20" />
+            </b-form-group>
 
-              <div id="input-group-4" :label="$t('form_pattern')" label-for="pattern" class="input-group mb-4">
+            <div
+              id="input-group-4"
+              :label="$t('form_pattern')"
+              label-for="pattern"
+              class="input-group mb-4"
+            >
+              <b-form-input id="pattern" v-model="patternAsText" maxlength="70"> </b-form-input>
+              <div class="input-group-append">
                 <b-form-input
-                  id="pattern"
-                  v-model="patternAsText"
-                  maxlength="70">
-                </b-form-input>
-                <div class="input-group-append">
-                  <b-form-input id="numcolors" type="number" v-model="numColors" min="2" max="10"></b-form-input>
-                  <b-button size="sm" class="text-nowrap" variant="outline-primary" @click="onGeneratePattern">
-                    {{$t('actions.generatePattern')}}
-                  </b-button>
-                </div>
+                  id="numcolors"
+                  type="number"
+                  v-model="numColors"
+                  min="2"
+                  max="10"
+                ></b-form-input>
+                <b-button
+                  size="sm"
+                  class="text-nowrap"
+                  variant="outline-primary"
+                  @click="onGeneratePattern"
+                >
+                  {{ $t('actions.generatePattern') }}
+                </b-button>
               </div>
+            </div>
 
-              <div class="d-flex w-100 mb-3">
-                  <div class="color py-3" v-for="(color, k) in user.colors" v-bind:key="k" :style="getColorBandStyle(color)"></div>
-              </div>
+            <div class="d-flex w-100 mb-3">
+              <div
+                class="color py-3"
+                v-for="(color, k) in user.pattern"
+                v-bind:key="k"
+                :style="getColorBandStyle(color)"
+              ></div>
+            </div>
+            {{ user.pattern }}
 
-              <!-- <ValidationProvider v-if="allowUploadOfNDA" rules="required|ext:jpeg,jpg,gif,png,pdf" v-slot="{ validate, errors }"> -->
-                <!-- <b-form-group
+            <!-- <ValidationProvider v-if="allowUploadOfNDA" rules="required|ext:jpeg,jpg,gif,png,pdf" v-slot="{ validate, errors }"> -->
+            <!-- <b-form-group
                   id="nda"
                   label="Signed NDA"
                   label-for="nda"
@@ -151,27 +201,30 @@
                     NOTE: This code is not used. Implement file upload when needed.
                   </div>
                 </b-form-group> -->
-              <!-- </ValidationProvider> -->
-
-              <b-button size="sm" type='submit' class="mt-2" variant="outline-primary" :disabled="v$.$error || !v$.$anyDirty">{{
-                $t('actions.requestAccount')
-              }}</b-button>
+            <!-- </ValidationProvider> -->
 
-            </form>
+            <b-button
+              size="sm"
+              type="submit"
+              class="mt-2"
+              variant="outline-primary"
+              :disabled="v$.$error || !v$.$anyDirty"
+              >{{ $t('actions.requestAccount') }}</b-button
+            >
+          </form>
         </b-col>
       </b-row>
-
     </b-container>
   </main>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import useVuelidate from '@vuelidate/core';
-import { email, helpers, minLength, required, sameAs } from '@vuelidate/validators';
+import useVuelidate from '@vuelidate/core'
+import { email, helpers, minLength, required, sameAs } from '@vuelidate/validators'
 import { users as usersService } from '@/services'
 import { PasswordRegex, UserRegex } from '@/logic/user'
-import User from '@/models/User';
+import User from '@/models/User'
 
 // extend('required', {
 //   ...required,
@@ -210,12 +263,12 @@ import User from '@/models/User';
 
 const userRegex = helpers.withMessage(
   'Please use only lowercase alpha-numeric characters',
-  (value: string) => UserRegex.exec(value) !=  null
+  (value: string) => UserRegex.exec(value) != null
 )
 
 const complexPassword = helpers.withMessage(
   'Password must contain at least one uppercase letter, one lowercase letter, one number and one special character',
-  (value: string) => PasswordRegex.exec(value) !=  null
+  (value: string) => PasswordRegex.exec(value) != null
 )
 
 export default defineComponent({
@@ -223,7 +276,7 @@ export default defineComponent({
     return { v$: useVuelidate() }
   },
   props: {
-    allowUploadOfNDA: Boolean,
+    allowUploadOfNDA: Boolean
   },
   data: () => ({
     passwordRegex: PasswordRegex,
@@ -235,8 +288,7 @@ export default defineComponent({
       firstname: '',
       lastname: '',
       displayName: 'Researcher',
-      colors: Array(),
-      pattern: Array(),
+      pattern: Array()
     } as User & { password: string },
     isCreated: false,
     isLoading: false,
@@ -244,85 +296,110 @@ export default defineComponent({
     repeatPassword: '',
     errors: [],
     featherError: '',
-    palettes:
-    [
-      '#96ceb4', '#ffeead', '#ffcc5c', '#ff6f69', '#588c7e', '#f2e394', '#f2ae72', '#d96459',
-      '#a9bdc8', '#677e96', '#4a9bb1', '#ccd6e6', '#4f615b', '#3d95a6', '#d3deec', '#3c4b54',
-      '#3e8696', '#dce5f4', '#45535f', '#4a818a', '#b2bdcc', '#2e4051', '#62797d',
-      '#EF476F', '#06D6A0', '#EE6123', '#21295C', '#FA003F', '#00916E'
+    palettes: [
+      '#96ceb4',
+      '#ffeead',
+      '#ffcc5c',
+      '#ff6f69',
+      '#588c7e',
+      '#f2e394',
+      '#f2ae72',
+      '#d96459',
+      '#a9bdc8',
+      '#677e96',
+      '#4a9bb1',
+      '#ccd6e6',
+      '#4f615b',
+      '#3d95a6',
+      '#d3deec',
+      '#3c4b54',
+      '#3e8696',
+      '#dce5f4',
+      '#45535f',
+      '#4a818a',
+      '#b2bdcc',
+      '#2e4051',
+      '#62797d',
+      '#EF476F',
+      '#06D6A0',
+      '#EE6123',
+      '#21295C',
+      '#FA003F',
+      '#00916E'
     ],
-    numColors: 5,
+    numColors: 5
   }),
   computed: {
     userLabel() {
       if (this.user.firstname.length || this.user.lastname.length) {
-        return `${this.user.firstname} ${this.user.lastname}`;
+        return `${this.user.firstname} ${this.user.lastname}`
       }
-      return this.$t('signUp');
+      return this.$t('signUp')
     },
     patternAsText: {
       get() {
         if (this.user) {
-          return this.user.pattern.join(', ');
+          return this.user.pattern.join(', ')
         }
-        return '';
+        return ''
       },
       set(v: string) {
-        this.user.setPattern(v);
+        this.user.pattern = v.split(',').map(v => v.trim())
       }
-    },
+    }
   },
   methods: {
     onSubmit() {
       // console.info('UserRegister#onSubmit()', this.user, this.nda);
       // to be checked for validity...
-      this.featherError = '';
-      this.isLoading = true;
-      usersService.create(this.user)
-        .then((res) => {
-          console.info('UserRegister#onSubmit() success, received:', res);
-          this.isCreated = true;
+      this.featherError = ''
+      this.isLoading = true
+      usersService
+        .create(this.user)
+        .then(res => {
+          console.info('UserRegister#onSubmit() success, received:', res)
+          this.isCreated = true
         })
-        .catch((err) => {
-          console.warn(err);
+        .catch(err => {
+          console.warn(err)
           if (err.code === 409 && err.message.indexOf('auth_user.username') !== -1) {
             this.featherError = this.$t('errors.Conflict.UsernameExistError')
           } else {
-            this.featherError = err.message;
+            this.featherError = err.message
           }
         })
         .finally(() => {
-          this.isLoading = false;
-        });
+          this.isLoading = false
+        })
     },
     onGeneratePattern() {
-      this.user.colors = [];
+      const colors = []
       // let palette = Math.floor(Math.random()*this.palettes.length);
-      for (let i = 0; i < this.numColors; i ++) {
-        const mycolor = this.palettes[Math.floor(Math.random()*this.palettes.length)];
-        this.user.colors.push(mycolor);
+      for (let i = 0; i < this.numColors; i++) {
+        const mycolor = this.palettes[Math.floor(Math.random() * this.palettes.length)]
+        colors.push(mycolor)
       }
-      this.user.pattern = this.user.colors;
+      this.user.pattern = colors
     },
     getColorBandStyle(color: string) {
-      const width = this.user.colors.length ? `${(100 / this.user.colors.length)}%` : '0%';
+      const width = this.user.pattern.length ? `${100 / this.user.pattern.length}%` : '0%'
       return {
         'background-color': color,
-        width,
-      };
-    },
+        width
+      }
+    }
   },
   created() {
-    this.onGeneratePattern();
+    this.onGeneratePattern()
   },
   validations() {
     return {
       user: {
         username: { required, minLength: minLength(4), userRegex, $autoDirty: true }, // required|min:4|userRegex
         email: { required, email, $autoDirty: true }, // required|email
-        password: { minLength: minLength(8), complexPassword, $autoDirty: true }, // min: 8, regex: passwordRegex
+        password: { minLength: minLength(8), complexPassword, $autoDirty: true } // min: 8, regex: passwordRegex
       },
-      repeatPassword: { required, sameAsPassword: sameAs(this.user.password), $autoDirty: true }, // required|confirmed:repeatPassword
+      repeatPassword: { required, sameAsPassword: sameAs(this.user.password), $autoDirty: true } // required|confirmed:repeatPassword
     }
   }
 })
@@ -347,11 +424,11 @@ export default defineComponent({
   }
 }
 
-.user-fullname{
-  font-size:1.5rem;
+.user-fullname {
+  font-size: 1.5rem;
 }
-.user-displayname{
-  font-size:1.25rem;
+.user-displayname {
+  font-size: 1.25rem;
 }
 </style>
 
diff --git a/src/styles/style.css b/src/styles/style.css
index 57f22e4c7..b15cdd871 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -170,7 +170,11 @@ h6.dropdown-header {
   font-weight: 450;
   font-variation-settings: 'wght' 450;
 }
-
+.btn-group-sm > .btn,
+.input-group-sm > .input-group-append > .btn {
+  font-size: var(--impresso-font-size-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+}
 b {
   font-weight: var(--impresso-wght-bold);
   font-variation-settings: 'wght' var(--impresso-wght-bold);
@@ -310,6 +314,12 @@ label {
   background-color: transparent !important;
   border-bottom-color: var(--clr-grey-400) !important;
 }
+
+.btn-outline-white {
+  border-color: var(--clr-white) !important;
+  color: var(--clr-white) !important;
+}
+
 .btn-md {
   border-radius: var(--border-radius-md);
   box-shadow: var(--bs-box-shadow-sm);
@@ -418,6 +428,11 @@ ul.nav.nav-pills .nav-item:hover .nav-link {
 .bg-dark .dropdown-toggle:hover {
   color: var(--white) !important;
 }
+.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):hover,
+.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):focus {
+  background-color: var(--clr-grey-100);
+  box-shadow: none;
+}
 /* Bootstrap Modals */
 .modal {
   z-index: 1041;