diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html
index 4bac13e..8c601a9 100644
--- a/src/app/components/card/card.component.html
+++ b/src/app/components/card/card.component.html
@@ -1,56 +1,50 @@
-<mat-card class="card" [class.public]="publicOrg" [style.borderTopColor]="card?.color" style="border-top: 3px solid;">
-    <mat-card-header class="header">
-
-        <mat-icon mat-card-avatar matTooltip="{{'Private' | translate}}" *ngIf="this.status === 'private'" >lock</mat-icon>
-        <mat-icon mat-card-avatar matTooltip="{{'Public' | translate}}" *ngIf="this.status === 'public'" >public</mat-icon>
-        <mat-icon mat-card-avatar matTooltip="{{'Shared' | translate}}" *ngIf="this.status === 'shared'" >groups</mat-icon>
-        <mat-card-title (click)="clickOnAction(action.VIEW)" matTooltip="{{'View' | translate}}&nbsp;{{card?.title}}" [matTooltipPosition]="'above'">
-            {{card?.title}}
-        </mat-card-title>
-        <mat-card-subtitle class="subtitle">{{ 'Last update' | translate }} : {{card?.last_update_date | date}}</mat-card-subtitle>
-        <arlas-config-menu #configMenu class="config-menu" matTooltip="{{'Menu' | translate}}" [zone]="'config.json'"
-            [actions]="card?.actions" (actionExecutedEmitter)="afterAction($event)"></arlas-config-menu>
-    </mat-card-header>
+<mat-card  class="card mat-elevation-z1">
+    <div (click)="clickOnAction(action.VIEW)" class="card_preview" [class.no-preview]="card?.preview === 'assets/no_preview.png'">
+        <div class="preview_info">
+            <div class="info_item">
+                <mat-icon matTooltip="{{'Private' | translate}}" *ngIf="this.status === 'private'" >lock</mat-icon>
+                <mat-icon matTooltip="{{'Public' | translate}}" *ngIf="this.status === 'public'" >public</mat-icon>
+                <mat-icon matTooltip="{{'Shared' | translate}}" *ngIf="this.status === 'shared'" >share</mat-icon>
+            </div>
+            <div [matTooltip]="card?.organisation" [matTooltipPosition]="'below'" class="info_item organisation" *ngIf="!!card.organisation && card.organisation !== NO_ORGANISATION && publicOrg">
+                <mat-icon>groups</mat-icon>
+                <div class="text-ellipsis">
+                    {{card?.organisation}}
+                </div>
 
-    <div class="preview" [class.no-preview]="card?.preview === 'assets/no_preview.png'">
-        <div class="highlights" *ngIf="card?.tabs.length > 0">
-            <div class="section_title">{{ 'Highlights' | translate}}</div>
-            <div *ngFor="let tab of card?.tabs" class="highlight">
-                ⇾ {{tab}}
             </div>
         </div>
-        <div class="highlights" *ngIf="card?.tabs.length === 0">
-            <div class="section_title">{{ 'No Highlights' | translate}}</div>
-        </div>
+        <div class="preview_holder"></div>
         <ng-container *ngIf="card?.preview$ | async | json_to_preview; let preview; else notPreview">
-            <img src="{{preview}}" class="image" />
+            <img src="{{preview}}" class="preview_image" />
         </ng-container>
         <ng-template #notPreview>
-            <img src="assets/no_preview.png" class="image" />
+            <img src="assets/no_preview.png" class="preview_image" />
         </ng-template>
     </div>
