diff --git a/documentation/AE_UI_Journals_module_update_2026.md b/documentation/AE_UI_Journals_module_update_2026.md
index 475d266d..f8262a72 100644
--- a/documentation/AE_UI_Journals_module_update_2026.md
+++ b/documentation/AE_UI_Journals_module_update_2026.md
@@ -1,6 +1,6 @@
 # Aether Journals UI Update (2026)
 
-> **Status:** Active
+> **Status:** 🚧 Stuck on Phase 4 (Security/Encryption Blockers)
 > **Last Updated:** 2026-01-14
 > **Primary Agent:** Frontend SvelteKit Agent
 
@@ -18,7 +18,7 @@ This document outlines the modernization of the Journals module UI in the Svelte
 2.  **Quick Add UI:** Implement a specialized interface for rapid, friction-free entry creation.
 3.  **Append/Prepend UI:** Allow users to quickly add text to the beginning or end of existing entries without full edit mode.
 4.  **Interop & Portability:** Robust import/export logic for Markdown/HTML (Nextcloud Notes compatibility).
-5.  **Security Hardening:** Review and harden client-side encryption logic.
+5.  **Security Hardening:** Review and harden client-side encryption logic (BLOCKED).
 
 ---
 
@@ -39,31 +39,17 @@ This document outlines the modernization of the Journals module UI in the Svelte
 
 ## 4. Feature Specifications
 
-### ⚡ Quick Add
-*   **Component:** `src/routes/journals/ae_comp__journal_entry_quick_add.svelte` (New)
-*   **Placement:**
-    *   Primary: Top of the Journal List view (`src/routes/journals/+page.svelte`).
-    *   Secondary: Sidebar or global hotkey (Future).
-*   **Behavior:**
-    *   Simple `textarea` input.
-    *   "Add Note" button.
-    *   **Logic:** Creates a new `journal_entry` attached to the active (or default) journal. Auto-sets `created_on` to `now`.
-    *   **UX:** Should not require opening a full editor modal. Optimistic UI update.
+### ⚡ Quick Add (Complete)
+*   **Component:** `src/routes/journals/ae_comp__journal_entry_quick_add.svelte`
+*   **Behavior:** Creates a new `journal_entry` attached to the active journal without leaving the list view.
 
-### 📝 Append / Prepend
-*   **Triggers:** Buttons added to `src/routes/journals/JournalEntry_SettingsMenu.svelte`.
-*   **Interaction:**
-    *   Clicking "Append" or "Prepend" opens a focused input area (inline or small modal).
-    *   User types text -> Submits.
-    *   **Logic:**
-        *   **Prepend:** `New Text` + `\n\n` + `Existing Content`
-        *   **Append:** `Existing Content` + `\n\n` + `New Text`
-    *   **UX:** seamless update of the view without entering full "Edit Mode".
+### 📝 Append / Prepend (Complete)
+*   **Interaction:** Fast text injection via `AeCompModalJournalEntryAppend`.
+*   **Logic:** Updates entry content without full editor state overhead.
 
-### 🔄 Interop (Markdown/HTML)
+### 🔄 Interop (Markdown/HTML) (Complete)
 *   **Goal:** Bulk export/import for data portability.
-*   **Format:** Optimized templates for different journal types (Standard, Personal Log, Amazon Vine).
-*   **Integration:** drag-and-drop zone for Nextcloud Note files and bulk parser logic in `ae_journals_parsers.ts`.
+*   **Templates:** Standard, Personal Log, Amazon Vine.
 
 ---
 
@@ -76,24 +62,38 @@ This document outlines the modernization of the Journals module UI in the Svelte
 ### Phase 2: Rapid Entry (Complete)
 - [x] Create `ae_comp__journal_entry_quick_add.svelte`.
 - [x] Integrate Quick Add into `+page.svelte`.
-- [x] Update `ae_journals_stores.ts` to manage Quick Add state/visibility.
 
 ### Phase 3: Content Manipulation & Portability (Complete)
-- [x] Update `JournalEntry_SettingsMenu.svelte` with Append/Prepend actions.
-- [x] Implement Append/Prepend logic in `ae_comp__journal_entry_obj_id_view.svelte`.
-- [x] Implement Bulk Export (Markdown/HTML/JSON) via `ae_comp__modal_journal_export.svelte`.
-- [x] Implement Bulk Import with Drag-and-Drop via `ae_comp__modal_journal_import.svelte`.
-- [x] Establish centralized Export Template system (`ae_journals_export_templates.ts`).
+- [x] Implement Append/Prepend logic.
+- [x] Implement Bulk Export/Import system.
+- [x] Establish centralized Export Template engine.
 
-### Phase 4: Polish & Security (Active)
+### Phase 4: Polish & Security (ACTIVE BLOCKER)
 - [x] Implement Auto-Save toggle and visual status indicators.
