diff --git a/package.json b/package.json
index 4f0771a..9ba25e1 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
         "docusaurus-theme-openapi-docs": "^3.0.1",
         "prism-react-renderer": "^2.1.0",
         "react": "^18.0.0",
+        "react-decision-tree-flow": "^2.1.0",
         "react-dom": "^18.0.0",
         "react-markdown": "^9.0.0"
     },
diff --git a/src/components/TroubleshootingTree/StepProps.tsx b/src/components/TroubleshootingTree/StepProps.tsx
new file mode 100644
index 0000000..206b113
--- /dev/null
+++ b/src/components/TroubleshootingTree/StepProps.tsx
@@ -0,0 +1,7 @@
+export interface StepData {
+	path: string[];
+}
+
+export default interface StepProps {
+	data: StepData;
+}
\ No newline at end of file
diff --git a/src/components/TroubleshootingTree/index.tsx b/src/components/TroubleshootingTree/index.tsx
new file mode 100644
index 0000000..4f9518f
--- /dev/null
+++ b/src/components/TroubleshootingTree/index.tsx
@@ -0,0 +1,51 @@
+import { Controls, Step, useControls, Wizard } from 'react-decision-tree-flow'
+
+import Step1 from './steps/Step1'
+import Error from './steps/Error'
+import Step3 from './steps/Step3'
+import Step2 from './steps/Step2'
+import { useEffect, useState } from 'react'
+import { StepData } from './StepProps'
+
+const stepComponents = [
+	Step1,
+	Step2,
+	Step3,
+	Error
+]
+
+// Build the steps object from the stepComponents array
+function formatStepName(name: string): string {
+	return name.charAt(0).toLowerCase() + name.slice(1)
+}
+const steps = Object.fromEntries(stepComponents.map((Component) => [formatStepName(Component.name), Component]))
+
+// Make a tree so all steps can go to all others
+const tree = Object.fromEntries(Object.keys(steps).map((key, i, arr) => {
+	return [key, arr]
+}))
+
+function TreeInternals(): JSX.Element {
+	const [data, setData] = useState<StepData>({
+		path: []
+	})
+	
+	const { step } = useControls();
+	useEffect(() => {
+		setData(data => ({...data, path: [...data.path, step as string]}))
+	}, [step])
+
+	return (
+		<>
+			{Object.entries(steps).map(([name, Component]) => <Step key={name} name={name}><Component data={data}/></Step>)}
+		</>
+	)
+}
+
+export default function TroubleshootingTree(): JSX.Element {
+	return (
+		<Wizard tree={tree} first={Object.keys(steps)[0]}>
+			<TreeInternals />
+		</Wizard>
+	)
+}
diff --git a/src/components/TroubleshootingTree/steps/Error.tsx b/src/components/TroubleshootingTree/steps/Error.tsx
new file mode 100644
index 0000000..7ed9d49
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/Error.tsx
@@ -0,0 +1,16 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Error({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am error
+			<br />
+			Path: {data.path.join(' -> ')}
+			<br />
+			<button onClick={() => destinations.step1({...data, path: [...data.path, step]})}>Go back to start</button>
+		</>
+	)
+}
\ No newline at end of file
diff --git a/src/components/TroubleshootingTree/steps/Step1.tsx b/src/components/TroubleshootingTree/steps/Step1.tsx
new file mode 100644
index 0000000..6cdfc4a
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/Step1.tsx
@@ -0,0 +1,14 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step1({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 1
+			<br />
+			<button onClick={() => destinations.step2({...data, path: [...data.path, step]})}>Go to Step 2</button>
+		</>
+	)
+}
\ No newline at end of file
diff --git a/src/components/TroubleshootingTree/steps/Step2.tsx b/src/components/TroubleshootingTree/steps/Step2.tsx
new file mode 100644
index 0000000..8605b99
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/Step2.tsx
@@ -0,0 +1,17 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step2({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 2
+			<br />
+			<div>
+				<button onClick={() => destinations.error({...data, path: [...data.path, step]})}>Go to error</button>
+				<button onClick={() => destinations.step3({...data, path: [...data.path, step]})}>Go to Step 3</button>
+			</div>
+		</>
+	)
+}
\ No newline at end of file
diff --git a/src/components/TroubleshootingTree/steps/Step3.tsx b/src/components/TroubleshootingTree/steps/Step3.tsx
new file mode 100644
index 0000000..6f64dfc
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/Step3.tsx
@@ -0,0 +1,12 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step3({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 3. No steps after me!
+		</>
+	)
+}
\ No newline at end of file
diff --git a/wiki/geyser/fixing-unable-to-connect-to-world.md b/wiki/geyser/fixing-unable-to-connect-to-world.mdx
similarity index 98%
rename from wiki/geyser/fixing-unable-to-connect-to-world.md
rename to wiki/geyser/fixing-unable-to-connect-to-world.mdx
index be472b9..80bcaad 100644
--- a/wiki/geyser/fixing-unable-to-connect-to-world.md
+++ b/wiki/geyser/fixing-unable-to-connect-to-world.mdx
@@ -3,6 +3,10 @@ title: Fixing 'Unable to Connect to World'
 description: Common issues and solutions for the 'Unable to Connect to World' error.
 ---
 
+import TroubleshootingTree from '@site/src/components/TroubleshootingTree';
+
+<TroubleshootingTree />
+
 ## Fixing 'Unable to Connect to World' errors {#fixing-unable-to-connect-to-world-errors}
 This is by far the most common error people get when attempting to set up Geyser. Here's some steps on how to solve it.
 Usually, this error is caused by improper configuration of Geyser, or issues with your network.