diff --git a/packages/website/ts/components/docs/mdx/ordered_list.tsx b/packages/website/ts/components/docs/mdx/ordered_list.tsx
index 791b8b85ac..c387d9b134 100644
--- a/packages/website/ts/components/docs/mdx/ordered_list.tsx
+++ b/packages/website/ts/components/docs/mdx/ordered_list.tsx
@@ -1,29 +1,31 @@
 import styled from 'styled-components';
 
-import { docs} from 'ts/style/docs';
+import { docs } from 'ts/style/docs';
 
 export const OrderedList = styled.ol`
-    list-style-type: none;
-    counter-reset: tutorialSteps;
-    margin-bottom:  ${docs.marginBottom};
+    list-style: none;
+    counter-reset: steps;
+    margin-bottom: ${docs.marginBottom};
 
     li {
-        display: flex;
-        counter-increment: tutorialSteps;
+        position: relative;
+        counter-increment: steps;
+        padding-left: 48px;
         margin-bottom: 0.8333rem;
         font-size: 1rem;
         line-height: 30px;
-    }
 
-    li:before {
-        border-radius: 50%;
-        background-color: rgba(0, 174, 153, 0.1);
-        content: counter(tutorialSteps);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 30px;
-        height: 30px;
-        margin-right: 1rem;
+        &:before {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            left: 0;
+            content: counter(steps);
+            border-radius: 50%;
+            background-color: rgba(0, 174, 153, 0.1);
+            min-width: 30px;
+            height: 30px;
+        }
     }
 `;