diff --git a/tools/daggosaurus/docusaurus.config.js b/tools/daggosaurus/docusaurus.config.js
index fab69fc4..7a45cac3 100644
--- a/tools/daggosaurus/docusaurus.config.js
+++ b/tools/daggosaurus/docusaurus.config.js
@@ -23,11 +23,24 @@ module.exports = {
     },
     navbar: {
       logo: {
-        alt: 'My Site Logo',
+        alt: 'Dagger Logo',
         src: 'img/dagger-logo.png',
         srcDark: 'img/dagger_logo_dark.png',
       },
     },
+    algolia: {
+      apiKey: '66c9f1f7e6ba6617ec4e65194788bacd',
+      indexName: 'docs_dagger'
+    },
+    colorMode: {
+      // "light" | "dark"
+      defaultMode: 'light',
+
+      switchConfig: {
+        darkIcon: "img/Icon_Night-mode.svg",
+        lightIcon: 'img/Icon_Day-mode.svg',
+      },
+    },
   },
   presets: [
     [
diff --git a/tools/daggosaurus/src/css/custom.css b/tools/daggosaurus/src/css/custom.css
index 2942052c..daf6d273 100644
--- a/tools/daggosaurus/src/css/custom.css
+++ b/tools/daggosaurus/src/css/custom.css
@@ -11,63 +11,48 @@
   --ifm-color-primary-dark: #131226;
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: #fffef3;
+  --ifm-color-primary-light: #fffef6;
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
+  --ifm-color-secondary: #66ac9f50;
   --ifm-navbar-height: 5rem;
   --ifm-background-color: var(--ifm-color-primary-light);
-  --ifm-navbar-background-color: transparent;
+  --ifm-navbar-background-color: var(--ifm-color-primary-light);
+  --ifm-menu-color: var(--ifm-color-primary-dark);
   --ifm-menu-color-active: var(--ifm-color-primary-dark);
+  --ifm-menu-color-background-hover: #fdf9d7;
   --ifm-font-family-base: "Karla", sans-serif;
-  /* --ifm-font-family-monospace: "Karla", sans-serif; */
+  --ifm-font-family-monospace: "Courier new", sans-serif;
+  --ifm-code-background: var(--ifm-color-primary);
+  --ifm-code-font-size: 100%;
+  --ifm-code-border-radius: 2rem;
+  --ifm-code-color: var(--ifm-color-primary-light);
+  --ifm-code-padding-vertical: 0.3rem;
+  --ifm-code-padding-horizontal: 0.5rem;
   --ifm-h2-font-size: 2rem;
   --ifm-menu-color-background-active: var(--ifm-color-primary);
   --ifm-menu-color-active: var(--ifm-color-primary-light);
   --ifm-leading-desktop: 2;
+  --ifm-toc-border-color: transparent;
+  --ifm-toc-link-color: var(--ifm-color-primary-dark);
+  --ifm-font-color-base: var(--ifm-color-primary-dark);
+  --ifm-link-color: var(--ifm-color-primary-dark);
+  --ifm-link-hover-color: var(--ifm-color-primary);
+  --ifm-pre-padding: 2rem;
+  --ifm-pagination-nav-border-radius: 2rem;
 }
 
 html[data-theme="dark"] {
   --ifm-background-color: var(--ifm-color-primary-dark);
   --ifm-navbar-background-color: transparent;
   --ifm-menu-color-active: var(--ifm-color-primary-light);
-  --ifm-menu-color-active: var(--ifm-color-primary-light);
   --ifm-link-color: var(--ifm-color-primary-light);
+  --ifm-link-hover-color: var(--ifm-color-primary-light);
+  --ifm-toc-link-color: var(--ifm-color-primary-light);
+  --ifm-pagination-nav-color-hover: var(--ifm-color-primary-light);
 }
 
-#__docusaurus {
-  background-color: var(--ifm-color-primary-light);
-}
-
-html[data-theme="dark"] #__docusaurus {
-  background: linear-gradient(
-    180deg,
-    var(--ifm-color-primary-dark),
-    var(--ifm-color-primary)
-  );
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-.navbar__brand {
-  height: var(--ifm-navbar-height);
-}
-
-.navbar {
-  max-width: var(--ifm-container-width-xl);
-  align-self: center;
-  box-shadow: none;
-}
-
-.main-wrapper {
-  max-width: var(--ifm-container-width-xl);
-  align-self: center;
-}
+/* global */
 
 h1,
 h2,
