diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css
index 12488cfd..329ff50b 100644
--- a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css
+++ b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css
@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 85%;
-  height: 70vh;
+  height: 75vh;
+  padding: 0.5rem;
 }
 
 @media screen and (max-width: 996px) {
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx
index 141614af..4e8997fb 100644
--- a/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx
+++ b/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx
@@ -21,8 +21,8 @@ export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
     <div className={styles.suiteDisplay}>
       {props.currentSuite.suites ? (
         <SuiteSelector
+          state={props.state}
           suites={props.currentSuite.suites}
-          esFlag={props.state.ecmaScriptVersion}
           navigateToSuite={props.navigateToSuite}
         />
       ) : null}
diff --git a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx
index b3a44f28..69ce5417 100644
--- a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx
+++ b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx
@@ -1,22 +1,31 @@
 import React from "react";
-import { SuiteResult, TestStats } from "@site/src/components/conformance/types";
+import {
+  ConformanceState,
+  SortOption,
+  SuiteResult,
+  TestStats,
+} from "@site/src/components/conformance/types";
 
 import styles from "./styles.module.css";
+import { availableSortingOptions } from "../../../utils";
 
 type SelectorProps = {
+  state: ConformanceState;
   suites: SuiteResult[];
-  esFlag: string | null;
   navigateToSuite: (string) => void;
 };
 
 export default function SuiteSelector(props: SelectorProps): JSX.Element {
+  const option: SortOption[] = availableSortingOptions.filter(
+    (v) => v.id === props.state.sortOption,
+  );
   return (
     <div className={styles.suiteSelector}>
       {props.suites
-        .sort((a, b) => a.name.localeCompare(b.name))
+        .sort(option[0].callback)
         .filter((suite) => {
           const stats: TestStats =
-            suite.versionedStats[props.esFlag] ?? suite.stats;
+            suite.versionedStats[props.state.ecmaScriptVersion] ?? suite.stats;
           return stats.total !== 0;
         })
         .map((suite) => {
@@ -24,7 +33,7 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element {
             <SuiteItem
               key={suite.name}
               suite={suite}
-              esFlag={props.esFlag}
+              esFlag={props.state.ecmaScriptVersion}
               navigateToSuite={props.navigateToSuite}
             />
           );
diff --git a/src/components/conformance/ResultsDisplay/index.tsx b/src/components/conformance/ResultsDisplay/index.tsx
index 45a3b1e2..b8c9ebe9 100644
--- a/src/components/conformance/ResultsDisplay/index.tsx
+++ b/src/components/conformance/ResultsDisplay/index.tsx
@@ -5,6 +5,7 @@ import {
   VersionItem,
   SuiteResult,
   ConformanceState,
+  SortOption,
 } from "@site/src/components/conformance/types";
 import ResultNavigation from "./nav";
 import {
@@ -89,6 +90,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         newPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
       ),
     });
   };
@@ -104,6 +106,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         slicedPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
       ),
     });
   };
@@ -113,7 +116,25 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
     const nulledFlag = flag ? flag : undefined;
     history.push({
       pathname: "/conformance",
-      state: createState(props.state.version, props.state.testPath, nulledFlag),
+      state: createState(
+        props.state.version,
+        props.state.testPath,
+        nulledFlag,
+        props.state.sortOption,
+      ),
+    });
+  };
+
+  // Sets the sorting option
+  const setSortOption = (option: string) => {
+    history.push({
+      pathname: "/conformance",
+      state: createState(
+        props.state.version,
+        props.state.testPath,
+        props.state.ecmaScriptVersion,
+        option,
+      ),
     });
   };
 
@@ -125,6 +146,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
         test,
       ),
     });
@@ -146,6 +168,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         state={props.state}
         sliceNavToIndex={sliceNavToIndex}
         setEcmaScriptFlag={setEcmaScriptFlag}
