diff --git a/packages/client/hmi-client/src/components/home/tera-project-card.vue b/packages/client/hmi-client/src/components/home/tera-project-card.vue
index 2b0e09233b..12e00da17d 100644
--- a/packages/client/hmi-client/src/components/home/tera-project-card.vue
+++ b/packages/client/hmi-client/src/components/home/tera-project-card.vue
@@ -1,27 +1,39 @@
 <template>
 	<Card v-if="project">
 		<template #content>
-			<header class="project-stats">
-				<span title="Contributors"><i class="pi pi-user" /> {{ stats?.contributors }}</span>
-				<span title="Models"><i class="pi pi-share-alt" /> {{ stats?.models }}</span>
+			<header>
+				<span title="Contributors"><i class="pi pi-user" /> {{ stats?.contributors }}</span
+				><span title="Papers"><i class="pi pi-file" /> {{ stats?.papers }}</span>
 				<span title="Datasets"
 					><dataset-icon fill="var(--text-color-secondary)" /> {{ stats?.datasets }}</span
-				>
-				<span title="Papers"><i class="pi pi-file" /> {{ stats?.papers }}</span>
+				><span title="Models"><i class="pi pi-share-alt" /> {{ stats?.models }}</span>
 			</header>
-			<div class="project-img">
+			<div class="img">
 				<img :src="image" alt="Artistic representation of the Project statistics" />
 			</div>
-			<div class="project-title">{{ project.name }}</div>
-			<div class="project-description">{{ project.description }}</div>
-			<div class="project-footer">
-				<span>Last updated {{ formatDdMmmYyyy(project.timestamp) }}</span>
-				<Button
-					icon="pi pi-ellipsis-v"
-					class="p-button-icon-only p-button-text p-button-rounded"
-					@click.stop="showProjectMenu"
-				/>
-			</div>
+			<section>
+				<div class="title" ref="titleRef">
+					{{ project.name }}
+				</div>
+				<section class="details">
+					<div>
+						<div class="author">{{ project.username }}</div>
+						<div class="creation-date">{{ formatDdMmmYyyy(project.timestamp) }}</div>
+					</div>
+					<div class="description">
+						{{ project.description }}
+					</div>
+				</section>
+			</section>
+		</template>
+		<template #footer>
+			<!--FIXME: There is no 'last updated' property in project yet-->
+			<span>Last updated {{ formatDdMmmYyyy(project.timestamp) }}</span>
+			<Button
+				icon="pi pi-ellipsis-v"
+				class="p-button-icon-only p-button-text p-button-rounded"
+				@click.stop="showProjectMenu"
+			/>
 			<Menu ref="projectMenu" :model="projectMenuItems" :popup="true" />
 			<Dialog :header="`Remove ${project.name}`" v-model:visible="isRemoveDialog">
 				<p>
@@ -38,23 +50,23 @@
 	</Card>
 	<Card v-else>
 		<template #content>
-			<header class="project-stats skeleton">
+			<header class="skeleton">
 				<Skeleton height="100%" />
 				<Skeleton height="100%" />
 				<Skeleton height="100%" />
 				<Skeleton height="100%" />
 			</header>
-			<div class="project-img skeleton">
+			<div class="img skeleton">
 				<Skeleton height="100%" />
 			</div>
-			<div class="project-description skeleton">
+			<div class="description skeleton">
 				<Skeleton />
 				<Skeleton />
 				<Skeleton width="60%" />
 			</div>
-			<div class="project-footer skeleton">
-				<Skeleton />
-			</div>
+		</template>
+		<template #footer>
+			<Skeleton />
 		</template>
 	</Card>
 </template>
@@ -78,6 +90,17 @@ const emit = defineEmits<{
 	(e: 'removed', projectId: Project['id']): void;
 }>();
 
