diff --git a/apps/web/prebuild.js b/apps/web/prebuild.js
index 18dc759cc..945849036 100644
--- a/apps/web/prebuild.js
+++ b/apps/web/prebuild.js
@@ -1,7 +1,7 @@
 const fs = require('fs')
 const path = require('path')
 
-function walkDir(dir, basePath = '') {
+function walkDir(dirName, dir, basePath = '', depth = 1) {
   const entries = fs.readdirSync(dir, { withFileTypes: true })
 
   return entries
@@ -9,12 +9,31 @@ function walkDir(dir, basePath = '') {
       const relativePath = path.join(basePath, entry.name)
 
       if (entry.isDirectory()) {
-        let route = { title: entry.name }
-        const links = walkDir(path.join(dir, entry.name), relativePath)
+        let route = {
+          title: depth === 1 ? entry.name.toLocaleUpperCase() : entry.name,
+        }
+        const entryName = entry.name
+        const childPath = path.join(dir, entry.name)
+        const links = walkDir(entryName, childPath, relativePath, depth + 1)
         if (links.length > 0) {
-          route.links = links
-        } else {
-          route.href = '/' + relativePath
+          if (depth === 1) {
+            route.href = '.' + relativePath
+            route.links = links
+          } else if (depth === 2) {
+            route.href = '/docs/api-reference/' + relativePath
+            const mdxFilePath = path.join(childPath, 'page.mdx')
+            console.log(`Generating ${mdxFilePath}`)
+            const mdxContent = `# ${dirName} ${entryName}\n\n${links
+              .map(
+                (link) =>
+                  `- [${
+                    link.title.charAt(0).toUpperCase() +
+                    link.title.slice(1).toLowerCase()
+                  }](./${entryName}/${link.title})`
+              )
+              .join('\n')}`
+            fs.writeFileSync(mdxFilePath, mdxContent)
+          }
         }
         return route
       }
@@ -29,7 +48,7 @@ function generateApiRefRoutes() {
     return []
   }
 
-  return walkDir(apiRefPath)
+  return walkDir('api-reference', apiRefPath)
 }
 
 const apiRefRoutes = generateApiRefRoutes()
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
index 4d34e2cec..ffcc2d179 100644
--- a/apps/web/src/components/Footer.tsx
+++ b/apps/web/src/components/Footer.tsx
@@ -5,15 +5,15 @@ import { usePathname } from 'next/navigation'
 
 import { Button } from '@/components/Button'
 import { routes } from '@/components/Navigation/routes'
-import { DiscordIcon } from '@/components/icons/DiscordIcon'
-import { GitHubIcon } from '@/components/icons/GitHubIcon'
 import { TwitterIcon } from '@/components/icons/TwitterIcon'
+import { GitHubIcon } from '@/components/icons/GitHubIcon'
+import { DiscordIcon } from '@/components/icons/DiscordIcon'
 
 function PageLink({
-  label,
-  page,
-  previous = false,
-}: {
+                    label,
+                    page,
+                    previous = false,
+                  }: {
   label: string
   page: { href: string; title: string }
   previous?: boolean
@@ -43,27 +43,10 @@ function PageLink({
 function PageNavigation() {
   let initialPathname = usePathname()
   // Running on the server, there's bug with usePathname() and basePath https://github.com/vercel/next.js/issues/52700
-  if (typeof window === 'undefined' && initialPathname === '/')
-    initialPathname = '/docs'
+  if (typeof window === 'undefined' && initialPathname === '/') initialPathname = '/docs'
 
-  const allPages = routes.flatMap((group) => {
-    if ('links' in group) {
-      return group.links.flatMap((link) => {
-        if ('links' in link) {
-          return {
-            title: link.title,
-            href: link.href,
-            icon: link.icon,
-          }
-        }
-        return link
-      })
-    }
-    return [group]
-  })
-  const currentPageIndex = allPages.findIndex(
-    (page) => page.href === initialPathname
-  )
+  const allPages = routes.flatMap(group => group.links)
+  const currentPageIndex = allPages.findIndex(page => page.href === initialPathname)
 
   if (currentPageIndex === -1) return null
 
@@ -76,12 +59,19 @@ function PageNavigation() {
     <div className="flex">
       {previousPage && (
         <div className="flex flex-col items-start gap-3">
-          <PageLink label="Previous" page={previousPage} previous />
+          <PageLink
+            label="Previous"
+            page={previousPage}
+            previous
+          />
         </div>
       )}
       {nextPage && (
         <div className="ml-auto flex flex-col items-end gap-3">
-          <PageLink label="Next" page={nextPage} />
+          <PageLink
+            label="Next"
+            page={nextPage}
+          />
         </div>
       )}
     </div>
@@ -89,18 +79,21 @@ function PageNavigation() {
 }
 
 function SocialLink({
-  href,
-  icon: Icon,
-  children,
-}: {
+                      href,
+                      icon: Icon,
+                      children,
+                    }: {
   href: string
   icon: React.ComponentType<{ className?: string }>
   children: React.ReactNode
 }) {
   return (
-    <Link href={href} className="group">
+    <Link
+      href={href}
+      className="group"
+    >
       <span className="sr-only">{children}</span>
-      <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500" />
+      <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500"/>
     </Link>
   )
 }
@@ -110,21 +103,29 @@ function SmallPrint() {
     <div className="flex flex-col w-full items-center px-10 justify-between gap-5 pt-8 dark:border-white/5 sm:flex-row">
       <div className="flex flex-col items-center justify-start lg:items-start">
         <p className="text-xs text-zinc-600 dark:text-zinc-400">
-          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights
-          reserved.
+          &copy; FoundryLabs, Inc. {new Date().getFullYear()}. All rights reserved.
         </p>
         <p className="text-xs text-zinc-600 dark:text-zinc-400">
           548 Market Street #83122, San Francisco, CA 94104
         </p>
       </div>
       <div className="flex gap-4">
-        <SocialLink href="https://twitter.com/e2b_dev" icon={TwitterIcon}>
+        <SocialLink
+          href="https://twitter.com/e2b_dev"
+          icon={TwitterIcon}
+        >
           Follow us on Twitter
         </SocialLink>
-        <SocialLink href="https://github.com/e2b-dev" icon={GitHubIcon}>
+        <SocialLink
+          href="https://github.com/e2b-dev"
+          icon={GitHubIcon}
+        >
           Follow us on GitHub
         </SocialLink>
-        <SocialLink href="https://discord.gg/U7KEcGErtQ" icon={DiscordIcon}>
+        <SocialLink
+          href="https://discord.gg/U7KEcGErtQ"
+          icon={DiscordIcon}
+        >
           Join our Discord server
         </SocialLink>
       </div>
@@ -135,8 +136,8 @@ function SmallPrint() {
 export function Footer() {
   return (
     <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
-      <PageNavigation />
-      <SmallPrint />
+      <PageNavigation/>
+      <SmallPrint/>
     </footer>
   )
 }
@@ -145,8 +146,8 @@ export function FooterMain() {
   return (
     <footer className="flex w-full space-y-10 pb-16">
       <div className="flex flex-col w-full items-center justify-center border-t border-zinc-900/5 dark:border-white/5">
-        <SmallPrint />
+        <SmallPrint/>
       </div>
     </footer>
   )
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
index 355b0c2ee..b9bba507c 100644
--- a/apps/web/src/components/Search.tsx
+++ b/apps/web/src/components/Search.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { forwardRef, Fragment, Suspense, useCallback, useEffect, useId, useRef, useState } from 'react'
+import Highlighter from 'react-highlight-words'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import {
   type AutocompleteApi,
   type AutocompleteCollection,
@@ -7,22 +10,10 @@ import {
   createAutocomplete,
 } from '@algolia/autocomplete-core'
 import clsx from 'clsx'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import {
-  forwardRef,
-  Fragment,
-  Suspense,
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react'
-import Highlighter from 'react-highlight-words'
 
-import { DialogAnimated } from '@/components/DialogAnimated'
 import { routes } from '@/components/Navigation/routes'
 import { type Result } from '@/mdx/search.mjs'
+import { DialogAnimated } from '@/components/DialogAnimated'
 
 type EmptyObject = Record<string, never>
 
@@ -91,7 +82,7 @@ function useAutocomplete({ close }: { close: () => void }) {
           ]
         })
       },
-    })
+    }),
   )
 
   return { autocomplete, autocompleteState }
@@ -99,7 +90,12 @@ function useAutocomplete({ close }: { close: () => void }) {
 
 function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -111,7 +107,12 @@ function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 function NoResultsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -125,8 +126,18 @@ function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   const id = useId()
 
   return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <circle
+        cx="10"
+        cy="10"
+        r="5.5"
+        strokeLinejoin="round"
+      />
       <path
         stroke={`url(#${id})`}
         strokeLinecap="round"
@@ -142,8 +153,12 @@ function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
           y2="15"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="currentColor" />
-          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+          <stop stopColor="currentColor"/>
+          <stop
+            offset="1"
+            stopColor="currentColor"
+            stopOpacity="0"
+          />
         </linearGradient>
       </defs>
     </svg>
@@ -162,12 +177,12 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
 }
 
 function SearchResult({
-  result,
-  resultIndex,
-  autocomplete,
-  collection,
-  query,
-}: {
+                        result,
+                        resultIndex,
+                        autocomplete,
+                        collection,
+                        query,
+                      }: {
   result: Result
   resultIndex: number
   autocomplete: Autocomplete
@@ -176,19 +191,18 @@ function SearchResult({
 }) {
   const id = useId()
 
-  const sectionTitle = routes.find((section) =>
-    // @ts-ignore
-    section.links.find((link) => link?.href === result.url.split('#')[0])
+  const sectionTitle = routes.find(section =>
+    section.links.find(link => link.href === result.url.split('#')[0]),
   )?.title
   const hierarchy = [sectionTitle, result.pageTitle].filter(
-    (x): x is string => typeof x === 'string'
+    (x): x is string => typeof x === 'string',
   )
 
   return (
     <li
       className={clsx(
         'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
+        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800',
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       {...autocomplete.getItemProps({
@@ -201,7 +215,10 @@ function SearchResult({
         aria-hidden="true"
         className="text-sm font-medium text-zinc-900 group-aria-selected:text-brand-500 dark:text-white"
       >
-        <HighlightQuery text={result.title} query={query} />
+        <HighlightQuery
+          text={result.title}
+          query={query}
+        />
       </div>
       {hierarchy.length > 0 && (
         <div
@@ -211,7 +228,10 @@ function SearchResult({
         >
           {hierarchy.map((item, itemIndex, items) => (
             <Fragment key={itemIndex}>
-              <HighlightQuery text={item} query={query} />
+              <HighlightQuery
+                text={item}
+                query={query}
+              />
               <span
                 className={
                   itemIndex === items.length - 1
@@ -230,10 +250,10 @@ function SearchResult({
 }
 
 function SearchResults({
-  autocomplete,
-  query,
-  collection,
-}: {
+                         autocomplete,
+                         query,
+                         collection,
+                       }: {
   autocomplete: Autocomplete
   query: string
   collection: AutocompleteCollection<Result>
@@ -241,7 +261,7 @@ function SearchResults({
   if (collection.items.length === 0) {
     return (
       <div className="p-6 text-center">
-        <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
+        <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600"/>
         <p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
           Nothing found for{' '}
           <strong className="break-words font-semibold text-zinc-900 dark:text-white">
@@ -281,15 +301,15 @@ const SearchInput = forwardRef<
 
   return (
     <div className="group relative flex h-12">
-      <SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500" />
+      <SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500"/>
       <input
         ref={inputRef}
         className={clsx(
           'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4'
+          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4',
         )}
         {...inputProps}
-        onKeyDown={(event) => {
+        onKeyDown={event => {
           if (
             event.key === 'Escape' &&
             !autocompleteState.isOpen &&
@@ -309,7 +329,8 @@ const SearchInput = forwardRef<
       />
       {autocompleteState.status === 'stalled' && (
         <div className="absolute inset-y-0 right-3 flex items-center">
-          <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400" />
+          <LoadingIcon
+            className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400"/>
         </div>
       )}
     </div>
@@ -317,10 +338,10 @@ const SearchInput = forwardRef<
 })
 
 function SearchDialog({
-  open,
-  setOpen,
-  className,
-}: {
+                        open,
+                        setOpen,
+                        className,
+                      }: {
   open: boolean
   setOpen: (open: boolean) => void
   className?: string
@@ -420,12 +441,12 @@ function useSearchProps() {
       setOpen: useCallback(
         (open: boolean) => {
           const { width = 0, height = 0 } =
-            buttonRef.current?.getBoundingClientRect() ?? {}
+          buttonRef.current?.getBoundingClientRect() ?? {}
           if (!open || (width !== 0 && height !== 0)) {
             setOpen(open)
           }
         },
-        [setOpen]
+        [setOpen],
       ),
     },
   }
@@ -436,9 +457,7 @@ export function Search() {
   const { buttonProps, dialogProps } = useSearchProps()
 
   useEffect(() => {
-    setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl '
-    )
+    setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ')
   }, [])
 
   return (
@@ -448,7 +467,7 @@ export function Search() {
         className="hidden h-8 w-full items-center gap-2 whitespace-nowrap rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex"
         {...buttonProps}
       >
-        <SearchIcon className="h-5 w-5 stroke-current" />
+        <SearchIcon className="h-5 w-5 stroke-current"/>
         Search in docs...
         <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
           <kbd className="font-sans">{modifierKey}</kbd>
@@ -456,7 +475,10 @@ export function Search() {
         </kbd>
       </button>
       <Suspense fallback={null}>
-        <SearchDialog className="hidden lg:block" {...dialogProps} />
+        <SearchDialog
+          className="hidden lg:block"
+          {...dialogProps}
+        />
       </Suspense>
     </div>
   )
@@ -473,10 +495,13 @@ export function MobileSearch() {
         aria-label="Search in docs..."
         {...buttonProps}
       >
-        <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
+        <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white"/>
       </button>
       <Suspense fallback={null}>
-        <SearchDialog className="lg:hidden" {...dialogProps} />
+        <SearchDialog
+          className="lg:hidden"
+          {...dialogProps}
+        />
       </Suspense>
     </div>
   )