diff --git a/www/pages/storage/Storage.tsx b/www/pages/storage/Storage.tsx
index 13532bc77cb..bda4606fe3d 100644
--- a/www/pages/storage/Storage.tsx
+++ b/www/pages/storage/Storage.tsx
@@ -12,7 +12,7 @@ import {
   IconCheckSquare,
   IconBarChart,
 } from '@supabase/ui'
-import { createClient } from '@supabase/supabase-js'
+
 import DefaultLayout from '~/components/Layouts/Default'
 
 import ProductHeader from '~/components/Sections/ProductHeader'
@@ -34,210 +34,226 @@ import ImageCarousel from '~/components/Carousels/ImageCarousel'
 import DashboardViewData from 'data/products/storage/dashboard-carousel.json'
 import ExampleCard from '~/components/ExampleCard'
 import ProductIcon from '~/components/ProductIcon'
+import { NextSeo } from 'next-seo'
 
 function AuthPage() {
   // base path for images
   const { basePath } = useRouter()
 
-  // supabase auth widget project details
-  const supabase = createClient(
-    'https://rsnibhkhsbfnncjmwnkj.supabase.co',
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxNDE1MywiZXhwIjoxOTMwNzkwMTUzfQ.OQEbAaTfgDdLCCht251P2JRD3QDnui6nsU8N-tZA_Mc'
-  )
+  const meta_title = 'Storage | Store any digital content'
+  const meta_description =
+    'An open source Object store service with unlimited scalability, for any file type.'
 
   return (
-    <DefaultLayout>
-      <ProductHeader
-        icon={Solutions['storage'].icon}
-        title={Solutions['storage'].name}
-        h1={[
-          <span>
-            Store and serve
-            <br /> any type of digital content
-          </span>,
-        ]}
-        subheader={[
-          'An open source Object store service with unlimited scalability, for any file type.',
-          'With custom policies and permissions that are familiar and easy to implement.',
-        ]}
-        image={[
-          <img
-            className="w-full header--light block"
-            src={`${basePath}/images/product/storage/header--light.png`}
-          />,
-          <img
-            className="w-full header--dark mr-0 dark:block"
-            src={`${basePath}/images/product/storage/header--dark.png`}
-          />,
-        ]}
+    <>
+      <NextSeo
+        title={meta_title}
+        description={meta_description}
+        openGraph={{
+          title: meta_title,
+          description: meta_description,
+          url: `${basePath}/storage`,
+          images: [
+            {
+              url: `https://supabase.io/${basePath}/images/product/storage/storage-og.jpg`,
+            },
+          ],
+        }}
       />
-
-      <SectionContainer>
-        <div className="grid grid-cols-12">
-          <div className="col-span-3">
-            <p className="mb-4">
-              <Space>
-                <ProductIcon icon={Solutions['storage'].icon} />
-                <IconX />
-                <ProductIcon icon={Solutions['authentication'].icon} />
-                <IconX />
-                <ProductIcon icon={Solutions['database'].icon} />
-              </Space>
-            </p>
-            <Typography.Title level={4}>Write less code</Typography.Title>
-            <Typography.Text>
-              <p className="text-lg">
-                Interoperable with all other Supabase services, including Auth and Postgres.
-              </p>
-              {/* <p>
-                Familiar and easy to use permissions mean that your content is secure and accessible
-                only to the right users
-              </p> */}
-            </Typography.Text>
-          </div>
-          <div className="col-span-3 col-start-5">
-            <p className="mb-4">
-              <IconBarChart />
-            </p>
-            <Typography.Title level={4}>Lightning fast</Typography.Title>
-            <Typography.Text>
-              <p className="text-lg">
-                Thin API server layer that leverages Postgres' permissions and performance.
-              </p>
-              {/* <p>
-                1.3x faster than XXX, your content can be delivered anywhere in the world at the
-                speed you expect.
-              </p> */}
-            </Typography.Text>
-          </div>
-          <div className="col-span-3 col-start-9">
-            <p className="mb-4">
-              <IconCheckSquare />
-            </p>
-            <Typography.Title level={4}>Dependable</Typography.Title>
-            <Typography.Text>
-              <p className="text-lg">Enterprise-level uptime complete with automatic backups.</p>
-              {/* <p>A durability rating of 99.999999999%.</p> */}
-            </Typography.Text>
-          </div>
-        </div>
-      </SectionContainer>
-
-      <SectionContainer className="pt-16">
-        <div className="mb-16 block">
-          <Typography.Title>Sleek dashboard for managing your media</Typography.Title>
-          <p className="text-lg">A complete Object Explorer so that any of your team can use.</p>
-          <p>
-            Drag and drop uploading, moving objects, and multiple object selection. As easy as
-            working on your desktop.
-          </p>
-        </div>
-        <ImageCarousel
-          // @ts-ignore
-          content={DashboardViewData}
-          footer={[
-            <Typography.Title level={4}>Check out our example app</Typography.Title>,
-            // !! Update this example !!
-            <ExampleCard
-              type={'example'}
-              products={['database']}
-              title={'Profile managment example'}
-              description={'NextJS Slack clone app using Supabase realtime subscriptions'}
-              author={'supabase'}
-              author_url={'https://github.com/supabase'}
-              author_img={'https://avatars.githubusercontent.com/u/54469796'}
-              repo_name={'update-this-example'}
-              repo_url={
-                'https://github.com/supabase/supabase/tree/master/examples/nextjs-slack-clone'
-              }
-              vercel_deploy_url={'a'}
-              demo_url={'https://supabase-slack-clone-supabase.vercel.app/'}
+      <DefaultLayout>
+        <ProductHeader
+          icon={Solutions['storage'].icon}
+          title={Solutions['storage'].name}
+          h1={[
+            <span>
+              Store and serve
+              <br /> any type of digital content
+            </span>,
+          ]}
+          subheader={[
+            'An open source Object store service with unlimited scalability, for any file type.',
+            'With custom policies and permissions that are familiar and easy to implement.',
+          ]}
+          image={[
+            <img
+              className="w-full header--light block"
+              src={`${basePath}/images/product/storage/header--light.png`}
+            />,
+            <img
+              className="w-full header--dark mr-0 dark:block"
+              src={`${basePath}/images/product/storage/header--dark.png`}
             />,
           ]}
         />
-      </SectionContainer>
 
-      <SectionContainer className="-mb-48 pt-0">
-        <APISection
-          title="Simple and convenient APIs"
-          // @ts-ignore
-          content={ApiExamples}
-          text={[
-            <p>Built from the ground-up for interoperable authentication.</p>,
-            <p>
-              Fast and easy to implement using our powerful library clients. Asset optimization and
-              image transformation coming soon!
-            </p>,
-          ]}
-          footer={[
-            <div className="grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16 mt-8">
-              <div className="col-span-6 lg:col-span-12 lg:mb-8 xl:mb-0 xl:col-span-4">
-                <FeatureColumn
-                  icon={<IconWifi />}
-                  title="CDN integration"
-                  text="Served from the edge to reduce latency."
-                />
-                <Badge color="blue">Coming soon</Badge>
-              </div>
-              <div className="col-span-6 lg:col-span-12 xl:col-span-4">
-                <FeatureColumn
-                  icon={<IconShuffle />}
-                  title="Auto transformation & optimisation"
-                  text="Resize and compress your media before you serve it."
-                />
-                <Badge color="blue">Coming soon</Badge>
-              </div>
-            </div>,
-          ]}
-        />
-      </SectionContainer>
-
-      <div className="relative">
-        <div className="section--masked">
-          <div className="section--bg-masked">
-            <div className="section--bg border-t border-gray-100 dark:border-gray-600"></div>
+        <SectionContainer>
+          <div className="grid grid-cols-12">
+            <div className="col-span-3">
+              <p className="mb-4">
+                <Space>
+                  <ProductIcon icon={Solutions['storage'].icon} />
+                  <IconX />
+                  <ProductIcon icon={Solutions['authentication'].icon} />
+                  <IconX />
+                  <ProductIcon icon={Solutions['database'].icon} />
+                </Space>
+              </p>
+              <Typography.Title level={4}>Write less code</Typography.Title>
+              <Typography.Text>
+                <p className="text-lg">
+                  Interoperable with all other Supabase services, including Auth and Postgres.
+                </p>
+                {/* <p>
+                Familiar and easy to use permissions mean that your content is secure and accessible
+                only to the right users
+              </p> */}
+              </Typography.Text>
+            </div>
+            <div className="col-span-3 col-start-5">
+              <p className="mb-4">
+                <IconBarChart />
+              </p>
+              <Typography.Title level={4}>Lightning fast</Typography.Title>
+              <Typography.Text>
+                <p className="text-lg">
+                  Thin API server layer that leverages Postgres' permissions and performance.
+                </p>
+                {/* <p>
+                1.3x faster than XXX, your content can be delivered anywhere in the world at the
+                speed you expect.
+              </p> */}
+              </Typography.Text>
+            </div>
+            <div className="col-span-3 col-start-9">
+              <p className="mb-4">
+                <IconCheckSquare />
+              </p>
+              <Typography.Title level={4}>Dependable</Typography.Title>
+              <Typography.Text>
+                <p className="text-lg">Enterprise-level uptime complete with automatic backups.</p>
+                {/* <p>A durability rating of 99.999999999%.</p> */}
+              </Typography.Text>
+            </div>
           </div>
-          <div className="section-container pt-12 pb-0">
-            {/* <FloatingIcons /> */}
-            <div className="overflow-x-hidden">
-              {/* <SectionContainer className="mb-0 pb-8">
+        </SectionContainer>
+
+        <SectionContainer className="pt-16">
+          <div className="mb-16 block">
+            <Typography.Title>Sleek dashboard for managing your media</Typography.Title>
+            <p className="text-lg">A complete Object Explorer so that any of your team can use.</p>
+            <p>
+              Drag and drop uploading, moving objects, and multiple object selection. As easy as
+              working on your desktop.
+            </p>
+          </div>
+          <ImageCarousel
+            // @ts-ignore
+            content={DashboardViewData}
+            footer={[
+              <Typography.Title level={4}>Check out our example app</Typography.Title>,
+              // !! Update this example !!
+              <ExampleCard
+                type={'example'}
+                products={['database']}
+                title={'Profile managment example'}
+                description={'NextJS Slack clone app using Supabase realtime subscriptions'}
+                author={'supabase'}
+                author_url={'https://github.com/supabase'}
+                author_img={'https://avatars.githubusercontent.com/u/54469796'}
+                repo_name={'update-this-example'}
+                repo_url={
+                  'https://github.com/supabase/supabase/tree/master/examples/nextjs-slack-clone'
+                }
+                vercel_deploy_url={'a'}
+                demo_url={'https://supabase-slack-clone-supabase.vercel.app/'}
+              />,
+            ]}
+          />
+        </SectionContainer>
+
+        <SectionContainer className="-mb-48 pt-0">
+          <APISection
+            title="Simple and convenient APIs"
+            // @ts-ignore
+            content={ApiExamples}
+            text={[
+              <p>Built from the ground-up for interoperable authentication.</p>,
+              <p>
+                Fast and easy to implement using our powerful library clients. Asset optimization
+                and image transformation coming soon!
+              </p>,
+            ]}
+            footer={[
+              <div className="grid grid-cols-12 gap-8 lg:gap-0 xl:gap-16 mt-8">
+                <div className="col-span-6 lg:col-span-12 lg:mb-8 xl:mb-0 xl:col-span-4">
+                  <FeatureColumn
+                    icon={<IconWifi />}
+                    title="CDN integration"
+                    text="Served from the edge to reduce latency."
+                  />
+                  <Badge color="blue">Coming soon</Badge>
+                </div>
+                <div className="col-span-6 lg:col-span-12 xl:col-span-4">
+                  <FeatureColumn
+                    icon={<IconShuffle />}
+                    title="Auto transformation & optimisation"
+                    text="Resize and compress your media before you serve it."
+                  />
+                  <Badge color="blue">Coming soon</Badge>
+                </div>
+              </div>,
+            ]}
+          />
+        </SectionContainer>
+
+        <div className="relative">
+          <div className="section--masked">
+            <div className="section--bg-masked">
+              <div className="section--bg border-t border-gray-100 dark:border-gray-600"></div>
+            </div>
+            <div className="section-container pt-12 pb-0">
+              {/* <FloatingIcons /> */}
+              <div className="overflow-x-hidden">
+                {/* <SectionContainer className="mb-0 pb-8">
                 <GithubExamples />
               </SectionContainer> */}
 
-              <SectionContainer>
-                <div className="grid grid-cols-12 lg:gap-16">
-                  <div className="col-span-12 lg:col-span-5 mb-8">
-                    <Typography.Title level={2}>
-                      Integrates natively <br />
-                      with Supabase Auth
-                    </Typography.Title>
-                    <p className="text-lg">
-                      Using Postgres Row Level Security to create File access rules.
-                    </p>
-                    <p>
-                      Supabase Storage is built around Postgres so that you can use any combination
-                      of SQL, Postgres functions, and even your own metadata to write policies.
-                    </p>
-                    <Button
-                      size="small"
-                      type="default"
-                      className="mt-4"
-                      icon={<IconArrowUpRight />}
-                    >
-                      Expore documentation
-                    </Button>
+                <SectionContainer>
+                  <div className="grid grid-cols-12 lg:gap-16">
+                    <div className="col-span-12 lg:col-span-5 mb-8">
+                      <Typography.Title level={2}>
+                        Integrates natively <br />
+                        with Supabase Auth
+                      </Typography.Title>
+                      <p className="text-lg">
+                        Using Postgres Row Level Security to create File access rules.
+                      </p>
+                      <p>
+                        Supabase Storage is built around Postgres so that you can use any
+                        combination of SQL, Postgres functions, and even your own metadata to write
+                        policies.
+                      </p>
+                      <Button
+                        size="small"
+                        type="default"
+                        className="mt-4"
+                        icon={<IconArrowUpRight />}
+                      >
+                        Expore documentation
+                      </Button>
+                    </div>
+                    <div className="col-span-12 lg:col-span-6 lg:col-start-7">
+                      <SplitCodeBlockCarousel content={StoragePermissionsData} />
+                    </div>
                   </div>
-                  <div className="col-span-12 lg:col-span-6 lg:col-start-7">
-                    <SplitCodeBlockCarousel content={StoragePermissionsData} />
-                  </div>
-                </div>
-              </SectionContainer>
+                </SectionContainer>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <CTABanner />
-    </DefaultLayout>
+        <CTABanner />
+      </DefaultLayout>
+    </>
   )
 }
 
diff --git a/www/public/images/product/storage/storage-og.jpg b/www/public/images/product/storage/storage-og.jpg
new file mode 100644
index 00000000000..3b9fee0d5bc
Binary files /dev/null and b/www/public/images/product/storage/storage-og.jpg differ