diff --git a/beta/colors.js b/beta/colors.js
index 1c3e26f11b..bac74d41e9 100644
--- a/beta/colors.js
+++ b/beta/colors.js
@@ -23,6 +23,7 @@ module.exports = {
   'secondary-button-dark': '#404756', // gray-70
 
   // Gray
+  'gray-95': '#16181D',
   'gray-90': '#23272F',
   'gray-80': '#343A46',
   'gray-70': '#404756',
diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx
index 4b5e25be31..9934de66a5 100644
--- a/beta/src/components/MDX/Challenges/Challenges.tsx
+++ b/beta/src/components/MDX/Challenges/Challenges.tsx
@@ -119,12 +119,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
             )}>
             {isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
           </H2>
-          <Navigation
-            activeChallenge={activeChallenge}
-            challenges={challenges}
-            handleChange={handleChallengeChange}
-            isRecipes={isRecipes}
-          />
+          {challenges.length > 1 && (
+            <Navigation
+              activeChallenge={activeChallenge}
+              challenges={challenges}
+              handleChange={handleChallengeChange}
+              isRecipes={isRecipes}
+            />
+          )}
         </div>
         <div className="p-5 sm:py-8 sm:px-8">
           <div key={activeChallenge}>
diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.module.css b/beta/src/components/MDX/CodeBlock/CodeBlock.module.css
index 6f27668f9b..176c53e507 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.module.css
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.module.css
@@ -3,5 +3,5 @@
  */
 
 .codeViewer {
-  padding: 1.5rem 0.5rem;
+  padding: 6px 0.5rem !important;
 }
diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
index 55d5e06990..a84680dd9a 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -11,8 +11,7 @@ import {
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
-
-import {CodeBlockLightTheme} from '../Sandpack/Themes';
+import {CustomTheme} from '../Sandpack/Themes';
 import styles from './CodeBlock.module.css';
 
 interface InlineHiglight {
@@ -47,7 +46,7 @@ const CodeBlock = React.forwardRef(
       const linesToHighlight = getHighlightLines(metastring);
       const highlightedLineConfig = linesToHighlight.map((line) => {
         return {
-          className: 'bg-github-highlight',
+          className: 'bg-github-highlight dark:bg-opacity-10',
           line,
         };
       });
@@ -81,7 +80,7 @@ const CodeBlock = React.forwardRef(
       <div
         translate="no"
         className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
+          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
           !noMargin && 'my-8'
         )}>
         <SandpackProvider
@@ -93,7 +92,7 @@ const CodeBlock = React.forwardRef(
               },
             },
           }}>
