diff --git a/assets/base.css b/assets/base.scss
similarity index 100%
rename from assets/base.css
rename to assets/base.scss
diff --git a/assets/chrome-bug.css b/assets/chrome-bug.scss
similarity index 100%
rename from assets/chrome-bug.css
rename to assets/chrome-bug.scss
diff --git a/assets/components.css b/assets/components.scss
similarity index 100%
rename from assets/components.css
rename to assets/components.scss
diff --git a/assets/main.css b/assets/main.scss
similarity index 53%
rename from assets/main.css
rename to assets/main.scss
index 54dd1e50f..789e81d86 100644
--- a/assets/main.css
+++ b/assets/main.scss
@@ -1,7 +1,7 @@
 @tailwind base;
-@import './base.css';
+@import './base.scss';
 
 @tailwind components;
-@import './components.css';
+@import './components.scss';
 
 @tailwind utilities;
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 75b2806ef..57be0873c 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -25,40 +25,47 @@ const Footer: FC<Props> = ({ className, pages }) => {
     <footer className={rootClassName}>
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
-          <div className="col-span-1 lg:col-span-2">
+          {/* <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
                 <span className="rounded-full border border-gray-700 mr-2">
                   <Logo />
                 </span>
-                <span>ACME</span>
+                <span>BetterBrand</span>
               </a>
             </Link>
-          </div>
+          </div> */}
           <div className="col-span-1 lg:col-span-2">
             <ul className="flex flex-initial flex-col md:flex-1">
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
                   <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Home
+                    <h6>Subscribe to newsletter</h6>
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
                   <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Careers
+                    <h6>Instagram</h6>
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
+                    <h6>Facebook</h6>
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/blog">
                   <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Blog
+                    <h6>Email</h6>
                   </a>
                 </Link>
               </li>
-              {sitePages.map((page) => (
+              {/* {sitePages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
                     <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
@@ -66,10 +73,10 @@ const Footer: FC<Props> = ({ className, pages }) => {
                     </a>
                   </Link>
                 </li>
-              ))}
+              ))} */}
             </ul>
           </div>
-          <div className="col-span-1 lg:col-span-2">
+          {/* <div className="col-span-1 lg:col-span-2">
             <ul className="flex flex-initial flex-col md:flex-1">
               {legalPages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
@@ -81,8 +88,8 @@ const Footer: FC<Props> = ({ className, pages }) => {
                 </li>
               ))}
             </ul>
-          </div>
-          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+          </div> */}
+          {/* <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
               <a
                 aria-label="Github Repository"
@@ -93,9 +100,9 @@ const Footer: FC<Props> = ({ className, pages }) => {
               </a>
               <I18nWidget />
             </div>
-          </div>
+          </div> */}
         </div>
-        <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
+        {/* <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
@@ -114,7 +121,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               />
             </a>
           </div>
-        </div>
+        </div> */}
       </Container>
     </footer>
   )
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index fcf9f1e10..a0a3476c7 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -12,10 +12,11 @@ const Navbar: FC = () => (
         <div className="flex items-center flex-1">
           <Link href="/">
             <a className={s.logo} aria-label="Logo">
-              <Logo />
+              {/* <Logo /> */}
+              <h5>BetterBrand</h5>
             </a>
           </Link>
-          <nav className="hidden ml-6 space-x-4 lg:block">
+          {/* <nav className="hidden ml-6 space-x-4 lg:block">
             <Link href="/search">
               <a className={s.link}>All</a>
             </Link>
@@ -28,21 +29,21 @@ const Navbar: FC = () => (
             <Link href="/search?q=shoes">
               <a className={s.link}>Shoes</a>
             </Link>
-          </nav>
+          </nav> */}
         </div>
 
-        <div className="justify-center flex-1 hidden lg:flex">
+        {/* <div className="justify-center flex-1 hidden lg:flex">
           <Searchbar />
-        </div>
+        </div> */}
 
         <div className="flex justify-end flex-1 space-x-8">
           <UserNav />
         </div>
       </div>
 
-      <div className="flex pb-4 lg:px-6 lg:hidden">
+      {/* <div className="flex pb-4 lg:px-6 lg:hidden">
         <Searchbar id="mobile-search" />
-      </div>
+      </div> */}
     </Container>
   </NavbarRoot>
 )
diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 4d00970a9..6641492ae 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -26,11 +26,19 @@ const UserNav: FC<Props> = ({ className }) => {
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
         <ul className={s.list}>
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          <li className={s.item}>
+            <Link href="/">
+              <a onClick={closeSidebarIfPresent} aria-label="Shop">
+                <h5>Shop</h5>
+              </a>
+            </Link>
           </li>
-          {process.env.COMMERCE_WISHLIST_ENABLED && (
+          <li className={s.item} onClick={toggleSidebar}>
+            {/* <Bag /> */}
+            <h5>Cart</h5>
+            {/* {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>} */}
+          </li>
+          {/* {process.env.COMMERCE_WISHLIST_ENABLED && (
             <li className={s.item}>
               <Link href="/wishlist">
                 <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
@@ -38,8 +46,8 @@ const UserNav: FC<Props> = ({ className }) => {
                 </a>
               </Link>
             </li>
-          )}
-          <li className={s.item}>
+          )} */}
+          {/* <li className={s.item}>
             {customer ? (
               <DropdownMenu />
             ) : (
@@ -51,7 +59,7 @@ const UserNav: FC<Props> = ({ className }) => {
                 <Avatar />
               </button>
             )}
-          </li>
+          </li> */}
         </ul>
       </div>
     </nav>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index dae0311b4..4de4040a7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@assets/main.css'
-import '@assets/chrome-bug.css'
-import 'keen-slider/keen-slider.min.css'
+import '@assets/main.scss'
+import '@assets/chrome-bug.scss'
+// import 'keen-slider/keen-slider.min.css'
 
 import { FC, useEffect } from 'react'
 import type { AppProps } from 'next/app'
diff --git a/pages/index.tsx b/pages/index.tsx
index a77e2d515..51965bb56 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,6 @@ export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
-  console.log('getStaticProps')
   const config = getConfig({ locale })
 
   const { products } = await getAllProducts({
@@ -44,6 +43,7 @@ export default function Home({
   return (
     <>
       <Grid>
+        {/* main product */}
         {products.slice(0, 3).map((product, i) => (
           <ProductCard
             key={product.id}
@@ -55,7 +55,12 @@ export default function Home({
           />
         ))}
       </Grid>
+      {/* <FeaturedIn>Featured In</FeaturedIn> */}
+      {/* <Banana>Banana Comparison</Banana> */}
+      {/* <Nutrition></Nutrition> */}
+      {/* <Mission></Mission> */}
       <Marquee variant="secondary">
+        {/* instagram */}
         {products.slice(0, 3).map((product, i) => (
           <ProductCard
             key={product.id}
@@ -68,46 +73,6 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <Hero
-        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
-        description="
-        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
-        ‘Carbon’ iteration, and now release details have been locked in for
-        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
-        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
-        Hebrew. It’s now undergone a name change, and will be referred to as
-        ‘Natural’."
-      />
-      <Grid layout="B">
-        {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            imgProps={{
-              width: i === 0 ? 1080 : 540,
-              height: i === 0 ? 1080 : 540,
-            }}
-          />
-        ))}
-      </Grid>
-      <Marquee>
-        {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            variant="slim"
-            imgProps={{
-              width: 320,
-              height: 320,
-            }}
-          />
-        ))}
-      </Marquee>
-      {/* <HomeAllProductsGrid
-        newestProducts={products}
-        categories={categories}
-        brands={brands}
-      /> */}
     </>
   )
 }
diff --git a/pages/index2.tsx b/pages/index2.tsx
new file mode 100644
index 000000000..3a84112e5
--- /dev/null
+++ b/pages/index2.tsx
@@ -0,0 +1,114 @@
+import { Layout } from '@components/common'
+import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
+// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+
+import { getConfig } from '@framework/api'
+import getAllProducts from '@framework/product/get-all-products'
+import getSiteInfo from '@framework/common/get-site-info'
+import getAllPages from '@framework/common/get-all-pages'
+
+export async function getStaticProps({
+  preview,
+  locale,
+}: GetStaticPropsContext) {
+  const config = getConfig({ locale })
+
+  const { products } = await getAllProducts({
+    variables: { first: 12 },
+    config,
+    preview,
+  })
+
+  const { categories, brands } = await getSiteInfo({ config, preview })
+  const { pages } = await getAllPages({ config, preview })
+
+  return {
+    props: {
+      products,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 14400,
+  }
+}
+
+export default function Home({
+  products,
+  brands,
+  categories,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <Grid>
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee variant="secondary">
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            variant="slim"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
+          />
+        ))}
+      </Marquee>
+      <Hero
+        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
+        description="
+        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
+        ‘Carbon’ iteration, and now release details have been locked in for
+        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
+        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
+        Hebrew. It’s now undergone a name change, and will be referred to as
+        ‘Natural’."
+      />
+      <Grid layout="B">
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee>
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            variant="slim"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
+          />
+        ))}
+      </Marquee>
+      {/* <HomeAllProductsGrid
+        newestProducts={products}
+        categories={categories}
+        brands={brands}
+      /> */}
+    </>
+  )
+}
+
+Home.Layout = Layout