diff --git a/examples/basic/next.config.js b/examples/basic/next.config.js
index 819d9006a..3f8252f79 100644
--- a/examples/basic/next.config.js
+++ b/examples/basic/next.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/basic' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/basic' : '/',
 };
diff --git a/examples/landing/next.config.js b/examples/landing/next.config.js
index 7cc91936a..d7b8e340a 100644
--- a/examples/landing/next.config.js
+++ b/examples/landing/next.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/landing' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/landing' : '/',
 };
diff --git a/site/docs/api/useEditor.md b/site/docs/api/useEditor.md
index 22e1d4b45..b97c1cc80 100644
--- a/site/docs/api/useEditor.md
+++ b/site/docs/api/useEditor.md
@@ -58,7 +58,7 @@ const { connectors, actions, query, ...collected } = useEditor(collector);
         "(sourceNodeId: NodeId, targetNodeId: NodeId, pos: {x: number, y: number}, nodesToDOM?: (node: Node) => HTMLElement = node => node.dom)",
         "Given the target Node and mouse coordinates on the screen, determine the best possible location to drop the source Node. By default, the Node's DOM property is taken into consideration."
       ],
-      ["node", "(id: NodeId) => NodeHelpers", "Returns an object containing helper methods to describe the specified Node. Click <a href='/docs/api/helpers/'>here</a> for more information."],
+      ["node", "(id: NodeId) => NodeHelpers", "Returns an object containing helper methods to describe the specified Node. Click <a href='/docs/api/helpers'>here</a> for more information."],
       ["parseReactElement", "(element: React.ReactElement) => Object", [
         ["toNodeTree", "(normalize?: (node: Node, jsx: React.ReactElement) => void) => NodeTree", "Parse a given React element into a NodeTree"]
       ]],
diff --git a/site/docs/concepts/editor-components.md b/site/docs/concepts/editor.md
similarity index 99%
rename from site/docs/concepts/editor-components.md
rename to site/docs/concepts/editor.md
index 3ba31a6d7..ce77f692d 100755
--- a/site/docs/concepts/editor-components.md
+++ b/site/docs/concepts/editor.md
@@ -1,5 +1,5 @@
 ---
-id: editor-components
+id: editor
 title: Interacting with the Editor
 ---
 
diff --git a/site/docs/concepts/nodes.md b/site/docs/concepts/nodes.md
index 0a0041d67..f54f8847b 100755
--- a/site/docs/concepts/nodes.md
+++ b/site/docs/concepts/nodes.md
@@ -54,7 +54,7 @@ By default, a non-Canvas Node is created. So, how do we actually create a Canvas
 
 In the above example, using the `<Element />` component with the `canvas` prop, we've created a Canvas node of the type `div`. Since our `div` element is now handled by a Canvas node, therefore it is now a droppable region. On the other hand, since `h1`, `MyComp` and `MyContainerComp` are child Nodes of a Canvas, they are now draggable. 
 
-The `<Element />` component can also be used to configure other values of a Node, which is further detailed [here](../api/Element)
+The `<Element />` component can also be used to configure other values of a Node, which is further detailed [here](../api/element)
 
 <!-- We could also specify other things with the `<Element />` component, such as we could tell Craft to prevent parsing the children of an element as Nodes:
 