-          <SandpackThemeProvider theme={CodeBlockLightTheme}>
+          <SandpackThemeProvider theme={CustomTheme}>
             <ClasserProvider
               classes={{
                 'sp-cm': styles.codeViewer,
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index 9772c0a162..d60e583dbf 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -13,7 +13,7 @@ import {
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
 import {Preview} from './Preview';
-import {GithubLightTheme} from './Themes';
+import {CustomTheme} from './Themes';
 
 export function CustomPreset({
   isSingleFile,
@@ -45,7 +45,7 @@ export function CustomPreset({
     <>
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <NavigationBar showDownload={isSingleFile} onReset={onReset} />
-        <SandpackThemeProvider theme={GithubLightTheme}>
+        <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}
             className="sp-layout rounded-t-none"
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
index 599fbea1fd..74cb47bb8d 100644
--- a/beta/src/components/MDX/Sandpack/Themes.tsx
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -2,29 +2,32 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
 import tailwindConfig from '../../../../tailwind.config';
 
-export const GithubLightTheme: SandpackTheme = {
-  ...githubLightTheme,
-
-  typography: {
-    ...githubLightTheme.typography,
-    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
-    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
-    fontSize: tailwindConfig.theme.extend.fontSize.code,
-    lineHeight: '24px',
-  },
-};
-
-export const CodeBlockLightTheme: SandpackTheme = {
-  ...githubLightTheme,
+export const CustomTheme = {
   palette: {
-    ...githubLightTheme.palette,
-    defaultBackground: 'transparent',
+    activeText: 'inherit',
+    defaultText: 'inherit',
+    inactiveText: 'inherit',
+    activeBackground: 'inherit',
+    defaultBackground: 'inherit',
+    inputBackground: 'inherit',
+    accent: 'inherit',
+    errorBackground: 'inherit',
+    errorForeground: 'inherit',
+  },
+  syntax: {
+    plain: 'var(--theme-plain)',
+    comment: 'var(--theme-comment)',
+    keyword: 'var(--theme-keyword)',
+    tag: 'var(--theme-tag)',
+    punctuation: 'var(--theme-punctuation)',
+    definition: 'var(--theme-definition)',
+    property: 'var(--theme-property)',
+    static: 'var(--theme-static)',
+    string: 'var(--theme-string)',
   },
   typography: {
-    ...githubLightTheme.typography,
     bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
     monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
     fontSize: tailwindConfig.theme.extend.fontSize.code,
diff --git a/beta/src/components/MDX/TerminalBlock.tsx b/beta/src/components/MDX/TerminalBlock.tsx
index 71fb210852..aebcb11a99 100644
--- a/beta/src/components/MDX/TerminalBlock.tsx
+++ b/beta/src/components/MDX/TerminalBlock.tsx
@@ -43,7 +43,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           <IconTerminal className="inline-flex mr-2 self-center" /> Terminal
         </div>
       </div>
-      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code">
+      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
         <LevelText type={level} />
         {message}
       </div>
diff --git a/beta/src/components/PageHeading.tsx b/beta/src/components/PageHeading.tsx
index 33b8a1d983..d5cbd9133c 100644
--- a/beta/src/components/PageHeading.tsx
+++ b/beta/src/components/PageHeading.tsx
@@ -25,7 +25,7 @@ function PageHeading({
     <div className="px-5 sm:px-12 pt-5">
       <div className="max-w-4xl ml-0 2xl:mx-auto">
         {tags ? <Breadcrumbs /> : null}
-        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5" id="">
+        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5">
           {title}
           {status ? <em>—{status}</em> : ''}
         </H1>
diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index 7d9edc0b66..e2b7edbe14 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -93,7 +93,6 @@ export const Search: React.FC<SearchProps> = ({
         <link
           rel="preconnect"
           href={`https://${options.appId}-dsn.algolia.net`}
-          crossOrigin="true"
         />
       </Head>
 
diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 803bd7841d..8f3dadb2c2 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -59,7 +59,7 @@ If you're curious which products you use everyday are built with React, you can
 
 ### React uses JavaScript
 
-With React, you will describe visual your logic in JavaScript. This takes some practice. If you're learning JavaScript and React at the same time, you're not alone--but at times, it will be a little bit more challenging! On the upside, **much of learning React is really learning JavaScript,** which means you will take your learnings far beyond React.
+With React, you will describe your visual logic in JavaScript. This takes some practice. If you're learning JavaScript and React at the same time, you're not alone--but at times, it will be a little bit more challenging! On the upside, **much of learning React is really learning JavaScript,** which means you will take your learnings far beyond React.
 
 Check your knowledge level with [this JavaScript overview](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). It will take you between 30 minutes and an hour but you will feel more confident learning React. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are two great resources to use as a reference.
 
diff --git a/beta/src/pages/learn/referencing-values-with-refs.md b/beta/src/pages/learn/referencing-values-with-refs.md
index e6cad55d6c..3c285e4109 100644
--- a/beta/src/pages/learn/referencing-values-with-refs.md
+++ b/beta/src/pages/learn/referencing-values-with-refs.md
@@ -101,7 +101,7 @@ export default function Stopwatch() {
     setInterval(() => {
       // Update the current time every 100ms.
       setNow(Date.now());
-    }, 10);
+    }, 100);
   }
 
   let secondsPassed = 0;
@@ -461,7 +461,7 @@ export default function Toggle() {
 
 ### Fix debouncing
 
-In this example, all button click hanlders are ["debounced"](https://redd.one/blog/debounce-vs-throttle). To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+In this example, all button click handlers are ["debounced"](https://redd.one/blog/debounce-vs-throttle). To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
 
 This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost.
 
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 589d79f02e..78d914bd72 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -2,31 +2,81 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+html .sp-wrapper {
+  /* palette */
+  --sp-colors-fg-active: #24292e !important;
+  --sp-colors-fg-default: #959da5 !important;
+  --sp-colors-fg-inactive: #e4e7eb !important;
+  --sp-colors-bg-active: #e4e7eb !important;
+  --sp-colors-bg-default: #ffffff !important;
+  --sp-colors-bg-default-overlay: #ffffff !important;
+  --sp-colors-bg-input: #ffffff !important;
+  --sp-colors-accent: #c8c8fa !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #24292e;
+  --theme-comment: #6a737d;
+  --theme-keyword: #d73a49;
+  --theme-tag: #22863a;
+  --theme-punctuation: #24292e;
+  --theme-definition: #6f42c1;
+  --theme-property: #005cc5;
+  --theme-static: #032f62;
+  --theme-string: #032f62;
+}
+html.dark .sp-wrapper {
+  --sp-colors-fg-active: #FFFFFF !important;
+  --sp-colors-fg-default: #999999 !important;
+  --sp-colors-fg-inactive: #343434 !important;
+  --sp-colors-bg-active: #343434 !important;
+  --sp-colors-bg-default: #16181D !important;
+  --sp-colors-bg-default-overlay: #16181D !important;
+  --sp-colors-bg-input: #242424 !important;
+  --sp-colors-accent: #6caedd !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #FFFFFF;
+  --theme-comment: #757575;
+  --theme-keyword: #77B7D7;
+  --theme-tag: #DFAB5C;
+  --theme-punctuation: #ffffff;
+  --theme-definition: #86D9CA;
+  --theme-property: #77B7D7;
+  --theme-static: #C64640;
+  --theme-string: #977CDC;
+}
+
+.sp-tabs, .sp-tab-button:hover {
+  background: none !important;
+}
+
 .sp-tabs .sp-tab-button {
-  color: #087EA4;
+  color: #087ea4;
   padding: 0 4px;
 }
 
 html.dark .sp-tabs .sp-tab-button {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button:hover {
-  color: #087EA4;
+  color: #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button:hover {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #087EA4;
-  border-bottom: 2px solid #087EA4;
+  color: #087ea4;
+  border-bottom: 2px solid #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #149ECA;
-  border-bottom: 2px solid #149ECA;
+  color: #149eca;
+  border-bottom: 2px solid #149eca;
 }
 
 .sp-stack .sp-code-editor,
@@ -35,7 +85,7 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 }
 
 .sp-code-editor .cm-errorLine {
-  background-color: #fff0f0;
+  background-color: rgba(255, 107, 99, 0.10);
   position: relative;
 }
 
@@ -60,35 +110,31 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
  *
  * If you know a better way to keep them from diverging, send a PR.
  */
- .sp-layout {
+.sp-layout {
   border-bottom-left-radius: 0.5rem !important;
   border-bottom-right-radius: 0.5rem !important;
 }
-
-.cm-activeLine {
-  background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
-}
-.sp-code-editor {
-  background: white !important;
-}
 .sp-stack {
   height: initial !important;
   width: fit-content !important;
 }
 .sp-cm {
   -webkit-text-size-adjust: none !important;
+  padding: 0 !important;
 }
-.cm-wrap,
-.cm-wrap .cm-gutters {
+.cm-wrap {
   background: transparent !important;
 }
 .sp-pre-placeholder {
   display: block !important;
   margin-top: 0px !important;
   margin-bottom: 0px !important;
+  padding: 18px var(--sp-space-3) !important;
   @apply font-mono !important;
   font-size: 13.6px !important;
   line-height: 24px !important;
+  height: 100%;
+  overflow: scroll;
 }
 .text-xl .sp-pre-placeholder {
   font-size: 16px !important;
@@ -96,21 +142,22 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 }
 .sp-cm.sp-pristine .cm-scroller {
   overflow: auto !important;
+  padding: 18px 0 !important;
 }
 .sp-layout {
   overflow: initial !important;
-  border:0px solid transparent !important;
+  border: 0px solid transparent !important;
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
 }
-html.dark .sp-layout>:not(:first-child) {
-  border-color: #343A46;
+html.dark .sp-layout > :not(:first-child) {
+  border-color: #343a46;
 }
 html.dark .sp-layout {
-  background-color: #343A46;
+  background-color: #343a46;
 }
 html.dark .sp-loading {
-  background-color: #23272F;
+  background-color: #23272f;
 }
 
 @media (min-width: 768px) {