From afc4e131b0fd1601cabc72ac5dc97568e936cebc Mon Sep 17 00:00:00 2001
From: Pichikachu <pichikachu@users.noreply.github.com>
Date: Tue, 26 May 2026 16:40:41 +0200
Subject: [PATCH 1/2] add visual clarity polish

---
 .../Dasboard/DashboardEmptyState.tsx          |  61 +++++-
 .../dashboardChat/DashboardChatPanel.tsx      |  14 +-
 .../workspace/WorkspaceStudioShell.tsx        | 174 ++++++++++++++++--
 3 files changed, 229 insertions(+), 20 deletions(-)

diff --git a/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx b/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
index dbbd3360..affedb67 100644
--- a/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
+++ b/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
@@ -170,6 +170,30 @@ const DashboardEmptyState = ({
               Create a guided Study Path, or add material first to generate a
               focused quiz, flashcards, or clean notes.
             </Typography>
+            <Stack
+              direction="row"
+              spacing={0.75}
+              flexWrap="wrap"
+              sx={{ mt: 1.25 }}
+            >
+              {['1 Add material', '2 Pick output', '3 Review dashboard'].map(
+                (label) => (
+                  <Chip
+                    key={label}
+                    size="small"
+                    label={label}
+                    sx={{
+                      fontWeight: 800,
+                      bgcolor: (theme) =>
+                        alpha(theme.palette.primary.main, 0.08),
+                      border: 1,
+                      borderColor: (theme) =>
+                        alpha(theme.palette.primary.main, 0.16),
+                    }}
+                  />
+                ),
+              )}
+            </Stack>
           </Box>
 
           <Paper
@@ -265,7 +289,16 @@ const DashboardEmptyState = ({
                 fontWeight: 900,
               }}
             >
-              Upload material
+              <Stack alignItems="flex-start" spacing={0}>
+                <span>Upload material</span>
+                <Typography
+                  component="span"
+                  variant="caption"
+                  sx={{ opacity: 0.78, fontWeight: 700 }}
+                >
+                  PDF, slides, images, text
+                </Typography>
+              </Stack>
             </Button>
             <Button
               variant="outlined"
@@ -281,7 +314,17 @@ const DashboardEmptyState = ({
                 bgcolor: 'background.paper',
               }}
             >
-              Paste notes
+              <Stack alignItems="flex-start" spacing={0}>
+                <span>Paste notes</span>
+                <Typography
+                  component="span"
+                  variant="caption"
+                  color="text.secondary"
+                  sx={{ fontWeight: 700 }}
+                >
+                  Fastest for copied text
+                </Typography>
+              </Stack>
             </Button>
           </Box>
 
@@ -305,7 +348,8 @@ const DashboardEmptyState = ({
                   color="text.secondary"
                   sx={{ mt: 0.3 }}
                 >
-                  This dashboard is empty, so add sources in Creation first.
+                  This dashboard is empty, so these actions open Create from
+                  Material with the right setup ready.
                 </Typography>
               </Box>
               <Box
@@ -374,6 +418,17 @@ const DashboardEmptyState = ({
                       <Typography variant="subtitle2" fontWeight={900}>
                         {action.label}
                       </Typography>
+                      <Chip
+                        size="small"
+                        label="opens material flow"
+                        sx={{
+                          alignSelf: 'flex-start',
+                          height: 21,
+                          fontSize: '0.66rem',
+                          fontWeight: 800,
+                          bgcolor: alpha(action.accent, 0.12),
+                        }}
+                      />
                     </Stack>
                     <ChevronRightIcon sx={{ color: action.accent }} />
                   </Paper>
diff --git a/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx b/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
index 56f8cd44..13d9e65f 100644
--- a/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
+++ b/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
@@ -314,8 +314,20 @@ const DashboardChatPanel = ({
                 borderColor: 'divider',
                 borderRadius: 2.5,
                 bgcolor: 'background.paper',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))'
+                    : 'linear-gradient(135deg, rgba(34,197,94,0.08), rgba(14,165,233,0.05))',
               }}
             >
+              <Typography
+                variant="caption"
+                color="primary"
+                fontWeight={900}
+                sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
+              >
+                Grounded chat
+              </Typography>
               <Typography variant="h6" fontWeight={900}>
                 What do you want to understand?
               </Typography>
@@ -325,7 +337,7 @@ const DashboardChatPanel = ({
               </Typography>
             </Box>
             <Stack spacing={1}>
-              {suggestions.map((suggestion) => (
+              {suggestions.map((suggestion, index) => (
                 <Button
                   key={suggestion}
                   variant="outlined"
diff --git a/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx b/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
index cf145819..8dc035ad 100644
--- a/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
+++ b/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
@@ -941,6 +941,31 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
             >
               Create a guided study path or quick material from your dashboard.
             </Typography>
+            <Stack
+              direction="row"
+              spacing={0.75}
+              flexWrap="wrap"
+              sx={{ mt: 1 }}
+            >
+              {[
+                'Study Path',
+                hasCurrentDashboardContext ? 'Dashboard ready' : 'Add material',
+                'Ask Sources',
+              ].map((label) => (
+                <Chip
+                  key={label}
+                  size="small"
+                  label={label}
+                  sx={{
+                    height: 22,
+                    fontWeight: 800,
+                    bgcolor: alpha(theme.palette.primary.main, 0.08),
+                    border: 1,
+                    borderColor: alpha(theme.palette.primary.main, 0.16),
+                  }}
+                />
+              ))}
+            </Stack>
           </Box>
           <IconButton
             aria-label="Close Create panel"
@@ -979,6 +1004,16 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                 position: 'relative',
                 overflow: 'hidden',
                 boxShadow: `0 14px 36px ${alpha(theme.palette.primary.main, 0.1)}`,
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  inset: -80,
+                  background: `radial-gradient(circle at 85% 8%, ${alpha(
+                    theme.palette.primary.main,
+                    theme.palette.mode === 'dark' ? 0.22 : 0.16,
+                  )}, transparent 34%)`,
+                  pointerEvents: 'none',
+                },
                 '&:hover': {
                   borderColor: 'primary.main',
                   bgcolor: alpha(theme.palette.primary.main, 0.105),
@@ -992,7 +1027,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   'background-color 160ms ease, border-color 160ms ease, transform 160ms ease',
               }}
             >
-              <Stack spacing={1.75}>
+              <Stack spacing={1.75} sx={{ position: 'relative' }}>
                 <Stack direction="row" alignItems="center" spacing={1}>
                   <Box
                     sx={{
@@ -1034,6 +1069,19 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                     Creates lessons, dashboards, exercises and flashcards.
                   </Typography>
                 </Box>
+                <Stack direction="row" spacing={0.75} flexWrap="wrap">
+                  {['Lessons', 'Exercises', 'Review'].map((label) => (
+                    <Chip
+                      key={label}
+                      size="small"
+                      label={label}
+                      sx={{
+                        fontWeight: 800,
+                        bgcolor: alpha(theme.palette.primary.main, 0.09),
+                      }}
+                    />
+                  ))}
+                </Stack>
                 <Button
                   component="span"
                   variant="contained"
@@ -1062,8 +1110,8 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   sx={{ mt: 0.3 }}
                 >
                   {hasCurrentDashboardContext
-                    ? 'Generate focused material from your current dashboard.'
-                    : 'Add material first, then generate focused study material.'}
+                    ? 'One click, no setup: generate focused material from your current dashboard.'
+                    : 'This dashboard is empty, so these open Create from Material.'}
                 </Typography>
               </Box>
               {!hasCurrentDashboardContext ? (
@@ -1092,6 +1140,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                         key={resourceType}
                         component="button"
                         type="button"
+                        aria-label={quickCreateLabels[resourceType]}
                         elevation={0}
                         onClick={() => handleQuickCreateCardClick(resourceType)}
                         sx={{
@@ -1179,6 +1228,15 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                           >
                             {quickCreateLabels[resourceType]}
                           </Typography>
+                          <Typography
+                            variant="caption"
+                            color="text.secondary"
+                            fontWeight={800}
+                          >
+                            {hasCurrentDashboardContext
+                              ? '1-click'
+                              : 'Needs material'}
+                          </Typography>
                         </Stack>
                         <Box
                           sx={{
@@ -1253,6 +1311,21 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                 Add files, pasted notes, images, PDFs, or slides, then choose
                 what StudyMesh should create.
               </Typography>
+              <Stack
+                direction="row"
+                spacing={0.75}
+                flexWrap="wrap"
+                sx={{ mt: 1 }}
+              >
+                {['1 Output', '2 Source', '3 Options'].map((label) => (
+                  <Chip
+                    key={label}
+                    size="small"
+                    label={label}
+                    sx={{ fontWeight: 800 }}
+                  />
+                ))}
+              </Stack>
             </Box>
           </Stack>
         )}
@@ -1270,14 +1343,29 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   ? 'divider'
                   : alpha(theme.palette.warning.main, 0.65),
               borderRadius: 2.5,
-              bgcolor: 'background.paper',
+              bgcolor:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.background.paper, 0.92)
+                  : 'background.paper',
+              backgroundImage:
+                theme.palette.mode === 'dark'
+                  ? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.06)}, transparent 220px)`
+                  : `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.045)}, transparent 220px)`,
             }}
           >
             <Stack spacing={1.5}>
               <Box>
-                <Typography variant="subtitle2" fontWeight={900}>
-                  Step 1: Choose output
-                </Typography>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Chip
+                    label="1"
+                    size="small"
+                    color="primary"
+                    sx={{ fontWeight: 900 }}
+                  />
+                  <Typography variant="subtitle2" fontWeight={900}>
+                    Step 1: Choose output
+                  </Typography>
+                </Stack>
                 <Typography
                   variant="body2"
                   color="text.secondary"
@@ -1346,9 +1434,17 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                 )}
               </Box>
               <Box>
-                <Typography variant="subtitle2" fontWeight={900}>
-                  Step 2: Choose source
-                </Typography>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Chip
+                    label="2"
+                    size="small"
+                    color="primary"
+                    sx={{ fontWeight: 900 }}
+                  />
+                  <Typography variant="subtitle2" fontWeight={900}>
+                    Step 2: Choose source
+                  </Typography>
+                </Stack>
                 <Typography
                   variant="body2"
                   color="text.secondary"
@@ -1360,6 +1456,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
               </Box>
               <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
                 <Button
+                  aria-label="Current dashboard"
                   variant={
                     quickSourceMode === 'dashboard' ? 'contained' : 'outlined'
                   }
@@ -1375,9 +1472,28 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                     fontWeight: 900,
                   }}
                 >
-                  Current dashboard
+                  <Stack
+                    spacing={0.15}
+                    alignItems="flex-start"
+                    sx={{ width: '100%' }}
+                  >
+                    <Typography
+                      variant="button"
+                      fontWeight={900}
+                      sx={{ textTransform: 'none' }}
+                    >
+                      Current dashboard
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{ opacity: 0.78, textTransform: 'none' }}
+                    >
+                      Fastest path, uses visible study content
+                    </Typography>
+                  </Stack>
                 </Button>
                 <Button
+                  aria-label="Sources"
                   variant={
                     quickSourceMode === 'sources' ? 'contained' : 'outlined'
                   }
@@ -1392,7 +1508,25 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                     fontWeight: 900,
                   }}
                 >
-                  Sources
+                  <Stack
+                    spacing={0.15}
+                    alignItems="flex-start"
+                    sx={{ width: '100%' }}
+                  >
+                    <Typography
+                      variant="button"
+                      fontWeight={900}
+                      sx={{ textTransform: 'none' }}
+                    >
+                      Sources
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{ opacity: 0.78, textTransform: 'none' }}
+                    >
+                      Upload or paste new material
+                    </Typography>
+                  </Stack>
                 </Button>
               </Stack>
               {!hasCurrentDashboardContext &&
@@ -1456,7 +1590,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                         sx={{ maxWidth: 300 }}
                       >
                         Drop notes here, or upload text, images, PDFs, and
-                        slides.
+                        slides. Your selected files stay in this Creation panel.
                       </Typography>
                     </Box>
                     <Button
@@ -1576,9 +1710,17 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                 </Paper>
               </Collapse>
               <Box>
-                <Typography variant="subtitle2" fontWeight={900}>
-                  Step 3: Options
-                </Typography>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Chip
+                    label="3"
+                    size="small"
+                    color="primary"
+                    sx={{ fontWeight: 900 }}
+                  />
+                  <Typography variant="subtitle2" fontWeight={900}>
+                    Step 3: Options
+                  </Typography>
+                </Stack>
               </Box>
               <Box
                 sx={{

From e2afefb21d4054d972a331a05c44415bb4957378 Mon Sep 17 00:00:00 2001
From: Pichikachu <pichikachu@users.noreply.github.com>
Date: Tue, 26 May 2026 19:09:40 +0200
Subject: [PATCH 2/2] make workspace visuals dramatically bolder

---
 apps/studymesh/src/App.tsx                    |   2 +
 .../Dasboard/DashboardEmptyState.tsx          |  96 ++-
 .../dashboardChat/DashboardChatPanel.tsx      |  61 +-
 .../src/components/topnavbar/TopNavBar.tsx    |  15 +-
 .../workspace/WorkspaceStudioLayouts.tsx      |  41 +-
 .../workspace/WorkspaceStudioShell.tsx        | 643 +++++++++++-------
 6 files changed, 557 insertions(+), 301 deletions(-)

diff --git a/apps/studymesh/src/App.tsx b/apps/studymesh/src/App.tsx
index 983f3615..e9e75b67 100644
--- a/apps/studymesh/src/App.tsx
+++ b/apps/studymesh/src/App.tsx
@@ -120,6 +120,8 @@ const WorkspacePage = () => {
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
+        background:
+          'radial-gradient(circle at 8% -8%, rgba(34,197,94,0.22), transparent 32%), radial-gradient(circle at 92% 0%, rgba(14,165,233,0.16), transparent 30%), #020617',
       }}
     >
       <TopNavBar
diff --git a/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx b/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
index affedb67..224e7407 100644
--- a/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
+++ b/apps/studymesh/src/components/Dasboard/DashboardEmptyState.tsx
@@ -127,10 +127,14 @@ const DashboardEmptyState = ({
           sx={{
             minHeight: { xs: 'auto', lg: 560 },
             p: { xs: 1.25, sm: 2, md: 2.5 },
-            borderRadius: 3,
+            borderRadius: 4,
             border: 1,
-            borderColor: 'divider',
+            borderColor: (theme) => alpha(theme.palette.primary.main, 0.18),
             bgcolor: 'background.paper',
+            backgroundImage: (theme) =>
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(34,197,94,0.08), transparent 320px)'
+                : 'linear-gradient(180deg, rgba(34,197,94,0.055), transparent 320px)',
             display: 'flex',
             flexDirection: 'column',
             gap: { xs: 1.5, md: 2 },
@@ -142,25 +146,40 @@ const DashboardEmptyState = ({
                 : '0 20px 56px rgba(15,23,42,0.08)',
           }}
         >
-          <Box>
+          <Box
+            sx={{
+              p: { xs: 1.5, md: 2 },
+              mx: { xs: -0.25, md: -0.5 },
+              mt: { xs: -0.25, md: -0.5 },
+              borderRadius: 3,
+              background: (theme) =>
+                `radial-gradient(circle at 0% 0%, ${alpha(theme.palette.primary.main, 0.22)}, transparent 38%), radial-gradient(circle at 100% 18%, ${alpha('#b66cff', 0.18)}, transparent 34%)`,
+              border: 1,
+              borderColor: (theme) => alpha(theme.palette.primary.main, 0.18),
+            }}
+          >
             <Typography
               variant="caption"
               color="primary"
-              fontWeight={900}
-              sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
+              fontWeight={950}
+              sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
             >
-              Start creating
+              Empty dashboard mission control
+            </Typography>
+            <Typography variant="h5" fontWeight={950} sx={{ mt: 0.75 }}>
+              What do you want to build?
             </Typography>
             <Typography
-              variant="h4"
+              variant="h3"
               fontWeight={950}
               sx={{
                 mt: 0.5,
-                lineHeight: 1.08,
-                fontSize: { xs: '1.45rem', sm: '1.85rem', md: '2.2rem' },
+                lineHeight: 0.96,
+                fontSize: { xs: '1.8rem', sm: '2.25rem', md: '2.8rem' },
+                maxWidth: 620,
               }}
             >
-              What do you want to build?
+              Turn a blank page into a learning cockpit.
             </Typography>
             <Typography
               variant="body2"
@@ -204,8 +223,8 @@ const DashboardEmptyState = ({
             disabled={!isAdmin}
             sx={{
               width: '100%',
-              p: { xs: 1.5, sm: 2 },
-              borderRadius: 2.5,
+              p: { xs: 1.75, sm: 2.35 },
+              borderRadius: 3,
               border: 1,
               borderColor: (theme) => alpha(theme.palette.primary.main, 0.42),
               bgcolor: (theme) => alpha(theme.palette.primary.main, 0.075),
@@ -213,7 +232,10 @@ const DashboardEmptyState = ({
               cursor: isAdmin ? 'pointer' : 'default',
               textAlign: 'left',
               display: 'grid',
-              gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+              gridTemplateColumns: {
+                xs: 'auto minmax(0, 1fr)',
+                sm: 'auto minmax(0, 1fr) auto',
+              },
               alignItems: 'center',
               gap: { xs: 1.25, sm: 1.5 },
               boxShadow: (theme) =>
@@ -254,7 +276,7 @@ const DashboardEmptyState = ({
                   Recommended
                 </Typography>
               </Stack>
-              <Typography variant="h5" fontWeight={950} lineHeight={1.12}>
+              <Typography variant="h4" fontWeight={950} lineHeight={1.02}>
                 Create Study Path
               </Typography>
               <Typography
@@ -341,7 +363,7 @@ const DashboardEmptyState = ({
             <Stack spacing={1.25}>
               <Box>
                 <Typography variant="subtitle1" fontWeight={900}>
-                  Fast creation from material
+                  Material launch bay · fast creation from material
                 </Typography>
                 <Typography
                   variant="body2"
@@ -371,9 +393,9 @@ const DashboardEmptyState = ({
                     onClick={() => onQuickCreate(action.intent)}
                     disabled={!isAdmin}
                     sx={{
-                      minHeight: 92,
-                      p: 1.25,
-                      borderRadius: 2,
+                      minHeight: 124,
+                      p: 1.45,
+                      borderRadius: 2.75,
                       border: 1,
                       borderColor: alpha(action.accent, 0.24),
                       bgcolor: alpha(action.accent, 0.07),
@@ -436,6 +458,44 @@ const DashboardEmptyState = ({
               </Box>
             </Stack>
           </Paper>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+              gap: 0.75,
+            }}
+          >
+            {['Source in', 'AI builds', 'Dashboard opens'].map(
+              (label, index) => (
+                <Paper
+                  key={label}
+                  elevation={0}
+                  sx={{
+                    p: 1,
+                    borderRadius: 2,
+                    border: 1,
+                    borderColor: 'divider',
+                    bgcolor: 'background.default',
+                  }}
+                >
+                  <Typography
+                    variant="caption"
+                    color="primary"
+                    fontWeight={950}
+                  >
+                    0{index + 1}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    display="block"
+                    fontWeight={800}
+                  >
+                    {label}
+                  </Typography>
+                </Paper>
+              ),
+            )}
+          </Box>
         </Paper>
 
         <Paper
diff --git a/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx b/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
index 13d9e65f..0ffadddd 100644
--- a/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
+++ b/apps/studymesh/src/components/dashboardChat/DashboardChatPanel.tsx
@@ -13,6 +13,7 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material'
+import { alpha } from '@mui/material/styles'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
 import SendIcon from '@mui/icons-material/Send'
@@ -213,9 +214,9 @@ const DashboardChatPanel = ({
     >
       <Box
         sx={{
-          minHeight: 76,
+          minHeight: 112,
           px: 2,
-          py: 1.5,
+          py: 1.75,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -224,12 +225,25 @@ const DashboardChatPanel = ({
           borderColor: 'divider',
           background:
             theme.palette.mode === 'dark'
-              ? 'linear-gradient(135deg, rgba(34,197,94,0.14), rgba(14,165,233,0.08))'
-              : 'linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))',
+              ? 'radial-gradient(circle at 0% 0%, rgba(34,197,94,0.28), transparent 38%), linear-gradient(135deg, rgba(34,197,94,0.14), rgba(14,165,233,0.10))'
+              : 'radial-gradient(circle at 0% 0%, rgba(34,197,94,0.22), transparent 38%), linear-gradient(135deg, rgba(34,197,94,0.12), rgba(14,165,233,0.08))',
         }}
       >
         <Box sx={{ minWidth: 0 }}>
-          <Typography variant="subtitle1" fontWeight={900} noWrap>
+          <Typography
+            variant="caption"
+            color="primary"
+            fontWeight={950}
+            sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
+          >
+            Source intelligence
+          </Typography>
+          <Typography
+            variant="h5"
+            fontWeight={950}
+            noWrap
+            sx={{ lineHeight: 1.02 }}
+          >
             Ask Sources
           </Typography>
           <Typography variant="caption" color="text.secondary" noWrap>
@@ -309,15 +323,15 @@ const DashboardChatPanel = ({
           <Stack spacing={2.25}>
             <Box
               sx={{
-                p: 2,
+                p: 2.4,
                 border: 1,
-                borderColor: 'divider',
-                borderRadius: 2.5,
+                borderColor: alpha(theme.palette.primary.main, 0.22),
+                borderRadius: 3.5,
                 bgcolor: 'background.paper',
                 background:
                   theme.palette.mode === 'dark'
-                    ? 'linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))'
-                    : 'linear-gradient(135deg, rgba(34,197,94,0.08), rgba(14,165,233,0.05))',
+                    ? 'radial-gradient(circle at 100% 0%, rgba(14,165,233,0.18), transparent 34%), linear-gradient(135deg, rgba(34,197,94,0.12), rgba(14,165,233,0.07))'
+                    : 'radial-gradient(circle at 100% 0%, rgba(14,165,233,0.14), transparent 34%), linear-gradient(135deg, rgba(34,197,94,0.10), rgba(14,165,233,0.06))',
               }}
             >
               <Typography
@@ -328,15 +342,25 @@ const DashboardChatPanel = ({
               >
                 Grounded chat
               </Typography>
-              <Typography variant="h6" fontWeight={900}>
-                What do you want to understand?
+              <Typography
+                variant="h4"
+                fontWeight={950}
+                sx={{ lineHeight: 1.02, mt: 0.5 }}
+              >
+                Interrogate your dashboard.
               </Typography>
               <Typography variant="body2" color="text.secondary">
                 Ask questions based on the sources and study material in this
                 dashboard. I’ll keep answers grounded in what’s here.
               </Typography>
             </Box>
-            <Stack spacing={1}>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
+                gap: 1,
+              }}
+            >
               {suggestions.map((suggestion, index) => (
                 <Button
                   key={suggestion}
@@ -345,11 +369,12 @@ const DashboardChatPanel = ({
                   onClick={() => sendQuestion(suggestion)}
                   sx={{
                     justifyContent: 'flex-start',
-                    borderRadius: 2,
-                    py: 1,
-                    px: 1.25,
+                    minHeight: 76,
+                    borderRadius: 2.75,
+                    py: 1.25,
+                    px: 1.35,
                     bgcolor: 'background.paper',
-                    borderColor: 'divider',
+                    borderColor: alpha(theme.palette.primary.main, 0.16),
                     color: 'text.primary',
                     textTransform: 'none',
                   }}
@@ -357,7 +382,7 @@ const DashboardChatPanel = ({
                   {suggestion}
                 </Button>
               ))}
-            </Stack>
+            </Box>
           </Stack>
         ) : (
           <Stack spacing={1.5}>
diff --git a/apps/studymesh/src/components/topnavbar/TopNavBar.tsx b/apps/studymesh/src/components/topnavbar/TopNavBar.tsx
index 26821dad..26b0b10a 100644
--- a/apps/studymesh/src/components/topnavbar/TopNavBar.tsx
+++ b/apps/studymesh/src/components/topnavbar/TopNavBar.tsx
@@ -708,14 +708,17 @@ const TopNavBar: React.FC<TopNavBarProps> = ({ creationHost = 'navbar' }) => {
         position="static"
         sx={{
           backgroundColor: 'background.header',
-          boxShadow: 2,
-          height: isMobileWorkspaceHeader ? '56px' : '52px',
+          backgroundImage:
+            'linear-gradient(90deg, rgba(34,197,94,0.22), rgba(14,165,233,0.12) 38%, rgba(182,108,255,0.14))',
+          borderBottom: '1px solid rgba(255,255,255,0.10)',
+          boxShadow: '0 18px 48px rgba(2, 6, 23, 0.24)',
+          height: isMobileWorkspaceHeader ? '64px' : '60px',
         }}
       >
         <Toolbar
           sx={{
-            minHeight: isMobileWorkspaceHeader ? '56px' : '52px',
-            height: isMobileWorkspaceHeader ? '56px' : '52px',
+            minHeight: isMobileWorkspaceHeader ? '64px' : '60px',
+            height: isMobileWorkspaceHeader ? '64px' : '60px',
             px: isMobileWorkspaceHeader ? 0.75 : 1.25,
             gap: isMobileWorkspaceHeader ? 0.75 : 0,
           }}
@@ -736,7 +739,9 @@ const TopNavBar: React.FC<TopNavBarProps> = ({ creationHost = 'navbar' }) => {
                   color: 'foreground.contrastPrimary',
                   textTransform: 'none',
                   borderRadius: 999,
-                  bgcolor: 'rgba(255,255,255,0.08)',
+                  bgcolor: 'rgba(255,255,255,0.12)',
+                  border: '1px solid rgba(255,255,255,0.16)',
+                  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18)',
                   '&:hover': { bgcolor: 'rgba(255,255,255,0.14)' },
                   '& .MuiButton-endIcon': { ml: 0.25, mr: 0 },
                 }}
diff --git a/apps/studymesh/src/components/workspace/WorkspaceStudioLayouts.tsx b/apps/studymesh/src/components/workspace/WorkspaceStudioLayouts.tsx
index 7ffac049..4665476e 100644
--- a/apps/studymesh/src/components/workspace/WorkspaceStudioLayouts.tsx
+++ b/apps/studymesh/src/components/workspace/WorkspaceStudioLayouts.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, Slide, Tooltip, Typography } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
-import type { Theme } from '@mui/material/styles'
+import { alpha, type Theme } from '@mui/material/styles'
 
 import { studioPanelRailWidth, workspaceCanvasSx } from './workspaceStudioModel'
 
@@ -37,6 +37,10 @@ export const WorkspaceMobileLayout = ({
       display: 'flex',
       flexDirection: 'column',
       bgcolor: 'background.default',
+      background:
+        theme.palette.mode === 'dark'
+          ? `radial-gradient(circle at 50% -10%, ${alpha(theme.palette.primary.main, 0.24)}, transparent 34%), #020617`
+          : `radial-gradient(circle at 50% -10%, ${alpha(theme.palette.primary.main, 0.14)}, transparent 34%), #f8fff9`,
       '--studymesh-mobile-generation-tray-height': visibleCreationMarkerCount
         ? '48px'
         : '0px',
@@ -77,7 +81,7 @@ export const WorkspaceMobileLayout = ({
             position: 'absolute',
             inset: 0,
             overflow: 'hidden',
-            p: '8px',
+            p: '12px',
             boxSizing: 'border-box',
             zIndex: 2,
             bgcolor: 'background.default',
@@ -89,7 +93,7 @@ export const WorkspaceMobileLayout = ({
               overflow: 'hidden',
               border: 1,
               borderColor: 'divider',
-              borderRadius: 2,
+              borderRadius: 4,
               bgcolor: 'background.paper',
               boxShadow:
                 theme.palette.mode === 'dark'
@@ -138,6 +142,10 @@ export const WorkspaceDesktopLayout = ({
       display: 'flex',
       overflow: 'hidden',
       bgcolor: 'background.default',
+      background:
+        theme.palette.mode === 'dark'
+          ? `radial-gradient(circle at 0% 0%, ${alpha(theme.palette.primary.main, 0.22)}, transparent 30%), radial-gradient(circle at 88% 12%, ${alpha(theme.palette.warning.main, 0.14)}, transparent 28%), linear-gradient(135deg, ${alpha('#020617', 0.98)}, ${alpha('#07111f', 0.96)})`
+          : `radial-gradient(circle at 0% 0%, ${alpha(theme.palette.primary.main, 0.14)}, transparent 30%), radial-gradient(circle at 88% 12%, ${alpha(theme.palette.warning.main, 0.12)}, transparent 28%), linear-gradient(135deg, #f8fff9, #eef7ff)`,
     }}
   >
     <Box
@@ -146,7 +154,7 @@ export const WorkspaceDesktopLayout = ({
         flex: '0 0 auto',
         minHeight: 0,
         overflow: 'hidden',
-        p: '8px 0 8px 8px',
+        p: '14px 0 14px 14px',
         boxSizing: 'border-box',
         position: 'relative',
         transition: theme.transitions.create(['width'], {
@@ -161,11 +169,15 @@ export const WorkspaceDesktopLayout = ({
           overflow: 'hidden',
           border: 1,
           borderColor: 'divider',
-          borderRadius: 2.5,
+          borderRadius: 4,
+          background:
+            theme.palette.mode === 'dark'
+              ? `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.94)}, ${alpha('#07111f', 0.98)})`
+              : `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)}, ${alpha('#f2fbf5', 0.94)})`,
           boxShadow:
             theme.palette.mode === 'dark'
-              ? '0 18px 40px rgba(0,0,0,0.42)'
-              : '0 18px 42px rgba(16,24,40,0.10)',
+              ? `0 30px 90px ${alpha('#000', 0.58)}, 0 0 0 1px ${alpha(theme.palette.primary.main, 0.12)}`
+              : `0 30px 80px ${alpha('#0f172a', 0.14)}, 0 0 0 1px ${alpha(theme.palette.primary.main, 0.1)}`,
           display: isStudioOpen ? 'block' : 'none',
         }}
       >
@@ -183,8 +195,12 @@ export const WorkspaceDesktopLayout = ({
               height: '100%',
               border: 1,
               borderColor: 'divider',
-              borderRadius: 2.5,
+              borderRadius: 999,
               bgcolor: 'background.paper',
+              background:
+                theme.palette.mode === 'dark'
+                  ? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.background.paper, 0.95)})`
+                  : `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.14)}, ${alpha(theme.palette.background.paper, 0.98)})`,
               color: 'primary.main',
               cursor: 'pointer',
               display: 'flex',
@@ -249,6 +265,7 @@ export const WorkspaceDesktopLayout = ({
       sx={{
         flex: 1,
         minWidth: 0,
+        p: '14px',
         ...workspaceCanvasSx,
         transition: theme.transitions.create('padding', {
           duration: theme.transitions.duration.shorter,
@@ -260,10 +277,14 @@ export const WorkspaceDesktopLayout = ({
           height: '100%',
           minHeight: 0,
           overflow: 'hidden',
-          borderRadius: 2,
+          borderRadius: 4,
           bgcolor: 'background.paper',
           border: 1,
-          borderColor: 'divider',
+          borderColor: alpha(theme.palette.primary.main, 0.16),
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? `0 28px 90px ${alpha('#000', 0.48)}`
+              : `0 24px 70px ${alpha('#0f172a', 0.12)}`,
         }}
       >
         {children}
diff --git a/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx b/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
index 8dc035ad..bfecd427 100644
--- a/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
+++ b/apps/studymesh/src/components/workspace/WorkspaceStudioShell.tsx
@@ -898,6 +898,30 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
   ]
 
   const studyPathOption = createOptions[0]
+  const commandStats = [
+    { label: 'Primary route', value: 'Study Path' },
+    {
+      label: 'Fast lane',
+      value: hasCurrentDashboardContext ? '1-click ready' : 'Needs source',
+    },
+    { label: 'Material lab', value: quickSourceLabel },
+  ]
+  const sourceFlowSteps = [
+    {
+      label: 'Output',
+      value: selectedQuickCreateIntent
+        ? quickCreateLabels[selectedQuickCreateIntent]
+        : 'Pick a target',
+    },
+    {
+      label: 'Source',
+      value: quickSourceMode === 'dashboard' ? 'Dashboard' : quickSourceLabel,
+    },
+    {
+      label: 'Finish',
+      value: quickCanCreateFromActiveSource ? 'Ready' : 'Waiting',
+    },
+  ]
 
   const returnToCreateHub = () => {
     setActiveFlow('hub')
@@ -929,59 +953,108 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
       }}
     >
       <Stack spacing={2.5}>
-        <Box sx={{ display: 'flex', gap: 1.25, alignItems: 'flex-start' }}>
-          <Box sx={{ minWidth: 0, flex: 1 }}>
-            <Typography variant="h5" fontWeight={900}>
-              Creation
-            </Typography>
-            <Typography
-              variant="body2"
-              color="text.secondary"
-              sx={{ mt: 0.35, maxWidth: 340 }}
-            >
-              Create a guided study path or quick material from your dashboard.
-            </Typography>
-            <Stack
-              direction="row"
-              spacing={0.75}
-              flexWrap="wrap"
-              sx={{ mt: 1 }}
+        <Paper
+          elevation={0}
+          sx={{
+            p: { xs: 1.75, sm: 2 },
+            borderRadius: 3.5,
+            border: 1,
+            borderColor: alpha(theme.palette.primary.main, 0.26),
+            bgcolor: alpha(
+              theme.palette.primary.main,
+              theme.palette.mode === 'dark' ? 0.11 : 0.07,
+            ),
+            backgroundImage: `radial-gradient(circle at 8% 0%, ${alpha(theme.palette.primary.main, 0.25)}, transparent 34%), radial-gradient(circle at 92% 16%, ${alpha(theme.palette.warning.main, 0.16)}, transparent 30%)`,
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
+          <Stack spacing={1.5}>
+            <Stack direction="row" gap={1.25} alignItems="flex-start">
+              <Box sx={{ minWidth: 0, flex: 1 }}>
+                <Typography
+                  variant="caption"
+                  color="primary"
+                  fontWeight={950}
+                  sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
+                >
+                  StudyMesh command center
+                </Typography>
+                <Typography
+                  variant="h4"
+                  fontWeight={950}
+                  sx={{
+                    lineHeight: 0.98,
+                    mt: 0.5,
+                    fontSize: { xs: '1.7rem', sm: '2rem' },
+                  }}
+                >
+                  Build the next learning surface.
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  sx={{ mt: 0.9, maxWidth: 430 }}
+                >
+                  Big guided paths, instant review material, or a focused source
+                  lab — all from one launch deck.
+                </Typography>
+              </Box>
+              <IconButton
+                aria-label="Close Create panel"
+                onClick={closeStudio}
+                size="small"
+                sx={{
+                  mt: 0.25,
+                  border: 1,
+                  borderColor: alpha(theme.palette.primary.main, 0.24),
+                  bgcolor: alpha(theme.palette.background.paper, 0.72),
+                  flex: '0 0 auto',
+                }}
+              >
+                <ChevronLeftIcon fontSize="small" />
+              </IconButton>
+            </Stack>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: '1fr',
+                  sm: 'repeat(3, minmax(0, 1fr))',
+                },
+                gap: 1,
+              }}
             >
-              {[
-                'Study Path',
-                hasCurrentDashboardContext ? 'Dashboard ready' : 'Add material',
-                'Ask Sources',
-              ].map((label) => (
-                <Chip
-                  key={label}
-                  size="small"
-                  label={label}
+              {commandStats.map((stat) => (
+                <Paper
+                  key={stat.label}
+                  elevation={0}
                   sx={{
-                    height: 22,
-                    fontWeight: 800,
-                    bgcolor: alpha(theme.palette.primary.main, 0.08),
+                    p: 1.1,
+                    borderRadius: 2,
                     border: 1,
-                    borderColor: alpha(theme.palette.primary.main, 0.16),
+                    borderColor: alpha(theme.palette.primary.main, 0.14),
+                    bgcolor: alpha(
+                      theme.palette.background.paper,
+                      theme.palette.mode === 'dark' ? 0.5 : 0.72,
+                    ),
                   }}
-                />
+                >
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    fontWeight={800}
+                  >
+                    {stat.label}
+                  </Typography>
+                  <Typography variant="subtitle2" fontWeight={950} noWrap>
+                    {stat.value}
+                  </Typography>
+                </Paper>
               ))}
-            </Stack>
-          </Box>
-          <IconButton
-            aria-label="Close Create panel"
-            onClick={closeStudio}
-            size="small"
-            sx={{
-              mt: 0.25,
-              border: 1,
-              borderColor: 'divider',
-              bgcolor: 'background.default',
-              flex: '0 0 auto',
-            }}
-          >
-            <ChevronLeftIcon fontSize="small" />
-          </IconButton>
-        </Box>
+            </Box>
+          </Stack>
+        </Paper>
 
         {!quickOptionsOpen ? (
           <>
@@ -992,18 +1065,21 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
               elevation={0}
               sx={{
                 width: '100%',
-                p: { xs: 2, sm: 2.25 },
+                p: { xs: 2.4, sm: 3 },
                 textAlign: 'left',
-                borderRadius: 3,
+                borderRadius: 4,
                 border: 1,
                 borderColor: alpha(theme.palette.primary.main, 0.42),
-                bgcolor: alpha(theme.palette.primary.main, 0.075),
+                bgcolor: alpha(
+                  theme.palette.primary.main,
+                  theme.palette.mode === 'dark' ? 0.16 : 0.1,
+                ),
                 color: 'text.primary',
                 cursor: 'pointer',
                 display: 'block',
                 position: 'relative',
                 overflow: 'hidden',
-                boxShadow: `0 14px 36px ${alpha(theme.palette.primary.main, 0.1)}`,
+                boxShadow: `0 28px 80px ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.22 : 0.14)}`,
                 '&::before': {
                   content: '""',
                   position: 'absolute',
@@ -1027,7 +1103,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   'background-color 160ms ease, border-color 160ms ease, transform 160ms ease',
               }}
             >
-              <Stack spacing={1.75} sx={{ position: 'relative' }}>
+              <Stack spacing={2.25} sx={{ position: 'relative' }}>
                 <Stack direction="row" alignItems="center" spacing={1}>
                   <Box
                     sx={{
@@ -1052,7 +1128,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                     >
                       Recommended
                     </Typography>
-                    <Typography variant="h5" fontWeight={950} lineHeight={1.15}>
+                    <Typography variant="h4" fontWeight={950} lineHeight={1.02}>
                       Study Path
                     </Typography>
                   </Box>
@@ -1069,8 +1145,14 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                     Creates lessons, dashboards, exercises and flashcards.
                   </Typography>
                 </Box>
-                <Stack direction="row" spacing={0.75} flexWrap="wrap">
-                  {['Lessons', 'Exercises', 'Review'].map((label) => (
+                <Box
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                    gap: 0.75,
+                  }}
+                >
+                  {['01 Lessons', '02 Exercises', '03 Review'].map((label) => (
                     <Chip
                       key={label}
                       size="small"
@@ -1081,7 +1163,7 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                       }}
                     />
                   ))}
-                </Stack>
+                </Box>
                 <Button
                   component="span"
                   variant="contained"
@@ -1099,188 +1181,209 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
               </Stack>
             </Paper>
 
-            <Stack spacing={1.25}>
-              <Box>
-                <Typography variant="subtitle1" fontWeight={900}>
-                  Quick Create
-                </Typography>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  sx={{ mt: 0.3 }}
+            <Paper
+              elevation={0}
+              sx={{
+                p: 1.5,
+                borderRadius: 3,
+                border: 1,
+                borderColor: 'divider',
+                bgcolor: 'background.paper',
+              }}
+            >
+              <Stack spacing={1.25}>
+                <Box>
+                  <Typography
+                    variant="caption"
+                    color="primary"
+                    fontWeight={950}
+                    sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
+                  >
+                    Quick Create runway
+                  </Typography>
+                  <Typography variant="subtitle1" fontWeight={900}>
+                    Instant material cards
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    sx={{ mt: 0.3 }}
+                  >
+                    {hasCurrentDashboardContext
+                      ? 'One click, no setup: generate focused material from your current dashboard.'
+                      : 'This dashboard is empty, so these open Create from Material.'}
+                  </Typography>
+                </Box>
+                {!hasCurrentDashboardContext ? (
+                  <Alert severity="info" sx={{ py: 0.5 }}>
+                    The current dashboard is empty. Pick a card to create from
+                    material instead.
+                  </Alert>
+                ) : null}
+                <Box
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: {
+                      xs: '1fr',
+                      sm: 'repeat(3, minmax(0, 1fr))',
+                    },
+                    gap: 1,
+                  }}
                 >
-                  {hasCurrentDashboardContext
-                    ? 'One click, no setup: generate focused material from your current dashboard.'
-                    : 'This dashboard is empty, so these open Create from Material.'}
-                </Typography>
-              </Box>
-              {!hasCurrentDashboardContext ? (
-                <Alert severity="info" sx={{ py: 0.5 }}>
-                  The current dashboard is empty. Pick a card to create from
-                  material instead.
-                </Alert>
-              ) : null}
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    sm: 'repeat(3, minmax(0, 1fr))',
-                  },
-                  gap: 1,
-                }}
-              >
-                {(['quiz', 'flashcards', 'improvedNotes'] as const).map(
-                  (resourceType) => {
-                    const accent = quickCreateAccents[resourceType]
-                    const selected = false
-
-                    return (
-                      <Paper
-                        key={resourceType}
-                        component="button"
-                        type="button"
-                        aria-label={quickCreateLabels[resourceType]}
-                        elevation={0}
-                        onClick={() => handleQuickCreateCardClick(resourceType)}
-                        sx={{
-                          minHeight: { xs: 82, sm: 110 },
-                          p: { xs: 1.15, sm: 1.35 },
-                          borderRadius: 2,
-                          border: selected ? 2 : 1,
-                          borderColor: selected
-                            ? accent
-                            : !hasCurrentDashboardContext
-                              ? alpha(theme.palette.warning.main, 0.55)
-                              : alpha(
-                                  accent,
-                                  theme.palette.mode === 'dark' ? 0.3 : 0.22,
-                                ),
-                          bgcolor: alpha(
-                            accent,
-                            selected
-                              ? theme.palette.mode === 'dark'
-                                ? 0.2
-                                : 0.12
-                              : theme.palette.mode === 'dark'
-                                ? 0.12
-                                : 0.07,
-                          ),
-                          color: 'text.primary',
-                          cursor: 'pointer',
-                          textAlign: 'left',
-                          display: 'flex',
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          gap: 1.25,
-                          boxShadow: `0 10px 26px ${alpha(
-                            accent,
-                            theme.palette.mode === 'dark' ? 0.08 : 0.05,
-                          )}`,
-                          '&:hover': {
-                            borderColor: alpha(accent, 0.72),
+                  {(['quiz', 'flashcards', 'improvedNotes'] as const).map(
+                    (resourceType) => {
+                      const accent = quickCreateAccents[resourceType]
+                      const selected = false
+
+                      return (
+                        <Paper
+                          key={resourceType}
+                          component="button"
+                          type="button"
+                          aria-label={quickCreateLabels[resourceType]}
+                          elevation={0}
+                          onClick={() =>
+                            handleQuickCreateCardClick(resourceType)
+                          }
+                          sx={{
+                            minHeight: { xs: 82, sm: 110 },
+                            p: { xs: 1.15, sm: 1.35 },
+                            borderRadius: 2,
+                            border: selected ? 2 : 1,
+                            borderColor: selected
+                              ? accent
+                              : !hasCurrentDashboardContext
+                                ? alpha(theme.palette.warning.main, 0.55)
+                                : alpha(
+                                    accent,
+                                    theme.palette.mode === 'dark' ? 0.3 : 0.22,
+                                  ),
                             bgcolor: alpha(
                               accent,
-                              theme.palette.mode === 'dark' ? 0.18 : 0.1,
+                              selected
+                                ? theme.palette.mode === 'dark'
+                                  ? 0.2
+                                  : 0.12
+                                : theme.palette.mode === 'dark'
+                                  ? 0.12
+                                  : 0.07,
                             ),
-                            transform: 'translateY(-1px)',
-                          },
-                          '&:focus-visible': {
-                            outline: `3px solid ${alpha(accent, 0.26)}`,
-                            outlineOffset: 2,
-                          },
-                          transition:
-                            'background-color 160ms ease, border-color 160ms ease, transform 160ms ease',
-                        }}
-                      >
-                        <Stack spacing={1} sx={{ minWidth: 0 }}>
+                            color: 'text.primary',
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            gap: 1.25,
+                            boxShadow: `0 10px 26px ${alpha(
+                              accent,
+                              theme.palette.mode === 'dark' ? 0.08 : 0.05,
+                            )}`,
+                            '&:hover': {
+                              borderColor: alpha(accent, 0.72),
+                              bgcolor: alpha(
+                                accent,
+                                theme.palette.mode === 'dark' ? 0.18 : 0.1,
+                              ),
+                              transform: 'translateY(-1px)',
+                            },
+                            '&:focus-visible': {
+                              outline: `3px solid ${alpha(accent, 0.26)}`,
+                              outlineOffset: 2,
+                            },
+                            transition:
+                              'background-color 160ms ease, border-color 160ms ease, transform 160ms ease',
+                          }}
+                        >
+                          <Stack spacing={1} sx={{ minWidth: 0 }}>
+                            <Box
+                              sx={{
+                                width: 34,
+                                height: 34,
+                                borderRadius: 1.5,
+                                display: 'grid',
+                                placeItems: 'center',
+                                bgcolor: alpha(
+                                  accent,
+                                  theme.palette.mode === 'dark' ? 0.2 : 0.14,
+                                ),
+                                color: accent,
+                                flex: '0 0 auto',
+                              }}
+                            >
+                              {quickCreateIcons[resourceType]}
+                            </Box>
+                            {selected ? (
+                              <Typography
+                                variant="caption"
+                                fontWeight={900}
+                                sx={{ color: accent, lineHeight: 1 }}
+                              >
+                                Selected
+                              </Typography>
+                            ) : null}
+                            <Typography
+                              variant="subtitle2"
+                              fontWeight={900}
+                              sx={{ lineHeight: 1.15 }}
+                            >
+                              {quickCreateLabels[resourceType]}
+                            </Typography>
+                            <Typography
+                              variant="caption"
+                              color="text.secondary"
+                              fontWeight={800}
+                            >
+                              {hasCurrentDashboardContext
+                                ? '1-click'
+                                : 'Needs material'}
+                            </Typography>
+                          </Stack>
                           <Box
                             sx={{
-                              width: 34,
-                              height: 34,
-                              borderRadius: 1.5,
+                              width: 26,
+                              height: 26,
+                              borderRadius: '50%',
                               display: 'grid',
                               placeItems: 'center',
+                              alignSelf: 'center',
+                              color: alpha(
+                                accent,
+                                theme.palette.mode === 'dark' ? 0.95 : 0.9,
+                              ),
+                              border: 1,
+                              borderColor: alpha(accent, 0.24),
                               bgcolor: alpha(
                                 accent,
-                                theme.palette.mode === 'dark' ? 0.2 : 0.14,
+                                theme.palette.mode === 'dark' ? 0.12 : 0.08,
                               ),
-                              color: accent,
                               flex: '0 0 auto',
                             }}
                           >
-                            {quickCreateIcons[resourceType]}
+                            <ChevronRightIcon fontSize="small" />
                           </Box>
-                          {selected ? (
-                            <Typography
-                              variant="caption"
-                              fontWeight={900}
-                              sx={{ color: accent, lineHeight: 1 }}
-                            >
-                              Selected
-                            </Typography>
-                          ) : null}
-                          <Typography
-                            variant="subtitle2"
-                            fontWeight={900}
-                            sx={{ lineHeight: 1.15 }}
-                          >
-                            {quickCreateLabels[resourceType]}
-                          </Typography>
-                          <Typography
-                            variant="caption"
-                            color="text.secondary"
-                            fontWeight={800}
-                          >
-                            {hasCurrentDashboardContext
-                              ? '1-click'
-                              : 'Needs material'}
-                          </Typography>
-                        </Stack>
-                        <Box
-                          sx={{
-                            width: 26,
-                            height: 26,
-                            borderRadius: '50%',
-                            display: 'grid',
-                            placeItems: 'center',
-                            alignSelf: 'center',
-                            color: alpha(
-                              accent,
-                              theme.palette.mode === 'dark' ? 0.95 : 0.9,
-                            ),
-                            border: 1,
-                            borderColor: alpha(accent, 0.24),
-                            bgcolor: alpha(
-                              accent,
-                              theme.palette.mode === 'dark' ? 0.12 : 0.08,
-                            ),
-                            flex: '0 0 auto',
-                          }}
-                        >
-                          <ChevronRightIcon fontSize="small" />
-                        </Box>
-                      </Paper>
-                    )
-                  },
-                )}
-              </Box>
-              <Button
-                size="small"
-                onClick={() => openCreateFromMaterial()}
-                aria-expanded={quickOptionsOpen}
-                sx={{
-                  alignSelf: 'flex-start',
-                  textTransform: 'none',
-                  borderRadius: 999,
-                  px: 0.5,
-                  fontWeight: 800,
-                }}
-              >
-                Create from material
-              </Button>
-            </Stack>
+                        </Paper>
+                      )
+                    },
+                  )}
+                </Box>
+                <Button
+                  size="small"
+                  onClick={() => openCreateFromMaterial()}
+                  aria-expanded={quickOptionsOpen}
+                  sx={{
+                    alignSelf: 'flex-start',
+                    textTransform: 'none',
+                    borderRadius: 999,
+                    px: 0.5,
+                    fontWeight: 800,
+                  }}
+                >
+                  Create from material
+                </Button>
+              </Stack>
+            </Paper>
           </>
         ) : (
           <Stack spacing={1.5}>
@@ -1299,8 +1402,28 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
             >
               ← Back to Creation
             </Button>
-            <Box>
-              <Typography variant="h5" fontWeight={900}>
+            <Paper
+              elevation={0}
+              sx={{
+                p: 1.5,
+                borderRadius: 3,
+                border: 1,
+                borderColor: alpha(theme.palette.warning.main, 0.28),
+                bgcolor: alpha(
+                  theme.palette.warning.main,
+                  theme.palette.mode === 'dark' ? 0.1 : 0.06,
+                ),
+              }}
+            >
+              <Typography
+                variant="caption"
+                color="warning.main"
+                fontWeight={950}
+                sx={{ textTransform: 'uppercase', letterSpacing: 0.8 }}
+              >
+                Material lab
+              </Typography>
+              <Typography variant="h5" fontWeight={950}>
                 Create from Material
               </Typography>
               <Typography
@@ -1311,22 +1434,40 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                 Add files, pasted notes, images, PDFs, or slides, then choose
                 what StudyMesh should create.
               </Typography>
-              <Stack
-                direction="row"
-                spacing={0.75}
-                flexWrap="wrap"
-                sx={{ mt: 1 }}
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: { xs: '1fr', sm: 'repeat(3, 1fr)' },
+                  gap: 0.75,
+                  mt: 1.25,
+                }}
               >
-                {['1 Output', '2 Source', '3 Options'].map((label) => (
-                  <Chip
-                    key={label}
-                    size="small"
-                    label={label}
-                    sx={{ fontWeight: 800 }}
-                  />
+                {sourceFlowSteps.map((step, index) => (
+                  <Paper
+                    key={step.label}
+                    elevation={0}
+                    sx={{
+                      p: 1,
+                      borderRadius: 2,
+                      border: 1,
+                      borderColor: alpha(theme.palette.warning.main, 0.18),
+                      bgcolor: alpha(theme.palette.background.paper, 0.65),
+                    }}
+                  >
+                    <Typography
+                      variant="caption"
+                      fontWeight={900}
+                      color="text.secondary"
+                    >
+                      0{index + 1} · {step.label}
+                    </Typography>
+                    <Typography variant="subtitle2" fontWeight={950} noWrap>
+                      {step.value}
+                    </Typography>
+                  </Paper>
                 ))}
-              </Stack>
-            </Box>
+              </Box>
+            </Paper>
           </Stack>
         )}
 
@@ -1335,14 +1476,14 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
             ref={quickOptionsPanelRef}
             elevation={0}
             sx={{
-              p: { xs: 1.5, sm: 1.75 },
+              p: { xs: 1.6, sm: 2 },
               border: 1,
               borderColor: quickHasCustomSources
                 ? alpha(theme.palette.primary.main, 0.45)
                 : hasCurrentDashboardContext
                   ? 'divider'
                   : alpha(theme.palette.warning.main, 0.65),
-              borderRadius: 2.5,
+              borderRadius: 3.5,
               bgcolor:
                 theme.palette.mode === 'dark'
                   ? alpha(theme.palette.background.paper, 0.92)
@@ -1468,7 +1609,8 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   sx={{
                     textTransform: 'none',
                     flex: 1,
-                    borderRadius: 1.5,
+                    borderRadius: 2.5,
+                    minHeight: 72,
                     fontWeight: 900,
                   }}
                 >
@@ -1504,7 +1646,8 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   sx={{
                     textTransform: 'none',
                     flex: 1,
-                    borderRadius: 1.5,
+                    borderRadius: 2.5,
+                    minHeight: 72,
                     fontWeight: 900,
                   }}
                 >
@@ -1540,9 +1683,9 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   onDrop={handleQuickSourceDrop}
                   onDragOver={(event) => event.preventDefault()}
                   sx={{
-                    minHeight: 210,
-                    p: 2,
-                    border: '1.5px dashed',
+                    minHeight: 270,
+                    p: 2.5,
+                    border: '2px dashed',
                     borderColor: quickSourceFiles.length
                       ? 'primary.main'
                       : 'divider',
@@ -1567,9 +1710,9 @@ const WorkspaceStudioShell = ({ children }: { children: React.ReactNode }) => {
                   >
                     <Box
                       sx={{
-                        width: 52,
-                        height: 52,
-                        borderRadius: 2.25,
+                        width: 72,
+                        height: 72,
+                        borderRadius: 3,
                         display: 'grid',
                         placeItems: 'center',
                         bgcolor: 'background.paper',