diff --git a/.eslintignore b/.eslintignore
index 3811f290c..f6362a2e3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,6 +13,9 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-replied
 
 node_modules
diff --git a/.gitignore b/.gitignore
index 3f5cbc085..c75ffc78b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,9 @@ plugins/*
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-permalink
 !plugins/talk-plugin-featured-comments
+!plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
+!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-replied
 
 **/node_modules/*
diff --git a/plugin-api/beta/client/components/SortOption.css b/plugin-api/beta/client/components/SortOption.css
index f2df56082..d1bbab6c4 100644
--- a/plugin-api/beta/client/components/SortOption.css
+++ b/plugin-api/beta/client/components/SortOption.css
@@ -1,8 +1,12 @@
-.input {
+.label {
+  display: block;
   cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
 }
 
-.label {
+.input {
   cursor: pointer;
-  padding-left: 4px;
+  margin-right: 6px;
 }
diff --git a/plugin-api/beta/client/components/SortOption.js b/plugin-api/beta/client/components/SortOption.js
index 42e1c7ba5..6ea0b14d1 100644
--- a/plugin-api/beta/client/components/SortOption.js
+++ b/plugin-api/beta/client/components/SortOption.js
@@ -4,12 +4,15 @@ import styles from './SortOption.css';
 export default class SortOption extends React.Component {
   render() {
     return (
-      <div className={styles.viewingOption}>
-        <input type="radio" onChange={this.props.setSort} checked={this.props.active} className={styles.input}/>
-        <label className={styles.label} onClick={this.props.setSort}>
-          {this.props.label}
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="radio"
+          onChange={this.props.setSort}
+          checked={this.props.active}
+          className={styles.input}
+        />
+        {this.props.label}
+      </label>
     );
   }
 }
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
new file mode 100644
index 000000000..1a6bda2a6
--- /dev/null
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
@@ -0,0 +1,8 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
index 70876f739..7b59d87d6 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicCheckbox.css';
 
 import {t} from 'plugin-api/beta/client/services';
 
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.css b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.css
new file mode 100644
index 000000000..d31b1a4dd
--- /dev/null
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.css
@@ -0,0 +1,16 @@
+.label {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
+}
+
+.input {
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
index 426dea29a..0ed882e28 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicFilter.css';
 
 export default class OffTopicFilter extends React.Component {
 
@@ -20,12 +20,15 @@ export default class OffTopicFilter extends React.Component {
 
   render() {
     return (
-      <div className={styles.viewingOption}>
-        <label>
-          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
-          Hide Off-Topic Comments
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="checkbox"
+          onChange={this.handleChange}
+          checked={this.props.checked}
+          className={styles.input}
+        />
+        Hide Off-Topic Comments
+      </label>
     );
   }
 }
diff --git a/plugins/talk-plugin-offtopic/client/components/styles.css b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.css
similarity index 50%
rename from plugins/talk-plugin-offtopic/client/components/styles.css
rename to plugins/talk-plugin-offtopic/client/components/OffTopicTag.css
index 22d1f787a..c1cddce8d 100644
--- a/plugins/talk-plugin-offtopic/client/components/styles.css
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.css
@@ -1,12 +1,3 @@
-.offTopic {
-  height: 100%;
-}
-
-.offTopicLabel {
-  padding: 10px 20px;
-  display: block;
-}
-
 .tag {
   background: #D2D7D3;
   font-size: 12px;
@@ -17,10 +8,3 @@
   padding: 5px 5px;
   border-radius: 2px;
 }
-
-.viewingOption {
-}
-
-:global(.talk-plugin-off-topic-comment) {
-  display: none;
-}
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
index 0277072eb..5b8de8875 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
 
diff --git a/plugins/talk-plugin-sort-most-liked/client/.babelrc b/plugins/talk-plugin-sort-most-liked/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-liked/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-sort-most-liked/client/.eslintrc.json b/plugins/talk-plugin-sort-most-liked/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-liked/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-sort-most-liked/client/index.js b/plugins/talk-plugin-sort-most-liked/client/index.js
new file mode 100644
index 000000000..36faf7a88
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-liked/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-liked.label'),
+  {sortBy: 'LIKES', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
diff --git a/plugins/talk-plugin-sort-most-liked/client/translations.yml b/plugins/talk-plugin-sort-most-liked/client/translations.yml
new file mode 100644
index 000000000..836f96474
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-liked/client/translations.yml
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-liked:
+    label: Most liked first
+es:
+  talk-plugin-sort-most-liked:
diff --git a/plugins/talk-plugin-sort-most-liked/index.js b/plugins/talk-plugin-sort-most-liked/index.js
new file mode 100644
index 000000000..7be35b6b6
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-liked/index.js
@@ -0,0 +1,2 @@
+module.exports = {
+};
diff --git a/plugins/talk-plugin-sort-most-replied/client/.babelrc b/plugins/talk-plugin-sort-most-replied/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-replied/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-sort-most-replied/client/.eslintrc.json b/plugins/talk-plugin-sort-most-replied/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-replied/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-sort-most-replied/client/index.js b/plugins/talk-plugin-sort-most-replied/client/index.js
new file mode 100644
index 000000000..52b837410
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-replied/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-replied.label'),
+  {sortBy: 'REPLIES', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
diff --git a/plugins/talk-plugin-sort-most-replied/client/translations.yml b/plugins/talk-plugin-sort-most-replied/client/translations.yml
new file mode 100644
index 000000000..b77043d6d
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-replied/client/translations.yml
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-replied:
+    label: Most replied first
+es:
+  talk-plugin-sort-most-replied:
diff --git a/plugins/talk-plugin-sort-most-replied/index.js b/plugins/talk-plugin-sort-most-replied/index.js
new file mode 100644
index 000000000..7be35b6b6
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-replied/index.js
@@ -0,0 +1,2 @@
+module.exports = {
+};
diff --git a/plugins/talk-plugin-sort-newest/client/.babelrc b/plugins/talk-plugin-sort-newest/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/talk-plugin-sort-newest/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-sort-newest/client/.eslintrc.json b/plugins/talk-plugin-sort-newest/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-sort-newest/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-sort-newest/client/index.js b/plugins/talk-plugin-sort-newest/client/index.js
new file mode 100644
index 000000000..d4979e299
--- /dev/null
+++ b/plugins/talk-plugin-sort-newest/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-newest.label'),
+  {sortBy: 'CREATED_AT', sortOrder: 'DESC'},
+);
+
+/**
+ * talk-plugin-sort-newest depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};
diff --git a/plugins/talk-plugin-sort-newest/client/translations.yml b/plugins/talk-plugin-sort-newest/client/translations.yml
new file mode 100644
index 000000000..fbaed0fe9
--- /dev/null
+++ b/plugins/talk-plugin-sort-newest/client/translations.yml
@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-newest:
+    label: Newest first
+es:
+  talk-plugin-sort-newest:
diff --git a/plugins/talk-plugin-sort-newest/index.js b/plugins/talk-plugin-sort-newest/index.js
new file mode 100644
index 000000000..7be35b6b6
--- /dev/null
+++ b/plugins/talk-plugin-sort-newest/index.js
@@ -0,0 +1,2 @@
+module.exports = {
+};
diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.css b/plugins/talk-plugin-viewing-options/client/components/Category.css
index 758975fce..dbae31bc4 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Category.css
+++ b/plugins/talk-plugin-viewing-options/client/components/Category.css
@@ -1,6 +1,14 @@
+.root {
+  padding-bottom: 12px;
+
+  &:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+
 .title {
   font-weight: bold;
-  padding: 12px 8px 0px 8px;
+  padding: 12px 8px 4px 8px;
 }
 
 .list {
@@ -9,7 +17,6 @@
 }
 
 .listItem {
-  padding: 10px;
   list-style: none;
   white-space: nowrap;
 }
diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.js b/plugins/talk-plugin-viewing-options/client/components/Category.js
index 0ef08b6d0..13beb259a 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Category.js
+++ b/plugins/talk-plugin-viewing-options/client/components/Category.js
@@ -6,7 +6,7 @@ const childFactory = (child) => <li className={styles.listItem} key={child.key}>
 
 const ViewingOptions = ({slot, title}) => {
   return (
-    <IfSlotIsNotEmpty slot={slot}>
+    <IfSlotIsNotEmpty slot={slot} className={styles.root}>
       <div className={styles.title}>{title}</div>
       <Slot fill={slot} childFactory={childFactory} className={styles.list} component={'ul'}/>
     </IfSlotIsNotEmpty>
diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.css b/plugins/talk-plugin-viewing-options/client/components/Menu.css
new file mode 100644
index 000000000..f1f3903a1
--- /dev/null
+++ b/plugins/talk-plugin-viewing-options/client/components/Menu.css
@@ -0,0 +1,11 @@
+.menu {
+  background: white;
+  position: absolute;
+  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  right: 0px;
+  top: 20px;
+  z-index: 10;
+  min-height: 32px;
+  min-width: 64px;
+}
+
diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.js b/plugins/talk-plugin-viewing-options/client/components/Menu.js
new file mode 100644
index 000000000..68afe4b3b
--- /dev/null
+++ b/plugins/talk-plugin-viewing-options/client/components/Menu.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Menu.css';
+import {capitalize} from 'plugin-api/beta/client/utils';
+import Category from './Category';
+import {t} from 'plugin-api/beta/client/services';
+
+class Menu extends React.Component {
+  categories = {
+    sort: t('talk-plugin-viewing-options.sort'),
+    filter: t('talk-plugin-viewing-options.filter'),
+  };
+
+  render() {
+    return (
+      <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
+        {
+          Object.keys(this.categories).map((category) =>
+            <Category
+              key={category}
+              slot={`viewingOptions${capitalize(category)}`}
+              title={this.categories[category]}
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default Menu;
diff --git a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css
index c71094e33..4de6f15f7 100644
--- a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css
+++ b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css
@@ -9,29 +9,7 @@
   cursor: pointer;
 }
 
-.menu {
-  background: white;
-  position: absolute;
-  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 0px;
-  top: 20px;
-  z-index: 10;
-  min-height: 32px;
-  min-width: 64px;
-}
-
-.list > ul, .list > ul > li {
-  padding: 0;
-  margin: 0;
-}
-
-.list > ul > li {
-  padding: 10px;
-  list-style: none;
-  white-space: nowrap;
-}
-
-.icon {
+.arrowIcon {
   font-size: 14px;
   vertical-align: middle;
 }
@@ -39,20 +17,20 @@
 
 @custom-media --small-viewport (max-width: 425px);
 
-.filterText {
+.label {
   display: inline-block;
 }
 
-.filterIcon {
+.icon {
   vertical-align: middle;
   display: none;
 }
 
 @media (--small-viewport) {
-  .filterText {
+  .label {
     display: none;
   }
-  .filterIcon {
+  .icon {
     display: inline-block;
   }
 }
diff --git a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
index a7d6040e1..0d2faf2a4 100644
--- a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
+++ b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
@@ -4,16 +4,10 @@ import styles from './ViewingOptions.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {ClickOutside} from 'plugin-api/beta/client/components';
-import {capitalize} from 'plugin-api/beta/client/utils';
-import Category from './Category';
+import Menu from './Menu';
 
 class ViewingOptions extends React.Component {
 
-  categories = {
-    sort: t('talk-plugin-viewing-options.sort'),
-    filter: t('talk-plugin-viewing-options.filter'),
-  };
-
   toggleOpen = () => {
     const {open, openMenu, closeMenu} = this.props;
     if (!open) {
@@ -37,22 +31,15 @@ class ViewingOptions extends React.Component {
         <div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
           <div>
             <button className={styles.button} onClick={this.toggleOpen}>
-              <Icon className={styles.filterIcon} name="filter_list" />
-              <span className={styles.filterText}>{t('talk-plugin-viewing-options.viewing_options')}</span>
-              {open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
+              <Icon className={styles.icon} name="filter_list" />
+              <span className={styles.label}>{t('talk-plugin-viewing-options.viewing_options')}</span>
+              {open
+                ? <Icon name="arrow_drop_up" className={styles.arrowIcon}/>
+                : <Icon name="arrow_drop_down" className={styles.arrowIcon}/>
+              }
             </button>
           </div>
-          {
-            open ? (
-              <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
-                {
-                  Object.keys(this.categories).map((category) =>
-                    <Category key={category} slot={`viewingOptions${capitalize(category)}`} title={this.categories[category]} />
-                  )
-                }
-              </div>
-            ) : null
-          }
+          {open && <Menu />}
         </div>
       </ClickOutside>
     );
diff --git a/plugins/talk-plugin-viewing-options/client/translations.yml b/plugins/talk-plugin-viewing-options/client/translations.yml
index 8560b79cc..c06bffb9e 100644
--- a/plugins/talk-plugin-viewing-options/client/translations.yml
+++ b/plugins/talk-plugin-viewing-options/client/translations.yml
@@ -1,8 +1,8 @@
 en:
   talk-plugin-viewing-options:
     viewing_options: "Viewing Options"
-    sort: Sort
-    filter: Filter
+    sort: Sorting
+    filter: Filtering
 es:
   talk-plugin-viewing-options:
     viewing_options: "Opciones de visualización"