+        setSortOption={setSortOption}
       />
       {currentSuite ? (
         <SuiteDisplay
diff --git a/src/components/conformance/ResultsDisplay/nav.tsx b/src/components/conformance/ResultsDisplay/nav.tsx
index 876bad94..79d0923e 100644
--- a/src/components/conformance/ResultsDisplay/nav.tsx
+++ b/src/components/conformance/ResultsDisplay/nav.tsx
@@ -1,26 +1,36 @@
 import React from "react";
-import { ConformanceState, SpecEdition } from "../types";
+import { ConformanceState, SortOption, SpecEdition } from "../types";
 
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
+import { availableSortingOptions } from "../utils";
 
 type ResultsNavProps = {
   state: ConformanceState;
   sliceNavToIndex: (number) => void;
   setEcmaScriptFlag: (string) => void;
+  setSortOption: (string) => void;
 };
 
 export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
   return (
     <div className={styles.resultsNav}>
-      <EcmaScriptVersionDropdown
-        setEcmaScriptFlag={props.setEcmaScriptFlag}
-        esVersionValue={props.state.ecmaScriptVersion}
-      />
-      <NavBreadCrumbs
-        navPath={props.state.testPath}
-        sliceNavToIndex={props.sliceNavToIndex}
-      />
+      <div className={styles.navSection}>
+        <EcmaScriptVersionDropdown
+          setEcmaScriptFlag={props.setEcmaScriptFlag}
+          esVersionValue={props.state.ecmaScriptVersion}
+        />
+        <SortingDropdown
+          sortValue={props.state.sortOption}
+          setSortOption={props.setSortOption}
+        />
+      </div>
+      <div className={styles.navSection}>
+        <NavBreadCrumbs
+          navPath={props.state.testPath}
+          sliceNavToIndex={props.sliceNavToIndex}
+        />
+      </div>
     </div>
   );
 }
@@ -32,11 +42,11 @@ type BreadCrumbProps = {
 
 function NavBreadCrumbs(props: BreadCrumbProps) {
   return (
-    <nav aria-label="breadcrumbs" style={{ padding: "0.25em" }}>
+    <nav aria-label="breadcrumbs" style={{ padding: "0.5em" }}>
       <ul className="breadcrumbs">
         {props.navPath.map((pathItem, idx, arr) => {
           return (
-            <NavItem
+            <BreadCrumbItem
               key={pathItem}
               itemName={pathItem}
               index={idx}
@@ -54,14 +64,14 @@ function NavBreadCrumbs(props: BreadCrumbProps) {
   );
 }
 
-type NavItemProps = {
+type BreadCrumbItemProps = {
   itemName: string;
   index: number;
   breadcrumbValue: string;
   sliceNavToIndex: (number) => void;
 };
 
-function NavItem(props: NavItemProps): JSX.Element {
+function BreadCrumbItem(props: BreadCrumbItemProps): JSX.Element {
   return (
     <li className={props.breadcrumbValue}>
       <Link
@@ -99,6 +109,7 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
 
   return (
     <div className={styles.dropdownContainer}>
+      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>ES Version:</h4>
       <select value={dropdownValue} onChange={handleVersionSelection}>
         <option value={""}>All</option>
         {Object.keys(SpecEdition)
@@ -114,3 +125,39 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
     </div>
   );
 }
+
+type SortProps = {
+  sortValue: string;
+  setSortOption: (string) => void;
+};
+
+function SortingDropdown(props: SortProps): JSX.Element {
+  const [sortValue, setSortValue] = React.useState<string>(props.sortValue ? props.sortValue : "alpha");
+
+  React.useEffect(() => {
+    setSortValue(props.sortValue);
+  }, [props.sortValue]);
+
+  const handleSortSelection = (e) => {
+    setSortValue(e.target.value);
+    const option = availableSortingOptions.filter(
+      (v) => v.id === e.target.value,
+    );
+    props.setSortOption(option[0].id);
+  };
+
+  return (
+    <div className={styles.dropdownContainer}>
+      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>Sort:</h4>
+      <select value={sortValue} onChange={handleSortSelection}>
+        {availableSortingOptions.map((key) => {
+          return (
+            <option key={key.id} value={key.id}>
+              {key.name}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/conformance/ResultsDisplay/styles.module.css b/src/components/conformance/ResultsDisplay/styles.module.css
index 1736bdd5..9c1fa7cf 100644
--- a/src/components/conformance/ResultsDisplay/styles.module.css
+++ b/src/components/conformance/ResultsDisplay/styles.module.css
@@ -10,31 +10,51 @@
 .resultsNav {
   display: flex;
   flex-direction: row;
-  height: 5vh;
+  height: 3.5rem;
   width: 100%;
   padding: 0.75em;
 }
 
+.navSection {
+  display: flex;
+  flex-direction: row;
+}
+
 .navLink:hover {
   cursor: pointer;
 }
 
 .dropdownContainer {
-  width: 6em;
-  padding: 0.25em;
+  display: flex;
+  flex-direction: row;
+  width: 12rem;
+  height: 2.5rem;
+  padding: 0.5rem 0;
 }
 
-@media screen and (max-height: 996px) {
+@media screen and (max-width: 996px) {
   .resultsDisplay {
     height: auto;
     width: calc(100vw-12px);
     overflow-y: auto;
   }
 
+  .navSection {
+    min-height: 2.5rem;
+    height: auto;
+    width: 100vw;
+  }
+
   .resultsNav {
-    min-height: 3.5rem;
     height: auto;
+    flex-direction: column;
     width: 100vw;
-    padding: 1rem auto;
+    padding: 0;
+  }
+
+  .dropdownContainer {
+    padding: 0.25rem 0;
+    width: 10.5rem;
+    height: 2rem;
   }
 }
diff --git a/src/components/conformance/types.ts b/src/components/conformance/types.ts
index fa710783..dc10fbf9 100644
--- a/src/components/conformance/types.ts
+++ b/src/components/conformance/types.ts
@@ -6,6 +6,7 @@ export type ConformanceState = {
   version: VersionItem;
   testPath: string[];
   ecmaScriptVersion: string | undefined;
+  sortOption: string;
   selectedTest: string | undefined;
 };
 
@@ -14,13 +15,14 @@ export type VersionItem = {
   fetchUrl: string;
 };
 
-export type TestStats = {
-  total: number;
-  passed: number;
-  ignored: number;
-  panic: number;
+export type SortOption = {
+  id: string;
+  name: string;
+  callback: (a: SuiteResult, b: SuiteResult) => number;
 };
 
+// The below types are specific to test result types.
+
 export type ResultInfo = {
   version: string;
   commit: string;
@@ -49,6 +51,13 @@ export type VersionedStats = {
   es13: TestStats;
 };
 
+export type TestStats = {
+  total: number;
+  passed: number;
+  ignored: number;
+  panic: number;
+};
+
 export type TestResult = {
   name: string;
   edition: SpecEdition;
diff --git a/src/components/conformance/utils.ts b/src/components/conformance/utils.ts
index 2c106e15..0b5e23c2 100644
--- a/src/components/conformance/utils.ts
+++ b/src/components/conformance/utils.ts
@@ -1,6 +1,7 @@
 import {
   ConformanceState,
   ResultInfo,
+  SortOption,
   SpecEdition,
   SuiteResult,
   TestOutcome,
@@ -15,17 +16,106 @@ export function createState(
   version: VersionItem,
   testPath?: string[],
   ecmaScriptVersion?: string,
+  sortOption?: string,
   selectedTest?: string,
 ): ConformanceState {
   testPath = testPath ? testPath : [version.tagName];
+  sortOption = sortOption ? sortOption : availableSortingOptions[0].id;
   return {
     version,
     testPath,
     ecmaScriptVersion,
+    sortOption,
     selectedTest,
   };
 }
 
+export const availableSortingOptions: SortOption[] = [
+  {
+    id: "alpha",
+    name: "Alphabetical",
+    callback: (a, b) => a.name.localeCompare(b.name),
+  },
+  {
+    id: "reverse",
+    name: "Reverse Alpha",
+    callback: (a, b) => -a.name.localeCompare(b.name),
+  },
+  {
+    id: "most-passed",
+    name: "Most Passed",
+    callback: (a, b) => b.stats.passed - a.stats.passed,
+  },
+  {
+    id: "least-passed",
+    name: "Least Passed",
+    callback: (a, b) => a.stats.passed - b.stats.passed,
+  },
+  {
+    id: "most-pass-percentage",
+    name: "Most Passed (%)",
+    callback: (a, b) =>
+      b.stats.total -
+      a.stats.total +
+      b.stats.passed / b.stats.total -
+      a.stats.passed / a.stats.total,
+  },
+  {
+    id: "least-pass-percentage",
+    name: "Least Passed (%)",
+    callback: (a, b) =>
+      b.stats.total -
+      a.stats.total +
+      a.stats.passed / a.stats.total -
+      b.stats.passed / b.stats.total,
+  },
+  {
+    id: "most-ignored",
+    name: "Most Ignored",
+    callback: (a, b) => b.stats.ignored - a.stats.ignored,
+  },
+  {
+    id: "least-ignored",
+    name: "Least Ignored",
+    callback: (a, b) => a.stats.ignored - b.stats.ignored,
+  },
+  {
+    id: "most-fail",
+    name: "Most Failed",
+    callback: (a, b) =>
+      b.stats.total -
+      (b.stats.passed + b.stats.ignored) -
+      (a.stats.total - (a.stats.passed + a.stats.ignored)),
+  },
+  {
+    id: "least-fail",
+    name: "Least Failed",
+    callback: (a, b) =>
+      a.stats.total -
+      (a.stats.passed + a.stats.ignored) -
+      (b.stats.total - (b.stats.passed + b.stats.ignored)),
+  },
+  {
+    id: "most-fail-percentage",
+    name: "Most Failed (%)",
+    callback: (a, b) =>
+      b.stats.total -
+      a.stats.total +
+      (b.stats.total - (b.stats.passed + b.stats.ignored)) -
+      (a.stats.total - (a.stats.passed + a.stats.ignored)),
+  },
+  {
+    id: "least-fail-percentage",
+    name: "Least Failed (%)",
+    callback: (a, b) =>
+      b.stats.total -
+      a.stats.total +
+      (a.stats.total - b.stats.total) +
+      a.stats.passed / a.stats.total -
+      b.stats.passed / b.stats.total,
+  },
+];
+
 // Interface for the http response of boa_tester's `ResultInfo`
 interface HttpResultInfo {
   c: string;