diff --git a/client/assets/app.css b/client/assets/app.css
index 975d62f6..068c763a 100644
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -1,4 +1,5 @@
 @import url('./transitions.css');
+@import url('./draggable.css');
 
 .page {
   width: 100%;
diff --git a/client/assets/draggable.css b/client/assets/draggable.css
new file mode 100644
index 00000000..f37683f0
--- /dev/null
+++ b/client/assets/draggable.css
@@ -0,0 +1,38 @@
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+.ghost {
+  opacity: 0.5;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.list-group {
+  min-height: 30px;
+}
+#librariesTable .item {
+  cursor: n-resize;
+}
+.list-group-item:not(.exclude) {
+  cursor: n-resize;
+}
+.list-group-item.exclude {
+  cursor: not-allowed;
+}
+.list-group-item:not(.ghost):not(.exclude):hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.list-group-item:nth-child(even):not(.ghost):not(.exclude) {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.list-group-item.exclude:not(.ghost) {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+.list-group-item.exclude:not(.ghost):hover {
+  background-color: rgba(223, 0, 0, 0.25);
+}
\ No newline at end of file
diff --git a/client/assets/ebooks/basic.js b/client/assets/ebooks/basic.js
new file mode 100644
index 00000000..16be6afd
--- /dev/null
+++ b/client/assets/ebooks/basic.js
@@ -0,0 +1,506 @@
+/*
+Calibres stylesheet
+*/
+
+export default `
+@charset "UTF-8";
+
+/*
+  Calibre styles
+*/
+.arabic {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.attribution {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    margin: 0.3em 0
+    }
+.big {
+    font-size: 1.375em;
+    line-height: 1.2
+    }
+.big1 {
+    font-size: 1em
+    }
+.block {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 2em
+    }
+.block1 {
+    display: block;
+    text-align: justify;
+    margin: 1em 4em
+    }
+.block2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 1em 2em
+    }
+.bullet {
+    display: block;
+    list-style-type: disc;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: disc
+    }
+.calibre {
+    background-color: #000007;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre1 {
+    display: block
+    }
+.calibre2 {
+    height: auto;
+    width: auto
+    }
+.calibre3:not(strong) {
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 5pt
+    }
+.calibre4 {
+    font-weight: bold
+    }
+.calibre5 {
+    font-style: italic
+    }
+.calibre6 {
+    background-color: #FFF;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre7 {
+    display: list-item
+    }
+.calibre8 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre9 {
+    border-collapse: separate;
+    border-spacing: 2px;
+    display: table;
+    margin-bottom: 0;
+    margin-top: 0;
+    text-indent: 0
+    }
+.calibre10 {
+    display: table-row;
+    vertical-align: middle
+    }
+.calibre11 {
+    display: table-cell;
+    text-align: right;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre12 {
+    display: table-cell;
+    text-align: left;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre13 {
+    height: 1em;
+    width: auto
+    }
+.calibre14 {
+    font-size: 0.88889em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre15 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: sub
+    }
+.calibre16 {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em
+    }
+.calibre17 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0.83em 0
+    }
+.center {
+    display: block;
+    text-align: center;
+    margin: 1em 0
+    }
+.center1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: -2em 0 3em
+    }
+.center2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.center3 {
+    display: block;
+    text-align: center;
+    margin: -1em 0 1em
+    }
+.center4 {
+    display: block;
+    text-align: center;
+    text-indent: 3%;
+    margin: 1em 0
+    }
+.chapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.chapter1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-top: 2em
+    }
+.chapter2 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 3em
+    }
+.copyright {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em;
+    text-align: center
+    }
+.dedication {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em
+    }
+.dropcaps {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: -0.05em;
+    padding-top: 1px
+    }
+.dropcaps1 {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: 0.15em;
+    padding-top: 1px
+    }
+.extract {
+    display: block;
+    text-align: justify;
+    margin: 2em 0 0.3em
+    }
+.extract1 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 2em 0 0.3em
+    }
+.extract2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 0 0.3em
+    }
+.footnote {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.footnote1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0 0.3em 2
+    }
+.footnote2 {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.hanging {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1.5em
+    }
+.hanging2 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging3 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+.hanging4 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 0.1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+a.hlink {
+    text-decoration: none
+    }
+.indent {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0
+    }
+.line {
+    border-top: currentColor solid 1px;
+    border-bottom: currentColor solid 1px
+    }
+.loweralpha {
+    display: block;
+    list-style-type: lower-alpha;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none1 {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-right: 0;
+    margin-top: 0;
+    text-align: justify
+    }
+.nonindent {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0
+    }
+.nonindent1 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 0.1em
+    }
+.nonindent2 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em -0.5em
+    }
+.nonindent3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0
+    }
+.part {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 4em 0 1em
+    }
+.preface {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: justify
+    }
+.pubhlink {
+    color: green;
+    text-decoration: none
+    }
+.right {
+    display: block;
+    text-align: right;
+    margin: 0.3em 0
+    }
+.section {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 0.5em
+    }
+.section1 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em
+    }
+.section2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em 1em
+    }
+.small {
+    font-size: 0.66667em
+    }
+.small1 {
+    font-size: 0.75em
+    }
+.subchapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 1em 0
+    }
+.textbox {
+    background-color: #E4E4E4;
+    display: block;
+    line-height: 1.5em;
+    margin-bottom: 2em;
+    margin-top: 2em;
+    text-align: justify;
+    border-top: currentColor double 2px;
+    border-bottom: currentColor double 2px
+    }
+.textbox1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.textbox2 {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0.5em
+    }
+.textbox3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.titlepage {
+    display: block;
+    margin-left: -0.4em;
+    margin-top: 1.2em
+    }
+.toc {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: center
+    }
+.toc1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 0.67em 0 3em
+    }
+.underline {
+    text-decoration: underline
+    }
+`
\ No newline at end of file
diff --git a/client/assets/ebooks/htmlParser.js b/client/assets/ebooks/htmlParser.js
new file mode 100644
index 00000000..21bcc789
--- /dev/null
+++ b/client/assets/ebooks/htmlParser.js
@@ -0,0 +1,248 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
+export const isTitle = (
+  line,
+  isContainDI = false,
+  isContainChapter = false,
+  isContainCHAPTER = false
+) => {
+  return (
+    line.length < 30 &&
+    line.indexOf("[") === -1 &&
+    line.indexOf("(") === -1 &&
+    (line.startsWith("CHAPTER") ||
+      line.startsWith("Chapter") ||
+      line.startsWith("序章") ||
+      line.startsWith("前言") ||
+      line.startsWith("声明") ||
+      line.startsWith("聲明") ||
+      line.startsWith("写在前面的话") ||
+      line.startsWith("后记") ||
+      line.startsWith("楔子") ||
+      line.startsWith("后序") ||
+      line.startsWith("寫在前面的話") ||
+      line.startsWith("後記") ||
+      line.startsWith("後序") ||
+      /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+        line
+      ) ||
+      (line.startsWith("第") && startWithDI(line)) ||
+      (line.startsWith("卷") && startWithJUAN(line)) ||
+      startWithRomanNum(line) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("第") > -1 &&
+        (line[line.indexOf("第") - 1] === " " ||
+          line[line.indexOf("第") - 1] === "　" ||
+          line[line.indexOf("第") - 1] === "、" ||
+          line[line.indexOf("第") - 1] === "：" ||
+          line[line.indexOf("第") - 1] === ":") &&
+        startWithDI(line.substr(line.indexOf("第")))) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(" ") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("　") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("、") &&
+        startWithNumAndPause(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("：") &&
+        startWithNumAndColon(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(":") &&
+        startWithNumAndColon(line)))
+  );
+};
+const startWithDI = (line) => {
+  let keywords = [
+    "章",
+    "节",
+    "回",
+    "節",
+    "卷",
+    "部",
+    "輯",
+    "辑",
+    "話",
+    "集",
+    "话",
+    "篇",
+  ];
+  let flag = false;
+  for (let i = 0; i < keywords.length; i++) {
+    if (
+      (line.indexOf(keywords[i]) > -1 &&
+        (line[line.indexOf(keywords[i]) + 1] === " " ||
+          line[line.indexOf(keywords[i]) + 1] === "　" ||
+          line[line.indexOf(keywords[i]) + 1] === "、" ||
+          line[line.indexOf(keywords[i]) + 1] === "：" ||
+          line[line.indexOf(keywords[i]) + 1] === ":")) ||
+      !line[line.indexOf(keywords[i]) + 1]
+    ) {
+      if (
+        /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+          line.substring(1, line.indexOf(keywords[i])).trim()
+        ) ||
+        /^\d+$/.test(line.substring(1, line.indexOf(keywords[i])).trim())
+      ) {
+        flag = true;
+      }
+      if (flag) break;
+    }
+  }
+  return flag;
+};
+const startWithJUAN = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf(" "))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf(" ")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf("　"))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf("　")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1)
+    ) ||
+    /^\d+$/.test(line.substring(1))
+  )
+    return true;
+  return false;
+};
+const startWithRomanNum = (line) => {
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf("."))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.trim()
+    )
+  )
+    return true;
+  return false;
+};
+const startWithNumAndSpace = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("　"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(" ")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("　")))) return true;
+  return false;
+};
+const startWithNumAndColon = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(":"))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("："))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(":")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("：")))) return true;
+  return false;
+};
+const startWithNumAndPause = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("、"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf("、")))) return true;
+  return false;
+};
+
+
+class HtmlParser {
+  bookDoc;
+  contentList;
+  contentTitleList;
+  constructor(bookDoc) {
+    this.bookDoc = bookDoc;
+    this.contentList = [];
+    this.contentTitleList = [];
+    this.getContent(bookDoc);
+  }
+  getContent(bookDoc) {
+    this.contentList = Array.from(
+      bookDoc.querySelectorAll("h1,h2,h3,h4,h5,b,font")
+    ).filter((item, index) => {
+      return isTitle(item.innerText.trim());
+    });
+
+    for (let i = 0; i < this.contentList.length; i++) {
+      let random = Math.floor(Math.random() * 900000) + 100000;
+      this.contentTitleList.push({
+        label: this.contentList[i].innerText,
+        id: "title" + random,
+        href: "#title" + random,
+        subitems: [],
+      });
+    }
+    for (let i = 0; i < this.contentList.length; i++) {
+      this.contentList[i].id = this.contentTitleList[i].id;
+    }
+  }
+  getAnchoredDoc() {
+    return this.bookDoc;
+  }
+  getContentList() {
+    return this.contentTitleList.filter((item, index) => {
+      if (index > 0) {
+        return item.label !== this.contentTitleList[index - 1].label;
+      } else {
+        return true;
+      }
+    });
+  }
+}
+
+export default HtmlParser;
diff --git a/client/assets/mobi.js b/client/assets/ebooks/mobi.js
similarity index 73%
rename from client/assets/mobi.js
rename to client/assets/ebooks/mobi.js
index fd01a0f9..58c6779e 100644
--- a/client/assets/mobi.js
+++ b/client/assets/ebooks/mobi.js
@@ -1,3 +1,7 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
 function ab2str(buf) {
   if (buf instanceof ArrayBuffer) {
     buf = new Uint8Array(buf);
@@ -8,9 +12,14 @@ function ab2str(buf) {
 var domParser = new DOMParser();
 
 class Buffer {
+  capacity;
+  fragment_list;
+  imageArray;
+  cur_fragment;
   constructor(capacity) {
     this.capacity = capacity;
     this.fragment_list = [];
+    this.imageArray = [];
     this.cur_fragment = new Fragment(capacity);
     this.fragment_list.push(this.cur_fragment);
   }
@@ -57,23 +66,26 @@ class Buffer {
   }
 }
 
-var combine_uint8array = function (buffers) {
+var copagesne_uint8array = function (buffers) {
   var total_size = 0;
-  for (var i = 0; i < buffers.length; i++) {
+  for (let i = 0; i < buffers.length; i++) {
     var buffer = buffers[i];
     total_size += buffer.length;
   }
   var total_buffer = new Uint8Array(total_size);
   var offset = 0;
-  for (var i = 0; i < buffers.length; i++) {
-    var buffer = buffers[i];
+  for (let i = 0; i < buffers.length; i++) {
+    buffer = buffers[i];
     total_buffer.set(buffer, offset);
     offset += buffer.length;
   }
   return total_buffer;
-}
+};
 
 class Fragment {
+  buffer;
+  capacity;
+  size;
   constructor(capacity) {
     this.buffer = new Uint8Array(capacity);
     this.capacity = capacity;
@@ -98,14 +110,14 @@ class Fragment {
 
 var uncompression_lz77 = function (data) {
   var length = data.length;
-  var offset = 0;   // Current offset into data
+  var offset = 0; // Current offset into data
   var buffer = new Buffer(data.length);
 
   while (offset < length) {
     var char = data[offset];
     offset += 1;
 
-    if (char == 0) {
+    if (char === 0) {
       buffer.write(char);
     } else if (char <= 8) {
       for (var i = offset; i < offset + char; i++) {
@@ -117,12 +129,12 @@ var uncompression_lz77 = function (data) {
     } else if (char <= 0xbf) {
       var next = data[offset];
       offset += 1;
-      var distance = ((char << 8 | next) >> 3) & 0x7ff;
+      var distance = (((char << 8) | next) >> 3) & 0x7ff;
       var lz_length = (next & 0x7) + 3;
 
       var buffer_size = buffer.size();
-      for (var i = 0; i < lz_length; i++) {
-        buffer.write(buffer.get(buffer_size - distance))
+      for (let i = 0; i < lz_length; i++) {
+        buffer.write(buffer.get(buffer_size - distance));
         buffer_size += 1;
       }
     } else {
@@ -134,6 +146,13 @@ var uncompression_lz77 = function (data) {
 };
 
 class MobiFile {
+  view;
+  buffer;
+  offset;
+  header;
+  palm_header;
+  mobi_header;
+  reclist;
   constructor(data) {
     this.view = new DataView(data);
     this.buffer = this.view.buffer;
@@ -141,9 +160,7 @@ class MobiFile {
     this.header = null;
   }
 
-  parse() {
-
-  }
+  parse() { }
 
   getUint8() {
     var v = this.view.getUint8(this.offset);
@@ -220,14 +237,14 @@ class MobiFile {
     }
     return [size, l, pos];
   }
-
+  // 读出文本内容
   read_text() {
     var text_end = this.palm_header.record_count;
     var buffers = [];
     for (var i = 1; i <= text_end; i++) {
       buffers.push(this.read_text_record(i));
     }
-    var all = combine_uint8array(buffers)
+    var all = copagesne_uint8array(buffers);
     return ab2str(all);
   }
 
@@ -236,7 +253,7 @@ class MobiFile {
     var begin = this.reclist[i].offset;
     var end = this.reclist[i + 1].offset;
 
-    var data = new Uint8Array(this.buffer.slice(begin, end))
+    var data = new Uint8Array(this.buffer.slice(begin, end));
     var ex = this.get_record_extrasize(data, flags);
 
     data = new Uint8Array(this.buffer.slice(begin, end - ex));
@@ -247,12 +264,12 @@ class MobiFile {
       return data;
     }
   }
-
+  // 从buffer中读出image
   read_image(idx) {
     var first_image_idx = this.mobi_header.first_image_idx;
     var begin = this.reclist[first_image_idx + idx].offset;
     var end = this.reclist[first_image_idx + idx + 1].offset;
-    var data = new Uint8Array(this.buffer.slice(begin, end))
+    var data = new Uint8Array(this.buffer.slice(begin, end));
     return new Blob([data.buffer]);
   }
 
@@ -278,7 +295,6 @@ class MobiFile {
     header.uid = this.getUint32();
     header.next_rec = this.getUint32();
     header.record_num = this.getUint16();
-
     return header;
   }
 
@@ -287,7 +303,7 @@ class MobiFile {
     for (var i = 0; i < this.header.record_num; i++) {
       var record = {};
       record.offset = this.getUint32();
-      // TODO(zz) change 
+      // TODO(zz) change
       record.attr = this.getUint32();
       reclist.push(record);
     }
@@ -361,7 +377,7 @@ class MobiFile {
 
     mobi_header.extra_flags = this.getUint16();
 
-    this.setoffset(start_offset + mobi_header.header_length)
+    this.setoffset(start_offset + mobi_header.header_length);
 
     return mobi_header;
   }
@@ -369,37 +385,66 @@ class MobiFile {
     // TODO
     return {};
   }
-
-  render_to(id) {
-    this.load();
-    var content = this.read_text();
-
-    var bookDom = document.getElementById(id);
-    while (bookDom.firstChild) {
-      bookDom.removeChild(bookDom.firstChild);
-    }
-
-    var bookDoc = domParser.parseFromString(content, "text/html");
-    bookDoc.body.childNodes.forEach(function (x) {
-      if (x instanceof Element) {
-        bookDom.appendChild(x);
+  extractContent(s) {
+    var span = document.createElement("span");
+    span.innerHTML = s;
+    return span.textContent || span.innerText;
+  }
+  render(isElectron = false) {
+    return new Promise((resolve, reject) => {
+      this.load();
+      var content = this.read_text();
+      var bookDoc = domParser.parseFromString(content, "text/html")
+        .documentElement;
+      let lines = Array.from(
+        bookDoc.querySelectorAll("p,b,font,h3,h2,h1")
+      );
+      let parseContent = [];
+      for (let i = 0, len = lines.length; i < len - 1; i++) {
+        lines[i].innerText &&
+          lines[i].innerText !== parseContent[parseContent.length - 1] &&
+          parseContent.push(lines[i].innerText);
+        let imgDoms = lines[i].getElementsByTagName("img");
+        if (imgDoms.length > 0) {
+          for (let i = 0; i < imgDoms.length; i++) {
+            parseContent.push("#image");
+          }
+        }
       }
+      const handleImage = async () => {
+        var imgDoms = bookDoc.getElementsByTagName("img");
+        parseContent.push("~image");
+        for (let i = 0; i < imgDoms.length; i++) {
+          const src = await this.render_image(imgDoms, i);
+          parseContent.push(
+            src + " " + imgDoms[i].width + " " + imgDoms[i].height
+          );
+        }
+        if (imgDoms.length > 200 || !isElectron) {
+          resolve(bookDoc);
+        } else {
+          resolve(parseContent.join("\n    \n"));
+        }
+      };
+      handleImage();
     });
-
-    var imgDoms = bookDom.getElementsByTagName("img");
-    for (var i = 0; i < imgDoms.length; i++) {
-      this.render_image(imgDoms, i);
-    }
-  }
-  render_image(imgDoms, i) {
-    var imgDom = imgDoms[i];
-    var idx = +imgDom.getAttribute("recindex");
-    var blob = this.read_image(idx - 1);
-    var imgReader = new FileReader();
-    imgReader.onload = function (e) {
-      imgDom.src = e.target.result;
-    };
-    imgReader.readAsDataURL(blob);
   }
+  render_image = (imgDoms, i) => {
+    return new Promise((resolve, reject) => {
+      var imgDom = imgDoms[i];
+      var idx = +imgDom.getAttribute("recindex");
+      var blob = this.read_image(idx - 1);
+      var imgReader = new FileReader();
+      imgReader.onload = (e) => {
+        imgDom.src = e.target?.result;
+        resolve(e.target?.result);
+      };
+      imgReader.onerror = function (err) {
+        reject(err);
+      };
+      imgReader.readAsDataURL(blob);
+    });
+  };
 }
-module.exports = MobiFile
\ No newline at end of file
+
+export default MobiFile;
diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index 2d88f72b..4c3874cc 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -7,24 +7,15 @@
           <span class="material-icons text-4xl text-white">arrow_back</span>
         </a>
         <h1 class="text-2xl font-book mr-6">AudioBookshelf</h1>
-        <!-- <div class="-mb-2 mr-6"> -->
-        <!-- <h1 class="text-base font-book leading-3 px-1">AudioBookshelf</h1> -->
 
-        <!-- <div class="bg-black bg-opacity-20 rounded-sm py-1 px-2 flex items-center border border-bg mt-1.5 cursor-pointer" @click="clickLibrary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white text-opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-            </svg>
-
-            <p class="text-sm text-white text-opacity-70 leading-3 font-book pl-2">{{ libraryName }}</p>
-          </div> -->
-        <!-- </div> -->
-        <div class="bg-black bg-opacity-20 rounded-md py-1.5 px-3 flex items-center text-white text-opacity-70 cursor-pointer hover:bg-opacity-10 hover:text-opacity-90" @click="clickLibrary">
+        <!-- <div class="bg-black bg-opacity-20 rounded-md py-1.5 px-3 flex items-center text-white text-opacity-70 cursor-pointer hover:bg-opacity-10 hover:text-opacity-90" @click="clickLibrary">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
           </svg>
 
           <p class="text-sm leading-3 font-sans pl-2">{{ libraryName }}</p>
-        </div>
+        </div> -->
+        <ui-libraries-dropdown />
 
         <controls-global-search />
         <div class="flex-grow" />
diff --git a/client/components/app/Reader.vue b/client/components/app/Reader.vue
index 516400eb..0d091594 100644
--- a/client/components/app/Reader.vue
+++ b/client/components/app/Reader.vue
@@ -12,10 +12,8 @@
       <h1 class="text-2xl mb-1">{{ title || abTitle }}</h1>
       <p v-if="author || abAuthor">by {{ author || abAuthor }}</p>
     </div>
-    <div v-if="!epubEbook && mobiEbook" class="absolute top-4 left-0 w-full flex justify-center">
-      <p class="text-error font-semibold">Warning: Reading mobi & azw3 files is in the very early stages</p>
-    </div>
 
+    <!-- EPUB -->
     <div v-if="epubEbook" class="h-full flex items-center">
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden">
         <span v-show="hasPrev" class="material-icons text-black text-opacity-30 hover:text-opacity-80 cursor-pointer text-8xl" @mousedown.prevent @click="pageLeft">chevron_left</span>
@@ -31,9 +29,10 @@
         <span v-show="hasNext" class="material-icons text-black text-opacity-30 hover:text-opacity-80 cursor-pointer text-8xl" @mousedown.prevent @click="pageRight">chevron_right</span>
       </div>
     </div>
-    <div v-else class="h-full flex items-center justify-center">
-      <div class="w-full max-w-4xl overflow-y-auto border border-black border-opacity-10 p-4" style="max-height: 80vh">
-        <div id="viewer" />
+    <!-- MOBI/AZW3 -->
+    <div v-else class="h-full max-h-full w-full">
+      <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-12 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20">
+        <iframe title="html-viewer" width="100%"> Loading </iframe>
       </div>
     </div>
   </div>
@@ -41,11 +40,14 @@
 
 <script>
 import ePub from 'epubjs'
-import mobijs from '@/assets/mobi.js'
+import MobiParser from '@/assets/ebooks/mobi.js'
+import HtmlParser from '@/assets/ebooks/htmlParser.js'
+import defaultCss from '@/assets/ebooks/basic.js'
 
 export default {
   data() {
     return {
+      scale: 1,
       book: null,
       rendition: null,
       chapters: [],
@@ -115,10 +117,6 @@ export default {
     userToken() {
       return this.$store.getters['user/getToken']
     }
-    // fullUrl() {
-    // var serverUrl = process.env.serverUrl || `/s/book/${this.audiobookId}`
-    // return `${serverUrl}/${this.url}`
-    // }
   },
   methods: {
     changedChapter() {
@@ -165,14 +163,85 @@ export default {
         this.initMobi()
       }
     },
+    addHtmlCss() {
+      let iframe = document.getElementsByTagName('iframe')[0]
+      if (!iframe) return
+      let doc = iframe.contentDocument
+      if (!doc) return
+      let style = doc.createElement('style')
+      style.id = 'default-style'
+      style.textContent = defaultCss
+      doc.head.appendChild(style)
+    },
+    handleIFrameHeight(iFrame) {
+      const isElement = (obj) => !!(obj && obj.nodeType === 1)
+
+      var body = iFrame.contentWindow.document.body,
+        html = iFrame.contentWindow.document.documentElement
+      iFrame.height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) * 2
+
+      setTimeout(() => {
+        let lastchild = body.lastElementChild
+        let lastEle = body.lastChild
+
+        let itemAs = body.querySelectorAll('a')
+        let itemPs = body.querySelectorAll('p')
+        let lastItemA = itemAs[itemAs.length - 1]
+        let lastItemP = itemPs[itemPs.length - 1]
+        let lastItem
+        if (isElement(lastItemA) && isElement(lastItemP)) {
+          if (lastItemA.clientHeight + lastItemA.offsetTop > lastItemP.clientHeight + lastItemP.offsetTop) {
+            lastItem = lastItemA
+          } else {
+            lastItem = lastItemP
+          }
+        }
+
+        if (!lastchild && !lastItem && !lastEle) return
+        if (lastEle.nodeType === 3 && !lastchild && !lastItem) return
+
+        let nodeHeight = 0
+        if (lastEle.nodeType === 3 && document.createRange) {
+          let range = document.createRange()
+          range.selectNodeContents(lastEle)
+          if (range.getBoundingClientRect) {
+            let rect = range.getBoundingClientRect()
+            if (rect) {
+              nodeHeight = rect.bottom - rect.top
+            }
+          }
+        }
+        var lastChildHeight = isElement(lastchild) ? lastchild.clientHeight + lastchild.offsetTop : 0
+        var lastEleHeight = isElement(lastEle) ? lastEle.clientHeight + lastEle.offsetTop : 0
+        var lastItemHeight = isElement(lastItem) ? lastItem.clientHeight + lastItem.offsetTop : 0
+        iFrame.height = Math.max(lastChildHeight, lastEleHeight, lastItemHeight) + 100 + nodeHeight
+      }, 500)
+    },
     async initMobi() {
+      // Fetch mobi file as blob
       var buff = await this.$axios.$get(this.mobiUrl, {
         responseType: 'blob'
       })
       var reader = new FileReader()
-      reader.onload = function (event) {
+      reader.onload = async (event) => {
         var file_content = event.target.result
-        new mobijs(file_content).render_to('viewer')
+
+        let mobiFile = new MobiParser(file_content)
+
+        let content = await mobiFile.render()
+        let htmlParser = new HtmlParser(new DOMParser().parseFromString(content.outerHTML, 'text/html'))
+        var anchoredDoc = htmlParser.getAnchoredDoc()
+
+        let iFrame = document.getElementsByTagName('iframe')[0]
+        iFrame.contentDocument.body.innerHTML = anchoredDoc.documentElement.outerHTML
+
+        // Add css
+        let style = iFrame.contentDocument.createElement('style')
+        style.id = 'default-style'
+        style.textContent = defaultCss
+        iFrame.contentDocument.head.appendChild(style)
+
+        this.handleIFrameHeight(iFrame)
       }
       reader.readAsArrayBuffer(buff)
     },
@@ -248,4 +317,11 @@ export default {
     this.unregisterListeners()
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+/* @import url(@/assets/calibre/basic.css); */
+.ebook-viewer {
+  height: calc(100% - 96px);
+}
+</style>
\ No newline at end of file
diff --git a/client/components/modals/libraries/LibraryItem.vue b/client/components/modals/libraries/LibraryItem.vue
index c6e6d3a8..2933474e 100644
--- a/client/components/modals/libraries/LibraryItem.vue
+++ b/client/components/modals/libraries/LibraryItem.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="w-full px-4 h-12 border border-white border-opacity-10 cursor-pointer flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false" @click="itemClicked">
+  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <svg v-if="!libraryScan" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" :class="mouseover ? 'text-opacity-90' : 'text-opacity-50'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <svg v-if="!libraryScan" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
     </svg>
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>
-    <p class="text-xl font-book pl-4" :class="mouseover ? 'underline' : ''">{{ library.name }}</p>
+    <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
     <div class="flex-grow" />
-    <ui-btn v-show="mouseover && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
-    <span v-show="mouseover && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4" @click.stop="editClick">edit</span>
-    <span v-show="!libraryScan && mouseover && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">delete</span>
-    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50'" @click.stop="deleteClick">
+    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
+    <span v-show="isHovering && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
+    <span v-show="!libraryScan && isHovering && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50 cursor-pointer'" @click.stop="deleteClick">delete</span>
+    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
       <svg viewBox="0 0 24 24" class="w-6 h-6">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
@@ -28,7 +28,8 @@ export default {
       default: () => {}
     },
     selected: Boolean,
-    showEdit: Boolean
+    showEdit: Boolean,
+    dragging: Boolean
   },
   data() {
     return {
@@ -37,6 +38,9 @@ export default {
     }
   },
   computed: {
+    isHovering() {
+      return this.mouseover && !this.dragging
+    },
     isMain() {
       return this.library.id === 'main'
     },
@@ -55,7 +59,7 @@ export default {
   },
   methods: {
     itemClicked() {
-      this.$emit('click', this.library)
+      // this.$emit('click', this.library)
     },
     editClick() {
       this.$emit('edit', this.library)
diff --git a/client/components/tables/LibrariesTable.vue b/client/components/tables/LibrariesTable.vue
index 3d40a1e2..799c5e80 100644
--- a/client/components/tables/LibrariesTable.vue
+++ b/client/components/tables/LibrariesTable.vue
@@ -1,25 +1,42 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
+  <div id="librariesTable" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
       <h1 class="text-xl">Libraries</h1>
       <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
     </div>
-
-    <template v-for="library in libraries">
-      <modals-libraries-library-item :key="library.id" :library="library" :selected="currentLibraryId === library.id" :show-edit="true" @edit="editLibrary" @click="clickLibrary" />
-    </template>
+    <draggable v-model="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
+      <!-- <transition-group type="transition" :name="!drag ? 'flip-list' : null"> -->
+      <template v-for="library in libraryCopies">
+        <modals-libraries-library-item :key="library.id" :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @click="setLibrary" class="item" />
+      </template>
+      <!-- </transition-group> -->
+    </draggable>
     <modals-edit-library-modal v-model="showLibraryModal" :library="selectedLibrary" />
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
+
 export default {
+  components: {
+    draggable
+  },
   data() {
     return {
+      libraryCopies: [],
+      currentOrder: [],
       showLibraryModal: false,
-      selectedLibrary: null
+      selectedLibrary: null,
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      },
+      orderTimeout: null
     }
   },
   computed: {
@@ -30,11 +47,46 @@ export default {
       return this.currentLibrary ? this.currentLibrary.id : null
     },
     libraries() {
-      return this.$store.state.libraries.libraries
+      return this.$store.getters['libraries/getSortedLibraries']()
     }
   },
   methods: {
-    async clickLibrary(library) {
+    startDrag() {
+      this.drag = true
+      clearTimeout(this.orderTimeout)
+    },
+    endDrag() {
+      this.drag = false
+      this.checkOrder()
+      console.log('DRAG END')
+    },
+    checkOrder() {
+      clearTimeout(this.orderTimeout)
+      this.orderTimeout = setTimeout(() => {
+        this.saveOrder()
+      }, 500)
+    },
+    saveOrder() {
+      var _newOrder = 1
+      var currOrder = this.libraries.map((lib) => lib.id).join(',')
+      var libraryOrderData = this.libraryCopies.map((library) => {
+        return {
+          newOrder: _newOrder++,
+          oldOrder: library.displayOrder,
+          id: library.id
+        }
+      })
+      var newOrder = libraryOrderData.map((lib) => lib.id).join(',')
+      if (currOrder !== newOrder) {
+        this.$axios.$patch('/api/libraries/order', libraryOrderData).then((libraries) => {
+          if (libraries && libraries.length) {
+            this.$toast.success('Library order saved', { timeout: 1500 })
+            this.$store.commit('libraries/set', libraries)
+          }
+        })
+      }
+    },
+    async setLibrary(library) {
       await this.$store.dispatch('libraries/fetch', library.id)
       this.$router.push(`/library/${library.id}`)
     },
@@ -46,7 +98,11 @@ export default {
       this.selectedLibrary = library
       this.showLibraryModal = true
     },
-    init() {}
+    init() {
+      this.libraryCopies = this.libraries.map((lib) => {
+        return { ...lib }
+      })
+    }
   },
   mounted() {
     this.init()
diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 742eaeb9..448a4634 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -11,17 +11,43 @@
       <table id="accounts">
         <tr>
           <th>Username</th>
-          <th>Account Type</th>
-          <th style="width: 200px">Created At</th>
-          <th style="width: 100px"></th>
+          <th class="w-20">Type</th>
+          <th>Activity</th>
+          <th class="w-32">Last Seen</th>
+          <th class="w-32">Created</th>
+          <th class="w-32"></th>
         </tr>
         <tr v-for="user in users" :key="user.id" :class="user.isActive ? '' : 'bg-error bg-opacity-20'">
           <td>
-            {{ user.username }} <span class="text-xs text-gray-400 italic pl-4">({{ user.id }})</span>
+            <div class="flex items-center">
+              <span v-if="usersOnline[user.id]" class="w-3 h-3 text-sm mr-2 text-success animate-pulse"
+                ><svg viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg
+              ></span>
+              <svg v-else class="w-3 h-3 mr-2 text-white text-opacity-20" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+              </svg>
+              {{ user.username }} <span v-show="$isDev" class="text-xs text-gray-400 italic pl-4">({{ user.id }})</span>
+            </div>
           </td>
-          <td>{{ user.type }}</td>
-          <td class="text-sm font-mono">
-            {{ new Date(user.createdAt).toISOString() }}
+          <td class="text-sm">{{ user.type }}</td>
+          <td>
+            <div v-if="usersOnline[user.id] && usersOnline[user.id].stream && usersOnline[user.id].stream.audiobook && usersOnline[user.id].stream.audiobook.book">
+              <p class="truncate text-xs">Reading: {{ usersOnline[user.id].stream.audiobook.book.title || '' }}</p>
+            </div>
+            <div v-else-if="user.audiobooks && getLastRead(user.audiobooks)">
+              <p class="truncate text-xs">Last: {{ getLastRead(user.audiobooks) }}</p>
+            </div>
+          </td>
+          <td class="text-xs font-mono">
+            <ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDate(user.lastSeen, 'MMMM do, yyyy HH:mm')">
+              {{ $dateDistanceFromNow(user.lastSeen) }}
+            </ui-tooltip>
+          </td>
+          <td class="text-xs font-mono">
+            <ui-tooltip direction="top" :text="$formatDate(user.createdAt, 'MMMM do, yyyy HH:mm')">
+              {{ $formatDate(user.createdAt, 'MMM d, yyyy') }}
+            </ui-tooltip>
           </td>
           <td>
             <div class="w-full flex justify-center">
@@ -47,8 +73,41 @@ export default {
       isDeletingUser: false
     }
   },
-  computed: {},
+  computed: {
+    currentUserId() {
+      return this.$store.state.user.user.id
+    },
+    userStream() {
+      return this.$store.state.streamAudiobook
+    },
+    usersOnline() {
+      var _users = this.$store.state.users.users
+
+      var currUserStream = null
+      if (this.userStream) {
+        currUserStream = {
+          audiobook: this.userStream
+        }
+      }
+      var usermap = {
+        [this.currentUserId]: {
+          online: true,
+          stream: currUserStream
+        }
+      }
+      _users.forEach((u) => (usermap[u.id] = { online: true, stream: u.stream }))
+      return usermap
+    }
+  },
   methods: {
+    getLastRead(audiobooks) {
+      var abs = Object.values(audiobooks)
+      if (abs.length) {
+        abs = abs.sort((a, b) => a.lastUpdate - b.lastUpdate)
+        return abs[0] && abs[0].audiobookTitle ? abs[0].audiobookTitle : null
+      }
+      return null
+    },
     deleteUserClick(user) {
       if (this.isDeletingUser) return
       if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
diff --git a/client/components/ui/Dropdown.vue b/client/components/ui/Dropdown.vue
index b4eac2a2..0d6d2f08 100644
--- a/client/components/ui/Dropdown.vue
+++ b/client/components/ui/Dropdown.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutside">
     <p class="text-sm text-opacity-75 mb-1">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative h-10 w-full bg-fg border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <button type="button" :disabled="disabled" class="relative h-10 w-full border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100">chevron_down</span>
+        <span class="material-icons text-gray-100">expand_more</span>
       </span>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="item in items">
           <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center">
diff --git a/client/components/ui/LibrariesDropdown.vue b/client/components/ui/LibrariesDropdown.vue
new file mode 100644
index 00000000..e53ce931
--- /dev/null
+++ b/client/components/ui/LibrariesDropdown.vue
@@ -0,0 +1,71 @@
+<template>
+  <div v-if="currentLibrary" class="relative w-36 h-8" v-click-outside="clickOutside">
+    <button type="button" :disabled="disabled" class="relative h-full w-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm pl-3 pr-10 text-left focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+      <span class="flex items-center">
+        <widgets-library-icon :icon="currentLibraryIcon" class="mr-2" />
+        <span class="block truncate text-sm">{{ currentLibrary.name }}</span>
+      </span>
+    </button>
+
+    <transition name="menu">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+        <template v-for="library in libraries">
+          <li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
+            <div class="flex items-center px-3">
+              <widgets-library-icon :icon="currentLibraryIcon" class="mr-2" />
+              <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showMenu: false,
+      disabled: false
+    }
+  },
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    currentLibrary() {
+      return this.libraries.find((lib) => lib.id === this.currentLibraryId)
+    },
+    currentLibraryIcon() {
+      return this.currentLibrary ? this.currentLibrary.icon || 'database' : 'database'
+    },
+    libraries() {
+      return this.$store.getters['libraries/getSortedLibraries']()
+    },
+    libraryItems() {
+      return this.libraries.map((lib) => ({ value: lib.id, text: lib.name }))
+    }
+  },
+  methods: {
+    clickShowMenu() {
+      if (this.disabled) return
+      this.showMenu = !this.showMenu
+    },
+    clickOutside() {
+      this.showMenu = false
+    },
+    selectLibrary(library) {
+      this.updateLibrary(library)
+      this.showMenu = false
+    },
+    async updateLibrary(library) {
+      this.disabled = true
+      await this.$store.dispatch('libraries/fetch', library.id)
+      this.$router.push(`/library/${library.id}`)
+      this.disabled = false
+    }
+  },
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
index c432f20b..33637a65 100644
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <input ref="input" v-model="inputValue" :type="type" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
+    <input ref="input" v-model="inputValue" :type="type" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
diff --git a/client/components/widgets/LibraryIcon.vue b/client/components/widgets/LibraryIcon.vue
new file mode 100644
index 00000000..a37999cb
--- /dev/null
+++ b/client/components/widgets/LibraryIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="h-4 w-4">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 23a1701e..02bbe48d 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -163,6 +163,15 @@ export default {
         this.$store.commit('user/setSettings', user.settings)
       }
     },
+    userOnline(user) {
+      this.$store.commit('users/updateUser', user)
+    },
+    userOffline(user) {
+      this.$store.commit('users/removeUser', user)
+    },
+    userStreamUpdate(user) {
+      this.$store.commit('users/updateUser', user)
+    },
     downloadToastClick(download) {
       if (!download || !download.audiobookId) {
         return console.error('Invalid download object', download)
@@ -268,6 +277,9 @@ export default {
 
       // User Listeners
       this.socket.on('user_updated', this.userUpdated)
+      this.socket.on('user_online', this.userOnline)
+      this.socket.on('user_offline', this.userOffline)
+      this.socket.on('user_stream_update', this.userStreamUpdate)
 
       // Scan Listeners
       this.socket.on('scan_start', this.scanStart)
diff --git a/client/package-lock.json b/client/package-lock.json
index 808bbb7c..c2b50e62 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.3.4",
+  "version": "1.4.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4995,6 +4995,11 @@
         "type": "^1.0.1"
       }
     },
+    "date-fns": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.25.0.tgz",
+      "integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index 43908c9d..b718e503 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,10 +1,11 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {
     "dev": "nuxt",
+    "dev2": "nuxt --hostname localhost --port 1337",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
@@ -15,6 +16,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/proxy": "^2.1.0",
     "core-js": "^3.16.0",
+    "date-fns": "^2.25.0",
     "epubjs": "^0.3.88",
     "hls.js": "^1.0.7",
     "nuxt": "^2.15.7",
diff --git a/client/pages/audiobook/_id/edit.vue b/client/pages/audiobook/_id/edit.vue
index a0fa6da7..976262f2 100644
--- a/client/pages/audiobook/_id/edit.vue
+++ b/client/pages/audiobook/_id/edit.vue
@@ -224,41 +224,3 @@ export default {
   mounted() {}
 }
 </script>
-
-<style>
-.flip-list-move {
-  transition: transform 0.5s;
-}
-.no-move {
-  transition: transform 0s;
-}
-.ghost {
-  opacity: 0.5;
-  background-color: rgba(255, 255, 255, 0.25);
-}
-.list-group {
-  min-height: 30px;
-}
-.list-group-item:not(.exclude) {
-  cursor: n-resize;
-}
-.list-group-item.exclude {
-  cursor: not-allowed;
-}
-.list-group-item:not(.ghost):not(.exclude):hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.list-group-item:nth-child(even):not(.ghost):not(.exclude) {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-.list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.list-group-item.exclude:not(.ghost) {
-  background-color: rgba(255, 0, 0, 0.25);
-}
-.list-group-item.exclude:not(.ghost):hover {
-  background-color: rgba(223, 0, 0, 0.25);
-}
-</style>
\ No newline at end of file
diff --git a/client/pages/audiobook/_id/index.vue b/client/pages/audiobook/_id/index.vue
index c1753fd5..822e0225 100644
--- a/client/pages/audiobook/_id/index.vue
+++ b/client/pages/audiobook/_id/index.vue
@@ -22,7 +22,7 @@
                 by <nuxt-link v-if="author" :to="`/library/${libraryId}/bookshelf?filter=authors.${$encode(author)}`" class="hover:underline">{{ author }}</nuxt-link
                 ><span v-else>Unknown</span>
               </p>
-              <nuxt-link v-if="series" :to="`/library/${libraryId}/bookshelf?filter=series.${$encode(series)}`" class="hover:underline font-sans text-gray-300 text-lg leading-7 mb-4"> {{ seriesText }}</nuxt-link>
+              <nuxt-link v-if="series" :to="`/library/${libraryId}/bookshelf/series?series=${$encode(series)}`" class="hover:underline font-sans text-gray-300 text-lg leading-7 mb-4"> {{ seriesText }}</nuxt-link>
 
               <!-- <div class="w-min">
                 <ui-tooltip :text="authorTooltipText" direction="bottom">
diff --git a/client/plugins/init.client.js b/client/plugins/init.client.js
index 9d27100d..bc3df5cb 100644
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { formatDistance, format } from 'date-fns'
+
 Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
 
+Vue.prototype.$dateDistanceFromNow = (unixms) => {
+  if (!unixms) return ''
+  return formatDistance(unixms, Date.now(), { addSuffix: true })
+}
+Vue.prototype.$formatDate = (unixms, fnsFormat = 'MM/dd/yyyy HH:mm') => {
+  if (!unixms) return ''
+  return format(unixms, fnsFormat)
+}
+
 Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return '0 Bytes'
diff --git a/client/store/libraries.js b/client/store/libraries.js
index 94ca093c..84d5c56f 100644
--- a/client/store/libraries.js
+++ b/client/store/libraries.js
@@ -11,6 +11,9 @@ export const state = () => ({
 export const getters = {
   getCurrentLibrary: state => {
     return state.libraries.find(lib => lib.id === state.currentLibraryId)
+  },
+  getSortedLibraries: state => () => {
+    return state.libraries.map(lib => ({ ...lib })).sort((a, b) => a.displayOrder - b.displayOrder)
   }
 }
 
diff --git a/client/store/users.js b/client/store/users.js
new file mode 100644
index 00000000..fc08486c
--- /dev/null
+++ b/client/store/users.js
@@ -0,0 +1,26 @@
+
+export const state = () => ({
+  users: []
+})
+
+export const getters = {
+
+}
+
+export const actions = {
+
+}
+
+export const mutations = {
+  updateUser(state, user) {
+    var index = state.users.findIndex(u => u.id === user.id)
+    if (index >= 0) {
+      state.users.splice(index, 1, user)
+    } else {
+      state.users.push(user)
+    }
+  },
+  removeUser(state, user) {
+    state.users = state.users.filter(u => u.id !== user.id)
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 90a6060a..ea3b24e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {
diff --git a/server/ApiController.js b/server/ApiController.js
index 1e429595..9b74cbf0 100644
--- a/server/ApiController.js
+++ b/server/ApiController.js
@@ -30,6 +30,7 @@ class ApiController {
     this.router.get('/find/:method', this.find.bind(this))
 
     this.router.get('/libraries', this.getLibraries.bind(this))
+    this.router.patch('/libraries/order', this.reorderLibraries.bind(this))
     this.router.get('/library/:id/search', this.searchLibrary.bind(this))
     this.router.get('/library/:id', this.getLibrary.bind(this))
     this.router.delete('/library/:id', this.deleteLibrary.bind(this))
@@ -98,6 +99,36 @@ class ApiController {
     res.json(libraries)
   }
 
+  async reorderLibraries(req, res) {
+    if (!req.user || !req.user.isRoot) {
+      Logger.error('[ApiController] ReorderLibraries invalid user', req.user)
+      return res.sendStatus(401)
+    }
+
+    var orderdata = req.body
+    var hasUpdates = false
+    for (let i = 0; i < orderdata.length; i++) {
+      var library = this.db.libraries.find(lib => lib.id === orderdata[i].id)
+      if (!library) {
+        Logger.error(`[ApiController] Invalid library not found in reorder ${orderdata[i].id}`)
+        return res.sendStatus(500)
+      }
+      if (library.update({ displayOrder: orderdata[i].newOrder })) {
+        hasUpdates = true
+        await this.db.updateEntity('library', library)
+      }
+    }
+
+    if (hasUpdates) {
+      Logger.info(`[ApiController] Updated library display orders`)
+    } else {
+      Logger.info(`[ApiController] Library orders were up to date`)
+    }
+
+    var libraries = this.db.libraries.map(lib => lib.toJSON())
+    res.json(libraries)
+  }
+
   searchLibrary(req, res) {
     var library = this.db.libraries.find(lib => lib.id === req.params.id)
     if (!library) {
@@ -226,6 +257,7 @@ class ApiController {
     }
 
     var library = new Library()
+    newLibraryPayload.displayOrder = this.db.libraries.length + 1
     library.setData(newLibraryPayload)
     await this.db.insertEntity('library', library)
     this.emitter('library_added', library.toJSON())
diff --git a/server/Server.js b/server/Server.js
index 9f5bc2ae..9772241f 100644
--- a/server/Server.js
+++ b/server/Server.js
@@ -92,6 +92,10 @@ class Server {
     })
   }
 
+  authMiddleware(req, res, next) {
+    this.auth.authMiddleware(req, res, next)
+  }
+
   async init() {
     Logger.info('[Server] Init v' + version)
     await this.streamManager.ensureStreamsDir()
@@ -270,6 +274,8 @@ class Server {
           Logger.info('[SOCKET] Unauth socket disconnected ' + socket.id)
           delete this.clients[socket.id]
         } else {
+          socket.broadcast.emit('user_offline', _client.user.toJSONForPublic(this.streamManager.streams))
+
           const disconnectTime = Date.now() - _client.connected_at
           Logger.info(`[SOCKET] Socket ${socket.id} disconnected from client "${_client.user.username}" after ${disconnectTime}ms`)
           delete this.clients[socket.id]
@@ -341,10 +347,6 @@ class Server {
     return purged
   }
 
-  authMiddleware(req, res, next) {
-    this.auth.authMiddleware(req, res, next)
-  }
-
   async handleUpload(req, res) {
     if (!req.user.canUpload) {
       Logger.warn('User attempted to upload without permission', req.user)
@@ -460,6 +462,11 @@ class Server {
       }
     }
 
+    socket.broadcast.emit('user_online', client.user.toJSONForPublic(this.streamManager.streams))
+
+    user.lastSeen = Date.now()
+    await this.db.updateEntity('user', user)
+
     const initialPayload = {
       serverSettings: this.serverSettings.toJSON(),
       audiobookPath: this.AudiobookPath,
diff --git a/server/StreamManager.js b/server/StreamManager.js
index a915e373..fef8bac5 100644
--- a/server/StreamManager.js
+++ b/server/StreamManager.js
@@ -111,6 +111,8 @@ class StreamManager {
 
     var stream = await this.openStream(client, audiobook)
     this.db.updateUserStream(client.user.id, stream.id)
+
+    socket.broadcast.emit('user_stream_update', client.user.toJSONForPublic(this.streams))
   }
 
   async closeStreamRequest(socket) {
@@ -126,6 +128,8 @@ class StreamManager {
     client.user.stream = null
     client.stream = null
     this.db.updateUserStream(client.user.id, null)
+
+    socket.broadcast.emit('user_stream_update', client.user.toJSONForPublic(this.streams))
   }
 
   async openTestStream(StreamsPath, audiobookId) {
diff --git a/server/objects/AudiobookProgress.js b/server/objects/AudiobookProgress.js
index 283552c4..c7923a26 100644
--- a/server/objects/AudiobookProgress.js
+++ b/server/objects/AudiobookProgress.js
@@ -1,6 +1,7 @@
 class AudiobookProgress {
   constructor(progress) {
     this.audiobookId = null
+    this.audiobookTitle = null
     this.totalDuration = null // seconds
     this.progress = null // 0 to 1
     this.currentTime = null // seconds
@@ -17,6 +18,7 @@ class AudiobookProgress {
   toJSON() {
     return {
       audiobookId: this.audiobookId,
+      audiobookTitle: this.audiobookTitle,
       totalDuration: this.totalDuration,
       progress: this.progress,
       currentTime: this.currentTime,
@@ -29,6 +31,7 @@ class AudiobookProgress {
 
   construct(progress) {
     this.audiobookId = progress.audiobookId
+    this.audiobookTitle = progress.audiobookTitle || null
     this.totalDuration = progress.totalDuration
     this.progress = progress.progress
     this.currentTime = progress.currentTime
@@ -40,6 +43,7 @@ class AudiobookProgress {
 
   updateFromStream(stream) {
     this.audiobookId = stream.audiobookId
+    this.audiobookTitle = stream.audiobookTitle
     this.totalDuration = stream.totalDuration
     this.progress = stream.clientProgress
     this.currentTime = stream.clientCurrentTime
diff --git a/server/objects/Library.js b/server/objects/Library.js
index 38a62a95..e14dfa5a 100644
--- a/server/objects/Library.js
+++ b/server/objects/Library.js
@@ -5,6 +5,7 @@ class Library {
     this.id = null
     this.name = null
     this.folders = []
+    this.displayOrder = 1
     this.icon = 'database'
 
     this.lastScan = 0
@@ -25,6 +26,7 @@ class Library {
     this.id = library.id
     this.name = library.name
     this.folders = (library.folders || []).map(f => new Folder(f))
+    this.displayOrder = library.displayOrder || 1
     this.icon = library.icon || 'database'
 
     this.createdAt = library.createdAt
@@ -36,6 +38,7 @@ class Library {
       id: this.id,
       name: this.name,
       folders: (this.folders || []).map(f => f.toJSON()),
+      displayOrder: this.displayOrder,
       icon: this.icon,
       createdAt: this.createdAt,
       lastUpdate: this.lastUpdate
@@ -59,6 +62,7 @@ class Library {
         return newFolder
       })
     }
+    this.displayOrder = data.displayOrder || 1
     this.icon = data.icon || 'database'
     this.createdAt = Date.now()
     this.lastUpdate = Date.now()
@@ -70,6 +74,10 @@ class Library {
       this.name = payload.name
       hasUpdates = true
     }
+    if (!isNaN(payload.displayOrder) && payload.displayOrder !== this.displayOrder) {
+      this.displayOrder = Number(payload.displayOrder)
+      hasUpdates = true
+    }
     if (payload.folders) {
       var newFolders = payload.folders.filter(f => !f.id)
       var removedFolders = this.folders.filter(f => !payload.folders.find(_f => _f.id === f.id))
diff --git a/server/objects/User.js b/server/objects/User.js
index 0a41d24e..0a5044cd 100644
--- a/server/objects/User.js
+++ b/server/objects/User.js
@@ -10,6 +10,7 @@ class User {
     this.token = null
     this.isActive = true
     this.isLocked = false
+    this.lastSeen = null
     this.createdAt = null
     this.audiobooks = null
 
@@ -78,6 +79,7 @@ class User {
       audiobooks: this.audiobooksToJSON(),
       isActive: this.isActive,
       isLocked: this.isLocked,
+      lastSeen: this.lastSeen,
       createdAt: this.createdAt,
       settings: this.settings,
       permissions: this.permissions
@@ -94,12 +96,25 @@ class User {
       audiobooks: this.audiobooksToJSON(),
       isActive: this.isActive,
       isLocked: this.isLocked,
+      lastSeen: this.lastSeen,
       createdAt: this.createdAt,
       settings: this.settings,
       permissions: this.permissions
     }
   }
 
+  toJSONForPublic(streams) {
+    var stream = this.stream && streams ? streams.find(s => s.id === this.stream) : null
+    return {
+      id: this.id,
+      username: this.username,
+      type: this.type,
+      stream: stream ? stream.toJSON() : null,
+      lastSeen: this.lastSeen,
+      createdAt: this.createdAt
+    }
+  }
+
   construct(user) {
     this.id = user.id
     this.username = user.username
@@ -117,6 +132,7 @@ class User {
     }
     this.isActive = (user.isActive === undefined || user.type === 'root') ? true : !!user.isActive
     this.isLocked = user.type === 'root' ? false : !!user.isLocked
+    this.lastSeen = user.lastSeen || null
     this.createdAt = user.createdAt || Date.now()
     this.settings = user.settings || this.getDefaultUserSettings()
     this.permissions = user.permissions || this.getDefaultUserPermissions()
diff --git a/server/utils/mobi.js b/server/utils/mobi.js
deleted file mode 100644
index 73626c0b..00000000
--- a/server/utils/mobi.js
+++ /dev/null
@@ -1,404 +0,0 @@
-function ab2str(buf) {
-  if (buf instanceof ArrayBuffer) {
-    buf = new Uint8Array(buf);
-  }
-  return new TextDecoder("utf-8").decode(buf);
-}
-
-var domParser = new DOMParser();
-
-class Buffer {
-  constructor(capacity) {
-    this.capacity = capacity;
-    this.fragment_list = [];
-    this.cur_fragment = new Fragment(capacity);
-    this.fragment_list.push(this.cur_fragment);
-  }
-  write(byte) {
-    var result = this.cur_fragment.write(byte);
-    if (!result) {
-      this.cur_fragment = new Fragment(this.capacity);
-      this.fragment_list.push(this.cur_fragment);
-      this.cur_fragment.write(byte);
-    }
-  }
-  get(idx) {
-    var fi = 0;
-    while (fi < this.fragment_list.length) {
-      var frag = this.fragment_list[fi];
-      if (idx < frag.size) {
-        return frag.get(idx);
-      }
-      idx -= frag.size;
-      fi += 1;
-    }
-    return null;
-  }
-  size() {
-    var s = 0;
-    for (var i = 0; i < this.fragment_list.length; i++) {
-      s += this.fragment_list[i].size;
-    }
-    return s;
-  }
-  shrink() {
-    var total_buffer = new Uint8Array(this.size());
-    var offset = 0;
-    for (var i = 0; i < this.fragment_list.length; i++) {
-      var frag = this.fragment_list[i];
-      if (frag.full()) {
-        total_buffer.set(frag.buffer, offset);
-      } else {
-        total_buffer.set(frag.buffer.slice(0, frag.size), offset);
-      }
-      offset += frag.size;
-    }
-    return total_buffer;
-  }
-}
-
-var combine_uint8array = function (buffers) {
-  var total_size = 0;
-  for (var i = 0; i < buffers.length; i++) {
-    var buffer = buffers[i];
-    total_size += buffer.length;
-  }
-  var total_buffer = new Uint8Array(total_size);
-  var offset = 0;
-  for (var i = 0; i < buffers.length; i++) {
-    var buffer = buffers[i];
-    total_buffer.set(buffer, offset);
-    offset += buffer.length;
-  }
-  return total_buffer;
-}
-
-class Fragment {
-  constructor(capacity) {
-    this.buffer = new Uint8Array(capacity);
-    this.capacity = capacity;
-    this.size = 0;
-  }
-
-  write(byte) {
-    if (this.size >= this.capacity) {
-      return false;
-    }
-    this.buffer[this.size] = byte;
-    this.size += 1;
-    return true;
-  }
-  full() {
-    return this.size === this.capacity;
-  }
-  get(idx) {
-    return this.buffer[idx];
-  }
-}
-
-var uncompression_lz77 = function (data) {
-  var length = data.length;
-  var offset = 0;   // Current offset into data
-  var buffer = new Buffer(data.length);
-
-  while (offset < length) {
-    var char = data[offset];
-    offset += 1;
-
-    if (char == 0) {
-      buffer.write(char);
-    } else if (char <= 8) {
-      for (var i = offset; i < offset + char; i++) {
-        buffer.write(data[i]);
-      }
-      offset += char;
-    } else if (char <= 0x7f) {
-      buffer.write(char);
-    } else if (char <= 0xbf) {
-      var next = data[offset];
-      offset += 1;
-      var distance = ((char << 8 | next) >> 3) & 0x7ff;
-      var lz_length = (next & 0x7) + 3;
-
-      var buffer_size = buffer.size();
-      for (var i = 0; i < lz_length; i++) {
-        buffer.write(buffer.get(buffer_size - distance))
-        buffer_size += 1;
-      }
-    } else {
-      buffer.write(32);
-      buffer.write(char ^ 0x80);
-    }
-  }
-  return buffer;
-};
-
-class MobiFile {
-  constructor(data) {
-    this.view = new DataView(data);
-    this.buffer = this.view.buffer;
-    this.offset = 0;
-    this.header = null;
-  }
-
-  parse() {
-
-  }
-
-  getUint8() {
-    var v = this.view.getUint8(this.offset);
-    this.offset += 1;
-    return v;
-  }
-
-  getUint16() {
-    var v = this.view.getUint16(this.offset);
-    this.offset += 2;
-    return v;
-  }
-
-  getUint32() {
-    var v = this.view.getUint32(this.offset);
-    this.offset += 4;
-    return v;
-  }
-
-  getStr(size) {
-    var v = ab2str(this.buffer.slice(this.offset, this.offset + size));
-    this.offset += size;
-    return v;
-  }
-
-  skip(size) {
-    this.offset += size;
-  }
-
-  setoffset(_of) {
-    this.offset = _of;
-  }
-
-  get_record_extrasize(data, flags) {
-    var pos = data.length - 1;
-    var extra = 0;
-    for (var i = 15; i > 0; i--) {
-      if (flags & (1 << i)) {
-        var res = this.buffer_get_varlen(data, pos);
-        var size = res[0];
-        var l = res[1];
-        pos = res[2];
-        pos -= size - l;
-        extra += size;
-      }
-    }
-    if (flags & 1) {
-      var a = data[pos];
-      extra += (a & 0x3) + 1;
-    }
-    return extra;
-  }
-
-  // data should be uint8array
-  buffer_get_varlen(data, pos) {
-    var l = 0;
-    var size = 0;
-    var byte_count = 0;
-    var mask = 0x7f;
-    var stop_flag = 0x80;
-    var shift = 0;
-    for (var i = 0; ; i++) {
-      var byte = data[pos];
-      size |= (byte & mask) << shift;
-      shift += 7;
-      l += 1;
-      byte_count += 1;
-      pos -= 1;
-
-      var to_stop = byte & stop_flag;
-      if (byte_count >= 4 || to_stop > 0) {
-        break;
-      }
-    }
-    return [size, l, pos];
-  }
-
-  read_text() {
-    var text_end = this.palm_header.record_count;
-    var buffers = [];
-    for (var i = 1; i <= text_end; i++) {
-      buffers.push(this.read_text_record(i));
-    }
-    var all = combine_uint8array(buffers)
-    return ab2str(all);
-  }
-
-  read_text_record(i) {
-    var flags = this.mobi_header.extra_flags;
-    var begin = this.reclist[i].offset;
-    var end = this.reclist[i + 1].offset;
-
-    var data = new Uint8Array(this.buffer.slice(begin, end))
-    var ex = this.get_record_extrasize(data, flags);
-
-    data = new Uint8Array(this.buffer.slice(begin, end - ex));
-    if (this.palm_header.compression === 2) {
-      var buffer = uncompression_lz77(data);
-      return buffer.shrink();
-    } else {
-      return data;
-    }
-  }
-
-  read_image(idx) {
-    var first_image_idx = this.mobi_header.first_image_idx;
-    var begin = this.reclist[first_image_idx + idx].offset;
-    var end = this.reclist[first_image_idx + idx + 1].offset;
-    var data = new Uint8Array(this.buffer.slice(begin, end))
-    return new Blob([data.buffer]);
-  }
-
-  load() {
-    this.header = this.load_pdbheader();
-    this.reclist = this.load_reclist();
-    this.load_record0();
-  }
-
-  load_pdbheader() {
-    var header = {};
-    header.name = this.getStr(32);
-    header.attr = this.getUint16();
-    header.version = this.getUint16();
-    header.ctime = this.getUint32();
-    header.mtime = this.getUint32();
-    header.btime = this.getUint32();
-    header.mod_num = this.getUint32();
-    header.appinfo_offset = this.getUint32();
-    header.sortinfo_offset = this.getUint32();
-    header.type = this.getStr(4);
-    header.creator = this.getStr(4);
-    header.uid = this.getUint32();
-    header.next_rec = this.getUint32();
-    header.record_num = this.getUint16();
-
-    return header;
-  }
-
-  load_reclist() {
-    var reclist = [];
-    for (var i = 0; i < this.header.record_num; i++) {
-      var record = {};
-      record.offset = this.getUint32();
-      // TODO(zz) change 
-      record.attr = this.getUint32();
-      reclist.push(record);
-    }
-    return reclist;
-  }
-  load_record0() {
-    this.palm_header = this.load_record0_header();
-    this.mobi_header = this.load_mobi_header();
-  }
-
-  load_record0_header() {
-    var p_header = {};
-    var first_record = this.reclist[0];
-    this.setoffset(first_record.offset);
-
-    p_header.compression = this.getUint16();
-    this.skip(2);
-    p_header.text_length = this.getUint32();
-    p_header.record_count = this.getUint16();
-    p_header.record_size = this.getUint16();
-    p_header.encryption_type = this.getUint16();
-    this.skip(2);
-
-    return p_header;
-  }
-
-  load_mobi_header() {
-    var mobi_header = {};
-
-    var start_offset = this.offset;
-
-    mobi_header.identifier = this.getUint32();
-    mobi_header.header_length = this.getUint32();
-    mobi_header.mobi_type = this.getUint32();
-    mobi_header.text_encoding = this.getUint32();
-    mobi_header.uid = this.getUint32();
-    mobi_header.generator_version = this.getUint32();
-
-    this.skip(40);
-
-    mobi_header.first_nonbook_index = this.getUint32();
-    mobi_header.full_name_offset = this.getUint32();
-    mobi_header.full_name_length = this.getUint32();
-
-    mobi_header.language = this.getUint32();
-    mobi_header.input_language = this.getUint32();
-    mobi_header.output_language = this.getUint32();
-    mobi_header.min_version = this.getUint32();
-    mobi_header.first_image_idx = this.getUint32();
-
-    mobi_header.huff_rec_index = this.getUint32();
-    mobi_header.huff_rec_count = this.getUint32();
-    mobi_header.datp_rec_index = this.getUint32();
-    mobi_header.datp_rec_count = this.getUint32();
-
-    mobi_header.exth_flags = this.getUint32();
-
-    this.skip(36);
-
-    mobi_header.drm_offset = this.getUint32();
-    mobi_header.drm_count = this.getUint32();
-    mobi_header.drm_size = this.getUint32();
-    mobi_header.drm_flags = this.getUint32();
-
-    this.skip(8);
-
-    // TODO (zz) fdst_index
-    this.skip(4);
-
-    this.skip(46);
-
-    mobi_header.extra_flags = this.getUint16();
-
-    this.setoffset(start_offset + mobi_header.header_length)
-
-    return mobi_header;
-  }
-  load_exth_header() {
-    // TODO
-    return {};
-  }
-
-  render_to(id) {
-    this.load();
-    var content = this.read_text();
-
-    var bookDom = document.getElementById(id);
-    while (bookDom.firstChild) {
-      bookDom.removeChild(bookDom.firstChild);
-    }
-
-    var bookDoc = domParser.parseFromString(content, "text/html");
-    bookDoc.body.childNodes.forEach(function (x) {
-      if (x instanceof Element) {
-        bookDom.appendChild(x);
-      }
-    });
-
-    var imgDoms = bookDom.getElementsByTagName("img");
-    for (var i = 0; i < imgDoms.length; i++) {
-      this.render_image(imgDoms, i);
-    }
-  }
-  render_image(imgDoms, i) {
-    var imgDom = imgDoms[i];
-    var idx = +imgDom.getAttribute("recindex");
-    var blob = this.read_image(idx - 1);
-    var imgReader = new FileReader();
-    imgReader.onload = function (e) {
-      imgDom.src = e.target.result;
-    };
-    imgReader.readAsDataURL(blob);
-  }
-}
\ No newline at end of file