-    <div class="groups">
-        <div *ngIf="!!card.organisation && card.organisation !== NO_ORGANISATION && publicOrg">
-            <div class="section_title">{{ 'Organisation' | translate}}</div>
-            <mat-chip-list>
-                <mat-chip class="organisation" >{{card?.organisation}}</mat-chip>
-            </mat-chip-list>
-        </div>
-        <div class="readers">
-            <div class="section_title">{{ 'Readers' | translate}}</div>
-            <mat-chip-list>
-                <mat-chip *ngIf="card?.readers.length === 0" class="group"> -- </mat-chip>
-                <mat-chip *ngFor="let reader of readers" class="group" [class.mygroup]="reader.in">{{reader.name}}</mat-chip>
-            </mat-chip-list>
+    <mat-card-content class="card_meta">
+        <div class="meta_title-container">
+            <div class="meta_title text-ellipsis" matTooltip="{{'View' | translate}}&nbsp;{{card?.title}}" [matTooltipPosition]="'above'"> {{card?.title}}</div>
+            <arlas-config-menu #configMenu class="config-menu" matTooltip="{{'Menu' | translate}}" [zone]="'config.json'"
+                               [actions]="card?.actions" (actionExecutedEmitter)="afterAction($event)"></arlas-config-menu>
         </div>
-        <div class="writers">
-            <div class="section_title">{{ 'Writers' | translate}}</div>
-            <mat-chip-list>
-                <mat-chip *ngIf="card?.writers.length === 0" class="group"> -- </mat-chip>
-                <mat-chip *ngFor="let writer of writers" class="group" [class.mygroup]="writer.in">{{writer.name}}</mat-chip>
-            </mat-chip-list>
-        </div>
-    </div>
-
+        <mat-card-subtitle class="meta_subtitle">{{ 'Last update' | translate }} : {{card?.last_update_date | date}}</mat-card-subtitle>
 
+        <mat-chip-list class="card_right">
+            <mat-chip *ngIf="rights.length === 0" class="group"> -- </mat-chip>
+            <ng-container *ngFor="let r of rights" >
+                <mat-chip
+                    *ngIf="r.right ==='writer'"
+                    matTooltip="{{'writing' | translate}}"
+                    [matTooltipPosition]="'above'"  class="group" [class.group--mine]="r.in">
+                    <mat-icon>edit</mat-icon> {{r.name}}
+                </mat-chip>
+                <mat-chip *ngIf="r.right ==='reader'"
+                          matTooltip="{{'reading' | translate}}" [matTooltipPosition]="'above'"
+                          class="group" [class.group--mine]="r.in">
+                    <mat-icon>visibility</mat-icon> {{r.name}}
+                </mat-chip>
+            </ng-container>
+        </mat-chip-list>
+    </mat-card-content>
 </mat-card>
