diff --git a/AGENTS.md b/AGENTS.md
index 8f3238cc..4942f4df 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,10 +10,10 @@ This project prefers a highly componentized React codebase that avoids duplicate
 - **Styling**: Use Tailwind CSS utility classes. Share common styling through base components rather than repeating class strings.
 - **Git**: Do not commit .png files
 - **Formatting**: Code is formatted with Prettier using tabs. Run `npx prettier --write` before committing. Don't add comments to code unless absolutely necessary.
-- **Testing**: After changes, run `yarn test:codex` from the repository root to ensure all tests pass.
 - **Type Safety**: You are not allowed to use `any` or `unknown`.
-- **Redux**: Compose selectors and helpers rather than copy/pasting logic.
+- **Redux**: Compose selectors and helpers rather than copy/pasting logic. UI components should avoid data manipulation—use Redux selectors to transform and format data instead of doing it in components.
 - **Error Handling**: Keep error handling reasonable but not excessive. This is a small app - simple null checks and basic 404s are fine. Don't over-engineer with detailed error types for every edge case.
 - **Unit Tests**: Write unit tests for important service functions, especially those involving business logic or data transformations.
+- **Testing**: After changes, run `yarn test:codex` from the repository root to ensure all tests pass.
 
 Follow these guidelines to keep the codebase clean and maintainable.
diff --git a/apps/react/src/App.tsx b/apps/react/src/App.tsx
index 1d4f06d7..f9b33dba 100644
--- a/apps/react/src/App.tsx
+++ b/apps/react/src/App.tsx
@@ -18,6 +18,7 @@ import { useDarkMode } from './utils/useDarkMode';
 import { DeckStatsScreen } from './screens/DeckStatsScreen/DeckStatsScreen';
 import { AccountScreen } from './screens/AccountScreen/AccountScreen';
 import { AttemptHistoryScreen } from './screens/AttemptHistoryScreen/AttemptHistoryScreen';
+import { StreakActivityScreen } from './screens/StreakActivityScreen/StreakActivityScreen';
 import { useAppDispatch } from 'MemoryFlashCore/src/redux/store';
 import { refreshUser } from 'MemoryFlashCore/src/redux/actions/refresh-user-action';
 
@@ -81,6 +82,10 @@ export default function App() {
 						path="/study/:deckId/stats"
 						element={<AuthenticatedRoute screen={<DeckStatsScreen />} />}
 					/>
+					<Route
+						path="/streak"
+						element={<AuthenticatedRoute screen={<StreakActivityScreen />} />}
+					/>
 					<Route
 						path="/study/:deckId/attempts"
 						element={<AuthenticatedRoute screen={<AttemptHistoryScreen />} />}
diff --git a/apps/react/src/components/StreakChip.tsx b/apps/react/src/components/StreakChip.tsx
index 5c6440ef..41fdd28a 100644
--- a/apps/react/src/components/StreakChip.tsx
+++ b/apps/react/src/components/StreakChip.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
 import clsx from 'clsx';
 import { useAppSelector } from 'MemoryFlashCore/src/redux/store';
 
@@ -25,10 +26,12 @@ export const StreakChip: React.FC<StreakChipProps> = ({ className }) => {
 	}, [count]);
 
 	return (
-		<div
+		<Link
+			to="/streak"
 			className={clsx(
 				'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium',
 				'bg-orange-50 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+				'hover:bg-orange-100 dark:hover:bg-orange-900/50 transition-colors',
 				animate ? 'animate-bounce' : '',
 				className,
 			)}
@@ -36,6 +39,6 @@ export const StreakChip: React.FC<StreakChipProps> = ({ className }) => {
 		>
 			<span>🔥</span>
 			<span>{displayCount}</span>
-		</div>
+		</Link>
 	);
 };
