diff --git a/src/lib/app_components/e_app_theme.svelte b/src/lib/app_components/e_app_theme.svelte
index 556a3c71..497c3515 100644
--- a/src/lib/app_components/e_app_theme.svelte
+++ b/src/lib/app_components/e_app_theme.svelte
@@ -36,15 +36,17 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
         ae_app_theme
         hidden-print
 
-        bg-blue-100 text-gray-900
-        dark:bg-blue-800 dark:text-gray-200
+        bg-surface-100 dark:bg-surface-800
+        text-surface-900 dark:text-surface-100
+        border border-surface-200 dark:border-surface-700
 
         flex flex-col flex-wrap gap-1
         items-end justify-center
 
         w-72 max-w-72
         p-1
-        border-2 border-gray-200
+        rounded-lg
+        shadow-md
 
         duration-300 delay-150 hover:delay-1000 hover:ease-out
         transition-all
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index 602f6813..e7ceaf53 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -99,35 +99,32 @@
 </script>
 
 <div
-    class="page_container flex flex-col gap-8 items-center w-full min-h-screen p-4 md:p-8"
+    class="page_container flex flex-col gap-4 sm:gap-6 md:gap-8 items-center w-full min-h-screen p-3 sm:p-4 md:p-8"
 >
     <!-- Header Section -->
     <header class="text-center space-y-2 max-w-3xl">
         <h1
-            class="text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100"
+            class="text-3xl sm:text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100"
         >
-            <!-- <div class="p-3 bg-surface-500/10 rounded-2xl"> -->
             <SquareLibrary size="1em" class="text-primary-500 inline-block" />
-            <!-- </div> -->
             Journals
         </h1>
