diff --git a/book/src/SUMMARY.md b/book/src/SUMMARY.md
index 220397c8e..6a52d6264 100644
--- a/book/src/SUMMARY.md
+++ b/book/src/SUMMARY.md
@@ -20,4 +20,6 @@
 - [Testing](./guides/testing.md)
 - [Animating](./guides/animating.md)
 - [Virtualizing](./guides/virtualizing.md)
+- [Devtools](./guides/devtools.md)
+- [Publishing]()
 
diff --git a/book/src/differences_with_dioxus.md b/book/src/differences_with_dioxus.md
index 952c6500f..72cc46c02 100644
--- a/book/src/differences_with_dioxus.md
+++ b/book/src/differences_with_dioxus.md
@@ -7,8 +7,8 @@ These are the main differences between Freya and the different Dioxus renderers
 | Category                             | Freya            | Dioxus                          |
 |--------------------------------------|------------------|---------------------------------|
 | **Elements, attributes and events**  | Custom           | HTML                            |
-| **Layout**                           | Custom ([`torin`](https://github.com/marc2332/freya/tree/main/torin))   | Browser and [`taffy`](https://github.com/DioxusLabs/taffy)               |
+| **Layout**                           | Custom ([`torin`](https://github.com/marc2332/freya/tree/main/torin))   | WebView and [`taffy`](https://github.com/DioxusLabs/taffy)               |
 | **Renderer**                         | Skia             | WebView or WGPU                 |
 | **Components library**               | Custom           | None, but can use CSS libraries |
-| **Devtools**                         | Custom           | Webviews already ship them      |
+| **Devtools**                         | Custom           | Provided in Webview             |
 | **Headless testing runner**          | Custom           | None                            |
diff --git a/book/src/guides/devtools.md b/book/src/guides/devtools.md
new file mode 100644
index 000000000..140a5501b
--- /dev/null
+++ b/book/src/guides/devtools.md
@@ -0,0 +1,13 @@
+# Devtools
+
+Devtools can be enabled by adding the `devtools` to Freya.
+
+
+```toml
+// Cargo.toml
+
+[dependencies]
+freya = { version = "0.1", features = ["devtools"] }
+
+```
+
diff --git a/book/src/guides/getting_started.md b/book/src/guides/getting_started.md
index d7bb508aa..b8574e5b4 100644
--- a/book/src/guides/getting_started.md
+++ b/book/src/guides/getting_started.md
@@ -1,6 +1,6 @@
 # Getting started
 
-I encourage you to learn how [Dioxus works](https://dioxuslabs.com/docs/0.3/guide/en/describing_ui/index.html), when you are done you can continue here. Also make sure you have the followed the [environment setup](../setup.html) guide.
+I encourage you to learn how [Dioxus works](https://dioxuslabs.com/learn/0.4/guide/your_first_component), when you are done you can continue here. Also make sure you have the followed the [environment setup](../setup.html) guide.
 
 Now, let's start by creating a hello world project.
 
@@ -48,7 +48,6 @@ fn app(cx: Scope) -> Element {
 
     render!(
         rect {
-            overflow: "clip",
             height: "100%",
             width: "100%",
             background: "rgb(35, 35, 35)",
@@ -67,3 +66,7 @@ Simply run with `cargo`:
 ```sh
 cargo run
 ```
+
+Nice! You have created your first Freya app. 
+
+You can learn more with the [examples](https://github.com/marc2332/freya/tree/main/examples) in the repository.
\ No newline at end of file
diff --git a/book/src/guides/hot_reload.md b/book/src/guides/hot_reload.md
index a92165df9..de10f643b 100644
--- a/book/src/guides/hot_reload.md
+++ b/book/src/guides/hot_reload.md
@@ -1,6 +1,6 @@
 # Hot reload
 
-Freya supports Dioxus [hot reload](https://dioxuslabs.com/docs/0.3/guide/en/getting_started/hot_reload.html), this means you can update the `layout` and `styling` of your app on the fly, without having to compile any rust code.
+Freya supports Dioxus hot reload, this means you can update the `layout` and `styling` of your app on the fly, without having to compile any rust code.
 
 ## Setup
 
diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md
index 228f88dad..bec69624c 100644
--- a/book/src/guides/layout.md
+++ b/book/src/guides/layout.md
@@ -6,7 +6,7 @@ Learn how the layout attributes work.
 - [`min_width & min_height`](#min_width_&_min_height)
 - [`max_width & max_height`](#max_width_&_max_height)
 - [`Size units`](#size_units)
-  - [`Static values`](#static-values)
+  - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
   - [`calc()`](#calc)
 - [`direction`](#direction)
diff --git a/book/src/guides/style.md b/book/src/guides/style.md
index 568d11ed2..a9184d8e3 100644
--- a/book/src/guides/style.md
+++ b/book/src/guides/style.md
@@ -2,15 +2,15 @@
 
 Learn how the style attributes work.
 
-- [background](#background)
-- [shadow](#shadow)
-- [corner\_radius & corner\_smoothing](#corner_radius-&-corner_smoothing)
-- [border](#border)
-- [overflow](#overflow)
-- [Color syntax](#color-syntax)
-    - [Static colors](#static-colors)
-    - [rgb() / hsl()](#rgb--hsl)
-- [Inheritance](#inheritance)
+- [`background`](#background)
+- [`shadow`](#shadow)
+- [`corner radius & corner smoothing`](#corner_radius--corner_smoothing)
+- [`border`](#border)
+- [`overflow`](#overflow)
+- [`Color syntax`](#color-syntax)
+    - [`Static colors`](#static-colors)
+    - [`rgb() / hsl(`)](#rgb--hsl)
+- [`Inheritance`](#inheritance)
 
 ### background
 
diff --git a/book/src/guides/testing.md b/book/src/guides/testing.md
index 9024d70ca..3f9a31129 100644
--- a/book/src/guides/testing.md
+++ b/book/src/guides/testing.md
@@ -43,10 +43,10 @@ Here, the component has a state that is `false` by default, but, once mounted it
 async fn dynamic_test() {
     fn dynamic_component(cx: Scope) -> Element {
         let state = use_state(cx, || false);
-        let state_setter = state.setter();
 
-        use_effect(cx, (), move |_| async move {
-            state_setter(true);
+        use_effect(cx, (), |_| {
+            state.set(true);
+            async move { }
         });
 
         render!(
@@ -123,7 +123,7 @@ async fn event_test() {
 
 ## Testing configuration
 
-The `launch_test` comes with a default configuration, but you can also pass your own with the `launch_test_with_config` function.
+The `launch_test` comes with a default configuration, but you can also pass your own config with the `launch_test_with_config` function.
 
 Here is an example of how to can set our custom window size:
 
diff --git a/hooks/src/use_camera.rs b/hooks/src/use_camera.rs
index 68040a81d..6a17ccaec 100644
--- a/hooks/src/use_camera.rs
+++ b/hooks/src/use_camera.rs
@@ -3,13 +3,13 @@ use std::{
     time::Duration,
 };
 
+use crate::use_platform;
 use dioxus_core::{AttributeValue, ScopeState};
 use dioxus_hooks::{to_owned, use_effect, use_state, UseState};
 use freya_common::EventMessage;
 use freya_node_state::{CustomAttributeValues, ImageReference};
 use nokhwa::{pixel_format::RgbFormat, utils::RequestedFormat, Camera, NokhwaError};
 use tokio::time::sleep;
-use crate::use_platform;
 
 pub use nokhwa::utils::{CameraIndex, RequestedFormatType, Resolution};
 
diff --git a/testing/tests/test.rs b/testing/tests/test.rs
index 16667dc7f..7fae0ac5f 100644
--- a/testing/tests/test.rs
+++ b/testing/tests/test.rs
@@ -23,10 +23,10 @@ async fn no_state() {
 async fn with_state() {
     fn stateful_app(cx: Scope) -> Element {
         let state = use_state(cx, || false);
-        let state_setter = state.setter();
 
-        use_effect(cx, (), move |_| async move {
-            state_setter(true);
+        use_effect(cx, (), |_| {
+            state.set(true);
+            async move {}
         });
 
         render!(