diff --git a/apps/www/components/LaunchWeek/Banners/CountdownBanner.tsx b/apps/www/components/LaunchWeek/Banners/CountdownBanner.tsx
new file mode 100644
index 00000000000..12fe5c3738c
--- /dev/null
+++ b/apps/www/components/LaunchWeek/Banners/CountdownBanner.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import Link from 'next/link'
+import Countdown from 'react-countdown'
+import _announcement from '~/data/Announcement.json'
+import { AnnouncementProps } from '../../Nav/Announcement'
+import { useRouter } from 'next/router'
+
+interface CountdownStepProps {
+  value: string | number
+  unit: string
+}
+
+const announcement = _announcement as AnnouncementProps
+
+function CountdownStep({ value, unit }: CountdownStepProps) {
+  return (
+    <div className="rounded-md p-[1px] overflow-hidden bg-gradient-to-b from-[#FFFFFF50] to-[#FFFFFF00]">
+      <div className="py-1 px-2 rounded-md leading-4 flex items-center justify-center bg-gradient-to-b from-[#9E44EF40] to-[#DBB8BF40] backdrop-blur-md">
+        <span className="m-0">{value}</span>
+        <span>{unit}</span>
+      </div>
+    </div>
+  )
+}
+
+function CountdownBanner() {
+  const { pathname } = useRouter()
+  const isLaunchWeekPage = pathname === '/launch-week'
+  const isLaunchWeekSection = pathname.includes('launch-week')
+
+  const renderer = ({ days, hours, minutes, seconds, completed }: any) => {
+    if (completed) {
+      // Render a completed state
+      return (
+        <div className="w-full flex gap-3 md:gap-6 items-center justify-center">
+          <p>Supabase Launch Week 7</p>
+          <div>
+            <Link href="/launch-week">
+              <a className="bg-white text-xs px-1.5 md:px-2.5 py-1 rounded-full text-[#9E44EF] shadow-none hover:shadow-mg cursor-pointer">
+                Now live
+              </a>
+            </Link>
+          </div>
+        </div>
+      )
+    } else {
+      // Render countdown
+      return (
+        <div
+          className={[
+            'w-full flex gap-3 md:gap-6 items-center md:justify-center text-sm md:text-base',
+            isLaunchWeekSection && '!justify-center',
+          ].join(' ')}
+        >
+          <p>
+            <span className="hidden md:inline">Supabase</span> Launch Week 7
+          </p>
+          <div className="flex gap-1 items-center">
+            <CountdownStep value={days} unit="d" /> :
+            <CountdownStep value={hours} unit="h" /> :
+            <CountdownStep value={minutes} unit="m" /> :
+            <CountdownStep value={seconds} unit="s" />
+          </div>
+          {!isLaunchWeekPage && (
+            <div className="hidden md:block">
+              <Link href="/launch-week">
+                <a className="bg-white text-xs px-1.5 md:px-2.5 py-1 rounded-full text-[#9E44EF] shadow-none hover:shadow-mg cursor-pointer">
+                  Get your ticket
+                </a>
+              </Link>
+            </div>
+          )}
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className="w-full h-14 p-2 bg-gradient-to-r from-[#9E44EF] to-[#DBB8BF] bg-blue-300 flex items-center justify-center text-white">
+      <Countdown date={new Date(announcement.launchDate)} renderer={renderer} />
+    </div>
+  )
+}
+
+export default CountdownBanner
diff --git a/apps/www/components/Nav/Announcement.tsx b/apps/www/components/Nav/Announcement.tsx
index a85d9c524f2..60595a309be 100644
--- a/apps/www/components/Nav/Announcement.tsx
+++ b/apps/www/components/Nav/Announcement.tsx
@@ -1,26 +1,37 @@
 import React, { useEffect, useState } from 'react'
 
 import _announcement from '~/data/Announcement.json'
-import { IconChevronRight, IconX } from 'ui'
+import { IconX } from 'ui'
 import { useRouter } from 'next/router'
+import { PropsWithChildren } from 'react'
 
-interface AnnouncementProps {
+export interface AnnouncementProps {
   show: boolean
   text: string
-  cta: string
+  launchDate: string
   link: string
   badge?: string
 }
 
 const announcement = _announcement as AnnouncementProps
 
-const Announcement = () => {
+interface AnnouncementComponentProps {
+  show?: boolean
+  className?: string
+}
+
+const Announcement = ({
+  show = true,
+  className,
+  children,
+}: PropsWithChildren<AnnouncementComponentProps>) => {
   const [hidden, setHidden] = useState(true)
 
   const router = useRouter()
+  const isLaunchWeekSection = router.pathname.includes('launch-week')
 
   // override to hide announcement
-  if (!announcement.show) return null
+  if (!show || !announcement.show) return null
 
   // construct the key for the announcement, based on the title text
   const announcementKey = 'announcement_' + announcement.text.replace(/ /g, '')
@@ -42,50 +53,23 @@ const Announcement = () => {
 
   function handleLink() {
     router.push(announcement.link)
-    window.localStorage.setItem(announcementKey, 'hidden')
   }
 
-  if (hidden) {
+  // Always show if on LW section
+  if (!isLaunchWeekSection && hidden) {
     return null
   } else {
     return (
-      <div
-        onClick={handleLink}
-        className="
-          launch-week-gradientBg--announcement-bar
-          to-green-1000
-          hover:from-green-1000
-          hover:to-green-1100 relative flex
-          cursor-pointer flex-row
-          space-x-3
-          overflow-hidden
-          text-white
-        "
-      >
-        <div
-          className="
-            mx-auto flex items-center gap-6 justify-center p-3 text-sm font-medium lg:container
-            lg:px-16 xl:px-20
-          "
-        >
-          <span>{announcement.text}</span>
-          <span className="item-center flex gap-2 pr-8 sm:px-3">
-            {announcement.badge && (
-              <div className="bg-[#2E2E2E] text-white py-0.25 rounded-2xl px-3 py-1 border border-gray-1100	whitespace-nowrap">
-                {announcement.badge}
-              </div>
-            )}
-          </span>
-          <span className="hidden items-center space-x-2 px-3 lg:flex">
-            <span>{announcement.cta}</span>
-          </span>
-        </div>
-        <div
-          className="absolute right-4 flex h-full items-center opacity-50 transition-opacity hover:opacity-100"
-          onClick={handleClose}
-        >
-          <IconX size={16} />
-        </div>
+      <div onClick={handleLink} className={['relative w-full cursor-pointer', className].join(' ')}>
+        {!isLaunchWeekSection && (
+          <div
+            className="absolute right-4 flex h-full items-center opacity-50 transition-opacity hover:opacity-100"
+            onClick={handleClose}
+          >
+            <IconX size={16} />
+          </div>
+        )}
+        {children}
       </div>
     )
   }
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 17e7eeac174..7baf842c5f5 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -17,6 +17,7 @@ import TextLink from '../TextLink'
 import Image from 'next/image'
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
+import CountdownBanner from '../LaunchWeek/Banners/CountdownBanner'
 
 const Nav = () => {
   const { isDarkMode } = useTheme()
@@ -194,7 +195,9 @@ const Nav = () => {
 
   return (
     <>
-      {/* <Announcement /> */}
+      <Announcement>
+        <CountdownBanner />
+      </Announcement>
       <div className="sticky top-0 z-50 transform" style={{ transform: 'translate3d(0,0,999px)' }}>
         <div
           className={[
@@ -206,7 +209,7 @@ const Nav = () => {
         <nav
           className={[
             `border-scale-400 border-b backdrop-blur-sm transition-opacity`,
-            showLaunchWeekNavMode && '!opacity-100 border-[#e0d2f430]',
+            showLaunchWeekNavMode && '!opacity-100 !border-[#e0d2f430]',
           ].join(' ')}
         >
           {/* <div className="relative flex justify-between h-16 mx-auto lg:container lg:px-10 xl:px-0"> */}
@@ -331,7 +334,6 @@ const Nav = () => {
                 )}
               </div>
             </div>
-            {/* <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div> */}
           </div>
           {/* </div> */}
           {/* Mobile Nav Menu */}
diff --git a/apps/www/data/Announcement.json b/apps/www/data/Announcement.json
index a0ab4c9ff86..ee460e86b28 100644
--- a/apps/www/data/Announcement.json
+++ b/apps/www/data/Announcement.json
@@ -1,7 +1,7 @@
 {
   "show": true,
-  "text": "Launch Week 6 begins December 12th",
-  "cta": "Don't miss a thing, get your free ticket",
-  "link": "https://supabase.com/launch-week",
-  "badge": "Get a reminder"
+  "text": "Supabase Launch Week 7",
+  "launchDate": "2023-04-10T07:00:00.000-07:00",
+  "link": "/launch-week",
+  "badge": "Get your ticket"
 }
diff --git a/apps/www/package.json b/apps/www/package.json
index e34b14c8ab1..386cf50b53a 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -41,6 +41,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.2",
+    "react-countdown": "^2.3.5",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-markdown": "^8.0.3",
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index d882ec9625c..4fea6ced64b 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -95,7 +95,7 @@ export default function TicketHome({ users }: Props) {
         }}
       />
       <DefaultLayout>
-        <div className="bg-[#1C1C1C] -mt-20">
+        <div className="bg-[#1C1C1C] -mt-[65px]">
           <div className="relative bg-lw7 pt-20">
             <div className="relative z-10">
               <SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto lg:h-[calc(80vh-65px)] min-h-[600px] lg:min-h-[650px]">
diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx
index 7c2707ddf5d..4f711ec921d 100644
--- a/apps/www/pages/launch-week/tickets/[username].tsx
+++ b/apps/www/pages/launch-week/tickets/[username].tsx
@@ -64,7 +64,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
         }}
       />
       <DefaultLayout>
-        <div className="bg-[#1C1C1C] -mt-20">
+        <div className="bg-[#1C1C1C] -mt-[65px]">
           <div className="relative bg-lw7 pt-20">
             <div className="relative z-10">
               <SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto xl:h-[calc(90vh-65px)] min-h-[600px] md:min-h-[auto] lg:min-h-[650px]">
diff --git a/apps/www/pages/launch-week/tickets/index.tsx b/apps/www/pages/launch-week/tickets/index.tsx
index 2ed83a94917..e916dc8c0c5 100644
--- a/apps/www/pages/launch-week/tickets/index.tsx
+++ b/apps/www/pages/launch-week/tickets/index.tsx
@@ -109,7 +109,7 @@ export default function TicketsPage({ users }: Props) {
         }}
       />
       <DefaultLayout>
-        <div className="bg-[#1C1C1C] -mt-20">
+        <div className="bg-[#1C1C1C] -mt-[65px]">
           <div className="relative bg-lw7 pt-20">
             <div className="relative z-10">
               <SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto h-auto">
diff --git a/package-lock.json b/package-lock.json
index b2eee282491..67067295f21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -682,6 +682,7 @@
         "parse-numeric-range": "^1.3.0",
         "react": "^17.0.2",
         "react-copy-to-clipboard": "^5.0.2",
+        "react-countdown": "^2.3.5",
         "react-dom": "^17.0.2",
         "react-ga": "^3.3.0",
         "react-markdown": "^8.0.3",
@@ -31443,6 +31444,18 @@
         "react": "^15.3.0 || 16 || 17 || 18"
       }
     },
+    "node_modules/react-countdown": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
+      "integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">= 15",
+        "react-dom": ">= 15"
+      }
+    },
     "node_modules/react-csv": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -63238,6 +63251,14 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-countdown": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
+      "integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-csv": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -69302,6 +69323,7 @@
         "postcss-preset-env": "^6.7.0",
         "react": "^17.0.2",
         "react-copy-to-clipboard": "^5.0.2",
+        "react-countdown": "^2.3.5",
         "react-dom": "^17.0.2",
         "react-ga": "^3.3.0",
         "react-markdown": "^8.0.3",