feat(note_editor): Refactor note editor UI with improved layout and styling

lib/features/notes/views/note_editor_page.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io' show Platform;
+import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -15,6 +16,7 @@ import '../../../core/widgets/error_boundary.dart';
 import '../../../shared/theme/theme_extensions.dart';
 import '../../../shared/utils/ui_utils.dart';
 import '../../../shared/widgets/improved_loading_states.dart';
+import '../../../shared/widgets/middle_ellipsis_text.dart';
 import '../../../shared/widgets/themed_dialogs.dart';
 import '../../chat/services/voice_input_service.dart';
 import '../providers/notes_providers.dart';
@@ -492,204 +494,392 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
       },
       child: ErrorBoundary(
         child: Scaffold(
-          backgroundColor: sidebarTheme.background,
+          backgroundColor: context.conduitTheme.surfaceBackground,
-          body: SafeArea(
+          extendBodyBehindAppBar: true,
-            child: Stack(
+          appBar: _buildAppBar(context),
-              children: [
+          body: Stack(
-                Column(
+            children: [
-                  children: [
+              // Main content - scrolls behind floating elements
-                    _buildHeader(context),
+              Positioned.fill(
-                    if (!_isLoading && _note != null)
+                child: _buildMainContent(context),
-                      _buildMetadataBar(context),
+              ),
-                    Expanded(child: _buildBody(context)),
+              // Floating action buttons
-                  ],
+              if (!_isLoading && _note != null)
+                Positioned(
+                  left: Spacing.md,
+                  right: Spacing.md,
+                  bottom: Spacing.md + MediaQuery.of(context).padding.bottom,
+                  child: _buildFloatingActionsRow(context),
                 ),
-                // Floating action buttons
+            ],
-                if (!_isLoading && _note != null)
-                  _buildFloatingActions(context),
-              ],
-            ),
           ),
         ),
       ),
     );
   }
 
