diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 7a4d1fa24..6dd2ee101 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -21,6 +21,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
 
   // TODO: Update code, add throttle and more.
+  // TODO: Make sure to not do any unnecessary updates as it's doing right now
   useEffect(() => {
     const offset = 0
     function handleScroll() {
diff --git a/next.config.js b/next.config.js
index 4f1ba3c48..471c7e404 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,9 +3,11 @@ module.exports = {
     sizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
   },
-  i18n: {
-    locales: ['en', 'es'],
-    defaultLocale: 'en',
+  experimental: {
+    i18n: {
+      locales: ['en-US', 'es'],
+      defaultLocale: 'en-US',
+    },
   },
   rewrites() {
     return [
diff --git a/pages/index.tsx b/pages/index.tsx
index 649a4400c..856777cfa 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,12 @@ import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
 
-export async function getStaticProps({ preview }: GetStaticPropsContext) {
+export async function getStaticProps({
+  preview,
+  locale,
+}: GetStaticPropsContext) {
+  console.log('LOCALE', locale)
+
   const { products: featuredProducts } = await getAllProducts({
     variables: { field: 'featuredProducts', first: 6 },
   })