@@ -90,6 +75,58 @@ p {
   line-height: 24px;
 }
 
+#__docusaurus {
+  background-color: var(--ifm-color-primary-light);
+}
+
+html[data-theme="dark"] #__docusaurus {
+  background: linear-gradient(
+    180deg,
+    var(--ifm-color-primary-dark),
+    var(--ifm-color-primary)
+  );
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+/* navbar */
+.navbar__brand {
+  height: var(--ifm-navbar-height);
+}
+
+.navbar {
+  max-width: var(--ifm-container-width-xl);
+  align-self: center;
+  box-shadow: none;
+}
+
+/* main */
+.main-wrapper {
+  max-width: var(--ifm-container-width-xl);
+  align-self: center;
+}
+
+main[class^="docMainContainer"] {
+  background: #ffffff;
+  box-shadow: 0px 4px 16px 4px #13122610;
+  border-radius: 2rem;
+  margin-top: 1rem;
+}
+
+html[data-theme="dark"] main[class^="docMainContainer"] {
+  background: var(--ifm-color-primary);
+  box-shadow: 0px 4px 16px 4px #13122610;
+  border-radius: 2rem;
+  margin-top: 1rem;
+  color: #fffef6;
+}
+
+/* table-of-contents */
 .table-of-contents {
   font-size: 1rem;
 }
@@ -101,3 +138,72 @@ html[data-theme="dark"] .table-of-contents__link--active,
 html[data-theme="dark"] .table-of-contents__link:hover {
   color: var(--ifm-color-primary-light);
 }