-  Widget _buildHeader(BuildContext context) {
+  PreferredSizeWidget _buildAppBar(BuildContext context) {
-    final theme = context.conduitTheme;
+    final theme = Theme.of(context);
-    final sidebarTheme = context.sidebarTheme;
+    final conduitTheme = context.conduitTheme;
     final l10n = AppLocalizations.of(context)!;
 
-    return Container(
+    return PreferredSize(
-      padding: const EdgeInsets.fromLTRB(
+      preferredSize: const Size.fromHeight(kToolbarHeight + 40),
-        Spacing.xs,
+      child: Container(
-        Spacing.sm,
+        decoration: BoxDecoration(
-        Spacing.sm,
+          gradient: LinearGradient(
-        Spacing.xs,
+            begin: Alignment.topCenter,
-      ),
+            end: Alignment.bottomCenter,
-      color: sidebarTheme.background,
+            stops: const [0.0, 0.4, 1.0],
-      child: Row(
+            colors: [
-        children: [
+              theme.scaffoldBackgroundColor,
-          // Back button
+              theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
-          IconButton(
+              theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
-            icon: Icon(
-              UiUtils.platformIcon(
-                ios: CupertinoIcons.back,
-                android: Icons.arrow_back_rounded,
-              ),
-              color: theme.iconPrimary,
-            ),
-            onPressed: () async {
-              final navigator = Navigator.of(context);
-              await _onWillPop();
-              if (!mounted) return;
-              navigator.pop();
-            },
-            tooltip: l10n.back,
-          ),
-          const SizedBox(width: Spacing.xs),
-
-          // Title input
-          Expanded(
-            child: TextField(
-              controller: _titleController,
-              focusNode: _titleFocusNode,
-              enabled: !_isGeneratingTitle,
-              style: AppTypography.headlineSmallStyle.copyWith(
-                color: theme.textPrimary,
-                fontWeight: FontWeight.w600,
-              ),
-              decoration: InputDecoration(
-                hintText: _isGeneratingTitle
-                    ? l10n.generatingTitle
-                    : l10n.noteTitle,
-                hintStyle: AppTypography.headlineSmallStyle.copyWith(
-                  color: theme.textSecondary.withValues(alpha: 0.4),
-                  fontWeight: FontWeight.w600,
-                ),
-                filled: false,
-                border: InputBorder.none,
-                enabledBorder: InputBorder.none,
-                focusedBorder: InputBorder.none,
-                disabledBorder: InputBorder.none,
-                contentPadding: EdgeInsets.zero,
-                isDense: true,
-              ),
-              textCapitalization: TextCapitalization.sentences,
-              textInputAction: TextInputAction.next,
-              onSubmitted: (_) => _contentFocusNode.requestFocus(),
-            ),
-          ),
-
-          // Generate title button - aligned with other header icons
-          AnimatedOpacity(
-            opacity: _titleFocusNode.hasFocus && !_isGeneratingTitle
-                ? 1.0
-                : 0.0,
-            duration: const Duration(milliseconds: 150),
-            child: IgnorePointer(
-              ignoring: !_titleFocusNode.hasFocus || _isGeneratingTitle,
-              child: IconButton(
-                icon: Icon(
-                  Platform.isIOS
-                      ? CupertinoIcons.sparkles
-                      : Icons.auto_awesome_rounded,
-                  color: theme.buttonPrimary,
-                ),
-                onPressed: _generateTitle,
-                tooltip: l10n.generateTitle,
-              ),
-            ),
-          ),
-
-          // Save indicator
-          if (_isSaving)
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
-              child: SizedBox(
-                width: IconSize.sm,
-                height: IconSize.sm,
-                child: CircularProgressIndicator(
-                  strokeWidth: BorderWidth.medium,
-                  valueColor: AlwaysStoppedAnimation(theme.loadingIndicator),
-                ),
-              ),
-            )
-          else if (_hasChanges)
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
-              child: Container(
-                width: 8,
-                height: 8,
-                decoration: BoxDecoration(
-                  color: theme.warning,
-                  shape: BoxShape.circle,
-                ),
-              ),
-            ),
-
-          // Menu
-          PopupMenuButton<String>(
-            icon: Icon(
-              Platform.isIOS
-                  ? CupertinoIcons.ellipsis
-                  : Icons.more_vert_rounded,
-              color: theme.iconPrimary,
-            ),
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(AppBorderRadius.md),
-            ),
-            onSelected: (value) {
-              switch (value) {
-                case 'copy':
-                  _copyToClipboard();
-                case 'delete':
-                  _deleteNote();
-              }
-            },
-            itemBuilder: (context) => [
-              PopupMenuItem(
-                value: 'copy',
-                child: Row(
-                  children: [
-                    Icon(
-                      Platform.isIOS
-                          ? CupertinoIcons.doc_on_clipboard
-                          : Icons.copy_rounded,
-                      color: theme.iconPrimary,
-                      size: IconSize.md,
-                    ),
-                    const SizedBox(width: Spacing.sm),
-                    Text(l10n.copy),
-                  ],
-                ),
-              ),
-              PopupMenuItem(
-                value: 'delete',
-                child: Row(
-                  children: [
-                    Icon(
-                      Platform.isIOS
-                          ? CupertinoIcons.delete
-                          : Icons.delete_rounded,
-                      color: theme.error,
-                      size: IconSize.md,
-                    ),
-                    const SizedBox(width: Spacing.sm),
-                    Text(l10n.delete, style: TextStyle(color: theme.error)),
-                  ],
-                ),
-              ),
             ],
           ),
-        ],
+        ),
+        child: SafeArea(
+          bottom: false,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // App bar row with back button, title, and menu
+              SizedBox(
+                height: kToolbarHeight,
+                child: Row(
+                  children: [
+                    // Leading (back button)
+                    Padding(
+                      padding: const EdgeInsets.only(left: Spacing.inputPadding),
+                      child: Center(
+                        child: GestureDetector(
+                          onTap: () async {
+                            final navigator = Navigator.of(context);
+                            await _onWillPop();
+                            if (!mounted) return;
+                            navigator.pop();
+                          },
+                          child: _buildAppBarPill(
+                            context,
+                            Icon(
+                              UiUtils.platformIcon(
+                                ios: CupertinoIcons.back,
+                                android: Icons.arrow_back,
+                              ),
+                              color: conduitTheme.textPrimary,
+                              size: IconSize.appBar,
+                            ),
+                            isCircular: true,
+                          ),
+                        ),
+                      ),
+                    ),
+                    // Title centered
+                    Expanded(
+                      child: Center(
+                        child: _buildAppBarPill(
+        context,
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: Spacing.sm,
+            vertical: Spacing.xs,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Flexible(
+                child: _isGeneratingTitle
+                    ? Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          SizedBox(
+                            width: IconSize.sm,
+                            height: IconSize.sm,
+                            child: CircularProgressIndicator(
+                              strokeWidth: BorderWidth.medium,
+                              valueColor: AlwaysStoppedAnimation(
+                                conduitTheme.loadingIndicator,
+                              ),
+                            ),
+                          ),
+                          const SizedBox(width: Spacing.sm),
+                          Text(
+                            l10n.generatingTitle,
+                            style: AppTypography.bodyMediumStyle.copyWith(
+                              color: conduitTheme.textSecondary,
+                            ),
+                          ),
+                        ],
+                      )
+                    : ConstrainedBox(
+                        constraints: BoxConstraints(
+                          maxWidth: MediaQuery.of(context).size.width * 0.5,
+                        ),
+                        child: Stack(
+                          alignment: Alignment.center,
+                          children: [
+                            // Hidden TextField always in tree for focus
+                            Opacity(
+                              opacity: _titleFocusNode.hasFocus ? 1.0 : 0.0,
+                              child: IntrinsicWidth(
+                                child: TextField(
+                                  controller: _titleController,
+                                  focusNode: _titleFocusNode,
+                                  enabled: !_isGeneratingTitle,
+                                  style: AppTypography.headlineSmallStyle
+                                      .copyWith(
+                                        color: conduitTheme.textPrimary,
+                                        fontWeight: FontWeight.w600,
+                                      ),
+                                  decoration: InputDecoration(
+                                    hintText: l10n.untitled,
+                                    hintStyle: AppTypography.headlineSmallStyle
+                                        .copyWith(
+                                          color: conduitTheme.textSecondary
+                                              .withValues(alpha: 0.6),
+                                          fontWeight: FontWeight.w600,
+                                        ),
+                                    border: InputBorder.none,
+                                    enabledBorder: InputBorder.none,
+                                    focusedBorder: InputBorder.none,
+                                    contentPadding: EdgeInsets.zero,
+                                    isDense: true,
+                                  ),
+                                  textAlign: TextAlign.center,
+                                  textCapitalization:
+                                      TextCapitalization.sentences,
+                                  textInputAction: TextInputAction.done,
+                                  onSubmitted: (_) =>
+                                      _contentFocusNode.requestFocus(),
+                                ),
+                              ),
+                            ),
+                            // Visible text when not focused
+                            if (!_titleFocusNode.hasFocus)
+                              GestureDetector(
+                                onTap: () => _titleFocusNode.requestFocus(),
+                                child: MiddleEllipsisText(
+                                  _titleController.text.isEmpty
+                                      ? l10n.untitled
+                                      : _titleController.text,
+                                  style: AppTypography.headlineSmallStyle
+                                      .copyWith(
+                                        color: _titleController.text.isEmpty
+                                            ? conduitTheme.textSecondary
+                                                .withValues(alpha: 0.6)
+                                            : conduitTheme.textPrimary,
+                                        fontWeight: FontWeight.w600,
+                                      ),
+                                ),
+                              ),
+                          ],
+                        ),
+                      ),
+              ),
+              if (_hasChanges && !_isSaving)
+                Padding(
+                  padding: const EdgeInsets.only(left: Spacing.sm),
+                  child: Container(
+                    width: 8,
+                    height: 8,
+                    decoration: BoxDecoration(
+                      color: conduitTheme.warning,
+                      shape: BoxShape.circle,
+                    ),
+                  ),
+                ),
+              if (_isSaving)
+                Padding(
+                  padding: const EdgeInsets.only(left: Spacing.sm),
+                  child: SizedBox(
+                    width: IconSize.sm,
+                    height: IconSize.sm,
+                    child: CircularProgressIndicator(
+                      strokeWidth: BorderWidth.medium,
+                      valueColor: AlwaysStoppedAnimation(
+                        conduitTheme.loadingIndicator,
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+                        ),
+                      ),
+                    ),
+                    // Actions (more menu)
+                    Padding(
+                      padding: const EdgeInsets.only(right: Spacing.inputPadding),
+                      child: Center(
+                        child: PopupMenuButton<String>(
+                          tooltip: '',
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(AppBorderRadius.md),
+                          ),
+                          onSelected: (value) {
+                            switch (value) {
+                              case 'generate_title':
+                                _generateTitle();
+                              case 'copy':
+                                _copyToClipboard();
+                              case 'delete':
+                                _deleteNote();
+                            }
+                          },
+                          itemBuilder: (context) => [
+                            PopupMenuItem(
+                              value: 'generate_title',
+                              child: Row(
+                                children: [
+                                  Icon(
+                                    Platform.isIOS
+                                        ? CupertinoIcons.sparkles
+                                        : Icons.auto_awesome_rounded,
+                                    color: conduitTheme.buttonPrimary,
+                                    size: IconSize.md,
+                                  ),
+                                  const SizedBox(width: Spacing.sm),
+                                  Text(l10n.generateTitle),
+                                ],
+                              ),
+                            ),
+                            PopupMenuItem(
+                              value: 'copy',
+                              child: Row(
+                                children: [
+                                  Icon(
+                                    Platform.isIOS
+                                        ? CupertinoIcons.doc_on_clipboard
+                                        : Icons.copy_rounded,
+                                    color: conduitTheme.iconPrimary,
+                                    size: IconSize.md,
+                                  ),
+                                  const SizedBox(width: Spacing.sm),
+                                  Text(l10n.copy),
+                                ],
+                              ),
+                            ),
+                            PopupMenuItem(
+                              value: 'delete',
+                              child: Row(
+                                children: [
+                                  Icon(
+                                    Platform.isIOS
+                                        ? CupertinoIcons.delete
+                                        : Icons.delete_rounded,
+                                    color: conduitTheme.error,
+                                    size: IconSize.md,
+                                  ),
+                                  const SizedBox(width: Spacing.sm),
+                                  Text(
+                                    l10n.delete,
+                                    style: TextStyle(color: conduitTheme.error),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                          child: _buildAppBarPill(
+                            context,
+                            Icon(
+                              Platform.isIOS
+                                  ? CupertinoIcons.ellipsis
+                                  : Icons.more_vert_rounded,
+                              color: conduitTheme.textPrimary,
+                              size: IconSize.appBar,
+                            ),
+                            isCircular: true,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              // Metadata stats row
+              if (!_isLoading && _note != null)
+                Padding(
+                  padding: const EdgeInsets.only(bottom: Spacing.xs),
+                  child: _buildFloatingMetadataBar(context),
+                ),
+            ],
+          ),
+        ),
       ),
     );
   }
 
-  Widget _buildMetadataBar(BuildContext context) {
+  Widget _buildAppBarPill(
-    final theme = context.conduitTheme;
+    BuildContext context,
+    Widget child, {
+    bool isCircular = false,
+  }) {
+    final theme = Theme.of(context);
+    final isDark = theme.brightness == Brightness.dark;
+
+    final backgroundColor = isDark
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
+
+    final borderColor = context.conduitTheme.cardBorder.withValues(
+      alpha: isDark ? 0.65 : 0.55,
+    );
+
+    final borderRadius = isCircular
+        ? BorderRadius.circular(100)
+        : BorderRadius.circular(AppBorderRadius.pill);
+
+    if (isCircular) {
+      return SizedBox(
+        width: 44,
+        height: 44,
+        child: ClipRRect(
+          borderRadius: borderRadius,
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+            child: Container(
+              decoration: BoxDecoration(
+                color: backgroundColor.withValues(alpha: 0.85),
+                borderRadius: borderRadius,
+                border: Border.all(color: borderColor, width: BorderWidth.thin),
+              ),
+              child: Center(child: child),
+            ),
+          ),
+        ),
+      );
+    }
+
+    return ClipRRect(
+      borderRadius: borderRadius,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+        child: Container(
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: borderRadius,
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
+          ),
+          child: child,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFloatingMetadataBar(BuildContext context) {
+    final theme = Theme.of(context);
+    final conduitTheme = context.conduitTheme;
     final l10n = AppLocalizations.of(context)!;
+    final isDark = theme.brightness == Brightness.dark;
+
+    final backgroundColor = isDark
+        ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
+        : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
+
+    final borderColor = conduitTheme.cardBorder.withValues(
+      alpha: isDark ? 0.65 : 0.55,
+    );
 
     final dateFormat = DateFormat.MMMd();
     final timeFormat = DateFormat.jm();
@@ -697,42 +887,51 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
         ? '${dateFormat.format(_note!.createdDateTime)} ${timeFormat.format(_note!.createdDateTime)}'
         : '';
 
-    return Padding(
+    return ClipRRect(
-      padding: const EdgeInsets.symmetric(
+      borderRadius: BorderRadius.circular(AppBorderRadius.pill),
-        horizontal: Spacing.md,
+      child: BackdropFilter(
-        vertical: Spacing.xs,
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-      ),
+        child: Container(
-      child: SingleChildScrollView(
+          padding: const EdgeInsets.symmetric(
-        scrollDirection: Axis.horizontal,
+            horizontal: Spacing.md,
-        child: Row(
+            vertical: Spacing.xs,
-          children: [
+          ),
-            // Created date
+          decoration: BoxDecoration(
-            _buildMetadataChip(
+            color: backgroundColor.withValues(alpha: 0.85),
-              context,
+            borderRadius: BorderRadius.circular(AppBorderRadius.pill),
-              icon: Platform.isIOS
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
-                  ? CupertinoIcons.calendar
+          ),
-                  : Icons.calendar_today_rounded,
+          child: Row(
-              label: createdDate,
+            mainAxisSize: MainAxisSize.min,
-            ),
+            children: [
-            _buildMetadataSeparator(theme),
+              // Created date
-            // Word count
+              _buildMetadataChip(
-            _buildMetadataChip(
+                context,
-              context,
+                icon: Platform.isIOS
-              icon: Platform.isIOS
+                    ? CupertinoIcons.calendar
-                  ? CupertinoIcons.doc_text
+                    : Icons.calendar_today_rounded,
-                  : Icons.article_rounded,
+                label: createdDate,
-              label: l10n.wordCount(_wordCount),
+              ),
-            ),
+              _buildMetadataSeparator(conduitTheme),
-            _buildMetadataSeparator(theme),
+              // Word count
-            // Character count
+              _buildMetadataChip(
-            _buildMetadataChip(
+                context,
-              context,
+                icon: Platform.isIOS
-              icon: Platform.isIOS
+                    ? CupertinoIcons.doc_text
-                  ? CupertinoIcons.textformat_abc
+                    : Icons.article_rounded,
-                  : Icons.text_fields_rounded,
+                label: l10n.wordCount(_wordCount),
-              label: l10n.charCount(_charCount),
+              ),
-            ),
+              _buildMetadataSeparator(conduitTheme),
-          ],
+              // Character count
+              _buildMetadataChip(
+                context,
+                icon: Platform.isIOS
+                    ? CupertinoIcons.textformat_abc
+                    : Icons.text_fields_rounded,
+                label: l10n.charCount(_charCount),
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -783,6 +982,10 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
     );
   }
 
+  Widget _buildMainContent(BuildContext context) {
+    return _buildBody(context);
+  }
+
   Widget _buildBody(BuildContext context) {
     if (_isLoading) {
       return Center(
@@ -796,21 +999,25 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
       return _buildNotFoundState(context);
     }
 
+    // Title is now edited in the app bar pill, so just show the content editor
     return _buildEditor(context);
   }
 
   Widget _buildEditor(BuildContext context) {
     final theme = context.conduitTheme;
     final l10n = AppLocalizations.of(context)!;
+    final topPadding = MediaQuery.of(context).padding.top;
+    // App bar height: kToolbarHeight + metadata bar (~40)
+    final appBarHeight = kToolbarHeight + 40;
 
     return GestureDetector(
       onTap: () => _contentFocusNode.requestFocus(),
       behavior: HitTestBehavior.opaque,
       child: SingleChildScrollView(
         controller: _scrollController,
-        padding: const EdgeInsets.fromLTRB(
+        padding: EdgeInsets.fromLTRB(
           Spacing.inputPadding,
-          Spacing.md,
+          topPadding + appBarHeight + Spacing.sm, // Space for floating app bar
           Spacing.inputPadding,
           120, // Extra padding for floating buttons
         ),
@@ -843,46 +1050,39 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
     );
   }
 
-  Widget _buildFloatingActions(BuildContext context) {
+  Widget _buildFloatingActionsRow(BuildContext context) {
     final theme = context.conduitTheme;
     final l10n = AppLocalizations.of(context)!;
 
-    return Positioned(
+    return Row(
-      left: Spacing.md,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      right: Spacing.md,
+      children: [
-      bottom: Spacing.md,
+        // Dictation button
-      child: Row(
+        _buildFloatingButton(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          context,
-        children: [
+          icon: _isRecording
-          // Dictation button
+              ? (Platform.isIOS
-          _buildFloatingButton(
+                    ? CupertinoIcons.stop_fill
-            context,
+                    : Icons.stop_rounded)
-            icon: _isRecording
+              : (Platform.isIOS ? CupertinoIcons.mic_fill : Icons.mic_rounded),
-                ? (Platform.isIOS
+          color: _isRecording ? theme.error : null,
-                      ? CupertinoIcons.stop_fill
+          isLoading: false,
-                      : Icons.stop_rounded)
+          tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
-                : (Platform.isIOS
+          onPressed: _toggleDictation,
-                      ? CupertinoIcons.mic_fill
+        ),
-                      : Icons.mic_rounded),
-            color: _isRecording ? theme.error : null,
-            isLoading: false,
-            tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
-            onPressed: _toggleDictation,
-          ),
 
-          // AI button
+        // AI button
-          _buildFloatingButton(
+        _buildFloatingButton(
-            context,
+          context,
-            icon: Platform.isIOS
+          icon: Platform.isIOS
-                ? CupertinoIcons.sparkles
+              ? CupertinoIcons.sparkles
-                : Icons.auto_awesome_rounded,
+              : Icons.auto_awesome_rounded,
-            isLoading: _isEnhancing,
+          isLoading: _isEnhancing,
-            tooltip: l10n.enhanceWithAI,
+          tooltip: l10n.enhanceWithAI,
-            onPressed: _isEnhancing ? null : _enhanceContent,
+          onPressed: _isEnhancing ? null : _enhanceContent,
-            showMenu: true,
+          showMenu: true,
-          ),
+        ),
-        ],
+      ],
-      ),
     );
   }
 
@@ -895,34 +1095,52 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
     Color? color,
     bool showMenu = false,
   }) {
-    final theme = context.conduitTheme;
+    final theme = Theme.of(context);
-    final sidebarTheme = context.sidebarTheme;
+    final conduitTheme = context.conduitTheme;
     final l10n = AppLocalizations.of(context)!;
+    final isDark = theme.brightness == Brightness.dark;
 
-    final buttonChild = Container(
+    final backgroundColor = isDark
-      width: 52,
+        ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
-      height: 52,
+            .withValues(alpha: 0.85)
-      decoration: BoxDecoration(
+        : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!
-        color: theme.surfaceContainer,
+            .withValues(alpha: 0.85);
-        shape: BoxShape.circle,
+
-        border: Border.all(
+    final borderColor = conduitTheme.cardBorder.withValues(alpha: 0.55);
-          color: sidebarTheme.border.withValues(alpha: 0.2),
+
-          width: BorderWidth.thin,
+    final buttonChild = ClipRRect(
-        ),
+      borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
-        boxShadow: ConduitShadows.medium(context),
+      child: BackdropFilter(
-      ),
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-      child: isLoading
+        child: Container(
-          ? Center(
+          width: TouchTarget.button,
-              child: SizedBox(
+          height: TouchTarget.button,
-                width: IconSize.md,
+          decoration: BoxDecoration(
-                height: IconSize.md,
+            color: backgroundColor,
-                child: CircularProgressIndicator(
+            borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
-                  strokeWidth: BorderWidth.medium,
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
-                  valueColor: AlwaysStoppedAnimation(theme.loadingIndicator),
+            boxShadow: ConduitShadows.button(context),
+          ),
+          child: isLoading
+              ? Center(
+                  child: SizedBox(
+                    width: IconSize.md,
+                    height: IconSize.md,
+                    child: CircularProgressIndicator(
+                      strokeWidth: BorderWidth.medium,
+                      valueColor:
+                          AlwaysStoppedAnimation(conduitTheme.loadingIndicator),
+                    ),
+                  ),
+                )
+              : Icon(
+                  icon,
+                  color: color ??
+                      conduitTheme.iconPrimary.withValues(alpha: 0.9),
+                  size: IconSize.lg,
                 ),
-              ),
+        ),
-            )
+      ),
-          : Icon(icon, color: color ?? theme.iconPrimary, size: IconSize.lg),
     );
 
     if (showMenu) {
@@ -949,7 +1167,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
                   Platform.isIOS
                       ? CupertinoIcons.sparkles
                       : Icons.auto_fix_high_rounded,
-                  color: theme.buttonPrimary,
+                  color: conduitTheme.buttonPrimary,
                   size: IconSize.md,
                 ),
                 const SizedBox(width: Spacing.sm),
@@ -965,7 +1183,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
                   Platform.isIOS
                       ? CupertinoIcons.textformat
                       : Icons.title_rounded,
-                  color: theme.buttonPrimary,
+                  color: conduitTheme.buttonPrimary,
                   size: IconSize.md,
                 ),
                 const SizedBox(width: Spacing.sm),
@@ -984,7 +1202,9 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
         color: Colors.transparent,
         child: InkWell(
           onTap: onPressed,
-          customBorder: const CircleBorder(),
+          customBorder: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
+          ),
           child: buttonChild,
         ),
       ),

lib/features/notes/views/notes_list_page.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io' show Platform;
+import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -122,151 +123,273 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
       return Scaffold(backgroundColor: sidebarTheme.background);
     }
 
+    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    final l10n = AppLocalizations.of(context)!;
+
     return ErrorBoundary(
       child: Scaffold(
-        backgroundColor: sidebarTheme.background,
+        backgroundColor: context.conduitTheme.surfaceBackground,
-        body: SafeArea(
+        extendBodyBehindAppBar: true,
-          child: Column(
+        appBar: PreferredSize(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
+          preferredSize: const Size.fromHeight(kToolbarHeight + 64),
-            children: [
+          child: Container(
-              _buildHeader(context),
+            decoration: BoxDecoration(
-              _buildSearchField(context),
+              gradient: LinearGradient(
-              Expanded(child: _buildBody(context)),
+                begin: Alignment.topCenter,
-            ],
+                end: Alignment.bottomCenter,
+                stops: const [0.0, 0.4, 1.0],
+                colors: [
+                  Theme.of(context).scaffoldBackgroundColor,
+                  Theme.of(context).scaffoldBackgroundColor.withValues(
+                    alpha: 0.85,
+                  ),
+                  Theme.of(context).scaffoldBackgroundColor.withValues(
+                    alpha: 0.0,
+                  ),
+                ],
+              ),
+            ),
+            child: SafeArea(
+              bottom: false,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // App bar row with back button and title
+                  SizedBox(
+                    height: kToolbarHeight,
+                    child: Row(
+                      children: [
+                        // Leading (back button)
+                        if (canPop)
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              left: Spacing.inputPadding,
+                            ),
+                            child: Center(
+                              child: GestureDetector(
+                                onTap: () => Navigator.of(context).maybePop(),
+                                child: _buildAppBarPill(
+                                  context,
+                                  Icon(
+                                    UiUtils.platformIcon(
+                                      ios: CupertinoIcons.back,
+                                      android: Icons.arrow_back,
+                                    ),
+                                    color: context.conduitTheme.textPrimary,
+                                    size: IconSize.appBar,
+                                  ),
+                                  isCircular: true,
+                                ),
+                              ),
+                            ),
+                          )
+                        else
+                          const SizedBox(width: Spacing.inputPadding),
+                        // Title centered
+                        Expanded(
+                          child: Center(
+                            child: _buildAppBarPill(
+                              context,
+                              Padding(
+                                padding: const EdgeInsets.symmetric(
+                                  horizontal: Spacing.md,
+                                  vertical: Spacing.xs,
+                                ),
+                                child: Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    Icon(
+                                      Platform.isIOS
+                                          ? CupertinoIcons.doc_text_fill
+                                          : Icons.notes_rounded,
+                                      color: context.conduitTheme.textPrimary
+                                          .withValues(alpha: 0.7),
+                                      size: IconSize.md,
+                                    ),
+                                    const SizedBox(width: Spacing.sm),
+                                    Text(
+                                      l10n.notes,
+                                      style:
+                                          AppTypography.headlineSmallStyle
+                                              .copyWith(
+                                                color: context
+                                                    .conduitTheme
+                                                    .textPrimary,
+                                                fontWeight: FontWeight.w600,
+                                              ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                          ),
+                        ),
+                        // Trailing spacer to balance
+                        if (canPop)
+                          const SizedBox(
+                            width: 44 + Spacing.inputPadding,
+                          )
+                        else
+                          const SizedBox(width: Spacing.inputPadding),
+                      ],
+                    ),
+                  ),
+                  // Search bar directly below title
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(
+                      Spacing.inputPadding,
+                      Spacing.xs,
+                      Spacing.inputPadding,
+                      Spacing.sm,
+                    ),
+                    child: _buildFloatingSearchField(context),
+                  ),
+                ],
+              ),
+            ),
           ),
         ),
+        body: _buildBody(context),
         floatingActionButton: _buildFAB(context),
       ),
     );
   }
 
-  Widget _buildHeader(BuildContext context) {
+  Widget _buildAppBarPill(
-    final sidebarTheme = context.sidebarTheme;
+    BuildContext context,
-    final l10n = AppLocalizations.of(context)!;
+    Widget child, {
-    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    bool isCircular = false,
+  }) {
+    final theme = Theme.of(context);
+    final isDark = theme.brightness == Brightness.dark;
 
-    return Container(
+    final backgroundColor = isDark
-      padding: EdgeInsets.fromLTRB(
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
-        canPop ? Spacing.xs : Spacing.inputPadding,
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
-        Spacing.md,
+
-        Spacing.inputPadding,
+    final borderColor = context.conduitTheme.cardBorder.withValues(
-        Spacing.sm,
+      alpha: isDark ? 0.65 : 0.55,
-      ),
+    );
-      child: Row(
+
-        children: [
+    final borderRadius = isCircular
-          if (canPop) ...[
+        ? BorderRadius.circular(100)
-            IconButton(
+        : BorderRadius.circular(AppBorderRadius.pill);
-              icon: Icon(
+
-                UiUtils.platformIcon(
+    if (isCircular) {
-                  ios: CupertinoIcons.back,
+      return SizedBox(
-                  android: Icons.arrow_back,
+        width: 44,
-                ),
+        height: 44,
-                color: sidebarTheme.foreground.withValues(alpha: 0.8),
+        child: ClipRRect(
-              ),
+          borderRadius: borderRadius,
-              onPressed: () => Navigator.of(context).maybePop(),
+          child: BackdropFilter(
-              tooltip: l10n.back,
+            filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-            ),
+            child: Container(
-            const SizedBox(width: Spacing.xs),
+              decoration: BoxDecoration(
-          ],
+                color: backgroundColor.withValues(alpha: 0.85),
-          Icon(
+                borderRadius: borderRadius,
-            Platform.isIOS ? CupertinoIcons.doc_text_fill : Icons.notes_rounded,
+                border: Border.all(color: borderColor, width: BorderWidth.thin),
-            color: sidebarTheme.foreground.withValues(alpha: 0.7),
-            size: IconSize.lg,
-          ),
-          const SizedBox(width: Spacing.sm),
-          Expanded(
-            child: Text(
-              l10n.notes,
-              style: AppTypography.headlineSmallStyle.copyWith(
-                color: sidebarTheme.foreground,
-                fontWeight: FontWeight.w700,
               ),
+              child: Center(child: child),
             ),
           ),
-        ],
+        ),
+      );
+    }
+
+    return ClipRRect(
+      borderRadius: borderRadius,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+        child: Container(
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: borderRadius,
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
+          ),
+          child: child,
+        ),
       ),
     );
   }
 
-  Widget _buildSearchField(BuildContext context) {
+  Widget _buildFloatingSearchField(BuildContext context) {
-    final sidebarTheme = context.sidebarTheme;
+    final theme = Theme.of(context);
+    final conduitTheme = context.conduitTheme;
+    final isDark = theme.brightness == Brightness.dark;
     final l10n = AppLocalizations.of(context)!;
 
-    return Padding(
+    final backgroundColor = isDark
-      padding: const EdgeInsets.fromLTRB(
+        ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
-        Spacing.inputPadding,
+        : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
-        Spacing.xs,
+
-        Spacing.inputPadding,
+    final borderColor = conduitTheme.cardBorder.withValues(
-        Spacing.sm,
+      alpha: isDark ? 0.65 : 0.55,
-      ),
+    );
-      child: Material(
+
-        color: Colors.transparent,
+    return ClipRRect(
-        child: TextField(
+      borderRadius: BorderRadius.circular(AppBorderRadius.pill),
-          controller: _searchController,
+      child: BackdropFilter(
-          focusNode: _searchFocusNode,
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-          onChanged: (_) => _onSearchChanged(),
+        child: Container(
-          style: AppTypography.standard.copyWith(
+          decoration: BoxDecoration(
-            color: sidebarTheme.foreground,
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: BorderRadius.circular(AppBorderRadius.pill),
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
           ),
-          decoration: InputDecoration(
+          child: Material(
-            isDense: true,
+            color: Colors.transparent,
-            hintText: l10n.searchNotes,
+            child: TextField(
-            hintStyle: AppTypography.standard.copyWith(
+              controller: _searchController,
-              color: sidebarTheme.foreground.withValues(alpha: 0.5),
+              focusNode: _searchFocusNode,
-            ),
+              onChanged: (_) => _onSearchChanged(),
-            prefixIcon: Icon(
+              style: AppTypography.standard.copyWith(
-              Platform.isIOS ? CupertinoIcons.search : Icons.search_rounded,
+                color: conduitTheme.textPrimary,
-              color: sidebarTheme.foreground.withValues(alpha: 0.6),
-              size: IconSize.input,
-            ),
-            prefixIconConstraints: const BoxConstraints(
-              minWidth: TouchTarget.minimum,
-              minHeight: TouchTarget.minimum,
-            ),
-            suffixIcon: _query.isNotEmpty
-                ? IconButton(
-                    onPressed: () {
-                      _searchController.clear();
-                      setState(() => _query = '');
-                      _searchFocusNode.unfocus();
-                    },
-                    icon: Icon(
-                      Platform.isIOS
-                          ? CupertinoIcons.clear_circled_solid
-                          : Icons.clear_rounded,
-                      color: sidebarTheme.foreground.withValues(alpha: 0.6),
-                      size: IconSize.input,
-                    ),
-                  )
-                : null,
-            suffixIconConstraints: const BoxConstraints(
-              minWidth: TouchTarget.minimum,
-              minHeight: TouchTarget.minimum,
-            ),
-            filled: true,
-            fillColor: sidebarTheme.accent.withValues(alpha: 0.85),
-            border: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(AppBorderRadius.md),
-              borderSide: BorderSide.none,
-            ),
-            enabledBorder: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(AppBorderRadius.md),
-              borderSide: BorderSide(
-                color: sidebarTheme.border.withValues(alpha: 0.2),
-                width: BorderWidth.thin,
               ),
-            ),
+              decoration: InputDecoration(
-            focusedBorder: OutlineInputBorder(
+                isDense: true,
-              borderRadius: BorderRadius.circular(AppBorderRadius.md),
+                hintText: l10n.searchNotes,
-              borderSide: BorderSide(
+                hintStyle: AppTypography.standard.copyWith(
-                color: sidebarTheme.ring.withValues(alpha: 0.5),
+                  color: conduitTheme.textSecondary.withValues(alpha: 0.6),
-                width: BorderWidth.regular,
+                ),
+                prefixIcon: Icon(
+                  Platform.isIOS ? CupertinoIcons.search : Icons.search,
+                  color: conduitTheme.iconSecondary,
+                  size: IconSize.input,
+                ),
+                prefixIconConstraints: const BoxConstraints(
+                  minWidth: TouchTarget.minimum,
+                  minHeight: TouchTarget.minimum,
+                ),
+                suffixIcon: _query.isNotEmpty
+                    ? IconButton(
+                        onPressed: () {
+                          _searchController.clear();
+                          setState(() => _query = '');
+                          _searchFocusNode.unfocus();
+                        },
+                        icon: Icon(
+                          Platform.isIOS
+                              ? CupertinoIcons.clear_circled_solid
+                              : Icons.clear,
+                          color: conduitTheme.iconSecondary,
+                          size: IconSize.input,
+                        ),
+                      )
+                    : null,
+                suffixIconConstraints: const BoxConstraints(
+                  minWidth: TouchTarget.minimum,
+                  minHeight: TouchTarget.minimum,
+                ),
+                filled: false,
+                border: InputBorder.none,
+                enabledBorder: InputBorder.none,
+                focusedBorder: InputBorder.none,
+                contentPadding: const EdgeInsets.symmetric(
+                  horizontal: Spacing.md,
+                  vertical: Spacing.sm,
+                ),
               ),
             ),
-            contentPadding: const EdgeInsets.symmetric(
-              horizontal: Spacing.md,
-              vertical: Spacing.sm,
-            ),
           ),
         ),
       ),
@@ -322,7 +445,7 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
           );
           slivers.add(
             SliverPadding(
-              padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
+              padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
               sliver: SliverList(
                 delegate: SliverChildBuilderDelegate(
                   (context, index) =>
@@ -347,12 +470,23 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
   }
 
   Widget _buildRefreshableScrollView(List<Widget> slivers) {
+    // Add top padding for floating app bar and search bar
+    final topPadding = MediaQuery.of(context).padding.top;
+    // App bar height: kToolbarHeight + search bar (48) + padding (xs + sm)
+    final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
+    final paddedSlivers = <Widget>[
+      SliverToBoxAdapter(
+        child: SizedBox(height: topPadding + appBarHeight),
+      ),
+      ...slivers,
+    ];
+
     return ConduitRefreshIndicator(
       onRefresh: _refreshNotes,
       child: CustomScrollView(
         controller: _scrollController,
         physics: const AlwaysScrollableScrollPhysics(),
-        slivers: slivers,
+        slivers: paddedSlivers,
       ),
     );
   }
@@ -691,10 +825,17 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
     final sidebarTheme = context.sidebarTheme;
     final l10n = AppLocalizations.of(context)!;
     final isSearchActive = _query.isNotEmpty;
+    final topPadding = MediaQuery.of(context).padding.top;
+    final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
 
     return Center(
       child: Padding(
-        padding: const EdgeInsets.all(Spacing.xxl),
+        padding: EdgeInsets.fromLTRB(
+          Spacing.xxl,
+          topPadding + appBarHeight,
+          Spacing.xxl,
+          Spacing.xxl,
+        ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
@@ -765,17 +906,29 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
 
   Widget _buildLoading(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
-    return Center(child: ImprovedLoadingState(message: l10n.loadingNotes));
+    final topPadding = MediaQuery.of(context).padding.top;
+    final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
+    return Padding(
+      padding: EdgeInsets.only(top: topPadding + appBarHeight),
+      child: Center(child: ImprovedLoadingState(message: l10n.loadingNotes)),
+    );
   }
 
   Widget _buildError(BuildContext context, Object error) {
     final theme = context.conduitTheme;
     final sidebarTheme = context.sidebarTheme;
     final l10n = AppLocalizations.of(context)!;
+    final topPadding = MediaQuery.of(context).padding.top;
+    final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
 
     return Center(
       child: Padding(
-        padding: const EdgeInsets.all(Spacing.xxl),
+        padding: EdgeInsets.fromLTRB(
+          Spacing.xxl,
+          topPadding + appBarHeight,
+          Spacing.xxl,
+          Spacing.xxl,
+        ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [

lib/features/profile/views/app_customization_page.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io' show Platform;
+import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -44,79 +45,185 @@ class AppCustomizationPage extends ConsumerWidget {
     final currentLanguageCode = locale?.toLanguageTag() ?? 'system';
     final languageLabel = _resolveLanguageLabel(context, currentLanguageCode);
     final activeTheme = ref.watch(appThemePaletteProvider);
+    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
+
+    final theme = Theme.of(context);
+    final conduitTheme = context.conduitTheme;
 
     return Scaffold(
-      backgroundColor: context.sidebarTheme.background,
+      backgroundColor: conduitTheme.surfaceBackground,
-      appBar: _buildAppBar(context),
+      extendBodyBehindAppBar: true,
-      body: SafeArea(
+      appBar: PreferredSize(
-        child: ListView(
+        preferredSize: const Size.fromHeight(kToolbarHeight + 8),
-          physics: const BouncingScrollPhysics(
+        child: Container(
-            parent: AlwaysScrollableScrollPhysics(),
+          decoration: BoxDecoration(
-          ),
+            gradient: LinearGradient(
-          padding: const EdgeInsets.symmetric(
+              begin: Alignment.topCenter,
-            horizontal: Spacing.pagePadding,
+              end: Alignment.bottomCenter,
-            vertical: Spacing.pagePadding,
+              stops: const [0.0, 0.4, 1.0],
-          ),
+              colors: [
-          children: [
+                theme.scaffoldBackgroundColor,
-            _buildThemesDropdownSection(
+                theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
-              context,
+                theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
-              ref,
+              ],
-              themeMode,
-              themeDescription,
-              activeTheme,
-              settings,
             ),
-            const SizedBox(height: Spacing.md),
+          ),
-            _buildLanguageSection(
+          child: SafeArea(
-              context,
+            bottom: false,
-              ref,
+            child: SizedBox(
-              currentLanguageCode,
+              height: kToolbarHeight,
-              languageLabel,
+              child: Row(
+                children: [
+                  // Leading (back button)
+                  if (canPop)
+                    Padding(
+                      padding: const EdgeInsets.only(left: Spacing.inputPadding),
+                      child: Center(
+                        child: GestureDetector(
+                          onTap: () => Navigator.of(context).maybePop(),
+                          child: _buildAppBarPill(
+                            context,
+                            Icon(
+                              UiUtils.platformIcon(
+                                ios: CupertinoIcons.back,
+                                android: Icons.arrow_back,
+                              ),
+                              color: conduitTheme.textPrimary,
+                              size: IconSize.appBar,
+                            ),
+                            isCircular: true,
+                          ),
+                        ),
+                      ),
+                    )
+                  else
+                    const SizedBox(width: Spacing.inputPadding),
+                  // Title centered
+                  Expanded(
+                    child: Center(
+                      child: _buildAppBarPill(
+                        context,
+                        Padding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: Spacing.md,
+                            vertical: Spacing.xs,
+                          ),
+                          child: Text(
+                            l10n.appCustomization,
+                            style: AppTypography.headlineSmallStyle.copyWith(
+                              color: conduitTheme.textPrimary,
+                              fontWeight: FontWeight.w600,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                  // Trailing spacer to balance
+                  if (canPop)
+                    const SizedBox(width: 44 + Spacing.inputPadding)
+                  else
+                    const SizedBox(width: Spacing.inputPadding),
+                ],
+              ),
             ),
-            const SizedBox(height: Spacing.xl),
+          ),
-            _buildSttSection(context, ref, settings),
-            const SizedBox(height: Spacing.xl),
-            _buildTtsDropdownSection(context, ref, settings),
-            const SizedBox(height: Spacing.xl),
-            _buildChatSection(context, ref, settings),
-            const SizedBox(height: Spacing.xl),
-            _buildSocketHealthSection(context, ref),
-          ],
         ),
       ),
+      body: ListView(
+        physics: const BouncingScrollPhysics(
+          parent: AlwaysScrollableScrollPhysics(),
+        ),
+        padding: EdgeInsets.fromLTRB(
+          Spacing.pagePadding,
+          topPadding,
+          Spacing.pagePadding,
+          Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
+        ),
+        children: [
+          _buildThemesDropdownSection(
+            context,
+            ref,
+            themeMode,
+            themeDescription,
+            activeTheme,
+            settings,
+          ),
+          const SizedBox(height: Spacing.md),
+          _buildLanguageSection(
+            context,
+            ref,
+            currentLanguageCode,
+            languageLabel,
+          ),
+          const SizedBox(height: Spacing.xl),
+          _buildSttSection(context, ref, settings),
+          const SizedBox(height: Spacing.xl),
+          _buildTtsDropdownSection(context, ref, settings),
+          const SizedBox(height: Spacing.xl),
+          _buildChatSection(context, ref, settings),
+          const SizedBox(height: Spacing.xl),
+          _buildSocketHealthSection(context, ref),
+        ],
+      ),
     );
   }
 
-  PreferredSizeWidget _buildAppBar(BuildContext context) {
+  Widget _buildAppBarPill(
-    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    BuildContext context,
-    return AppBar(
+    Widget child, {
-      backgroundColor: context.sidebarTheme.background,
+    bool isCircular = false,
-      surfaceTintColor: Colors.transparent,
+  }) {
-      elevation: Elevation.none,
+    final theme = Theme.of(context);
-      toolbarHeight: kToolbarHeight,
+    final isDark = theme.brightness == Brightness.dark;
-      automaticallyImplyLeading: false,
+
-      leading: canPop
+    final backgroundColor = isDark
-          ? IconButton(
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
-              icon: Icon(
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
-                UiUtils.platformIcon(
+
-                  ios: CupertinoIcons.back,
+    final borderColor = context.conduitTheme.cardBorder.withValues(
-                  android: Icons.arrow_back,
+      alpha: isDark ? 0.65 : 0.55,
-                ),
+    );
-                color: context.conduitTheme.iconPrimary,
+
+    final borderRadius = isCircular
+        ? BorderRadius.circular(100)
+        : BorderRadius.circular(AppBorderRadius.pill);
+
+    if (isCircular) {
+      return SizedBox(
+        width: 44,
+        height: 44,
+        child: ClipRRect(
+          borderRadius: borderRadius,
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+            child: Container(
+              decoration: BoxDecoration(
+                color: backgroundColor.withValues(alpha: 0.85),
+                borderRadius: borderRadius,
+                border: Border.all(color: borderColor, width: BorderWidth.thin),
               ),
-              onPressed: () => Navigator.of(context).maybePop(),
+              child: Center(child: child),
-              tooltip: AppLocalizations.of(context)!.back,
+            ),
-            )
+          ),
-          : null,
+        ),
-      titleSpacing: 0,
+      );
-      title: Text(
+    }
-        AppLocalizations.of(context)!.appCustomization,
+
-        style: AppTypography.headlineSmallStyle.copyWith(
+    return ClipRRect(
-          color: context.conduitTheme.textPrimary,
+      borderRadius: borderRadius,
-          fontWeight: FontWeight.w600,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+        child: Container(
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: borderRadius,
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
+          ),
+          child: child,
         ),
       ),
-      centerTitle: true,
     );
   }
 

lib/features/profile/views/profile_page.dart

@@ -9,6 +9,7 @@ import 'package:url_launcher/url_launcher_string.dart';
 import 'package:conduit/l10n/app_localizations.dart';
 import '../../../core/widgets/error_boundary.dart';
 import '../../../shared/widgets/improved_loading_states.dart';
+import 'dart:ui' show ImageFilter;
 
 import '../../../shared/utils/ui_utils.dart';
 import '../../../shared/widgets/themed_dialogs.dart';
@@ -66,52 +67,162 @@ class ProfilePage extends ConsumerWidget {
   }
 
   Scaffold _buildScaffold(BuildContext context, {required Widget body}) {
+    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context)!;
+    final conduitTheme = context.conduitTheme;
+
     return Scaffold(
-      backgroundColor: context.sidebarTheme.background,
+      backgroundColor: conduitTheme.surfaceBackground,
-      appBar: _buildAppBar(context),
+      extendBodyBehindAppBar: true,
+      appBar: PreferredSize(
+        preferredSize: const Size.fromHeight(kToolbarHeight + 8),
+        child: Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              stops: const [0.0, 0.4, 1.0],
+              colors: [
+                theme.scaffoldBackgroundColor,
+                theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
+                theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
+              ],
+            ),
+          ),
+          child: SafeArea(
+            bottom: false,
+            child: SizedBox(
+              height: kToolbarHeight,
+              child: Row(
+                children: [
+                  // Leading (back button)
+                  if (canPop)
+                    Padding(
+                      padding: const EdgeInsets.only(left: Spacing.inputPadding),
+                      child: Center(
+                        child: GestureDetector(
+                          onTap: () => Navigator.of(context).maybePop(),
+                          child: _buildAppBarPill(
+                            context,
+                            Icon(
+                              UiUtils.platformIcon(
+                                ios: CupertinoIcons.back,
+                                android: Icons.arrow_back,
+                              ),
+                              color: conduitTheme.textPrimary,
+                              size: IconSize.appBar,
+                            ),
+                            isCircular: true,
+                          ),
+                        ),
+                      ),
+                    )
+                  else
+                    const SizedBox(width: Spacing.inputPadding),
+                  // Title centered
+                  Expanded(
+                    child: Center(
+                      child: _buildAppBarPill(
+                        context,
+                        Padding(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: Spacing.md,
+                            vertical: Spacing.xs,
+                          ),
+                          child: Text(
+                            l10n.you,
+                            style: AppTypography.headlineSmallStyle.copyWith(
+                              color: conduitTheme.textPrimary,
+                              fontWeight: FontWeight.w600,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                  // Trailing spacer to balance
+                  if (canPop)
+                    const SizedBox(width: 44 + Spacing.inputPadding)
+                  else
+                    const SizedBox(width: Spacing.inputPadding),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
       body: body,
     );
   }
 
-  PreferredSizeWidget _buildAppBar(BuildContext context) {
+  Widget _buildAppBarPill(
-    final canPop = ModalRoute.of(context)?.canPop ?? false;
+    BuildContext context,
-    return AppBar(
+    Widget child, {
-      backgroundColor: context.sidebarTheme.background,
+    bool isCircular = false,
-      surfaceTintColor: Colors.transparent,
+  }) {
-      elevation: Elevation.none,
+    final theme = Theme.of(context);
-      toolbarHeight: kToolbarHeight,
+    final isDark = theme.brightness == Brightness.dark;
-      automaticallyImplyLeading: false,
+
-      leading: canPop
+    final backgroundColor = isDark
-          ? IconButton(
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
-              icon: Icon(
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
-                UiUtils.platformIcon(
+
-                  ios: CupertinoIcons.back,
+    final borderColor = context.conduitTheme.cardBorder.withValues(
-                  android: Icons.arrow_back,
+      alpha: isDark ? 0.65 : 0.55,
-                ),
+    );
-                color: context.conduitTheme.iconPrimary,
+
+    final borderRadius = isCircular
+        ? BorderRadius.circular(100)
+        : BorderRadius.circular(AppBorderRadius.pill);
+
+    if (isCircular) {
+      return SizedBox(
+        width: 44,
+        height: 44,
+        child: ClipRRect(
+          borderRadius: borderRadius,
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+            child: Container(
+              decoration: BoxDecoration(
+                color: backgroundColor.withValues(alpha: 0.85),
+                borderRadius: borderRadius,
+                border: Border.all(color: borderColor, width: BorderWidth.thin),
               ),
-              onPressed: () => Navigator.of(context).maybePop(),
+              child: Center(child: child),
-              tooltip: AppLocalizations.of(context)!.back,
+            ),
-            )
+          ),
-          : null,
+        ),
-      titleSpacing: 0,
+      );
-      title: Text(
+    }
-        AppLocalizations.of(context)!.you,
+
-        style: AppTypography.headlineSmallStyle.copyWith(
+    return ClipRRect(
-          color: context.conduitTheme.textPrimary,
+      borderRadius: borderRadius,
-          fontWeight: FontWeight.w600,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+        child: Container(
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: borderRadius,
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
+          ),
+          child: child,
         ),
       ),
-      centerTitle: true,
     );
   }
 
   Widget _buildCenteredState(BuildContext context, Widget child) {
-    return SafeArea(
+    final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
-      child: Padding(
+    return Padding(
-        padding: const EdgeInsets.all(Spacing.pagePadding),
+      padding: EdgeInsets.fromLTRB(
-        child: Center(child: child),
+        Spacing.pagePadding,
+        topPadding,
+        Spacing.pagePadding,
+        Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
       ),
+      child: Center(child: child),
     );
   }
 
@@ -121,23 +232,26 @@ class ProfilePage extends ConsumerWidget {
     dynamic userData,
     ApiService? api,
   ) {
-    return SafeArea(
+    // Calculate top padding to account for app bar + safe area
-      child: ListView(
+    final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
-        physics: const BouncingScrollPhysics(
+
-          parent: AlwaysScrollableScrollPhysics(),
+    return ListView(
-        ),
+      physics: const BouncingScrollPhysics(
-        padding: const EdgeInsets.symmetric(
+        parent: AlwaysScrollableScrollPhysics(),
-          horizontal: Spacing.pagePadding,
-          vertical: Spacing.pagePadding,
-        ),
-        children: [
-          _buildProfileHeader(context, userData, api),
-          const SizedBox(height: Spacing.xl),
-          _buildAccountSection(context, ref),
-          const SizedBox(height: Spacing.xl),
-          _buildSupportSection(context),
-        ],
       ),
+      padding: EdgeInsets.fromLTRB(
+        Spacing.pagePadding,
+        topPadding,
+        Spacing.pagePadding,
+        Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
+      ),
+      children: [
+        _buildProfileHeader(context, userData, api),
+        const SizedBox(height: Spacing.xl),
+        _buildAccountSection(context, ref),
+        const SizedBox(height: Spacing.xl),
+        _buildSupportSection(context),
+      ],
     );
   }