diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx
index f950b0a551..f90568ca80 100644
--- a/vocodes/src/App.tsx
+++ b/vocodes/src/App.tsx
@@ -42,6 +42,9 @@ interface State {
   w2lInferenceJobs: Array<W2lInferenceJob>,
   ttsModelUploadJobs: Array<TtsModelUploadJob>,
   w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>,
+
+  // Current text entered
+  textBuffer: string,
 }
 
 class App extends React.Component<Props, State> {
@@ -62,6 +65,8 @@ class App extends React.Component<Props, State> {
       w2lInferenceJobs: [],
       ttsModelUploadJobs: [],
       w2lTemplateUploadJobs: [],
+
+      textBuffer: '',
     }
   }
 
@@ -339,6 +344,14 @@ class App extends React.Component<Props, State> {
     this.setState({migrationMode: mode});
   }
 
+  setTextBuffer = (textBuffer: string) => {
+    this.setState({ textBuffer: textBuffer });
+  }
+
+  clearTextBuffer = () => {
+    this.setState({ textBuffer: '' });
+  }
+
   public render() {
     if (this.state.migrationMode === MigrationMode.OLD_VOCODES) {
       return (
@@ -383,6 +396,10 @@ class App extends React.Component<Props, State> {
 
                     enqueueW2lTemplateUploadJob={this.enqueueW2lTemplateUploadJob}
                     w2lTemplateUploadJobs={this.state.w2lTemplateUploadJobs}
+
+                    textBuffer={this.state.textBuffer}
+                    setTextBuffer={this.setTextBuffer}
+                    clearTextBuffer={this.clearTextBuffer}
                     />
                 </Route>
               </Switch>
diff --git a/vocodes/src/v2/view/NewVocodesContainer.tsx b/vocodes/src/v2/view/NewVocodesContainer.tsx
index f5be57d400..c75a94cf8c 100644
--- a/vocodes/src/v2/view/NewVocodesContainer.tsx
+++ b/vocodes/src/v2/view/NewVocodesContainer.tsx
@@ -51,6 +51,10 @@ interface Props {
 
   enqueueW2lTemplateUploadJob: (jobToken: string) => void,
   w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>,
+
+  textBuffer: string,
+  setTextBuffer: (textBuffer: string) => void,
+  clearTextBuffer: () => void,
 }
 
 interface State {
@@ -266,6 +270,9 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 ttsModelUploadJobs={this.props.ttsModelUploadJobs}
                 w2lInferenceJobs={this.props.w2lInferenceJobs}
                 w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                textBuffer={this.props.textBuffer}
+                setTextBuffer={this.props.setTextBuffer}
+                clearTextBuffer={this.props.clearTextBuffer}
               />
             </Route>
 
diff --git a/vocodes/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx b/vocodes/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
index 1ebe8d9472..8f853ee97f 100644
--- a/vocodes/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
+++ b/vocodes/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx
@@ -27,13 +27,15 @@ interface Props {
   ttsModelUploadJobs: Array<TtsModelUploadJob>,
   w2lInferenceJobs: Array<W2lInferenceJob>,
   w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>,
+  textBuffer: string,
+  setTextBuffer: (textBuffer: string) => void,
+  clearTextBuffer: () => void,
 }
 
 function TtsModelListFc(props: Props) {
   const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
 
   const [selectedTtsModel, setSelectedTtsModel] = useState<TtsModelListItem|undefined>(undefined);
-  const [text, setText] = useState<string>("");
 
   const listModels = useCallback(async () => {
     const models = await ListTtsModels();
@@ -94,12 +96,8 @@ function TtsModelListFc(props: Props) {
   };
 
   const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => { 
-    ev.preventDefault();
     const textValue = (ev.target as HTMLTextAreaElement).value;
-
-    setText(textValue);
-
-    return false;
+    props.setTextBuffer(textValue);
   };
 
 
@@ -110,7 +108,7 @@ function TtsModelListFc(props: Props) {
       return false;
     }
 
-    if (text === undefined) {
+    if (props.textBuffer === undefined) {
       return false;
     }
 
@@ -122,7 +120,7 @@ function TtsModelListFc(props: Props) {
     const request = {
       uuid_idempotency_token: uuidv4(),
       tts_model_token: modelToken,
-      inference_text: text,
+      inference_text: props.textBuffer,
     }
 
     fetch(endpointUrl, {
@@ -149,8 +147,9 @@ function TtsModelListFc(props: Props) {
     return false;
   };
 
-  const handleCancelClick = (ev: React.FormEvent<HTMLButtonElement>) => { 
+  const handleClearClick = (ev: React.FormEvent<HTMLButtonElement>) => { 
     ev.preventDefault();
+    props.clearTextBuffer();
     return false;
   };
 
@@ -207,6 +206,7 @@ function TtsModelListFc(props: Props) {
             <textarea 
               onChange={handleChangeText}
               className="textarea is-large" 
+              value={props.textBuffer}
               placeholder="Textual shenanigans go here..."></textarea>
           </div>
         </div>
@@ -217,7 +217,7 @@ function TtsModelListFc(props: Props) {
               <button className="button is-info is-large" disabled={remainingCharactersButtonDisabled}>Speak</button>
             </div>
             <div className="column has-text-centered">
-              <button className="button is-info is-light is-large" onClick={handleCancelClick}>Cancel</button>
+              <button className="button is-info is-light is-large" onClick={handleClearClick}>Clear</button>
             </div>
           </div>
         </div>