+
+/* codeBlock */
+div[class^="codeBlock"] {
+  border-radius: var(--ifm-code-border-radius);
+  background-color: var(--ifm-color-primary) !important;
+}
+html[data-theme="dark"] div[class^="codeBlock"] {
+  background-color: var(--ifm-color-primary-light) !important;
+}
+
+div[class^="codeBlockLines"] .token-line {
+  color: var(--ifm-color-primary-light) !important;
+}
+html[data-theme="dark"] div[class^="codeBlockLines"] .token-line {
+  color: var(--ifm-color-primary) !important;
+}
+/* badge */
+.badge--secondary {
+  color: var(--ifm-color-primary-dark);
+}
+
+/* hash-link */
+.hash-link {
+  color: #40b8bb;
+}
+
+.hash-link:hover {
+  color: #175761;
+}
+
+.hash-link:focus {
+  color: var(--ifm-color-primary-dark);
+}
+
+/* link */
+.menu__link {
+  border-radius: 2rem;
+}
+
+.menu__link:focus {
+  background-color: var(--ifm-color-primary-dark);
+  color: var(--ifm-color-primary-light);
+}
+
+.menu__link:active {
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme="dark"] .menu__link {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme="dark"] .menu__link:hover {
+  color: var(--ifm-color-primary-dark);
+}
+html[data-theme="dark"] .menu__link[href=""]:hover,
+html[data-theme="dark"] .menu__link[href="#"]:hover {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme="dark"] .menu__link:focus {
+  color: var(--ifm-color-primary-light);
+}
+
+html[data-theme="dark"] .menu__link:active {
+  background-color: var(--ifm-color-primary-light);
+  color: var(--ifm-color-primary-dark);
+}
diff --git a/tools/daggosaurus/src/theme/Toggle/index.js b/tools/daggosaurus/src/theme/Toggle/index.js
new file mode 100644
index 00000000..cca8dc4a
--- /dev/null
+++ b/tools/daggosaurus/src/theme/Toggle/index.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useState, useRef, memo } from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import DarkIcon from "../../../static/img/Icon_Night-mode.svg"
+import LightIcon from "../../../static/img/Icon_Day-mode.svg"
+
+const Dark = ({ icon, style }) => (
+  <span className={clsx(styles.toggle, styles.dark)} style={style}>
+    <DarkIcon />
+  </span>
+);
+
+const Light = ({ icon, style }) => (
+  <span className={clsx(styles.toggle, styles.light)} style={style}>
+    <LightIcon />
+  </span>
+); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+
+const Toggle = memo(
+  ({ className, icons, checked: defaultChecked, disabled, onChange }) => {
+    const [checked, setChecked] = useState(defaultChecked);
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+
+    const handleToggle = (e) => {
+      const checkbox = inputRef.current;
+
+      if (!checkbox) {
+        return;
+      }
+
+      if (e.target !== checkbox) {
+        e.preventDefault();
+        checkbox.focus();
+        checkbox.click();
+        return;
+      }
+
+      setChecked(checkbox?.checked);
+    };
+
+    return (
+      <div
+        className={clsx('react-toggle', className, {
+          'react-toggle--checked': checked,
+          'react-toggle--focus': focused,
+          'react-toggle--disabled': disabled,
+        })}
+        role="button"
+        tabIndex={-1}
+        onClick={handleToggle}>
+        <div className="react-toggle-track">
+          <div className="react-toggle-track-check">{icons.checked}</div>
+          <div className="react-toggle-track-x">{icons.unchecked}</div>
+        </div>
+        <div className="react-toggle-thumb" />
+
+        <input
+          ref={inputRef}
+          checked={checked}
+          type="checkbox"
+          className="react-toggle-screenreader-only"
+          aria-label="Switch between dark and light mode"
+          onChange={onChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+      </div>
+    );
+  },
+);
+export default function (props) {
+  const {
+    colorMode: {
+      switchConfig: { darkIcon, darkIconStyle, lightIcon, lightIconStyle },
+    },
+  } = useThemeConfig();
+  const { isClient } = useDocusaurusContext();
+  return (
+    <Toggle
+      disabled={!isClient}
+      icons={{
+        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
+        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/tools/daggosaurus/src/theme/Toggle/styles.module.css b/tools/daggosaurus/src/theme/Toggle/styles.module.css
new file mode 100644
index 00000000..68635249
--- /dev/null
+++ b/tools/daggosaurus/src/theme/Toggle/styles.module.css
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.toggle {
+  align-items: center;
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  width: 21px;
+}
+.toggle::before {
+  position: absolute;
+}
+
+/**
+ * styles for React Toggle
+ * copied over because we want to allow user to swizzle it and modify the css
+ * and also to make sure its compatible with our dark mode
+ * https://github.com/aaronshaf/react-toggle/blob/master/style.css
+ */
+:global(.react-toggle) {
+  touch-action: pan-x;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:global(.react-toggle-screenreader-only) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+:global(.react-toggle--disabled) {
+  cursor: not-allowed;
+}
+
+:global(.react-toggle-track) {
+  width: 55px;
+  height: 24px;
+  border-radius: 30px;
+  background-color: #40b8bb;
+  transition: all 0.2s ease;
+}
+
+:global(.react-toggle-track-check) {
+  position: absolute;
+  width: 21px;
+  height: 16px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  left: 6px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-track-check),
+:global(.react-toggle--checked .react-toggle-track-check) {
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+:global(.react-toggle-track-x) {
+  position: absolute;
+  width: 21px;
+  height: 16px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  right: 6px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-track-x),
+:global(.react-toggle--checked .react-toggle-track-x) {
+  opacity: 0;
+}
+
+:global(.react-toggle-thumb) {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 26px;
+  height: 26px;
+  border: 3px solid var(--ifm-color-primary-dark);
+  border-radius: 50%;
+  background-color: #fafafa;
+  transition: all 0.25s ease;
+}
+
+:global([data-theme="dark"] .react-toggle .react-toggle-thumb),
+:global(.react-toggle--checked .react-toggle-thumb) {
+  left: 31px;
+}
diff --git a/tools/daggosaurus/static/img/Icon_Day-mode.svg b/tools/daggosaurus/static/img/Icon_Day-mode.svg
new file mode 100644
index 00000000..876ad3b2
--- /dev/null
+++ b/tools/daggosaurus/static/img/Icon_Day-mode.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
\ No newline at end of file
diff --git a/tools/daggosaurus/static/img/Icon_Night-mode.svg b/tools/daggosaurus/static/img/Icon_Night-mode.svg
new file mode 100644
index 00000000..aba67380
--- /dev/null
+++ b/tools/daggosaurus/static/img/Icon_Night-mode.svg
@@ -0,0 +1 @@
+<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
\ No newline at end of file