-        <p class="text-surface-600 dark:text-surface-400 font-medium">
-            Managed by <span class="text-primary-500"
-                >{$lq__account?.name ?? $ae_loc.account_name ?? 'Æ loading...'}</span
-            >
-            {#if $ae_loc.person.given_name}
-                &bull; <span class="opacity-75"
-                    >{$ae_loc.person.given_name}</span
-                >
-            {/if}
-        </p>
+        <!-- Show the person's name as context; skip account name (often shows placeholder) -->
+        {#if $ae_loc.person.given_name || $ae_loc.person.family_name}
+            <p class="text-surface-600 dark:text-surface-400 font-medium">
+                <span class="text-primary-500 font-semibold">
+                    {[$ae_loc.person.given_name, $ae_loc.person.family_name].filter(Boolean).join(' ')}
+                </span>
+            </p>
+        {/if}
     </header>
 
     <!-- Quick Add Integrated Section -->
     <section class="w-full max-w-2xl">
         <div class="relative group">
+            <!-- Glow ring: slightly brighter in dark mode where colors need more presence -->
             <div
-                class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"
+                class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 dark:opacity-40 group-hover:opacity-60 dark:group-hover:opacity-70 transition duration-1000 group-hover:duration-200"
             ></div>
             <AE_Comp_Journal_Entry_Quick_Add
                 journals_li={$lq__journal_obj_li}
diff --git a/src/routes/journals/ae_comp__journal_entry_header.svelte b/src/routes/journals/ae_comp__journal_entry_header.svelte
index d8170e91..02bf2fb3 100644
--- a/src/routes/journals/ae_comp__journal_entry_header.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_header.svelte
@@ -68,7 +68,10 @@
 </script>
 
 <header
-    class="flex flex-col md:flex-row items-center justify-between gap-4 p-3 bg-surface-100/50 dark:bg-surface-900/50 rounded-xl border border-surface-500/20 backdrop-blur-md shadow-sm w-full"
+    class="flex flex-col md:flex-row items-center justify-between gap-4 p-3
+           bg-gray-50 dark:bg-gray-800
+           border border-gray-200 dark:border-gray-700
+           rounded-xl shadow-sm w-full"
 >
     <div class="flex items-center gap-3 w-full md:w-auto">
         <a
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index 740c10c8..68570ab1 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -420,8 +420,19 @@
     let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
 </script>
 
+<div class="relative group/entry-view w-full">
+    <!-- Subtle glow — same technique as the rest of the Journals module -->
+    <div
+        class="absolute -inset-1 bg-linear-to-r from-primary-500/50 to-secondary-500/50
+               rounded-2xl blur opacity-5 dark:opacity-10
+               group-hover/entry-view:opacity-15 dark:group-hover/entry-view:opacity-20
+               transition duration-700 pointer-events-none"
+    ></div>
 <section
-    class="ae_view flex flex-col gap-2 w-full h-full p-1"
+    class="ae_view relative flex flex-col gap-2 w-full h-full p-2
+           bg-white dark:bg-gray-900
+           border border-gray-200 dark:border-gray-700
+           rounded-xl shadow-xl"
     bind:clientHeight={$ae_loc.iframe_height_modal_body}
 >
     {#if $lq__journal_entry_obj && $lq__journal_obj}
@@ -458,11 +469,13 @@
             </div>
         {/if}
 
+        <!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
         <section
-            class="grow relative bg-gray-100 dark:bg-gray-800 p-1 rounded-lg shadow-md overflow-hidden"
-            class:bg-yellow-50={$journals_loc.entry.edit_kv[
-                $lq__journal_entry_obj?.journal_entry_id
-            ] == 'current'}
+            class="grow relative p-1 rounded-lg shadow-md overflow-hidden
+                   bg-gray-50 dark:bg-gray-800
+                   border border-gray-200 dark:border-gray-700
+                   {$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'
+                       ? 'ring-2 ring-inset ring-primary-500/40' : ''}"
         >
             <div class="absolute top-2 right-2 z-10">
                 <AE_Comp_Journal_Entry_AiTools
@@ -533,3 +546,4 @@
         </div>
     {/if}
 </section>
+</div>
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index d353bde3..56795d61 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -123,8 +123,16 @@
     );
 </script>
 
+<div class="relative group/entries w-full">
+    <!-- Subtle glow behind the entry list — same technique as the other journal sections -->
+    <div
+        class="absolute -inset-1 bg-linear-to-r from-primary-500/50 to-secondary-500/50
+               rounded-2xl blur opacity-5 dark:opacity-10
+               group-hover/entries:opacity-15 dark:group-hover/entries:opacity-20
+               transition duration-700 pointer-events-none"
+    ></div>
 <section
-    class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full"
+    class="journal_list relative flex flex-col gap-1 md:gap-2 items-center justify-center w-full"
 >
     {#if visible_journal_entry_obj_li === null}
         <!-- Loading state -->
@@ -154,17 +162,18 @@
         {#each visible_journal_entry_obj_li as journals_journal_entry_obj, index (journals_journal_entry_obj.journal_entry_id)}
             <div
                 class="
-            container journal journal_entry_obj
-            border
+            container journal journal_entry_obj group/entry
+            border border-gray-200 dark:border-gray-700
+            border-l-4 border-l-primary-500/40
             px-2 py-1 space-y-1
             w-full max-w-(--breakpoint-lg)
             flex flex-col items-center justify-center
             bg-white text-gray-900
             dark:bg-gray-800 dark:text-gray-200
             rounded-lg
-            hover:bg-gray-100 hover:dark:bg-gray-700
-            hover:border-gray-300
-            transition-all duration-500 ease-out
+            hover:bg-gray-50 dark:hover:bg-gray-700
+            hover:border-l-primary-500 hover:shadow-md
+            transition-all duration-200 ease-out
             "
                 class:dim={!journals_journal_entry_obj.enable}
                 class:bg-warning-100={!journals_journal_entry_obj?.enable}
@@ -761,3 +770,4 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
         </div>
     {/if}
 </section>
+</div>
diff --git a/src/routes/journals/ae_comp__journal_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
index 47b46e01..2c5f43fc 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
@@ -172,21 +172,28 @@
     }
 </script>
 
-<section
-    class="
-    rounded-lg p-2 m-2 w-full
-    flex flex-col flex-wrap items-center justify-center
-    bg-{$lq__journal_obj?.cfg_json.color_scheme}-100
-    dark:bg-gray-800
-    text-gray-900 dark:text-gray-100
-    "
-    bind:clientHeight={$ae_loc.iframe_height_modal_body}
->
+<div class="relative group/view w-full mx-2 my-1">
+    <!-- Glow ring — mirrors Quick Add and Journal List -->
+    <div
+        class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
+               rounded-2xl blur opacity-10 dark:opacity-20
+               group-hover/view:opacity-25 dark:group-hover/view:opacity-35
+               transition duration-700 pointer-events-none"
+    ></div>
+    <section
+        class="relative rounded-xl p-3 w-full
+               flex flex-col gap-2 items-center justify-center
+               bg-white dark:bg-gray-900
+               border border-gray-200 dark:border-gray-700
+               text-gray-900 dark:text-gray-100
+               shadow-xl"
+        bind:clientHeight={$ae_loc.iframe_height_modal_body}
+    >
     <header
         class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full"
     >
         <h2 class="journal__name h3 text-center">
-            <BookOpenText class="inline-block text-neutral-800/60" />
+            <BookOpenText class="inline-block text-primary-500/80" />
             {@html $lq__journal_obj?.name ?? 'Loading...'}
 
             {#if $ae_loc.edit_mode}
@@ -247,8 +254,8 @@
             p-2
             w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
             font-mono
-            text-gray-900
-            dark:bg-gray-700 dark:text-gray-100
+            bg-gray-50 text-gray-900
+            dark:bg-gray-800 dark:text-gray-100
             shadow-md rounded-lg
             text-sm font-normal text-wrap word-break
 
@@ -264,7 +271,8 @@
             {@html $lq__journal_obj.description_md_html}
         </div>
     {/if}
-</section>
+    </section>
+</div>
 
 <!-- Standardized Journal Action/Config Modal -->
 <Journal_obj_id_edit
diff --git a/src/routes/journals/ae_comp__journal_obj_li.svelte b/src/routes/journals/ae_comp__journal_obj_li.svelte
index 090437a9..a8597e9e 100644
--- a/src/routes/journals/ae_comp__journal_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_li.svelte
@@ -22,142 +22,118 @@
     let { lq__journal_obj_li }: Props = $props();
 </script>
 
-<!-- Responsive Grid Container -->
-<section
-    class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4"
->
-    {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
-        {#each $lq__journal_obj_li as journal, index (journal.journal_id)}
-            <div
-                class="
-                    journal_card
-                    group relative
-                    flex flex-col justify-between
-                    bg-surface-50 dark:bg-surface-900
-                    border border-surface-500/20 rounded-xl
-                    p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50
-                    transition-all duration-200 ease-in-out
-                "
-                class:hidden={(journal?.hide || !journal?.enable) &&
-                    !$ae_loc.trusted_access}
-                class:opacity-60={journal.hide}
-                class:border-warning-500={!journal?.enable}
-            >
-                <!-- Top Section: Title & Badge -->
-                <div class="space-y-3">
-                    <header class="flex justify-between items-start gap-2">
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="p-2 bg-primary-500/10 rounded-lg text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors"
-                            >
-                                <BookType size="1.5em" />
-                            </div>
-                            <h3
-                                class="text-xl font-bold text-surface-900 dark:text-surface-100 line-clamp-1"
-                            >
-                                {journal.name}
-                            </h3>
-                        </div>
+<!--
+    Compact mobile-first list — the entire row is the tap target.
+    Glow effect mirrors the Quick Add section above it.
+    Uses plain Tailwind gray scale with explicit dark: variants — no Skeleton paired utilities —
+    so behavior is predictable regardless of which Skeleton theme is active.
+-->
+<div class="w-full max-w-2xl relative group/list">
+    <!-- Glow ring behind the list, same technique as Quick Add -->
+    <div
+        class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
+               rounded-2xl blur opacity-10 dark:opacity-20
+               group-hover/list:opacity-25 dark:group-hover/list:opacity-35
+               transition duration-700 pointer-events-none"
+    ></div>
 
-                        {#if journal.type_code}
-                            <span
-                                class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold"
-                            >
-                                {journal.type_code}
-                            </span>
-                        {/if}
-                    </header>
-
-                    <!-- Description (Power User / Edit Mode Only) -->
-                    {#if journal.description && $ae_loc.edit_mode}
-                        <div
-                            class="prose prose-sm dark:prose-invert max-h-24 overflow-y-auto bg-surface-100/50 dark:bg-surface-800/50 p-3 rounded-lg text-xs font-mono"
-                        >
-                            {@html journal.description_md_html}
-                        </div>
-                    {/if}
-
-                    <!-- Quick Stats (Clean View) -->
-                    <div
-                        class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400"
-                    >
-                        <div
-                            class="flex items-center gap-1"
-                            title="Entry Count"
-                        >
-                            <Hash size="1.2em" />
-                            <span class="font-bold"
-                                >{journal.journal_entry_count ?? 0}</span
-                            >
-                        </div>
-                        <div
-                            class="flex items-center gap-1"
-                            title="Last Updated"
-                        >
-                            <Clock size="1.2em" />
-                            <span
-                                >{ae_util.iso_datetime_formatter(
-                                    journal.updated_on || journal.created_on,
-                                    'date_short'
-                                )}</span
-                            >
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Bottom Section: Actions -->
-                <div
-                    class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3"
+    <section class="journal_list relative w-full space-y-1.5 p-2 sm:p-3
+                     bg-white dark:bg-gray-900
+                     border border-gray-200 dark:border-gray-700
+                     rounded-2xl shadow-xl">
+        {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
+            {#each $lq__journal_obj_li as journal (journal.journal_id)}
+                <a
+                    href="/journals/{journal?.journal_id}"
+                    class="journal_card group relative
+                           flex items-center gap-3 px-4 py-3
+                           bg-gray-50 dark:bg-gray-800
+                           border border-gray-200 dark:border-gray-700
+                           border-l-4 border-l-primary-500/60
+                           rounded-xl shadow-sm
+                           hover:shadow-md hover:border-l-primary-500
+                           hover:bg-gray-100 dark:hover:bg-gray-700
+                           active:scale-[0.99]
+                           transition-all duration-150 ease-in-out"
+                    class:hidden={(journal?.hide || !journal?.enable) && !$ae_loc.trusted_access}
+                    class:opacity-60={journal.hide}
+                    class:!border-l-warning-500={!journal?.enable}
                 >
-                    <a
-                        href="/journals/{journal?.journal_id}"
-                        class="btn preset-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
-                    >
-                        <BookOpenText size="1.2em" class="mr-2" />
-                        <span>Open Journal</span>
-                    </a>
+                    <!-- Icon: fixed size, never squashed -->
+                    <div class="shrink-0 p-2 bg-primary-500/10 rounded-lg text-primary-500
+                                group-hover:bg-primary-500 group-hover:text-white transition-colors">
+                        <BookType size="1.3em" />
+                    </div>
 
-                    <!-- Admin Metadata (Edit Mode Only) -->
-                    {#if $ae_loc.edit_mode && $ae_loc.administrator_access}
-                        <div
-                            class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono"
-                        >
-                            <Calendar size="1em" />
-                            <span
-                                >Created: {ae_util.iso_datetime_formatter(
-                                    journal.created_on,
-                                    'datetime_iso_12_no_seconds'
-                                )}</span
-                            >
+                    <!-- Name + badge: min-w-0 flex-1 lets text shrink and wrap -->
+                    <div class="min-w-0 flex-1">
+                        <div class="text-sm sm:text-base font-bold
+                                    text-gray-900 dark:text-gray-100
+                                    leading-snug break-words">
+                            {journal.name}
                         </div>
-                    {/if}
-                </div>
+                        <div class="flex flex-wrap items-center gap-2 mt-0.5">
+                            {#if journal.type_code}
+                                <span class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold">
+                                    {journal.type_code}
+                                </span>
+                            {/if}
+                            <!-- Description snippet: edit mode only -->
+                            {#if journal.description && $ae_loc.edit_mode}
+                                <span class="text-[11px] text-gray-500 dark:text-gray-400 font-mono truncate max-w-[16rem]">
+                                    {ae_util.strip_html ? ae_util.strip_html(journal.description).slice(0, 60) : journal.description.slice(0, 60)}&hellip;
+                                </span>
+                            {/if}
+                        </div>
+                    </div>
 
-                <!-- Status Indicators (Edit Mode Only) -->
-                {#if $ae_loc.edit_mode}
-                    <div class="absolute -top-2 -right-2 flex gap-1">
-                        {#if journal.hide}
-                            <span
-                                class="badge-icon preset-tonal-surface shadow-sm"
-                                title="Hidden">🚫</span
-                            >
-                        {/if}
-                        {#if !journal.enable}
-                            <span
-                                class="badge-icon preset-tonal-warning shadow-sm"
-                                title="Disabled">⚠️</span
-                            >
+                    <!-- Stats: right-aligned, compact -->
+                    <div class="shrink-0 flex flex-col items-end gap-0.5
+                                text-xs text-gray-500 dark:text-gray-400">
+                        <div class="flex items-center gap-1" title="Entry Count">
+                            <Hash size="0.85em" />
+                            <span class="font-bold tabular-nums">{journal.journal_entry_count ?? 0}&times;</span>
+                        </div>
+                        <div class="flex items-center gap-1" title="Last Updated">
+                            <Clock size="0.85em" />
+                            <span class="tabular-nums">{ae_util.iso_datetime_formatter(
+                                journal.updated_on || journal.created_on,
+                                'date_short'
+                            )}</span>
+                        </div>
+                        {#if $ae_loc.edit_mode && $ae_loc.administrator_access}
+                            <div class="flex items-center gap-1 opacity-40" title="Created">
+                                <Calendar size="0.85em" />
+                                <span class="font-mono text-[10px] tabular-nums">{ae_util.iso_datetime_formatter(
+                                    journal.created_on,
+                                    'date_short'
+                                )}</span>
+                            </div>
                         {/if}
                     </div>
-                {/if}
+
+                    <!-- Chevron hint: desktop only -->
+                    <BookOpenText size="0.95em"
+                        class="shrink-0 opacity-0 group-hover:opacity-30 transition-opacity hidden sm:block" />
+
+                    <!-- Status overlays: edit mode only -->
+                    {#if $ae_loc.edit_mode}
+                        <div class="absolute -top-1.5 -right-1.5 flex gap-1">
+                            {#if journal.hide}
+                                <span class="badge-icon preset-tonal-surface shadow-sm" title="Hidden">🚫</span>
+                            {/if}
+                            {#if !journal.enable}
+                                <span class="badge-icon preset-tonal-warning shadow-sm" title="Disabled">⚠️</span>
+                            {/if}
+                        </div>
+                    {/if}
+                </a>
+            {/each}
+        {:else}
+            <div class="p-20 text-center text-gray-400 dark:text-gray-500 flex flex-col items-center gap-4">
+                <BookType size="4em" />
+                <p class="text-xl">No journals found in this view.</p>
             </div>
-        {/each}
-    {:else}
-        <div
-            class="col-span-full p-20 text-center opacity-50 flex flex-col items-center gap-4"
-        >
-            <BookType size="4em" />
-            <p class="text-xl">No journals found in this view.</p>
-        </div>
-    {/if}
-</section>
+        {/if}
+    </section>
+</div>