diff --git a/package.json b/package.json
index 9ac4890465..61b2a27acc 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@types/streamsaver": "^2.0.0",
     "await-lock": "^2.1.0",
     "blueimp-canvas-to-blob": "^3.28.0",
     "browser-encrypt-attachment": "^0.3.0",
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index a6398e05fd..a8df3180b8 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -1,4 +1,3 @@
-
 import streamSaver from "streamsaver";
 import JSZip from "jszip";
 import { decryptFile } from "../DecryptFile";
@@ -237,16 +236,18 @@ div.mx_selected {
 
 
 const userColors = [
-    "#64bf47",
-    "#4f9cd9",
-    "#9884e8",
-    "#fb6238",
-    "#00cdac",
-    "#ff5eaa",
+    "#368bd6",
+    "#ac3ba8",
+    "#03b381",
+    "#e64f7a",
+    "#ff812d",
+    "#2dc2c5",
+    "#5c56f5",
+    "#74d12c",
 ];
 
 //Get a color associated with string length. This is to map userId to a specific color
-const getUserColor = (userId: string) => {
+const getUserNameColorClass = (userId: string) => {
     return userColors[userId.length % userColors.length];
 };
 
@@ -256,7 +257,10 @@ const getUserPic = async (event: MatrixEvent) => {
     if (!member.getMxcAvatarUrl()) {
         return `
         <div class="mx_pull_left mx_userpic_wrap">
-            <div class="mx_userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+            <div 
+                class="mx_userpic" 
+                style="width: 42px;height: 42px;background-color: ${getUserNameColorClass(member.userId)}"
+            >
                 <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
                     ${event.sender.name[0]}
                 </div>
@@ -369,7 +373,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
                 ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
             </div>
        ${!joined ? `
-            <div class="mx_from_name" style="color:${getUserColor(event.sender.name)}">
+            <div class="mx_from_name" style="color:${getUserNameColorClass(event.sender.name)}">
                 ${event.sender.name}
             </div>`: ``}
         ${isReply ?
@@ -414,7 +418,7 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
 };
 
 const avatars = new Map();
-let zip: any;
+let zip: JSZip;
 
 const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
     zip = new JSZip();
@@ -432,7 +436,7 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
     const blob = await zip.generateAsync({ type: "blob" });
 
     //Create a writable stream to the directory
-    const fileStream = streamSaver.createWriteStream(filename, blob.size);
+    const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
     const writer = fileStream.getWriter();
 
     // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.ts
similarity index 76%
rename from src/utils/exportUtils/exportUtils.js
rename to src/utils/exportUtils/exportUtils.ts
index c73fd90a5a..b5356ca1e5 100644
--- a/src/utils/exportUtils/exportUtils.js
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,19 +1,20 @@
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { arrayFastClone } from "../arrays";
 import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import Room from 'matrix-js-sdk/src/models/room';
 import exportAsHTML from "./HtmlExport";
 
-export const exportFormats = Object.freeze({
-    "HTML": "HTML",
-    "JSON": "JSON",
-    "LOGS": "LOGS",
-});
+export enum exportFormats {
+    HTML = "HTML",
+    JSON = "JSON",
+    LOGS = "LOGS",
+}
 
-export const exportOptions = Object.freeze({
-    "TIMELINE": "TIMELINE",
-});
+export enum exportOptions {
+    TIMELINE = "TIMELINE",
+}
 
-const getTimelineConversation = (room) => {
+const getTimelineConversation = (room: Room) => {
     if (!room) return;
 
     const cli = MatrixClientPeg.get();
@@ -35,12 +36,11 @@ const getTimelineConversation = (room) => {
             cli.decryptEventIfNeeded(event);
         });
 
-    console.log(events);
     return events;
 };
 
 
-const exportConversationalHistory = async (room, format, options) => {
+const exportConversationalHistory = async (room: Room, format: string, options) => {
     const res = getTimelineConversation(room);
     switch (format) {
         case exportFormats.HTML:
diff --git a/yarn.lock b/yarn.lock
index 438cc94f27..982b9e607b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1655,6 +1655,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/streamsaver@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.0.tgz#2a6bdec0389f41a74c60091d37e84f8840d27ac9"
+  integrity sha512-TzUEZk30QmNaS6GAhcOnH/Cl2mO7HCFhQUr6GpzvuoFziFCxmvuyLftHW79agJpZvIrqti9jSiDHMgflUwbejg==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"