diff --git a/content/02-understand-prisma/02-features.mdx b/content/02-understand-prisma/02-features.mdx
index 15a5140979..e9ca59ef36 100644
--- a/content/02-understand-prisma/02-features.mdx
+++ b/content/02-understand-prisma/02-features.mdx
@@ -88,7 +88,7 @@ Lock option (MySQL):
 | Authorization and user management | Yes        | Yes   | No     | Not yet                                          | Not yet                            | Not yet         |
 | JSON support                      | Yes        | No    | No     | Not yet                                          | Not yet                            | Not yet         |
 | Fuzzy/Phrase Full Text Search     | Yes        | Yes   | No     | Not yet                                          | Not yet                            | Not yet         |
-| Table inheritance | Yes | No | No | Not yet | Not yet | Yes |
+| Table inheritance                 | Yes        | No    | No     | Not yet                                          | Not yet                            | Yes             |
 
 ## Functions
 
diff --git a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/04-data-model.mdx b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/04-data-model.mdx
index cd896dbc64..7e05be074d 100644
--- a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/04-data-model.mdx
+++ b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/04-data-model.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Data model"
-metaTitle: ""
-metaDescription: ""
+title: 'Data model'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -334,7 +334,7 @@ Note that in the above case, you _must_ provide your own ID values when creating
 const newUser = await prisma.user.create({
   data: {
     id: 1,
-    name: "Alice",
+    name: 'Alice',
   },
 });
 ```
@@ -397,11 +397,11 @@ Note that in this case you can only create new `Post` records by using Prisma Cl
 ```ts
 const post = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
       create: {
-        name: "Alice",
-        email: "alice@prisma.io",
+        name: 'Alice',
+        email: 'alice@prisma.io',
       },
     },
   },
@@ -413,10 +413,10 @@ Or when a `User` record with `bob@prisma.io` as its `email` already exists, you
 ```ts
 const post = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
       connect: {
-        email: "bob@prisma.io",
+        email: 'bob@prisma.io',
       },
     },
   },
@@ -476,8 +476,8 @@ When creating new `User` records, you now must provide a unique combination of v
 ```ts
 const user = await prisma.user.create({
   data: {
-    firstName: "Alice",
-    lastName: "Smith",
+    firstName: 'Alice',
+    lastName: 'Smith',
   },
 });
 ```
@@ -500,8 +500,8 @@ When creating new `User` records, you now must provide a unique combination of v
 ```ts
 const user = await prisma.user.create({
   data: {
-    firstName: "Alice",
-    lastName: "Smith",
+    firstName: 'Alice',
+    lastName: 'Smith',
     isAdmin: true,
   },
 });
@@ -531,10 +531,10 @@ When creating new `Post` records, you now must provide a unique combination of v
 ```ts
 const post = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
       connect: {
-        email: "alice@prisma.io",
+        email: 'alice@prisma.io',
       },
     },
   },
diff --git a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/06-relations.mdx b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/06-relations.mdx
index eca5606a03..780faed617 100644
--- a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/06-relations.mdx
+++ b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/06-relations.mdx
@@ -205,14 +205,10 @@ Virtual relation fields are also present in the generated [Prisma Client API]()
 
 ```js
 // Traverse relation from `Post` to `User` via fluent API
-const user = await prisma.post
-  .findOne({ where: { id: 1 } })
-  .author()
+const user = await prisma.post.findOne({ where: { id: 1 } }).author();
 
 // Traverse relation from `User` to `Post` via fluent API
-const user = await prisma.user
-  .findOne({ where: { id: 1 } })
-  .posts()
+const user = await prisma.user.findOne({ where: { id: 1 } }).posts();
 ```
 
 ## The @relation attribute
@@ -436,12 +432,12 @@ To summarize, these are the rules for determining which side of a 1-1-relation h
 
 Here's the summary in the form of a table assuming the two relation fields of the models from before `Profile.user` and `User.profile`:
 
-| `Prrofile.user` | `User.profile` | Foreign key on                                               | `@relation` attribute                             |
-| :------------------------ | :------------------------ | ------------------------------------------------------------ | ------------------------------------------------- |
-| Required                  | Optional                  | `Profile` (because the relation field on `User` is virtual) | Can't be used to determine the foreign key        |
-| Optional                  | Required                  | `User` (because the relation field on `Profile` is virtual) | Can't be used to determine the foreign key        |
-| Optional                  | Optional                  | `Profile` (because it's first in the alphabet)                | Can be used to manually determine the foreign key |
-| Required                  | Required                  | `Profile` (because it's first in the alphabet)                | Can be used to manually determine the foreign key |
+| `Prrofile.user` | `User.profile` | Foreign key on                                              | `@relation` attribute                             |
+| :-------------- | :------------- | ----------------------------------------------------------- | ------------------------------------------------- |
+| Required        | Optional       | `Profile` (because the relation field on `User` is virtual) | Can't be used to determine the foreign key        |
+| Optional        | Required       | `User` (because the relation field on `Profile` is virtual) | Can't be used to determine the foreign key        |
+| Optional        | Optional       | `Profile` (because it's first in the alphabet)              | Can be used to manually determine the foreign key |
+| Required        | Required       | `Profile` (because it's first in the alphabet)              | Can be used to manually determine the foreign key |
 
 ## One-to-many
 
@@ -628,7 +624,7 @@ If you're not using Prisma Migrate but obtain your data model from [introspectio
 The name of the relation table must be prefixed with an underscore:
 
 - **Valid**: `_CategoryToPost`, `_MyRelation`
-- **Invalid**: ``CategoryToPost`, `MyRelation`
+- **Invalid**: ``CategoryToPost`,`MyRelation`
 
 #### Columns
 
@@ -716,7 +712,7 @@ model User {
   id       Int      @id @default(autoincrement())
   name     String?
   husband  User?    @relation("MarriagePartners")
-  wife     User     @relation("MarriagePartners", references: [id]) 
+  wife     User     @relation("MarriagePartners", references: [id])
 }
 ```
 
@@ -731,7 +727,7 @@ model User {
   id       Int      @id @default(autoincrement())
   name     String?
   teacher  User?    @relation("TeacherStudents")
-  students User[]   @relation("TeacherStudents") 
+  students User[]   @relation("TeacherStudents")
 }
 ```
 
@@ -771,7 +767,7 @@ model User {
   husband     User?    @relation("MarriagePartners")
   wife        User     @relation("MarriagePartners")
   teacher     User?    @relation("TeacherStudents")
-  students    User[]   @relation("TeacherStudents") 
+  students    User[]   @relation("TeacherStudents")
   followedBy  User[]   @relation("UserFollows")
   following   User[]   @relation("UserFollows")
 }
@@ -820,4 +816,4 @@ model Post {
   author   User    @relation("WrittenPosts")
   pinnedBy User?   @relation("PinnedPost")
 }
-```
\ No newline at end of file
+```
diff --git a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/index.mdx b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/index.mdx
index 1047f7e9e8..dc8a289fd7 100644
--- a/content/03-reference/01-tools-and-interfaces/01-prisma-schema/index.mdx
+++ b/content/03-reference/01-tools-and-interfaces/01-prisma-schema/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Prisma schema"
-metaTitle: ""
-metaDescription: ""
+title: 'Prisma schema'
+metaTitle: ''
+metaDescription: ''
 ---
diff --git a/content/03-reference/01-tools-and-interfaces/02-prisma-client/03-crud.mdx b/content/03-reference/01-tools-and-interfaces/02-prisma-client/03-crud.mdx
index c04fe8231e..bf1cedf149 100644
--- a/content/03-reference/01-tools-and-interfaces/02-prisma-client/03-crud.mdx
+++ b/content/03-reference/01-tools-and-interfaces/02-prisma-client/03-crud.mdx
@@ -1,7 +1,7 @@
 ---
-title: "CRUD"
-metaTitle: ""
-metaDescription: ""
+title: 'CRUD'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -54,7 +54,7 @@ enum Role {
 CRUD queries are exposed by the _model properties_ on your `PrismaClient` instance. Taking the `User` and `Post` models from above as examples, you'd invoke the CRUD queries via the `prisma.user` and `prisma.post` model properties, e.g.:
 
 ```ts