+- [ ] Solidify E2EE passcode system for Journals and Entries.
+- [ ] **BLOCKER:** Decryption workflow is currently unstable due to Svelte 5 reactivity loops.
 - [ ] Audit encryption flow for Quick Added and Imported entries.
-- [x] Styling and Mobile responsiveness check for Import/Export modals.
 - [ ] Integrate Outbound Email sharing.
 
 ---
 
-## 6. Reference Files
-*   `src/lib/ae_journals/ae_journals_stores.ts`: State definitions.
-*   `src/routes/journals/+page.svelte`: Main UI container.
-*   `src/routes/journals/JournalEntry_Editor.svelte`: Editor logic.
+## ⚠️ Technical Blocker: The "Decryption-Sync" Loop
+
+### The Issue
+The component is suffering from a **Reactive Feedback Loop** between decryption, auto-save, and background IDB refreshes.
+1.  **Decrypting content** triggers a change in `tmp_entry_obj.content`.
+2.  The **Auto-Save effect** sees this as a manual user edit and saves to the database.
+3.  **Dexie LiveQuery** detects the DB update and refreshes the object.
+4.  The **Sync effect** resets the entry to its encrypted state (from DB).
+5.  The **Auto-Decryption effect** fires again, starting the loop over.
+
+### What we tried:
+*   **`is_processing` flags:** Attempted to block reactivity during decryption.
+*   **`untrack()`:** Attempted to isolate store updates.
+*   **Reference Sync:** Attempted to update `orig_entry_obj` simultaneously with decryption to fool the change detector.
+*   **Direct Store Updates:** Switching from property assignment to `journals_sess.update()` to fix Svelte 5 notification failures.
+
+### Future Fix Ideas:
+1.  **Native Svelte 5 State:** Refactor `journals_sess` from a Svelte 4 `Writable` to a class using `$state`.
+2.  **Logic Extraction:** Move decryption logic into a non-reactive class/helper to isolate side effects from the UI render cycle.
+3.  **Hash Comparison:** Use content hashes for change detection instead of string comparisons to avoid whitespace/normalization loops.
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index c821e8e5..1d6d89c1 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -1,365 +1,213 @@
 <script lang="ts">
-    let log_lvl: number = 0;
-    // console.log(`ae_journals +page data:`, data);
-    // console.log(`ae_journals Data Params:`, data.url.searchParams.get('journal_id'));
-
-    // *** Import Svelte specific
+    /**
+     * src/routes/journals/+page.svelte
+     * Modernized Journals Index View
+     * Focus: Simplicity for regular users, power tools for edit mode.
+     */
     import { onMount } from 'svelte';
     import { goto } from '$app/navigation';
 
-    // *** Import other supporting libraries
-    import { BookPlus, FolderPlus, Library, Loader, SquareLibrary, Wrench, FileUp, FileDown } from '@lucide/svelte';
+    // *** Icons
+    import { 
+        BookPlus, SquareLibrary, Wrench, 
+        FileUp, Loader2, Sparkles 
+    } from '@lucide/svelte';
+    
+    // *** Libraries & Stores
     import { liveQuery } from 'dexie';
     import { Modal } from 'flowbite-svelte';
-
-    // *** Import Aether specific variables and functions
-    // import { api } from '$lib/api';
     import { db_journals } from '$lib/ae_journals/db_journals';
     import { journals_func } from '$lib/ae_journals/ae_journals_functions';
-    import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
+    import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
     import {
         journals_loc,
         journals_sess,
         journals_slct,
         journals_trig
     } from '$lib/ae_journals/ae_journals_stores';
-    import { ae_util } from '$lib/ae_utils/ae_utils';
+
+    // *** Components
+    import Modal_journals_cfg from './modal_journals_config.svelte';
+    import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
+    import AeCompJournalEntryQuickAdd from './ae_comp__journal_entry_quick_add.svelte';
+    import AeCompModalJournalImport from './ae_comp__modal_journal_import.svelte';
+
     interface Props {
         data: any;
     }
 
     let { data }: Props = $props();
 
-    import Modal_journals_cfg from './modal_journals_config.svelte';
-    import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
-    import AeCompJournalEntryQuickAdd from './ae_comp__journal_entry_quick_add.svelte';
-    import AeCompModalJournalImport from './ae_comp__modal_journal_import.svelte';
-    import AeCompModalJournalExport from './ae_comp__modal_journal_export.svelte';
-
-    // import Element_data_store from '$lib/element_data_store_v2.svelte';
-
-    let ae_acct = data[$slct.account_id];
+    // *** State
     let show_import_modal = $state(false);
