diff --git a/.gitignore b/.gitignore
index 509ec38..de427c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,5 @@ dist/
 cypress/videos
 cypress/screenshots
 
-.idea
\ No newline at end of file
+.idea
+.env
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index aee98ce..d4bb9e3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -14,9 +14,6 @@ const GlobalStyle = createGlobalStyle((props: ThemeProps) =>
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <div data-testid="app-react">
-      <Head>
-        <base href="/kratos-ui/" />
-      </Head>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
         <Component {...pageProps} />
diff --git a/pages/index.tsx b/pages/index.tsx
index 4269395..f9ba0d9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,6 +15,7 @@ const Home: NextPage = () => {
   const [hasSession, setHasSession] = useState<boolean>(false)
   const router = useRouter()
   const onLogout = LogoutLink()
+  const handleNavigation = (href: string) => () => router.push(href)
 
   useEffect(() => {
     ory
@@ -60,62 +61,62 @@ const Home: NextPage = () => {
               <div className="row">
                 <DocsButton
                   testid="study"
-                  href="/study?projectId=STAGING_PROJECT"
                   disabled={hasSession}
                   title={"Study"}
+                  onClick={handleNavigation("/study?projectId=STAGING_PROJECT")}
                 />
                 <DocsButton
                   testid="eligibility"
-                  href="/eligibility"
                   disabled={hasSession}
                   title={"Eligibility"}
+                  onClick={handleNavigation("/eligibility")}
                 />
                 <DocsButton
                   testid="login"
-                  href="/login"
                   disabled={hasSession}
                   title={"Login"}
+                  onClick={handleNavigation("/login")}
                 />
                 <DocsButton
                   testid="sign-up"
-                  href="/registration"
                   disabled={hasSession}
                   title={"Sign Up"}
+                  onClick={handleNavigation("/registration")}
                 />
                 <DocsButton
                   testid="recover-account"
-                  href="/recovery"
                   disabled={hasSession}
                   title="Recover Account"
+                  onClick={handleNavigation("/recovery")}
                 />
                 <DocsButton
                   testid="verify-account"
-                  href="/verification"
                   title="Verify Account"
+                  onClick={handleNavigation("/verification")}
                 />
                 <DocsButton
                   testid="consent"
-                  href="/study-consent"
                   title="Study Consent"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/study-consent")}
                 />
                 <DocsButton
                   testid="apps"
-                  href="/apps"
                   title="Apps"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/apps")}
                 />
                 <DocsButton
                   testid="profile"
-                  href="/profile"
                   title="Profile"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/profile")}
                 />
                 <DocsButton
                   testid="account-settings"
-                  href="/settings"
                   disabled={!hasSession}
                   title={"Account Settings"}
+                  onClick={handleNavigation("/settings")}
                 />
                 <DocsButton
                   testid="logout"
diff --git a/pkg/sdk/index.ts b/pkg/sdk/index.ts
index 8ac0471..365dd10 100644
--- a/pkg/sdk/index.ts
+++ b/pkg/sdk/index.ts
@@ -2,7 +2,7 @@ import { Configuration, FrontendApi } from "@ory/client"
 import { edgeConfig } from "@ory/integrations/next"
 
 const localConfig = {
-  basePath: process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL ?? "" + "/api/.ory",
+  basePath: `${process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL}/api/.ory`,
   baseOptions: {
     withCredentials: true,
   },
@@ -10,6 +10,6 @@ const localConfig = {
 
 export default new FrontendApi(
   new Configuration(
-    process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL ? localConfig : edgeConfig,
+    localConfig,
   ),
 )
diff --git a/pkg/styled/index.tsx b/pkg/styled/index.tsx
index 2e2573e..1371b88 100644
--- a/pkg/styled/index.tsx
+++ b/pkg/styled/index.tsx
@@ -8,8 +8,6 @@ import {
 import cn from "classnames"
 import styled from "styled-components"
 
-const BASE_URL = process.env.BASE_PATH || ""
-
 export const MarginCard = styled(Card)`
   margin-top: 70px;
   margin-bottom: 18px;
@@ -109,7 +107,6 @@ export const DocsButton = ({
   disabled,
   unresponsive,
 }: DocsButtonProps) => {
-  const url = BASE_URL + href
   return (
     <div className={cn("col-xs-4", { "col-md-12": !unresponsive })}>
       <div className="box">
@@ -117,7 +114,7 @@ export const DocsButton = ({
           onClick={onClick}
           disabled={disabled}
           data-testid={testid}
-          href={url}
+          href={href}
         >
           {title}
         </TextLeftButton>