-await prisma.user.create({ data: { name: "Alice" } });
+await prisma.user.create({ data: { name: 'Alice' } });
 // or
 await prisma.post.findMany();
 ```
@@ -161,7 +161,7 @@ const result = await prisma.user.findOne({
 ```ts
 const result = await prisma.user.findOne({
   where: {
-    email: "alice@prisma.io",
+    email: 'alice@prisma.io',
   },
 });
 ```
@@ -185,8 +185,8 @@ model User {
 const result = await prisma.user.findOne({
   where: {
     firstName_lastName: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   },
 });
@@ -251,8 +251,8 @@ export type UserOrderByInput = {
 };
 
 export declare const OrderByArg: {
-  asc: "asc";
-  desc: "desc";
+  asc: 'asc';
+  desc: 'desc';
 };
 ```
 
@@ -295,7 +295,7 @@ export type User = {
 
 ```ts
 const user = await prisma.user.findMany({
-  where: { name: "Alice" },
+  where: { name: 'Alice' },
 });
 ```
 
@@ -381,7 +381,7 @@ export type User = {
 
 ```ts
 const user = await prisma.user.create({
-  data: { email: "alice@prisma.io" },
+  data: { email: 'alice@prisma.io' },
 });
 ```
 
@@ -474,7 +474,7 @@ export type User = {
 ```ts
 const user = await prisma.user.update({
   where: { id: 1 },
-  data: { email: "alice@prisma.io" },
+  data: { email: 'alice@prisma.io' },
 });
 ```
 
@@ -536,8 +536,8 @@ export type User = {
 ```ts
 const user = await prisma.user.upsert({
   where: { id: 1 },
-  update: { email: "alice@prisma.io" },
-  create: { email: "alice@prisma.io" },
+  update: { email: 'alice@prisma.io' },
+  create: { email: 'alice@prisma.io' },
 });
 ```
 
@@ -706,8 +706,8 @@ The value of `count` is an integer and represents the number of records that hav
 
 ```ts
 const updatedUserCount = await prisma.user.updateMany({
-  where: { name: "Alice" },
-  data: { name: "ALICE" },
+  where: { name: 'Alice' },
+  data: { name: 'ALICE' },
 });
 ```
 
@@ -759,7 +759,7 @@ The value of `count` is an integer and represents the number of records that hav
 
 ```ts
 const deletedUserCount = await prisma.user.deleteMany({
-  where: { name: "Alice" },
+  where: { name: 'Alice' },
 });
 ```
 
diff --git a/content/03-reference/01-tools-and-interfaces/02-prisma-client/04-relation-queries.mdx b/content/03-reference/01-tools-and-interfaces/02-prisma-client/04-relation-queries.mdx
index 060063a577..095a74ba58 100644
--- a/content/03-reference/01-tools-and-interfaces/02-prisma-client/04-relation-queries.mdx
+++ b/content/03-reference/01-tools-and-interfaces/02-prisma-client/04-relation-queries.mdx
@@ -1,14 +1,14 @@
 ---
-title: "Relation queries"
-metaTitle: ""
-metaDescription: ""
+title: 'Relation queries'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
 
 One of the main features of Prisma Client is its API for sending relation queries. Relation queries refer to queries that operate on a [relation]() between two or more models:
 
-- Fluent API for traversing relations 
+- Fluent API for traversing relations
 - Nested writes with [transactional]() guarantees
 - Nested reads (sometimes referred to as _eager loading_) via [`select`]() and [`include`]()
 - Relation filters (filters on related objects)
@@ -61,15 +61,15 @@ This query returns all `Post` records by a specific `User`:
 ```ts
 const postsByUser: Post[] = await prisma.user
   .findOne({ where: { email: 'alice@prisma.io' } })
-  .posts()
+  .posts();
 ```
 
 Note that this call is equivalent to this Prisma Client query:
 
 ```ts
 const postsByUser = await prisma.post.findMany({
-  where: { author: { email: "alice@prisma.io" } }
-})
+  where: { author: { email: 'alice@prisma.io' } },
+});
 ```
 
 The main difference between the two is that the fluent API call is translated into two separate database queries while the other one only generates a single query.
@@ -77,9 +77,7 @@ The main difference between the two is that the fluent API call is translated in
 This request returns all categories by a specific post:
 
 ```ts
-const categoriesOfPost: Category[] = await prisma.post
-  .findOne({ where: { id: 1 } })
-  .categories()
+const categoriesOfPost: Category[] = await prisma.post.findOne({ where: { id: 1 } }).categories();
 ```
 
 Note that you can chain as many queries as you like. In this example, the chanining start at `Profile` and goes over `User` to `Post`:
@@ -104,10 +102,9 @@ const posts = await prisma.user
 }
 ```
 
-
 ## Relation filters
 
-A relation filter is a filter operation that's applied to a related object of a model. Relation filter options can be passed to the last chained query in a fluent API call if it returns a [list](). 
+A relation filter is a filter operation that's applied to a related object of a model. Relation filter options can be passed to the last chained query in a fluent API call if it returns a [list]().
 
 **Retrieve all `Post` records of a particular `User` record that start with "Hello"**
 
@@ -120,38 +117,36 @@ const posts: Post[] = await prisma.user
     where: {
       title: { startsWith: 'Hello' },
     },
-  })
+  });
 ```
 
 Note that this query is equivalent to the following one which is initiated via the `post` instead of the `user` field (i.e. it doesn't use the fluent API):
 
 ```ts
 const posts = await prisma.post.findMany({
-  where: { 
-    author: { email: "bob@prisma.io"},
-    title: { startsWith: "Hello" }
-  }
-})
-console.log(posts)
+  where: {
+    author: { email: 'bob@prisma.io' },
+    title: { startsWith: 'Hello' },
+  },
+});
+console.log(posts);
 ```
 
 The main difference between the two is that the fluent API call is translated into two separate database queries while the other one only generates a single query.
 
-
 ## Nested writes
 
-Nested writes provide a way for writing relational data in your database. They further provide [transactional]() guarantees for creating, updating or deleting data across multiple tables in a single Prisma Client query. 
+Nested writes provide a way for writing relational data in your database. They further provide [transactional]() guarantees for creating, updating or deleting data across multiple tables in a single Prisma Client query.
 
 Nested writes can be nested arbitrarily deep.
 
 Nested writes are available for [relation fields]() when using the model's `create` or `update` query. The following nested write options are available per query:
 
 | Query | Option | Description |
-| :-- | :-- | :-- |
-| | | 
-
+| :---- | :----- | :---------- |
+|       |        |
 
-### One-to-one relations 
+### One-to-one relations
 
 This section shows examples for nested writes on one-to-one relations. It uses the `User` ↔ `Profile` relation from the sample data model above. For illustration purposes, the `email` and `bio` fields have been added:
 
@@ -170,6 +165,7 @@ model Profile {
 ```
 
 One-to-one relation fields (e.g. `profile` on `User` in the sample data model above)
+
 - `create`
   - `create`: Create a new user and a new profile
   - `connect`: Create a new user and connect it to an existing profile
@@ -181,18 +177,17 @@ One-to-one relation fields (e.g. `profile` on `User` in the sample data model ab
   - `delete` (only if relation is optional): Update an existing user by deleting their existing profile
   - `disconnect` (only if relation is optional): Update an existing user by removing the connection to their existing profile
 
-
 **Create a new `User` record with a new `Profile` record**:
 
 ```ts
 const user = await prisma.user.create({
   data: {
-    email: "alice@prisma.io",
+    email: 'alice@prisma.io',
     profile: {
-      create: { bio: "Hello World" }
-    }
-  }
-})
+      create: { bio: 'Hello World' },
+    },
+  },
+});
 ```
 
 This example uses the `user` model property, but you could also run the query from the `profile` side:
@@ -200,12 +195,12 @@ This example uses the `user` model property, but you could also run the query fr
 ```ts
 const user = await prisma.profile.create({
   data: {
-    bio: "Hello World",
+    bio: 'Hello World',
     user: {
-      create: { email: "alice@prisma.io", }
-    }
-  }
-})
+      create: { email: 'alice@prisma.io' },
+    },
+  },
+});
 ```
 
 **Create a new `Profile` record and connect it to an existing `User` record**
@@ -213,12 +208,12 @@ const user = await prisma.profile.create({
 ```ts
 const user = await prisma.profile.create({
   data: {
-    bio: "Hello World",
+    bio: 'Hello World',
     user: {
-      connect: { email: "alice@prisma.io" }
-    }
-  }
-})
+      connect: { email: 'alice@prisma.io' },
+    },
+  },
+});
 ```
 
 Note that this requires that a `User` record with an `email` of `"alice@prisma.io"` already exists in the database. If that's not the case, the query will fail with an exception.
@@ -228,93 +223,93 @@ You can provide any [unique]() or [ID]() property to the `connect` option, so in
 ```ts
 const user = await prisma.profile.create({
   data: {
-    bio: "Hello World",
+    bio: 'Hello World',
     user: {
-      connect: { id: 42 }
-    }
-  }
-})
+      connect: { id: 42 },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by creating a new `Profile` record**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     profile: {
-      create: { bio: "Hello World" }
-    }
-  }
-})
+      create: { bio: 'Hello World' },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by connecting it to an existing `Profile` record**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     profile: {
-      connect: { id: 24 }
-    }
-  }
-})
+      connect: { id: 24 },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by updating the `Profile` record it's connected to**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     profile: {
-      update: { bio: "Hello World" }
-    }
-  }
-})
+      update: { bio: 'Hello World' },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by updating the `Profile` record it's connected to or creating a new one (_upsert_)**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     profile: {
-      upsert: { 
-        create: { bio: "Hello World" },
-        update: { bio: "Hello World" }
-       }
-    }
-  }
-})
+      upsert: {
+        create: { bio: 'Hello World' },
+        update: { bio: 'Hello World' },
+      },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by deleting the `Profile` record it's connected to**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     profile: {
-      delete: true
-    }
-  }
-})
+      delete: true,
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by disconnecting the `Profile` record it's connected to**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "bob  @prisma.io" },
+  where: { email: 'bob  @prisma.io' },
   data: {
     profile: {
-      disconnect: true
-    }
-  }
-})
+      disconnect: true,
+    },
+  },
+});
 ```
 
 Note that this query is actually illegal with the data model from above because the `user` field on `Profile` is required. In order to make this query succeed, you'd need to make both relation fields optional:
@@ -331,7 +326,7 @@ model Profile {
 }
 ```
 
