diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index cb5ea28..fd38a87 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -7,15 +7,17 @@ import {
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm
 } from './actions';
 import TextGenerationControl from "./components/TextGenerationControl";
 import TextGenerationResults from "./components/TextGenerationResults";
 import TextDetailedAnalysis from "./components/TextDetailedAnalysis";
-import AnalyzedText from "./models/AnalyzedText";
+import TextRecord from "./models/TextRecord";
 
 type ContainerProps = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   error: any,
   loading: any,
   isFolded: boolean,
@@ -25,7 +27,9 @@ type ContainerProps = {
   generateTextFailed: any,
   generateText: any
   selectText: Function,
-  foldForm: Function
+  submitEditText: Function,
+  deleteEditText: Function,
+  foldForm: Function,
 }
 
 const Container: React.FunctionComponent<ContainerProps> = ({
@@ -39,6 +43,8 @@ const Container: React.FunctionComponent<ContainerProps> = ({
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm
   }) => {
     const getDetailedAnalysisComponent = () => {
@@ -48,7 +54,10 @@ const Container: React.FunctionComponent<ContainerProps> = ({
         const selectedText = selectedTextIds.map(id => analysisResults.find(item => id == item.id))
         return (
           <TextDetailedAnalysis
-            selectedText={selectedText} />
+            selectedText={selectedText} 
+            submitEditText={submitEditText} 
+            deleteEditText={deleteEditText} 
+            />
         );
       }
     }
@@ -95,6 +104,8 @@ function mapDispatchToProps (dispatch) {
     generateTextFailed: generateTextFailed,
     generateText: generateText,
     selectText: selectText,
+    submitEditText: submitEditText,
+    deleteEditText: deleteEditText,
     foldForm: foldForm,
   }, dispatch);
  }
diff --git a/frontend/actions.ts b/frontend/actions.ts
index efee7d8..a7f1cf9 100644
--- a/frontend/actions.ts
+++ b/frontend/actions.ts
@@ -7,6 +7,13 @@ function requestGenerateText() {
   }
 }
 
+function requestEditText(id) {
+  return {
+    type: "REQUEST_EDIT_TEXT",
+    id: id
+  }
+}
+
 function setGeneratedTextResults(generateTextResults) {
   return {
     type: "SET_GENERATED_TEXT_RESULTS",
@@ -43,6 +50,40 @@ function selectText(id: number) {
   }
 }
 
+function setEditTextResults(id: number, text: string, analysis: any) {
+  return {
+    type: "EDIT_TEXT_SUCCEEDED",
+    id: id,
+    text: text,
+    analysis: analysis
+  }
+
+}
+
+function editTextFailed(id: number, error) {
+  return {
+    type: "EDIT_TEXT_FAILED",
+    id: id,
+    error: error
+  }
+}
+
+function submitEditText(id: number, text: string) {
+  return function(dispatch) {
+    dispatch(requestEditText(id));
+    makePostCall("api/v1/analyze_text", {text: text})
+      .then(response => dispatch(setEditTextResults(id, text, response.data.text_analysis_result)))
+      .catch(error => dispatch(editTextFailed(id, error)));
+  }
+}
+
+function deleteEditText(id: number) {
+  return {
+    type: "DELETE_EDIT_TEXT",
+    id: id
+  }
+}
+
 
 export {
   requestGenerateText,
@@ -50,5 +91,7 @@ export {
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm,
 };
diff --git a/frontend/components/InteractiveText.tsx b/frontend/components/InteractiveText.tsx
new file mode 100644
index 0000000..d7e8a66
--- /dev/null
+++ b/frontend/components/InteractiveText.tsx
@@ -0,0 +1,222 @@
+import React from "react";
+import TextRecord from "../models/TextRecord";
+import AnalyzedText from "../models/AnalyzedText";
+import { FiEdit, FiX, FiCheck } from "react-icons/fi";
+
+type InteractiveTextProps = {
+  textRecord: TextRecord;
+  tabColor: string;
+  editColor: string;
+  submitEditText: Function;
+  deleteEditText: Function;
+};
+
+type InteractiveTextState = {
+  editMode: boolean;
+  editText: string;
+};
+
+class InteractiveText extends React.Component<
+  InteractiveTextProps,
+  InteractiveTextState
+> {
+  constructor(props) {
+    super(props);
+
+    let editText;
+    if (this.props.textRecord.edited) {
+      editText = this.props.textRecord.edited.text;
+    } else {
+      editText = this.props.textRecord.original.text;
+    }
+
+    this.state = {
+      editMode: false,
+      editText: editText,
+    };
+
+    this.enableEditMode = this.enableEditMode.bind(this);
+    this.handleTextSubmit = this.handleTextSubmit.bind(this);
+    this.handleTextClear = this.handleTextClear.bind(this);
+    this.handleTextEdit = this.handleTextEdit.bind(this);
+  }
+
+  enableEditMode() {
+    this.setState({ editMode: true });
+  }
+
+  handleTextSubmit() {
+    this.props.submitEditText(this.props.textRecord.id, this.state.editText);
+    this.setState({ editMode: false });
+  }
+
+  handleTextClear() {
+    this.props.deleteEditText(this.props.textRecord.id);
+    this.setState({ editMode: false });
+  }
+
+  handleTextEdit(event) {
+    this.setState({ editText: event.target.value });
+  }
+
+  render() {
+    const getEditText = (record: TextRecord) => {
+      if (record.editLoading) {
+        return "Loading...";
+      } else if (record.editError) {
+        return (
+          <>
+            <div style={{color: "red"}}>Error: {record.editError.message}</div>
+            <div>{record.edited?.text}</div>
+          </>
+        );
+      } else {
+        return record.edited.text;
+      }
+    }
+
+    return (
+      <>
+        <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
+          <div
+            className="flex items-center justify-center flex-none px-1"
+            style={{
+              backgroundColor: this.props.tabColor,
+              color: "white",
+              width: "26px",
+              fontSize: "18px",
+              lineHeight: "20px",
+            }}
+          >
+            {this.props.textRecord.id}
+          </div>
+          <div
+            className="flex items-center flex-auto px-4"
+            style={{
+              backgroundColor: "#F3F6FD",
+              fontSize: "18px",
+              lineHeight: "27px",
+            }}
+          >
+            {this.props.textRecord.original.text}
+          </div>
+          <button
+            className="flex items-center justify-center flex-none px-1"
+            style={{
+              backgroundColor: "#E1E6F0",
+              width: "42px",
+              fontSize: "18px",
+              lineHeight: "20px",
+            }}
+            onClick={this.enableEditMode}
+          >
+            <FiEdit style={{ color: "#167DF5" }} size={20} />
+          </button>
+        </div>
+        {(this.props.textRecord.edited || this.props.textRecord.editLoading) && !this.state.editMode ? (
+          <div
+            className="flex items-stretch mb-4"
+            style={{ minHeight: "110px" }}
+          >
+            <div
+              className="flex items-center flex-none px-1"
+              style={{
+                backgroundColor: this.props.editColor,
+                color: "white",
+                width: "26px",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+            >
+              {this.props.textRecord.id}*
+            </div>
+            <div
+              className="flex flex-col justify-center flex-auto px-4"
+              style={{
+                backgroundColor: "#F3F6FD",
+                fontSize: "18px",
+                lineHeight: "27px",
+              }}
+            >
+              { getEditText(this.props.textRecord) }
+            </div>
+            <button
+              className="flex items-center justify-center flex-none px-1"
+              style={{
+                backgroundColor: "#E1E6F0",
+                width: "42px",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+              onClick={this.enableEditMode}
+            >
+              <FiEdit style={{ color: "#167DF5" }} size={20} />
+            </button>
+          </div>
+        ) : null}
+        {this.state.editMode ? (
+          <div
+            className="flex items-stretch mb-4"
+            style={{ minHeight: "110px" }}
+          >
+            <div
+              className="flex items-center flex-none px-1"
+              style={{
+                backgroundColor: this.props.editColor,
+                color: "white",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+            >
+              {this.props.textRecord.id}*
+            </div>
+            <textarea
+              className="flex-auto"
+              style={{
+                backgroundColor: "white",
+                fontSize: "18px",
+                lineHeight: "27px",
+                padding: "10px",
+                border: "solid black 1px",
+              }}
+              value={this.state.editText}
+              onChange={this.handleTextEdit}
+            />
+            <div
+              className="flex flex-col items-center justify-center flex-none px-1"
+              style={{
+                backgroundColor: "#E1E6F0",
+                width: "42px",
+                lineHeight: "20px",
+              }}
+            >
+              <button
+                className="flex items-center flex-grow px-1"
+                style={{
+                  backgroundColor: "#E1E6F0",
+                  lineHeight: "20px",
+                }}
+                onClick={this.handleTextClear}
+              >
+                <FiX style={{ color: "#167DF5" }} size={20} />
+              </button>
+              <button
+                className="flex items-center flex-grow px-1"
+                style={{
+                  backgroundColor: "#E1E6F0",
+                  color: "white",
+                  lineHeight: "20px",
+                }}
+                onClick={this.handleTextSubmit}
+              >
+                <FiCheck style={{ color: "#167DF5" }} size={20}/>
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default InteractiveText;
diff --git a/frontend/components/PerspectiveScoresBarChart.tsx b/frontend/components/PerspectiveScoresBarChart.tsx
index 3d96182..26103e2 100644
--- a/frontend/components/PerspectiveScoresBarChart.tsx
+++ b/frontend/components/PerspectiveScoresBarChart.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import * as d3 from "d3";
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import TextRecord from "../models/TextRecord";
 import AnalyzedText from "../models/AnalyzedText";
 
 
@@ -14,7 +15,7 @@ type PerspectiveScoresBarChartProps = {
   id: number,
   width: number,
   defaultSelectedScore: string,
-  analyzedText: AnalyzedText
+  textRecord: TextRecord
 }
 
 class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps, PerspectiveScoresBarChartState> {
@@ -58,7 +59,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     var _this = this;
     var body = d3.select(this.node.current);
 
-    const getResultScoreObj: any = (item: any) => {
+    const getResultScoreObj: any = (item: AnalyzedText) => {
       let resultScores = [
         {label: "toxicity", value: item.toxicity, scoreName: "Toxicity"},
         {label: "severeToxicity", value: item.severeToxicity, scoreName: "Severe Toxicity"},
@@ -73,7 +74,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
       return resultScores;
     }
 
-    var scores = getResultScoreObj(this.props.analyzedText);
+    var scores = getResultScoreObj(this.props.textRecord.original);
 
     var margin = { top: 5, right: 15, bottom: 50, left: 55 }
     var h = 111 - margin.top - margin.bottom
diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index 0c77ad6..6b915d9 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -1,13 +1,24 @@
 import React from "react";
-import * as d3 from "d3";
-import * as _ from "lodash"
-import ReactDOM from "react-dom";
+import TextRecord from "../models/TextRecord";
 import AnalyzedText from "../models/AnalyzedText";
 import PerspectiveScoresSpiderChart from "./PerspectiveScoresSpiderChart";
-import { FiEdit } from "react-icons/fi";
+import tinycolor from "tinycolor2";
+import InteractiveText from "./InteractiveText";
 
 type TextDetailedAnalysisProps = {
-  selectedText: AnalyzedText[],
+  selectedText: TextRecord[],
+  submitEditText: Function,
+  deleteEditText: Function,
+}
+
+class TabColor {
+  original: string;
+  edited: string;
+
+  constructor(original: string, edited: string) {
+    this.original = original;
+    this.edited = edited;
+  }
 }
 
 class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, null> {
@@ -17,14 +28,37 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
   }
 
   render() {
-    const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
+    const tabColors = [
+      new TabColor("#FD6D22", "FABB2D"),
+      new TabColor("#3AA757", "#4DBDC5"),
+      new TabColor("#ED4596", "#FF4C4C"),
+      new TabColor("#752BEE", "#3C85FA")
+    ]
+
+    const getColor = (i: number) => {
+      return tabColors[i % tabColors.length];
+    }
+
+    const textScores = new Array<AnalyzedText>();
+    const spiderColors = new Array<string>();
+
+    this.props.selectedText.forEach((text, index) => {
+      textScores.push(text.original);
+      const color = getColor(index);
+      spiderColors.push(color.original);
+
+      if (text.edited) {
+        textScores.push(text.edited);
+        spiderColors.push(color.edited);
+      }
+    });
 
     return (
       <div className="page-column p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>
         <h1 className="mb-4">Toxicity Analysis</h1>
         <div className="mb-4 text-2xl">
           <PerspectiveScoresSpiderChart
-            scores={this.props.selectedText}
+            scores={textScores}
             axes={[
               ["Toxicity", "toxicity"],
               ["Severe Toxicity", "severeToxicity"],
@@ -35,22 +69,18 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
               ["Sexually Explicit", "sexuallyExplicit"],
               ["Flirtation", "flirtation"]
             ]}
-            colors={tabColors}
+            colors={spiderColors}
           />
         </div>
-        {this.props.selectedText.map((item, index) => 
-          <div className="flex items-stretch mb-4" style={{minHeight: "110px"}}>
-            <div className="flex items-center justify-center flex-none px-1" style={{backgroundColor: tabColors[index % tabColors.length], color: "white", width: "26px", fontSize: "18px", lineHeight: "20px"}}>
-              {item.id}
-            </div>
-            <div className="flex items-center flex-auto px-4" style={{backgroundColor: "#F3F6FD", fontSize: "18px", lineHeight: "27px"}}>
-              {item.text}
-            </div>
-            <div className="flex items-center justify-center flex-none px-1" style={{backgroundColor: "#E1E6F0", color: "white", width: "42px", fontSize: "18px", lineHeight: "20px"}}>
-              <FiEdit style={{color: "#167DF5"}} size={20}/>
-            </div>
-          </div>
-        )}
+        {this.props.selectedText.map((item, index) => {
+          const color = getColor(index);
+          return <InteractiveText 
+                   textRecord={item} 
+                   tabColor={color.original} 
+                   editColor={color.edited}
+                   submitEditText={this.props.submitEditText}
+                   deleteEditText={this.props.deleteEditText} />
+        })}
       </div>
     );
   }
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 38c97b6..d0a7df5 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { ComboBox, Dropdown, IComboBoxOption, IDropdownOption, Stack } from "office-ui-fabric-react"
-import AnalyzedText from "../models/AnalyzedText";
+import TextRecord from "../models/TextRecord";
 import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
 import { IconSortDescending, IconSortAscending } from '@tabler/icons';
 
 type TextGenerationResultsProps = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   onSelectTextId: Function,
   selectedTextIds: number[],
   loading?: boolean,
@@ -13,7 +13,7 @@ type TextGenerationResultsProps = {
 }
 
 type TextGenerationResultsState = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   highlightScoreLabel: string,
   sortByLabel: string,
   sortDescending: boolean,
@@ -66,7 +66,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       const sortedAnalysisResultsAscending = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
         if (resultA[scoreLabel] < resultB[scoreLabel]) {
           return -1;
-        } else if (resultA[scoreLabel] == resultB[scoreLabel]) {
+        } else if (resultA.original[scoreLabel] == resultB.original[scoreLabel]) {
           return 0;
         } else {
           return 1;
@@ -201,14 +201,14 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
               {item.id}
             </div>
             <div className="flex-none" style={{width: `${chartWidth}px`, border: "5px solid #F3F6FD"}}>
-              <PerspectiveScoresBarChart id={item.id} width={chartWidth} analyzedText={item} defaultSelectedScore={this.state.highlightScoreLabel} />
+              <PerspectiveScoresBarChart id={item.id} width={chartWidth} textRecord={item} defaultSelectedScore={this.state.highlightScoreLabel} />
             </div>
             <button 
               className="flex items-center flex-auto text-left px-4"
               style={{backgroundColor: "#F3F6FD", fontSize: "18px", lineHeight: "27px"}}
               onClick={() => this.props.onSelectTextId(item.id)}
             >
-              {item.text}
+              {item.original.text}
             </button>
           </div>
         )}
diff --git a/frontend/models/TextRecord.ts b/frontend/models/TextRecord.ts
new file mode 100644
index 0000000..f45dcfa
--- /dev/null
+++ b/frontend/models/TextRecord.ts
@@ -0,0 +1,19 @@
+import AnalyzedText from "./AnalyzedText";
+
+class TextRecord {
+  original: AnalyzedText;
+  edited: AnalyzedText;
+  editLoading: boolean;
+  editError: any;
+  id: number;
+
+  constructor(text_generation_result: any) {
+    this.id = text_generation_result.id;
+    this.original = new AnalyzedText(text_generation_result);
+    this.edited = null;
+    this.editLoading = false;
+    this.editError = null;
+  }
+}
+
+export default TextRecord;
\ No newline at end of file
diff --git a/frontend/reducers.ts b/frontend/reducers.ts
index df09ecd..c30a770 100644
--- a/frontend/reducers.ts
+++ b/frontend/reducers.ts
@@ -1,4 +1,5 @@
 import AnalyzedText from "./models/AnalyzedText";
+import TextRecord from "./models/TextRecord";
 
 const rawInitialState = {
    analysisResults: [],
@@ -16,14 +17,23 @@ function rootReducer(state = initialState, action) {
         case "REQUEST_GENERATE_TEXT":
           return Object.assign({}, state, {loading: true, error: null, analysisResults: [], selectedTextIds: []});
 
+        case "REQUEST_EDIT_TEXT": {
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (record) {
+            record.editLoading = true;
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
+
         case "REQUEST_GENERATE_TEXT_FAILED":
-          return Object.assign({}, state, {loding: false, error: action.error});
+          return Object.assign({}, state, {loading: false, error: action.error});
 
-        case "SET_GENERATED_TEXT_RESULTS":
-          const analysisResults = action.text_generation_results?.map((result) => new AnalyzedText(result));
+        case "SET_GENERATED_TEXT_RESULTS": {
+          const analysisResults = action.text_generation_results?.map((result) => new TextRecord(result));
           return Object.assign({}, state, {loading: false, analysisResults: analysisResults, error: null});
+        }
         
-        case "SELECT_TEXT":
+        case "SELECT_TEXT": {
           const id = action.id;
           let textIds = state.selectedTextIds;
           if (state.selectedTextIds.includes(id)) {
@@ -32,7 +42,34 @@ function rootReducer(state = initialState, action) {
             textIds = [...textIds, id];
           }
           return Object.assign({}, state, {selectedTextIds: textIds});
+        }
+        
+        case "EDIT_TEXT_SUCCEEDED": {
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (record) {
+            record.edited = new AnalyzedText({...action.analysis, text: action.text, id: action.id});
+            record.editLoading = false;
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
         
+        case "EDIT_TEXT_FAILED": {
+          console.log(action.error);
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          record.editLoading = false;
+          record.edited = null;
+          record.editError = action.error;
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
+
+        case "DELETE_EDIT_TEXT": {
+          const rec: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (rec) {
+            rec.edited = null;
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
+
         case "FOLD_FORM":
           return Object.assign({}, state, {isFolded: !state.isFolded});
 
diff --git a/package-lock.json b/package-lock.json
index 158d175..da4ee64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13379,6 +13379,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
diff --git a/package.json b/package.json
index 6d536b1..7d7aa49 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "request": "^2.88.0",
-    "request-promise": "^4.2.4"
+    "request-promise": "^4.2.4",
+    "tinycolor2": "^1.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
diff --git a/transformerviz/server.py b/transformerviz/server.py
index ecba7b5..7107fd4 100644
--- a/transformerviz/server.py
+++ b/transformerviz/server.py
@@ -106,6 +106,6 @@ def generate_text():
 def analyze_text():
     request_json = request.json
     text = request_json.get("text", "")
-    analyzed_sentence = perspective_api_client.analyze_sentences(text).pop()
+    analyzed_sentence = perspective_api_client.analyze_sentences([text]).pop()
 
     return {"text_analysis_result": analyzed_sentence}