diff --git a/apps/react/src/components/feedback/NetworkStateWrapper.tsx b/apps/react/src/components/feedback/NetworkStateWrapper.tsx
index 4601f2c2..b76bf46e 100644
--- a/apps/react/src/components/feedback/NetworkStateWrapper.tsx
+++ b/apps/react/src/components/feedback/NetworkStateWrapper.tsx
@@ -20,12 +20,13 @@ export const NetworkStateWrapper: React.FC<NetworkStateWrapperProps> = ({
 	const showSpinner =
 		isLoading &&
 		(showSpinnerWhen === 'always' || (showSpinnerWhen === 'no-children' && !hasData));
+	const showChildren = !isLoading || hasData;
 
 	return (
 		<>
 			<Spinner show={showSpinner} />
 			<BasicErrorCard error={error} />
-			{children}
+			{showChildren && children}
 		</>
 	);
 };
diff --git a/apps/react/src/components/inputs/BaseTextArea.tsx b/apps/react/src/components/inputs/BaseTextArea.tsx
index f8e755ac..b3b998c1 100644
--- a/apps/react/src/components/inputs/BaseTextArea.tsx
+++ b/apps/react/src/components/inputs/BaseTextArea.tsx
@@ -6,7 +6,7 @@ export const BaseTextArea = React.forwardRef<HTMLTextAreaElement, BaseTextAreaPr
 	({ className = '', ...props }, ref) => (
 		<textarea
 			ref={ref}
-			className={`block w-full rounded-md border-0 py-1.5 bg-white dark:bg-gray-800 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 resize-y min-h-[80px] ${className}`}
+			className={`block w-full rounded-md border border-default py-2 px-3 bg-surface text-fg placeholder:text-lm-muted dark:placeholder:text-dm-muted focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent transition-all duration-150 sm:text-sm resize-y min-h-[80px] ${className}`}
 			{...props}
 		/>
 	),
diff --git a/apps/react/src/components/inputs/TextAreaField.tsx b/apps/react/src/components/inputs/TextAreaField.tsx
index 4a5e5b7c..6b00c016 100644
--- a/apps/react/src/components/inputs/TextAreaField.tsx
+++ b/apps/react/src/components/inputs/TextAreaField.tsx
@@ -15,7 +15,7 @@ export const TextAreaField: React.FC<TextAreaFieldProps> = ({
 	...props
 }) => (
 	<div>
-		<label htmlFor={id} className="block text-sm font-medium leading-6 text-gray-900">
+		<label htmlFor={id} className="block text-sm font-medium leading-6 text-fg">
 			{label}
 		</label>
 		<div className="mt-2 relative">
diff --git a/apps/react/src/components/notation/BarsSetting.tsx b/apps/react/src/components/notation/BarsSetting.tsx
deleted file mode 100644
index 94fad1a2..00000000
--- a/apps/react/src/components/notation/BarsSetting.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { NumberInput } from '../inputs';
-import { SettingsSection } from './SettingsSection';
-
-interface BarsSettingProps {
-	bars: number;
-	setBars: (n: number) => void;
-}
-
-export const BarsSetting: React.FC<BarsSettingProps> = ({ bars, setBars }) => (
-	<SettingsSection title="Bars">
-		<label className="flex items-center gap-2">
-			Count
-			<NumberInput
-				className="w-16"
-				min={1}
-				value={bars}
-				onChange={(e) => setBars(parseInt(e.target.value, 10) || 1)}
-			/>
-		</label>
-	</SettingsSection>
-);
diff --git a/apps/react/src/components/notation/ChordProgressionInput.tsx b/apps/react/src/components/notation/ChordProgressionInput.tsx
index 3110e45f..21665818 100644
--- a/apps/react/src/components/notation/ChordProgressionInput.tsx
+++ b/apps/react/src/components/notation/ChordProgressionInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { InputField } from '../inputs';
+import { InputField, TextAreaField } from '../inputs';
 import { ChordToneDisplay } from './ChordToneDisplay';
 import { ChordMemorySettings } from './defaultSettings';
 import { parseChordProgression } from './parseChordProgression';
@@ -35,7 +35,7 @@ export const ChordProgressionInput: React.FC<ChordProgressionInputProps> = ({
 				value={chordMemory.progression}
 				onChange={(e) => handleProgressionChange(e.target.value)}
 			/>
-			<InputField
+			<TextAreaField
 				id="chord-text-prompt"
 				label="Text Prompt (optional)"
 				placeholder="e.g., Autumn Leaves - Verse"
diff --git a/apps/react/src/components/notation/NotationSettings.tsx b/apps/react/src/components/notation/NotationSettings.tsx
index 44132426..d5d42d9a 100644
--- a/apps/react/src/components/notation/NotationSettings.tsx
+++ b/apps/react/src/components/notation/NotationSettings.tsx
@@ -2,11 +2,10 @@ import React from 'react';
 import { TranspositionSelector } from '../TranspositionSelector';
 import { majorKeys } from 'MemoryFlashCore/src/lib/notes';
 import { NotationSettingsState } from './defaultSettings';
-import { NoteSettings } from './NoteSettings';
+import { SheetMusicSettings } from './SheetMusicSettings';
 import { SettingsSection } from './SettingsSection';
 import { RangeSettings } from './RangeSettings';
 import { CardTypeOptions } from './CardTypeOptions';
-import { BarsSetting } from './BarsSetting';
 
 interface NotationSettingsProps {
 	settings: NotationSettingsState;
@@ -28,11 +27,18 @@ export const NotationSettings: React.FC<NotationSettingsProps> = ({ settings, on
 		(selected, i) => selected && i !== currentKeyIdx,
 	);
 
+	const isChordMemory = settings.cardType === 'Chord Memory';
+
 	return (
 		<div className="space-y-4">
-			<NoteSettings keySig={settings.keySig} onChange={update} />
 			<CardTypeOptions settings={settings} onChange={update} />
-			<BarsSetting bars={settings.bars} setBars={(n) => update({ bars: n })} />
+			{!isChordMemory && (
+				<SheetMusicSettings
+					keySig={settings.keySig}
+					bars={settings.bars}
+					onChange={update}
+				/>
+			)}
 			<SettingsSection
 				title="Transpositions"
 				collapsible={true}
diff --git a/apps/react/src/components/notation/NoteSettings.tsx b/apps/react/src/components/notation/NoteSettings.tsx
deleted file mode 100644
index 434369fe..00000000
--- a/apps/react/src/components/notation/NoteSettings.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Select } from '../inputs';
-import { majorKeys } from 'MemoryFlashCore/src/lib/notes';
-import { SettingsSection } from './SettingsSection';
-import { ScoreToolbar } from './ScoreToolbar';
-
-interface NoteSettingsProps {
-	keySig: string;
-	onChange: (changes: Partial<{ keySig: string }>) => void;
-}
-
-export const NoteSettings: React.FC<NoteSettingsProps> = ({ keySig, onChange }) => (
-	<SettingsSection title="Note Settings">
-		<div className="space-y-4">
-			<label className="flex items-center gap-2">
-				Key
-				<Select value={keySig} onChange={(e) => onChange({ keySig: e.target.value })}>
-					{majorKeys.map((k) => (
-						<option key={k}>{k}</option>
-					))}
-				</Select>
-			</label>
-			<ScoreToolbar />
-		</div>
-	</SettingsSection>
-);
diff --git a/apps/react/src/components/notation/ScoreToolbar.tsx b/apps/react/src/components/notation/ScoreToolbar.tsx
index 7e50c27b..cb1a33fb 100644
--- a/apps/react/src/components/notation/ScoreToolbar.tsx
+++ b/apps/react/src/components/notation/ScoreToolbar.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import { BaseDuration, Duration } from 'MemoryFlashCore/src/lib/measure';
 import { StaffEnum } from 'MemoryFlashCore/src/types/Cards';
 import { useScoreEditor } from './ScoreEditor';
@@ -6,7 +7,31 @@ import { useScoreEditor } from './ScoreEditor';
 const baseDurations: BaseDuration[] = ['w', 'h', 'q', '8', '16'];
 const tieOptions: Duration[] = ['w', 'h', 'q', '8', '16', '32', '64'];
 
-const btn = 'border rounded flex items-center justify-center text-lg';
+const btnBase =
+	'border border-default rounded flex items-center justify-center text-sm font-medium transition-colors';
+const btnActive = 'bg-gray-200 dark:bg-dm-elevated';
+const btnInactive = 'bg-lm-surface dark:bg-dm-surface hover:bg-gray-100 dark:hover:bg-dm-elevated';
+
+interface ToolbarButtonProps {
+	active?: boolean;
+	onClick: () => void;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+	active = false,
+	onClick,
+	children,
+	className,
+}) => (
+	<button
+		className={clsx(btnBase, active ? btnActive : btnInactive, className)}
+		onClick={onClick}
+	>
+		{children}
+	</button>
+);
 
 export const ScoreToolbar: React.FC = () => {
 	const {
@@ -23,62 +48,64 @@ export const ScoreToolbar: React.FC = () => {
 	} = useScoreEditor();
 	const tiedDurations = durations.slice(1);
 	return (
-		<div className="flex flex-col gap-2">
+		<div className="flex flex-col gap-3">
 			<div className="flex flex-wrap items-center gap-2">
+				<span className="text-sm text-muted w-14">Duration</span>
 				{baseDurations.map((d) => (
-					<button
+					<ToolbarButton
 						key={d}
-						className={`${btn} w-10 h-10 ${dur === d ? 'bg-gray-200' : ''}`}
+						active={dur === d}
 						onClick={() => setDur(d)}
+						className="w-9 h-9"
 					>
 						{d}
-					</button>
+					</ToolbarButton>
 				))}
-				<button
-					className={`${btn} w-10 h-10 ${dotted ? 'bg-gray-200' : ''}`}
-					onClick={toggleDot}
-				>
+				<ToolbarButton active={dotted} onClick={toggleDot} className="w-9 h-9">
 					.
-				</button>
-				<button className={`${btn} w-10 h-10`} onClick={addRest}>
-					rest
-				</button>
-				<button
-					className={`${btn} px-3 h-10 ${staff === StaffEnum.Treble ? 'bg-gray-200' : ''}`}
-					onClick={() => setStaff(StaffEnum.Treble)}
-				>
-					Treble
-				</button>
-				<button
-					className={`${btn} px-3 h-10 ${staff === StaffEnum.Bass ? 'bg-gray-200' : ''}`}
-					onClick={() => setStaff(StaffEnum.Bass)}
-				>
-					Bass
-				</button>
+				</ToolbarButton>
 			</div>
 			<div className="flex flex-wrap items-center gap-2">
-				<span className="text-sm text-muted">ties</span>
+				<span className="text-sm text-muted w-14">Tie</span>
 				{tiedDurations.length === 0 && <span className="text-sm text-muted">none</span>}
 				{tiedDurations.map((duration, index) => (
-					<button
+					<ToolbarButton
 						key={`tie-${index}-${duration}`}
-						className={`${btn} h-8 px-3 text-base`}
 						onClick={() => removeTieDuration(index)}
+						className="h-8 px-2"
 					>
 						{duration} ×
-					</button>
+					</ToolbarButton>
 				))}
-				<div className="flex gap-1">
-					{tieOptions.map((option) => (
-						<button
-							key={`tie-option-${option}`}
-							className={`${btn} h-8 px-2 text-base`}
-							onClick={() => addTieDuration(option)}
-						>
-							+{option}
-						</button>
-					))}
-				</div>
+				{tieOptions.map((option) => (
+					<ToolbarButton
+						key={`tie-option-${option}`}
+						onClick={() => addTieDuration(option)}
+						className="h-8 px-2"
+					>
+						+{option}
+					</ToolbarButton>
+				))}
+			</div>
+			<div className="flex flex-wrap items-center gap-2">
+				<span className="text-sm text-muted w-14">Staff</span>
+				<ToolbarButton
+					active={staff === StaffEnum.Treble}
+					onClick={() => setStaff(StaffEnum.Treble)}
+					className="px-3 h-9"
+				>
+					Treble
+				</ToolbarButton>
+				<ToolbarButton
+					active={staff === StaffEnum.Bass}
+					onClick={() => setStaff(StaffEnum.Bass)}
+					className="px-3 h-9"
+				>
+					Bass
+				</ToolbarButton>
+				<ToolbarButton onClick={addRest} className="px-3 h-9">
+					Rest
+				</ToolbarButton>
 			</div>
 		</div>
 	);
diff --git a/apps/react/src/components/notation/SheetMusicSettings.tsx b/apps/react/src/components/notation/SheetMusicSettings.tsx
new file mode 100644
index 00000000..b7950284
--- /dev/null
+++ b/apps/react/src/components/notation/SheetMusicSettings.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Select, NumberInput } from '../inputs';
+import { majorKeys } from 'MemoryFlashCore/src/lib/notes';
+import { SettingsSection } from './SettingsSection';
+import { ScoreToolbar } from './ScoreToolbar';
+
+interface SheetMusicSettingsProps {
+	keySig: string;
+	bars: number;
+	onChange: (changes: Partial<{ keySig: string; bars: number }>) => void;
+}
+
+export const SheetMusicSettings: React.FC<SheetMusicSettingsProps> = ({
+	keySig,
+	bars,
+	onChange,
+}) => (
+	<SettingsSection title="Sheet Music Settings">
+		<div className="space-y-4">
+			<div className="flex gap-4">
+				<label className="flex items-center gap-2">
+					Key
+					<Select value={keySig} onChange={(e) => onChange({ keySig: e.target.value })}>
+						{majorKeys.map((k) => (
+							<option key={k}>{k}</option>
+						))}
+					</Select>
+				</label>
+				<label className="flex items-center gap-2">
+					Bars
+					<NumberInput
+						className="w-16"
+						min={1}
+						value={bars}
+						onChange={(e) => onChange({ bars: parseInt(e.target.value, 10) || 1 })}
+					/>
+				</label>
+			</div>
+			<ScoreToolbar />
+		</div>
+	</SettingsSection>
+);
diff --git a/apps/react/src/components/notation/index.ts b/apps/react/src/components/notation/index.ts
index 76e117af..ccbaef85 100644
--- a/apps/react/src/components/notation/index.ts
+++ b/apps/react/src/components/notation/index.ts
@@ -1,8 +1,7 @@
 export * from './NotationSettings';
-export * from './NoteSettings';
+export * from './SheetMusicSettings';
 export * from './RangeSettings';
 export * from './CardTypeOptions';
 export * from './SettingsSection';
 export * from './NotationPreviewList';
 export * from './defaultSettings';
-export * from './BarsSetting';
diff --git a/apps/react/src/components/ui/buttonStyles.ts b/apps/react/src/components/ui/buttonStyles.ts
index 37bd7d27..63e8c1cf 100644
--- a/apps/react/src/components/ui/buttonStyles.ts
+++ b/apps/react/src/components/ui/buttonStyles.ts
@@ -5,7 +5,7 @@ export const buttonBaseClasses =
 
 export const variantEnabledStyles: Record<ButtonVariant, string> = {
 	primary:
-		'bg-accent text-white hover:bg-accent-hover dark:bg-[#e8e8ea] dark:text-[#1a1a1a] dark:hover:bg-[#d4d4d6] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+		'bg-accent text-white hover:bg-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
 	secondary:
 		'bg-gray-100 text-lm-fg hover:bg-gray-200 dark:bg-dm-elevated dark:text-dm-fg dark:hover:bg-white/15',
 	outline:
diff --git a/apps/react/src/screens/LoginScreen.tsx b/apps/react/src/screens/LoginScreen.tsx
index ee557f05..e68330e8 100644
--- a/apps/react/src/screens/LoginScreen.tsx
+++ b/apps/react/src/screens/LoginScreen.tsx
@@ -61,9 +61,9 @@ export const LoginScreen: React.FunctionComponent<{}> = ({}) => {
 					</a>
 				</div>
 			</div>
-			<div className="text-red-600 ">{error}</div>
+			{error && <div className="text-red-600 ">{error}</div>}
 
-			<Button type="submit" loading={isLoading}>
+			<Button type="submit" loading={isLoading} className="w-full">
 				Login
 			</Button>
 			<p className="mt-6 text-center text-sm text-muted">
diff --git a/apps/react/src/screens/SignUpScreen.tsx b/apps/react/src/screens/SignUpScreen.tsx
index 422e3554..0c7ca4b4 100644
--- a/apps/react/src/screens/SignUpScreen.tsx
+++ b/apps/react/src/screens/SignUpScreen.tsx
@@ -70,9 +70,9 @@ export const SignUpScreen: React.FunctionComponent<{}> = ({}) => {
 				</div>
 			</div>
 
-			<div className="text-red-600">{error}</div>
+			{error && <div className="text-red-600">{error}</div>}
 
-			<Button type="submit" loading={isLoading}>
+			<Button type="submit" loading={isLoading} className="w-full">
 				Sign Up
 			</Button>
 			<p className="mt-6 text-center text-sm text-muted">
diff --git a/apps/react/src/screens/StreakActivityScreen/StreakActivityScreen.tsx b/apps/react/src/screens/StreakActivityScreen/StreakActivityScreen.tsx
new file mode 100644
index 00000000..270eac93
--- /dev/null
+++ b/apps/react/src/screens/StreakActivityScreen/StreakActivityScreen.tsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from 'react';
+import { Layout, PageTitle } from '../../components';
+import { useAppDispatch, useAppSelector } from 'MemoryFlashCore/src/redux/store';
+import { getStreakAttempts } from 'MemoryFlashCore/src/redux/actions/get-streak-attempts-action';
+import {
+	streakActivitySelector,
+	StreakDayGroup,
+} from 'MemoryFlashCore/src/redux/selectors/streakActivitySelector';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+
+const DayRow: React.FC<{ group: StreakDayGroup }> = ({ group }) => {
+	const [expanded, setExpanded] = useState(false);
+
+	return (
+		<div className="rounded-xl border border-default bg-surface shadow-sm dark:shadow-none">
+			<button
+				onClick={() => setExpanded(!expanded)}
+				className="flex w-full items-center justify-between p-4 text-left"
+			>
+				<div className="flex items-center gap-3">
+					{expanded ? (
+						<ChevronDownIcon className="h-5 w-5 text-muted" />
+					) : (
+						<ChevronRightIcon className="h-5 w-5 text-muted" />
+					)}
+					<span className="font-medium text-fg">{group.formattedDay}</span>
+				</div>
+				<span className="text-sm text-muted">
+					{group.attempts.length} attempt{group.attempts.length !== 1 && 's'}
+				</span>
+			</button>
+			{expanded && (
+				<div className="border-t border-default px-4 pb-4">
+					<div className="mt-3 flex flex-col gap-2">
+						{group.attempts.map((attempt) => (
+							<div
+								key={attempt._id}
+								className="flex items-center justify-between rounded-lg bg-app px-3 py-2 text-sm"
+							>
+								<span className="text-muted">{attempt.formattedTime}</span>
+								<div className="flex items-center gap-3">
+									<span
+										className={
+											attempt.correct
+												? 'text-green-600 dark:text-green-400'
+												: 'text-red-600 dark:text-red-400'
+										}
+									>
+										{attempt.correct ? 'Correct' : 'Incorrect'}
+									</span>
+									<span className="text-muted">
+										{attempt.timeTaken.toFixed(1)}s
+									</span>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
+const UserStatsDisplay: React.FC = () => {
+	const userStats = useAppSelector((state) => state.userStats.userStats);
+
+	if (!userStats) {
+		return (
+			<div className="rounded-xl border border-default bg-surface p-4 shadow-sm dark:shadow-none">
+				<span className="text-muted">No user stats available</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className="rounded-xl border border-default bg-surface p-4 shadow-sm dark:shadow-none">
+			<h3 className="mb-3 font-semibold text-fg">User Stats</h3>
+			<div className="grid grid-cols-2 gap-2 text-sm">
+				<span className="text-muted">Current Streak:</span>
+				<span className="font-medium text-fg">{userStats.currentStreak} days</span>
+				<span className="text-muted">Longest Streak:</span>
+				<span className="font-medium text-fg">{userStats.longestStreak} days</span>
+				<span className="text-muted">Last Activity:</span>
+				<span className="font-medium text-fg">{userStats.lastActivityDate ?? 'None'}</span>
+				<span className="text-muted">Timezone:</span>
+				<span className="font-medium text-fg">{userStats.timezone}</span>
+			</div>
+		</div>
+	);
+};
+
+export const StreakActivityScreen: React.FC = () => {
+	const dispatch = useAppDispatch();
+	const streakDays = useAppSelector(streakActivitySelector);
+
+	useEffect(() => {
+		dispatch(getStreakAttempts());
+	}, [dispatch]);
+
+	return (
+		<Layout>
+			<div className="flex flex-col gap-6">
+				<PageTitle>Streak Activity</PageTitle>
+				<UserStatsDisplay />
+				<div>
+					<h3 className="mb-3 font-semibold text-fg">
+						Attempts by Day ({streakDays.length} days)
+					</h3>
+					{streakDays.length === 0 ? (
+						<p className="text-muted">No attempts recorded yet.</p>
+					) : (
+						<div className="flex flex-col gap-3">
+							{streakDays.map((group) => (
+								<DayRow key={group.day} group={group} />
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		</Layout>
+	);
+};
diff --git a/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-edit.png b/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-edit.png
index 89c4ddb9..4e40e352 100644
Binary files a/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-edit.png and b/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-edit.png differ
diff --git a/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-to-study-list.png b/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-to-study-list.png
index 931f04a4..861bb70b 100644
Binary files a/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-to-study-list.png and b/apps/react/tests/custom-deck-chord-memory-to-study.spec.ts-snapshots/custom-deck-chord-memory-to-study-list.png differ
diff --git a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts
index f53b2f7b..3297738a 100644
--- a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts
+++ b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts
@@ -24,7 +24,7 @@ test('Study cross-clef tied chord', async ({ page, clickButton }) => {
 	const deckId = await createDeck(page, courseId, 'My Deck');
 	await page.waitForURL(new RegExp(`/study/${deckId}/notation`));
 	await page.getByLabel('Key').selectOption('E');
-	await page.getByLabel('Count').fill('1');
+	await page.getByLabel('Bars').fill('1');
 
 	await clickButton('h');
 	await clickButton('+8');
diff --git a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-1.png b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-1.png
index 6557a044..ad5971e1 100644
Binary files a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-1.png and b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-1.png differ
diff --git a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-2.png b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-2.png
index 28dd5ba5..18363879 100644
Binary files a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-2.png and b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-bass-notation-input-2.png differ
diff --git a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-1.png b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-1.png
index 0e0043e0..a33db412 100644
Binary files a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-1.png and b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-1.png differ
diff --git a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-2.png b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-2.png
index ead45802..78d4f37b 100644
Binary files a/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-2.png and b/apps/react/tests/custom-deck-notation-cross-clef-tie-to-study.spec.ts-snapshots/custom-deck-notation-cross-clef-tie-treble-notation-input-2.png differ
diff --git a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-list.png b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-list.png
index 434babc5..aa641e39 100644
Binary files a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-list.png and b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-list.png differ
diff --git a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-notation-input-edit.png b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-notation-input-edit.png
index e270ff50..8773562a 100644
Binary files a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-notation-input-edit.png and b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-notation-to-study-notation-input-edit.png differ
diff --git a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-text-to-study-midi-step-3.png b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-text-to-study-midi-step-3.png
index b445cf0a..ee8d5fdf 100644
Binary files a/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-text-to-study-midi-step-3.png and b/apps/react/tests/custom-deck-notation-to-study.spec.ts-snapshots/custom-deck-text-to-study-midi-step-3.png differ
diff --git a/apps/react/tests/custom-deck-text-to-study-cross-clef.spec.ts-snapshots/custom-deck-text-to-study-cross-clef-notation.png b/apps/react/tests/custom-deck-text-to-study-cross-clef.spec.ts-snapshots/custom-deck-text-to-study-cross-clef-notation.png
index d2bc1041..5ba7437e 100644
Binary files a/apps/react/tests/custom-deck-text-to-study-cross-clef.spec.ts-snapshots/custom-deck-text-to-study-cross-clef-notation.png and b/apps/react/tests/custom-deck-text-to-study-cross-clef.spec.ts-snapshots/custom-deck-text-to-study-cross-clef-notation.png differ
diff --git a/apps/react/tests/notation-input-e-major-g-sharp.spec.ts-snapshots/notation-input-e-major-g-sharp.png b/apps/react/tests/notation-input-e-major-g-sharp.spec.ts-snapshots/notation-input-e-major-g-sharp.png
index e991d685..8c4d3f7a 100644
Binary files a/apps/react/tests/notation-input-e-major-g-sharp.spec.ts-snapshots/notation-input-e-major-g-sharp.png and b/apps/react/tests/notation-input-e-major-g-sharp.spec.ts-snapshots/notation-input-e-major-g-sharp.png differ
diff --git a/apps/react/tests/notation-input-screen.spec.ts-snapshots/notation-input-screen.png b/apps/react/tests/notation-input-screen.spec.ts-snapshots/notation-input-screen.png
index e86d4a5d..805b383e 100644
Binary files a/apps/react/tests/notation-input-screen.spec.ts-snapshots/notation-input-screen.png and b/apps/react/tests/notation-input-screen.spec.ts-snapshots/notation-input-screen.png differ
diff --git a/apps/react/tests/notation-input-text-prompt.spec.ts-snapshots/notation-input-text-prompt.png b/apps/react/tests/notation-input-text-prompt.spec.ts-snapshots/notation-input-text-prompt.png
index 9b5a7fba..0293e82d 100644
Binary files a/apps/react/tests/notation-input-text-prompt.spec.ts-snapshots/notation-input-text-prompt.png and b/apps/react/tests/notation-input-text-prompt.spec.ts-snapshots/notation-input-text-prompt.png differ
diff --git a/apps/server/src/routes/attemptsRoute.ts b/apps/server/src/routes/attemptsRoute.ts
index 1bd8267f..50e6a192 100644
--- a/apps/server/src/routes/attemptsRoute.ts
+++ b/apps/server/src/routes/attemptsRoute.ts
@@ -2,9 +2,30 @@ import { Router } from 'express';
 import { isAuthenticated } from '../middleware';
 import Attempt from '../models/Attempt';
 import { zAttempt } from 'MemoryFlashCore/src/types/Attempt';
+import { User } from 'MemoryFlashCore/src/types/User';
+import { getOrCreateUserStats } from '../services/userStatsService';
+import { oneDayInMillis } from 'MemoryFlashCore/src/redux/util/dates';
 
 const router = Router();
 
+router.get('/streak', isAuthenticated, async (req, res, next) => {
+	try {
+		const userId = (req.user as User)._id.toString();
+		const stats = await getOrCreateUserStats(userId);
+		const streakDays = Math.max(stats.currentStreak, 1);
+		const startDate = new Date(Date.now() - streakDays * oneDayInMillis);
+		const attempts = await Attempt.find({
+			userId,
+			attemptedAt: { $gte: startDate },
+		})
+			.sort({ attemptedAt: -1 })
+			.lean();
+		res.json(attempts);
+	} catch (error) {
+		next(error);
+	}
+});
+
 router.post('/', isAuthenticated, async (req, res, next) => {
 	try {
 		const result = zAttempt.safeParse(req.body);
diff --git a/packages/MemoryFlashCore/src/redux/actions/get-streak-attempts-action.ts b/packages/MemoryFlashCore/src/redux/actions/get-streak-attempts-action.ts
new file mode 100644
index 00000000..e59c7e8f
--- /dev/null
+++ b/packages/MemoryFlashCore/src/redux/actions/get-streak-attempts-action.ts
@@ -0,0 +1,13 @@
+import { attemptsActions } from '../slices/attemptsSlice';
+import { AppThunk } from '../store';
+import { networkCallWithReduxState } from '../util/networkStateHelper';
+
+export const getStreakAttempts =
+	(): AppThunk =>
+	async (dispatch, getState, { api }) => {
+		if (getState().network._['getStreakAttempts']?.isLoading) return;
+		await networkCallWithReduxState(dispatch, 'getStreakAttempts', async () => {
+			const res = await api.get('/attempts/streak');
+			dispatch(attemptsActions.upsert(res.data));
+		});
+	};
diff --git a/packages/MemoryFlashCore/src/redux/selectors/streakActivitySelector.ts b/packages/MemoryFlashCore/src/redux/selectors/streakActivitySelector.ts
new file mode 100644
index 00000000..2e6f7162
--- /dev/null
+++ b/packages/MemoryFlashCore/src/redux/selectors/streakActivitySelector.ts
@@ -0,0 +1,71 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { ReduxState } from '../store';
+import { Attempt } from '../../types/Attempt';
+import { getActivityDayKey } from '../util/activityDay';
+
+export interface StreakDayGroup {
+	day: string;
+	formattedDay: string;
+	attempts: StreakAttempt[];
+}
+
+export interface StreakAttempt {
+	_id: string;
+	formattedTime: string;
+	correct: boolean;
+	timeTaken: number;
+}
+
+const formatDay = (day: string) => {
+	const date = new Date(day + 'T12:00:00Z');
+	return date.toLocaleDateString(undefined, {
+		weekday: 'short',
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+	});
+};
+
+const formatTime = (attemptedAt: string) =>
+	new Date(attemptedAt).toLocaleTimeString(undefined, {
+		hour: 'numeric',
+		minute: '2-digit',
+	});
+
+const selectAttempts = (state: ReduxState) => state.attempts.entities;
+const selectUserStats = (state: ReduxState) => state.userStats.userStats;
+
+export const streakActivitySelector = createSelector(
+	[selectAttempts, selectUserStats],
+	(attemptsEntities, userStats): StreakDayGroup[] => {
+		const timezone = userStats?.timezone;
+		const attempts = Object.values(attemptsEntities).filter(
+			(a): a is Attempt => a !== undefined,
+		);
+
+		const grouped: Record<string, Attempt[]> = {};
+		attempts.forEach((attempt) => {
+			const day = getActivityDayKey(new Date(attempt.attemptedAt), timezone);
+			if (!grouped[day]) grouped[day] = [];
+			grouped[day].push(attempt);
+		});
+
+		return Object.entries(grouped)
+			.map(([day, dayAttempts]) => ({
+				day,
+				formattedDay: formatDay(day),
+				attempts: dayAttempts
+					.sort(
+						(a, b) =>
+							new Date(b.attemptedAt).getTime() - new Date(a.attemptedAt).getTime(),
+					)
+					.map((attempt) => ({
+						_id: attempt._id,
+						formattedTime: formatTime(attempt.attemptedAt),
+						correct: attempt.correct,
+						timeTaken: attempt.timeTaken,
+					})),
+			}))
+			.sort((a, b) => b.day.localeCompare(a.day));
+	},
+);