diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index bd5c6847ec762c895b35d46ff0331cf8e436379a..67aed76d8796f35492fb6e3ea20a031a1ed6a653 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -100,6 +100,7 @@ $orange-button-bt: #FA772E;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 18px;
+  color: $link-color;
 }
 
 .remove-link {
diff --git a/templates/capsule/index.html.twig b/templates/capsule/index.html.twig
index 1442cfc6683a2c0a462a37091ec56f55dee2aa61..f73129ba38e46267ef11dd3b494c19dea4412dc7 100644
--- a/templates/capsule/index.html.twig
+++ b/templates/capsule/index.html.twig
@@ -50,9 +50,9 @@
         <div class="capsule-item pb-4 col-12 col-sm-11 col-md-10 col-xxl-8">
             <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
                 <div class="list-item">
-                    <a href="{{ path('preview_capsule', { 'path': capsule.getLinkPath() } ) }}" class="capsule-title">
+                    <div class="capsule-title">
                         {{ capsule.getName() }}
-                    </a>
+                    </div>
                 </div>
                 <div class="list-item text-capitalize">
                     {{ 'capsule.by'|trans }}
@@ -71,8 +71,16 @@
                     {% endif %}
                 </div>
 
-            <div class="d-flex flex-column justify-content-center m-2 pe-2">
-                <i class="fa-thin fa-gears"></i>
+                <div class="d-flex flex-column justify-content-center m-2 pe-2">
+                    <div class="list-item text-nowrap">
+                        <a href="{{ path('preview_capsule', { 'path': capsule.getLinkPath() }) }}"
+                           class="links text-decoration-none"
+                           target="_blank">
+                            <i class="fas fa-eye m-2"></i>
+                            {{ 'capsule.preview.link'|trans }}
+                        </a>
+                    </div>
+
 
                     <div class="list-item text-nowrap">
                         <a href="{{ path('edit_capsule_editors', {'capsule_id': capsule.getId()}) }}"
@@ -123,6 +131,8 @@
                             {{ 'capsule.edit.link'|trans }}
                         </button>
                     </a>
+
+
                 </div>
             </div>
         </div>
diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
index 5f8c70aaf921e2947681a5c5c8930c06550fdfa1..bc361dc7c450aa8282f921910c4af1cf42b6fddd 100644
--- a/translations/messages.en.yaml
+++ b/translations/messages.en.yaml
@@ -92,6 +92,8 @@ capsule:
     text: Do you really want to delete the capsule %capsule_name%?
     success: Capsule capsule_name was deleted successfully
     error: You don't have the permission to delete this capsule
+  preview:
+    link: Preview
 
 project:
   already_exists: Project capsule_name already exists so the capsule could not be created
diff --git a/translations/messages.fr.yaml b/translations/messages.fr.yaml
index e1dfd746d9fadcc43f556343825474b51089c558..1df283260a7c5c7c280d0b4557078cb83a90c04e 100644
--- a/translations/messages.fr.yaml
+++ b/translations/messages.fr.yaml
@@ -91,6 +91,8 @@ capsule:
     text: Souhaitez-vous vraiment supprimer la capsule %capsule_name% ?
     success: La capsule capsule_name a bien été supprimée
     error: Vous n'avez pas les droits nécessaires pour supprimer cette capsule
+  preview:
+    link: Visualiser
 
 project:
   already_exists: Le projet capsule_name existe déjà. La capsule n'a pas pu être créée