-### One-to-many relations 
+### One-to-many relations
 
 This section shows examples for nested writes on one-to-many relations. It uses the `User` ↔ `Post` relation from the sample data model above. For illustration purposes, the `email`, `title` and `published fields have been added:
 
@@ -351,6 +346,7 @@ model Post {
 ```
 
 One-to-many relation fields (e.g. `posts` on `User` in the sample data model above):
+
 - `create`
   - `create`: Create a new user and one or more new posts
   - `connect`: Create a new user and connect it to one or more existing posts
@@ -365,18 +361,17 @@ One-to-many relation fields (e.g. `posts` on `User` in the sample data model abo
   - `updateMany`: Update an existing user by updating one or more of their existing posts
   - `deleteMany`: Update an existing user by deleting one or more of their existing posts
 
-
 **Create a new `User` record with a new `Post` record**:
 
 ```ts
 const user = await prisma.user.create({
   data: {
-    email: "alice@prisma.io",
+    email: 'alice@prisma.io',
     posts: {
-      create: { title: "Hello World" }
-    }
-  }
-})
+      create: { title: 'Hello World' },
+    },
+  },
+});
 ```
 
 This example uses the `user` model property, but you could also run the query from the `post` side:
@@ -384,12 +379,12 @@ This example uses the `user` model property, but you could also run the query fr
 ```ts
 const user = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
-      create: { email: "alice@prisma.io", }
-    }
-  }
-})
+      create: { email: 'alice@prisma.io' },
+    },
+  },
+});
 ```
 
 **Create a new `User` record with two new `Post` records**:
@@ -399,15 +394,12 @@ Because it's a one-to-many relation, you can also create several `Post` records
 ```ts
 const user = await prisma.user.create({
   data: {
-    email: "alice@prisma.io",
+    email: 'alice@prisma.io',
     posts: {
-      create: [
-        { title: "This is my first post" },
-        { title: "Here comes a second post" }
-      ]
-    }
-  }
-})
+      create: [{ title: 'This is my first post' }, { title: 'Here comes a second post' }],
+    },
+  },
+});
 ```
 
 **Create a new `Post` record and connect it to an existing `User` record**
@@ -415,12 +407,12 @@ const user = await prisma.user.create({
 ```ts
 const user = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
-      connect: { email: "alice@prisma.io" }
-    }
-  }
-})
+      connect: { email: 'alice@prisma.io' },
+    },
+  },
+});
 ```
 
 Note that this requires that a `User` record with an `email` of `"alice@prisma.io"` already exists in the database. If that's not the case, the query will fail with an exception.
@@ -430,41 +422,38 @@ You can provide any [unique]() or [ID]() property to the `connect` option, so in
 ```ts
 const user = await prisma.post.create({
   data: {
-    title: "Hello World",
+    title: 'Hello World',
     author: {
-      connect: { id: 42 }
-    }
-  }
-})
+      connect: { id: 42 },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by creating a new `Post` record**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      create: { title: "Hello World" }
-    }
-  }
-})
+      create: { title: 'Hello World' },
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by connecting it to two existing `Post` records**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      connect: [
-        { id: 24 },
-        { id: 42 }
-      ]
-    }
-  }
-})
+      connect: [{ id: 24 }, { id: 42 }],
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by updating two `Post` records it's connected to**
@@ -486,28 +475,31 @@ const user = await prisma.user.update({
       ],
     },
   },
-})
+});
 ```
 
 **Update an existing `User` record by updating two `Post` record it's connected to or creating new ones (_upsert_)**
 
 ```ts
 const user = await prisma.user.update({
-  where: { email: "alice@prisma.io" },
+  where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      upsert: [{ 
-        create: { title: "This is my first post" },
-        update: { title: "This is my first post" },
-        where: { id: 32}
-        }, { 
-        create: { title: "This is mt second post" },
-        update: { title: "This is mt second post" },
-        where: { id: 23}
-        }]
-    }
-  }
-})
+      upsert: [
+        {
+          create: { title: 'This is my first post' },
+          update: { title: 'This is my first post' },
+          where: { id: 32 },
+        },
+        {
+          create: { title: 'This is mt second post' },
+          update: { title: 'This is mt second post' },
+          where: { id: 23 },
+        },
+      ],
+    },
+  },
+});
 ```
 
 **Update an existing `User` record by deleting two `Post` records it's connected to**
@@ -517,13 +509,10 @@ const user = await prisma.user.update({
   where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      delete: [
-        { id: 34 },
-        { id: 36 },
-      ],
+      delete: [{ id: 34 }, { id: 36 }],
     },
   },
-})
+});
 ```
 
 **Update an existing `User` record by disconnecting two `Post` records it's connected to**
@@ -533,13 +522,10 @@ const user = await prisma.user.update({
   where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      disconnect: [
-        { id: 44 },
-        { id: 46 },
-      ],
+      disconnect: [{ id: 44 }, { id: 46 }],
     },
   },
-})
+});
 ```
 
 **Update an existing `User` record by disconnecting any previous `Post` records and connect two other exiting ones**
@@ -549,21 +535,17 @@ const user = await prisma.user.update({
   where: { email: 'alice@prisma.io' },
   data: {
     posts: {
-      set: [
-        {id: 32},
-        {id: 42},
-      ]
+      set: [{ id: 32 }, { id: 42 }],
     },
   },
-})
+});
 ```
 
-
 ## Nested reads
 
 With nested reads, you can modify the structures of the model objects that are returned by your Prisma Client queries by including their relations. In [ORM]() terminoloy, this is sometimes called _eager loading_.
 
-You can load relations of your models with the [`include`]() and [`select`]() options which you can pass to _any_ Prisma Client query (except for the batch operations `updateMany` and `deleteMany`), .  `include` is more commonly used for relations, `select` is used for selecting specific fields.
+You can load relations of your models with the [`include`]() and [`select`]() options which you can pass to _any_ Prisma Client query (except for the batch operations `updateMany` and `deleteMany`), . `include` is more commonly used for relations, `select` is used for selecting specific fields.
 
 **Include the `posts` and `profile` relation when loading `User` records**
 
@@ -571,9 +553,9 @@ You can load relations of your models with the [`include`]() and [`select`]() op
 const users = await prisma.user.findMany({
   include: {
     posts: true,
-    profile: true
-  }
-})
+    profile: true,
+  },
+});
 ```
 
 **Include the `posts` relation on the returned objects when creating a new `User` record with two `Post` records**
