diff --git a/README.md b/README.md
index b58e0af..affb38f 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,96 @@
-# Getting Started with Create React App
+# Survey Viewer App
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Survey Viewer is an online application to view/run a Survey from a json Survey Definition used by [Influenzanet Survey Engine](https://github.com/influenzanet/survey-engine.ts)
 
-## Available Scripts
+## Installing
 
-In the project directory, you can run:
+This application is built as a Single Page Application with React Framework.
 
-### `yarn start`
+To install the application, clone this repo and run yarn to install the dependencies
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+```bash
+yarn 
+````
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+To run in in dev environment
+```bash
+yarn start
+```
 
-### `yarn test`
+To build the app as a standalone website:
+```bash 
+yarn build
+```
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+The deployable website will be in 'build' directory
 
-### `yarn build`
+## Survey Definition Source
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+2 ways are proposed to view a survey :
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+- Upload a JSON file containing the Survey Definition
+- Use a Survey Provider Service : a list of available survey will be loaded from the service and downloaded directly from the service
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+An implementation for survey provider service is available in [Grippenet repository](https://github.com/grippenet/survey-provider-service). It serves survey list from files in a directory.
 
-### `yarn eject`
+To use the service provider, the application must be compiled with some environment variables
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+- REACT_APP_SURVEY_URL: URL of the survey service
+- REACT_APP_CSP_CONNECT_URLS: the URL also must be added to this variable to enable the app to connect to the survey service
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Example
+```bash
+REACT_APP_SURVEY_URL=https://your.survey.service
+# You may add  
+REACT_APP_CSP_CONNECT_URLS=$REACT_APP_SURVEY_URL ...
+```     
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+# Customize
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Warning: These customizations are useable only after the application is built. So you need to use either dev server (`yarn start`) or to rebuild the static website (`yarn build`)
 
-## Learn More
+## Add a custom Response Component
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+To register a customComponent, you have to modify the script 'localConfig.ts' and make the function registerCustomComponents return the list of your component
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```ts
+export const registerCustomComponents = () : CustomSurveyResponseComponent[] | undefined => {
+    return [
+        {
+            name: 'awesomeComponent', // Name of your component as it will be used in `role` field of the survey definition
+            component: MyAwesomeComponent
+        }
+    ];
+} 
+```
+
+## Add Flags
+
+You can tell to the survey viewer which flags are handled by your platform (and for each what are the expected values). The Survey Context editor will propose the known list and enable more friendly editor than json editor.
+
+You had to customize the 
+
+```ts
+export const registerParticipantFlags = () : ParticipantFlags => {
+    return {
+        'myflagkey': {
+            label: 'The label to tell the user what is the purpose of this flag'
+            values: [
+                {
+                    value: '1' // The value the flag can have
+                    label: 'A friendly label to explain what is this value'
+                }
+            ]
+        },
+        // A real example (the 'prev' flag used in Influenzanet platform)
+        'prev': {
+            label:"Has ongoing symptoms",
+            values: [
+                {value:"0", label:"Does not have ongoing symptoms"}
+                {value: "1", label:"Has ongoing symptoms"}
+            ],
+        },
+    };
+}
+
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 2629514..674264c 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,15 @@
     "@types/node": "^16.11.12",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
-    "bootstrap": "^5.2.2",
-    "case-web-ui": "^1.14.0",
+    "bootstrap": "^5.2.3",
+    "case-web-ui": "^1.14.7",
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.5.0",
+    "react-bootstrap": "^2.7.3",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "survey-engine": "1.2.0",
+    "survey-engine": "1.2.1",
     "typescript": "^4.5.5",
     "web-vitals": "^1.0.1"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 9c80422..d8c0e7b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,36 +1,46 @@
 import React, { useState } from 'react';
-import { Survey, SurveyContext, SurveySingleItemResponse } from 'survey-engine/data_types';
+import { Survey } from 'survey-engine/data_types';
 import Navbar from './components/NavbarComp';
-import SimulationSetup, { defaultSimulatorUIConfig, defaultSurveyContext } from './components/SimulationSetup';
 import SurveyLoader from './components/SurveyLoader';
 import SurveyMenu from './components/SurveyMenu';
 import SurveyServiceLoader from './components/SurveyServiceLoader';
-import SurveySimulator, { SimulatorUIConfig } from './components/SurveySimulator';
+import { registerCustomComponents, registerParticipantFlags } from './localConfig';
 
 interface AppState {
-  selectedLanguage?: string;
-  languageCodes?: string[];
+  selectedAppLanguage?: string; // Language of the Application (for future translation)
   surveyKey?: string;
   survey?: Survey;
-  surveyContext: SurveyContext;
-  prefillsFile?: File;
-  prefillValues?: SurveySingleItemResponse[],
   screen: Screens;
-  simulatorUIConfig: SimulatorUIConfig;
 }
 
-type Screens = 'loader' | 'menu' | 'simulation-setup' | 'simulator';
+// Application translations, currently only english is provided.
+const availableAppLanguages : string[] = ['en'];
+
+const customResponseComponents = registerCustomComponents();
+const participantFlags = registerParticipantFlags();
+
+type Screens = 'loader' | 'menu';
 
 const initialState: AppState = {
   screen: 'loader',
-  simulatorUIConfig: { ...defaultSimulatorUIConfig },
-  surveyContext: { ...defaultSurveyContext },
 }
 
 const surveyProviderUrl = process.env.REACT_APP_SURVEY_URL ?? "";
 
 console.log("Using provider "+ surveyProviderUrl);
 
+// Default languages to show in the survey. If several use the first available in the survey.
+// You can customize the default survey languages by definiing REACT_APP_DEFAULT_SURVEY_LANGUAGES env variable
+const defaultSurveyLanguages : string[] = (()=>{
+  let defaultLang: string[] = ['en'];
+  const envLang = process.env.REACT_APP_DEFAULT_SURVEY_LANGUAGES ?? "";
+  if(envLang) {
+    defaultLang = envLang.split(',').map(v => v.trim());
+  }
+  return defaultLang;
+})();
+
+
 const App: React.FC = () => {
   const [appState, setAppState] = useState<AppState>({
     ...initialState
@@ -42,11 +52,6 @@ const App: React.FC = () => {
       return;
     }
 
-    const languageCodes = surveyObject.props?.name?.map(o => o.code);
-    if (!languageCodes || languageCodes.length < 1) {
-      alert('Languages cannot be extracted');
-      return;
-    }
 
     const surveyDef = surveyObject.surveyDefinition;
 
@@ -54,8 +59,7 @@ const App: React.FC = () => {
 
     setAppState({
       ...initialState,
-      selectedLanguage: languageCodes[0],
-      languageCodes: languageCodes,
+      selectedAppLanguage: availableAppLanguages[0],
       surveyKey: surveyKey,
       screen: 'menu',
       survey: surveyObject
@@ -83,104 +87,31 @@ const App: React.FC = () => {
         }}>
           <div className="row flex-grow-1">
             <div className="col-12">
-            <SurveyLoader onSurveyLoaded={onLoadSurvey} />
-              {
+            {
                 surveyProviderUrl ? <SurveyServiceLoader onSurveyLoaded={onLoadSurvey} surveyProviderUrl={surveyProviderUrl} /> : null
-              }
+            }
+            <SurveyLoader onSurveyLoaded={onLoadSurvey}/>
             </div>
           </div>
         </div>
+        
       case 'menu':
-        if (!appState.selectedLanguage || !appState.survey) {
+        if (!appState.selectedAppLanguage || !appState.survey) {
           reset();
           return null;
         }
         return <SurveyMenu
-          selectedLangue={appState.selectedLanguage}
+          participantFlags={participantFlags}
+          defaultSurveyLanguages={defaultSurveyLanguages}
           survey={appState.survey}
-          onOpenSimulator={() => navigateTo('simulation-setup')}
+          customResponseComponents={customResponseComponents}
           onExit={() => {
             reset()
           }}
         />
-      case 'simulation-setup':
-        return <SimulationSetup
-          onStart={() => navigateTo('simulator')}
-          onExit={() => navigateTo('menu')}
-          prefillsFile={appState.prefillsFile}
-          onPrefillChanged={(prefills?: File) => {
-            if (prefills) {
-              const reader = new FileReader()
-
-              reader.onabort = () => console.log('file reading was aborted')
-              reader.onerror = () => console.log('file reading has failed')
-              reader.onload = () => {
-                // Do whatever you want with the file contents
-                const res = reader.result;
-                if (!res || typeof (res) !== 'string') {
-                  console.error('TODO: handle file upload error')
-                  return;
-                }
-                const content = JSON.parse(res);
-                setAppState(prev => {
-                  return {
-                    ...prev,
-                    prefillsFile: prefills,
-                    prefillValues: content,
-
-                  }
-                })
-              }
-              reader.readAsText(prefills)
-            } else {
-              setAppState(prev => {
-                return {
-                  ...prev,
-                  prefillsFile: prefills,
-                  prefillValues: []
-
-                }
-              })
-            }
-
-
-
-          }}
-          currentSurveyContext={appState.surveyContext}
-          onSurveyContextChanged={(config) => setAppState(prev => {
-            return {
-              ...prev,
-              surveyContext: {
-                ...config
-              }
-            }
-          })}
-          currentSimulatorUIConfig={appState.simulatorUIConfig}
-          onSimulatorUIConfigChanged={(config) => setAppState(prev => {
-            return {
-              ...prev,
-              simulatorUIConfig: {
-                showKeys: config.showKeys,
-                texts: { ...config.texts }
-              }
-            }
-          })}
-        />
-      case 'simulator':
-        return <SurveySimulator
-          config={appState.simulatorUIConfig}
-          surveyAndContext={
-            appState.survey ? {
-              survey: appState.survey,
-              context: appState.surveyContext
-            } : undefined
-          }
-          prefills={appState.prefillValues}
-          selectedLanguage={appState.selectedLanguage}
-          onExit={() => navigateTo('simulation-setup')}
-        />
     }
   }
+  
 
   return (
     <div className="d-flex flex-column overflow-scroll" style={{
@@ -188,13 +119,13 @@ const App: React.FC = () => {
     }}>
       <Navbar
         surveyName={appState.surveyKey}
-        selectedLanguage={appState.selectedLanguage}
-        languagecodes={appState.languageCodes}
+        selectedLanguage={appState.selectedAppLanguage}
+        languagecodes={availableAppLanguages}
         onSelectLanguage={(code) => {
           setAppState(prev => {
             return {
               ...prev,
-              selectedLanguage: code
+              selectedAppLanguage: code
             }
           })
         }}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 40462c5..3f5b157 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,21 +1,55 @@
-import React from 'react';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+import { CardBody, CardHeader, Card } from 'react-bootstrap';
+
+
+type VariantsType = 'primary' | 'grey' | 'info';
 
 interface CardProps {
-    title: string;
+    title: ReactNode;
     className?: string;
+    variant?: VariantsType;
+    headerTag?: 'h3' | 'h4' |'h5' |'h6';
+}
+
+interface VariantProps {
+    header: string;
+    body: string;
+}
+
+const variants: Record<VariantsType, VariantProps> = {
+    'primary': {
+        header:'bg-primary text-white',
+        body:'bg-grey-1'
+    },
+    'grey': {
+        header:'bg-grey-1',
+        body:''
+    },
+    'info': {
+        header:'bg-info',
+        body:''
+    }
 }
 
-const Card: React.FC<CardProps> = (props) => {
+
+const CardTitled: React.FC<CardProps> = (props) => {
+
+    const v = variants[props.variant ?? 'primary'];
+
+    const hTag = props.headerTag ?? 'h4';
+    const h = React.createElement(hTag, {className: "fw-bold m-0"}, props.title);
+
     return (
-        <div className={props.className}>
-            <div className="bg-primary text-white px-2 px-sm-3 py-2a">
-                <h4 className="fw-bold m-0">{props.title}</h4>
-            </div>
-            <div className="bg-grey-1 px-2 px-sm-3 py-3">
+        <Card className={clsx(props.className, "rounded")}>
+        <CardHeader className={v.header} >
+           {h}
+        </CardHeader>
+        <CardBody className={v.body}>
                 {props.children}
-            </div>
-        </div >
+        </CardBody>
+        </Card>
     );
 };
 
-export default Card;
+export default CardTitled;
diff --git a/src/components/HelpComponents.tsx b/src/components/HelpComponents.tsx
new file mode 100644
index 0000000..32ed65c
--- /dev/null
+++ b/src/components/HelpComponents.tsx
@@ -0,0 +1,11 @@
+
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import React, { useState } from 'react';
+
+interface HelpTooltipProps {
+    label: string;
+}
+
+export const HelpTooltip: React.FC<HelpTooltipProps> = (props) => {
+    return <OverlayTrigger overlay={<Tooltip>{props.label}</Tooltip>}><Badge className='mx-1' pill={true}>?</Badge></OverlayTrigger>
+}
diff --git a/src/components/NavbarComp.tsx b/src/components/NavbarComp.tsx
index baf70d7..55f932f 100644
--- a/src/components/NavbarComp.tsx
+++ b/src/components/NavbarComp.tsx
@@ -12,6 +12,7 @@ const NavbarComp: React.FC<NavbarCompProps> = (props) => {
 
     const languageSelector = (codes: string[]) => {
         return (<Nav className="ms-auto">
+            <Navbar.Text className='me-1'>Application Language</Navbar.Text> 
             {(codes.length === 1) ?
                 <Navbar.Text>{codes[0]}</Navbar.Text> :
                 <NavDropdown title={props.selectedLanguage} align="end" id="basic-nav-dropdown">
@@ -23,7 +24,8 @@ const NavbarComp: React.FC<NavbarCompProps> = (props) => {
                             }
                         }}
                     >{code}</NavDropdown.Item>)}
-                </NavDropdown>}
+                </NavDropdown>
+                }
 
         </Nav>)
     }
@@ -32,7 +34,7 @@ const NavbarComp: React.FC<NavbarCompProps> = (props) => {
         <Navbar bg="primary" variant="dark" className="py-1a">
             <div className="container">
                 <Navbar.Brand>
-                    CASE <span> Viewer</span>
+                    { process.env.REACT_APP_TITLE ?? "CASE Viewer" }
                 </Navbar.Brand>
                 {props.surveyName ? <Navbar.Text>{props.surveyName}</Navbar.Text> : null}
                 {props.languagecodes ? languageSelector(props.languagecodes) : null}
diff --git a/src/components/SimulationSetup.tsx b/src/components/SimulationSetup.tsx
index ec98b6c..7dc598c 100644
--- a/src/components/SimulationSetup.tsx
+++ b/src/components/SimulationSetup.tsx
@@ -1,22 +1,25 @@
 import Editor from '@monaco-editor/react';
-import { Checkbox, FileDropzone } from 'case-web-ui';
+import { FileDropzone } from 'case-web-ui';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { SurveyContext } from 'survey-engine/data_types';
-import Card from './Card';
+import CardTitled from './Card';
 import { acceptJSON } from './constants';
 import { SimulatorUIConfig, SurveyUILabels } from './SurveySimulator';
 import UploadDialog from './UploadDialog';
+import { ParticipantFlag, ParticipantFlags } from '../types/flags';
+import { Badge, Button, ListGroup, ListGroupItem} from 'react-bootstrap';
+import { PrefillEntry, PrefillsRegistry } from '../types';
+import { HelpTooltip } from './HelpComponents';
 
 interface SimulationSetupProps {
     currentSimulatorUIConfig: SimulatorUIConfig;
     currentSurveyContext: SurveyContext;
-    prefillsFile?: File;
+    participantFlags: ParticipantFlags
+    prefillRegistry: PrefillsRegistry
     onSimulatorUIConfigChanged: (config: SimulatorUIConfig) => void;
     onSurveyContextChanged: (context: SurveyContext) => void;
-    onPrefillChanged: (prefills?: File) => void;
-    onStart: () => void;
-    onExit: () => void;
+    onPrefillChanged: (registry: PrefillsRegistry) => void;
 }
 
 export const defaultSimulatorUIConfig: SimulatorUIConfig = {
@@ -42,19 +45,6 @@ const SimulationSetup: React.FC<SimulationSetupProps> = (props) => {
     const [hasUILabelEditorErrors, setHasUILabelEditorErrors] = useState(false);
     const [openSurveyUIConfigUploadDialog, setOpenSurveyUIConfigUploadDialog] = useState(false);
 
-    const navButtons = (
-        <div>
-            <button
-                className="btn btn-secondary"
-                onClick={() => props.onExit()}
-            >Back to Menu</button>
-            <button
-                className="btn btn-primary ms-2"
-                onClick={() => props.onStart()}
-            >Start</button>
-        </div>
-    )
-
     const surveyUIConfigUploader = <UploadDialog
         open={openSurveyUIConfigUploadDialog}
         onReady={(file) => {
@@ -109,114 +99,152 @@ const SimulationSetup: React.FC<SimulationSetupProps> = (props) => {
         onClose={() => setOpenSurveyContextUploadDialog(false)}
     />
 
+    const updatePrefillRegistry = (registry: PrefillsRegistry) => {
+        const r = { ...registry };
+        props.onPrefillChanged(r);
+    }
 
+    const uploadPrefill = (file?: File) => {
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader()
 
-    return (
-        <div className="container my-3">
-            {navButtons}
-
-            <Card title="Participant"
-                className="my-2"
-            >
-                <h6 className="fw-bold">Prefill:</h6>
-                <FileDropzone
-                    placeholderText="No file selected"
-                    accept={acceptJSON}
-                    maxFiles={1}
-                    files={props.prefillsFile ? [props.prefillsFile] : []}
-                    onDrop={(acceptedFiles) => {
-                        if (acceptedFiles.length > 0) {
-                            props.onPrefillChanged(acceptedFiles[0]);
-                        }
-                    }}
-                />
-                <button
-                    type="button"
-                    disabled={hasSurveyContextEditorErrors}
-                    className="btn btn-link p-0 text-decoration-none text-start text-uppercase me-3 mt-2"
-                    onClick={() => {
-                        props.onPrefillChanged(undefined)
-                    }}
-                >
-                    Clear
-                </button>
+        reader.onabort = () => console.log('file reading was aborted')
+        reader.onerror = () => console.log('file reading has failed')
+        reader.onload = () => {
+            // Do whatever you want with the file contents
+            const res = reader.result;
+            if (!res || typeof (res) !== 'string') {
+                console.error('TODO: handle file upload error')
+                return;
+            }
+            const content = JSON.parse(res);
+            console.log("prefill values", content);
 
-                <h6 className="fw-bold mt-3">Survey context:</h6>
-                <Editor
-                    height="150px"
-                    defaultLanguage="json"
-                    value={JSON.stringify(props.currentSurveyContext, undefined, 4)}
-                    className={clsx(
-                        { 'border border-danger': hasSurveyContextEditorErrors }
-                    )}
-                    onValidate={(markers) => {
-                        if (markers.length > 0) {
-                            setHasSurveyContextEditorErrors(true)
-                        } else {
-                            setHasSurveyContextEditorErrors(false)
-                        }
-                    }}
-                    onChange={(value) => {
-                        if (!value) { return }
-                        let context: SurveyContext;
-                        try {
-                            context = JSON.parse(value);
-                        } catch (e: any) {
-                            console.error(e);
-                            return
-                        }
-                        if (!context) { return }
-                        props.onSurveyContextChanged({
-                            ...context
-                        })
+            const registry = props.prefillRegistry;
+            const n = registry.prefills.push({ name: file.name, data: content });
+            registry.current = n - 1;
+            updatePrefillRegistry(registry);
+        }
+        reader.readAsText(file)
+    }
 
-                    }}
-                />
-                {hasSurveyContextEditorErrors ?
-                    <p className="text-danger p-0">
-                        Check the editor for errors
-                    </p>
-                    : null}
-                <div>
+    const handleChangePrefill = (index?: number) => {
+        const registry = props.prefillRegistry;
+        registry.current = index;
+        updatePrefillRegistry(registry);
+    }
+
+    const prefillEntry = (entry: PrefillEntry, index: number) => {
+        const active = index === props.prefillRegistry.current;
+        return <ListGroupItem key={index} active={active} onClick={() => handleChangePrefill(index)} style={{"cursor":"pointer"}}>
+            {entry.name} {active ? <Badge pill={true} bg='success'>Current</Badge> : ''}
+        </ListGroupItem>
+    }
+
+    return (
+        <div className="container my-3">
+            <CardTitled title="Participant" className="my-2">
+                <CardTitled variant='grey' title=<span>Prefills <HelpTooltip label="Prefills are used to set the state of the survey before it is filled. It can be used to provide values from a previous response"/></span> headerTag='h5'>
+                    List of the prefill datasets available. Each one prefills a full survey. Click on one element of the list to use it to prefill the survey.
+                    <ListGroup className='my-1 w-50 ms-4'>
+                        {props.prefillRegistry.prefills.map(prefillEntry)}
+                    </ListGroup>
+                    Prefills can be added by downloading them from a file or by filling a survey and saving the response as prefills
+                    <div className="border rounded my-1 px-2 py-1">
+                        Add a prefill dataset by downloading a file
+                        <FileDropzone
+                            placeholderText="No file selected"
+                            accept={acceptJSON}
+                            maxFiles={1}
+                            files={[]}
+                            onDrop={(acceptedFiles) => {
+                                if (acceptedFiles.length > 0) {
+                                    uploadPrefill(acceptedFiles[0]);
+                                }
+                            }}
+                        />
+                    </div>
                     <button
                         type="button"
                         disabled={hasSurveyContextEditorErrors}
                         className="btn btn-link p-0 text-decoration-none text-start text-uppercase me-3 mt-2"
                         onClick={() => {
-                            props.onSurveyContextChanged({
-                                ...defaultSurveyContext
-                            })
+                            handleChangePrefill(undefined);
                         }}
                     >
-                        Clear
+                        Clear the current prefill
                     </button>
-                    <button
-                        className="btn btn-link p-0 text-decoration-none text-start text-uppercase me-2 mt-2"
-                        onClick={() => {
-                            setOpenSurveyContextUploadDialog(true)
+                </CardTitled>
+                <CardTitled variant='grey' title=<span>Survey Context <HelpTooltip label="Context is used to provide information about the participant to the survey. It can be used to set condition based on response on another survey or other information of the participant"/></span> headerTag='h5' className='mt-1'>
+                    <p className='ps-4'>Participant Flags  <HelpTooltip label="Flags are variables associated to a participant, representing all the information known by the system about a participant. They are updated by the StudyRules"/></p>
+                    <FlagsEditor
+                        availableFlags={props.participantFlags}
+                        surveyContext={props.currentSurveyContext}
+                        onChange={props.onSurveyContextChanged}
+                    />
+                    <p>Edit the JSON directly:</p>
+                    <Editor
+                        height="150px"
+                        defaultLanguage="json"
+                        value={JSON.stringify(props.currentSurveyContext, undefined, 4)}
+                        className={clsx(
+                            { 'border border-danger': hasSurveyContextEditorErrors }
+                        )}
+                        onValidate={(markers) => {
+                            if (markers.length > 0) {
+                                setHasSurveyContextEditorErrors(true)
+                            } else {
+                                setHasSurveyContextEditorErrors(false)
+                            }
                         }}
-                    >Upload survey context</button>
-                </div>
+                        onChange={(value) => {
+                            if (!value) { return }
+                            let context: SurveyContext;
+                            try {
+                                context = JSON.parse(value);
+                            } catch (e: any) {
+                                console.error(e);
+                                return
+                            }
+                            if (!context) { return }
+                            props.onSurveyContextChanged({
+                                ...context
+                            })
 
+                        }}
+                    />
+                    {hasSurveyContextEditorErrors ?
+                        <p className="text-danger p-0">
+                            Check the editor for errors
+                        </p>
+                        : null}
+                    <div>
+                        <button
+                            type="button"
+                            disabled={hasSurveyContextEditorErrors}
+                            className="btn btn-link p-0 text-decoration-none text-start text-uppercase me-3 mt-2"
+                            onClick={() => {
+                                props.onSurveyContextChanged({
+                                    ...defaultSurveyContext
+                                })
+                            }}
+                        >
+                            Clear
+                        </button>
+                        <button
+                            className="btn btn-link p-0 text-decoration-none text-start text-uppercase me-2 mt-2"
+                            onClick={() => {
+                                setOpenSurveyContextUploadDialog(true)
+                            }}
+                        >Upload survey context</button>
+                    </div>
+                </CardTitled>
 
-            </Card>
+            </CardTitled>
 
-            <Card
-                className="my-2"
-                title="UI Customizations">
-                <Checkbox
-                    id="show-keys-checkbox"
-                    name="show-keys-checkbox"
-                    className="mb-3"
-                    checked={props.currentSimulatorUIConfig.showKeys}
-                    onChange={(value) => {
-                        props.onSimulatorUIConfigChanged({
-                            ...props.currentSimulatorUIConfig,
-                            showKeys: value
-                        })
-                    }}
-                    label="Show keys"
-                />
+            <CardTitled className="my-2" title="UI Customizations">
                 <h6 className="fw-bold">Survey UI Labels:</h6>
                 <Editor
                     height="150px"
@@ -278,12 +306,103 @@ const SimulationSetup: React.FC<SimulationSetupProps> = (props) => {
                     >Upload config</button>
                 </div>
 
-            </Card>
-            {navButtons}
+            </CardTitled>
             {surveyContextUploader}
             {surveyUIConfigUploader}
         </div>
     );
 };
 
+
+interface FlagsEditorProps {
+    availableFlags: ParticipantFlags
+    surveyContext: SurveyContext
+    onChange: (ctx: SurveyContext) => void;
+}
+
+export const FlagsEditor: React.FC<FlagsEditorProps> = (props) => {
+
+    const [newFlag, setNewFlag] = useState<string>('');
+
+
+    const knownFlags = new Map(Object.entries(props.availableFlags));
+    const curCtx = props.surveyContext.participantFlags ?? {};
+
+    const flagUpdated = (name: string, value: string) => {
+        if (name === '') {
+            return;
+        }
+        const ctx = { ...props.surveyContext };
+        ctx.participantFlags[name] = value;
+        props.onChange(ctx);
+    }
+
+    const removeFlag = (name: string) => {
+        if (name === '') {
+            return;
+        }
+        const ctx = { ...props.surveyContext };
+        delete ctx.participantFlags[name];
+        props.onChange(ctx);
+    }
+
+    const addCustomFlag = () => {
+        flagUpdated(newFlag, '');
+    }
+
+    const FlagLabel = (key: string, def?: ParticipantFlag) => {
+        return <strong>
+            {key}
+            {def ? <HelpTooltip label={def.label} /> : ''}
+        </strong>
+    }
+
+    const showFlag = (key: string) => {
+
+        const def = knownFlags.get(key);
+
+        const value = props.surveyContext.participantFlags[key] ?? '';
+        return <div key={key} className='my-1 row'>
+            <div className='col-3 text-end'>{FlagLabel(key, def)}</div>
+            <div className='col-2'>
+                <input value={value} onChange={ev => flagUpdated(key, ev.target.value)} className='form-control' />
+            </div>
+            <div className='col'>
+                {def ?
+                    (<span className='ms-1'>
+                        Acceptable values :
+                        <select className='mx-1' onChange={ev => flagUpdated(key, ev.target.value)}>
+                            <option value="" selected={value === ""}>-Empty-</option>
+                            {def.values.map(v => <option value={v.value} key={v.value} selected={v.value === value}>{v.label} ({v.value})</option>)}
+                        </select>
+                    </span>)
+                    : ''}
+                <Button onClick={() => removeFlag(key)} variant='danger' size='sm' className='ms-1'>Remove</Button>
+            </div>
+        </div>
+
+    }
+
+    const usedKeys = Array.from(Object.keys(curCtx));
+    // List of missing flags in context, to be added
+    const missing = Array.from(knownFlags.keys()).filter(k => !usedKeys.includes(k));
+
+    return <div className='my-1 p-1 ps-4'>
+        {usedKeys.map(showFlag)}
+        {missing.length > 0 ? (
+            <div className='my-1'>
+                <span>Add a known flag <HelpTooltip label="Flag known by the platform" /> :</span>
+                <select onChange={(ev) => { flagUpdated(ev.target.value, '') }}>
+                    <option value="">-- Select a new flag to add --</option>
+                    {missing.map(n => <option key={n} value={n}>{n} - {knownFlags.get(n)?.label}</option>)}
+                </select>
+            </div>
+        ) : ''}
+        Add custom flag
+        <input type="text" style={{ "width": "20em" }} className="ms-1" onChange={(ev) => setNewFlag(ev.target.value)} />
+        <Button variant='info' size='sm' className="ms-1" onClick={addCustomFlag}>Add</Button>
+    </div>
+}
+
 export default SimulationSetup;
+
diff --git a/src/components/SurveyInfo.tsx b/src/components/SurveyInfo.tsx
new file mode 100644
index 0000000..7ba44d6
--- /dev/null
+++ b/src/components/SurveyInfo.tsx
@@ -0,0 +1,48 @@
+import { SurveyCard,  } from 'case-web-ui';
+import React, { useState } from 'react';
+import { Card, CardBody} from 'react-bootstrap';
+import { Survey, LocalizedString } from 'survey-engine/data_types';
+
+interface SurveyInfoProps {
+    survey: Survey;
+    languageCode?: string;
+}
+
+const SurveyInfo: React.FC<SurveyInfoProps> = (props) => {
+    const [showDetails, setShowDetails] = useState<boolean>(false);
+    const surveyDefinition = props.survey.surveyDefinition;
+    const surveyProps = props.survey.props;
+    const surveyCard = surveyProps ? <SurveyCard
+                        details={{
+                            surveyInfos: {
+                                name: surveyProps.name as LocalizedString[],
+                                description: surveyProps.description as LocalizedString[],
+                                typicalDuration: surveyProps.typicalDuration as LocalizedString[],
+                                studyKey: '',
+                                surveyKey: surveyDefinition.key,
+                            },
+                            studyKey: '',
+                            surveyKey: surveyDefinition.key,
+                            profiles: [],
+                            category: 'normal'
+                        }}
+                        selectedLanguage={props.languageCode}
+                        avatars={[]}
+                    /> : '';
+
+    return (
+            <Card className='mb-1'>
+            <CardBody className='py-1'>
+                <small className='float-end'><a href="#" onClick={()=>setShowDetails(!showDetails)}>Toggle info</a></small>
+                <h3 className="text-center">Survey <strong>{surveyDefinition.key}</strong></h3>
+                {showDetails ? (
+                    <div>
+                        {surveyCard}
+                    </div>
+                ) : ''}
+            </CardBody>
+        </Card>
+    );
+};
+
+export default SurveyInfo;
\ No newline at end of file
diff --git a/src/components/SurveyInspector/ExpressionEvaluator.tsx b/src/components/SurveyInspector/ExpressionEvaluator.tsx
new file mode 100644
index 0000000..3473d36
--- /dev/null
+++ b/src/components/SurveyInspector/ExpressionEvaluator.tsx
@@ -0,0 +1,213 @@
+import React, { ReactNode, useState } from 'react';
+import {  ListGroup, Tabs, Tab, } from 'react-bootstrap';
+import { Expression, ExpressionArg, isExpression, isItemGroupComponent, isSurveyGroupItem, ItemComponent, SurveyGroupItem, SurveyItem, SurveySingleItemResponse } from 'survey-engine/data_types';
+import clsx from 'clsx';
+
+import { SurveyEngineCore } from 'survey-engine/engine';
+
+/**
+ * Reference to an expression in a survey
+ */
+interface ExpressionRef {
+    exp: Expression; // The expression to inspect
+    field: string; // Field in the survey item
+    key: string; // itemKey where the expression lives
+    value?: any; // Resolved value with the last state
+    changed?: boolean; // Does this value change after the last survey state transition ?
+    show: boolean;
+}
+
+/**
+ * Expression Registry collect all known expression in a survey
+ */
+class ExpressionRegistry {
+    
+    exps : Map<string, ExpressionRef[]>; // All known expressions
+
+    fields: Set<string>;
+
+    constructor() {
+        this.exps = new Map();
+        this.fields = new Set();
+    }
+
+    build(survey: SurveyGroupItem) {
+        this.handleItem(survey);
+    }
+
+    add(itemKey:string, key: string, field: string, exp?: Expression) {
+        if(!exp) {
+            return;
+        } 
+
+        const ref = {
+            key: key,
+            field: field,
+            exp: exp,
+            show: true
+        };
+
+        if(!this.exps.has(itemKey)) {
+           const rr : ExpressionRef[] = [ ref ];
+           this.exps.set(itemKey, rr);
+        } else {
+            const rr = this.exps.get(itemKey);
+            rr?.push(ref);
+        }
+        if(field) {
+            this.fields.add(field);
+        }
+    }
+
+    handleComponent(itemKey:string, comp: ItemComponent, index: number) {
+        const key = (comp.key ?? comp.role + '#'+ index);
+        if(comp.disabled && isExpression(comp.disabled)) {
+            this.add(itemKey, key, 'disabled', comp.disabled);
+        }
+        if(comp.displayCondition && isExpression(comp.displayCondition)) {
+            this.add(itemKey, key, 'displayCondition', comp.displayCondition);
+        }
+        if(comp.properties) {
+            const handleProp = (prop: ExpressionArg|number|string|undefined, name: string) => {
+                if(prop && typeof(prop) == "object" && "dtype" in prop && prop.dtype === "exp" ) {
+                    this.add(itemKey, key, 'properties.'+name, (prop as ExpressionArg).exp);
+                }
+            }
+            handleProp(comp.properties.min, 'min');
+            handleProp(comp.properties.max, 'max');
+            handleProp(comp.properties.dateInputMode, 'dateInputMode');
+            handleProp(comp.properties.stepSize, 'stepSize');
+        }
+        if(comp)
+        if(isItemGroupComponent(comp)) {
+            comp.items.forEach( (c, i) => this.handleComponent(itemKey, c, i));
+        }
+    }
+
+    handleItem(item: SurveyItem) {
+        if(!item) {
+            return;
+        }
+        if(item.condition) {
+            this.add(item.key, '', 'condition', item.condition);
+        }
+        if(isSurveyGroupItem(item)) {
+            item.items.forEach(i => this.handleItem(i));
+        } else {
+            if(item.components) {
+                this.handleComponent(item.key, item.components, 0);
+            }
+            if(item.validations) {
+                item.validations.forEach((v) => {
+                    if(isExpression(v.rule)) {
+                        this.add(item.key, v.key,  'validations' , v.rule );
+                    }  
+                });
+            }
+        }
+    }
+}  
+
+export class EngineState {
+    engine?: SurveyEngineCore;
+    surveyDefinition?: SurveyGroupItem
+    registry: ExpressionRegistry
+    responses?: SurveySingleItemResponse[]
+
+    constructor(surveyDefinition?: SurveyGroupItem) {
+        this.engine = undefined;
+        this.registry = new ExpressionRegistry();
+        this.responses = undefined;
+        this.surveyDefinition = surveyDefinition;
+        if(surveyDefinition) {
+            this.registry.build(surveyDefinition);
+        }
+    }
+
+    setEngine(engine: SurveyEngineCore) {
+        this.engine = engine;
+    }
+
+    setResponses(responses : SurveySingleItemResponse[]) {
+        this.responses = responses;
+    }
+
+    update() {
+        this.registry.exps.forEach((refs)=> {
+            refs.forEach(ref => {
+                const oldValue = ref.value;
+                ref.value = this.engine?.resolveExpression(ref.exp);
+                ref.changed = oldValue !== ref.value;
+            });
+        });
+    }
+}
+
+interface ExpressionListProps {
+    engineState: EngineState
+    update: number;
+    onSelect: (exp:Expression)=>void;
+}
+
+export const ExpressionList: React.FC<ExpressionListProps> = (props) => {
+
+    const list = props.engineState.registry.exps;
+
+    const [search, setSearch] = useState<string|undefined>(undefined);
+   
+    const [refresh, setRefresh] = useState(false);
+
+    const toFunc = (e: Expression):string => {
+        var p : string[];
+
+        if(e.data) {
+           p = e.data.map(arg => {
+            if(arg.dtype) {
+               if(arg.dtype === "exp" && arg.exp) {
+                    return toFunc(arg.exp);
+               }
+               if(arg.dtype === "num") {
+                    return '' + arg.num;
+               }
+            }
+            return '"' + arg.str + '"';
+           });
+        } else {
+            p = [];
+        }
+        return e.name + '(' + p.join(',') + ')';
+    }
+
+    const ExpItem = (itemKey: string, ref: ExpressionRef, index: number) => {
+        return <ListGroup.Item key={itemKey + '=' + index} className={clsx({'bg-warning': ref.changed})}>
+            <span>
+                <small className='me-1'>{itemKey}{ref.key ? ' [' + ref.key + ']' : ''}</small> 
+                <b>{ref.field}</b> 
+            </span>
+            <p><code>{ toFunc(ref.exp) }</code></p>
+            <p>{ JSON.stringify(ref.value) }</p>
+        </ListGroup.Item>
+    };
+
+    const buildList = (refresh: boolean) => {
+        const r : ReactNode[] = [];
+        list.forEach( (refs, key) => {
+            if(search) {
+                if(!key.includes(search) ){
+                    return;
+                }
+            }
+            r.push( ...refs.map( (ref, index) => ExpItem(key, ref, index)) );
+        });
+        return r;
+    }
+
+    return <React.Fragment>
+        <div className='my-1'>
+            <input type="text" placeholder='item key search' onKeyDown={(e)=>{ if(e.key === "Enter") setSearch(e.currentTarget.value) }}/>
+        </div>
+        <ListGroup>
+            { buildList(refresh) }
+        </ListGroup>
+    </React.Fragment>
+}
\ No newline at end of file
diff --git a/src/components/SurveyInspector/ResponseList.tsx b/src/components/SurveyInspector/ResponseList.tsx
new file mode 100644
index 0000000..d884c96
--- /dev/null
+++ b/src/components/SurveyInspector/ResponseList.tsx
@@ -0,0 +1,55 @@
+import React, {  useState } from 'react';
+import {  ListGroup, ListGroupItem } from 'react-bootstrap';
+import { SurveySingleItemResponse } from 'survey-engine/data_types';
+
+
+interface ResponsesListProps {
+    responses?: SurveySingleItemResponse[]
+    meta?: boolean;
+    json?: boolean;
+}
+
+export const ResponsesList: React.FC<ResponsesListProps> = (props) => {
+
+    const [search, setSearch] = useState<string|undefined>(undefined);
+    const [json, setJSON] = useState<boolean>(false);
+
+    const jsonify = (data: any)=>{
+        return <pre className='w-100'> { JSON.stringify(data, undefined, 2) } </pre>
+    }
+
+    const showResponse = (response : SurveySingleItemResponse, index:number) => {
+       return <ListGroupItem key={index}>
+        <h6>{response.key}</h6>
+        Response
+        { jsonify(response.response) }
+        { props.meta ? jsonify(response.meta) : ''}
+        </ListGroupItem>
+    }
+
+    const selectResponses = (responses: SurveySingleItemResponse[]) => {
+        if(!search) {
+            return responses;
+        }
+        return responses.filter(r => {
+           return r.key.includes(search);
+        });
+    }
+
+    const responses = props.responses ? selectResponses(props.responses) : [];
+
+    return <React.Fragment>
+        <div className='mb-1'>
+            <label className='me-1' title="Show as json">
+            <input type="checkbox" defaultChecked={json} onClick={() => setJSON(!json) }/> {"{}"}</label>
+            <input type="text" placeholder="item key search" onKeyDown={(e)=>{ if(e.key === "Enter") setSearch(e.currentTarget.value) }}/>
+        </div>
+        {
+            json ?
+            jsonify(responses) :
+            <ListGroup> { responses.map(showResponse) }</ListGroup>
+        }
+    </React.Fragment>
+}
+
+
diff --git a/src/components/SurveyInspector/SurveyInspector.tsx b/src/components/SurveyInspector/SurveyInspector.tsx
new file mode 100644
index 0000000..13b6b55
--- /dev/null
+++ b/src/components/SurveyInspector/SurveyInspector.tsx
@@ -0,0 +1,80 @@
+import React, {  useState } from 'react';
+import { Button,  Tabs, Tab } from 'react-bootstrap';
+import { Expression, } from 'survey-engine/data_types';
+import Editor from '@monaco-editor/react';
+import clsx from 'clsx';
+
+import { EngineState, ExpressionList } from "./ExpressionEvaluator";
+import { ResponsesList } from "./ResponseList";
+
+interface SurveyInspectorProps {
+    engineState: EngineState
+    update: number;
+} 
+
+
+export const SurveyInspector: React.FC<SurveyInspectorProps> = (props) => {
+
+    const [hasEditorErrors, setHasEditorErrors] = useState(false);
+    const [expression, setExpression] = useState<Expression|undefined>(undefined);
+    const [inputExp, setInputExpression] = useState<Expression>({name:"getContext"});
+    const [result, setResult] = useState<any>(undefined);
+    
+    const evaluateExpression = () => {
+       if(props.engineState.engine) {
+         setResult(props.engineState.engine.resolveExpression(expression));
+       }
+    };
+
+    const handleExpSelected = (exp: Expression) => {
+        setInputExpression(exp);
+    }
+
+    return <Tabs defaultActiveKey="list" id="expression-evaluator" className="mb-1">
+            <Tab eventKey="response" title="Responses">
+                <ResponsesList responses={props.engineState.responses}/>
+            </Tab>
+            <Tab eventKey="list" title="Expressions">
+                <ExpressionList engineState={props.engineState} onSelect={handleExpSelected} update={props.update}/>
+            </Tab>
+            <Tab eventKey="custom" title="Custom">
+                <Editor   
+                        height="250px"
+                        defaultLanguage="json"
+                        value={JSON.stringify(inputExp)}
+                        className={clsx(
+                            { 'border border-danger': hasEditorErrors }
+                        )}
+                        onValidate={(markers) => {
+                            if (markers.length > 0) {
+                                setHasEditorErrors(true)
+                            } else {
+                                setHasEditorErrors(false)
+                            }
+                        }}
+                        onChange={(value) => {
+                            if (!value) { return }
+                            let config: Expression;
+                            try {
+                                config = JSON.parse(value);
+                            } catch (e: any) {
+                                console.error(e);
+                                return
+                            }
+                            if (!config) { return }
+                            setExpression(config);
+                        }}
+                    />
+                <Button onClick={evaluateExpression} disabled={hasEditorErrors}>Evaluate</Button>
+                <div>
+                    <h5>Result</h5>
+                    <Editor
+                        height="150px"
+                        options={{readOnly: true}}
+                        defaultLanguage="json"
+                        value={result ? JSON.stringify(result) : ''}
+                    />
+                </div>
+            </Tab>
+        </Tabs>;
+}
diff --git a/src/components/SurveyInspector/index.ts b/src/components/SurveyInspector/index.ts
new file mode 100644
index 0000000..fe77733
--- /dev/null
+++ b/src/components/SurveyInspector/index.ts
@@ -0,0 +1,2 @@
+export { EngineState } from "./ExpressionEvaluator";
+export { SurveyInspector } from "./SurveyInspector";
\ No newline at end of file
diff --git a/src/components/SurveyLoader.tsx b/src/components/SurveyLoader.tsx
index 0a2f73f..325d56e 100644
--- a/src/components/SurveyLoader.tsx
+++ b/src/components/SurveyLoader.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DialogBtn, FileDropzone } from 'case-web-ui';
 import { Survey } from 'survey-engine/data_types';
-import Card from './Card';
+import CardTitled from './Card';
 import { acceptJSON } from './constants';
 
 interface SurveyLoaderProps {
@@ -10,7 +10,7 @@ interface SurveyLoaderProps {
 
 const SurveyLoader: React.FC<SurveyLoaderProps> = (props) => {
     const texts = {
-        title: 'Load Survey',
+        title: 'Load Survey from a json file',
         btn: {
             open: 'Open',
             useUrl: 'use url'
@@ -38,7 +38,7 @@ const SurveyLoader: React.FC<SurveyLoaderProps> = (props) => {
     }
 
     return (
-        <Card title={texts.title}>
+        <CardTitled title={texts.title}>
             <FileDropzone
                 placeholderText="Drag and drop a file here or click this box"
                 accept={acceptJSON}
@@ -70,7 +70,7 @@ const SurveyLoader: React.FC<SurveyLoaderProps> = (props) => {
                 >{texts.btn.useUrl}
                 </button>
             </div>
-        </Card>
+        </CardTitled>
     );
 };
 
diff --git a/src/components/SurveyMenu.tsx b/src/components/SurveyMenu.tsx
index b421a5d..1f9c905 100644
--- a/src/components/SurveyMenu.tsx
+++ b/src/components/SurveyMenu.tsx
@@ -1,76 +1,104 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { SurveyCard } from 'case-web-ui';
 import { LocalizedString, Survey } from 'survey-engine/data_types';
+import { Tabs, Tab, Container, Button } from 'react-bootstrap';
+import { SurveyContext, SurveySingleItemResponse } from 'survey-engine/data_types';
+import SimulationSetup, { defaultSimulatorUIConfig, defaultSurveyContext } from './SimulationSetup';
+import SurveySimulator, { SimulatorUIConfig } from './SurveySimulator';
+import { CustomSurveyResponseComponent } from 'case-web-ui';
+import { ParticipantFlags, PrefillsRegistry, SurveyAndContext } from '../types';
+import { format } from 'date-fns';
 
 interface SurveyMenuProps {
     survey: Survey;
-    selectedLangue: string;
-    onOpenSimulator: () => void;
+    defaultSurveyLanguages: string[];
+    customResponseComponents?: CustomSurveyResponseComponent[]
+    participantFlags: ParticipantFlags
     onExit: () => void;
 }
 
 const SurveyMenu: React.FC<SurveyMenuProps> = (props) => {
 
-    const surveyDefinition = props.survey.surveyDefinition;
+    const [surveyContext, setSurveyContext] = useState<SurveyContext>(defaultSurveyContext);
+    const [prefillValues, setPrefillValues] = useState<SurveySingleItemResponse[]>([]);
+    const [simulatorUIConfig, setSimulatorUIConfig] = useState<SimulatorUIConfig>(defaultSimulatorUIConfig);
+    const [surveyAndContext, setSurveyAndContext] = useState<SurveyAndContext>({
+        survey: props.survey,
+        context: surveyContext
+    });
+
+    // Show survey is used in the reset process. When ShowSurvey is set to false, a timer will 
+    const [showSurvey, setShowSurvey] = useState<boolean>(true);
+
+    const [prefillRegistry, SetPrefillRegistry] = useState<PrefillsRegistry>({current: undefined, prefills:[]});
 
-    return (
-        <div className="container mt-3">
-            <div className="row">
-                <div className="col-sm-4 mb-3">
-                    <h2>Actions</h2>
-                    <div>
-                        <button disabled className="btn btn-primary w-100 mb-2">
-                            Overview
-                        </button>
-                    </div>
-                    <div>
-                        <button className="btn btn-primary w-100 mb-2"
-                            onClick={() => props.onOpenSimulator()}
-                        >
-                            Simulator
-                        </button>
-                    </div>
-                    <div>
-                        <button className="btn btn-warning w-100"
-                            onClick={() => {
-                                if (window.confirm('Are you sure you want to close this survey?')) {
-                                    props.onExit()
-                                }
-                            }}
-                        >
-                            Exit
-                        </button>
-                    </div>
-                </div>
-                <div className="col-sm-8 mb-3">
-                    <h2>Infos</h2>
-                    <h3>Survey Card</h3>
-                    {
-                        props.survey.props ? <SurveyCard
-                            details={{
-                                surveyInfos: {
-                                    name: props.survey.props.name as LocalizedString[],
-                                    description: props.survey.props.description as LocalizedString[],
-                                    typicalDuration: props.survey.props.typicalDuration as LocalizedString[],
-                                    studyKey: '',
-                                    surveyKey: surveyDefinition.key,
-                                },
-                                studyKey: '',
-                                surveyKey: surveyDefinition.key,
-                                profiles: [],
-                                category: 'normal'
-                            }}
-                            selectedLanguage={props.selectedLangue}
-                            avatars={[]}
-                        /> : null
-                    }
+    useEffect(() => {
+        if(showSurvey) {
+            return;
+        }
+        const timer = setTimeout(() => setShowSurvey(true), 500);
+        return () => clearTimeout(timer);
+      }, [showSurvey]);
 
-                </div>
 
-            </div>
+    const updateRegistry = (registry: PrefillsRegistry) => {
+        SetPrefillRegistry(registry);
+        if(typeof(registry.current) != "undefined") {
+            const e = registry.prefills[registry.current];
+            setPrefillValues(e.data);
+        } else {
+            setPrefillValues([]);
+        }
+        setShowSurvey(false);
+    }
+
+    const handleSaveAsPrefill = (data: SurveySingleItemResponse[]) => {
+        const name = 'response_'+ format(Date.now(), 'yyyy-MM-dd hh:mm:ss');
+        const n = prefillRegistry.prefills.push({name: name, data: data});
+        prefillRegistry.current = n - 1;
+        updateRegistry({'current': n-1, prefills: prefillRegistry.prefills });
+    }
+    
+    const handleReset = () => {
+        console.log('reset');
+        setSurveyAndContext({survey: props.survey, context: surveyContext});
+        setShowSurvey(false);
+    };
+
+    const surveyDefinition = props.survey.surveyDefinition;
 
-        </div>
-    );
+    return <Container className='mt-1 mx-1' fluid={true}>
+        <Tabs defaultActiveKey="simulator" id="survey-menu" className="mb-1">
+            <Tab eventKey="simulator" title="Simulator">
+                {showSurvey ?
+                <SurveySimulator
+                    config={simulatorUIConfig}
+                    surveyAndContext={surveyAndContext}
+                    prefills={prefillValues}
+                    defaultSurveyLanguages={props.defaultSurveyLanguages}
+                    onExit={() => props.onExit()}
+                    onReset={handleReset}
+                    customResponseComponents={props.customResponseComponents}
+                    onSaveAsPrefill={handleSaveAsPrefill}
+                />:
+                    <Button variant='info'  onClick={()=>setShowSurvey(true)}>Restart the survey</Button>
+                }
+            </Tab>
+            <Tab eventKey="simulator-setup" title="Simulator Setup">
+                <SimulationSetup
+                    participantFlags={props.participantFlags}
+                    prefillRegistry={prefillRegistry}
+                    onPrefillChanged={(r: PrefillsRegistry) => {
+                        updateRegistry(r);
+                    }}
+                    currentSurveyContext={surveyContext}
+                    onSurveyContextChanged={(config) => setSurveyContext(config)}
+                    currentSimulatorUIConfig={simulatorUIConfig}
+                    onSimulatorUIConfigChanged={(config) => setSimulatorUIConfig(config)}
+                />
+            </Tab>
+        </Tabs>
+    </Container>;
 };
 
 export default SurveyMenu;
diff --git a/src/components/SurveyServiceLoader.tsx b/src/components/SurveyServiceLoader.tsx
index cf9b7de..1eabf16 100644
--- a/src/components/SurveyServiceLoader.tsx
+++ b/src/components/SurveyServiceLoader.tsx
@@ -1,9 +1,9 @@
 import { Survey } from 'survey-engine/data_types';
-import { Badge, ListGroup } from 'react-bootstrap';
+import { Badge, ListGroup, Accordion } from 'react-bootstrap';
 import useLoadJSON from '../hooks/useLoadJSON';
 import { useEffect, useState } from 'react';
-import Card from './Card';
-import { format, parseISO } from 'date-fns';
+import CardTitled from './Card';
+import { parseISO } from 'date-fns';
 
 interface localisedString {
     [key:string]: string;
@@ -80,11 +80,22 @@ const SurveyList: React.FC<SurveyListProps> = (props) => {
 
     const [lang, setLang] = useState(new Set<string>(languages));
 
+    const surveyByStudy : Map<string, SurveyDescription[]> = new Map();
+
     props.surveys.forEach(s => {
         const codes = Object.keys(s.description);
         codes.forEach(k => languages.add(k));
+
+        const study = s.study;
+        if (!surveyByStudy.has(study)) {
+            surveyByStudy.set(study, []);
+        }
+        const list = surveyByStudy.get(study);
+        list?.push(s);
     });
 
+    console.log(surveyByStudy);
+
     const changeLanguage = (newLang: Set<string>)=> {
         setLang(newLang);
     }
@@ -113,12 +124,22 @@ const SurveyList: React.FC<SurveyListProps> = (props) => {
         )
     }
 
+    const surveyList = (study: string, surveys: SurveyDescription[])=> {
+        return <Accordion.Item title={study} eventKey={study} key={study}>
+            <Accordion.Header><b>{study}</b></Accordion.Header>
+            <Accordion.Body>
+            <ListGroup className="py-1a">    
+            { surveys.map( (survey)=> { return surveySelector(survey)}) }
+            </ListGroup>
+            </Accordion.Body>
+        </Accordion.Item>;
+    }
     return (
         <div>
         <LangSelector languages={languages} onChange={changeLanguage} label={props.texts.languages}/>
-        <ListGroup className="py-1a">
-            { props.surveys.map( (survey)=> { return surveySelector(survey)}) }
-        </ListGroup>
+        <Accordion>
+        {Array.from(surveyByStudy.entries()).map(entry => surveyList(entry[0], entry[1]))} 
+        </Accordion>  
         </div>
     );
 };
@@ -156,9 +177,9 @@ const SurveyServiceLoader: React.FC<SurveyLoaderProps> = (props) => {
     }
    
     return (
-        <Card title={texts.title} className="my-1">
+        <CardTitled title={texts.title} className="my-1">
             <SurveyList onSelectItem={loadSurveyJSON} surveys={content} texts={texts}></SurveyList> 
-        </Card>
+        </CardTitled>
     );
 };
 
diff --git a/src/components/SurveySimulator.tsx b/src/components/SurveySimulator.tsx
index a7d0c38..3152405 100644
--- a/src/components/SurveySimulator.tsx
+++ b/src/components/SurveySimulator.tsx
@@ -1,10 +1,14 @@
 import { AlertBox, SurveyView, Dialog, DialogBtn } from 'case-web-ui';
-import React, { useState } from 'react';
-import { Dropdown, DropdownButton } from 'react-bootstrap';
+import React, {  useState } from 'react';
+import { Button, Card, CardBody } from 'react-bootstrap';
 import { Survey, SurveyContext, SurveySingleItemResponse } from 'survey-engine/data_types';
-
 import { nl, nlBE, fr, de, it, da, es, pt } from 'date-fns/locale';
-import { CustomSurveyResponseComponent } from 'case-web-ui/build/components/survey/SurveySingleItemView/ResponseComponent/ResponseComponent';
+import { SurveyEngineCore } from 'survey-engine/engine';
+import { EngineState, SurveyInspector } from './SurveyInspector';
+import { CustomSurveyResponseComponent } from 'case-web-ui';
+import clsx from 'clsx';
+import { SurveyAndContext } from '../types';
+import SurveyInfo from './SurveyInfo';
 
 const dateLocales = [
     { code: 'nl', locale: nl, format: 'dd-MM-yyyy' },
@@ -33,22 +37,65 @@ export interface SimulatorUIConfig {
 
 interface SurveySimulatorProps {
     config: SimulatorUIConfig;
-    surveyAndContext?: {
-        survey: Survey;
-        context: SurveyContext;
-    };
+    surveyAndContext?: SurveyAndContext;
     prefills?: SurveySingleItemResponse[];
-    selectedLanguage?: string;
+    defaultSurveyLanguages: string[];
     customResponseComponents?:CustomSurveyResponseComponent[]
     onExit: () => void;
+    onSaveAsPrefill: (p: SurveySingleItemResponse[])=>void;
+    onReset: () => void;
 }
 
+
 const SurveySimulator: React.FC<SurveySimulatorProps> = (props) => {
+
+    const surveyDefinition = props.surveyAndContext ? props.surveyAndContext.survey.surveyDefinition : undefined;
+
+    const languageCodes: string[] = []; // Available language codes in the survey
+
+    if(props.surveyAndContext?.survey) {
+        props.surveyAndContext.survey.props?.name?.map(o => languageCodes.push(o.code));
+    }
+
     const [openSurveyEndDialog, setOpenSurveyEndDialog] = useState(false);
     const [surveyResponseData, setSurveyResponseData] = useState<SurveySingleItemResponse[]>([]);
 
+    const [engineState, setEngineState ] = useState<EngineState>(new EngineState(surveyDefinition));
+    const [evaluatorCounter, setEvaluatorCounter ] = useState<number>(0); // Ok to show the evaluator (after engineReady is true)
+    const [showEvaluator, setShowEvaluator] = useState<boolean>(false);
+
+    const [showKeys, setShowKeys ] = useState<boolean>(props.config.showKeys);
+
+    const [languageCode, setLanguageCode] = useState<string>(()=> {
+        let defaultLanguage = 'en'; // fallback
+        if(languageCodes) {
+            const def = props.defaultSurveyLanguages.find(lang => languageCodes.includes(lang));
+            if(def) {
+                defaultLanguage = def;
+            }
+        }
+        return defaultLanguage;
+    });
+
+    const onResponseChanged=(responses: SurveySingleItemResponse[], version: string, engine?: SurveyEngineCore) => {
+        console.log(responses, engineState.engine, engine);
+        if(engine) {
+            engineState.setEngine(engine);
+            engineState.setResponses(responses);
+            engineState.update();
+            setEvaluatorCounter(evaluatorCounter + 1);
+        } else {
+            console.warn("Engine instance is not passed to callback, not able to use evaluator");
+        }
+    }
+       
+    const toggleEvaluator = () => {
+        setShowEvaluator(!showEvaluator)
+    }
+
     const surveySubmitDialog = <Dialog
         title="Survey Finished"
+        size='lg'
         onClose={() => {
             setSurveyResponseData([]);
             setOpenSurveyEndDialog(false);
@@ -69,6 +116,18 @@ const SurveySimulator: React.FC<SurveySimulatorProps> = (props) => {
                 label="Exit without Save"
                 outlined={true}
             />
+            <DialogBtn
+                className="me-2"
+                onClick={() => {
+                    const response = surveyResponseData;
+                    setSurveyResponseData([]);
+                    props.onSaveAsPrefill(response);
+                    props.onReset();
+                    setOpenSurveyEndDialog(false);
+                }}
+                label="Store as prefill for next survey"
+                outlined={true}
+            />
             <DialogBtn
                 onClick={() => {
 
@@ -83,69 +142,73 @@ const SurveySimulator: React.FC<SurveySimulatorProps> = (props) => {
                     setOpenSurveyEndDialog(false)
                     props.onExit()
                 }}
-                label="Save and Exit"
+                label="Save as file and Exit"
             />
         </div>
 
     </Dialog>
 
+    const languageSelector = (code:string, index:number) => {
+        const btn = code == languageCode ? 'btn-primary' : 'btn-info';
+        return <li key={index} className='ml-1 p-1'><span className={clsx("btn btn-sm rounded", btn)} onClick={()=>setLanguageCode(code)}>{code}</span></li>;
+    }
+
+    console.log('prefills', props.prefills);
+
     return (
         <div className="container-fluid">
-            <div className="container pt-3">
-                <div className="row">
-                    <DropdownButton
-                        id={`simulator-menu`}
-                        //size="sm"
-                        variant="secondary"
-                        title="Menu"
-                        onSelect={(eventKey) => {
-                            switch (eventKey) {
-                                case 'save':
-                                    break;
-                                case 'exit':
-                                    if (window.confirm('Do you want to exit the simulator (will lose state)?')) {
-                                        props.onExit();
-                                    }
-                                    break;
-                            }
-                        }}
-                    >
-                        <Dropdown.Item
-                            disabled
-                            eventKey="save">Save Current Survey State</Dropdown.Item>
-                        <Dropdown.Divider />
-                        <Dropdown.Item eventKey="exit">Exit Simulator</Dropdown.Item>
-                    </DropdownButton>
+            <div className='row'>
+            <div className="col p-1">
+                <Button onClick={()=>{ if (window.confirm('Do you want to exit the simulator (will lose state)?')) {
+                                    props.onExit();
+                                }}} variant="warning" className="me-1"> Exit</Button>
+                
+                <Button className="me-1"  onClick={toggleEvaluator}>Show inspector</Button>
+                <Button className="me-1"  onClick={()=>props.onReset()}>Reset survey</Button>
+                <label className='d-inline mx-1'><input type="checkbox" checked={showKeys} onClick={()=>setShowKeys(!showKeys)}/> Show keys</label>
+                <div className='d-inline p-1 border rounded'>
+                Languages : 
+                <ul className="list-inline">
+                    { languageCodes.map(languageSelector) }
+                </ul>                
                 </div>
+            </div>
+            </div>
+            <div className={ clsx(showEvaluator ? "container-fluid" : 'container', " pt-3") }>
                 <div className="row">
-                    <div className="col-12 col-lg-8 offset-lg-2"
-                    //style={{ minHeight: 'calc()' }}
-                    >
-                        {props.surveyAndContext ?
+                    <div className={ clsx( showEvaluator ? "col-7" : "col-10") }>
+                        {props.surveyAndContext ? (
+                            <div>
+                            <SurveyInfo survey={props.surveyAndContext.survey} languageCode={languageCode}/>
                             <SurveyView
                                 loading={false}
-                                showKeys={props.config.showKeys}
+                                showKeys={showKeys}
                                 survey={props.surveyAndContext.survey}
                                 context={props.surveyAndContext.context}
                                 prefills={props.prefills}
-                                languageCode={props.selectedLanguage ? props.selectedLanguage : 'en'}
+                                languageCode={languageCode}
                                 onSubmit={(responses,) => {
                                     setSurveyResponseData(responses.slice())
                                     setOpenSurveyEndDialog(true);
                                 }}
+                                onResponsesChanged={onResponseChanged}
                                 nextBtnText={props.config.texts.nextBtn}
                                 backBtnText={props.config.texts.backBtn}
                                 submitBtnText={props.config.texts.submitBtn}
                                 invalidResponseText={props.config.texts.invalidResponseText}
                                 dateLocales={dateLocales}
                                 customResponseComponents={props.customResponseComponents}
-                            /> :
+                            />
+                            </div>) :
                             <AlertBox type="danger"
                                 useIcon={true}
                                 content={props.config.texts.noSurveyLoaded}
                             />
                         }
                     </div>
+                    <div className={ clsx( showEvaluator ? "col-5" : "d-none" ) }>
+                        { evaluatorCounter ? <SurveyInspector engineState={engineState} update={evaluatorCounter} /> : <p>Select at least a response to show the inspector</p> }
+                    </div>
                 </div>
             </div>
             {surveySubmitDialog}
diff --git a/src/index.scss b/src/index.scss
index cd1a1ce..de3e91c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1 +1,26 @@
 @import "~case-web-ui/build/scss/theme-default.scss";
+
+.nav-tabs {
+    background-color: map-get($theme-colors, "lightest");
+}
+
+.nav-tabs .nav-item {
+    background-color: map-get($theme-colors, "lightest");
+    
+    .nav-link {
+        color: map-get($theme-colors ,'grey-5' );
+        text-decoration: none;
+    }
+
+    .nav-link:hover {
+        color: map-get($theme-colors ,'grey-2' );
+    }
+}
+
+.list-inline {
+    display: inline;
+}
+
+.list-inline li {
+    display: inline-block;
+}
diff --git a/src/localConfig.ts b/src/localConfig.ts
new file mode 100644
index 0000000..d4839e9
--- /dev/null
+++ b/src/localConfig.ts
@@ -0,0 +1,11 @@
+import { CustomSurveyResponseComponent } from 'case-web-ui';
+import { ParticipantFlags } from './types/flags';
+
+export const registerCustomComponents = () : CustomSurveyResponseComponent[] | undefined => {
+    return undefined;
+    // here
+}
+
+export const registerParticipantFlags = () : ParticipantFlags => {
+    return {};
+}
\ No newline at end of file
diff --git a/src/types/flags.ts b/src/types/flags.ts
new file mode 100644
index 0000000..3a64c30
--- /dev/null
+++ b/src/types/flags.ts
@@ -0,0 +1,13 @@
+
+interface FlagValue {
+    value: string; 
+    label: string;
+}
+
+// Describe an available participant flag
+export interface ParticipantFlag {
+    label: string
+    values: FlagValue[]
+} 
+
+export type ParticipantFlags = Record<string, ParticipantFlag>;
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..ae37547
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+export * from './flags';
+export * from './survey';
+export * from './language';
\ No newline at end of file
diff --git a/src/types/language.ts b/src/types/language.ts
new file mode 100644
index 0000000..922cd04
--- /dev/null
+++ b/src/types/language.ts
@@ -0,0 +1,4 @@
+export interface LanguageConfig {
+    availableLanguages : string[]
+    defaultLanguage: string
+}
\ No newline at end of file
diff --git a/src/types/survey.ts b/src/types/survey.ts
new file mode 100644
index 0000000..5fcfdfd
--- /dev/null
+++ b/src/types/survey.ts
@@ -0,0 +1,17 @@
+
+import { Survey, SurveyContext, SurveySingleItemResponse } from 'survey-engine/data_types';
+
+export interface SurveyAndContext {
+    survey: Survey;
+    context: SurveyContext;
+}
+
+export interface PrefillEntry {
+    name: string;
+    data: SurveySingleItemResponse[]
+}
+
+export interface PrefillsRegistry {
+    current?: number;
+    prefills: PrefillEntry[]
+}
diff --git a/yarn.lock b/yarn.lock
index 16dfc7a..389f804 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3364,10 +3364,10 @@ case-sensitive-paths-webpack-plugin@2.3.0:
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
   integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
 
-case-web-ui@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/case-web-ui/-/case-web-ui-1.14.0.tgz#5cf3305868f194c74bd9a815b1ec8cbe1109097b"
-  integrity sha512-Qbn52iGOdco4DFbcHplrqGYr7t3T1VkTkb68ykWlZ/p9LU5R82rmcYgffcbiSPwE9SriJhwv06Ynhbxli101vQ==
+case-web-ui@^1.14.3:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/case-web-ui/-/case-web-ui-1.14.3.tgz#43b921daf19fac19fa36bf3800ae72b8e9bf4a5f"
+  integrity sha512-UQY5mS8jz94fuVeBiXKOc8u/uJIQ6sDAG++VvnbIxFlEty4I0UneTHEnDPSovQMTQjcVRg3vqmFQbGoau5ZMkA==
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.4"