diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
index 6ff213d8..bbdac4f7 100644
--- a/website/src/pages/index.mdx
+++ b/website/src/pages/index.mdx
@@ -111,10 +111,30 @@ const [userRole, setUserRole] = useState<UserRole>('admin'); // Type 'UserRole'
 
 ### Data Immutability
 
-Majority of the data should be immutable - use `Readonly`, `ReadonlyArray`, always return new array, object etc.  
-To keep cognitive load for future developers low, try to keep data objects small.  
+Majority of the data should be immutable with use of `Readonly`, `ReadonlyArray`.
+
+When performing data processing always return new array, object etc. To keep cognitive load for future developers low, try to keep data objects small.  
 As an exception mutations should be used sparingly in cases where truly necessary: complex objects, performance reasoning etc.
 
+```ts
+// ❌ Avoid data mutations
+const removeFirstUser = (users: Array<User>) => {
+  if (users.length === 0) {
+    return users;
+  }
+  return users.splice(1);
+};
+
+// ✅ Use readonly type
+const removeFirstUser = (users: ReadonlyArray<User>) => {
+  if (users.length === 0) {
+    return users;
+  }
+  return users.slice(1);
+  // Using arr.splice(1) errors - Function 'splice' does not exist on 'users'
+};
+```
+
 ### Return Types
 
 Including return type annotations is highly encouraged, although not required ([eslint rule](https://typescript-eslint.io/rules/explicit-function-return-type/)).