diff --git a/.env.local.sample b/.env.local.sample
index 0ab361a0..6dfe5314 100644
--- a/.env.local.sample
+++ b/.env.local.sample
@@ -1,2 +1,3 @@
-NEXT_PUBLIC_API_URL=http://localhost:4000
-NEXT_PUBLIC_QRCODE_HOST=seium.org
\ No newline at end of file
+NEXT_PUBLIC_API_URL=http://locahost:4000
+NEXT_PUBLIC_QRCODE_HOST=seium.org
+NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG=true
\ No newline at end of file
diff --git a/components/FeatureFlags/BackOfficeWrapper.tsx b/components/FeatureFlags/BackOfficeWrapper.tsx
new file mode 100644
index 00000000..e9bb4e2d
--- /dev/null
+++ b/components/FeatureFlags/BackOfficeWrapper.tsx
@@ -0,0 +1,13 @@
+type BackOfficeWrapperProps = {
+  children: React.ReactNode;
+};
+
+export default function BackOfficeWrapper({
+  children,
+}: BackOfficeWrapperProps) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "true") {
+    return <>{children}</>;
+  }
+
+  return null;
+}
diff --git a/components/Navbar/index.jsx b/components/Navbar/index.jsx
index 67468dd4..4352eb3d 100644
--- a/components/Navbar/index.jsx
+++ b/components/Navbar/index.jsx
@@ -11,6 +11,7 @@ import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { useAuth } from "@context/Auth";
 import JoinUs from "@components/JoinUs";
 import styles from "./style.module.css";
+import BackOfficeWrapper from "@components/FeatureFlags/BackOfficeWrapper";
 
 const navigation = [
   { name: "Schedule", slug: "/schedule" },
@@ -76,15 +77,17 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                             {item.name}
                           </Link>
                         ))}
-                        {isAuthenticated ? null : (
-                          <Link
-                            key="login"
-                            href="/login"
-                            className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
-                          >
-                            Login
-                          </Link>
-                        )}
+                        <BackOfficeWrapper>
+                          {isAuthenticated ? null : (
+                            <Link
+                              key="login"
+                              href="/login"
+                              className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
+                            >
+                              Login
+                            </Link>
+                          )}
+                        </BackOfficeWrapper>
                       </div>
                       {isAuthenticated ? (
                         <Menu as="div" className="relative z-50 ml-3">
@@ -186,17 +189,19 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                     </Link>
                   </Disclosure.Button>
                 ))}
-              {!isAuthenticated && (
-                <Disclosure.Button
-                  key="login"
-                  as="a"
-                  className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
-                >
-                  <Link key="login" href="/login">
-                    Login
-                  </Link>
-                </Disclosure.Button>
-              )}
+              <BackOfficeWrapper>
+                {!isAuthenticated && (
+                  <Disclosure.Button
+                    key="login"
+                    as="a"
+                    className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
+                  >
+                    <Link key="login" href="/login">
+                      Login
+                    </Link>
+                  </Disclosure.Button>
+                )}
+              </BackOfficeWrapper>
               {isAuthenticated && (
                 <Disclosure.Button
                   key="login"
diff --git a/layout/Home/Home.tsx b/layout/Home/Home.tsx
index 36fea787..931cd5e9 100644
--- a/layout/Home/Home.tsx
+++ b/layout/Home/Home.tsx
@@ -7,6 +7,7 @@ import Footer from "@components/Footer";
 function Home() {
   return (
     <Navbar bgColor="secondary" button="quinary" fgColor="white">
+      {/* FIXME: The parameter could probably be better in some way */}
       <Hero />
       <Schedule />
       <Sponsors />
diff --git a/layout/Sponsor/Visitors/Visitors.tsx b/layout/Sponsor/Visitors/Visitors.tsx
index 7691392c..f29162d9 100644
--- a/layout/Sponsor/Visitors/Visitors.tsx
+++ b/layout/Sponsor/Visitors/Visitors.tsx
@@ -53,6 +53,7 @@ const SponsorVisitors: React.FC = () => {
           setVisitors(response.data);
         }
       })
+      // FIXME: This should be displayed as a toast notification
       .catch((error) => console.log(error));
   }, [user]);
 
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 00000000..de032c4d
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "false") {
+    return NextResponse.redirect(new URL("/404", request.url));
+  }
+}
+
+export const config = {
+  matcher: [
+    "/attendee/:path*",
+    "/attendees/:path*",
+    "/badge/:path*",
+    "/product/:path*",
+    "/register/:path*",
+    "/sponsor/:path*",
+    "/staff/:path*",
+    "/forgot-password/:path*",
+    "/login/:path*",
+    "/reset/:path*",
+    "/signup/:path*",
+  ],
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1308b8f3..271e7ab7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,7 @@ import Header from "@components/Header";
 
 import "../styles/globals.css";
 
-function MyApp({ Component, pageProps }) {
+function App({ Component, pageProps }) {
   return (
     <AuthProvider>
       <Header />
@@ -12,4 +12,4 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-export default MyApp;
+export default App;