diff --git a/jam-ui/src/components/page/JKNewMusicSession.js b/jam-ui/src/components/page/JKNewMusicSession.js
new file mode 100644
index 000000000..7b611d12e
--- /dev/null
+++ b/jam-ui/src/components/page/JKNewMusicSession.js
@@ -0,0 +1,161 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Form, FormGroup, Input, Label, Card, CardBody, Button, Row, Col } from 'reactstrap';
+import FalconCardHeader from '../common/FalconCardHeader';
+import JKTooltip from '../common/JKTooltip';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '../../context/UserAuth';
+import JKFriendsAutoComplete from '../people/JKFriendsAutoComplete';
+import JKSessionInviteesChips from '../people/JKSessionInviteesChips';
+import { getFriends } from '../../helpers/rest';
+
+const JKNewMusicSession = () => {
+  const { currentUser } = useAuth();
+  const { t } = useTranslation();
+  const [friends, setFriends] = useState([]);
+  const [isFriendsFetched, setIsFriendsFetched] = useState(false)
+  const [description, setDescription] = useState("")
+  const [invitees, setInvitees] = useState([]);
+  const [privacy, setPrivacy] = useState("1");
+
+  useEffect(() => {
+    fetchFriends();
+  }, []);
+
+  useEffect(() => {
+    if(isFriendsFetched){
+      populateFormDataFromLocalStorage()
+    }
+  }, [isFriendsFetched])
+
+  const fetchFriends = () => {
+    getFriends(currentUser.id)
+    .then(resp => {
+      if (resp.ok) {
+        return resp.json();
+      }
+    })
+    .then(data => {
+      console.log('friends = ', data)
+      setFriends(data);
+      setIsFriendsFetched(true);
+    });
+  }
+
+  const populateFormDataFromLocalStorage = () => {
+    try {
+      const formData = localStorage.getItem('formData');
+      if(formData){
+        const formDataItems = JSON.parse(formData);
+        setDescription(formDataItems['description']);
+        setPrivacy(formDataItems['privacy']);
+        const inviteeIds = formDataItems['inviteeIds'];
+        const invitees = friends.filter(f => inviteeIds.includes(f.id));
+        updateSessionInvitations(invitees);
+      }
+    } catch (error) {
+      console.error('localStorage is not available', error)
+    }
+  }
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const payload = {
+      privacy: formData.get('privacy'),
+      description: formData.get('description'),
+      inviteeIds: invitees.map(i => i.id)
+    };
+    console.log(payload); //TODO: handle payload
+    
+    try {
+      //store this payload in localstorage.
+      localStorage.setItem('formData', JSON.stringify(payload))  
+    } catch (error) {
+      console.error("localStorage is not available", error);
+    }
+    //if JamKazam application is not upload on the local computer
+    //Show a modal dialog for the user
+    //TODO: need a new backend api to start the session with the formdata
+    
+  };
+
+  const handleOnSelect = submittedItems => {
+    updateSessionInvitations(submittedItems)
+  };
+
+  const updateSessionInvitations = (submittedInvitees) => {
+    const updatedInvitees = Array.from(new Set([...invitees, ...submittedInvitees]));
+    setInvitees(updatedInvitees);
+
+    const friendIds = submittedInvitees.map(si => si.id)
+    const updatedFriends = friends.filter(f => !friendIds.includes(f.id));
+    setFriends(updatedFriends);
+  }
+
+  const removeInvitee = invitee => {
+    const updatedInvitees = invitees.filter(i => i.id !== invitee.id);
+    setInvitees(updatedInvitees);
+    const updatedFriends = [...friends, invitee];
+    setFriends(updatedFriends);
+  };
+
+  return (
+    <div>
+      <Card>
+        <FalconCardHeader title={t('new.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
+        <CardBody className="pt-0">
+          <Row>
+            <Col>
+              <Form onSubmit={handleSubmit}>
+                <FormGroup className="mb-3">
+                  <Label>
+                    {t('new.privacy', { ns: 'sessions' })}{' '}
+                    <JKTooltip title={t('new.privacy_help', { ns: 'sessions' })} />
+                  </Label>
+                  <Input type="select" aria-label="Session Privacy" name="privacy" value={privacy} onChange={(e) => setPrivacy(e.target.value)} data-testid="session-privacy">
+                    <option value="1">{t('new.privacy_opt_public', { ns: 'sessions' })}</option>
+                    <option value="2">{t('new.privacy_opt_private_invite', { ns: 'sessions' })}</option>
+                    <option value="3">{t('new.privacy_opt_private_approve', { ns: 'sessions' })}</option>
+                  </Input>
+                </FormGroup>
+
+                <FormGroup className="mb-3">
+                  <Label>
+                    {t('new.invitations', { ns: 'sessions' })}{' '}
+                    <JKTooltip title={t('new.invitations_help', { ns: 'sessions' })} />
+                  </Label>
+                  <JKFriendsAutoComplete friends={friends} onSelect={handleOnSelect} />
+                  { invitees.length > 0 && 
+                    <JKSessionInviteesChips invitees={invitees} removeInvitee={removeInvitee} />
+                  }
+                </FormGroup>
+
+                <FormGroup className="mb-3">
+                  <Label>
+                    {t('new.description', { ns: 'sessions' })}{' '}
+                    <JKTooltip title={t('new.description_help', { ns: 'sessions' })} />
+                  </Label>
+                  <Input
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    name="description"
+                    type="textarea"
+                    data-testid="session-description"
+                    placeholder={t('new.description_placeholder', { ns: 'sessions' })}
+                  />
+                </FormGroup>
+
+                <FormGroup className="mb-3">
+                  <Button color="primary" data-testid="btn-create-session">{t('new.create_session', { ns: 'sessions' })}</Button>
+                </FormGroup>
+              </Form>
+            </Col>
+            <Col />
+          </Row>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default JKNewMusicSession;
diff --git a/web/app/assets/javascripts/globals.js b/web/app/assets/javascripts/globals.js
index 00e8db11f..d17088c65 100644
--- a/web/app/assets/javascripts/globals.js
+++ b/web/app/assets/javascripts/globals.js
@@ -36,7 +36,7 @@
       CHAT: "1"
     };
 
-    context.JK.AUDIO_FORMATS = ['.mp3', '.wav', '.ogg', '.wma'];
+    context.JK.AUDIO_FORMATS = ['.mp3', '.vob', '.wav', '.flac', '.au'];
     context.JK.VIDEO_FORMATS = ['.mp4', '.mov', '.vob', '.wmv'];
     context.JK.RECORD_TYPE_AUDIO = 'audio-only'
     context.JK.RECORD_TYPE_BOTH = 'audio-video'
diff --git a/web/app/assets/javascripts/recordingModel.js b/web/app/assets/javascripts/recordingModel.js
index 297731180..69bfa4f15 100644
--- a/web/app/assets/javascripts/recordingModel.js
+++ b/web/app/assets/javascripts/recordingModel.js
@@ -102,6 +102,7 @@
                     var groupedTracks = groupTracksToClient(recording);
                     //await jamClient.StartRecording(recording["id"], groupedTracks, recordVideo, recordChat, recordFramerate);
                     //TODO: need a modified version of jamClient.StartRecording
+                    alert('StartMediaRecording')
                     await jamClient.StartMediaRecording(recording["id"], groupedTracks, recordSettings)
                 })
                 .catch(function(jqXHR) {