-    let show_export_modal = $state(false);
-
-    function handle_import_complete() {
-        // Trigger a refresh of the journal list?
-        // Usually liveQuery handles it if data changed in IDB.
-        // But if we just created entries, we might want to refresh the selected journal view if active.
-        // $journals_trig.journal_entry_li = true;
-    }
-    // $journals_slct.journal_obj = ae_acct.slct.journal_obj;
-
-    // We need to access the currently filtered/displayed list of entries for export.
-    // The list is actually managed inside 'Journal_obj_li' (the list component) or via a store.
-    // However, looking at Journal_obj_li, it takes 'lq__journal_entry_obj_li' as a prop.
-    // BUT wait, this page (+page.svelte) seems to be the Journal INDEX (list of journals), 
-    // NOT the list of entries within a journal.
-    // Ah, checking the code...
-    // The main page lists *Journals* (lq__journal_obj_li).
-    // The entries are listed in [journal_id]/+page.svelte.
-    
-    // Correction: Bulk Export should probably be on the [journal_id] page, OR here if we want to export ALL journals?
-    // The user request was "export Journal Entries". Usually implies from a specific journal or context.
-    // Let's check [journal_id]/+page.svelte.
-
-    // $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
+    let log_lvl = 0;
 
+    // *** LiveQueries
     let lq__journal_obj_li = $derived(
         liveQuery(async () => {
-            let results = await db_journals.journal
+            return await db_journals.journal
                 .where('person_id')
                 .equals($ae_loc.person_id)
-                // .sortBy('group')
-                // .sortBy('priority')
-                // .sortBy('sort')
                 .reverse()
                 .sortBy('tmp_sort_3');
-
-            // .orderBy('tmp_sort_3')
-            // .reverse()
-            // .toArray()
-
-            // .sortBy('start_datetime')
-            // () => db_journals.journals
-            //     .where('conference')
-            //     // .aboveOrEqual(0)
-            //     .equals('true')
-            //     // .above(0)
-            //     .sortBy('name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
-            //     // .sortBy('[priority+name]')
-            //     // .orderBy('name')
-            //     // .offset(10).limit(5)
-            //     // .toArray()
-
-            return results;
         })
     );