@@ -581,16 +563,13 @@ const users = await prisma.user.findMany({
 ```ts
 const user = await prisma.user.create({
   data: {
-    email: "alice@prisma.io",
+    email: 'alice@prisma.io',
     posts: {
-      create: [
-        { title: "This is my first post" },
-        { title: "Here comes a second post" }
-      ]
-    }
+      create: [{ title: 'This is my first post' }, { title: 'Here comes a second post' }],
+    },
   },
-  include: { posts: true }
-})
+  include: { posts: true },
+});
 ```
 
 **Retrieve deeply nested data by loading several levels of relations**
@@ -608,5 +587,5 @@ const users = await prisma.user.findMany({
       },
     },
   },
-})
+});
 ```
diff --git a/content/03-reference/01-tools-and-interfaces/02-prisma-client/08-generated-types.mdx b/content/03-reference/01-tools-and-interfaces/02-prisma-client/08-generated-types.mdx
index c01c5bc7d1..45944c668c 100644
--- a/content/03-reference/01-tools-and-interfaces/02-prisma-client/08-generated-types.mdx
+++ b/content/03-reference/01-tools-and-interfaces/02-prisma-client/08-generated-types.mdx
@@ -75,17 +75,17 @@ type UserPersonalData = {
 While this is certainly feasible, this approach increases the maintenance burden upon changes to the Prisma schema as you need to manually maintain the types. A cleaner solution to this is to use the `UserGetPayload` type that is generated and exposed by Prisma Client:
 
 ```ts
-import { UserGetPayload } from "@prisma/client";
+import { UserGetPayload } from '@prisma/client';
 
 // Define a type that includes the relation to `Post`
-type UserWithPosts = UserGetPayload<{ 
-  include: { posts: true } 
-}>
+type UserWithPosts = UserGetPayload<{
+  include: { posts: true };
+}>;
 
 // Define a type that only contains a subset of the scalar fields
 type UserPersonalData = UserGetPayload<{
-  select: { email: true; name: true }
-}>
+  select: { email: true; name: true };
+}>;
 ```
 
 The main benefits of the latter approach are:
diff --git a/content/03-reference/01-tools-and-interfaces/02-prisma-client/12-logging.mdx b/content/03-reference/01-tools-and-interfaces/02-prisma-client/12-logging.mdx
index 84090967fb..1896c26994 100644
--- a/content/03-reference/01-tools-and-interfaces/02-prisma-client/12-logging.mdx
+++ b/content/03-reference/01-tools-and-interfaces/02-prisma-client/12-logging.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Logging"
-metaTitle: ""
-metaDescription: ""
+title: 'Logging'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -10,7 +10,7 @@ You can view the generated database queries that Prisma Client JS sends to your
 
 ```ts
 const prisma = new PrismaClient({
-  log: ["query", "info", "warn"],
+  log: ['query', 'info', 'warn'],
 });
 ```
 
@@ -35,10 +35,10 @@ If the `log` option is not provided, nothing will be logged.
 Here's the type definitions for `LogLevel` and `LogDefinition`:
 
 ```ts
