diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index 6e93db8c0..dc017637f 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -728,6 +728,194 @@
     vertical-align: top;
 }
 
+/* Custom Element cards */
+.ce-card {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-bottom: 6px;
+    background: #fff;
+    border-left: 3px solid #ddd;
+}
+
+.ce-card-configured {
+    border-left-color: #37a8db;
+}
+
+.ce-card-collapsed {
+    border-left-color: #ccc;
+}
+
+.ce-card-header {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    cursor: pointer;
+    gap: 8px;
+    user-select: none;
+}
+
+.ce-card-header:hover {
+    background: #f5f5f5;
+}
+
+.ce-card-header .ios7-switch {
+    flex-shrink: 0;
+}
+
+.ce-card-name {
+    font-weight: bold;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.ce-card-preview {
+    color: #888;
+    font-size: 11px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: right;
+}
+
+.ce-card-chevron {
+    font-size: 14px;
+    color: #888;
+    flex-shrink: 0;
+    width: 16px;
+    text-align: center;
+}
+
+.ce-card-body {
+    padding: 8px 10px;
+    border-top: 1px solid #eee;
+}
+
+.ce-slot-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+}
+
+.ce-slot-row:last-child {
+    margin-bottom: 0;
+}
+
+.ce-source-select {
+    width: auto !important;
+    flex-shrink: 0;
+}
+
+.ce-format-select {
+    width: auto !important;
+    flex-shrink: 0;
+}
+
+.ce-slot-value {
+    flex: 1;
+    min-width: 0;
+}
+
+.ce-slot-value input,
+.ce-slot-value select {
+    width: 100% !important;
+}
+
+/* Icon picker popup */
+.ce-icon-picker-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ce-icon-picker-popup {
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    padding: 12px;
+    max-width: 520px;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.ce-icon-picker-title {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.ce-icon-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+    gap: 2px;
+}
+
+.ce-icon-picker-tile {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    cursor: pointer;
+    background: #fafafa;
+}
+
+.ce-icon-picker-tile:hover {
+    border-color: #37a8db;
+    background: #e8f4fd;
+}
+
+.ce-icon-picker-tile.ce-icon-picker-selected {
+    border-color: #37a8db;
+    background: #d0ecfa;
+    box-shadow: 0 0 0 1px #37a8db;
+}
+
+.ce-icon-picker-tile img {
+    max-width: 20px;
+    max-height: 20px;
+    image-rendering: pixelated;
+}
+
+/* Icon picker inline button */
+.ce-ico-picker-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border: 1px solid silver !important;
+    border-radius: 3px;
+    cursor: pointer;
+    background: #fafafa;
+    min-height: 24px;
+}
+
+.ce-ico-picker-btn:hover {
+    border-color: #37a8db !important;
+    background: #e8f4fd;
+}
+
+.ce-ico-preview {
+    width: 16px;
+    height: 16px;
+    image-rendering: pixelated;
+}
+
+.ce-ico-label {
+    font-size: 11px;
+    color: #666;
+}
+
 .osdCustomElement_main_table {
     width: 100%;
     table-layout: fixed;
diff --git a/tabs/osd.js b/tabs/osd.js
index 563d4d29c..f2a2724dd 100644
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -917,6 +917,14 @@ OSD.constants = {
         },
     ],
 
+    // Custom Element format options for GV/LC source types
+    CE_FORMATS: [
+        {label: '0', offset: 0}, {label: '00', offset: 1}, {label: '000', offset: 2},
+        {label: '0000', offset: 3}, {label: '00000', offset: 4}, {label: '0.0', offset: 5},
+        {label: '0.00', offset: 6}, {label: '00.0', offset: 7}, {label: '00.00', offset: 8},
+        {label: '000.0', offset: 9}, {label: '000.00', offset: 10}, {label: '0000.0', offset: 11},
+    ],
+
     // All display fields, from every version, do not remove elements, only add!
     ALL_DISPLAY_GROUPS: [
         {
@@ -2999,6 +3007,13 @@ OSD.GUI.updateFields = function(event) {
                         }
 
                         OSD.GUI.saveItem(item);
+
+                        // Sync card header toggle if applicable
+                        var ceMatch = item.name.match(/^CUSTOM_ELEMENT_(\d+)$/);
+                        if (ceMatch) {
+                            var $card = $('.ce-card[data-ce-index="' + (parseInt(ceMatch[1]) - 1) + '"]');
+                            $card.find('.ce-card-header input[type="checkbox"]').prop('checked', itemData.isVisible);
+                        }
                     })
             );
 
