diff --git a/.env b/.env
index a09eacb..4c541f4 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
 GATSBY_PATH_PREFIX=/impresso-datalab
-GATSBY_IMPRESSO_API_URL=http://localhost:8000/api
\ No newline at end of file
+GATSBY_IMPRESSO_API_URL=http://localhost/api
+GATSBY_IMPRESSO_PUBLIC_API_URL=http://localhost/public-api
\ No newline at end of file
diff --git a/gatsby-config.js b/gatsby-config.js
index f2352fa..3be60bc 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -6,9 +6,14 @@ const { createProxyMiddleware } = require("http-proxy-middleware")
 require("dotenv").config({
   path: [`.env.${process.env.NODE_ENV}`, ".env"],
 })
-const ApiHost = (
+const ApiUrl =
   process.env.GATSBY_IMPRESSO_API_URL || "http://localhost:8000/api"
-).replace("/api", "")
+const PublicApiUrl =
+  process.env.GATSBY_IMPRESSO_PUBLIC_API_URL ||
+  "http://localhost:8000/public-api"
+
+const ApiHost = ApiUrl.replace("/api", "")
+const PublicApiHost = PublicApiUrl.replace("/public-api", "")
 
 console.log("gatsby-config")
 console.log("NODE_ENV", process.env.NODE_ENV)
@@ -19,11 +24,16 @@ console.log("GIT_BRANCH", process.env.GIT_BRANCH)
 console.log("GIT_REVISION", process.env.GIT_REVISION)
 console.log("GIT_REPO", process.env.GIT_REPO)
 console.log("GATSBY_IMPRESSO_API_URL", process.env.GATSBY_IMPRESSO_API_URL)
-console.log("ApiHost", ApiHost)
+console.log(
+  "GATSBY_IMPRESSO_PUBLIC_API_URL",
+  process.env.GATSBY_IMPRESSO_PUBLIC_API_URL,
+)
+console.log("- ApiHost", ApiHost)
+console.log("- PublicApiHost", PublicApiHost)
 
 module.exports = {
   siteMetadata: {
-    title: `impresso-datalab`,
+    title: `Impresso data lab`,
     siteUrl: `https://impresso-project.ch/datalab`,
     gitBuildTag: process.env.GIT_BUILD_TAG,
     gitBranch: process.env.GIT_BRANCH,
@@ -35,10 +45,17 @@ module.exports = {
     app.use(
       "/api/socket.io",
       createProxyMiddleware({
-        target: "https://dev.impresso-project.ch",
+        target: ApiHost,
         ws: true,
         changeOrigin: true,
-      })
+      }),
+    )
+    app.use(
+      "/public-api",
+      createProxyMiddleware({
+        target: PublicApiHost,
+        changeOrigin: true,
+      }),
     )
   },
   plugins: [
diff --git a/src/pages/AccessToApi.tsx b/src/components/AccessToApi.tsx
similarity index 91%
rename from src/pages/AccessToApi.tsx
rename to src/components/AccessToApi.tsx
index 93da3bc..99aba11 100644
--- a/src/pages/AccessToApi.tsx
+++ b/src/components/AccessToApi.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useRef } from "react"
-import Alert from "../components/Alert"
+import Alert from "./Alert"
 import { Button, Form } from "react-bootstrap"
 import { RefreshDouble, PlusCircle } from "iconoir-react"
-import Token from "../components/Token"
+import Token from "./Token"
 import { useMutation } from "@tanstack/react-query"
 import axios from "axios"
