diff --git a/src/lib/ae_journals/ae_journals_stores.ts b/src/lib/ae_journals/ae_journals_stores.ts
index 55e288ea..6f0fb9fe 100644
--- a/src/lib/ae_journals/ae_journals_stores.ts
+++ b/src/lib/ae_journals/ae_journals_stores.ts
@@ -39,7 +39,7 @@ let journals_local_data_struct: key_val = {
 
     llm__api_base_url: 'https://ai.dgrzone.com/api',
     llm__api_model: 'dgrzone-deepseek-8b-quick',
-    llm__api_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.4y5AStXZJAVnWRlgG3lVV0-xKIfMzqdNRuInGwT0ThQ',
+    llm__api_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.VObfR91GrX3j1vHbHZqGsOWEyrL981cbSWWjaXfYbUQ',
     llm__api_dangerous_browser: false, // This allows for use of localhost.
     llm__stream: false, // Whether to use streaming or not. Not all APIs support this.
     llm__timeout_ms: 60000, // 60 seconds
diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
index e37a48c6..9be4ff4c 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
@@ -190,6 +190,10 @@ code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>'
 /* *** END *** This should be moved out */
 
 
+let full_name_class_size: string = $state('text-[.80in]');
+let professional_title_class_size: string = $state('text-[.40in]');
+let affiliations_class_size: string = $state('text-[.60in]');
+let location_class_size: string = $state('text-[.40in]');
 
 let lq__event_badge_template_obj = $derived(liveQuery(async () => {
     if (log_lvl) {
@@ -199,24 +203,49 @@ let lq__event_badge_template_obj = $derived(liveQuery(async () => {
         .get($lq__event_badge_obj?.event_badge_template_id);
 
     full_name_override = $lq__event_badge_obj?.full_name_override ?? $lq__event_badge_obj?.full_name;
+    longest_full_name_override_part = longest_str_part(full_name_override ?? '');
 
-    // if (full_name_override) {
-    //     let name_parts = full_name_override.trim().split(' ');
-    //     longest_full_name_override_part = 0;
-    //     for (let part of name_parts) {
-    //         if (part.length > longest_full_name_override_part) {
-    //             longest_full_name_override_part = part.length;
-    //         }
-    //     }
-    // } else {
-    //     longest_full_name_override_part = 0;
-    // }
+    if (longest_full_name_override_part >= 9) {
+        full_name_class_size = 'text-[.70in]';
+    } else if (longest_full_name_override_part >= 7) {
+        full_name_class_size = 'text-[.80in]';
+    } else {
+        full_name_class_size = 'text-[.80in]';
+    }
 
     professional_title_override = $lq__event_badge_obj?.professional_title_override ?? $lq__event_badge_obj?.professional_title;
+    longest_professional_title_override_part = longest_str_part(professional_title_override ?? '');
+    if (longest_professional_title_override_part >= 13) {
+        professional_title_class_size = 'text-[.40in]';
+    } else if (longest_professional_title_override_part >= 10) {
+        professional_title_class_size = 'text-[.40in]';
+    } else if (longest_professional_title_override_part >= 7) {
+        professional_title_class_size = 'text-[.40in]';
+    } else {
+        professional_title_class_size = 'text-[.40in]';
+    }
 
     affiliations_override = $lq__event_badge_obj?.affiliations_override ?? $lq__event_badge_obj?.affiliations;
+    longest_affiliations_override_part = longest_str_part(affiliations_override ?? '');
 
     location_override = $lq__event_badge_obj?.location_override ?? $lq__event_badge_obj?.location;
+    longest_location_override_part = longest_str_part(location_override ?? '');
+    if (longest_location_override_part >= 55) {
+        location_class_size = 'text-[.30in]';
+    } else if (longest_location_override_part >= 45) {
+        location_class_size = 'text-[.35in]';
+    } else if (longest_location_override_part >= 35) {
+        location_class_size = 'text-[.40in]';
+    } else if (longest_location_override_part >= 25) {
+        location_class_size = 'text-[.40in]';
+    } else if (longest_location_override_part >= 20) {
+        location_class_size = 'text-[.40in]';
+    } else if (longest_location_override_part >= 15) {
+        location_class_size = 'text-[.40in]';
+    } else {
+        location_class_size = 'text-[.40in]';
+    }
+
 
     option_other_1_override = $lq__event_badge_obj?.option_other_1_override ?? $lq__event_badge_obj?.option_other_1;
     option_other_2_override = $lq__event_badge_obj?.option_other_2_override ?? $lq__event_badge_obj?.option_other_2;
@@ -241,7 +270,20 @@ function preventDefault(fn) {
     };
 }
 
-
+function longest_str_part(str: string) {
+    if (str) {
+        let parts = str.trim().split(' ');
+        let longest = 0;
+        for (let part of parts) {
+            if (part.length > longest) {
+                longest = part.length;
+            }
+        }
+        return longest;
+    } else {
+        return 0;
+    }
+}
 
 
 let qr_data_url: any = $state('');
@@ -348,438 +390,444 @@ onkeypress={() => {
         items-stretch justify-center
         p-2 m-0
         outline-2 outline-dashed outline-blue-500
+        min-h-[6.0in]
+        max-w-[8.5in] overflow-visible
         "
     >
+
 {#if $lq__event_badge_obj && $lq__event_badge_template_obj}
 
-    <!-- *** badge_front section start *** -->
-    <section
-        class="badge_front badge_type__{use_badge_type_code.toLowerCase()}
-            max-w-lg
-            p-0 m-0
-            text-center
-            relative
-            outline-2 outline-red-500/50 hover:outline-red-700/75
-            group
+<!-- max-w-lg -->
+<!-- *** badge_front section start *** -->
+<section
+    class="badge_front badge_type__{use_badge_type_code.toLowerCase()}
+        flex flex-col gap-1
+        items-stretch justify-between
+        min-h-[6.0in]
+        max-h-[6.0in]
+        w-[4in]
+        max-w-fit
+        p-0 m-0 overflow-visible
+        text-center
+        relative
+        outline-4 outline-red-500/50 hover:outline-red-700/75
+        group
+        "
+        >
+    <span
+        class="
+            print:hidden absolute top-1 left-4
+            text-xs italic
+            text-gray-500 group-hover:text-red-800
+            transition-all
             "
             >
+        Front of badge
+    </span>
+
+
+    <div
+        class="
+            print:hidden absolute top-1 right-4
+            hover:preset-tonal-secondary
+            transition-all group
+            flex flex-col gap-1 items-center justify-center
+            "
+            class:preset-outlined-warning-200-800={$ae_loc.edit_mode}
+            class:preset-tonal-warning={$ae_loc.edit_mode}
+        >
+    <button
+        class="
+            btn btn-sm text-xs
+            preset-tonal-warning preset-outlined-warning-100-900 hover:preset-filled-secondary-500
+            transition-all group
+            "
+        onclick={() => {
+            show_event_badge_tools_modal = true;
+            $ae_loc.edit_mode = !$ae_loc.edit_mode;
+        }}
+        title="Edit Badge Information"
+        >
+        {#if $ae_loc.edit_mode}
+            <span class="fas fa-times m-1"></span>
+        {:else}
+            <span class="fas fa-edit m-1"></span>
+        {/if}
         <span
             class="
-                print:hidden absolute top-1 left-4
-                text-xs italic
-                text-gray-500 group-hover:text-red-800
-                transition-all
+                hidden
+                group-hover:inline-block
+                text-xs
                 "
-                >
-            Front of badge
-        </span>
-
-
-        <div
-            class="
-                print:hidden absolute top-1 right-4
-                hover:preset-tonal-secondary
-                transition-all group
-                flex flex-col gap-1 items-center justify-center
-                "
-                class:preset-outlined-warning-200-800={$ae_loc.edit_mode}
-                class:preset-tonal-warning={$ae_loc.edit_mode}
-            >
-        <button
-            class="
-                btn btn-sm text-xs
-                preset-tonal-warning preset-outlined-warning-100-900 hover:preset-filled-secondary-500
-                transition-all group
-                "
-            onclick={() => {
-                show_event_badge_tools_modal = true;
-                $ae_loc.edit_mode = !$ae_loc.edit_mode;
-            }}
-            title="Edit Badge Information"
             >
             {#if $ae_loc.edit_mode}
-                <span class="fas fa-times m-1"></span>
+                Close Edit
             {:else}
-                <span class="fas fa-edit m-1"></span>
+                Edit Badge Information
             {/if}
-            <span
-                class="
-                    hidden
-                    group-hover:inline-block
-                    text-xs
-                    "
-                >
-                {#if $ae_loc.edit_mode}
-                    Close Edit
-                {:else}
-                    Edit Badge Information
-                {/if}
-            </span>
-        </button>
+        </span>
+    </button>
 
+    <div
+        class="w-md max-w-lg m-1 p-1"
+        class:hidden={!$ae_loc.edit_mode}>
+        <p class="text-xs italic text-gray-500">
+        Show list of fields that they can edit here. This may need to broken down in to sections that can be collapsed.
+        </p>
+        <ul class="text-left list-disc list-inside text-sm">
+            <li>Full Name</li>
+            <li>Professional Title</li>
+            <li>Affiliations</li>
+            <li>Location</li>
+            <li>Option Ticket 1</li>
+            <li>Option Ticket 2</li>
+            <li>Option Ticket 3</li>
+            <li>Option Other 1</li>
+            <li>Option Other 2</li>
+            <li>Badge Type</li>
+            <li>Allow Tracking</li>
+            <li>Show Print Message</li>
+            <li>Hide QR Code</li>
+        </ul>
+    </div>
+
+    </div>
+
+    {#if $lq__event_badge_template_obj.header_path}
         <div
-            class="w-md max-w-lg m-1 p-1"
-            class:hidden={!$ae_loc.edit_mode}>
-            <p class="text-xs italic text-gray-500">
-            Show list of fields that they can edit here. This may need to broken down in to sections that can be collapsed.
-            </p>
-            <ul class="text-left list-disc list-inside text-sm">
-                <li>Full Name</li>
-                <li>Professional Title</li>
-                <li>Affiliations</li>
-                <li>Location</li>
-                <li>Option Ticket 1</li>
-                <li>Option Ticket 2</li>
-                <li>Option Ticket 3</li>
-                <li>Option Other 1</li>
-                <li>Option Other 2</li>
-                <li>Badge Type</li>
-                <li>Allow Tracking</li>
-                <li>Show Print Message</li>
-                <li>Hide QR Code</li>
-            </ul>
-        </div>
-
-        </div>
-
-        {#if $lq__event_badge_template_obj.header_path}
-            <div class="badge_header image max-w-xl">
-                <img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check header path">
-            </div>
-        {:else}
-            <div class="badge_header logo_text">
-                <img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
-                <div class="banner_text">
-                    <div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
-                    <div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
-                </div>
-            </div>
-        {/if}
-
-        <div class="badge_body space-y-1">
-            <div class="person_name"
+            class="badge_header
+                image
+                min-h-[.50in]
+                max-h-[1.00in]
+                max-w-full
+                m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
                 >
-                <!-- NOTE: Need to add some logic if any part of the name is 9 characters or more to reduce the font size OR if the total length is more than 15ish to reduce the font size :NOTE -->
-                <!-- Examples: mSC-tTzL_OA, QLddtYl8sfo -->
+            <img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check header path">
+        </div>
+    {:else}
+        <div class="badge_header logo_text">
+            <img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
+            <div class="banner_text">
+                <div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
+                <div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
+            </div>
+        </div>
+    {/if}
 
-                <div class="full_name_override_all text-6xl"
-                    class:str_05={longest_full_name_override_part==5}
-                    class:str_06={longest_full_name_override_part==6}
-                    class:str_07={longest_full_name_override_part==7}
-                    class:str_08={longest_full_name_override_part==8}
-                    class:str_09={longest_full_name_override_part==9}
-                    class:str_10={longest_full_name_override_part==10}
-                    class:str_11={longest_full_name_override_part==11}
-                    class:str_12={longest_full_name_override_part==12}
-                    class:str_13={longest_full_name_override_part==13}
-                    class:str_14={longest_full_name_override_part==14}
-                    class:str_15={longest_full_name_override_part==15}
-                    class:str_16={longest_full_name_override_part==16}
-                    class:str_17={longest_full_name_override_part==17}
-                    class:str_20={longest_full_name_override_part>=20}
+    <div
+        class="badge_body
+            grow
+            max-h-[4in] m-0 p-0
+            overflow-clip
+            flex flex-col gap-1
+            items-stretch justify-between
+            "
+            >
+        <div
+            class="person_name
+                max-h-[3.0in] m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+            >
+            <!-- NOTE: Need to add some logic if any part of the name is 9 characters or more to reduce the font size OR if the total length is more than 15ish to reduce the font size :NOTE -->
+            <!-- Examples: mSC-tTzL_OA, QLddtYl8sfo -->
+
+            <div
+                class="full_name_override_all {full_name_class_size} leading-none"
+                >
+                <!-- <span class="float-right text-sm italic m-2">
+                {longest_full_name_override_part}&times; char
+                </span> -->
+                <!-- {#if $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->
+
+                <span class="full_name_override">
+                {#if full_name_override}
+                    {@html full_name_override.trim()}
+                {:else}
+                    -- no name --
+                {/if}
+                </span>
+
+                <!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
+
+            </div>
+
+            {#if professional_title_override}
+                <div
+                    class="professional_title
+                        {professional_title_class_size} leading-none
+                        italic
+                        "
                     >
-                    <!-- {#if $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->
-
-                    <span class="full_name_override">
-                    {#if full_name_override}
-                        {@html full_name_override.trim()}
-                    {:else}
-                        -- no name --
-                    {/if}
-                    </span>
-
-                    <!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
+                    {@html professional_title_override}
                 </div>
-
-                {#if professional_title_override}
-                    <div class="professional_title text-2xl"
-                        class:str_05={professional_title_override.length==5}
-                        class:str_06={professional_title_override.length==6}
-                        class:str_07={professional_title_override.length==7}
-                        class:str_08={professional_title_override.length==8}
-                        class:str_09={professional_title_override.length==9}
-                        class:str_10={professional_title_override.length==10}
-                        class:str_11={professional_title_override.length==11}
-                        class:str_12={professional_title_override.length==12}
-                        class:str_13={professional_title_override.length==13}
-                        class:str_14={professional_title_override.length==14}
-                        class:str_15={professional_title_override.length>=15}
-                        class:str_17={professional_title_override.length>=17}
-                        class:str_20={professional_title_override.length>=20}
-                        class:str_25={professional_title_override.length>=25}
-                        class:str_30={professional_title_override.length>=30}
-                        >
-                        {@html professional_title_override}
-                    </div>
-                {/if}
-            </div>
-
-            <!-- {#if $lq__event_badge_obj.pronouns}
-            <div class="pronouns">
-                <span class="pronouns">{@html $lq__event_badge_obj.pronouns}</span>
-            </div>
-            {/if} -->
-
-            <!-- {#if $lq__event_badge_obj.professional_title}
-            <div class="professional_title">
-                <span class="professional_title" class:str_25={$lq__event_badge_obj.professional_title.length>25}>{@html $lq__event_badge_obj.professional_title}</span>
-            </div>
-            {/if} -->
-
-            {#if affiliations_override || location_override}
-            <div class="affiliations_location">
-                {#if affiliations_override}
-                    <div class="affiliations text-4xl"
-                        class:str_05={affiliations_override.length==5}
-                        class:str_06={affiliations_override.length==6}
-                        class:str_07={affiliations_override.length==7}
-                        class:str_08={affiliations_override.length==8}
-                        class:str_09={affiliations_override.length==9}
-                        class:str_10={affiliations_override.length==10}
-                        class:str_11={affiliations_override.length==11}
-                        class:str_12={affiliations_override.length==12}
-                        class:str_13={affiliations_override.length==13}
-                        class:str_14={affiliations_override.length==14}
-                        class:str_15={affiliations_override.length>=15}
-                        class:str_20={affiliations_override.length>=20}
-                        class:str_25={affiliations_override.length>=25}
-                        class:str_35={affiliations_override.length>=35}
-                        class:str_45={affiliations_override.length>=45}
-                        class:str_55={affiliations_override.length>=55}
-                        >
-                        {@html affiliations_override}
-                    </div>
-                {/if}
-
-                {#if location_override}
-                    <div class="location text-2xl"
-                        class:str_15={location_override.length>=15}
-                        class:str_20={location_override.length>=20}
-                        class:str_25={location_override.length>=25}
-                        class:str_35={location_override.length>=35}
-                        class:str_45={location_override.length>=45}
-                        class:str_55={location_override.length>=55}
-                        >
-                            <span class="city state_province country">{@html location_override}</span>
-                    </div>
-                {/if}
-            </div>
-            {/if}
-
-            {#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || $lq__event_badge_template_obj.show_qr_front}
-            <div class="special">
-                <span class="badge_body_special_left">
-                    <!-- {#if option_ticket_1_override}<span class="ticket_1_code fg_red fas fa-star"></span>{/if} -->
-                    {#if option_ticket_1_override}<span class="ticket_1_code fg_green fas fa-star"></span>{/if}
-                </span>
-                <span class="badge_body_special_right">
-                    {#if option_ticket_2_override}
-                        <span class=" ticket_2_code fg_red fas fa-star"></span>
-                        <!-- <span class=" ticket_2_code fg_gold fas fa-star"></span> -->
-                    {/if}
-                    {#if option_ticket_3_override}
-                        <span class="ticket_3_code fg_blue fas fa-star"></span>
-                    {/if}
-                </span>
-                {#if $lq__event_badge_template_obj.show_qr_front}
-                {#await qr_data_url}
-                    Generating...
-                {:then result}
-                    {#if qr_data_url}
-                        <img class="qr_code mecard_qr" style="" src={qr_data_url} alt="missing QR code">
-                    {/if}
-                {/await}
-                {/if}
-            </div>
             {/if}
         </div>
 
-        <div class="badge_footer {use_badge_type_code.toLowerCase()}" title={use_badge_type_code}>
-            {#if (option_other_1_override && ['front_bool', 'front_back_bool'].includes(option_other_1_display_opt))}
-                <span class="badge_footer_special_left"><span class="fas fa-biohazard"></span></span>
-            {:else if (option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt))}
-                <span class="badge_footer_special_left">{@html option_other_1_override}</span>
-            {/if}
-
-            <span class="badge_footer_center {use_badge_type_code.toLowerCase()}">{@html use_badge_type}</span>
-
-            <!-- {#if $lq__event_badge_obj.other_2}
-                <span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
-            {/if} -->
-
-            {#if (option_other_2_override && ['front_bool', 'front_back_bool'].includes(option_other_2_display_opt))}
-                <span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
-            {:else if (option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt))}
-                <span class="badge_footer_special_right">{@html option_other_2_override}</span>
-            {/if}
-        </div>
-
-        <!-- {#if $lq__event_badge_template_obj.show_qr_front}
-        <div class="container qr_code">
-            {#await initial_loading_promise}
-                Generating...
-            {:then result}
-                {#if initial_loading_promise}
-                    <img class="mecard_qr qr_code" style="" src="/event/qr_image/event_badge_obj_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
-                {/if}
-            {/await}
+        <!-- {#if $lq__event_badge_obj.pronouns}
+        <div class="pronouns">
+            <span class="pronouns">{@html $lq__event_badge_obj.pronouns}</span>
         </div>
         {/if} -->
 
-        <!-- {#await initial_loading_promise}
+        <!-- {#if $lq__event_badge_obj.professional_title}
+        <div class="professional_title">
+            <span class="professional_title" class:str_25={$lq__event_badge_obj.professional_title.length>25}>{@html $lq__event_badge_obj.professional_title}</span>
+        </div>
+        {/if} -->
+
+        {#if affiliations_override || location_override}
+        <div
+            class="affiliations_location
+                max-h-[3.0in] m-0 p-0
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+            >
+            {#if affiliations_override}
+                <div
+                    class="affiliations
+                        {affiliations_class_size} leading-none
+                        "
+                    >
+                    {@html affiliations_override}
+                </div>
+            {/if}
+
+            {#if location_override}
+                <div
+                    class="location
+                        {location_class_size} leading-none
+                        "
+                    >
+                        <span class="city state_province country">{@html location_override}</span>
+                </div>
+            {/if}
+        </div>
+        {/if}
+
+        {#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || $lq__event_badge_template_obj.show_qr_front}
+        <div class="special">
+            <span class="badge_body_special_left">
+                <!-- {#if option_ticket_1_override}<span class="ticket_1_code fg_red fas fa-star"></span>{/if} -->
+                {#if option_ticket_1_override}<span class="ticket_1_code fg_green fas fa-star"></span>{/if}
+            </span>
+            <span class="badge_body_special_right">
+                {#if option_ticket_2_override}
+                    <span class=" ticket_2_code fg_red fas fa-star"></span>
+                    <!-- <span class=" ticket_2_code fg_gold fas fa-star"></span> -->
+                {/if}
+                {#if option_ticket_3_override}
+                    <span class="ticket_3_code fg_blue fas fa-star"></span>
+                {/if}
+            </span>
+            {#if $lq__event_badge_template_obj.show_qr_front}
+            {#await qr_data_url}
+                Generating...
+            {:then result}
+                {#if qr_data_url}
+                    <img class="qr_code mecard_qr" style="" src={qr_data_url} alt="missing QR code">
+                {/if}
+            {/await}
+            {/if}
+        </div>
+        {/if}
+    </div>
+
+    <div
+        class="badge_footer
+            {use_badge_type_code.toLowerCase()}
+            justify-self-end
+            min-h-[.25in]
+            max-h-[.50in]
+            max-w-full
+            m-0 p-0
+            overflow-hidden
+            flex flex-row gap-1 items-center justify-center
+            hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+            "
+        title={use_badge_type_code}
+        >THE FOOTER
+        {#if (option_other_1_override && ['front_bool', 'front_back_bool'].includes(option_other_1_display_opt))}
+            <span class="badge_footer_special_left"><span class="fas fa-biohazard"></span></span>
+        {:else if (option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt))}
+            <span class="badge_footer_special_left">{@html option_other_1_override}</span>
+        {/if}
+
+        <span class="badge_footer_center {use_badge_type_code.toLowerCase()}">{@html use_badge_type}</span>
+
+        <!-- {#if $lq__event_badge_obj.other_2}
+            <span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
+        {/if} -->
+
+        {#if (option_other_2_override && ['front_bool', 'front_back_bool'].includes(option_other_2_display_opt))}
+            <span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
+        {:else if (option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt))}
+            <span class="badge_footer_special_right">{@html option_other_2_override}</span>
+        {/if}
+    </div>
+
+    <!-- {#if $lq__event_badge_template_obj.show_qr_front}
+    <div class="container qr_code">
+        {#await initial_loading_promise}
             Generating...
         {:then result}
             {#if initial_loading_promise}
-                <img class="qr_code mecard_qr" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
+                <img class="mecard_qr qr_code" style="" src="/event/qr_image/event_badge_obj_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
             {/if}
-        {/await} -->
+        {/await}
+    </div>
+    {/if} -->
 
-        {#if $lq__event_badge_template_obj.show_qr_front}
-            {#await event_badge_qr_id_get_promise}
-                Generating...
-            {:then result}
-                {#if event_badge_qr_id_get_promise}
-                    <!-- {img_obj_url} -->
-
-                    <img
-                        class="qr_code mecard_qr"
-                        style=""
-                        class:v_hide_print={hide_qr}
-
-
-                        src={qr_data_url}
-                        alt="missing QR code"
-
-                        ondblclick={() => {
-                            // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
-                            (hide_qr) ? hide_qr = false : hide_qr = true;
-                        }}
-                        />
-                        <!-- src="{$cfg.api['base_url']}/qr/{$ae_loc.account_id}/{$lq__event_badge_obj.event_badge_id_random}?filename=qr_{$ae_loc.account_id}_{$lq__event_badge_obj.event_badge_id_random}_mecard.png" -->
-                {/if}
-            {/await}
+    <!-- {#await initial_loading_promise}
+        Generating...
+    {:then result}
+        {#if initial_loading_promise}
+            <img class="qr_code mecard_qr" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
         {/if}
+    {/await} -->
 
-    <!-- </div> --> <!-- badge class div end -->
-    </section>
-    <!-- *** badge section end *** -->
+    {#if $lq__event_badge_template_obj.show_qr_front}
+        {#await event_badge_qr_id_get_promise}
+            Generating...
+        {:then result}
+            {#if event_badge_qr_id_get_promise}
+                <!-- {img_obj_url} -->
+
+                <img
+                    class="qr_code mecard_qr"
+                    style=""
+                    class:v_hide_print={hide_qr}
 
 
-    <!-- *** badge_back (fold under) section start *** -->
-    <section
-        class="badge_back
-            max-w-lg
-            p-0 m-0
-            text-left
-            relative
-            outline-2 outline-green-500/50 hover:outline-green-700/75
-            group
+                    src={qr_data_url}
+                    alt="missing QR code"
+
+                    ondblclick={() => {
+                        // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
+                        (hide_qr) ? hide_qr = false : hide_qr = true;
+                    }}
+                    />
+                    <!-- src="{$cfg.api['base_url']}/qr/{$ae_loc.account_id}/{$lq__event_badge_obj.event_badge_id_random}?filename=qr_{$ae_loc.account_id}_{$lq__event_badge_obj.event_badge_id_random}_mecard.png" -->
+            {/if}
+        {/await}
+    {/if}
+
+<!-- </div> --> <!-- badge class div end -->
+</section>
+<!-- *** badge section end *** -->
+
+
+<!-- *** badge_back (fold under) section start *** -->
+<section
+    class="badge_back
+        flex flex-col gap-1
+        items-center justify-between
+        min-h-[6.0in]
+        max-h-[6.0in]
+        w-[4in]
+        max-w-fit
+        p-0 m-0 overflow-visible
+        text-left text-sm
+        relative
+        outline-4 outline-green-500/50 hover:outline-green-700/75
+        group
+        "
+        >
+
+    <span
+        class="
+            print:hidden absolute top-1 right-4
+            text-xs italic
+            text-gray-500 group-hover:text-green-800
             "
             >
+        Back of badge
+    </span>
 
-        <span
-            class="
-                print:hidden absolute top-1 right-4
-                text-xs italic
-                text-gray-500 group-hover:text-green-800
+    {#if $lq__event_badge_template_obj.secondary_header_path}
+        <div
+            class="badge_back_header
+                image
+                min-h-[1.00in]
+                max-h-[1.00in]
+                max-w-full
+                m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
                 "
                 >
-            Back of badge
-        </span>
-
-        {#if $lq__event_badge_template_obj.secondary_header_path}
-            <div class="badge_back_header image max-w-xl">
-                <img class="header_image" src="{$lq__event_badge_template_obj.secondary_header_path}" alt="check secondary header path">
+            <img class="header_image" src="{$lq__event_badge_template_obj.secondary_header_path}" alt="check secondary header path">
+        </div>
+    {:else if $lq__event_badge_template_obj.header_path}
+        <div class="badge_back_header image max-w-xl">
+            <img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check primary header path">
+        </div>
+    {:else}
+        <div class="badge_back_header logo_text">
+            <img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
+            <div class="banner_text">
+                <div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
+                <div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
             </div>
-        {:else if $lq__event_badge_template_obj.header_path}
-            <div class="badge_back_header image max-w-xl">
-                <img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check primary header path">
-            </div>
-        {:else}
-            <div class="badge_back_header logo_text">
-                <img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
-                <div class="banner_text">
-                    <div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
-                    <div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
-                </div>
-            </div>
-        {/if}
+        </div>
+    {/if}
 
-        <div class="badge_back_content">
 
-        <div class="container wifi_information">
+    <div
+        class="badge_back_content
+            grow
+            max-h-[6in] m-0 p-0
+            overflow-visible
+            flex flex-col gap-1
+            items-stretch justify-between
+            text-xs px-1
+            hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+            "
+        >
+
+        <div
+            class="wifi_information
+                    flex flex-row gap-4 items-center justify-center
+                    "
+                >
             {#if $lq__event_badge_template_obj.wireless_ssid}
-            <div class="wifi_label"><span class="fas fa-wifi"></span> WiFi:</div>
-            <div>
-                <div >Signal Name:
-                    <strong class="wifi_ssid f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_ssid}</strong>
-                </div>
-                <div >Access Code:
-                    <strong class="wifi_code f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_password}</strong>
-                </div>
+
+            <div class="grow flex flex-col gap-0 items-center justify-end">
+                <span class="w-full flex flex-row gap-1 items-center justify-start">
+                    <span class="w-20 text-gray-500 italic">
+                    Signal Name
+                    </span>
+                    <strong class="wifi_ssid font-bold font-mono text-lg tracking-widest leading-none">
+                        {$lq__event_badge_template_obj.wireless_ssid}
+                    </strong>
+                </span>
+                <span class="w-full flex flex-row gap-1 items-center justify-start">
+                    <span class="w-20 text-gray-500 italic">
+                        Access Code
+                    </span>
+                    <strong class="wifi_code font-bold font-mono text-lg tracking-widest leading-none">
+                        {$lq__event_badge_template_obj.wireless_password}
+                    </strong>
+                </span>
+            </div>
+            <div class="wifi_label flex flex-row-reverse gap-1 items-center justify-center text-xl text-gray-500">
+                <span class="fas fa-wifi"></span>
+                WiFi
             </div>
             {/if}
 
-            <div class="network_username_password">
+            <div class="network_username_password hidden">
                 Username = <span class="network_username">username</span><br />
                 Password = <span class="network_password">password</span>
             </div>
         </div>
 
-        <!-- <div class="container person_information qr_mecard">
-            <div>{$lq__event_badge_obj.given_name}'s QR Code (MeCard):</div>
-            {#await initial_loading_promise}
-                Generating...
-            {:then result}
-                <img class="person_information_qr qr_code" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=mecard_qr.png" alt="missing QR code">
-            {/await}
-        </div> -->
 
-        {#if $lq__event_badge_template_obj.show_qr_back}
-        <div class="container person_information qr_badge_id">
-            <div class="qr_badge_id_label f_bold">
-                {$lq__event_badge_obj.given_name}'s
-                QR Code and Badge ID:
-            </div>
-            {#await qr_data_url}
-                <!-- Must use this await when the image is generated. It either happens here or on the $effect with async -->
-                Generating...
-            {:then result}
-                {#if result}
-                <div class="qr_badge_id_part_1 flex flex-row items-center justify-between">
-
-
-                    <img
-                        class="qr_code mecard_qr max-w-48 hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white"
-                        class:v_hide_print={hide_qr}
-                        src={result}
-                        alt="badge QR code"
-                        ondblclick={() => {
-                            // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
-                            (hide_qr) ? hide_qr = false : hide_qr = true;
-                        }}
-                        />
-                    <div class="qr_badge_id_agreement fs_xs f_align_justify text-xs">
-                        {#if allow_tracking}
-                            <p>This was <strong>allowed</strong> at the time your badge was printed. You may opt-out at anytime.</p>
-                            <p>By allowing this QR code to be scanned by an exhibitor and/or industry supporter, you understand and agree that they may use your personal information.</p>
-                        {:else}
-                            <p>This was <strong>not</strong> allowed at the time your badge was printed. You may opt-in at anytime.</p>
-                            <p>If this QR code is scanned by an exhibitor and/or industry supporter, they will <strong>not</strong> have access to your information.</p>
-                        {/if}
-                    </div>
-                </div>
-                {/if}
-            {/await}
-
-            <div>
-                <!-- Badge ID: -->
-                <span class="event_badge_id f_bold f_spacing_mono f_ucase fs_xl fs_hover_xxl">{$lq__event_badge_obj.event_badge_id_random}</span>
-            </div>
-        </div>
-        {/if}
-
-        <div class="container app_information text-xs">
+        <div class="app_information text-xs">
             <strong>Download Meeting App:</strong>
             <!-- <img style="width: .75in; float: right;" src="/event/qr_image/testing123" alt="missing person information QR code"> -->
             <ol style="margin: 0; padding-top: 0; padding-bottom: 0;">
@@ -792,7 +840,7 @@ onkeypress={() => {
         <!-- {#if $lq__event_badge_template_obj.attendee_info} -->
         <!-- Information for attendee only (banquets, receptions, and other) -->
         {#if $lq__event_badge_obj.other_1 || $lq__event_badge_obj.other_2 || $lq__event_badge_obj.ticket_1_code || $lq__event_badge_obj.ticket_2_code || $lq__event_badge_obj.ticket_3_code || $lq__event_badge_obj.ticket_4_code || $lq__event_badge_obj.ticket_5_code}
-        <div class="container attendee_information">
+        <div class="attendee_information">
             <!-- <strong>Attendee Info:</strong> -->
             <ul>
             {#if $lq__event_badge_obj.ticket_1_code}
@@ -871,20 +919,83 @@ onkeypress={() => {
         </div>
         {/if}
 
+        {#if $lq__event_badge_template_obj.show_qr_back}
+        <div
+            class="person_information qr_badge_id
+                "
+                >
+            <div class="qr_badge_id_label text-center">
+                <strong>
+                {$lq__event_badge_obj.given_name}'s
+                </strong>
+                Badge ID and QR Code:
+            </div>
+            <div class="text-center">
+                <span
+                    class="event_badge_id
+                        uppercase font-bold font-mono text-lg tracking-widest leading-tight
+                        hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
+                        z-10
+                        "
+                    >
+                    {$lq__event_badge_obj.event_badge_id_random
+                    }
+                </span>
+            </div>
+            {#await qr_data_url}
+                <!-- Must use this await when the image is generated. It either happens here or on the $effect with async -->
+                Generating...
+            {:then result}
+                {#if result}
+                <div class="qr_badge_id_part_1 flex flex-row items-center justify-between">
+                    <img
+                        class="qr_code mecard_qr
+                            image
+                            w-[1.5in]
+                            max-w-48
+                            hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
+                            z-10
+                            "
+                        class:v_hide_print={hide_qr}
+                        src={result}
+                        alt="badge QR code"
+                        ondblclick={() => {
+                            // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
+                            (hide_qr) ? hide_qr = false : hide_qr = true;
+                        }}
+                        />
+                    <div
+                        class="qr_badge_id_agreement fs_xs f_align_justify
+                            text-xs
+                            italic
+                            "
+                        >
+                        {#if allow_tracking}
+                            <p>This was <strong>allowed</strong> at the time your badge was printed. You may opt-out at anytime.</p>
+                            <p>By allowing this QR code to be scanned by an exhibitor or staff, you understand and agree that they may use your personal information.</p>
+                        {:else}
+                            <p>Tracking was <strong>not</strong> allowed at the time your badge was printed. You may opt-in at anytime.</p>
+                            <p>If this QR code is scanned by an exhibitor or staff, they will <strong>not</strong> have access to your information.</p>
+                        {/if}
+                    </div>
+                </div>
+                {/if}
+            {/await}
         </div>
+        {/if}
 
-        <div class="badge_back_footer text-xxs italic text-gray-500">
-            <!-- This will need to be rotated with CSS for printing on the fanfold badges. -->
-            Fold in half here
-            <!-- <ol>
-            <li>Fold this section under the badge.</li>
-            <li>Insert into badge holder.</li>
-            </ol> -->
-        </div>
+    </div>
 
-    <!-- </div> --> <!-- fold class div end -->
-    </section>
-    <!-- *** fold under section end *** -->
+    <div class="badge_back_footer text-xxs italic text-gray-500">
+        <!-- IMPORTANT: This will need to be rotated with CSS for printing on the fanfold badges. -->
+        Fold in half here
+        <!-- Fold this section under the badge.
+        Insert into badge holder. -->
+    </div>
+
+<!-- </div> --> <!-- fold class div end -->
+</section>
+<!-- *** fold under section end *** -->
 
 
     <!-- *** receipt section start *** -->
@@ -1007,7 +1118,12 @@ onkeypress={() => {
 
 
 
-<pre class="whitespace-pre-wrap break-words text-xs max-h-24 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded">
+<pre
+    class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
+        mt-4
+        print:hidden
+        "
+    >
     {JSON.stringify($lq__event_badge_obj, null, 2)}
 </pre>