diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index c729e0d..cb5ea28 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -45,9 +45,10 @@ const Container: React.FunctionComponent<ContainerProps> = ({
       if (selectedTextIds.length == 0) {
         return (<React.Fragment />);
       } else {
+        const selectedText = selectedTextIds.map(id => analysisResults.find(item => id == item.id))
         return (
           <TextDetailedAnalysis
-            selectedText={analysisResults.filter(item => selectedTextIds.includes(item.id))} />
+            selectedText={selectedText} />
         );
       }
     }
diff --git a/frontend/app.css b/frontend/app.css
index f812801..0d939d8 100644
--- a/frontend/app.css
+++ b/frontend/app.css
@@ -58,4 +58,16 @@ h1 {
 
 .page-column {
   overflow-y: scroll;
+}
+
+.sort-button {
+  background: #FFFFFF;
+  border: 1px solid #167DF5;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+
+.sort-button.disabled-button {
+  background: #EFF2F4;
+  border: solid #EFF2F4 1px;
 }
\ No newline at end of file
diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index 1148b09..55d8c54 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -17,7 +17,7 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
   }
 
   render() {
-    const tabColors = ["#FD8A40", "#60B877", "#F03C92", "#8B3CF0"];
+    const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
 
     return (
       <div className="page-column p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index f1f5d0d..ef7ee1f 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComboBox, IComboBoxOption, Stack } from "office-ui-fabric-react"
 import AnalyzedText from "../models/AnalyzedText";
 import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
+import { IconSortDescending, IconSortAscending } from '@tabler/icons';
 
 type TextGenerationResultsProps = {
   analysisResults: AnalyzedText[],
@@ -14,7 +15,8 @@ type TextGenerationResultsProps = {
 type TextGenerationResultsState = {
   analysisResults: AnalyzedText[],
   highlightScoreLabel: string,
-  sortByLabel: string
+  sortByLabel: string,
+  sortDescending: boolean,
 }
 
 class TextGenerationResults extends React.Component<TextGenerationResultsProps, TextGenerationResultsState> {
@@ -25,7 +27,8 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
     this.state = {
       analysisResults: props.analysisResults,
       highlightScoreLabel: "toxicity",
-      sortByLabel: "none"
+      sortByLabel: "none",
+      sortDescending: true
     }
   }
 
@@ -110,6 +113,14 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       { key: 'flirtation', text: 'Flirtation' },
     ];
 
+    const getSortClass = (enabled: boolean) => {
+      if (enabled) {
+        return "sort-button";
+      } else {
+        return "sort-button disabled-button";
+      }
+    }
+
     const chartWidth = 140;
 
     return (
@@ -117,6 +128,10 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
         <div className="scroll-pane">
         <h1>Generated Results</h1>
         <Stack horizontal horizontalAlign="end" tokens={{childrenGap: 20}} styles={{root: {marginBottom: "16px"}}}>
+          <div className="flex items-end">
+            <button className={getSortClass(this.state.sortDescending)} onClick={() => this.setState({sortDescending: true})} ><IconSortDescending size={30} /></button>
+            <button className={getSortClass(!this.state.sortDescending)} onClick={() => this.setState({sortDescending: false})} ><IconSortAscending size={30} /></button>
+          </div>
           <ComboBox
             label="Sort by"
             options={sortOptions}
diff --git a/package-lock.json b/package-lock.json
index 89211c5..158d175 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1819,6 +1819,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@tabler/icons": {
+      "version": "1.41.2",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.41.2.tgz",
+      "integrity": "sha512-X6cQmMC24hiwg0p2BzasvU3IeCCdOk0f/9d6gNNtJM4lzG2TCloTns1bVvU5MAFkITGukxUqjPFE3Ecd6kGsfw=="
+    },
     "@testing-library/dom": {
       "version": "7.31.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.0.tgz",
diff --git a/package.json b/package.json
index 61ea581..6d536b1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@tabler/icons": "^1.41.2",
     "@types/lodash": "^4.14.169",
     "axios": "^0.21.1",
     "d3": "^5.16.0",