diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
index 34b641dbc3625a..6010d7179b0ee3 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss
@@ -1,5 +1,4 @@
 .welcome-card {
-    // background: var(--primary-alt-highlight-3000);
     background: var(--primary-alt-highlight-3000);
 
     body[theme='dark'] & {
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
index cd785399be3417..db5ead2d008072 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
@@ -2,6 +2,7 @@ import './SidePanelWelcome.scss'
 
 import { IconArrowLeft, IconEllipsis, IconExternal, IconX } from '@posthog/icons'
 import { LemonButton } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import posthog from 'posthog-js'
 import featureCommandPalette from 'public/3000/3000-command-palette.png'
@@ -18,10 +19,12 @@ import featureSidePanelDark from 'public/3000/3000-side-panel-dark.png'
 import featureToolbar from 'public/3000/3000-toolbar.png'
 import { useEffect } from 'react'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
 import { KeyboardShortcut } from '../../components/KeyboardShortcut'
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 
-const blogPostUrl = 'https://posthog.com/blog/why-redesign'
+const BLOG_POST_URL = 'https://posthog.com/blog/posthog-as-a-dev-tool'
 
 type RowProps = {
     className?: string
@@ -29,26 +32,19 @@ type RowProps = {
     children: React.ReactNode
 }
 
-const Row = ({ className, columns, children }: RowProps): JSX.Element => (
-    <div className={`mb-6 gap-5 grid ${className}`} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
+const WelcomeRow = ({ className, columns, children }: RowProps): JSX.Element => (
+    <div className={clsx('mb-6 gap-5 grid', className)} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
         {children}
     </div>
 )
 
 type CardProps = {
-    width?: string
     children: React.ReactNode
     className?: string
 }
 
-const Card = ({ width, children, className }: CardProps): JSX.Element => (
-    <div
-        className={`welcome-card bg-accent-3000 border rounded-md px-4 py-3 w-full overflow-hidden ${
-            width ? width : 'w-full'
-        } ${className}`}
-    >
-        {children}
-    </div>
+const WelcomeCard = ({ children, className }: CardProps): JSX.Element => (
+    <div className={clsx('welcome-card border rounded-md px-4 py-3 w-full overflow-hidden', className)}>{children}</div>
 )
 
 const Title = ({ children }: { children: React.ReactNode }): JSX.Element => (
@@ -58,8 +54,6 @@ const Description = ({ children }: { children: React.ReactNode }): JSX.Element =
     <p className="text-sm opacity-75">{children}</p>
 )
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
 export const SidePanelWelcome = (): JSX.Element => {
     const { closeSidePanel } = useActions(sidePanelStateLogic)
     const { isDarkModeOn } = useValues(themeLogic)
@@ -84,8 +78,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                 <div className="flex-shrink">
                     <button
                         onClick={() => closeSidePanel()}
-                        className="btn btn-sm btn-secondary cursor-pointer"
-                        style={{ background: 'transparent' }}
+                        className="btn btn-sm btn-secondary cursor-pointer bg-transparent"
                     >
                         <IconX className="text-lg" />
                     </button>
@@ -97,26 +90,26 @@ export const SidePanelWelcome = (): JSX.Element => {
                     <div className="text-primary-3000 text-4xl">PostHog&nbsp;3000</div>
                 </h1>
                 <p className="max-w-120 text-sm font-medium mb-3 opacity-75">
-                    We're past 0 to 1. In this new version of PostHog, we're going from 1 to 3000. (And this is just the
-                    beginning...)
+                    We're past zero to one.
+                    <br />
+                    In this new version of PostHog, we're going from one… to 3000.
+                    <br />
+                    And this is just the beginning.
                 </p>
-                <div className="mb-6">
-                    <LemonButton
-                        to={blogPostUrl}
-                        targetBlank
-                        type="primary"
-                        fullWidth={false}
-                        style={{ display: 'inline-flex' }}
-                    >
-                        Read the blog post
-                        <IconExternal className="ml-1 h-5 w-5" />
-                    </LemonButton>
-                </div>
-
-                <Row>
-                    <Card>
+                <LemonButton
+                    to={BLOG_POST_URL}
+                    targetBlank
+                    type="primary"
+                    sideIcon={<IconExternal className="text-xl" />}
+                    className="mb-5"
+                >
+                    Read the blog post
+                </LemonButton>
+
+                <WelcomeRow>
+                    <WelcomeCard>
                         <Title>Dark mode</Title>
-                        <Description>Toggle between light, dark, or sync with your system</Description>
+                        <Description>Toggle between light and dark. Synced with your system by default.</Description>
                         <div className="-mr-4 -mb-3">
                             <img
                                 src={featureDarkMode}
@@ -125,11 +118,11 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 style={{ borderTopLeftRadius: '0.25rem' }}
                             />
                         </div>
-                    </Card>
-                </Row>
+                    </WelcomeCard>
+                </WelcomeRow>
 
-                <Row className="grid grid-cols-2" columns="40% calc(60% - 1.25rem)">
-                    <Card>
+                <WelcomeRow className="grid grid-cols-2" columns="40% calc(60% - 1.25rem)">
+                    <WelcomeCard>
                         <Title>Updated nav</Title>
                         <Description>Products are now split out from project & data.</Description>
                         <div className="-mr-4 -mb-3">
@@ -140,8 +133,8 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 style={{ borderTopLeftRadius: '0.25rem' }}
                             />
                         </div>
-                    </Card>
-                    <Card>
+                    </WelcomeCard>
+                    <WelcomeCard>
                         <Title>Notebooks</Title>
                         <Description>
                             Analyze data from different angles and share results with your team - all in a single
@@ -155,16 +148,19 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 style={{ borderTopLeftRadius: '0.25rem' }}
                             />
                         </div>
-                    </Card>
-                </Row>
+                    </WelcomeCard>
+                </WelcomeRow>
 
-                <Row>
-                    <Card>
+                <WelcomeRow>
+                    <WelcomeCard>
                         <div className="grid grid-cols-2 gap-5 items-center">
                             <div>
                                 <Title>Side panel</Title>
-                                <Description>It’s this multipurpose thing you’re looking at right now!</Description>
-                                <Description>Access docs, notebooks, contact support, and more.</Description>
+                                <Description>
+                                    It's this multipurpose thing you're looking at right now!
+                                    <br />
+                                    Create notebook, read docs, contact support, and more.
+                                </Description>
                             </div>
                             <div className="-mr-4 -my-3">
                                 <img
@@ -175,14 +171,14 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 />
                             </div>
                         </div>
-                    </Card>
-                </Row>
+                    </WelcomeCard>
+                </WelcomeRow>
 
-                <Row className="grid grid-cols-2" columns="calc(60% - 1.25rem) 40%">
-                    <Card>
+                <WelcomeRow className="grid grid-cols-2" columns="calc(60% - 1.25rem) 40%">
+                    <WelcomeCard>
                         <Title>Improved search</Title>
                         <Description>
-                            Search for anything with <KeyboardShortcut command k />
+                            Search for anything with <KeyboardShortcut command k />.
                         </Description>
                         <div className="-mr-4 -mb-3">
                             <img
@@ -192,12 +188,12 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 style={{ borderTopLeftRadius: '0.25rem' }}
                             />
                         </div>
-                    </Card>
-                    <Card className="flex flex-col">
+                    </WelcomeCard>
+                    <WelcomeCard className="flex flex-col">
                         <div className="flex-1">
                             <Title>Command palette</Title>
                             <Description>
-                                Navigate faster with <KeyboardShortcut command shift k />
+                                Navigate faster with <KeyboardShortcut command shift k />.
                             </Description>
                         </div>
                         <div className="-mr-4 -mb-3 flex-shrink">
@@ -208,31 +204,31 @@ export const SidePanelWelcome = (): JSX.Element => {
                                 style={{ borderTopLeftRadius: '0.25rem' }}
                             />
                         </div>
-                    </Card>
-                </Row>
+                    </WelcomeCard>
+                </WelcomeRow>
 
-                <Row>
-                    <Card>
+                <WelcomeRow>
+                    <WelcomeCard>
                         <Title>Toolbar</Title>
                         <Description>
-                            Same functionality, but easier to look at. And we finally put the <em>bar</em> in toolbar.
-                            Also dark mode.
+                            Dark mode on. Same functionality, but easier to use – we finally put the "<em>bar</em>" in
+                            "toolbar".
                         </Description>
                         <div>
                             <img src={featureToolbar} alt="Toolbar" width={259} />
                         </div>
-                    </Card>
-                </Row>
+                    </WelcomeCard>
+                </WelcomeRow>
 
-                <div className="flex items-center gap-2 -mb-3">
-                    <IconArrowLeft className="w-5 h-5" />
-                    <p className="m-0">
+                <div className="-mb-3">
+                    <IconArrowLeft className="text-base mr-2 inline" />
+                    <span className="m-0">
                         <strong>Pro tip:</strong> Access this panel again from the{' '}
-                        <span className="w-6 h-6 border p-1 rounded mx-1">
-                            <IconEllipsis className="" />
+                        <span className="text-base font border p-1 rounded mx-1 w-6 h-6 inline-flex align-middle">
+                            <IconEllipsis />
                         </span>{' '}
                         menu
-                    </p>
+                    </span>
                 </div>
             </div>
         </>