diff --git a/WSR/static/scss/app.scss b/WSR/static/scss/app.scss
index 7e8320d668a814e6396ff7d5480c5fb3a8f3c192..1e70f0549bfa771d024857af333ffa399deb288a 100644
--- a/WSR/static/scss/app.scss
+++ b/WSR/static/scss/app.scss
@@ -69,6 +69,11 @@ body {
   backdrop-filter: blur(8px);
 }
 
+a {
+  color: $red;
+  text-decoration: none;
+}
+
 // Other
 header {
   display: flex;
@@ -88,4 +93,19 @@ header {
     width: auto;
     height: auto;
   }
+}
+
+.article-container {
+  .meta {
+    color: $dark-gray;
+    font-size: 0.9rem;
+  }
+
+  .article-content {
+    margin-top: map-get($spacers, 5);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @extend .eurostile;
+  }
 }
\ No newline at end of file
diff --git a/WSR/static/scss/components.scss b/WSR/static/scss/components.scss
index c516308763515bf1eed81692c649ee8711580325..17b30f014318f86f24ab0a52602152e63eb8d747 100644
--- a/WSR/static/scss/components.scss
+++ b/WSR/static/scss/components.scss
@@ -180,6 +180,12 @@
   display: flex;
   flex-direction: column;
   width: 332px;
+  text-decoration: none;
+  color: $black;
+
+  &:hover {
+    color: $red;
+  }
 
   .header {
     display: flex;
@@ -215,11 +221,6 @@ footer {
   padding-bottom: 24px;
   border-top: 4px solid $dark-gray;
   color: $light-gray;
-
-  a {
-    color: $red;
-    text-decoration: none;
-  }
 }
 
 .cars-showcase {
diff --git a/WSR/templates/article.html b/WSR/templates/article.html
new file mode 100644
index 0000000000000000000000000000000000000000..d94b44b1ae9cc368578ad81f8097eb99dc8c5fe0
--- /dev/null
+++ b/WSR/templates/article.html
@@ -0,0 +1,21 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}WSR - {{ article.title }}{% endblock %}
+
+{% block content %}
+    <div class="container mt-4">
+        <div class="p-4 bg-white article-container">
+            <h4>{{ article.title }}</h4>
+            <div class="meta">
+                <span>Publié par </span><a href="#">WSR CM</a> le {{ article.publication_date|date:"d/m/Y" }}
+            </div>
+
+            <div class="article-content">
+                {% autoescape off %}
+                    {{ article.content }}
+                {% endautoescape %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/WSR/templates/home.html b/WSR/templates/home.html
index dfc90b05f96a4c047bb0c3aacf62a3fc1e3e6dcc..573246c0f4a2683287b9b41f1475525bd847d0c3 100644
--- a/WSR/templates/home.html
+++ b/WSR/templates/home.html
@@ -69,7 +69,7 @@
 
                 <div class="news-cards">
                     {% for article in six_last_articles %}
-                        <div class="news-card">
+                        <a class="news-card" href="{% url 'article' id=article.id %}">
                             <div class="header">
                                 <div class="logo">
                                     <img src="{% static 'images/WSR.png' %}" alt="Logo WSR">
@@ -79,7 +79,7 @@
                                 <div class="eurostile">{{ article.title }}</div>
                                 <div class="desc">{{ article.summary }}</div>
                             </div>
-                        </div>
+                        </a>
                     {% endfor %}
                 </div>
                 <div class="d-flex justify-content-end">
diff --git a/WSR/views.py b/WSR/views.py
index d86d7e38419c1cd766532250030de573fc2639f8..fbad81c5d35154b8a9b49555bebc49c45f6e3550 100644
--- a/WSR/views.py
+++ b/WSR/views.py
@@ -65,8 +65,16 @@ def home(request):
 
 
 def view_article(request, id):
-    article = Article.objects.get(id)
-    return None
+    article = Article.objects.get(id=id)
+    md = markdown.Markdown()
+    article.content = md.convert(article.content)
+    return render(
+        request,
+        'article.html',
+        {
+            "article": article
+        }
+    )
 
 
 def races_types(request):