diff --git a/site/docs/concepts/serializing.md b/site/docs/concepts/serializing.md
deleted file mode 100755
index 22a4ee6c1..000000000
--- a/site/docs/concepts/serializing.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: serializing
-title: Serializing
----
-
-### Serializing
-We can serialize the editor's current state of Nodes into JSON by calling the `serialize` method provided by the `useEditor` hook
-```jsx
-const Toolbar = () => {
-  const { query } = useEditor();
-
-  return (
-    <a onClick={() => console.log(query.serialize())}>Serialize</a>
-  )
-}
-```
-
-## Resolvers
-Craft.js exports the nodes in its internal state into a serialzable JSON format. For this to be possible, complex objects such as functions cannot be included - which means User Components cannot be serialised. 
-
-To overcome this is why when setting up Craft.js with your React application, one of the first things you have to do is to specify a map of user components in the `resolver` prop of the `Manager` component.
-
-
-```jsx
-import {Text, Hero, Container} from ".../myproject/components";
-
-const App = () => {
-  return (
-    <Manager resolvers={{
-      "MyText" : Text
-    }}>
-      <Frame>
-        <Element is="div">
-          <h1>Hi</h1>
-          <Text text="Hi" />
-        </Element>
-      </Frame>
-    </Manager>
-  )
-}
-```
-
-Given the above example, when a `Node` that is of the type  `Text` is serialised, it will return something like this:
-```json
-"node-randomId": {
-  "type": {
-    "resolvedName": "MyText"
-  },
-  "props": {
-    "text" : "Hi World!"
-  },
-  "parent": "ROOT",
-  "displayName": "Card"
-  ...
-}
-```
-Notice how the `resolvedName` is `MyText` rather than the name of the component, `Text`. This is because in our `resolver`, we mapped `MyText` to our Text component. Now, when we deserialize - Craft.js is easily able to find `MyText` in our resolver, and knows the component it refers to.
diff --git a/site/docs/dev.md b/site/docs/dev.md
deleted file mode 100644
index 956d8d711..000000000
--- a/site/docs/dev.md
+++ /dev/null
@@ -1,263 +0,0 @@
----
-id: dev
-title: Craft.js - Build any page editor with React
----
-
-
-
-You know a web application is fancy when it has a page editor. Without a doubt, a page editor helps boost user experience significantly. If you're a frontend developer and have been tasked to be build one before, then you know precisely the difficulties and challenges of building one.
-
-Existing libraries such as Grape.js or react-page are great for a working out-of-the-box page editor solution. However, as soon as you need to customise the look and feel of the page editor itself, you will find yourself hacking in the library's code.
-
-
-## Introducing Craft.js
-Craft.js is a React framework to build any type of page editor. Instead of providing a working page editor implementation with a user interface, Craft.js provides an abstraction for you to implement your own page editor upon. It comes backed-in with an extensible drag-n-drop system which handles the way React elements should be rendered/updated, and a cohesive API to interact with the editor which you can additionally implement your own features on top of.
-
-### TL;DR
-- Design your own user interface for your page editor
-- Write React components that end-user could edit
-- Govern drag-and-drop conditions for your components
-- Control how your components should be edited. From simple text fields to content editables and drag to resize; if you can do it in React, then you can do it with Craft.js.
-
-
-## Editable React Components
-Let's start with a simple Card component like this:
-
-```jsx
-const Card = ({title}) => {
-  return (
-    <div>
-      <h2>{title}</h2>
-      <div id="p-only">
-        <p>Hi</p>
-      </div>
-    </div>
-  )
-}
-```
-
-First, to integrate it with with Craft.js' drag-and-drop system, we just need to do the following modifications:
-
-```jsx
-import {useNode} from "@craftjs/core";
-
-const Card = ({title}) => {
-  const { connectors: { connect, drag } } = useNode();
-  return (
-    <div ref={dom => connect(drag(dom))}>
-      <h2>{title}</h2>
-      <div id="p-only">
-        <p>Hi</p>
-      </div>
-    </div>
-  )
-}
-```
-
-What's happening here? 
-- We passed the `connect` connector to the root element of our component; this tells Craft.js that this element represents the `Card` component. Hence, the dimensions of the specified element will be taken into consideration during drag and drop events.
-- Then, we also passed `drag` connector to the same root element; this adds the drag handlers to the DOM. If the component is rendered as the child of a `<Canvas />`, the user will be able to drag this element and it will move the entire Text component.
-
-
-Next, we might want to be able to control the drag-n-drop rules of our Card component. For example, let's say we only want our Card component to be draggable as long as its `title` prop is not "No Drag". We can achieve this easily as such:
-```jsx
-const Card = () => {...}
-
-Card.craft = {
-  rules: {
-    canDrag: (node) => node.data.props.title != "No Drag"
-  }
-}
-```
-
-#### Droppable regions
-Next, let's take a look at the `#p-only` element we specified in our Card component. What if we want this area to be droppable where only `p` can be dropped? 
-
-This is where the`<Canvas />` component provided by Craft.js becomes useful. It defines a droppable region where each of its immediate child is draggable.
-
-
-```jsx
-import {useNode, Canvas} from "@craftjs/core";
-
-const Card = ({title}) => {
-  const { connectors: { connect, drag } } = useNode();
-  return (
-    <div ref={dom => connect(drag(dom))}>
-      <h2>{title}</h2>
-      <Canvas id="p-only">
-        <p>Hi</p>
-      </Canvas>
-    </div>
-  )
-}
-```
-Your next question might be about how we control our newly created droppable region. The `<Canvas />` component accepts an `is` prop which can be either a HTML element or a React component (by default, it's a `div`). So, if we supply a React component, we can essentially achieve the same design flexibility as we have with our Card component:
-
-```jsx
-import {useNode, Canvas} from "@craftjs/core";
-
-const Container = ({children}) => {
-  const { connectors: {connect} } = useNode();
-  return (
-    <div ref={dom => connect(dom)}>
-      {children}
-    </div>
-  )
-}
-
-Container.craft = {
-  rules: {
-    canMoveIn: (incomingNode) => incomingNode.data.type == "p"
-  }
-}
-
-const Card = ({title}) => {
-  const { connectors: { connect, drag } } = useNode();
-  return (
-    <div ref={dom => connect(drag(dom))}>
-      <h2>{title}</h2>
-      <Canvas id="p-only" is={Container}>
-        <p>Hi</p>
-      </Canvas>
-    </div>
-  )
-}
-```
-
-Let's break this down a bit. Our `<Container />` component is being rendered as a droppable region. This means, all dropped elements will be rendered in the component's `children` prop. Next, we also specified the `connectors` just as we did previously. This time, we specified a `canMoveIn` rule where only elements with the `p` tag will be accepted into the component.
-
-## Control editing behaviours
-Of course, any page editor must allow the end-user to edit the elements that are rendered. With Craft.js, you are in control of this as well. 
-
-Let's make our `h2` element content editable so our users could visually edit the `title` prop:
-
-```jsx
-const Card = ({title}) => {
-  const { connectors: { connect, drag }, setProp } = useNode();
-  return (
-    <div ref={dom => connect(drag(dom))}>
-      <h2 contentEditable onKeyUp={e => setProp(e.target.innerText)}>{title}</h2>
-      ...
-    </div>
-  )
-}
-```
-> In a real application, you may want to consider using react-contenteditable
-
-Obviously, we do not want the element to be content editable all the time; perhaps only when our Card component is actually clicked:
-
-```jsx
-const Card = ({title}) => {
-  const { connectors: { connect, drag }, setProp, isSelected } = useNode((node) => ({
-    isSelected: node.events.selected
-  }));
-
-  return (
-    <div ref={dom => connect(drag(dom))}>
-      <h2 contentEditable={isSelected} onKeyUp={e => setProp(e.target.innerText)}>{title}</h2>
-      ...
-    </div>
-  )
-}
-```
-What we are doing is essentially accessing Craft's internal state and retrieving information about the current instance of our Card component. In this case, we are retrieving the `selected` event state which returns `true` when the user clicks on the DOM specified by the `connect` connector of the Component.
-
-## Your page editor, your user interface
-
-Essentially, Craft.js exposes these few React components:
-- `Editor` creates the Editor context and sets everything up
-- `Frame` defines the editable area
-
-As you may have noticed, none of these are UI components. Instead, they are intended to be plugged into any user interface you would like to implement for your page editor.
-
-Let's take a look at a super simple interface that we could design:
-
-```jsx
-// pages/index.js
-import React from 'react';
-
-export default function App() {
-  return (
-    <>
-      <h2>My page editor</h2>
-      <Editor> {/* sets everything up */ }
-        <div>
-          <Frame> {/* This part is now editable */ }
-            <Canvas is="div" style={{background: "#eee"}}> { /* Creates a gray droppable div */ }
-              <h2>Drag me around</h2> 
-              <p>I'm draggable too</h2>
-              <Canvas is="div"> {/* a div that is both droppable and draggable */}
-                <h2>Hi</h2> {/* a draggable h2 */}
-              </Canvas>
-            </Canvas>
-          </Frame>
-        </div>
-      </Editor>
-    </>
-  );
-}
-```
-
-### Interacting with the editor
-Your user interface will most likely need to display some information or perform certain editor-related actions.
-
-Let's say we want to design a Toolbar component that does the following things:
- - Tells us the the type of the currently selected element
- - Has a button to save the current editor state
- - Has another button to load the last saved editor state
-
-```jsx
-import React, {useState} from 'react';
-
-export default function App() {
-  return (
-    <>
-      <h2>My page editor</h2>
-      <Editor> 
-        <Toolbar /> {/* Add this */}
-        <div>
-          <Frame>
-            ...
-          </Frame>
-        </div>
-      </Editor>
-    </>
-  );
-}
-
-const Toolbar = () => {
-  const [savedState, setSavedState] = useState();
-  const { selectedType, actions, query } = useEditor(state => {
-    const selectedId = state.events.selected;
-    return {
-      selectedType: selectedId && state.nodes[selectedId].data.type
-    }
-  });
-
-  return (
-    <div>
-      <h2>Currently selected: {selectedType} </h2>
-      <a onClick={() => {
-        const editorState = query.serialize();
-        setSavedState(editorState);
-      }}>Save checkpoint</a>
-     {
-       savedState ? (
-         <a onClick={() => 
-          actions.deserialize(editorState)
-         }>Load from checkpoint</a>
-       ) : null
-     }
-    </div>
-  )
-}
-```
-
-Let's break this down:
-- First, we access the editor's state to retrieve the type of the currently selected element
-- Then, when the "Save Checkpoint" button is clicked, we use the `serialize` query which tells the editor to return its state in a serialised JSON form. We then save the JSON output in our component's state
-- Once we have the JSON, we display the "Load from checkpoint" button. When this button is clicked, we simply call the `deserialize` editor action which essentially returns the editor to the state stored in the JSON output.
-
-
-## Closing words
-This has been a high-level overview of Craft.js and we've only covered some very basic examples. We've seen how we could easily control almost every aspect of the page editor experience. Hopefully, this article has given you an idea on the possibilities of what you can do with Craft.js.
diff --git a/site/docs/sponsor.md b/site/docs/sponsor.md
new file mode 100755
index 000000000..70f49a806
--- /dev/null
+++ b/site/docs/sponsor.md
@@ -0,0 +1,10 @@
+---
+id: sponsor
+title: Sponsor
+---
+
+Craft.js is released under the [MIT license](https://github.com/prevwong/craft.js/blob/master/LICENSE) and is built with 100% love. Since it's first release in early 2020, it has been used by various individuals and companies to power their own page editor solution. 
+
+In July 2022, I left my full-time job and in that time to focus on Craft and it's [future](https://github.com/prevwong/craft.js/issues/507). If you found this project useful and would like to ensure its continued development, please consider sponsoring/donating to the project. Your contribution would mean a lot to me!
+
+You can choose to contribute via [Github Sponsors](https://github.com/sponsors/prevwong), [OpenCollective](https://opencollective.com/craftjs), [Patreon](https://patreon.com/imprev) or [Ko-fi](https://ko-fi.com/prevwong).
\ No newline at end of file
diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js
index 3f6ee22c2..74d9de756 100755
--- a/site/docusaurus.config.js
+++ b/site/docusaurus.config.js
@@ -18,6 +18,7 @@ module.exports = {
       appId: 'PH8YTBNA7Q',
       apiKey: '7a21621f37e010ec9a8c39298d71b045',
       indexName: 'craft-js',
+      contextualSearch: false
     },
     prism: {
       theme: require('prism-react-renderer/themes/shadesOfPurple'),
@@ -38,7 +39,7 @@ module.exports = {
           position: 'right',
           items: [
             {
-              to: 'pathname:///examples/landing/',
+              to: 'pathname:///examples/landing',
               label: 'Landing',
             },
             {
@@ -47,7 +48,7 @@ module.exports = {
             },
           ],
         },
-        { to: 'support', label: 'Support', position: 'right' },
+        { to: 'docs/sponsor', label: 'Sponsor', position: 'right' },
         {
           href: 'https://github.com/prevwong/craft.js',
           label: 'GitHub',
diff --git a/site/package.json b/site/package.json
index d61658cfe..4b00a93ee 100755
--- a/site/package.json
+++ b/site/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@docusaurus/core": "2.4.3",
-    "@docusaurus/plugin-client-redirects": "2.4.3",
     "@docusaurus/preset-classic": "2.4.3",
     "classnames": "2.3.1",
     "react": "18.2.0",
diff --git a/site/sidebars.js b/site/sidebars.js
index 9ec7a2c9f..d8c7faaa0 100755
--- a/site/sidebars.js
+++ b/site/sidebars.js
@@ -8,11 +8,11 @@
 module.exports = {
   docs: {
     Migrating: ['migrating/migrating-0.1.x'],
-    Introduction: ['overview', 'acknowledgements'],
+    Introduction: ['overview', 'acknowledgements', 'sponsor'],
     'Core Concepts': [
       'concepts/nodes',
       'concepts/user-components',
-      'concepts/editor-components',
+      'concepts/editor',
     ],
     Guides: ['guides/basic-tutorial', 'guides/save-load-state'],
     'API Reference': [
diff --git a/site/src/css/custom.css b/site/src/css/custom.css
index 063d0fe79..7b2de182d 100755
--- a/site/src/css/custom.css
+++ b/site/src/css/custom.css
@@ -29,7 +29,7 @@ html {
   --ifm-color-primary-light: rgb(70, 203, 174);
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-navbar-background-color: #39423e;
+  --ifm-navbar-background-color: #1e1e1e;
   --ifm-navbar-link-color: rgba(255, 255, 255, 0.85);
   --ifm-font-family-base: 'acumin-pro', 'Source Sans Pro', system-ui,
     -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
@@ -63,7 +63,7 @@ html {
 }
 
 .navbar__title {
-  font-size: 20px;
+  font-size: 1.3rem;
   font-weight: 200;
   color: #fff;
   margin-top: -2px;
diff --git a/site/src/pages/support.js b/site/src/pages/support.js
deleted file mode 100644
index 9b4f8f0ba..000000000
--- a/site/src/pages/support.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-
-function Support() {
-  return (
-    <Layout title="Support">
-      <div className="padding-vert--lg">
-        <div className="container">
-          <div className="row">
-            <div className="col">
-              <article>
-                <header>
-                  <h1
-                    style={{
-                      fontSize: '3rem',
-                      marginBottom: '3rem',
-                    }}
-                  >
-                    Support
-                  </h1>
-                </header>
-                <p>
-                  Development for Craft.js began in April 2019 as a personal
-                  project of mine. It was months after months of experimenting
-                  and trial-and-error until it was able to become a viable
-                  solution. The repository was made public and the first public
-                  beta release was made in January 2020! Since then, the project
-                  has gained traction and contributions from people all over the
-                  world.
-                </p>
-                <p>
-                  Craft.js is released under the{' '}
-                  <a
-                    target="_blank"
-                    href="/prevwong/craft.js/blob/master/LICENSE"
-                  >
-                    MIT license
-                  </a>{' '}
-                  and is built with 100% love. If you found it useful and would
-                  like to ensure its continued development, please consider
-                  becoming a backer/sponsor or making a one-time donation via{' '}
-                  <a
-                    href="https://opencollective.com/craftjs/contribute"
-                    target="_blank"
-                  >
-                    Open Collective
-                  </a>{' '}
-                  or{' '}
-                  <a href="https://paypal.me/prevwong" target="_blank">
-                    Paypal
-                  </a>
-                  .
-                </p>
-                <a
-                  href="https://opencollective.com/craftjs/contribute"
-                  target="_blank"
-                >
-                  <img
-                    src="https://opencollective.com/craftjs/donate/button@2x.png?color=blue"
-                    width={260}
-                  />
-                </a>
-              </article>
-            </div>
-            <div className="col col--3"></div>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}
-
-export default Support;
diff --git a/yarn.lock b/yarn.lock
index ad4b374da..a8cda0e11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2798,26 +2798,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@docusaurus/plugin-client-redirects@npm:2.4.3":
-  version: 2.4.3
-  resolution: "@docusaurus/plugin-client-redirects@npm:2.4.3"
-  dependencies:
-    "@docusaurus/core": 2.4.3
-    "@docusaurus/logger": 2.4.3
-    "@docusaurus/utils": 2.4.3
-    "@docusaurus/utils-common": 2.4.3
-    "@docusaurus/utils-validation": 2.4.3
-    eta: ^2.0.0
-    fs-extra: ^10.1.0
-    lodash: ^4.17.21
-    tslib: ^2.4.0
-  peerDependencies:
-    react: ^16.8.4 || ^17.0.0
-    react-dom: ^16.8.4 || ^17.0.0
-  checksum: f039f89ad2658524819543ff4a370e409053bfd3b4851be82c3cceb6fcd39e954a1ca3bfd13e99fbd1f7fbb9cd69ed28545a852c8dbca2e8300eec23586767a4
-  languageName: node
-  linkType: hard
-
 "@docusaurus/plugin-content-blog@npm:2.4.3":
   version: 2.4.3
   resolution: "@docusaurus/plugin-content-blog@npm:2.4.3"
@@ -21766,7 +21746,6 @@ clsx@latest:
   resolution: "site@workspace:site"
   dependencies:
     "@docusaurus/core": 2.4.3
-    "@docusaurus/plugin-client-redirects": 2.4.3
     "@docusaurus/preset-classic": 2.4.3
     classnames: 2.3.1
     react: 18.2.0