diff --git a/src/app/components/card/card.component.scss b/src/app/components/card/card.component.scss
index 1a8de30..cd61ab2 100644
--- a/src/app/components/card/card.component.scss
+++ b/src/app/components/card/card.component.scss
@@ -16,163 +16,160 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+
+@import "variables";
+
+:host {
+    flex: 1 1 auto;
+    display: block;
+    max-width: 384px;
+    min-width: 200px;
+}
+
 .card {
-    max-width: 280px;
-    min-width: 280px;
-    border-radius: 0px;
+
+    border-radius: 4px;
     color: black;
     min-height: 50px;
-    padding: 16px 0;
+    padding: 0;
     overflow: hidden;
-    height: 290px;
-    box-shadow: none;
-
-    &.public {
-        height: 340px;
+    height: 100%;
+    &_config-menu{
+        position: absolute;
     }
 
-    @mixin group() {
-        color: #666;
-        font-size: 0.65em;
-        min-height: 20px;
-        padding: 10px 8px;
+    &_preview {
+        max-width: 100%;
+        height: 150px;
+        position: relative;
     }
 
-    .header {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 10px;
-
-        ::ng-deep .mat-card-header-text {
-            margin: 0;
-            width: 175px;
-        }
-
-        .mat-card-avatar {
-            font-size: 28px;
-        }
+    &_meta{
+        padding: 6px;
+    }
 
-        ::ng-deep .mat-card-title {
-            font-weight: 400;
-            cursor: pointer;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            font-size: 18px;
-        }
+    &_right{
+        margin-top: 4px;
+    }
+}
 
-        ::ng-deep .mat-card-title:hover {
-            text-decoration: underline;
-        }
+.group {
+    color: #6D6565;
+    background: #F1F1F1;
+    min-height: 24px;
+    padding: 12px 8px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .mat-icon {
+        height: $group-icon-size;
+        width: $group-icon-size;
+        font-size: $group-icon-size;
+    }
 
-        .subtitle {
-            font-size: 0.65rem;
-        }
 
-        .config-menu {
-            margin-top: -8px;
-            margin-right: -8px;
-        }
+    &--mine {
+        font-weight: bold;
     }
+}
 
-    .preview {
-        max-width: 280px;
-        height: 140px;
-
-        .image {
-            width: 100%;
-            background-color: rgb(211, 211, 211);
-            object-fit: cover;
-            max-width: 100%;
-            max-height: 100%;
-            width: 100%;
-            height: 100%;
+.preview {
+    &_holder {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        &:hover{
+            cursor: pointer;
+            background: rgba(96, 96, 96, 0.55);
+            transition: background-color 300ms ease;
         }
+    }
+    &_image {
+        width: 100%;
+        background-color: rgb(211, 211, 211);
+        object-fit: cover;
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+    }
 
-        &:hover {
-            .highlights {
-                display: block;
-                position: absolute;
-                padding: 5px 10px;
-                height: 140px;
-                width: 260px;
-                background-color: rgba(255, 255, 255, 0.55);
-                overflow: hidden;
-
-                .highlight {
-                    font-style: italic;
-                    font-size: 0.8em;
-                }
-            }
-        }
+    &_info {
+        display: flex;
+        position: absolute;
+        top: $sm-margin;
+        left: $sm-margin;
+        height: 20px;
+        gap: 6px;
+        z-index: 1;
+    }
+}
 
-        &.no-preview {
-            .image {
-                opacity: 0.5;
-            }
-
-            &:hover {
-                .highlights {
-                    height: 140px;
-                    background-color: rgba(255, 255, 255, 0.8);
-                }
-
-                .image {
-                    opacity: 1;
-                }
-            }
-        }
+.meta {
+    &_title {
+        font-weight: 400;
+        font-size: 20px;
+    }
+    &_subtitle {
+        font-size: .75rem;
+        font-style: italic;
     }
 
-    .section_title {
-        font-variant: small-caps;
+    &_title-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
     }
+}
 
-    .groups {
-        margin-bottom: 5px;
-        /*border-bottom: 1px solid #999;*/
-        padding: 5px 10px 0;
+.info_item {
+    background: #F0F0F0;
+    padding: 4px;
+    height: 20px;
+    text-align: center;
+    border-radius: 4px;
+    font-weight: 600;
+}
 
-        ::ng-deep .mat-chip-list-wrapper {
-            margin: 0 -4px;
-        }
+.organisation {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 200px;
 
-        .organisation {
-            color: rgba(0, 0, 0, 0.9);
-            font-size: 0.7em;
-            min-height: 24px;
-            padding: 12px 8px;
-            background-color: white;
-            border: 1px solid rgba(0, 0, 0, 0.9);
-        }
+    & mat-icon {
+        flex: 1 0 auto;
+    }
+}
 
-        .group {
-            @include group();
+.text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
 
-            &.mygroup {
-                background-color: #959595;
-                color: white;
-            }
-        }
+
+/* Medium devices such as tablets (768px and up)*/
+@media only screen and (min-width: 768px) {
+    .card {
+        max-width: 350px;
+        min-width: 350px;
     }
+}
 
-    .highlights {
-        display: none;
+/* Large devices such as laptops (1024px and up)*/
+@media only screen and (min-width: 1024px) {
+    .card {
+        max-width: 364px;
+        min-width: 364px;
     }
+}
 
-    .footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        padding: 0 5px 1px 0;
-        right: 0;
-
-        .date {
-            font-size: 0.75em;
-            color: rgba(0, 0, 0, 0.55);
-        }
+/* Largest devices such as desktops (1280px and up)*/
+@media only screen and (min-width: 1280px) {
+    .card {
+        max-width: 384px;
+        min-width: 384px;
     }
 }
diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts
index eb8f6d6..f8583da 100644
--- a/src/app/components/card/card.component.ts
+++ b/src/app/components/card/card.component.ts
@@ -16,11 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Component, Input, Output, AfterViewInit, ViewChild, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { ConfigActionEnum, ConfigMenuComponent, NO_ORGANISATION } from 'arlas-wui-toolkit';
 import { Subject } from 'rxjs';
 import { Card } from '../../services/card.service';
-import { ArlasColorService } from 'arlas-web-components';
 
 
 export enum Action {
@@ -36,6 +35,12 @@ export interface CardAction {
     action?: Action;
 }
 
+export interface CardRights {
+    name: string;
+    in: boolean;
+    right: 'reader' | 'writer';
+}
+
 @Component({
     selector: 'arlas-card',
     templateUrl: './card.component.html',
@@ -43,41 +48,48 @@ export interface CardAction {
 })
 export class CardComponent implements AfterViewInit, OnInit {
 
-    @ViewChild('configMenu', { static: false }) public configMenu: ConfigMenuComponent;
+    @ViewChild('configMenu', {static: false}) public configMenu: ConfigMenuComponent;
     @Input() public card: Card;
     @Input() public userGroups: string[] = [];
     @Input() public publicOrg = false;
     @Output() public actionOnCard: Subject<CardAction> = new Subject<CardAction>();
 
     public action = Action;
-    public collectionColor = '#000000';
     public status = 'private';
     public NO_ORGANISATION = NO_ORGANISATION;
 
-    public readers: Array<{ name: string; in: boolean; }> = [];
-    public writers: Array<{ name: string; in: boolean; }> = [];
+    public rights: Array<CardRights> = [];
 
-    public constructor(
-        private colorService: ArlasColorService
-    ) {
+    public constructor() {
     }
+
     public ngOnInit(): void {
-        if (!!this.card) {
-            this.readers = this.card.readers.map(g => ({
-                name: g.name,
-                in: this.userGroups.indexOf(g.name) > -1
-            }));
-            this.writers = this.card.writers.map(g => ({
+        if (Boolean(this.card)) {
+            this.initDashboardWright();
+            this.initDashboardVisibility();
+        }
+    }
+
+    public initDashboardWright() {
+        const writers: CardRights[] = this.card.writers.map(g => ({
+            name: g.name,
+            in: this.userGroups.indexOf(g.name) > -1,
+            right: 'writer'
+        }));
+
+        const readers: CardRights[] = this.card.readers
+            .filter(g => !writers.find(w => w.name === g.name))
+            .map(g => ({
                 name: g.name,
-                in: this.userGroups.indexOf(g.name) > -1
+                in: this.userGroups.indexOf(g.name) > -1,
+                right: 'reader'
             }));
 
-            this.status = this.card.isPublic ? 'public'
-                : (this.readers.length === 0 && this.writers.length === 0) ? 'private'
-                    : 'shared';
-            this.collectionColor = this.colorService.getColor(this.card.collection);
-        }
+        this.rights = [...writers, ...readers];
+    }
 
+    public initDashboardVisibility() {
+        this.status = this.card.isPublic ? 'public' : (this.rights.length === 0) ? 'private' : 'shared';
     }
 
     public ngAfterViewInit() {
diff --git a/src/variables.scss b/src/variables.scss
index 2792d9f..49af6c8 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -25,3 +25,4 @@ $left-menu-width: 48px;
 $menu-border: solid 1px #dadada;
 $default-font-size: 20px;
 $sm-margin: 5px;
+$group-icon-size: 16px;