diff --git a/app/components/PacksList.svelte b/app/components/PacksList.svelte
index 7965201..e4bf72b 100644
--- a/app/components/PacksList.svelte
+++ b/app/components/PacksList.svelte
@@ -828,8 +828,27 @@
                     type: 'image',
                     image: story.thumbnail,
                     name: story.name,
+                    episode: story.episode,
+                    episodeCount: thePack.extra?.episodeCount,
                     subtitle: formatDuration(story.duration),
-                    story
+                    story,
+                    onDraw: (item, event) => {
+                        if (item.episode && item.episodeCount) {
+                            textPaint.color = colorOnTertiaryContainer;
+                            textPaint.fontWeight = 'bold';
+                            const canvas = event.canvas;
+                            const h = canvas.getHeight();
+                            const w = canvas.getWidth();
+                            const staticLayout = new StaticLayout(` ${item.episode}/${item.episodeCount} `, textPaint, w, LayoutAlignment.ALIGN_NORMAL, 1, 0, false);
+                            const width = staticLayout.getLineWidth(0);
+                            const height = staticLayout.getHeight();
+                            canvas.translate(24, h - height - 10);
+                            textPaint.setColor(colorTertiaryContainer);
+                            canvas.drawRoundRect(-4, -1, width + 4, height + 1, height / 2, height / 2, textPaint);
+                            textPaint.color = colorOnTertiaryContainer;
+                            staticLayout.draw(canvas);
+                        }
+                    }
                 }))
             });
             if (data?.story) {
diff --git a/app/components/common/ListItem.svelte b/app/components/common/ListItem.svelte
index fd26fe4..f79192d 100644
--- a/app/components/common/ListItem.svelte
+++ b/app/components/common/ListItem.svelte
@@ -2,7 +2,8 @@
     import { Canvas, CanvasView } from '@nativescript-community/ui-canvas';
     import { createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale, fonts } from '~/variables';
-    $: ({ colorOnSurface, colorOnSurfaceVariant, colorPrimary, colorOutlineVariant } = $colors);
+    import { ListItem } from './ListItem';
+    $: ({ colorOnSurface, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
     export let showBottomLine: boolean = false;
@@ -11,25 +12,38 @@
     export let fontSize: number = 17;
     export let fontWeight: string | number = 500;
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let subtitle: string = null;
-    export let leftIcon: string = null;
     export let columns: string = '*';
     export let mainCol = 0;
     export let leftIconFonFamily: string = $fonts.mdi;
-    export let color: string = colorOnSurface;
-    export let subtitleColor: string = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    // export let color: string = colorOnSurface;
+    // export let subtitleColor: string = null;
+    export let item: ListItem;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 </script>
 
-<canvasview {columns} padding="0 16 0 16" rippleColor={colorPrimary} on:tap={(event) => dispatch('tap', event)} {...$$restProps}>
-    <canvaslabel col={mainCol} color={color || colorOnSurface} on:draw={onDraw}>
-        <cgroup paddingBottom={subtitle ? 10 : 0} verticalAlignment="middle">
-            <cspan fontFamily={leftIconFonFamily} fontSize={iconFontSize * $fontScale} paddingLeft="10" text={leftIcon} visibility={leftIcon ? 'visible' : 'hidden'} width={iconFontSize * 2} />
+<canvasview {columns} padding="0 16 0 16" rippleColor={item.rippleColor || colorPrimary} on:tap={(event) => dispatch('tap', event)} {...$$restProps}>
+    <canvaslabel
+        col={mainCol}
+        color={item.color || colorOnSurface}
+        on:draw={(event) => {
+            (item.onDraw || onDraw)?.(item, event);
+        }}>
+        <cgroup paddingBottom={item.subtitle ? 10 : 0} verticalAlignment="middle">
+            <cspan
+                fontFamily={leftIconFonFamily}
+                fontSize={(item.iconFontSize || iconFontSize) * $fontScale}
+                paddingLeft="10"
+                text={item.icon}
+                visibility={item.icon ? 'visible' : 'hidden'}
+                width={(item.iconFontSize || iconFontSize) * 2} />
         </cgroup>
-        <cgroup paddingLeft={(leftIcon ? iconFontSize * 2 : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
-            <cspan fontSize={fontSize * $fontScale} {fontWeight} text={title} />
-            <cspan color={subtitleColor || colorOnSurfaceVariant} fontSize={subtitleFontSize * $fontScale} text={subtitle ? '\n' + subtitle : ''} visibility={subtitle ? 'visible' : 'hidden'} />
+        <cgroup paddingLeft={(item.icon ? iconFontSize * 2 : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
+            <cspan fontSize={(item.fontSize || fontSize) * $fontScale} {fontWeight} text={item.title || item.name} />
+            <cspan
+                color={item.subtitleColor || colorOnSurfaceVariant}
+                fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale}
+                text={item.subtitle ? '\n' + item.subtitle : ''}
+                visibility={item.subtitle ? 'visible' : 'hidden'} />
         </cgroup>
     </canvaslabel>
     <slot />
diff --git a/app/components/common/ListItem.ts b/app/components/common/ListItem.ts
new file mode 100644
index 0000000..eaf35b5
--- /dev/null
+++ b/app/components/common/ListItem.ts
@@ -0,0 +1,19 @@
+import { Canvas, CanvasView } from "@nativescript-community/ui-canvas";
+
+export interface ListItem {
+    iconFontSize?: number;
+    subtitleFontSize?: number;
+    rightValue?: string | (() => string);
+    rightValueFontSize?: number;
+    fontSize?: number;
+    html?: any;
+    name?: string;
+    icon?: string;
+    color?: string | Color;
+    rippleColor?: string | Color;
+    title?: string;
+    subtitle?: string;
+    type?: string;
+    onDraw?: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void;
+    [k: string]: any;
+}
diff --git a/app/components/common/ListItemAutoSize.svelte b/app/components/common/ListItemAutoSize.svelte
index cee8443..d731081 100644
--- a/app/components/common/ListItemAutoSize.svelte
+++ b/app/components/common/ListItemAutoSize.svelte
@@ -1,8 +1,8 @@
 <script context="module" lang="ts">
     import { Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas';
-    import { createEventDispatcher } from '@shared/utils/svelte/ui';
-    import { conditionalEvent } from '@shared/utils/svelte/ui';
+    import { conditionalEvent, createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale } from '~/variables';
+    import { ListItem } from './ListItem';
     const linePaint = new Paint();
     linePaint.strokeWidth = 1;
 </script>
@@ -10,30 +10,20 @@
 <script lang="ts">
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
-    let { colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors;
-    $: ({ colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors);
+    let { colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors;
+    $: ({ colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
 
     $: linePaint.color = colorOutlineVariant;
     export let showBottomLine: boolean = false;
     // export let iconFontSize: number = 24;
+    export let item: ListItem;
     export let fontSize: number = 17;
     export let fontWeight: any = 'normal';
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let html: any = null;
-    export let text: any = null;
-    export let titleColor: string = null;
-    export let color: string = null;
-    export let subtitleColor: string = null;
-    export let subtitle: string = null;
-    // export let leftIcon: string = null;
-    export let rightValue: string | Function = null;
-    // const leftColumn = iconFontSize * 1.4 * $fontScale;
     export let columns: string = '*,auto';
-    // export let leftIconFonFamily: string = $fonts.mdi;
     export let mainCol = 0;
     export let onLinkTap: (event) => void = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 
     function draw(event: { canvas: Canvas; object: CanvasView }) {
         const canvas = event.canvas;
@@ -53,10 +43,10 @@
         //     // canvas.drawRect(0,0,leftColumn,  staticLayout.getHeight(), iconPaint);
         //     staticLayout.draw(canvas);
         // }
-        onDraw?.(event);
+        (item.onDraw || onDraw)?.(item, event);
     }
 
-    $: addedPadding = (subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
+    $: addedPadding = (item.subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
 </script>
 
 <!-- <gridlayout>
@@ -83,7 +73,7 @@
 <canvasview
     {columns}
     padding="0 16 0 16"
-    rippleColor={color || colorOnSurface}
+    rippleColor={item.color || colorOnSurface}
     on:tap={(event) => dispatch('tap', event)}
     on:longPress={(event) => dispatch('longPress', event)}
     on:draw={draw}
@@ -98,32 +88,32 @@
         width={iconFontSize * 2} /> -->
     <label
         col={mainCol}
-        color={titleColor || color || colorOnSurface}
+        color={item.titleColor || item.color || colorOnSurface}
         disableCss={true}
         fontSize={fontSize * $fontScale}
         {fontWeight}
-        {html}
+        html={item.html}
         paddingBottom={addedPadding}
         paddingTop={addedPadding}
-        {text}
+        text={item.text}
         textWrap={true}
         verticalTextAlignment="center"
         {...$$restProps?.titleProps}
         use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
-        <cspan text={title} />
-        <cspan color={subtitleColor || colorOnSurfaceVariant} fontSize={subtitleFontSize * $fontScale} text={subtitle ? '\n' + subtitle : null} />
+        <cspan text={item.title} />
+        <cspan color={item.subtitleColor || colorOnSurfaceVariant} fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale} text={item.subtitle ? '\n' + item.subtitle : null} />
     </label>
 
     <label
         col={1}
-        color={subtitleColor}
+        color={item.subtitleColor}
         disableCss={true}
-        fontSize={subtitleFontSize * $fontScale}
+        fontSize={(item.rightValueFontSize || subtitleFontSize) * $fontScale}
         marginLeft={16}
-        text={typeof rightValue === 'function' ? rightValue() : rightValue}
+        text={typeof item.rightValue === 'function' ? item.rightValue() : item.rightValue}
         textAlignment="right"
         verticalAlignment="middle"
-        visibility={!!rightValue ? 'visible' : 'collapse'}
+        visibility={!!item.rightValue ? 'visible' : 'collapse'}
         on:tap={(event) => dispatch('rightIconTap', event)} />
     <slot />
 </canvasview>
diff --git a/app/components/common/ListItemAutoSizeFull.svelte b/app/components/common/ListItemAutoSizeFull.svelte
index 2dba290..c734f06 100644
--- a/app/components/common/ListItemAutoSizeFull.svelte
+++ b/app/components/common/ListItemAutoSizeFull.svelte
@@ -1,8 +1,8 @@
 <script context="module" lang="ts">
     import { Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas';
-    import { createEventDispatcher } from '@shared/utils/svelte/ui';
-    import { conditionalEvent } from '@shared/utils/svelte/ui';
+    import { conditionalEvent, createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale } from '~/variables';
+    import { ListItem } from './ListItem';
     const linePaint = new Paint();
     linePaint.strokeWidth = 1;
 </script>
@@ -10,8 +10,8 @@
 <script lang="ts">
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
-    let { colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors;
-    $: ({ colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors);
+    let { colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors;
+    $: ({ colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
 
     $: linePaint.color = colorOutlineVariant;
     export let showBottomLine: boolean = false;
@@ -19,21 +19,13 @@
     export let fontSize: number = 17;
     export let fontWeight: any = 'normal';
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let html: any = null;
-    export let text: any = null;
     export let titleColor: string = null;
-    export let color: string = null;
     export let subtitleColor: string = null;
-    export let subtitle: string = null;
-    // export let leftIcon: string = null;
-    export let rightValue: string | Function = null;
-    // const leftColumn = iconFontSize * 1.4 * $fontScale;
     export let columns: string = '*,auto';
-    // export let leftIconFonFamily: string = $fonts.mdi;
     export let mainCol = 0;
+    export let item: ListItem;
     export let onLinkTap: (event) => void = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 
     function draw(event: { canvas: Canvas; object: CanvasView }) {
         const canvas = event.canvas;
@@ -43,20 +35,10 @@
         if (showBottomLine) {
             event.canvas.drawLine(20, h - 1, w, h - 1, linePaint);
         }
-        // if (leftIcon) {
-        //     const fontSize = iconFontSize * $fontScale;
-        //     iconPaint.textSize = fontSize;
-        //     iconPaint.color = titleColor || color || colorOnSurface;
-        //     iconPaint.fontFamily = leftIconFonFamily;
-        //     const staticLayout = new StaticLayout(leftIcon, iconPaint, leftColumn, LayoutAlignment.ALIGN_CENTER, 1, 0, true);
-        //     canvas.translate(6, h / 2 - staticLayout.getHeight() / 2);
-        //     // canvas.drawRect(0,0,leftColumn,  staticLayout.getHeight(), iconPaint);
-        //     staticLayout.draw(canvas);
-        // }
-        onDraw?.(event);
+        (item.onDraw || onDraw)?.(item, event);
     }
 
-    $: addedPadding = (subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
+    $: addedPadding = (item.subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
 </script>
 
 <!-- <gridlayout>
@@ -83,7 +65,7 @@
 <canvasview
     {columns}
     padding="0 16 0 16"
-    rippleColor={color || colorOnSurface}
+    rippleColor={item.rippleColor || item.color || colorOnSurface}
     on:tap={(event) => dispatch('tap', event)}
     on:longPress={(event) => dispatch('longPress', event)}
     on:draw={draw}
@@ -98,37 +80,37 @@
         width={iconFontSize * 2} /> -->
     <stacklayout col={mainCol} paddingBottom={addedPadding} paddingTop={addedPadding} verticalAlignment="center" {...$$restProps?.titleHolderProps}>
         <label
-            color={titleColor || color || colorOnSurface}
+            color={item.titleColor || item.color || titleColor || colorOnSurface}
             disableCss={true}
-            fontSize={fontSize * $fontScale}
+            fontSize={(item.fontSize || fontSize) * $fontScale}
             {fontWeight}
-            {html}
-            text={text || title}
+            html={item.html}
+            text={item.text || item.title || item.name}
             textWrap={true}
             {...$$restProps?.titleProps}
             use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
         </label>
         <label
-            color={subtitleColor || colorOnSurfaceVariant}
+            color={item.subtitleColor || subtitleColor || colorOnSurfaceVariant}
             disableCss={true}
-            fontSize={subtitleFontSize * $fontScale}
-            text={subtitle}
+            fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale}
+            text={item.subtitle}
             textWrap={true}
             use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}
             {...$$restProps.subtitleProps || {}}>
         </label>
     </stacklayout>
 
-    <label
+    <!-- <label
         col={1}
         color={subtitleColor}
         disableCss={true}
         fontSize={subtitleFontSize * $fontScale}
         marginLeft={16}
-        text={typeof rightValue === 'function' ? rightValue() : rightValue}
+        text={typeof item.rightValue === 'function' ? item.rightValue() : item.rightValue}
         textAlignment="right"
         verticalAlignment="middle"
-        visibility={!!rightValue ? 'visible' : 'collapse'}
-        on:tap={(event) => dispatch('rightIconTap', event)} />
+        visibility={!!item.rightValue ? 'visible' : 'collapse'}
+        on:tap={(event) => dispatch('rightIconTap', event)} /> -->
     <slot />
 </canvasview>
diff --git a/app/components/common/OptionSelect.svelte b/app/components/common/OptionSelect.svelte
index ec8d761..e6ae469 100644
--- a/app/components/common/OptionSelect.svelte
+++ b/app/components/common/OptionSelect.svelte
@@ -4,18 +4,19 @@
     import { CheckBox } from '@nativescript-community/ui-checkbox';
     import { openFilePicker } from '@nativescript-community/ui-document-picker';
     import { closeBottomSheet } from '@nativescript-community/ui-material-bottomsheet/svelte';
+    import { TextField } from '@nativescript-community/ui-material-textfield';
     import { EventData, File, ObservableArray, Utils, View } from '@nativescript/core';
     import { debounce } from '@nativescript/core/utils';
     import { onDestroy } from 'svelte';
     import { Template } from 'svelte-native/components';
     import IconButton from '~/components/common/IconButton.svelte';
     import ListItem from '~/components/common/ListItem.svelte';
+    import { ListItem as IListItem } from '~/components/common/ListItem';
     import { lc } from '~/helpers/locale';
-    import { actionBarButtonHeight, colors } from '~/variables';
+    import { colors } from '~/variables';
     import ListItemAutoSize from './ListItemAutoSize.svelte';
-    import { TextField } from '@nativescript-community/ui-material-textfield';
-    export interface OptionType {
-        name: string;
+    export interface OptionType extends IListItem {
+        subtitle?: string;
         isPick?: boolean;
         boxType?: string;
         type?: string;
@@ -37,9 +38,6 @@
     export let fontWeight = 'bold';
     export let options: OptionType[] | ObservableArray<OptionType>;
     export let onClose = null;
-    export let titleProps: Partial<svelteNative.JSX.LabelAttributes> = {};
-    export let titleHolderProps: Partial<svelteNative.JSX.StackLayoutAttributes> = {};
-    export let subtitleProps: Partial<svelteNative.JSX.LabelAttributes> = {};
     export let selectedIndex = -1;
     export let height: number | string = null;
     export let fontSize = 16;
@@ -48,10 +46,17 @@
     export let currentlyCheckedItem = null;
     export let onCheckBox: (item, value, e) => void = null;
     export let onRightIconTap: (item, e) => void = null;
+
+    export let titleProps: Partial<svelteNative.JSX.LabelAttributes> = {};
+    export let titleHolderProps: Partial<svelteNative.JSX.StackLayoutAttributes> = {};
+    export let subtitleProps: Partial<svelteNative.JSX.LabelAttributes> = {};
+    export let templateProps: Partial<svelteNative.JSX.GridLayoutAttributes> & {
+        [k: string]: Partial<svelteNative.JSX.ViewAttributes>;
+    } = {};
+
     export let component = autoSizeListItem ? ListItemAutoSize : ListItem;
     let filteredOptions: OptionType[] | ObservableArray<OptionType> = null;
     let filter: string = null;
-    DEV_LOG && console.log('titleProps', titleProps);
 
     // technique for only specific properties to get updated on store change
     $: ({ colorOutline } = $colors);
@@ -226,19 +231,17 @@
                 <svelte:component
                     this={component}
                     {borderRadius}
-                    color={item.color}
                     columns="auto,*,auto"
                     {fontSize}
-                    fontWeight={item.fontWeight || fontWeight}
+                    {fontWeight}
                     {iconFontSize}
-                    leftIcon={item.icon}
+                    {item}
                     mainCol={1}
                     showBottomLine={showBorders}
-                    subtitle={item.subtitle}
                     {subtitleProps}
-                    title={item.name}
                     {titleHolderProps}
                     {titleProps}
+                    {...templateProps}
                     on:tap={(event) => onTap(item, event)}>
                     <checkbox
                         id="checkbox"
@@ -254,18 +257,16 @@
                 <svelte:component
                     this={component}
                     {borderRadius}
-                    color={item.color}
                     columns="*,auto"
                     {fontSize}
                     {fontWeight}
                     {iconFontSize}
-                    leftIcon={item.icon}
+                    {item}
                     showBottomLine={showBorders}
-                    subtitle={item.subtitle}
                     {subtitleProps}
-                    title={item.name}
                     {titleHolderProps}
                     {titleProps}
+                    {...templateProps}
                     on:tap={(event) => onTap(item, event)}>
                     <mdbutton class="icon-btn" col={1} text={item.rightIcon} variant="text" on:tap={(event) => onRightTap(item, event)} />
                 </svelte:component>
@@ -274,20 +275,18 @@
                 <svelte:component
                     this={component}
                     {borderRadius}
-                    color={item.color}
                     columns="auto,*"
                     {fontSize}
                     {fontWeight}
                     {iconFontSize}
-                    leftIcon={item.icon}
+                    {item}
                     mainCol={1}
-                    rightValue={item.rightValue}
                     showBottomLine={showBorders}
-                    subtitle={item.subtitle}
                     {subtitleProps}
                     title={item.name}
                     {titleHolderProps}
                     {titleProps}
+                    {...templateProps}
                     on:tap={(event) => onTap(item, event)}>
                     <image borderRadius={4} col={0} marginBottom={5} marginRight={10} marginTop={5} src={item.image} />
                 </svelte:component>
@@ -296,18 +295,15 @@
                 <svelte:component
                     this={component}
                     {borderRadius}
-                    color={item.color}
                     {fontSize}
                     {fontWeight}
                     {iconFontSize}
-                    leftIcon={item.icon}
-                    rightIcon={item.rightIcon}
+                    {item}
                     showBottomLine={showBorders}
-                    subtitle={item.subtitle}
                     {subtitleProps}
-                    title={item.name}
                     {titleHolderProps}
                     {titleProps}
+                    {...templateProps}
                     on:rightTap={(event) => onRightTap(item, event)}
                     on:tap={(event) => onTap(item, event)}>
                 </svelte:component>