diff --git a/static/css/style.css b/static/css/style.css
index 9ac99d7..6962e61 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -141,15 +141,28 @@ blockquote {
   line-height: 1em;
 }
 
-.step-imgs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
+.step-section {
+  background-color: var(--primary-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
+  padding: 1.5rem;
 }
 
-.step-imgs img {
-  max-width: 300px;
+.step-header h2 {
+  font-size: 2em;
+  color: var(--heading-color);
+}
+
+.step-images img,
+.step-videos video,
+.step-iframes iframe {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.step-text {
+  font-size: 1.1em;
 }
 
 .reply-button,
@@ -288,4 +301,23 @@ header {
 
 .navbar-logo {
   height: 64px;
+}
+
+.img-fluid {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+video {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+iframe {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.text-muted {
+  color: #6c757d !important;
 }
\ No newline at end of file
diff --git a/templates/article.html b/templates/article.html
index 08ace40..ecf39da 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -1,116 +1,87 @@
 {% extends "base.html" %} {% block content %}
-<center>
-  <h1>{{ title }}</h1>
+<div class="container my-5">
+  <div class="header-section text-center mb-5">
+    <h1 class="display-4">{{ title }}</h1>
+    <p class="text-muted">
+      by
+      <a href="{{ author_link }}" class="text-decoration-none">{{ author }}</a>
+      in
+      <a href="{{ category_link }}" class="text-decoration-none"
+        >{{ category }}</a
+      >
+      &gt;
+      <a href="{{ channel_link }}" class="text-decoration-none"
+        >{{ channel }}</a
+      >
+    </p>
+    <p class="text-muted">
+      {{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
+    </p>
+  </div>
 
-  <p>
-    by <a href="{{ author_link }}">{{ author }}</a> in
-    <a href="{{ category_link }}">{{ category }}</a> &gt;
-    <a href="{{ channel_link }}">{{ channel }}</a>
-  </p>
-  <p>
-    {{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
-  </p>
-</center>
-
-<div class="container">
   {% for step in steps %}
-    <div class="row mb-6">
-      <div class="col-12">
-        <h2>{{ step.title }}</h2>
-      </div>
+  <section class="step-section mb-5 p-4 rounded shadow-sm">
+    <div class="step-header mb-4">
+      <h2>{{ step.title }}</h2>
     </div>
 
     {% if step.imgs %}
-    <div class="row mb-3 justify-content-center">
+    <div class="step-images row mb-4">
       {% for step_img in step.imgs %}
-        <div class="col-md-3">
-          <img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
-        </div>
+      <div class="col-md-4 mb-3">
+        <img
+          src="{{ step_img.src }}"
+          alt="{{ step_img.alt }}"
+          class="img-fluid rounded shadow-sm"
+        />
+      </div>
       {% endfor %}
     </div>
-    {% endif %}
-
-    {% if step.videos %}
-    <div class="row mb-3 justify-content-center">
+    {% endif %} {% if step.videos %}
+    <div class="step-videos row mb-4">
       {% for step_video in step.videos %}
-        <div class="col-md-3">
-          <video src="{{ step_video }}" controls class="w-100"></video>
-        </div>
+      <div class="col-md-6 mb-3">
+        <video
+          src="{{ step_video }}"
+          controls
+          class="w-100 rounded shadow-sm"
+        ></video>
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %} {% if step.iframes %}
+    <div class="step-iframes row mb-4">
+      {% for step_iframe in step.iframes %}
+      <div class="col-md-8 mb-3">
+        <iframe
+          src="{{ step_iframe.src }}"
+          width="100%"
+          height="{{ step_iframe.height }}"
+          frameborder="0"
+          class="rounded shadow-sm"
+        ></iframe>
+      </div>
       {% endfor %}
     </div>
     {% endif %}
 
-    {% if step.iframes %}
-    <div class="row mb-3 justify-content-center">
-      {% for step_iframe in step.iframes %}
-        <div class="col-md-3 mb-3">
-          <iframe src="{{ step_iframe.src }}" width="100%" height="{{ step_iframe.height }}"></iframe>
-        </div>
-      {% endfor %}
-    </div>
-    {% endif %}
+    <div class="step-text mb-3">{{ step.text|safe }}</div>
 
     {% if step.downloads %}
-    <div class="row">
+    <div class="step-downloads row mb-4">
       <div class="col-12">
         <h3>Downloads</h3>
       </div>
       {% for step_download in step.downloads %}
-        <div class="col-md-2 mb-3">
-          <a href="{{ step_download.src }}" class="btn btn-primary">{{ step_download.name }}</a>
-        </div>
+      <div class="col-md-2 mb-3">
+        <a href="{{ step_download.src }}" class="btn btn-primary w-100"
+          >{{ step_download.name }}</a
+        >
+      </div>
       {% endfor %}
     </div>
     {% endif %}
-
-    <div class="row">
-      <div class="col-12 mb-3 wrap">
-        {{ step.text|safe }}
-      </div>
-    </div>
-  {% endfor %}
-</div>
-
-
-    <br />
-    {% for index, comment in enumerate(comments) %}
-    <!-- TODO: Fix comments -->
-    <a href="{{ comment[4] }}">
-      <img
-        style="display: inline-block"
-        width="30px"
-        height="30px"
-        src="{{ comment[1] }}"
-        alt="{{ comment[2] }}"
-      />
-      <span>{{ comment[3] }}</span>
-    </a>
-    <span>{{ comment[5] }}</span>
-    <span>{{ comment[0] }} votes</span>
-    {{ comment[6]|safe }}
-    <input type="checkbox" id="replies{{ index }}" class="reply-button" />
-    <label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
-    <div class="replies">
-      {% for reply in comment[8] %}
-      <blockquote>
-        <a href="{{ reply[4] }}">
-          <img
-            style="display: inline-block"
-            width="30px"
-            height="30px"
-            src="{{ reply[1] }}"
-            alt="{{ comment[2] }}"
-          />
-          <span>{{ reply[3] }}</span>
-        </a>
-        <span>{{ reply[5] }}</span>
-        <span>{{ reply[0] }} votes</span>
-        {{ reply[6]|safe }}
-      </blockquote>
-      {% endfor %}
-    </div>
-    <br />
-  </div>
+  </section>
   {% endfor %}
 </div>
 {% endblock %}