@@ -3058,6 +3073,9 @@ OSD.GUI.updateFields = function(event) {
         updatePilotAndCraftNames();
         updatePanServoPreview();
     }
+
+    // Inject custom element cards into the left panel group
+    injectCustomElementCards();
 };
 
 OSD.GUI.removeBottomLines = function(){
@@ -3751,108 +3769,401 @@ TABS.osd.initialize = function (callback) {
     });
 };
 
+// Icon picker popup — shows a grid of OSD font characters for selection
+function openIconPicker($targetInput) {
+    // Close any existing picker
+    $('.ce-icon-picker-overlay').remove();
+
+    var $overlay = $('<div>').addClass('ce-icon-picker-overlay').on('click', function() {
+        $(this).remove();
+    });
+
+    var $popup = $('<div>').addClass('ce-icon-picker-popup').on('click', function(e) {
+        e.stopPropagation();
+    });
+    $popup.append($('<div>').addClass('ce-icon-picker-title').text('Select OSD Icon'));
+
+    var $grid = $('<div>').addClass('ce-icon-picker-grid');
+    var currentVal = parseInt($targetInput.val()) || 0;
+
+    for (var c = 1; c <= 255; c++) {
+        var url = (FONT.data && FONT.data.character_image_urls[c]) ? FONT.draw(c) : '';
+        var $tile = $('<div>').addClass('ce-icon-picker-tile')
+            .attr('data-char', c)
+            .attr('title', '#' + c)
+            .append($('<img>').attr('src', url));
+        if (c === currentVal) {
+            $tile.addClass('ce-icon-picker-selected');
+        }
+        $tile.on('click', function() {
+            var val = parseInt($(this).attr('data-char'));
+            $targetInput.val(val).trigger('change');
+            $overlay.remove();
+        });
+        $grid.append($tile);
+    }
+
+    $popup.append($grid);
+    $overlay.append($popup);
+    $('body').append($overlay);
+}
+
+// Convert source index (0-6) + format index to the flat type value (0-28)
+// Sources: 0=None, 1=Text, 2=Icon Static, 3=Icon GV, 4=Icon LC, 5=GV, 6=LC
+function ceSourceFormatToType(source, formatIndex) {
+    if (source <= 4) return source; // None, Text, Icon Static, Icon GV, Icon LC
+    if (source === 5) return 5 + formatIndex;  // GV: types 5-16
+    if (source === 6) return 17 + formatIndex;  // LC: types 17-28
+    return 0;
+}
+
+// Convert flat type value (0-28) to {source, formatIndex}
+function ceTypeToSourceFormat(type) {
+    if (type <= 4) return {source: type, formatIndex: 0};
+    if (type <= 16) return {source: 5, formatIndex: type - 5};  // GV
+    if (type <= 28) return {source: 6, formatIndex: type - 17};  // LC
+    return {source: 0, formatIndex: 0};
+}
+
 function createCustomElements(){
     if(FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount == 0){
-        $('.custom-element-container').remove();
+        $('.custom-element-container').hide();
         return;
     }
-
+    // Hide the right panel — configuration moves to left-panel cards
+    $('.custom-element-container').hide();
     $('#INAVCharacterMapDocURL').attr('href', globalSettings.configuratorTreeLocation + 'resources/osd/INAV%20Character%20Map.md');
+}
 