-type LogLevel = "info" | "query" | "warn";
+type LogLevel = 'info' | 'query' | 'warn';
 type LogDefinition = {
   level: LogLevel;
-  emit: "stdout" | "event";
+  emit: 'stdout' | 'event';
 };
 ```
 
@@ -50,7 +50,7 @@ If you want to print your logs to stdout, you can provide the `LogLevel` values
 
 ```ts
 const prisma = new PrismaClient({
-  log: ["query", "info", "warn"],
+  log: ['query', 'info', 'warn'],
 });
 ```
 
@@ -60,16 +60,16 @@ Since stdout is the default, the above code snippet is equivalent to the followi
 const prisma = new PrismaClient({
   log: [
     {
-      emit: "stdout",
-      level: "query",
+      emit: 'stdout',
+      level: 'query',
     },
     {
-      emit: "stdout",
-      level: "info",
+      emit: 'stdout',
+      level: 'info',
     },
     {
-      emit: "stdout",
-      level: "warn",
+      emit: 'stdout',
+      level: 'warn',
     },
   ],
 });
@@ -83,16 +83,16 @@ If you want to apply some custom logic to your logs, you can also set `emit` to
 const prisma = new PrismaClient({
   log: [
     {
-      emit: "event",
-      level: "query",
+      emit: 'event',
+      level: 'query',
     },
     {
-      emit: "event",
-      level: "info",
+      emit: 'event',
+      level: 'info',
     },
     {
-      emit: "event",
-      level: "warn",
+      emit: 'event',
+      level: 'warn',
     },
   ],
 });
@@ -110,13 +110,13 @@ Here is a sample snippet that shows how to log an incoming event `e` (for the lo
 const prisma = new PrismaClient({
   log: [
     {
-      emit: "event",
-      level: "query",
+      emit: 'event',
+      level: 'query',
     },
   ],
 });
 
-prisma.on("query", e => {
+prisma.on('query', e => {
   e.timestamp;
   e.query;
   e.params;
@@ -187,13 +187,13 @@ Here is a sample snippet that shows how to log an incoming event `e` (for the lo
 const prisma = new PrismaClient({
   log: [
     {
-      emit: "event",
-      level: "info",
+      emit: 'event',
+      level: 'info',
     },
   ],
 });
 
-prisma.on("info", e => {
+prisma.on('info', e => {
   e.timestamp;
   e.duration;
   e.target;
@@ -219,13 +219,13 @@ Here is a sample snippet that shows how to log an incoming event `e` (for the lo
 const prisma = new PrismaClient({
   log: [
     {
-      emit: "event",
-      level: "warn",
+      emit: 'event',
+      level: 'warn',
     },
   ],
 });
 
-prisma.on("warn", e => {
+prisma.on('warn', e => {
   e.timestamp;
   e.duration;
   e.target;
diff --git a/content/03-reference/01-tools-and-interfaces/03-prisma-migrate/index.mdx b/content/03-reference/01-tools-and-interfaces/03-prisma-migrate/index.mdx
index f0a6a2087e..db51c81e68 100644
--- a/content/03-reference/01-tools-and-interfaces/03-prisma-migrate/index.mdx
+++ b/content/03-reference/01-tools-and-interfaces/03-prisma-migrate/index.mdx
@@ -1,7 +1,6 @@
 ---
-title: "Prisma Migrate"
-metaTitle: ""
-metaDescription: ""
-experimtental: true
+title: 'Prisma Migrate'
+metaTitle: ''
+metaDescription: ''
+experimental: true
 ---
-
diff --git a/content/04-guides/01-database-workflows/02-importing-and-exporting-data/index.mdx b/content/04-guides/01-database-workflows/02-importing-and-exporting-data/index.mdx
index b71333aaa7..135dcfd040 100644
--- a/content/04-guides/01-database-workflows/02-importing-and-exporting-data/index.mdx
+++ b/content/04-guides/01-database-workflows/02-importing-and-exporting-data/index.mdx
@@ -1,4 +1,4 @@
 ---
-title: "Importing and exporting data"
-metaTitle: "Importing and exporting data"
+title: 'Importing and exporting data'
+metaTitle: 'Importing and exporting data'
 ---
diff --git a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/01-postgresql.mdx b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/01-postgresql.mdx
index 885b312745..eda727320b 100644
--- a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/01-postgresql.mdx
+++ b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/01-postgresql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Unique constraints and indexes (PostgreSQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Unique constraints and indexes (PostgreSQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -280,20 +280,20 @@ Now you can use Prisma Client to send database queries in Node.js.
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser2);
@@ -326,22 +326,22 @@ Invalid `const newUser1 = await prisma.user.create()` invocation in
 To validate the multi-column unique constraint, replace the code in `index.js` with the following:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser2);
@@ -372,7 +372,7 @@ Invalid `newUser2 = await prisma.anotherUser.create()` invocation in
 Note that you can add `NULL` values for these columns without violating the constraints. For example, the following code snippet will **not** fail:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
diff --git a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/02-mysql.mdx b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/02-mysql.mdx
index fb1b6f62ad..835fd26683 100644
--- a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/02-mysql.mdx
+++ b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/02-mysql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Unique constraints and indexes (MySQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Unique constraints and indexes (MySQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -299,20 +299,20 @@ Now you can use Prisma Client to send database queries in Node.js.
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser2);
@@ -347,22 +347,22 @@ Invalid `newUser2 = await prisma.user.create()` invocation in
 To validate the multi-column unique constraint, replace the code in `index.js` with the following:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser2);
@@ -395,7 +395,7 @@ Invalid `newUser2 = await prisma.anotherUser.create()` invocation in
 Note that you can add `NULL` values for these columns without violating the constraints. For example, the following code snippet will **not** fail:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
diff --git a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/03-sqlite.mdx b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/03-sqlite.mdx
index 29242a12a4..6bd1daac26 100644
--- a/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/03-sqlite.mdx
+++ b/content/04-guides/01-database-workflows/04-unique-constraints-and-indexes/03-sqlite.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Unique constraints and indexes (SQLite)"
-metaTitle: ""
-metaDescription: ""
+title: 'Unique constraints and indexes (SQLite)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -201,20 +201,20 @@ Now you can use Prisma Client to send database queries in Node.js.
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.user.create({
     data: {
-      email: "alice@prisma.io",
+      email: 'alice@prisma.io',
     },
   });
   console.log(newUser2);
@@ -249,22 +249,22 @@ Invalid `newUser2 = await prisma.user.create()` invocation in
 To validate the multi-column unique constraint, replace the code in `index.js` with the following:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const newUser1 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser1);
   const newUser2 = await prisma.anotherUser.create({
     data: {
-      firstName: "Alice",
-      lastName: "Smith",
+      firstName: 'Alice',
+      lastName: 'Smith',
     },
   });
   console.log(newUser2);
@@ -297,7 +297,7 @@ Invalid `newUser2 = await prisma.anotherUser.create()` invocation in
 Note that you can add `NULL` values for these columns without violating the constraints. For example, the following code snippet will **not** fail:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
diff --git a/content/04-guides/01-database-workflows/05-foreign-keys/01-postgresql.mdx b/content/04-guides/01-database-workflows/05-foreign-keys/01-postgresql.mdx
index 9ffcab642b..7edf05e6c5 100644
--- a/content/04-guides/01-database-workflows/05-foreign-keys/01-postgresql.mdx
+++ b/content/04-guides/01-database-workflows/05-foreign-keys/01-postgresql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Foreign keys / Relations (PostgreSQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Foreign keys / Relations (PostgreSQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -229,17 +229,17 @@ Now you can use Prisma Client to send database queries in Node.js.
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.user.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       post: {
         create: {
-          title: "Hello World from Alice",
+          title: 'Hello World from Alice',
         },
       },
     },
@@ -247,11 +247,11 @@ async function main() {
 
   const anotherUserWithPost = await prisma.anotherUser.create({
     data: {
-      firstName: "Bob",
-      lastName: "Smith",
+      firstName: 'Bob',
+      lastName: 'Smith',
       anotherPost: {
         create: {
-          title: "Hello World from Bob",
+          title: 'Hello World from Bob',
         },
       },
     },
diff --git a/content/04-guides/01-database-workflows/05-foreign-keys/03-sqlite.mdx b/content/04-guides/01-database-workflows/05-foreign-keys/03-sqlite.mdx
index 07f85f45db..1d37ea2154 100644
--- a/content/04-guides/01-database-workflows/05-foreign-keys/03-sqlite.mdx
+++ b/content/04-guides/01-database-workflows/05-foreign-keys/03-sqlite.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Foreign keys / Relations (SQLite)"
-metaTitle: ""
-metaDescription: ""
+title: 'Foreign keys / Relations (SQLite)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -222,17 +222,17 @@ Now you can use Prisma Client to send database queries in Node.js.
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.user.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       post: {
         create: {
-          title: "Hello World from Alice",
+          title: 'Hello World from Alice',
         },
       },
     },
@@ -244,11 +244,11 @@ async function main() {
 
   const anotherUserWithPost = await prisma.anotherUser.create({
     data: {
-      firstName: "Bob",
-      lastName: "Smith",
+      firstName: 'Bob',
+      lastName: 'Smith',
       anotherPost: {
         create: {
-          title: "Hello World from Bob",
+          title: 'Hello World from Bob',
         },
       },
     },
diff --git a/content/04-guides/01-database-workflows/06-cascading-deletes/01-postgresql.mdx b/content/04-guides/01-database-workflows/06-cascading-deletes/01-postgresql.mdx
index b5668b9606..a2c74e7fed 100644
--- a/content/04-guides/01-database-workflows/06-cascading-deletes/01-postgresql.mdx
+++ b/content/04-guides/01-database-workflows/06-cascading-deletes/01-postgresql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Cascading deletes (PostgreSQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Cascading deletes (PostgreSQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
@@ -400,16 +400,16 @@ To test the `RESTRICT` behavior, you need to access the `User` and `Post` tables
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.user.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       post: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -458,16 +458,16 @@ To test the `CASCADE` behavior, you need to access the `AnotherUser` and `Anothe
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.anotherUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       anotherPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -516,16 +516,16 @@ To test the `NO ACTION` behavior, you need to access the `OneMoreUser` and `OneM
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.oneMoreUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       oneMorePost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -574,16 +574,16 @@ To test the `SET NULL` behavior, you need to access the `AlmostTheLastUser` and
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.almostTheLastUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       almostTheLastPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
     include: {
@@ -646,16 +646,16 @@ To test the `SET DEFAULT` behavior, you need to access the `TheLastUser` and `Th
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.theLastUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       theLastPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
     include: {
diff --git a/content/04-guides/01-database-workflows/06-cascading-deletes/02-mysql.mdx b/content/04-guides/01-database-workflows/06-cascading-deletes/02-mysql.mdx
index c379045b76..ae74f99cdf 100644
--- a/content/04-guides/01-database-workflows/06-cascading-deletes/02-mysql.mdx
+++ b/content/04-guides/01-database-workflows/06-cascading-deletes/02-mysql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Cascading deletes (MySQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Cascading deletes (MySQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overviews
@@ -374,16 +374,16 @@ To test the `RESTRICT` behavior, you need to access the `User` and `Post` tables
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.user.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       post: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -432,16 +432,16 @@ To test the `CASCADE` behavior, you need to access the `AnotherUser` and `Anothe
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.anotherUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       anotherPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -490,16 +490,16 @@ To test the `SET NULL` behavior, you need to access the `AlmostTheLastUser` and
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.almostTheLastUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       almostTheLastPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
     include: {
diff --git a/content/04-guides/01-database-workflows/06-cascading-deletes/03-sqlite.mdx b/content/04-guides/01-database-workflows/06-cascading-deletes/03-sqlite.mdx
index c040acac96..539c4c9ac7 100644
--- a/content/04-guides/01-database-workflows/06-cascading-deletes/03-sqlite.mdx
+++ b/content/04-guides/01-database-workflows/06-cascading-deletes/03-sqlite.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Cascading deletes (SQLite)"
-metaTitle: ""
-metaDescription: ""
+title: 'Cascading deletes (SQLite)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overviews
@@ -394,16 +394,16 @@ To test the `RESTRICT` behavior, you need to access the `User` and `Post` tables
 Create a new file called `index.js` and add the following code to it:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.user.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       post: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -452,16 +452,16 @@ To test the `CASCADE` behavior, you need to access the `AnotherUser` and `Anothe
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.anotherUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       anotherPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -510,16 +510,16 @@ To test the `NO ACTION` behavior, you need to access the `OneMoreUser` and `OneM
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.oneMoreUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       oneMorePost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
   });
@@ -568,16 +568,16 @@ To test the `SET NULL` behavior, you need to access the `AlmostTheLastUser` and
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.almostTheLastUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       almostTheLastPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
     include: {
@@ -640,16 +640,16 @@ To test the `SET DEFAULT` behavior, you need to access the `TheLastUser` and `Th
 Open the `index.js` file and replace its contents with the following code:
 
 ```js
-const { PrismaClient } = require("@prisma/client");
+const { PrismaClient } = require('@prisma/client');
 
 const prisma = new PrismaClient();
 
 async function main() {
   const userWithPost = await prisma.theLastUser.create({
     data: {
-      name: "Alice",
+      name: 'Alice',
       theLastPost: {
-        create: { title: "Hello World" },
+        create: { title: 'Hello World' },
       },
     },
     include: {
diff --git a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/01-postgresql.mdx b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/01-postgresql.mdx
index 6b2faa64cf..225904db8a 100644
--- a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/01-postgresql.mdx
+++ b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/01-postgresql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Renaming tables and columns (PostgreSQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Renaming tables and columns (PostgreSQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
-Coming 🔜
\ No newline at end of file
+Coming 🔜
diff --git a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/02-mysql.mdx b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/02-mysql.mdx
index fc55fe2eea..8fb1e622ec 100644
--- a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/02-mysql.mdx
+++ b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/02-mysql.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Renaming tables and columns (MySQL)"
-metaTitle: ""
-metaDescription: ""
+title: 'Renaming tables and columns (MySQL)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 Coming 🔜
diff --git a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/03-sqlite.mdx b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/03-sqlite.mdx
index 64b8c00166..853224e2a0 100644
--- a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/03-sqlite.mdx
+++ b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/03-sqlite.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Renaming tables and columns (SQLite)"
-metaTitle: ""
-metaDescription: ""
+title: 'Renaming tables and columns (SQLite)'
+metaTitle: ''
+metaDescription: ''
 ---
 
 Coming 🔜
diff --git a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/index.mdx b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/index.mdx
index f0d25c081a..d532994bde 100644
--- a/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/index.mdx
+++ b/content/04-guides/01-database-workflows/08-renaming-tables-and-columns/index.mdx
@@ -1,4 +1,4 @@
 ---
-title: "Data validation"
-metaTitle: ""
+title: 'Data validation'
+metaTitle: ''
 ---
diff --git a/content/05-more/01-about-the-docs.mdx b/content/05-more/01-about-the-docs.mdx
index ff2ececf9f..631efcfa63 100644
--- a/content/05-more/01-about-the-docs.mdx
+++ b/content/05-more/01-about-the-docs.mdx
@@ -1,13 +1,13 @@
 ---
-title: "About the docs"
-metaTitle: ""
-metaDescription: ""
+title: 'About the docs'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
 
 Coming 🔜
 
-## The `User` and `Post` data model 
+## The `User` and `Post` data model
 
 `User` and `Post` are the canonical models that are being used throughout the Prisma docs. This page gives some context on why these have been selected and how to interpret them.
diff --git a/content/05-more/02-style-guide.mdx b/content/05-more/02-style-guide.mdx
index 7742c7406c..2b77e76d3b 100644
--- a/content/05-more/02-style-guide.mdx
+++ b/content/05-more/02-style-guide.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Prisma style guide"
-metaTitle: ""
-metaDescription: ""
+title: 'Prisma style guide'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Welcome!
@@ -53,12 +53,15 @@ Concise writing communicates the bare minimum without redundancy. Strive to make
 
 ### Use clear hyperlinks
 
-Hyperlinks should contain the clearest words to indicate where the link will lead you. 
+Hyperlinks should contain the clearest words to indicate where the link will lead you.
 
 ```md
 <!-- Good -->
+
 [Prisma's docs](https://www.prisma.io/docs/)
+
 <!-- Bad -->
+
 [here](https://www.gatsbyjs.org/docs/ "Gatsby's docs")
 ```
 
@@ -81,7 +84,7 @@ Although it can be tempting to use abbreviations like "Postgres" (instead of the
 - Node.js (instead of Node or Node.JS)
 - JavaScript and TypeScript (instead of Javascript and Typescript or JS and TS)
 - PostgreSQL (instead of Postgres or Postgresql)
-- MongoDB (instead of Mongo) 
+- MongoDB (instead of Mongo)
 - GitHub (instead of Github)
 - ...
 
@@ -101,7 +104,7 @@ Tables and lists are often the most concise way of presenting information. Use t
 
 ### Use italics and bold font
 
-Italics and bold fonts can be a great way to emphasize certain parts of your sentence to the reader. Use bold font more sparcely and only when you want this part to stand out from the entire paragraph (so that it's visible when a reader only "scans" the page instead of properly reading it). Use italics for words that introduce new concepts for the first time. 
+Italics and bold fonts can be a great way to emphasize certain parts of your sentence to the reader. Use bold font more sparcely and only when you want this part to stand out from the entire paragraph (so that it's visible when a reader only "scans" the page instead of properly reading it). Use italics for words that introduce new concepts for the first time.
 
 ### Use active voice
 
diff --git a/content/05-more/03-supported-databases.mdx b/content/05-more/03-supported-databases.mdx
index 019609b06d..ee17f391c2 100644
--- a/content/05-more/03-supported-databases.mdx
+++ b/content/05-more/03-supported-databases.mdx
@@ -1,22 +1,22 @@
 ---
-title: "Supported databases"
-metaTitle: ""
-metaDescription: ""
+title: 'Supported databases'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
 
 Prisma 2 currently supports the following databases:
 
-| Database | Version | 
-| --- | --- |
-| PostgreSQL |  9 |
-| PostgreSQL |  10 |
-| PostgreSQL |  11 |
-| PostgreSQL |  12 |
-| MySQL | 5.7 | 
-| MySQL | 8 | 
-| MariaDB | 10 |
-| SQLite | 3.28.0 |
+| Database   | Version |
+| ---------- | ------- |
+| PostgreSQL | 9       |
+| PostgreSQL | 10      |
+| PostgreSQL | 11      |
+| PostgreSQL | 12      |
+| MySQL      | 5.7     |
+| MySQL      | 8       |
+| MariaDB    | 10      |
+| SQLite     | 3.28.0  |
 
 Note that a fixed version of SQLite is shipped with every Prisma 2 release.
diff --git a/content/05-more/05-faq.mdx b/content/05-more/05-faq.mdx
index 3634ef9d74..59ec4e16d5 100644
--- a/content/05-more/05-faq.mdx
+++ b/content/05-more/05-faq.mdx
@@ -1,7 +1,7 @@
 ---
-title: "FAQ"
-metaTitle: ""
-metaDescription: ""
+title: 'FAQ'
+metaTitle: ''
+metaDescription: ''
 ---
 
-Coming 🔜
\ No newline at end of file
+Coming 🔜
diff --git a/content/05-more/06-limitations.mdx b/content/05-more/06-limitations.mdx
index 15a3eb4567..8b3703543e 100644
--- a/content/05-more/06-limitations.mdx
+++ b/content/05-more/06-limitations.mdx
@@ -1,7 +1,7 @@
 ---
-title: "Limitations"
-metaTitle: ""
-metaDescription: ""
+title: 'Limitations'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
diff --git a/content/05-more/07-roadmap.mdx b/content/05-more/07-roadmap.mdx
index 939ba5864b..5549402aa1 100644
--- a/content/05-more/07-roadmap.mdx
+++ b/content/05-more/07-roadmap.mdx
@@ -1,12 +1,12 @@
 ---
-title: "Roadmap"
-metaTitle: ""
-metaDescription: ""
+title: 'Roadmap'
+metaTitle: ''
+metaDescription: ''
 ---
 
 ## Overview
 
-The roadmap reflects the _current plan_ for features that will be supported by Prisma in th future. The timeline for the listed features is non-committing since priorities might change and plans might need to be adjusted. 
+The roadmap reflects the _current plan_ for features that will be supported by Prisma in th future. The timeline for the listed features is non-committing since priorities might change and plans might need to be adjusted.
 
 The roadmap will be updated monthly to reflect any changes in prioritization.
 
@@ -16,7 +16,7 @@ Note that the roadmap only lists "larger" features which require a significant e
 
 ### Schema migrations with Prisma Migrate
 
-Prisma Migrate is a declarative database migration system. It lets you model your database via the Prisma schema and provides a CLI to map the Prisma schema to your database by generating the required SQL migration statements.  
+Prisma Migrate is a declarative database migration system. It lets you model your database via the Prisma schema and provides a CLI to map the Prisma schema to your database by generating the required SQL migration statements.
 
 Prisma Migrate is already available as an experimental feature. Learn more [here]().
 
@@ -47,7 +47,7 @@ Prisma Client currently doesn't provide an API for aggregating data. In the futu
 - Group By Expression
 - Avg
 - Median
-- Max 
+- Max
 - Min
 - Count
 - Sum
@@ -56,7 +56,7 @@ Prisma Client currently doesn't provide an API for aggregating data. In the futu
 
 ### Stored procedures
 
-Stored procedures let you implement and invoke custom logic in your database. 
+Stored procedures let you implement and invoke custom logic in your database.
 
 ### Triggers
 
@@ -64,7 +64,7 @@ SQL triggers are stored procedures that are invoked when a certain event occurs
 
 ### Phrase and fuzzy full text Search in Prisma Client JS
 
-Search database rows for a certain phrase, either in the exact or in a slightly modified ("fuzzy") version. 
+Search database rows for a certain phrase, either in the exact or in a slightly modified ("fuzzy") version.
 
 ### Views
 
@@ -72,7 +72,7 @@ SQL views are "virtual" tables. As opposed to a "real" table (that was creatd by
 
 ### Native database types
 
-Prisma currently only support a limited set of scalar types in the Prisma schema (learn more [here]()). 
+Prisma currently only support a limited set of scalar types in the Prisma schema (learn more [here]()).
 
 However, you can still make full use of the types that are available in your database by configuring them manually and then introspecting your database schema. Prisma will map the type to the a type that is currently supported in the Prisma schema, but when querying the database the actual database type will be used.
 
@@ -114,4 +114,3 @@ Prisma currently supports PostgreSQL, MySQL and SQLite databases as data sources
 ### Custom datasources
 
 Prisma currently supports PostgreSQL, MySQL and SQLite databases as data sources. In the future, it will be possible to write connectors for any data source. These data sources can be anything with an interface for data storage and/or retrieval.
-
diff --git a/content/05-more/index.mdx b/content/05-more/index.mdx
index bbff9f073e..5f7daf15d0 100644
--- a/content/05-more/index.mdx
+++ b/content/05-more/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: "More"
-metaTitle: "More"
-metaDescription: "More"
+title: 'More'
+metaTitle: 'More'
+metaDescription: 'More'
 ---
diff --git a/gatsby-config.js b/gatsby-config.js
index f71fd7dedb..0d693258b6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -18,6 +18,7 @@ module.exports = {
     'gatsby-transformer-remark',
     'gatsby-image',
     'gatsby-plugin-styled-components',
+    `gatsby-plugin-smoothscroll`,
     // 'gatsby-plugin-offline', // it causes infinite loop issue with workbox
     {
       resolve: `gatsby-plugin-mdx`,
diff --git a/package.json b/package.json
index 3bd9261102..dad8f60505 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "gatsby-plugin-offline": "^2.0.25",
     "gatsby-plugin-react-helmet": "^3.0.9",
     "gatsby-plugin-sharp": "^2.4.5",
+    "gatsby-plugin-smoothscroll": "^1.1.0",
     "gatsby-plugin-styled-components": "^3.0.7",
     "gatsby-plugin-typescript": "^2.0.11",
     "gatsby-remark-prismjs": "^3.2.5",
@@ -34,6 +35,7 @@
     "react-live": "^2.2.2",
     "react-loadable": "^5.5.0",
     "react-testing-library": "^6.0.0",
+    "smooth-scroll": "^16.1.2",
     "styled-components": "^4.1.3",
     "write": "^2.0.0"
   },
diff --git a/src/components/customMdx/copy.tsx b/src/components/customMdx/copy.tsx
index a590c72bb1..67b6b6d105 100644
--- a/src/components/customMdx/copy.tsx
+++ b/src/components/customMdx/copy.tsx
@@ -8,9 +8,9 @@ interface CopyProps {
 
 type CopyButtonProps = CopyProps & React.ReactNode;
 
-const CopyButton = ({ text, children}: CopyButtonProps) => {
+const CopyButton = ({ text, children }: CopyButtonProps) => {
   const [copied, setCopied] = React.useState(false);
-  let copyTimer:any;
+  let copyTimer: any;
 
   const onCopyContent = () => {
     setCopied(true);
diff --git a/src/components/customMdx/headings.tsx b/src/components/customMdx/headings.tsx
index a5004acc88..5090d4b211 100644
--- a/src/components/customMdx/headings.tsx
+++ b/src/components/customMdx/headings.tsx
@@ -15,10 +15,10 @@ export default function makeHeading(Component: any) {
       props.id = id;
     }
     return (
-      <Component {...props} id={`#${id}`}>
+      <Component {...props} id={`${id}`}>
         {/* <a href={`#${id}`}> */}
         <A className="title-link" href={`#${id}`}>
-        {/* <StyledAnchor /> */}
+          {/* <StyledAnchor /> */}
           {children}
         </A>
         {/* </a> */}
diff --git a/src/components/customMdx/index.tsx b/src/components/customMdx/index.tsx
index bad1b7672d..5fb3265ee1 100644
--- a/src/components/customMdx/index.tsx
+++ b/src/components/customMdx/index.tsx
@@ -4,16 +4,16 @@ import Pre from './pre';
 import makeHeading from './headings';
 
 export default {
-  h1: () => (<h1 style={{display: 'none'}} />),
-  h2: (props: any) => (makeHeading('h2')({...props})),
-  h3: (props: any) => (makeHeading('h3')({...props})),
-  h4: (props: any) => (makeHeading('h4')({...props})),
-  h5: (props: any) => (makeHeading('h5')({...props})),
-  h6: (props: any) => (makeHeading('h6')({...props})),
+  h1: () => <h1 style={{ display: 'none' }} />,
+  h2: (props: any) => makeHeading('h2')({ ...props }),
+  h3: (props: any) => makeHeading('h3')({ ...props }),
+  h4: (props: any) => makeHeading('h4')({ ...props }),
+  h5: (props: any) => makeHeading('h5')({ ...props }),
+  h6: (props: any) => makeHeading('h6')({ ...props }),
   // h1: (props: any) => (
   //   <h1 className="heading1" id={props.children.replace(/\s+/g, '-').toLowerCase()} {...props} />
   // ),
-  // h2: (props: any) => { 
+  // h2: (props: any) => {
   //   console.log(props)
   //   const text = stringify(props.children);
   //   const id = slug(text);
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 47e24fa761..18c7f08214 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -22,7 +22,7 @@ const HeaderWrapper = styled.div`
   img {
     margin-bottom: 0;
   }
-  padding: 30px 10% 24px;
+  padding: 30px 20% 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/src/components/layout.css b/src/components/layout.css
index ef6b0de337..d63d3b8d68 100644
--- a/src/components/layout.css
+++ b/src/components/layout.css
@@ -33,13 +33,18 @@ h5,
 h6 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 500;
+  color: #1a202c !important;
 }
 
-h2, h2 > a {
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
   font-weight: 600;
   margin-top: 2rem;
   text-decoration: none;
-  color: #1A202C !important;
+  color: #1a202c !important;
 }
 
 h2 > a:focus::before,
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index c79d0122ee..382279c0fc 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -28,7 +28,7 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
     display: flex;
     width: 100%;
     // padding: 0 12rem;
-    padding: 0 10%;
+    padding: 0 20%;
     @media only screen and (max-width: 767px) {
       display: block;
     }
@@ -64,7 +64,7 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
         <Header headerProps={header} />
         <Wrapper>
           {/* <LeftSideBarWidth> */}
-            <Sidebar />
+          <Sidebar />
           {/* </LeftSideBarWidth> */}
           <Content>
             <MaxWidth>{children}</MaxWidth>
diff --git a/src/components/pageBottom.tsx b/src/components/pageBottom.tsx
index 7a152ada77..05e6a66c54 100644
--- a/src/components/pageBottom.tsx
+++ b/src/components/pageBottom.tsx
@@ -21,7 +21,7 @@ const Feedback = styled.div`
     font-weight: bold;
     letter-spacing: 0.01em;
     text-transform: uppercase;
-    color: #a0aec0;
+    color: #a0aec0 !important;
   }
   .moods a {
     margin-right: 0.5rem;
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 49c5c15704..a1200d7054 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -12,6 +12,7 @@ type SEOProps = {
 const SEO = ({ title, description, keywords }: SEOProps) => (
   <Helmet>
     <meta charSet="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=0, shrink-to-fit=yes" />
     {title && <title>{title}</title>}
     {description && <meta name="title" content={description} />}
     {description && <meta name="description" content={description} />}
diff --git a/src/components/sidebar/tree.tsx b/src/components/sidebar/tree.tsx
index 0116d6cc4b..8552ae222c 100644
--- a/src/components/sidebar/tree.tsx
+++ b/src/components/sidebar/tree.tsx
@@ -35,7 +35,9 @@ const calculateTreeData = (edges: any) => {
           tmp = {
             label: part,
             items: [],
-            topLevel
+            topLevel,
+            experimental,
+            staticLink,
           };
           prevItems.push(tmp);
         }
@@ -65,7 +67,7 @@ const calculateTreeData = (edges: any) => {
           staticLink,
           duration,
           experimental,
-          topLevel
+          topLevel,
         });
       }
 
diff --git a/src/components/sidebar/treeNode.tsx b/src/components/sidebar/treeNode.tsx
index d39782ea4b..b3937aef80 100644
--- a/src/components/sidebar/treeNode.tsx
+++ b/src/components/sidebar/treeNode.tsx
@@ -64,6 +64,9 @@ const ListItem = styled.li`
       margin-top: 24px;
     }
   }
+  &.bottom-level {
+    margin-left: 20px;
+  }
   &.static-link > a {
     color: #a0aec0 !important;
     text-transform: uppercase;
@@ -98,9 +101,11 @@ const TreeNode = ({
   const active =
     location && (location.pathname === url || location.pathname === config.gatsby.pathPrefix + url);
 
-  const calculatedClassName = `${className} ${active ? 'active' : ''} ${
-    topLevel ? 'top-level' : ''
-  } ${staticLink ? 'static-link' : ''}`;
+  const calculatedClassName = `
+    ${className} ${active ? 'active' : ''} 
+    ${topLevel ? 'top-level' : ''} 
+    ${staticLink ? 'static-link' : ''}
+    `;
 
   items.sort((a: any, b: any) => {
     if (a.label < b.label) {
@@ -117,11 +122,15 @@ const TreeNode = ({
       {title && label !== 'index' && (
         <a href={url.split('/').includes('index') ? null : url}>
           {title && hasChildren && !staticLink && !topLevel ? (
-            <button onClick={collapse} aria-label="collapse" className="item-collapser">
-              {!isCollapsed ? <ArrowDown /> : <ArrowRight />}
-            </button>
-          ) : null}
-          {title}
+            <a onClick={collapse}>
+              <button aria-label="collapse" className="item-collapser">
+                {!isCollapsed ? <ArrowDown /> : <ArrowRight />}
+              </button>
+              {title}
+            </a>
+          ) : (
+            title
+          )}
           {duration && <span className="tag">{duration}</span>}
           {experimental && <span className="tag">Experimental</span>}
         </a>
diff --git a/src/components/toc.tsx b/src/components/toc.tsx
index afceb677a4..2f7898da48 100644
--- a/src/components/toc.tsx
+++ b/src/components/toc.tsx
@@ -4,6 +4,7 @@ import { AllArticlesTOC } from '../interfaces/TOC.interface';
 import { useTOCQuery } from '../hooks/useTOCQuery';
 import { slug } from '../utils/slug';
 import { stringify } from '../utils/stringify';
+import scrollTo from 'gatsby-plugin-smoothscroll';
 
 const TOCContent = styled.aside`
   // padding: 2rem 0 0;
@@ -20,6 +21,11 @@ const ChapterTitle = styled.h1`
   color: #a0aec0;
 `;
 
+const scrollToId = (e: any) => {
+  const id = e.target && e.target.href && e.target.href.split('#')[1];
+  scrollTo(`#${id}`);
+};
+
 const TOC = ({ location }: any) => {
   const { allMdx }: AllArticlesTOC = useTOCQuery();
   let navItems: any[] = [];
@@ -37,7 +43,10 @@ const TOC = ({ location }: any) => {
 
               return (
                 <li key={index}>
-                  <a href={`#${itemId}`}>{stringify(innerItem.title)}</a>
+                  {/* <a href={`#${itemId}`}>{stringify(innerItem.title)}</a> */}
+                  <a href={`#${itemId}`} onClick={scrollToId}>
+                    {stringify(innerItem.title)}
+                  </a>
                 </li>
               );
             });
diff --git a/src/layouts/articleLayout.tsx b/src/layouts/articleLayout.tsx
index f552308006..40b5bd160c 100644
--- a/src/layouts/articleLayout.tsx
+++ b/src/layouts/articleLayout.tsx
@@ -52,6 +52,11 @@ const ArticleLayout = ({ data, ...props }: ArticleLayoutProps) => {
     });
   });
 
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line global-require
+    require('smooth-scroll')('a[href*="#"]');
+  }
+
   const getParentTitle = () => allContent?.find(mdx => mdx.slug === slug).parentTitle.slice(0, -2);
 
   return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ae6f522ac3..63a1d4ea6a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,5 @@
-import { Link } from 'gatsby';
 import React from 'react';
 import styled from 'styled-components';
-import Helmet from 'react-helmet';
 import config from '../../config';
 import Layout from '../components/layout';
 import TopSection from '../components/topSection';
diff --git a/src/utils/slug.ts b/src/utils/slug.ts
index 832f59a7ab..58270509d2 100644
--- a/src/utils/slug.ts
+++ b/src/utils/slug.ts
@@ -1,11 +1,11 @@
 export function slug(title: string) {
-    return title
-      .replace(/\s/g, '-')
-      .replace('.md', '')
-      .replace(/\?/g, '')
-      .replace(/\&/g, 'and')
-      .replace(/"|'|`/g, '')
-      .replace(/!/g, '')
-      .replace(/[\(\)]/g, '')
-      .toLowerCase()
-  }
\ No newline at end of file
+  return title
+    .replace(/\s/g, '-')
+    .replace('.md', '')
+    .replace(/\?/g, '')
+    .replace(/\&/g, 'and')
+    .replace(/"|'|`/g, '')
+    .replace(/!/g, '')
+    .replace(/[\(\)]/g, '')
+    .toLowerCase();
+}
diff --git a/yarn.lock b/yarn.lock
index 7f75a6bfba..55f0d1059d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6391,6 +6391,13 @@ gatsby-plugin-sharp@^2.4.5:
     svgo "1.3.2"
     uuid "^3.4.0"
 
+gatsby-plugin-smoothscroll@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-smoothscroll/-/gatsby-plugin-smoothscroll-1.1.0.tgz#c98364e49125dcc87146406db0bc707a413653c7"
+  integrity sha512-htYkMLlTSU4mxGhiXqkDx3M6PBsEjGCEz0GbcsEQ1q6yxMxeyKyr1quLZQdJFGzosIoMe4IS4yLP0L4UsAFdGg==
+  dependencies:
+    smoothscroll-polyfill "^0.4.4"
+
 gatsby-plugin-styled-components@^3.0.7:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.2.0.tgz#3d7b491fa8ae71f70c068a2f6fd5623279a9dd09"
@@ -13259,6 +13266,16 @@ slugify@^1.4.0:
   resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.0.tgz#c9557c653c54b0c7f7a8e786ef3431add676d2cb"
   integrity sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ==
 
+smooth-scroll@^16.1.2:
+  version "16.1.2"
+  resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-16.1.2.tgz#77e70bdaaee849a6a24420741406a7d99c53b819"
+  integrity sha512-zo/61lPWCxzsjYfxbqr9a94PIFSU840+0e053+n6Hf0RcX8MtjtNXNSInEYRlbGaJ2/nezyEWPywsm3TCya0vQ==
+
+smoothscroll-polyfill@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
+  integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
+
 snake-case@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"