diff --git a/eas.json b/eas.json
index dd7509c..ac64287 100644
--- a/eas.json
+++ b/eas.json
@@ -8,7 +8,8 @@
       "distribution": "internal",
       "env": {
         "APP_VARIANT": "development",
-        "EXPO_PUBLIC_API_URL": "apprentice-scryer.jinni.health"
+        "EXPO_PUBLIC_API_URL": "apprentice-scryer.jinni.health",
+        "EXPO_PUBLIC_REDIRECT_URL": "apprentice-scryer.jinni.health"
       },
       "android": {
         "buildType": "apk",
@@ -18,7 +19,8 @@
     "staging": {
       "env": {
         "APP_VARIANT": "staging",
-        "EXPO_PUBLIC_API_URL": "apprentice-scryer.jinni.health"
+        "EXPO_PUBLIC_API_URL": "apprentice-scryer.jinni.health",
+        "EXPO_PUBLIC_REDIRECT_URL": "apprentice-scryer.jinni.health"
       },
       "android": {
         "buildType": "apk",
@@ -28,7 +30,8 @@
     "production": {
       "env": {
         "APP_VARIANT": "production",
-        "EXPO_PUBLIC_API_URL": "master-scryer.jinni.health"
+        "EXPO_PUBLIC_API_URL": "master-scryer.jinni.health",
+        "EXPO_PUBLIC_REDIRECT_URL": "master-scryer.jinni.health"
       },
       "android": {
         "buildType": "app-bundle",
diff --git a/sample.env b/sample.env
index 9f5dcdf..041663a 100644
--- a/sample.env
+++ b/sample.env
@@ -1,5 +1,4 @@
 EXPO_PUBLIC_API_URL="{someapi.domain.com}"
-EXPO_PUBLIC_API_KEY="!believeme!"
 EXPO_ETH_RPC_PROVIDER="{alchemy/infura/etc}"
 
 EXPO_PUBLIC_SEGMENT_API_KEY="{some_key}"
diff --git a/src/app/index.tsx b/src/app/index.tsx
index d15fe31..e5f3640 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -4,8 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-na
 import { isEmpty } from 'lodash/fp';
 
 import { useHomeConfig } from 'hooks';
-import { useTheme } from 'contexts';
-import { WidgetConfig } from 'types/UserConfig';
+import { WidgetConfig, obj } from 'types/UserConfig';
 import { getIconForWidget } from 'utils/rendering';
 import { saveHomeConfig } from 'utils/api';
 import { getActivityData } from 'inventory/android-health-connect';
@@ -13,6 +12,15 @@ import { getActivityData } from 'inventory/android-health-connect';
 import { AvatarViewer, WidgetIcon } from 'components/index';
 import DefaultAvatar from 'assets/avatars/red-yellow-egg';
 import WidgetContainer from 'components/home/WidgetContainer';
+import OnboardingWizard from 'components/wizards/OnboardingWizard';
+import {
+    STAGE_AVATAR_CONFIG,
+    TRACK_ONBOARDING_STAGE,
+    filterOutDefaultWidgets,
+    getStorage,
+    saveStorage,
+} from 'utils/config';
+import { debug } from 'utils/logging';
 
 const HomeScreen = () => {
     const homeConfig = useHomeConfig();
@@ -21,6 +29,7 @@ const HomeScreen = () => {
         transform: [{ rotate: `${eggRollAngle.value}deg` }],
     }));
     const [widgetConfig, setWidgetConfig] = useState<WidgetConfig[]>([]);
+    const [onboardingStage, setOnboardingStage] = useState<string>();
 
     useMemo(() => {
         if (isEmpty(widgetConfig) && homeConfig?.widgets) {
@@ -28,6 +37,14 @@ const HomeScreen = () => {
         }
     }, [homeConfig, widgetConfig]);
 
+    useMemo(async () => {
+        const currentStage = await getStorage<obj>(TRACK_ONBOARDING_STAGE);
+        console.log('onboarding stage', onboardingStage, currentStage);
+        if (!onboardingStage && !currentStage?.[STAGE_AVATAR_CONFIG]) {
+            setOnboardingStage(STAGE_AVATAR_CONFIG);
+        }
+    }, [onboardingStage]);
+
     useEffect(() => {
         const intervalId = setInterval(() => {
             const otherSide = eggRollAngle.value < 0 ? 30 : -30;
@@ -52,11 +69,23 @@ const HomeScreen = () => {
         [setWidgetConfig],
     );
 
-    const finalizeRenovation = () =>
-        // TODO widgetConfig is not updated when adding/removing widgets
-        saveHomeConfig({
-            widgets: widgetConfig,
-        });
+    const finalizeRenovation = useCallback(
+        (widgets?: WidgetConfig[]) =>
+            // TODO widgetConfig is not updated when adding/removing widgets
+            saveHomeConfig({
+                widgets: widgets ?? widgetConfig,
+            }),
+        [widgetConfig],
+    );
+
+    const completeWizardStage = useCallback(
+        (stage: string) => {
+            saveStorage(TRACK_ONBOARDING_STAGE, { [stage]: String(true) }, true, {}).then(() =>
+                setOnboardingStage(undefined),
+            );
+        },
+        [setOnboardingStage],
+    );
 
     const HomeWidget = ({ id, title, path }: WidgetConfig) => {
         return (
@@ -82,8 +111,35 @@ const HomeScreen = () => {
 
     console.log('eggroll ', eggRollAngle.value);
 
+    if (onboardingStage === STAGE_AVATAR_CONFIG)
+        return (
+            <OnboardingWizard
+                startIndex={0}
+                onComplete={async (config) => {
+                    try {
+                        await finalizeRenovation([
+                            ...widgetConfig,
+                            {
+                                id: 'maliksmajik-avatar-viewer',
+                                provider: 'MaliksMajik',
+                                routeName: 'index', // home page
+                                title: 'Avatar Viewer',
+                                path: '/',
+                                config,
+                                // They can't have registered yet so no jinni id to specify for config
+                                // eventually need to link with jiini. Could do in activate_jinni but :Widget wont be there if they start from desktop flow (github/facrcaster)
+                                // target_uuid: await getStorage(ID_JINNI_SLOT)
+                            },
+                        ]);
+                        completeWizardStage(STAGE_AVATAR_CONFIG);
+                    } catch (e) {
+                        debug(e, { extra: { onboardingStage } });
+                    }
+                }}
+            />
+        );
     return (
-        <View style={{ flex: 1, ...useTheme() }}>
+        <View style={{ flex: 1 }}>
             <View style={styles.container}>
                 <View style={styles.avatarContainer}>
                     <Animated.View style={[styles.avatar, eggAnimatedStyles]}>
@@ -92,7 +148,7 @@ const HomeScreen = () => {
                     <Button color="purple" title="Speak Intention" onPress={onIntentionPress} />
                 </View>
                 <WidgetContainer
-                    widgets={widgetConfig}
+                    widgets={filterOutDefaultWidgets(widgetConfig) as WidgetConfig[]}
                     WidgetRenderer={HomeWidget}
                     saveWidgets={saveWidgets}
                     finalizeRenovation={finalizeRenovation}
diff --git a/src/app/inventory/_layout.tsx b/src/app/inventory/_layout.tsx
index fc594e5..88a4619 100644
--- a/src/app/inventory/_layout.tsx
+++ b/src/app/inventory/_layout.tsx
@@ -12,7 +12,12 @@ export default function Layout() {
                     title: 'Inventory',
                 }}
             />
-            <Stack.Screen name="[item]" />
+            <Stack.Screen
+                name="[item]"
+                options={{
+                    headerBackButtonMenuEnabled: true,
+                }}
+            />
         </Stack>
     );
 }
diff --git a/src/assets/game-content/modals.ts b/src/assets/game-content/modals.ts
index e1ea61b..9dbed45 100644
--- a/src/assets/game-content/modals.ts
+++ b/src/assets/game-content/modals.ts
@@ -18,7 +18,7 @@ export default {
         text: 'You could not perform the ability at this time 🙈',
     },
     'select-multi': {
-        title: ({ title }) => `Select All Options${title ? ' For ' + title : ''}`,
+        title: ({ title }) => `Select All Options\n\n${title}`,
         text: '',
     },
 };
diff --git a/src/assets/game-content/onboarding.ts b/src/assets/game-content/onboarding.ts
index d8b0052..e20d59e 100644
--- a/src/assets/game-content/onboarding.ts
+++ b/src/assets/game-content/onboarding.ts
@@ -8,6 +8,14 @@ export default {
             title: '',
             text: '',
         },
+        2: {
+            title: '',
+            text: '',
+        },
+        3: {
+            title: '',
+            text: '',
+        },
     },
     modals: {
         'create-spellbook': {
diff --git a/src/components/home/WidgetContainer.tsx b/src/components/home/WidgetContainer.tsx
index facfd2b..aa42a54 100644
--- a/src/components/home/WidgetContainer.tsx
+++ b/src/components/home/WidgetContainer.tsx
@@ -73,6 +73,7 @@ const WidgetContainer = ({
                 }),
             );
 
+        console.log('widgets selected for homepage', newSettings);
         if (finalizeRenovation) {
             onRenovateEnd({ data: newSettings });
             finalizeRenovation();
diff --git a/src/components/modals/BaseModal.tsx b/src/components/modals/BaseModal.tsx
index 9322356..1a3b059 100644
--- a/src/components/modals/BaseModal.tsx
+++ b/src/components/modals/BaseModal.tsx
@@ -3,23 +3,16 @@ import React, { useState, ReactNode } from 'react';
 import { Text, Modal, View, TouchableOpacity, StyleSheet, Button } from 'react-native';
 
 interface ModalProps {
-    children: ReactNode;
+    children: React.JSX.Element;
     onClose?: () => void;
-    primaryButton?: { title: string; onPress: () => void };
-    secondaryButton?: { title: string; onPress: () => void };
+    primaryButton?: { button?: ReactNode; title?: string; onPress?: () => void };
+    secondaryButton?: { button?: ReactNode; title?: string; onPress?: () => void };
 }
 
 const BaseModal: React.FC<ModalProps> = ({ children, onClose, primaryButton, secondaryButton }) => {
     const [visible, setVisible] = useState(true);
     const theme = useTheme();
 
-    // const { height, width } = Dimensions.get('window');
-    // const modalStyle = {
-    //   ...styles.modal,
-    //   height: size === 'lg' ? height : size === 'md' ? height * 0.6 : 'auto',
-    //   width: size === 'lg' ? width : size === 'md' ? width * 0.8 : 'auto',
-    // };
-
     const closeModal = () => {
         setVisible(false);
         onClose && onClose();
@@ -28,7 +21,21 @@ const BaseModal: React.FC<ModalProps> = ({ children, onClose, primaryButton, sec
     const textStyles = {
         color: theme.primaryTextColor,
     };
+    const renderButton = (config) => {
+        console.log('base modal button', config);
 
+        if (!config) return null;
+        if (config.button) return config.button;
+        if (config.title && config.onPress)
+            return (
+                <TouchableOpacity
+                    style={[styles.button, { backgroundColor: theme.primaryBackgroundColor }]}
+                    onPress={config.onPress}
+                >
+                    <Text style={[styles.text, textStyles]}>{config.title}</Text>
+                </TouchableOpacity>
+            );
+    };
     return !visible ? null : (
         <Modal
             animationType="fade"
@@ -40,17 +47,7 @@ const BaseModal: React.FC<ModalProps> = ({ children, onClose, primaryButton, sec
                 {children}
                 <View>
                     <View style={styles.ctaContainer}>
-                        {primaryButton && (
-                            <TouchableOpacity
-                                style={[
-                                    styles.button,
-                                    { backgroundColor: theme.primaryBackgroundColor },
-                                ]}
-                                onPress={primaryButton.onPress}
-                            >
-                                <Text style={[styles.text, textStyles]}>{primaryButton.title}</Text>
-                            </TouchableOpacity>
-                        )}
+                        {renderButton(primaryButton)}
                         {secondaryButton && (
                             <TouchableOpacity
                                 style={[styles.button, { backgroundColor: theme.secondaryColor }]}
@@ -71,10 +68,10 @@ const BaseModal: React.FC<ModalProps> = ({ children, onClose, primaryButton, sec
 
 const styles = StyleSheet.create({
     modalSize: {
-        top: '15%',
+        top: '8%',
         left: '10%',
         right: '10%',
-        bottom: '15%',
+        bottom: '10%',
         // shadowColor: '#FFC1CB',
         // shadowOffset: { width: 5, height: 10 },
         // shadowOpacity: 1,
diff --git a/src/components/modals/SelectMultiModal.tsx b/src/components/modals/SelectMultiModal.tsx
index 2e73e17..ee818cf 100644
--- a/src/components/modals/SelectMultiModal.tsx
+++ b/src/components/modals/SelectMultiModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Text, StyleSheet, View } from 'react-native';
-import { isEmpty } from 'lodash';
+import { capitalize, isEmpty } from 'lodash';
 import { CheckBox, Icon } from '@rneui/themed';
 
 import { useGameContent } from 'contexts/GameContentContext';
@@ -9,29 +9,25 @@ import BaseModal from './BaseModal';
 import { Button } from '@rneui/themed';
 import { useAuth } from 'contexts/AuthContext';
 
-type Options = { [id: string]: boolean }; // id = widget.id | resource.provider_id
+type Options = { [id: string]: boolean }; // id = widget.id | resource.provider_id | human readable options
 export interface SelectWidgetSettingsModalProps {
     dialogueData?: object; // params for modal text
     allowMultiple?: boolean; // if can check off multiple boxes
     options: Options; // can have preselected options
     onFinalize: (options: Options) => void;
+    onClose?: () => void;
+    useModal?: boolean;
 }
 
 const SelectModal = ({
     dialogueData = {},
     options,
     allowMultiple,
-    // provider,
-    // widgetId,
+    onClose,
     onFinalize,
+    useModal = true,
 }: SelectWidgetSettingsModalProps) => {
     const content = useGameContent().modals['select-multi'];
-    console.log(
-        'modal:select multi ',
-        useGameContent().modals['select-multi'],
-        Object.keys(useGameContent().modals),
-    );
-
     const { player } = useAuth();
     const [checks, setChecks] = useState<Options>(options);
 
@@ -39,6 +35,15 @@ const SelectModal = ({
         if (allowMultiple || isEmpty(checks)) setChecks({ ...checks, [key]: val });
     };
 
+    const complete = () => {
+        onFinalize(checks);
+        // setChecks({});
+    };
+    const close = () => {
+        // setChecks({});
+        onClose && onClose();
+    };
+
     console.log('Select options', checks);
 
     const titleTemplate = content.title;
@@ -55,31 +60,62 @@ const SelectModal = ({
                 </View>
             </BaseModal>
         );
-
-    return (
-        <BaseModal size="md">
-            <View>
-                <Text style={styles.text}>{title}</Text>
-                <Text style={styles.text}>{dialogue}</Text>
-                {Object.keys(options).map((id) => {
-                    return (
-                        <CheckBox
-                            key={id}
-                            center
-                            title={id}
-                            checkedIcon="dot-circle-o"
-                            uncheckedIcon="circle-o"
-                            checked={checks[id]}
-                            onPress={() => setCheck(id, !checks[id])}
-                        />
-                    );
-                })}
-                <Button onPress={() => onFinalize(checks)}>
+    const renderMultiSelect = () => (
+        <>
+            <Text style={styles.text}>{title}</Text>
+            <Text style={styles.text}>{dialogue}</Text>
+            {Object.keys(options).map((id) => {
+                //  TODO make scroll list. pushes button off screen when > 8 options
+                return (
+                    <CheckBox
+                        key={id}
+                        center
+                        title={id.split('-').map(capitalize).join(' ')}
+                        checkedIcon="dot-circle-o"
+                        uncheckedIcon="circle-o"
+                        checked={checks[id]}
+                        onPress={() => setCheck(id, !checks[id])}
+                    />
+                );
+            })}
+            <View style={styles.buttonContainer}>
+                <Button onPress={complete}>
                     {' '}
-                    Save <Icon name="asl" color="white" type="foundation" />{' '}
+                    <Text>
+                        {' '}
+                        Save <Icon name="asl" color="white" type="foundation" />
+                    </Text>{' '}
                 </Button>
             </View>
+        </>
+    );
+
+    return useModal ? (
+        <BaseModal
+            size="md"
+            onClose={close}
+            primaryButton={{
+                button: (
+                    <Button onPress={complete}>
+                        {' '}
+                        Save <Icon name="asl" color="white" type="foundation" />{' '}
+                    </Button>
+                ),
+            }}
+        >
+            {renderMultiSelect()}
         </BaseModal>
+    ) : (
+        <View style={styles.container}>
+            {renderMultiSelect()}
+            <Button onPress={onClose} color="black">
+                {' '}
+                <Text style={{ color: 'white' }}>
+                    {' '}
+                    Back <Icon name="blind" color="white" type="foundation" />
+                </Text>{' '}
+            </Button>
+        </View>
     );
 };
 const styles = StyleSheet.create({
@@ -87,6 +123,20 @@ const styles = StyleSheet.create({
         fontSize: 24,
         fontWeight: '500',
     },
+    buttonContainer: {
+        bottom: 0,
+    },
+    container: {
+        top: '8%',
+        left: '10%',
+        right: '10%',
+        bottom: '10%',
+
+        position: 'absolute',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: 5,
+    },
 });
 
 export default SelectModal;
diff --git a/src/components/wizards/BaseScreen.tsx b/src/components/wizards/BaseScreen.tsx
new file mode 100644
index 0000000..0f53e8e
--- /dev/null
+++ b/src/components/wizards/BaseScreen.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@rneui/themed';
+import { entries } from 'lodash';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+// basic fullsized screen
+// back and next buttons
+//
+
+export interface BaseWizardScreenProps {
+    dialogueData?: { [key: string]: string }; // key = title | text
+    step: number;
+    onNext: () => void;
+    onBack: () => void;
+    backButtonStyle?: object;
+    nextButtonStyle?: object;
+}
+
+const BaseWizardScreen = ({ dialogueData, step, onNext, onBack }: BaseWizardScreenProps) => {
+    return (
+        <View style={styles.container}>
+            {!dialogueData ? null : (
+                <View style={styles.contentContainer}>
+                    {entries(dialogueData).map(([type, content]) => (
+                        <Text key={content} style={styles[type]}>
+                            {content}
+                        </Text>
+                    ))}
+                </View>
+            )}
+            <View style={styles.buttonContainer}>
+                <Button
+                    title="Back"
+                    color="purple"
+                    onPress={onBack}
+                    disabled={step > 0 ? false : true}
+                />
+                <Button title="Next" color="purple" onPress={onNext} />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: 'skyblue',
+        flex: 1,
+        height: '100%',
+        width: '100%',
+        padding: '8%',
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+    },
+    contentContainer: {
+        flex: 5,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 18,
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: 'normal',
+    },
+    buttonContainer: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+});
+
+export default BaseWizardScreen;
diff --git a/src/components/wizards/OnboardingWizard.tsx b/src/components/wizards/OnboardingWizard.tsx
index 6545142..c433163 100644
--- a/src/components/wizards/OnboardingWizard.tsx
+++ b/src/components/wizards/OnboardingWizard.tsx
@@ -1,87 +1,240 @@
-// import { useTheme } from 'contexts/ThemeContext';
-// import React, { useState, ReactNode } from 'react';
-// import { Text, View, TouchableOpacity, StyleSheet, Button } from 'react-native';
-// import BaseWizard from './';
-// import { saveStorage } from 'utils/config';
-// import { track } from 'utils/logging';
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, Linking } from 'react-native';
+import { entries } from 'lodash';
+
+import SelectMulti from 'components/modals/SelectMultiModal';
+import BaseWizardScreen from './BaseScreen';
 // import { useGameContent } from 'contexts/GameContentContext';
+import { track } from 'utils/logging';
+import { TRACK_ONBOARDING_STAGE } from 'utils/config';
+import { StatsConfig } from 'types/GameMechanics';
+
+export interface OnboardingWizardProps {
+    startIndex?: number;
+    // screens: string[]; // expo routes
+    onNext?: () => void;
+    onBack?: () => void;
+    onComplete: (config: object) => void;
+    backButtonStyle?: object;
+    nextButtonStyle?: object;
+}
+
+const avatarStats = StatsConfig.reduce((agg, s) => ({ ...agg, [s.name]: false }), {});
+const avatarMoods = {
+    protective: false,
+    jubilant: false,
+    lazy: false,
+    pensive: false,
+    loving: false,
+    dominant: false,
+    sassy: false,
+    forlorn: false,
+};
+const intentions = {
+    'creative expression': false,
+    'community living': false,
+    'unleashing inner child': false,
+    'achieving immortality': false,
+    'sexy physique': false,
+};
+
+const steps = [
+    {
+        dialogueData: {
+            title: 'Welcome To Jinni',
+            text: 'A self-actualization game that you play in real life. Take care of your tomogatchi (a.k.a jinni) and watch it evolved based on your actions and the data your feed it.',
+        },
+    },
+    {
+        dialogueData: {
+            title: 'Customize Your Game',
+            text: "Jinni is about making life fun. Everyone's life is different and they learn in different ways. Decide on your jinni's, your intentions for developing during the game, and how your jinni will evolve based onyour progress towards your intentions.",
+        },
+    },
+    {
+        dialogueData: {
+            title: 'What kind of atitude do you want your jinni to have?',
+            text: '',
+        },
+        options: avatarMoods,
+    },
+    {
+        dialogueData: {
+            title: 'What are you focused on improving in your life right now?',
+            text: '',
+        },
+        options: avatarStats,
+    },
+    {
+        dialogueData: {
+            title: 'What do you want to get out of playing Jinni?',
+            text: '',
+        },
+        options: intentions,
+    },
+    {
+        dialogueData: {
+            title: 'You Bonded With Your Jinni',
+            text: 'Now your bestest of buddies and they will help you with maical spells throughout your day',
+        },
+    },
+    {
+        dialogueData: {
+            title: 'Kiba ❤️s You 🫵',
+            text: 'Jinni is still in beta. I dream and build everything you see and want to make it the best. \n\n Please join the beta tester telegram group and give any good or bad feedback you have 🙏 \n\n Much Love, Kiba Gateaux 💋',
+        },
+    },
+];
+
+const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
+    startIndex = 0,
+    // screens,
+    onNext,
+    onBack,
+    onComplete,
+}) => {
+    // const onboardingContent = useGameContent().onboarding.wizard;
+    const [step, setStep] = useState(startIndex);
+    const [playerSettings, setSettings] = useState({}); // :config for :AvatarViewer widget
+
+    const changeStep = useCallback(
+        (index: number) => {
+            track(TRACK_ONBOARDING_STAGE, {
+                currentStep: index,
+                totalSteps: steps.length - 1,
+                // screenName:
+            });
+            index < step ? onBack && onBack() : onNext && onNext();
+            setStep(index);
+        },
+        [step, setStep, onBack, onNext],
+    );
+
+    const backStep = useCallback(() => {
+        console.log('component:wizard:Onboarding:backStep', step, step - 1);
+        if (step !== 0) {
+            changeStep(step - 1);
+        }
+    }, [step, changeStep]);
+
+    const nextStep = useCallback(() => {
+        console.log('component:wizard:Onboarding:nextStep', step);
+        if (step === steps.length - 1) {
+            // onComplete should close out wizard
+            onComplete(playerSettings);
+            // open telegram for them to join group
+            Linking.openURL('https://t.me/+fkqlrBc4YYczM2Mx');
+        } else {
+            changeStep(step + 1);
+        }
+    }, [step, changeStep, onComplete, playerSettings]);
+
+    const onSettingSaved = useCallback(
+        (options) => {
+            console.log('on step saved', step, options);
+            switch (step) {
+                case 2:
+                    if (!options) {
+                        console.log(
+                            'component:wizard:onboarding:onSave - NO options when expected -  ',
+                            step,
+                        );
+                        break;
+                    }
+
+                    setSettings({
+                        ...playerSettings,
+                        mood: entries(options)
+                            .filter(([, v]) => v)
+                            .map(([k]) => k),
+                    });
+                    break;
+                case 3:
+                    if (!options) {
+                        console.log(
+                            'component:wizard:onboarding:onSave - NO options when expected -  ',
+                            step,
+                        );
+                        break;
+                    }
 
-// const OnboardingWizard: React.FC<WizardProps> = ({
-//     startIndex = 0,
-//     screens,
-//     onNext,
-//     onBack,
-//     onComplete,
-//     backButtonStyle,
-//     nextButtonStyle,
-// }) => {
-//     const onboardingContent = useGameContent().onboarding.wizard;
-// const [step, setStep] = useState(startIndex);
-//     // const { height, width } = Dimensions.get('window');
-//     // const modalStyle = {
-//     //   ...styles.modal,
-//     //   height: size === 'lg' ? height : size === 'md' ? height * 0.6 : 'auto',
-//     //   width: size === 'lg' ? width : size === 'md' ? width * 0.8 : 'auto',
-//     // };
+                    setSettings({
+                        ...playerSettings,
+                        stats: entries(options)
+                            .filter(([, v]) => v)
+                            .map(([k]) => k),
+                    });
+                    break;
+                case 4:
+                    if (!options) {
+                        console.log(
+                            'component:wizard:onboarding:onSave - NO options when expected -  ',
+                            step,
+                        );
+                        break;
+                    }
 
-//     //     const onOnboardingComplete = () =>{
-//     //         saveStorage(ONBOARDING_STAGE, '1', false);
-//     //     }
+                    setSettings({
+                        ...playerSettings,
+                        intentions: entries(options)
+                            .filter(([, v]) => v)
+                            .map(([k]) => k),
+                    });
+                    break;
+                default:
+                    // no custom logic on non option
+                    break;
+            }
+            // TODO onComplete should be called in BaseWizard and defined in here
+            nextStep();
+        },
+        [playerSettings, step, nextStep],
+    );
 
-//     //    const  trackOnboarding = (index: number) => {
-//     //         track(ONBOARDING_STAGE, {
-//     //             index,
-//     //             // screenName:
-//     //         })
-//     //    }
-// if stage === 'start'
-// switch(step) {  }
-// case 0: return SelectMulti options={avatarMood}
-// case 1: return SelectMulti options={avatarCharacteristics}
-// case 2: return SelectMulti options={intentions}
-//     return null;
-// };
+    const screenData = steps[step];
+    console.log('component:wizard:Onboarding:render step', step, screenData);
+    return screenData.options ? (
+        <View style={styles.container}>
+            <SelectMulti
+                key={screenData.dialogueData.title}
+                allowMultiple
+                onClose={backStep}
+                onFinalize={onSettingSaved}
+                useModal={false}
+                {...screenData}
+            />
+        </View>
+    ) : (
+        <BaseWizardScreen step={step} onBack={backStep} onNext={nextStep} {...screenData} />
+    );
+};
 
-// const styles = StyleSheet.create({
-//     modalSize: {
-//         top: '15%',
-//         left: '10%',
-//         right: '10%',
-//         bottom: '15%',
-//         // shadowColor: '#FFC1CB',
-//         // shadowOffset: { width: 5, height: 10 },
-//         // shadowOpacity: 1,
-//         // shadowRadius: 10,
-//     },
-//     contentContainer: {
-//         backgroundColor: 'white',
-//         position: 'absolute',
-//         flexDirection: 'column',
-//         justifyContent: 'space-between',
-//         padding: 25,
-//         borderWidth: 2,
-//         borderRadius: 10,
-//     },
-//     text: {
-//         fontSize: 24,
-//         fontWeight: 'bold',
-//     },
-//     ctaContainer: {
-//         flex: 1,
-//         flexDirection: 'row',
-//         justifyContent: 'space-between',
-//         marginTop: 20,
-//     },
-//     button: {
-//         padding: 10,
-//         borderRadius: 5,
-//         marginHorizontal: 5,
-//     },
-//     closeButton: {
-//         padding: 10,
-//         borderRadius: 5,
-//         marginTop: 20,
-//     },
-// });
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: 'skyblue',
+        height: '100%',
+        width: ' 100%',
+    },
+    text: {
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+    ctaContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 20,
+    },
+    button: {
+        padding: 10,
+        borderRadius: 5,
+        marginHorizontal: 5,
+    },
+    closeButton: {
+        padding: 10,
+        borderRadius: 5,
+        marginTop: 20,
+    },
+});
 
-// export default OnboardingWizard;
+export default OnboardingWizard;
diff --git a/src/inventory/spotify.ts b/src/inventory/spotify.ts
index 168038d..b823f4e 100644
--- a/src/inventory/spotify.ts
+++ b/src/inventory/spotify.ts
@@ -14,7 +14,12 @@ import {
     // eslint-ignore-next-line
     // Resource,
 } from 'types/GameMechanics';
-import { ID_PLAYER_SLOT, ID_PROVIDER_IDS_SLOT, SHARE_CONTENT, getStorage } from 'utils/config';
+import {
+    ID_PLAYER_SLOT,
+    ID_PROVIDER_IDS_SLOT,
+    TRACK_SHARE_CONTENT,
+    getStorage,
+} from 'utils/config';
 import { debug, track } from 'utils/logging';
 import { obj } from 'types/UserConfig';
 
@@ -128,14 +133,14 @@ const item: InventoryItem = {
             canDo: async (status: ItemStatus) => (status === 'equipped' ? 'doable' : 'unequipped'),
             do: async () => {
                 console.log('Spotify:Ability:ShareProfile');
-                track(SHARE_CONTENT, {
+                track(TRACK_SHARE_CONTENT, {
                     spell: ABILITY_SHARE_PROFILE,
                     activityType: 'initiated',
                 });
                 const pid = await getStorage(ID_PLAYER_SLOT);
                 console.log('Spotify:Ability:ShareProfile:pid', pid);
                 if (!pid) {
-                    track(SHARE_CONTENT, {
+                    track(TRACK_SHARE_CONTENT, {
                         spell: ABILITY_SHARE_PROFILE,
                         activityType: 'unauthenticated',
                         success: false,
@@ -147,7 +152,7 @@ const item: InventoryItem = {
                     const providerId = await getProviderId({ playerId: pid, provider: ITEM_ID });
                     console.log('Spotify:Ability:ShareProfile:id', providerId);
                     if (!providerId) {
-                        track(SHARE_CONTENT, {
+                        track(TRACK_SHARE_CONTENT, {
                             spell: ABILITY_SHARE_PROFILE,
                             activityType: 'unequipped',
                             providerId,
@@ -167,7 +172,7 @@ const item: InventoryItem = {
 
                     console.log('Spotify:Ability:ShareProfile:share', action);
                     if (action === Share.sharedAction) {
-                        track(SHARE_CONTENT, {
+                        track(TRACK_SHARE_CONTENT, {
                             spell: ABILITY_SHARE_PROFILE,
                             activityType: activityType ?? 'shared',
                             providerId,
@@ -177,7 +182,7 @@ const item: InventoryItem = {
                     }
 
                     if (action === Share.dismissedAction) {
-                        track(SHARE_CONTENT, {
+                        track(TRACK_SHARE_CONTENT, {
                             spell: ABILITY_SHARE_PROFILE,
                             activityType: 'dismissed',
                             providerId,
@@ -185,7 +190,7 @@ const item: InventoryItem = {
                         return async () => false;
                     }
                 } catch (e: unknown) {
-                    track(SHARE_CONTENT, {
+                    track(TRACK_SHARE_CONTENT, {
                         spell: ABILITY_SHARE_PROFILE,
                         activityType: 'failed',
                         success: false,
@@ -230,14 +235,14 @@ const item: InventoryItem = {
                 return async () => false;
             },
             getOptions: async <Resource>() => {
-                track(SHARE_CONTENT, {
+                track(TRACK_SHARE_CONTENT, {
                     spell: WIDGET_PIN_PLAYLIST,
                     activityType: 'initiated',
                 });
                 const pid = await getStorage<string>(ID_PLAYER_SLOT);
                 console.log('Spotify:Ability:PinPlaylist:pid', pid);
                 if (!pid) {
-                    track(SHARE_CONTENT, {
+                    track(TRACK_SHARE_CONTENT, {
                         spell: WIDGET_PIN_PLAYLIST,
                         activityType: 'unauthenticated',
                         success: false,
@@ -249,7 +254,7 @@ const item: InventoryItem = {
                     const providerId = await getProviderId({ playerId: pid, provider: ITEM_ID });
                     console.log('Spotify:Ability:PinPlaylist:id', providerId);
                     if (!providerId) {
-                        track(SHARE_CONTENT, {
+                        track(TRACK_SHARE_CONTENT, {
                             spell: WIDGET_PIN_PLAYLIST,
                             activityType: 'unequipped',
                             providerId,
@@ -289,7 +294,7 @@ const item: InventoryItem = {
 
                     return response?.data?.get_playlists ?? null;
                 } catch (e: unknown) {
-                    track(SHARE_CONTENT, {
+                    track(TRACK_SHARE_CONTENT, {
                         spell: WIDGET_PIN_PLAYLIST,
                         activityType: 'failed',
                         success: false,
diff --git a/src/types/UserConfig.ts b/src/types/UserConfig.ts
index 1df0863..0c20db9 100644
--- a/src/types/UserConfig.ts
+++ b/src/types/UserConfig.ts
@@ -22,6 +22,7 @@ export interface HomeConfig {
 export interface WidgetConfig {
     id: WidgetIds;
     provider: ItemIds;
+    priority?: number;
     // navigation
     routeName: string; // Expo route navigation name
     title: string;
@@ -53,11 +54,12 @@ export type GameWidgetIds =
     | 'stat-faith'
     | 'stat-strength'
     | 'stat-stamina'
-    | 'stat-spirit';
+    | 'stat-spirit'
+    | 'maliksmajik-avatar-viewer';
 
 // player action portals
 export type ItemWidgetIds =
-    | 'maliks-majik-leaderboard'
+    | 'maliksmajik-leaderboard'
     // identity
     | 'spotify-profile'
     | 'spotify-most-played'
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 72b3ded..744a322 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,5 +1,5 @@
 import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
-import { isEmpty } from 'lodash';
+import _, { isEmpty } from 'lodash';
 import { HomeConfig } from 'types/UserConfig';
 import { UpdateWidgetConfigParams } from 'types/api';
 import {
@@ -121,11 +121,11 @@ export const MU_SUBMIT_DATA = `
 export const MU_SET_WIDGET = `
     mutation jinni_set_widget(
         $verification: SignedRequest!,
-        $settings: [WidgetSettingsInput]!
+        $widgets: [WidgetSettingInput]!
     ) {
         jinni_set_widget(
             verification: $verification, 
-            $settings: [WidgetSettingsInput]!
+            widgets: $widgets
         )
     }
 `;
@@ -155,11 +155,33 @@ export const getHomeConfig = async (username?: string): Promise<HomeConfig> => {
 };
 
 export const saveHomeConfig = async ({ widgets }: UpdateWidgetConfigParams): Promise<boolean> => {
-    // get existing config to merge
+    console.log('home config deduped 1!!!', widgets);
     const config = await getStorage<HomeConfig>(HOME_CONFIG_STORAGE_SLOT);
+    // merge new and existing widget configs. only one widget per id allowed (eventually uniq by id + target_uuid)
+    // const deduped = _(config?.widgets ?? []) // start sequence
+    //     .keyBy('id') // create map
+    //     .merge(_.keyBy(widgets, 'id')) // create map of existing config and merge it to new configs
+    //     .values() // merged map back to array
+    //     .value()
+    const deduped = config?.widgets.filter((w) => !_.find(widgets, { id: w.id }));
+    const merged = [...widgets, ...deduped];
+    console.log(
+        'home config deduped 1!!!',
+        merged,
+        deduped.find((w) => w.id === 'maliksmajik-avatar-viewer'),
+    );
+    // const deduped2 = _.uniqBy([...config?.widgets ?? [], ...widgets], '')
+
+    const deduped2 = _.union([...(config?.widgets ?? []), ...widgets]);
+
+    console.log(
+        'home config deduped 2!!!',
+        deduped2.find((w) => w.id === 'maliksmajik-avatar-viewer'),
+    );
+
     const newConfig = await saveStorage<HomeConfig>(
         HOME_CONFIG_STORAGE_SLOT,
-        { ...config, widgets },
+        { ...config, widgets: deduped },
         false,
         defaultHomeConfig,
     );
@@ -174,20 +196,21 @@ export const saveHomeConfig = async ({ widgets }: UpdateWidgetConfigParams): Pro
     //     return true;
     // }
 
-    // return qu<string>({ mutation: MU_SET_WIDGET })({
-    //     settings: widgets.map((s) => ({
-    //         ...s,
-    //         widget_id: s.id,
-    //         config: s.config,
-    //     })),
-    // })
-    // .then((res) => {
-    //     console.log('Modal:SelectMulti:Save:response', res);
-    //     return true;
-    // })
-    // .catch((err) => {
-    //     console.log('Modal:SelectMulti:Save:ERR', err);
-    //     return false;
-    // });
+    return qu<string>({ mutation: MU_SET_WIDGET })({
+        widgets: merged.map(({ id, provider, priority = 0, config }) => ({
+            id,
+            provider,
+            priority,
+            ...(config ?? {}),
+        })),
+    })
+        .then((res) => {
+            console.log('utils:api:saveHomeConfig:response', res);
+            return true;
+        })
+        .catch((err) => {
+            console.log('utils:api:saveHomeConfig:ERR', err);
+            return false;
+        });
     return Promise.resolve(true);
 };
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 2ef34db..d852e51 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -16,7 +16,7 @@ import {
     WidgetIds,
 } from 'types/UserConfig';
 import { debug, track } from './logging';
-import { ItemIds } from 'types/GameMechanics';
+import { ItemAbility, ItemIds } from 'types/GameMechanics';
 
 // import { qu } from './api';
 
@@ -26,9 +26,12 @@ export const HOME_CONFIG_STORAGE_SLOT = 'home.widgets';
 export const MALIKS_MAJIK_CARD = '0x46C79830a421038E75853eD0b476Ae17bFeC289A';
 export const MAJIK_CARDS = [MALIKS_MAJIK_CARD];
 
+// cross provider analytics eventrs
 export const TRACK_PERMS_REQUESTED = 'PERMISSIONS_REQUESTED';
 export const TRACK_DATA_QUERIED = 'DATA_QUERIED';
-export const SHARE_CONTENT = 'SHARE_CONTENT';
+export const TRACK_SHARE_CONTENT = 'SHARE_CONTENT';
+export const TRACK_ONBOARDING_STAGE = 'ONBOARDING_STAGE';
+export const STAGE_AVATAR_CONFIG = '0_ONBOARDING_STAGE_AVATAR_CONFIG';
 
 // local + secure storage slots
 export const LAST_QUERIED_SLOT = 'LAST_TIME_QUERIED';
@@ -48,11 +51,28 @@ export const getCached = memoize(
 const updateCache = (key: StorageKey, val: StorageValue) =>
     getCached.cache.set(JSON.stringify(key), val);
 
-type AppConfig = {
+/**
+ * This is the description of the interface
+ *
+ * @interface AppConfig
+ * @member {string} label is used for whatever reason
+ * @field {string} prop is used for other reason
+ * @member {string} NODE_ENV -
+ * @member {string} API_URL - jinni api to call for functionality
+ * @member {string} REDIRECT_URL - oauth redirect uri. Could be API_URL or other approved url
+ * @member {string} ETH_NETWORK - which Ethereum network to use for attestations and contract interactions
+ * @member {string} ETH_API_PROVIDER_URI - Ethereum RPC provider for Network
+ * @member {string} ETH_API_PROVIDER_API_KEY - API key for RPC provider
+ * @member {string} SENTRY_DSN - Sentry.io project id
+ * @member {string} SENTRY_ORG - Sentry.io project id
+ * @member {string} SENTRY_PROJECT - Sentry.io project id
+ * @member {string} SEGMENT_API_KEY - Segment.io API key for sending analytics
+ */
+interface AppConfig {
     NODE_ENV: 'development' | 'production' | 'test';
     API_URL: string;
     REDIRECT_URL: string;
-    API_KEY: string;
+
     ETH_NETWORK: string;
     ETH_API_PROVIDER_URI: string;
     ETH_API_PROVIDER_API_KEY: string;
@@ -61,7 +81,7 @@ type AppConfig = {
     SENTRY_ORG: string | undefined;
     SENTRY_PROJECT: string | undefined;
     SEGMENT_API_KEY: string | undefined;
-};
+}
 
 // console.log('Config:env', process.env);
 
@@ -69,7 +89,6 @@ export const getAppConfig = (): AppConfig => ({
     NODE_ENV: process.env.NODE_ENV || 'development',
     API_URL: process.env.EXPO_PUBLIC_API_URL || 'http://localhost:8888',
     REDIRECT_URL: process.env.EXPO_PUBLIC_REDIRECT_URL || 'http://localhost:8888',
-    API_KEY: process.env.EXPO_PUBLIC_API_KEY || 'test-api-key',
 
     ETH_NETWORK: process.env.EXPO_PUBLIC_ETH_NETWORK || 'optimism',
     ETH_API_PROVIDER_URI: process.env.EXPO_PUBLIC_ETH_API_PROVIDER_URI || 'test-api-key',
@@ -81,6 +100,7 @@ export const getAppConfig = (): AppConfig => ({
     SEGMENT_API_KEY: process.env.EXPO_PUBLIC_SEGMENT_API_KEY || 'aaaaaaa',
 });
 
+// TODO deprecate for utils/api.getHomeConfig
 export const getHomeConfig = async (username?: string): Promise<HomeConfig> => {
     const customConfig = await getStorage<HomeConfig>(HOME_CONFIG_STORAGE_SLOT);
     // console.log("custom config ", customConfig)
@@ -104,6 +124,10 @@ export const getHomeConfig = async (username?: string): Promise<HomeConfig> => {
         });
 };
 
+export const filterOutDefaultWidgets = (widgets: WidgetConfig[] | ItemAbility[]) =>
+    widgets.filter(
+        (w) => w.id !== 'maliksmajik-avatar-viewer' && w.id !== 'maliksmajik-speak-intention',
+    );
 export const itemAbilityToWidgetConfig = (
     provider: ItemIds,
     widgetId: WidgetIds,
@@ -259,8 +283,8 @@ export const getStorage: <T>(slot: string, useMysticCrypt?: boolean) => Promise<
         console.log(
             'get storage 1 - {slot, useCrypt} + cached',
             JSON.stringify({ slot, secure: useMysticCrypt }),
-            cached,
         );
+        console.dir(cached);
         if (cached) return cached;
         const val = useMysticCrypt
             ? await getItemAsync(slot, { requireAuthentication: !__DEV__ })