+const titleRef = ref();
+const descriptionLines = computed(() => {
+	const titleHeight = titleRef.value?.clientHeight;
+	for (let i = 1; i < 3; i++) {
+		if (titleHeight === 17 * i) {
+			return 10 - i;
+		}
+	}
+	return 7;
+});
+
 const stats = computed(() =>
 	!props.project
 		? null
@@ -124,7 +147,16 @@ const removeProject = async () => {
 	height: 20rem;
 }
 
-.project-stats {
+.p-card:deep(.p-card-body) {
+	height: 100%;
+	overflow: hidden;
+	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+header {
 	color: var(--text-color-secondary);
 	display: flex;
 	justify-content: space-between;
@@ -132,22 +164,28 @@ const removeProject = async () => {
 	vertical-align: bottom;
 }
 
-.project-stats span {
+header span {
 	display: flex;
 	gap: 0.1rem;
 	align-items: center;
 }
 
-.pi {
-	vertical-align: bottom;
-}
-
-.project-stats.skeleton {
+header.skeleton {
 	gap: 1rem;
 	height: 17px;
 }
 
-.project-img {
+section {
+	display: flex;
+	gap: 0.5rem;
+	flex-direction: column;
+}
+
+.pi {
+	vertical-align: bottom;
+}
+
+.img {
 	height: 8.75rem;
 	background-color: var(--surface-ground);
 	border-radius: var(--border-radius-big);
@@ -156,62 +194,90 @@ const removeProject = async () => {
 	margin: 0.5rem 0 0.5rem 0;
 }
 
-.project-img img {
+.img img {
 	height: 100%;
 	width: 100%;
 	border-radius: var(--border-radius-big);
 }
 
-.project-img.skeleton {
+.img.skeleton {
 	background-color: transparent;
 }
 
-.p-card:hover .project-img:not(.skeleton) {
+.p-card:hover .img:not(.skeleton) {
 	opacity: 0;
 	height: 0;
 }
 
-.project-title {
-	display: inline-block;
-	height: 3.75rem;
+.title,
+.description {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
 	overflow: hidden;
+}
+
+.title {
 	font-weight: var(--font-weight-semibold);
+	-webkit-line-clamp: 3;
 }
 
-.project-title.skeleton {
+.description {
+	-webkit-line-clamp: v-bind('descriptionLines');
+}
+
+.p-card-footer.skeleton,
+.title.skeleton {
 	height: 100%;
 }
 
-.project-description:not(.skeleton) {
+.details:not(.skeleton) {
 	overflow: hidden;
 	opacity: 0;
 	height: 0;
-	transition: opacity 0.3s ease, height 0.3s ease;
+	transition: opacity 0.5s ease, height 0.3s ease;
 	color: var(--text-color-secondary);
+	font-size: var(--font-caption);
 }
 
-.p-card:hover .project-description:not(.skeleton) {
+.p-card:hover .details:not(.skeleton) {
 	opacity: 100;
-	height: 8.75rem;
+	height: auto;
+}
+
+.author {
+	color: var(--text-color-primary);
+	font-weight: var(--font-weight-semibold);
 }
 
-.project-description.skeleton {
+.description.skeleton {
 	display: flex;
 	flex-direction: column;
 	row-gap: 0.5rem;
 }
 
-.project-footer {
-	height: 3rem;
+.p-card:deep(.p-card-footer) {
 	align-items: center;
+	padding: 0 0 0.5rem 0;
+	height: 3rem;
+	background-color: rgba(255, 255, 255, 0.85);
 	display: flex;
 	justify-content: space-between;
 	color: var(--text-color-secondary);
-	padding-top: 0.5rem;
 	font-size: var(--font-caption);
+	position: absolute;
+	bottom: 0;
+	width: calc(100% - 2rem);
+}
+.p-card .p-card-footer .p-button-icon-only {
+	visibility: hidden;
+}
+
+.p-card:hover .p-card-footer .p-button-icon-only {
+	visibility: visible;
 }
 
-.project-footer.skeleton {
+.p-card-footer.skeleton {
 	align-items: flex-end;
 }