diff --git a/src/pages/UI/timeline.html b/src/pages/UI/timeline.html
index 3adf5facb..89972072d 100644
--- a/src/pages/UI/timeline.html
+++ b/src/pages/UI/timeline.html
@@ -1,7 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-<!-- For RTL verison -->
-<!-- <html lang="en" dir="rtl"> -->
   <head>
     @@include('./_head.html', {
       "path": "../..",
@@ -51,7 +49,7 @@
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="fa-solid fa-envelope text-bg-primary"></i>
+                    <i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
                     <div class="timeline-item">
                       <span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
                       <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
@@ -71,7 +69,7 @@
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="fa-solid fa-user text-bg-success"></i>
+                    <i class="timeline-icon fa-solid fa-user text-bg-success"></i>
                     <div class="timeline-item">
                       <span class="time"><i class="fa-solid fa-clock"></i> 5 mins ago</span>
                       <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
@@ -80,7 +78,7 @@
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="fa-solid fa-comments text-bg-warning"></i>
+                    <i class="timeline-icon fa-solid fa-comments text-bg-warning"></i>
                     <div class="timeline-item">
                       <span class="time"><i class="fa-solid fa-clock"></i> 27 mins ago</span>
                       <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
@@ -102,7 +100,7 @@
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="fa-solid fa-camera text-bg-info"></i>
+                    <i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
                     <div class="timeline-item">
                       <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
                       <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
@@ -117,7 +115,7 @@
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="fa-solid fa-video text-bg-primary"></i>
+                    <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
 
                     <div class="timeline-item">
                       <span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
@@ -136,7 +134,7 @@
                   </div>
                   <!-- END timeline item -->
                   <div>
-                    <i class="fa-solid fa-clock text-bg-secondary"></i>
+                    <i class="timeline-icon fa-solid fa-clock text-bg-secondary"></i>
                   </div>
                 </div>
               </div>
diff --git a/src/scss/_timeline.scss b/src/scss/_timeline.scss
index ad7e32e5a..c641d5cd1 100644
--- a/src/scss/_timeline.scss
+++ b/src/scss/_timeline.scss
@@ -80,13 +80,7 @@
 
     }
 
-    /* stylelint-disable selector-class-pattern */
-    // The icons at line
-    > i,
-    > svg,
-    > img,
-    > object,
-    > iframe {
+    .timeline-icon {
       position: absolute;
       top: 0;
       left: 18px;
@@ -98,10 +92,6 @@
       background-color: var(--#{$prefix}secondary-bg);
       border-radius: 50%; // stylelint-disable-line property-disallowed-list
     }
-    > .svg-inline--fa {
-      padding: 7px;
-    }
-    /* stylelint-enable selector-class-pattern */
   }
   // Time label
   > .time-label {