-import UserCard from "../components/UserCard"
-import LoginForm, { LoginFormPayload } from "../components/LoginForm"
+import UserCard from "./UserCard"
+import LoginForm, { LoginFormPayload } from "./LoginForm"
 
 export interface AccessToApiProps {
   llToken?: string
@@ -41,6 +41,7 @@ const AccessToApi: React.FC<AccessToApiProps> = ({ llToken }) => {
 
   useEffect(() => {
     if (llToken && llToken.length > 0) {
+      console.info("[AccessToApi] llToken is set, calling the mutation")
       // call the mutation
       mutate({
         strategy: "local",
@@ -64,7 +65,7 @@ const AccessToApi: React.FC<AccessToApiProps> = ({ llToken }) => {
       {errorIsUnauthorized && (
         <LoginForm className="mb-3" onSubmit={handleOnSubmit} />
       )}
-
+      {status}
       <Alert
         className={"mb-3"}
         value="API access is always subject to the Terms of use. More info in the documentation section."
diff --git a/src/components/Header.js b/src/components/Header.tsx
similarity index 88%
rename from src/components/Header.js
rename to src/components/Header.tsx
index e45d15c..ad4ac6b 100644
--- a/src/components/Header.js
+++ b/src/components/Header.tsx
@@ -13,14 +13,16 @@ import LogoImpressoDataLab from "./_svg/LogoImpressoDataLab"
 import UserArea from "./UserArea"
 import { Search } from "iconoir-react"
 
-const Header = () => {
+const Header: React.FC<{ enableSearch: string }> = ({
+  enableSearch = false,
+}) => {
   return (
     <header className="Header py-3">
       <Navbar>
         <Container fluid>
           <Navbar.Brand className="mx-3">
             <Link to="/">
-              <LogoImpressoDataLab width={110} />
+              <LogoImpressoDataLab width={90} />
             </Link>
           </Navbar.Brand>
           <Nav className="me-auto">
@@ -44,7 +46,7 @@ const Header = () => {
                   size="sm"
                   variant="transparent"
                 >
-                  <Search />
+                  {enableSearch && <Search />}
                 </Button>
               </InputGroup>
             </Form>
diff --git a/src/components/PageLayout.js b/src/components/PageLayout.js
index 1433bc5..ecaa8a5 100644
--- a/src/components/PageLayout.js
+++ b/src/components/PageLayout.js
@@ -66,6 +66,7 @@ const PageLayout = ({ children, path, pageContext }) => {
     >
       <Modal.Header closeButton>
         {/* <Link to="/">impresso-datalab</Link> */}
+        test
       </Modal.Header>
       <Modal.Body className="container">{children}</Modal.Body>
     </Modal>
diff --git a/src/components/Wall.js b/src/components/Wall.js
index ad1d7e4..a79ad08 100644
--- a/src/components/Wall.js
+++ b/src/components/Wall.js
@@ -119,17 +119,13 @@ const Wall = () => {
         </Row>
         <Row className="my-3  align-items-bottom">
           <Col className=" d-flex  justify-content-center align-items-end ">
-            <h3 className="border-bottom border-dark p-3 w-100">
-              Notebooks you didn't think you needed
-            </h3>
+            <h4 className="p-3 w-100">Notebooks you didn't think you needed</h4>
           </Col>
           <Col className="  d-flex justify-content-center align-items-end ">
-            <h3 className="border-bottom border-dark p-3 w-100">
-              Work with your data!
-            </h3>
+            <h4 className="p-3 w-100">Work with your data!</h4>
           </Col>
           <Col className="  d-flex justify-content-center align-items-end ">
-            <h3 className="border-bottom border-dark p-3 w-100">Tutorials</h3>
+            <h4 className="p-3 w-100">Tutorials</h4>
           </Col>
         </Row>
         <Row>
diff --git a/src/pages/access-to-api.tsx b/src/pages/access-to-api.tsx
new file mode 100644
index 0000000..125517b
--- /dev/null
+++ b/src/pages/access-to-api.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { graphql, PageProps } from "gatsby"
+import AccessToApi from "../components/AccessToApi"
+
+type DataProps = {
+  site: {
+    siteMetadata: {
+      title: string
+    }
+  }
+}
+
+const AccessToApiRoute = ({ data: { site } }: PageProps<DataProps>) => {
+  const llToken = ""
+  return <AccessToApi llToken={llToken} />
+}
+
+export default AccessToApiRoute
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`
diff --git a/src/stories/pages/AccessToApi.stories.tsx b/src/stories/components/AccessToApi.stories.tsx
similarity index 97%
rename from src/stories/pages/AccessToApi.stories.tsx
rename to src/stories/components/AccessToApi.stories.tsx
index 10e5bc2..248760d 100644
--- a/src/stories/pages/AccessToApi.stories.tsx
+++ b/src/stories/components/AccessToApi.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { delay, http, HttpResponse } from "msw"
 import type { Meta, StoryObj } from "@storybook/react"
-import AccessToApi, { AccessToApiProps } from "../../pages/AccessToApi"
+import AccessToApi, { AccessToApiProps } from "../../components/AccessToApi"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Modal } from "react-bootstrap"