diff --git a/src/assets/scss/components/_alert.scss b/src/assets/scss/components/_alert.scss
index bf68bf281..3db4788ba 100644
--- a/src/assets/scss/components/_alert.scss
+++ b/src/assets/scss/components/_alert.scss
@@ -38,6 +38,7 @@
         @else {
             background-color: saturate($value,10%);
             color: saturate(shade-color($value, 60%), 40%);
+            border: 1px solid darken($value, 3%);
         }
     }
 }
\ No newline at end of file
diff --git a/src/component-alert.html b/src/component-alert.html
index b581ea1b2..a876f5d59 100644
--- a/src/component-alert.html
+++ b/src/component-alert.html
@@ -52,6 +52,47 @@ <h4>With Icon</h4>
                         <div class="alert alert-info"><i class="bi bi-star"></i> This is info alert.</div>
                     </div>
                 </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h4>Dismissable</h4>
+                    </div>
+                    <div class="card-body">
+                        <div class="alert alert-primary alert-dismissible fade show" role="alert">
+                            This is primary alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-success alert-dismissible show fade">
+                            This is a success alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
+                            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-danger alert-dismissible show fade">
+                            This is a danger alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-dark alert-dismissible show fade">
+                            This is a dark alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-secondary alert-dismissible show fade">
+                            This is a secondary alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-light alert-dismissible show fade">
+                            This is a light alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <div class="alert alert-info alert-dismissible show fade">
+                            This is a info alert.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6">
                 <div class="card">
                     <div class="card-header">
                         <h4>Light</h4>
@@ -71,8 +112,6 @@ <h4>Light</h4>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="col-12 col-md-6">
                 <div class="card">
                     <div class="card-header">
                         <h4>Heading</h4>
@@ -112,45 +151,6 @@ <h4 class="alert-heading">Info</h4>
                         </div>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h4>Dismissable</h4>
-                    </div>
-                    <div class="card-body">
-                        <div class="alert alert-primary alert-dismissible fade show" role="alert">
-                            This is primary alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-success alert-dismissible show fade">
-                            This is a success alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
-                            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-danger alert-dismissible show fade">
-                            This is a danger alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-dark alert-dismissible show fade">
-                            This is a dark alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-secondary alert-dismissible show fade">
-                            This is a secondary alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-light alert-dismissible show fade">
-                            This is a light alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <div class="alert alert-info alert-dismissible show fade">
-                            This is a info alert.
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </section>