-    // console.log(`lq__journal_obj_li:`, $lq__journal_obj_li);
-
-    let lq__journal_obj = $derived(
-        liveQuery(async () => {
-            let results = await db_journals.journal
-                .where('id')
-                .equals(ae_acct.slct.journal_id)
-                .toArray();
-            // .first()
-            // .get($journals_slct.journal_id)
-
-            return results;
-        })
-    );
-
-    onMount(() => {
-        console.log('Journals: +page.svelte');
-
-        console.log('ae_ slct:', $slct);
-
-        let href_url = window.location.href;
-        // console.log(href_url);
-
-        $ae_loc.href_url = href_url;
-        console.log(`lq__journal_obj = `, $lq__journal_obj);
-    });
 
     async function create_journal() {
-        // Confirm before creating a new journal
-        if (confirm('Are you sure you want to create a new journal?')) {
-            console.log('Creating new journal...');
-        } else {
-            console.log('Journal creation cancelled.');
-            return;
-        }
+        if (!confirm('Create a new journal?')) return;
 
-        if (
-            $journals_sess.journal.new_journal_name &&
-            $journals_sess.journal.new_journal_type_code
-        ) {
-            $journals_slct.journal_id = null;
+        const name = $journals_sess.journal.new_journal_name;
+        const type = $journals_sess.journal.new_journal_type_code;
+
+        if (name && type) {
             try {
-                let data_kv = {
-                    // account: $slct.account_id,
-                    person_id_random: $ae_loc.person_id,
-                    name: $journals_sess.journal.new_journal_name,
-                    type_code: $journals_sess.journal.new_journal_type_code,
-                    cfg_json: {
-                        category_li: [{ code: '', name: 'Default' }]
+                const results = await journals_func.create_ae_obj__journal({
+                    api_cfg: $ae_api,
+                    account_id: $slct.account_id,
+                    data_kv: {
+                        person_id_random: $ae_loc.person_id,
+                        name,
+                        type_code: type,
+                        cfg_json: { category_li: [{ code: '', name: 'Default' }] }
                     }
-                };
-                journals_func
-                    .create_ae_obj__journal({
-                        api_cfg: $ae_api,
-                        account_id: $slct.account_id,
-                        data_kv: data_kv,
-                        log_lvl: log_lvl
-                    })
-                    .then((results) => {
-                        console.log('New journal created:', results);
-                        $journals_slct.journal_id = results?.journal_id_random;
-                    })
-                    .catch((error) => {
-                        console.error('Error creating journal:', error);
-                        alert('Failed to create journal.');
-                    })
-                    .finally(() => {
-                        if ($journals_slct.journal_id) {
-                            $journals_sess.show__modal_new__journal_obj = false;
-                            goto(`/journals/${$journals_slct.journal_id}`);
-                        }
-                    });
-                // console.log('New journal created:', result);
-                // $journals_sess.show__modal_new__journal_obj = false;
-                // goto(`/journals/${result.journal_id_random}`);
+                });
+                if (results?.journal_id_random) {
+                    $journals_sess.show__modal_new__journal_obj = false;
+                    goto(`/journals/${results.journal_id_random}`);
+                }
             } catch (error) {
-                console.error('Error creating journal:', error);
                 alert('Failed to create journal.');
             }
         } else {
-            alert('Please provide both name and type for the journal.');
+            alert('Please provide a name and type.');
         }
     }
 </script>
 
-<!-- Svelte Page for a AE Journals Module main page -->
-<section
-    class="
-    ae_journals
-    mx-auto
-    flex flex-col gap-1
-    items-center
-    min-h-full
-    max-h-max
-    min-w-full
-    max-w-max
-    space-y-2
-    "
->
-    <h1 class="h1 text-4xl text-center text-gray-800 dark:text-gray-200">
-        <!-- <Library size="1em" class="mx-1 inline-block" /> -->
-        <SquareLibrary size="1em" class="mx-1 inline-block text-neutral-800/60" />
-        Journals for {$ae_loc.account_name ?? 'Æ loading...'}
-        {$ae_loc.person.given_name ? `- ${$ae_loc.person.given_name}` : ''}
-    </h1>
-
-    <!-- Quick Add Section -->
-    <div class="w-full max-w-2xl mx-auto px-4 pb-4">
-        <AeCompJournalEntryQuickAdd class="shadow-lg" />
-    </div>
-
-    <div
-        class="flex flex-row flex-wrap gap-1 items-center justify-center w-full border-gray-200 border-y-2 py-2"
-        class:hidden={!$ae_loc.edit_mode}
-    >
-        <!-- Add new journal button -->
-        <button
-            type="button"
-            class="
-            btn btn-sm
-            preset-tonal-secondary border border-secondary-500
-            hover:preset-filled-secondary-500
-            transition
-            "
-            onclick={() => {
-                $journals_sess.show__modal_new__journal_obj = true;
-            }}
-            title="Create a new journal"
-        >
-            <!-- <FolderPlus class="mx-1" /> -->
-            <BookPlus class="mx-1" />
-            <span class="hidden md:inline"> New Journal </span>
-        </button>
-
-        <!-- Import Entries button -->
-        <button
-            type="button"
-            class="
-            btn btn-sm
-            preset-tonal-secondary border border-secondary-500
-            hover:preset-filled-secondary-500
-            transition
-            "
-            onclick={() => {
-                show_import_modal = true;
-            }}
-            title="Import entries from Markdown files"
-        >
-            <FileUp class="mx-1" />
-            <span class="hidden md:inline"> Import </span>
-        </button>
-
-        <!-- Show Journals Config button -->
-        <button
-            type="button"
-            class="
-            btn btn-sm
-            preset-tonal-secondary border border-secondary-500
-            hover:preset-filled-secondary-500
-            transition
-            "
-            onclick={() => {
-                $journals_sess.show__modal__journals_config = true;
-                // Redirect to the journals config page
-                // goto('/journals/config');
-            }}
-            title="Configure Journals"
-        >
-            <Wrench class="mx-1" />
-            <span class="hidden md:inline"> Journals Config </span>
-        </button>
-    </div>
-
-    <!-- <Element_data_store
-    ds_code="journals___overview"
-    ds_type="html"
-    for_type="journal"
-    for_id={$journals_slct.journal_id}
-    display="block"
-    class_li="p-2"
-    /> -->
-
-    <!-- <Element_data_store
-    ds_code="journals___example"
-    ds_type="html"
-    for_type="journal"
-    for_id={$journals_slct.journal_id}
-    ds_name="Default: Journals - Journals Example"
-    store="local"
-    display="block"
-    class_li="variant-ghost-surface p-2"
-    try_cache={true}
-    show_edit={false}
-    /> -->
-
-    {#await ae_acct.slct.journal_obj_li}
-        <div class="flex flex-col items-center justify-center p-8">
-            <Loader size="2em" class="animate-spin text-primary-500 mb-4" />
-            <span class="text-lg text-gray-600 dark:text-gray-400">Loading journals...</span>
+<div class="page_container flex flex-col gap-8 items-center w-full min-h-screen p-4 md:p-8">
+    
+    <!-- Header Section -->
+    <header class="text-center space-y-2 max-w-3xl">
+        <div class="flex items-center justify-center gap-3 mb-2">
+            <div class="p-3 bg-surface-500/10 rounded-2xl">
+                <SquareLibrary size="3em" class="text-primary-500" />
+            </div>
         </div>
-    {:then}
-        <!-- <span class="flex flex-row items-center justify-center">
-    <span class="fas fa-check text-green-500 mx-1"></span>
-    <span>Loaded</span>
-</span> -->
+        <h1 class="text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100">
+            Journals
+        </h1>
+        <p class="text-surface-600 dark:text-surface-400 font-medium">
+            Managed by <span class="text-primary-500">{$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>
+    </header>
 
-        {#if $lq__journal_obj_li && $lq__journal_obj_li?.length}
+    <!-- Quick Add Integrated Section -->
+    <section class="w-full max-w-2xl">
+        <div class="relative group">
+            <div class="absolute -inset-1 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+            <AeCompJournalEntryQuickAdd 
+                journals_li={$lq__journal_obj_li}
+                class="relative shadow-2xl rounded-xl overflow-hidden border border-surface-500/10 bg-surface-50 dark:bg-surface-900" 
+            />
+        </div>
+        <div class="mt-2 flex items-center justify-center gap-2 text-xs opacity-50 font-bold uppercase tracking-widest">
+            <Sparkles size="1em" />
+            <span>Fast Input Mode Active</span>
+        </div>
+    </section>
+
+    <!-- Administrative Action Bar (Edit Mode Only) -->
+    {#if $ae_loc.edit_mode}
+        <nav class="flex flex-row flex-wrap gap-3 items-center justify-center w-full py-4 border-y border-surface-500/10">
+            <button
+                type="button"
+                class="btn variant-filled-secondary shadow-lg hover:scale-105 transition-transform"
+                onclick={() => $journals_sess.show__modal_new__journal_obj = true}
+            >
+                <BookPlus size="1.2em" class="mr-2" />
+                <span>New Journal</span>
+            </button>
+
+            <button
+                type="button"
+                class="btn variant-filled-surface border border-surface-500/30 shadow-lg hover:scale-105 transition-transform"
+                onclick={() => show_import_modal = true}
+            >
+                <FileUp size="1.2em" class="mr-2" />
+                <span>Import</span>
+            </button>
+
+            <button
+                type="button"
+                class="btn variant-soft-surface shadow-lg hover:scale-105 transition-transform"
+                onclick={() => $journals_sess.show__modal__journals_config = true}
+            >
+                <Wrench size="1.2em" class="mr-2" />
+                <span>Configure</span>
+            </button>
+        </nav>
+    {/if}
+
+    <!-- Main List Section -->
+    <main class="w-full flex justify-center">
+        {#if $lq__journal_obj_li === undefined}
+            <div class="flex flex-col items-center justify-center p-20 gap-4 opacity-50">
+                <Loader2 size="3em" class="animate-spin" />
+                <p class="text-xl font-bold">Accessing Brain...</p>
+            </div>
+        {:else if $lq__journal_obj_li.length > 0}
             <Journal_obj_li {lq__journal_obj_li} />
         {:else}
-            <div class="flex flex-col items-center justify-center p-4 text-center">
-                <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">No journals found.</p>
-                <p class="text-md text-gray-500 dark:text-gray-300">
-                    Click the "New Journal" button above to create your first journal.
-                </p>
+            <div class="max-w-md text-center p-12 bg-surface-500/5 rounded-3xl border-2 border-dashed border-surface-500/20">
+                <SquareLibrary size="4em" class="mx-auto mb-4 opacity-20" />
+                <h3 class="text-2xl font-bold mb-2">No Journals Found</h3>
+                <p class="opacity-60 mb-6">You haven't created any journals yet. Start by creating one to begin your documentation journey.</p>
+                <button
+                    type="button"
+                    class="btn variant-filled-primary"
+                    onclick={() => $journals_sess.show__modal_new__journal_obj = true}
+                >
+                    Create Your First Journal
+                </button>
             </div>
         {/if}
-    {:catch error}
-        <div class="text-red-800">
-            <span class="fas fa-exclamation-triangle text-xl"></span>
-            <span>Error: {error.message}</span>
-        </div>
-    {/await}
-</section>
+    </main>
+</div>
 
-<!-- Modal for creating new journal -->
+<!-- Modals -->
 {#if $journals_sess.show__modal_new__journal_obj}
     <Modal
         title="Create New Journal"
         bind:open={$journals_sess.show__modal_new__journal_obj}
         autoclose={false}
-        placement="top-center"
-        size="xl"
-        class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
+        size="md"
+        class="bg-white dark:bg-surface-900 shadow-2xl rounded-2xl"
     >
-        <div class="modal">
-            <div class="modal-box">
-                <h3 class="font-bold text-lg">Create New Journal</h3>
-                <div class="py-4">
-                    <input
-                        type="text"
-                        placeholder="Journal Name"
-                        bind:value={$journals_sess.journal.new_journal_name}
-                        class="input input-bordered w-full mb-2"
-                    />
-                    <input
-                        type="text"
-                        placeholder="Journal Type"
-                        bind:value={$journals_sess.journal.new_journal_type_code}
-                        class="input input-bordered w-full mb-2"
-                    />
-                </div>
-                <div class="modal-action">
-                    <button class="btn preset-tonal-primary" onclick={create_journal}>Create</button
-                    >
-                    <button
-                        type="button"
-                        onclick={() => {
-                            // Close the modal
-                            $journals_sess.show__modal_new__journal_obj = false;
-                        }}
-                        class="btn preset-tonal-secondary"
-                    >
-                        Cancel
-                    </button>
-                </div>
+        <div class="p-2 space-y-4">
+            <div class="space-y-1">
+                <label class="label text-sm font-bold opacity-75">Journal Name</label>
+                <input
+                    type="text"
+                    placeholder="e.g. My Daily Logs"
+                    bind:value={$journals_sess.journal.new_journal_name}
+                    class="input variant-filled-surface rounded-lg"
+                />
+            </div>
+            <div class="space-y-1">
+                <label class="label text-sm font-bold opacity-75">Type Code</label>
+                <input
+                    type="text"
+                    placeholder="e.g. diary, log, notebook"
+                    bind:value={$journals_sess.journal.new_journal_type_code}
+                    class="input variant-filled-surface rounded-lg"
+                />
+            </div>
+            <div class="flex justify-end gap-2 pt-4">
+                <button type="button" class="btn variant-soft-surface" onclick={() => $journals_sess.show__modal_new__journal_obj = false}>Cancel</button>
+                <button type="button" class="btn variant-filled-primary font-bold" onclick={create_journal}>Create Journal</button>
             </div>
         </div>
     </Modal>
@@ -372,8 +220,5 @@
 <AeCompModalJournalImport
     bind:open={show_import_modal}
     onClose={() => (show_import_modal = false)}
-    onImportComplete={handle_import_complete}
-/>
-
-<style lang="postcss">
-</style>
+    onImportComplete={() => {}}
+/>
\ No newline at end of file
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 dc222965..1494d956 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
@@ -74,7 +74,7 @@
     // 1. Initial Load & Background Sync
     $effect(() => {
         const entry = $lq__journal_entry_obj;
-        if (entry && entry.updated_on) {
+        if (entry && (entry.updated_on || entry.created_on)) {
             // Only sync if saved and not currently processing/editing
             if (save_status === 'saved' && !has_unsaved_changes && !is_processing) {
                 const base = {
diff --git a/src/routes/journals/ae_comp__journal_entry_quick_add.svelte b/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
index bf86f016..72e0a33a 100644
--- a/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
@@ -2,25 +2,31 @@
     import { api } from '$lib/api/api';
     import { ae_api } from '$lib/stores/ae_stores';
     import { journals_slct, journals_loc, journals_trig } from '$lib/ae_journals/ae_journals_stores';
+    import { journals_func } from '$lib/ae_journals/ae_journals_functions';
+    import { BookType } from '@lucide/svelte';
     
     // Props
     let { 
         class: className = "",
-        placeholder = "Type your quick note... (First line = Title)"
+        placeholder = "Type your quick note... (First line = Title)",
+        journals_li = [] // Optional list of journals to select from
     } = $props();
 
     // State
     let note_content = $state("");
     let is_submitting = $state(false);
 
-    // Derived
-    // Determine target journal: Selected > Default Preference > First Available? 
-    let target_journal_id = $derived($journals_slct.journal_id || $journals_loc.qry__journal_id);
+    // Derived / Local target
+    // We prefer the persisted 'qry__journal_id' if we are on the main landing page
+    let selected_journal_id = $state($journals_loc.qry__journal_id);
+
+    // If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
+    let target_journal_id = $derived($journals_slct.journal_id || selected_journal_id);
 
     async function handle_submit() {
         if (!note_content.trim()) return;
         if (!target_journal_id) {
-            alert("No journal selected!");
+            alert("Please select a target journal first.");
             return;
         }
 
@@ -30,33 +36,32 @@
         let name = lines[0].substring(0, 100);
         if (lines[0].length > 100) name += "...";
         
-        // If content is just one line, name is content, content is content.
-        // If multiple lines, name is line 0, content is full text.
-        
-        const payload = {
-            journal_id: target_journal_id,
+        const data_kv = {
             name: name,
             content: note_content,
-            type_code: 'note', // Default to note
-            // created_on: handled by backend usually, or we can send ISO
-            enabled: true,
-            hidden: false
+            type_code: 'note',
+            private: false, // Ensure notes are public/decrypted by default
+            enable: true,
+            hide: false
         };
 
-        // Use the store value directly via $ prefix
-        const api_cfg = $ae_api;
-        
-        const res = await api.create_ae_obj_v3({
-            api_cfg: api_cfg,
-            obj_type: 'journal_entry',
-            fields: payload
-        });
+        try {
+            const res = await journals_func.create_ae_obj__journal_entry({
+                api_cfg: $ae_api,
+                journal_id: target_journal_id, // Pass string ID here
+                data_kv: data_kv,
+                log_lvl: 1
+            });
 
-        if (res) {
-            note_content = "";
-            // Trigger refresh
-            $journals_trig.journal_entry_li = true;
-        } else {
+            if (res) {
+                note_content = "";
+                // Trigger refresh
+                $journals_trig.journal_entry_li = true;
+            } else {
+                alert("Failed to create note.");
+            }
+        } catch (error) {
+            console.error("Error creating journal entry:", error);
             alert("Failed to create note.");
         }
 
@@ -68,39 +73,67 @@
             handle_submit();
         }
     }
+
+    function handle_journal_change(e: Event) {
+        const val = (e.target as HTMLSelectElement).value;
+        selected_journal_id = val;
+        $journals_loc.qry__journal_id = val; // Persist choice
+    }
 </script>
 
 <div class="card p-4 space-y-4 variant-filled-surface {className}">
-    <header class="flex justify-between items-center">
-        <h3 class="h3">Quick Add</h3>
-        {#if !target_journal_id}
+    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+        <h3 class="h3 flex items-center gap-2">
+            <BookType size="1.2em" class="text-primary-500" />
+            Quick Add
+        </h3>
+        
+        {#if journals_li && journals_li.length > 0}
+            <div class="w-full sm:w-auto">
+                <select 
+                    class="select select-sm variant-filled-surface border-surface-500/30 font-bold"
+                    value={target_journal_id}
+                    onchange={handle_journal_change}
+                >
+                    <option value="" disabled selected={!target_journal_id}>Select Target Journal...</option>
+                    {#each journals_li as journal}
+                        <option value={journal.id}>{journal.name}</option>
+                    {/each}
+                </select>
+            </div>
+        {:else if !target_journal_id}
             <span class="badge variant-filled-error">No Journal Selected</span>
         {/if}
     </header>
     
     <textarea 
-        class="textarea" 
-        rows="3" 
-        bind:value={note_content} 
+        class="textarea variant-filled-surface border-surface-500/20"
+        rows="3"
+        bind:value={note_content}
         {placeholder}
         onkeydown={handle_keydown}
         disabled={is_submitting}
     ></textarea>
 
-    <div class="flex justify-end space-x-2">
-        <button 
-            class="btn variant-ghost-surface"
-            onclick={() => note_content = ""}
-            disabled={is_submitting || note_content.length === 0}
-        >
-            Clear
-        </button>
-        <button 
-            class="btn variant-filled-primary"
-            onclick={handle_submit}
-            disabled={is_submitting || !target_journal_id || note_content.length === 0}
-        >
-            {#if is_submitting}Saving...{:else}Add Note{/if}
-        </button>
+    <div class="flex justify-between items-center">
+        <span class="text-[10px] opacity-50 font-mono uppercase tracking-tighter hidden sm:block">
+            Press Ctrl + Enter to save
+        </span>
+        <div class="flex justify-end space-x-2 grow sm:grow-0">
+            <button 
+                class="btn btn-sm variant-ghost-surface"
+                onclick={() => note_content = ""}
+                disabled={is_submitting || note_content.length === 0}
+            >
+                Clear
+            </button>
+            <button 
+                class="btn btn-sm variant-filled-primary font-bold shadow-md"
+                onclick={handle_submit}
+                disabled={is_submitting || !target_journal_id || note_content.length === 0}
+            >
+                {#if is_submitting}Saving...{:else}Add Note{/if}
+            </button>
+        </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/journals/ae_comp__journal_obj_li.svelte b/src/routes/journals/ae_comp__journal_obj_li.svelte
index 14c35c13..3ccf8d06 100644
--- a/src/routes/journals/ae_comp__journal_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_li.svelte
@@ -1,31 +1,14 @@
 <script lang="ts">
-    // let log_lvl: number = 0;
-
-    // *** Import Svelte specific
-    // import { goto } from '$app/navigation';
-
-    // *** Import other supporting libraries
-    // import { Spinner } from 'flowbite-svelte';
-    import { BookOpenText, BookType } from '@lucide/svelte';
-
-    // *** Import Aether specific variables and functions
+    /**
+     * ae_comp__journal_obj_li.svelte
+     * Modernized Journal List Component
+     * Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
+     * Style: Tailwind 4 + Skeleton UI Reference Standard
+     */
+    import { BookOpenText, BookType, Hash, Calendar, Clock } from '@lucide/svelte';
     import { ae_util } from '$lib/ae_utils/ae_utils';
-    import {
-        ae_snip,
-        ae_loc,
-        ae_sess,
-        ae_api,
-        ae_trig,
-        slct,
-        slct_trigger
-    } from '$lib/stores/ae_stores';
-    import {
-        journals_loc,
-        journals_sess,
-        journals_slct
-    } from '$lib/ae_journals/ae_journals_stores';
+    import { ae_loc } from '$lib/stores/ae_stores';
 
-    // *** Setup Svelte properties
     interface Props {
         lq__journal_obj_li: any;
     }
@@ -33,128 +16,99 @@
     let { lq__journal_obj_li }: Props = $props();
 </script>
 
-<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
+<!-- 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 journals_journal_obj, index}
+        {#each $lq__journal_obj_li as journal, index}
             <div
                 class="
-            container journal journal_obj
-            border border-surface-500/30 rounded-lg p-3 mb-4 space-y-3
-            w-full max-w-2xl
-            flex flex-col items-center justify-center
-            bg-surface-50 dark:bg-surface-900
-            shadow-sm hover:shadow-md transition-shadow
-            "
-                class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) &&
-                    !$ae_loc.trusted_access}
-                class:opacity-50={journals_journal_obj.hide}
-                class:preset-filled-warning-100-900={!journals_journal_obj?.enable}
+                    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}
             >
-                <header
-                    class="
-                ae_header
-                flex flex-row gap-2 items-center justify-between
-                w-full
-                "
-                >
-                    <h3 class="journal__name text-xl md:text-2xl font-bold flex items-center gap-2 text-surface-900 dark:text-surface-100">
-                        <BookType size="1.25em" class="text-primary-500" />
-                        <span class="journal__name truncate">{journals_journal_obj.name}</span>
-                    </h3>
-
-                    <!-- Show a label if the type code is set -->
-                    {#if journals_journal_obj.type_code}
-                        <span
-                            class="
-                        preset-tonal-warning
-                        text-xs font-semibold
-                        mr-2 px-2.5 py-0.5
-                        rounded
-
-                        "
-                        >
-                            <!-- <span class="ae_label">Type:</span> -->
-                            <span class="ae_value">{journals_journal_obj.type_code}</span>
-                        </span>
-                    {/if}
-                </header>
-
-                <!-- {journals_journal_obj?.tmp_sort_3} -->
-
-                {#if journals_journal_obj.description && $ae_loc.edit_mode}
-                    <div
-                        class="
-                prose
-                space-y-1
-                journal__description
-                p-2
-                w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
-                font-mono
-                text-gray-900
-                dark:bg-blue-900 dark:text-gray-100
-                shadow-md rounded-lg
-                text-sm font-normal text-wrap word-break
-
-                prose-h1:underline prose-h1:decoration-double
-                prose-h2:underline
-                prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
-                prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
-                prose-li:m-0 prose-li:p-0 prose-li:line-height-none
-                "
-                    >
-                        {@html journals_journal_obj.description_md_html}
-                    </div>
-                {/if}
-
-                <div class="ae_options flex flex-row flex-wrap gap-3 items-center justify-center">
-                    <a
-                        href="/journals/{journals_journal_obj?.journal_id}"
-                        class="btn variant-filled-primary md:btn-lg font-bold shadow-lg hover:scale-105 transition-transform"
-                        title={`View: ${journals_journal_obj?.name}`}
-                    >
-                        <BookOpenText size="1.25em" />
-                        <span>Open Journal</span>
-
-                        {#if journals_journal_obj?.journal_entry_count}
-                            <span class="badge variant-filled-secondary ml-2">
-                                {journals_journal_obj?.journal_entry_count} {journals_journal_obj?.journal_entry_count === 1 ? 'entry' : 'entries'}
+                <!-- 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>
+                        
+                        {#if journal.type_code}
+                            <span class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold">
+                                {journal.type_code}
                             </span>
                         {/if}
-                    </a>
+                    </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>
 
-                <section
-                    class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
-                    class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
-                >
-                    <div class="ae_group">
-                        {#if !journals_journal_obj.updated_on}
-                            <span class="journal__created_on">
-                                <span class="ae_label">Created on:</span>
-                                <span class="ae_value"
-                                    >{ae_util.iso_datetime_formatter(
-                                        journals_journal_obj.created_on,
-                                        'datetime_12_long'
-                                    )}</span
-                                >
-                            </span>
-                        {:else}
-                            <span class="journal__updated_on">
-                                <span class="ae_label">Updated on:</span>
-                                <span class="ae_value"
-                                    >{ae_util.iso_datetime_formatter(
-                                        journals_journal_obj.updated_on,
-                                        'datetime_12_long'
-                                    )}</span
-                                >
-                            </span>
+                <!-- Bottom Section: Actions -->
+                <div class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3">
+                    <a
+                        href="/journals/{journal?.journal_id}"
+                        class="btn variant-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>
+
+                    <!-- 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>
+                        </div>
+                    {/if}
+                </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 variant-filled-surface shadow-sm" title="Hidden">🚫</span>
+                        {/if}
+                        {#if !journal.enable}
+                            <span class="badge-icon variant-filled-warning shadow-sm" title="Disabled">⚠️</span>
                         {/if}
                     </div>
-                </section>
+                {/if}
             </div>
         {/each}
     {:else}
-        No journals found at this time
+        <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>
\ No newline at end of file