-    var customElementsContainer = $('#osdCustomElements');
-    var init = true;
-
-    for(var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount; i++){
-        var label = $('<label>');
-
-        var customElementTable = $('<table>').addClass('osdCustomElement_main_table');
-        var customElementRowType = $('<tr>').data('row', i);
-        var customElementRowValue = $('<tr>').data('row', i);
-
-        var customElementLabel = $('<tr>');
-        customElementLabel.append($('<td>').attr('colspan', 2).append($('<span>').html(i18n.getMessage("custom_element") + ' ' + (i + 1))));
-
-        for(var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++){
-            var select = $('<select>').addClass('osdCustomElement-' + i + '-part-' + ii + '-type').data('valueCellClass', 'osdCustomElement-' + i + '-part-' + ii + '-value').html(`
-                        <option value="0">none</option>
-                        <option data-value="text" value="1">Text</option>
-                        <option data-value="ico" value="2">Icon Static</option>
-                        <option data-value="ico_gv" value="3">Icon from Global Variable</option>
-                        <option data-value="ico_lc" value="4">Icon from Logic Condition</option>
-                        <option data-value="gv" value="5">Global Variable 0</option>
-                        <option data-value="gv" value="6">Global Variable 00</option>
-                        <option data-value="gv" value="7">Global Variable 000</option>
-                        <option data-value="gv" value="8">Global Variable 0000</option>
-                        <option data-value="gv" value="9">Global Variable 00000</option>
-                        <option data-value="gv" value="10">Global Variable 0.0</option>
-                        <option data-value="gv" value="11">Global Variable 0.00</option>
-                        <option data-value="gv" value="12">Global Variable 00.0</option>
-                        <option data-value="gv" value="13">Global Variable 00.00</option>
-                        <option data-value="gv" value="14">Global Variable 000.0</option>
-                        <option data-value="gv" value="15">Global Variable 000.00</option>
-                        <option data-value="gv" value="16">Global Variable 0000.0</option>
-                        <option data-value="lc" value="17">Logic Condition 0</option>
-                        <option data-value="lc" value="18">Logic Condition 00</option>
-                        <option data-value="lc" value="19">Logic Condition 000</option>
-                        <option data-value="lc" value="20">Logic Condition 0000</option>
-                        <option data-value="lc" value="21">Logic Condition 00000</option>
-                        <option data-value="lc" value="22">Logic Condition 0.0</option>
-                        <option data-value="lc" value="23">Logic Condition 0.00</option>
-                        <option data-value="lc" value="24">Logic Condition 00.0</option>
-                        <option data-value="lc" value="25">Logic Condition 00.00</option>
-                        <option data-value="lc" value="26">Logic Condition 000.0</option>
-                        <option data-value="lc" value="27">Logic Condition 000.00</option>
-                        <option data-value="lc" value="28">Logic Condition 0000.0</option>
-                        `);
-
-            customElementRowType.append($('<td>').append(select));
-            customElementRowValue.append($('<td>').addClass('osdCustomElement-' + i + '-part-' + ii + '-value').append(
-                $('<input>').addClass('value').addClass('text').attr('type', 'text').attr('maxlength', FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize).hide()).append(
-                $('<input>').addClass('value').addClass('ico').attr('min', 1).attr('max', 255).hide()).append(
-                $('<select>').addClass('value').addClass('ico_gv').html(getGVoptions()).hide()).append(
-                $('<select>').addClass('value').addClass('ico_lc').html(getLCoptions()).hide()).append(
-                $('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide()).append(
-                $('<select>').addClass('value').addClass('lc').html(getLCoptions()).hide()
-            ));
-
-            select.change(function(){
-                var dataValue = $(this).find(':selected').data('value');
-                var valueBlock = $('.' + $(this).data('valueCellClass'))
-                valueBlock.find('.value').hide();
-                valueBlock.find('.' + dataValue).show();
-                if(!init){
-                    updateOSDCustomElementsDisplay();
-                }
-            });
+// Build one slot row (source select + value inputs) inside a card body
+function buildSlotRow(i, ii) {
+    var $row = $('<div>').addClass('ce-slot-row');
+
+    // Hidden original type select — preserves class names for fillCustomElementsValues/customElementGetDataForRow
+    var $hiddenType = $('<select>').addClass('osdCustomElement-' + i + '-part-' + ii + '-type')
+        .data('valueCellClass', 'osdCustomElement-' + i + '-part-' + ii + '-value')
+        .css('display', 'none')
+        .html(
+            '<option value="0">none</option>' +
+            '<option data-value="text" value="1">Text</option>' +
+            '<option data-value="ico" value="2">Icon Static</option>' +
+            '<option data-value="ico_gv" value="3">Icon from Global Variable</option>' +
+            '<option data-value="ico_lc" value="4">Icon from Logic Condition</option>' +
+            '<option data-value="gv" value="5">Global Variable 0</option>' +
+            '<option data-value="gv" value="6">Global Variable 00</option>' +
+            '<option data-value="gv" value="7">Global Variable 000</option>' +
+            '<option data-value="gv" value="8">Global Variable 0000</option>' +
+            '<option data-value="gv" value="9">Global Variable 00000</option>' +
+            '<option data-value="gv" value="10">Global Variable 0.0</option>' +
+            '<option data-value="gv" value="11">Global Variable 0.00</option>' +
+            '<option data-value="gv" value="12">Global Variable 00.0</option>' +
+            '<option data-value="gv" value="13">Global Variable 00.00</option>' +
+            '<option data-value="gv" value="14">Global Variable 000.0</option>' +
+            '<option data-value="gv" value="15">Global Variable 000.00</option>' +
+            '<option data-value="gv" value="16">Global Variable 0000.0</option>' +
+            '<option data-value="lc" value="17">Logic Condition 0</option>' +
+            '<option data-value="lc" value="18">Logic Condition 00</option>' +
+            '<option data-value="lc" value="19">Logic Condition 000</option>' +
+            '<option data-value="lc" value="20">Logic Condition 0000</option>' +
+            '<option data-value="lc" value="21">Logic Condition 00000</option>' +
+            '<option data-value="lc" value="22">Logic Condition 0.0</option>' +
+            '<option data-value="lc" value="23">Logic Condition 0.00</option>' +
+            '<option data-value="lc" value="24">Logic Condition 00.0</option>' +
+            '<option data-value="lc" value="25">Logic Condition 00.00</option>' +
+            '<option data-value="lc" value="26">Logic Condition 000.0</option>' +
+            '<option data-value="lc" value="27">Logic Condition 000.00</option>' +
+            '<option data-value="lc" value="28">Logic Condition 0000.0</option>'
+        );
+
+    // Visible source select (7 options)
+    var $sourceSelect = $('<select>').addClass('ce-source-select').html(
+        '<option value="0">None</option>' +
+        '<option value="1">Text</option>' +
+        '<option value="2">Icon (static)</option>' +
+        '<option value="3">Icon (GV)</option>' +
+        '<option value="4">Icon (LC)</option>' +
+        '<option value="5">Global Variable</option>' +
+        '<option value="6">Logic Condition</option>'
+    );
+
+    // Visible format select (12 options, for GV/LC only)
+    var formatHtml = '';
+    for (var fi = 0; fi < OSD.constants.CE_FORMATS.length; fi++) {
+        formatHtml += '<option value="' + fi + '">' + OSD.constants.CE_FORMATS[fi].label + '</option>';
+    }
+    var $formatSelect = $('<select>').addClass('ce-format-select').html(formatHtml).hide();
+
+    // Forward bridge: visible source/format → hidden type
+    function updateHiddenType() {
+        var src = parseInt($sourceSelect.val());
+        var fmt = parseInt($formatSelect.val()) || 0;
+        var type = ceSourceFormatToType(src, fmt);
+        $hiddenType.val(type).trigger('change');
+    }
+    $sourceSelect.on('change', function() {
+        var src = parseInt($(this).val());
+        if (src === 5 || src === 6) {
+            $formatSelect.show();
+        } else {
+            $formatSelect.hide();
+        }
+        updateHiddenType();
+    });
+    $formatSelect.on('change', updateHiddenType);
+
+    // Icon picker: hidden input + clickable preview button
+    var $icoInput = $('<input>').addClass('value').addClass('ico').attr('type', 'hidden').attr('min', 1).attr('max', 255);
+    var $icoBtn = $('<div>').addClass('value ico ce-ico-picker-btn').hide()
+        .append($('<img>').addClass('ce-ico-preview'))
+        .append($('<span>').addClass('ce-ico-label'));
+    // Update preview when input value changes
+    $icoInput.on('change', function() {
+        var val = parseInt($(this).val()) || 0;
+        if (val > 0 && FONT.data && FONT.data.character_image_urls[val]) {
+            $icoBtn.find('.ce-ico-preview').attr('src', FONT.draw(val));
+            $icoBtn.find('.ce-ico-label').text('#' + val);
+        } else {
+            $icoBtn.find('.ce-ico-preview').attr('src', '');
+            $icoBtn.find('.ce-ico-label').text('Pick icon');
+        }
+    });
+    // Open popup grid on click
+    $icoBtn.on('click', function(e) {
+        e.stopPropagation();
+        openIconPicker($icoInput);
+    });
+
+    // Value container
+    var $valueDiv = $('<div>').addClass('ce-slot-value osdCustomElement-' + i + '-part-' + ii + '-value')
+        .append($('<input>').addClass('value').addClass('text').attr('type', 'text').attr('maxlength', FC.OSD_CUSTOM_ELEMENTS.settings.customElementTextSize).hide())
+        .append($icoInput)
+        .append($icoBtn)
+        .append($('<select>').addClass('value').addClass('ico_gv').html(getGVoptions()).hide())
+        .append($('<select>').addClass('value').addClass('ico_lc').html(getLCoptions()).hide())
+        .append($('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide())
+        .append($('<select>').addClass('value').addClass('lc').html(getLCoptions()).hide());
+
+    // Reverse bridge: hidden type change → update visible selects (for fillCustomElementsValues)
+    $hiddenType.on('change', function() {
+        var type = parseInt($(this).val());
+        var sf = ceTypeToSourceFormat(type);
+        $sourceSelect.val(sf.source);
+        if (sf.source === 5 || sf.source === 6) {
+            $formatSelect.show().val(sf.formatIndex);
+        } else {
+            $formatSelect.hide();
+        }
+        var dataValue = $(this).find(':selected').data('value');
+        $valueDiv.find('.value').hide();
+        if (dataValue) {
+            $valueDiv.find('.' + dataValue).show();
+        }
+    });
+
+    $row.append($hiddenType).append($sourceSelect).append($valueDiv).append($formatSelect);
+    return $row;
+}
+
+// Build visibility row for a custom element card
+function buildVisibilityRow(i) {
+    var $row = $('<div>').addClass('ce-slot-row');
+
+    var $selectVisibility = $('<select>').addClass('osdCustomElement-' + i + '-visibility-type')
+        .data('valueCellClass', 'osdCustomElement-' + i + '-visibility-value')
+        .html(
+            '<option value="0">Always</option>' +
+            '<option data-value="gv" value="1">Global Variable</option>' +
+            '<option data-value="lc" value="2">Logic Condition</option>'
+        );
+
+    var $valueDiv = $('<div>').addClass('ce-slot-value osdCustomElement-' + i + '-visibility-value')
+        .append($('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide())
+        .append($('<select>').addClass('value').addClass('lc').html(getLCoptions()).hide());
+
+    $selectVisibility.on('change', function() {
+        var dataValue = $(this).find(':selected').data('value');
+        $valueDiv.find('.value').hide();
+        if (dataValue) {
+            $valueDiv.find('.' + dataValue).show();
+        }
+    });
+
+    $row.append($selectVisibility).append($valueDiv);
+    return $row;
+}
+
+// Build a single custom element card
+function buildCustomElementCard(i) {
+    var ceItemName = 'CUSTOM_ELEMENT_' + (i + 1);
+    var ceGroup = OSD.constants.ALL_DISPLAY_GROUPS.find(function(e) {
+        return e.name == "osdGroupOSDCustomElements";
+    });
+    var ceDisplayItem = null;
+    if (ceGroup && Array.isArray(ceGroup.items)) {
+        for (var ci = 0; ci < ceGroup.items.length; ci++) {
+            if (ceGroup.items[ci].name == ceItemName) {
+                ceDisplayItem = ceGroup.items[ci];
+                break;
+            }
         }
+    }
 
-        var selectVisibility = $('<select>').addClass('osdCustomElement-' + i + '-visibility-type').data('valueCellClass', 'osdCustomElement-' + i + '-visibility-value').html(`
-            <option value="0">always</option>
-            <option data-value="gv" value="1">Global Variable</option>
-            <option data-value="lc" value="2">Logic Condition</option>
-        `);
-        customElementRowType.append($('<td>').append(selectVisibility));
-        customElementRowValue.append($('<td>').addClass('osdCustomElement-' + i + '-visibility-value').append(
-            $('<select>').addClass('value').addClass('gv').html(getGVoptions()).hide()
-        ).append(
-            $('<select>').addClass('value').addClass('lc').html(getLCoptions()).hide()
-        ));
-
-        selectVisibility.change(function(){
-            var dataValue = $(this).find(':selected').data('value');
-            var valueBlock = $('.' + $(this).data('valueCellClass'))
-            valueBlock.find('.value').hide();
-            valueBlock.find('.' + dataValue).show();
+    var $card = $('<div>').addClass('ce-card').attr('data-ce-index', i);
+
+    // Header
+    var $header = $('<div>').addClass('ce-card-header');
+    var ceItemData = ceDisplayItem && OSD.data.items[ceDisplayItem.id] ? OSD.data.items[ceDisplayItem.id] : null;
+    var isChecked = ceItemData ? ceItemData.isVisible : false;
+
+    var $toggle = $('<input type="checkbox" class="togglesmall">')
+        .prop('checked', isChecked)
+        .data('displayItem', ceDisplayItem)
+        .on('change', function(e) {
+            e.stopPropagation();
+            var displayItem = $(this).data('displayItem');
+            if (!displayItem) return;
+            var itemData = OSD.data.items[displayItem.id];
+            itemData.isVisible = $(this).is(':checked');
+
+            if (itemData.isVisible) {
+                OSD.msp.helpers.calculate.coords(itemData);
+                if (itemData.x > OSD.data.display_size.x || itemData.y > OSD.data.display_size.y) {
+                    itemData.x = itemData.y = itemData.position = 0;
+                }
+            }
+
+            OSD.GUI.saveItem(displayItem);
+            // Sync the hidden left-panel checkbox
+            $('input[name="' + displayItem.name + '"]').prop('checked', itemData.isVisible);
         });
 
-        customElementTable.append(customElementLabel).append(customElementRowType).append(customElementRowValue);
-        label.append(customElementTable);
-        customElementsContainer.append(label);
+    // Prevent header click from toggling when clicking the switch area
+    $header.on('click', '.ios7-switch', function(e) {
+        e.stopPropagation();
+    });
+
+    var $name = $('<span>').addClass('ce-card-name').text(i18n.getMessage("custom_element") + ' ' + (i + 1));
+    var $preview = $('<span>').addClass('ce-card-preview');
+    var $chevron = $('<span>').addClass('ce-card-chevron').html('&#9662;'); // ▾
+
+    $header.append($toggle).append($name).append($preview).append($chevron);
+
+    // Header click toggles collapse
+    $header.on('click', function(e) {
+        if ($(e.target).is('input[type="checkbox"]')) return;
+        var $body = $(this).siblings('.ce-card-body');
+        var $chev = $(this).find('.ce-card-chevron');
+        $body.slideToggle(200, function() {
+            $chev.html($body.is(':visible') ? '&#9652;' : '&#9662;'); // ▴ or ▾
+        });
+    });
+
+    // Body — vertical stacked rows (one per slot + visibility)
+    var $body = $('<div>').addClass('ce-card-body settings');
+
+    for (var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
+        $body.append(buildSlotRow(i, ii));
     }
+    $body.append(buildVisibilityRow(i));
+
+    $card.append($header).append($body);
+    return $card;
+}
+
+// Set collapse/expand states for all cards
+function updateCustomElementCardStates() {
+    var firstUnconfigured = true;
+    $('#osdCustomElementCards .ce-card').each(function() {
+        var $card = $(this);
+        var idx = parseInt($card.attr('data-ce-index'));
+        var configured = false;
 
+        // Check if any slot has type > 0
+        for (var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
+            var typeVal = parseInt($card.find('.osdCustomElement-' + idx + '-part-' + ii + '-type').val());
+            if (typeVal > 0) {
+                configured = true;
+                break;
+            }
+        }
+
+        $card.removeClass('ce-card-configured ce-card-collapsed');
+        if (configured) {
+            $card.addClass('ce-card-configured');
+            $card.find('.ce-card-body').show();
+            $card.find('.ce-card-chevron').html('&#9652;'); // ▴
+        } else if (firstUnconfigured) {
+            // First unconfigured: show expanded
+            firstUnconfigured = false;
+            $card.find('.ce-card-body').show();
+            $card.find('.ce-card-chevron').html('&#9652;'); // ▴
+        } else {
+            $card.addClass('ce-card-collapsed');
+            $card.find('.ce-card-body').hide();
+            $card.find('.ce-card-chevron').html('&#9662;'); // ▾
+        }
+    });
+    updateCardHeaderPreviews();
+}
+
+// Update card header preview with plain-text slot summary (no OSD font characters)
+function updateCardHeaderPreviews() {
+    $('#osdCustomElementCards .ce-card').each(function() {
+        var idx = parseInt($(this).attr('data-ce-index'));
+        var parts = [];
+        for (var ii = 0; ii < FC.OSD_CUSTOM_ELEMENTS.settings.customElementParts; ii++) {
+            var type = parseInt($('.osdCustomElement-' + idx + '-part-' + ii + '-type').val());
+            if (type === 0) continue;
+            var sf = ceTypeToSourceFormat(type);
+            var sourceNames = ['', 'Text', 'Icon', 'Icon', 'Icon', 'GV', 'LC'];
+            var label = sourceNames[sf.source] || '';
+            if ((sf.source === 5 || sf.source === 6) && sf.formatIndex > 0) {
+                label += ' ' + OSD.constants.CE_FORMATS[sf.formatIndex].label;
+            }
+            if (sf.source === 1) {
+                var text = $('.osdCustomElement-' + idx + '-part-' + ii + '-value').find('.text').val();
+                if (text) label = '"' + text.trim() + '"';
+            }
+            parts.push(label);
+        }
+        $(this).find('.ce-card-preview').text(parts.join(' + '));
+    });
+}
+
+// Main entry point: injects card UI into the left panel custom elements group
+function injectCustomElementCards() {
+    if (FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount === 0) return;
+
+    var $group = $('#osdGroupOSDCustomElements');
+    if ($group.length === 0) return;
+
+    // Hide the standard display-field checkboxes
+    $group.find('.display-fields').hide();
+
+    // Remove previous cards if re-rendering
+    $('#osdCustomElementCards').remove();
+
+    var $container = $('<div>').attr('id', 'osdCustomElementCards');
+    for (var i = 0; i < FC.OSD_CUSTOM_ELEMENTS.settings.customElementsCount; i++) {
+        $container.append(buildCustomElementCard(i));
+    }
+    $group.find('.spacer_box').append($container);
+
+    // Fill values from FC data (sets hidden type selects, which trigger change → update visible selects)
     fillCustomElementsValues();
+
+    // Bind save callbacks
     customElementsInitCallback();
-    init = false;
+
+    // Set collapse states
+    updateCustomElementCardStates();
+
+    // Apply switchery to card toggles
+    $container.find('.togglesmall').each(function(index, elem) {
+        $(elem).wrapAll('<label class="ios7-switch" style="font-size: 12px"/>');
+        $(elem).after('<span></span>');
+        $(elem).removeClass('togglesmall');
+    });
 }
 
 function updateOSDCustomElementsDisplay() {
@@ -3949,6 +4260,7 @@ function updateOSDCustomElementsDisplay() {
             break;
         }
     }
+    updateCardHeaderPreviews();
     OSD.GUI.updatePreviews();
 }
 
@@ -4028,7 +4340,7 @@ function fillCustomElementsValues() {
 function customElementsInitCallback() {
 
     var callback = function(){
-        var row = $(this).closest('tr').data('row');
+        var row = parseInt($(this).closest('.ce-card').attr('data-ce-index'));
 
         customElementNormaliseRow(row);
         customElementDisableNonValidOptionsRow(row);
@@ -4036,9 +4348,10 @@ function customElementsInitCallback() {
         MSP.promise(MSPCodes.MSP2_INAV_SET_CUSTOM_OSD_ELEMENTS, customElementGetDataForRow(row));
     };
 
-    var customElements = $('#osdCustomElements')
-    customElements.find('input, select').change(callback);
-    customElements.find('input').keyup(callback);
+    var customElements = $('#osdCustomElementCards');
+    // Exclude visible source/format selects (they bridge to hidden type selects which fire their own change)
+    customElements.find('input, select').not('.ce-source-select, .ce-format-select, .ce-card-header input').change(callback);
+    customElements.find('input').not('.ce-card-header input').keyup(callback);
 }
 
 function customElementNormaliseRow(row){