diff --git a/code/__HELPERS/_lists.dm b/code/__HELPERS/_lists.dm
index ba29205452..719735392d 100644
--- a/code/__HELPERS/_lists.dm
+++ b/code/__HELPERS/_lists.dm
@@ -69,7 +69,7 @@
 /proc/english_list(list/input, nothing_text = "nothing", and_text = " and ", comma_text = ", ", final_comma_text = "" )
 	var/total = input.len
 	if (!total)
-		return "[nothing_text]"
+		return nothing_text
 	else if (total == 1)
 		return "[input[1]]"
 	else if (total == 2)
diff --git a/code/datums/skills/_check_skills.dm b/code/datums/skills/_check_skills.dm
index 30f105ab4b..dc33166581 100644
--- a/code/datums/skills/_check_skills.dm
+++ b/code/datums/skills/_check_skills.dm
@@ -28,6 +28,15 @@
 	. = list()
 	var/datum/asset/spritesheet/simple/assets = get_asset_datum(/datum/asset/spritesheet/simple/skills)
 
+	var/all_mods = list()
+	for(var/id in all_current_skill_modifiers)
+		var/datum/skill_modifier/M = GLOB.skill_modifiers[id]
+		all_mods[id] = list(
+			name = M.name,
+			desc = M.desc,
+			icon = assets.icon_class_name(M.icon)
+		)
+
 	.["categories"] = list()
 	var/list/current
 	var/category
@@ -42,12 +51,15 @@
 
 		var/skill_value = owner.get_skill_value(path, FALSE)
 		var/skill_level = owner.get_skill_level(path, FALSE)
+		var/list/mod_list = list()
+		var/list/modifiers
 		var/list/mod_ids = list()
 
 		var/value_mods = LAZYACCESS(skill_value_mods, path)
 		var/mod_value = skill_value
 		for(var/k in value_mods)
 			var/datum/skill_modifier/M = GLOB.skill_modifiers[k]
+			mod_list |= M.name
 			mod_ids |= M.identifier
 			mod_value = M.apply_modifier(mod_value, path, src, MODIFIER_TARGET_VALUE)
 
@@ -55,16 +67,24 @@
 		var/mod_level = skill_level
 		for(var/k in lvl_mods)
 			var/datum/skill_modifier/M = GLOB.skill_modifiers[k]
+			mod_list |= M.name
 			mod_ids |= M.identifier
 			mod_level = M.apply_modifier(mod_level, path, src, MODIFIER_TARGET_LEVEL)
 		mod_level = SANITIZE_SKILL_LEVEL(S.type, round(mod_level, 1))
 
+		for(var/k in mod_ids)
+			var/list/mod = all_current_skill_modifiers[k]
+			if(mod)
+				LAZYADD(modifiers, list(mod))
+
 		var/list/data = list(
 			name = S.name,
+			desc = S.desc,
 			color = S.name_color,
 			skill_base = S.standard_render_value(skill_value, skill_level),
 			skill_mod = S.standard_render_value(mod_value, mod_level),
-			mod_ids = mod_ids
+			mods_tooltip = english_list(mod_list, null),
+			modifiers = modifiers
 		)
 		current += list(data)
 
@@ -72,17 +92,6 @@
 		var/list/cat = list("name" = category, "skills" = current)
 		.["categories"] += list(cat)
 
-
-	var/all_mods = list()
-	for(var/id in all_current_skill_modifiers)
-		var/datum/skill_modifier/M = GLOB.skill_modifiers[id]
-		all_mods[id] = list(
-			name = M.name,
-			desc = M.desc,
-			icon = assets.icon_class_name(M.icon)
-		)
-	.["modifiers"] = all_mods
-
 /datum/skill_holder/ui_data(mob/user)
 	. = list()
 	.["see_skill_mods"] = see_skill_mods
diff --git a/tgui-next/packages/tgui/interfaces/Skills.js b/tgui-next/packages/tgui/interfaces/Skills.js
index 548d5ebee3..462990811d 100644
--- a/tgui-next/packages/tgui/interfaces/Skills.js
+++ b/tgui-next/packages/tgui/interfaces/Skills.js
@@ -1,120 +1,93 @@
 import { decodeHtmlEntities } from 'common/string';
 import { Component, Fragment } from 'inferno';
 import { act } from '../byond';
-import { Box, Button, Input, Section, Table, Tabs } from '../components';
+import { Box, Button, Section, Table, Tabs } from '../components';
 
-// It's a class because we need to store state in the form of
-// the current hovered item
-export class Uplink extends Component {
-  constructor() {
-    super();
-    this.state = {
-      hoveredItem: {},
-    };
-  }
-
-  setHoveredItem(hoveredItem) {
-    this.setState({
-      hoveredItem,
-    });
-  }
-
-  render() {
-    const { state } = this.props;
-    const { config, data } = state;
-    const { ref } = config;
-    const {
-      see_skill_mods,
-      compact_mode,
-      categories = [],
-    } = data;
-    return (
-      <Section
-        title={(
-          <Box
-            inline
-            color={telecrystals > 0 ? 'good' : 'bad'}>
-            {telecrystals} TC
-          </Box>
-        )}
-        buttons={(
-            <Button
-              icon={see_skill_mods ? 'check-square-o' : 'square-o'}
-              content='Show modifiers'}
-              onClick={() => act(ref, 'toggle_mods')} />
-            <Button
-              icon={compact_mode ? 'list' : 'info'}
-              content={compact_mode ? 'Compact' : 'Detailed'}
-              onClick={() => act(ref, 'compact_toggle')} />
-            )}
-          </Fragment>
-        )}>
-        {(
-          <Tabs vertical>
-            {categories.map(category => {
-              const { name, skills } = category;
-              if (name != selected_category) {
-                return;
-              }
-              return (
-                <Tabs.Tab
-                  key={name}
-                  label={`${name} (${skills.length})`}>
+export const Skills = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  const {
+    name,
+    compact_mode,
+    selected_category,
+    categories = [],
+  } = props;
+  return (
+    <Section
+      buttons={(
+          <Button
+            icon={see_skill_mods ? 'check-square-o' : 'square-o'}
+            content='Show modifiers'}
+            onClick={() => act(ref, 'toggle_mods')} />
+          <Button
+            icon={compact_mode ? 'list' : 'info'}
+            content={compact_mode ? 'Compact' : 'Detailed'}
+            onClick={() => act(ref, 'compact_toggle')} />
+          )}
+        </Fragment>
+      )}>
+      {(
+        <Tabs vertical>
+          {categories.map(category => {
+            const { name, skills } = category;
+            return (
+              <Tabs.Tab
+                key={name}
+                label={`${name} (${skills.length})`}>
+				if (name != selected_category) {
                   {() => (
                     <skillList
                       compact={compact_mode}
                       skills={skills}
-                      hoveredItem={hoveredItem}
-                      onBuyMouseOver={skill => this.setHoveredItem(skill)}
-                      onBuyMouseOut={skill => this.setHoveredItem({})}
-                      onBuy={skill => act(ref, 'buy', {
-                        skill: skill.name,
-                      })} />
+					  see_mods={see_skill_mods}
+                    />
                   )}
-                </Tabs.Tab>
-              );
-            })}
-          </Tabs>
-        )}
-      </Section>
-    );
-  }
+				}
+              </Tabs.Tab>
+            );
+          })}
+        </Tabs>
+      )}
+    </Section>
+  );
 }
 
 const skillList = props => {
   const {
-    skills,
-    hoveredItem,
     compact,
-    onBuy,
-    onBuyMouseOver,
-    onBuyMouseOut,
+    skills,
+	see_mods
   } = props;
-  const hoveredCost = hoveredItem && hoveredItem.cost || 0;
   if (compact) {
     return (
       <Table>
-        {items.map(item => {
-          const notSameItem = hoveredItem && hoveredItem.name !== item.name;
-          const notEnoughHovered = telecrystals - hoveredCost < item.cost;
-          const disabledDueToHovered = notSameItem && notEnoughHovered;
+        {skills.map(skill => {
           return (
             <Table.Row
-              key={item.name}
+              key={skill.name}
               className="candystripe">
               <Table.Cell bold>
-                {decodeHtmlEntities(item.name)}
+                <Box color=skill.color>
+                  {decodeHtmlEntities(skill.name)}
+                </Box>
               </Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 <Button
                   fluid
-                  content={item.cost + " TC"}
-                  disabled={telecrystals < item.cost || disabledDueToHovered}
-                  tooltip={item.desc}
+                  content={see_mods
+                    ? skill.skill_base
+                    : skill.skill_mod
+                  }
+                  tooltip={skill.mods_tooltip
+                    ? (skill.desc
+                      + "\nModifiers: "
+                      + skill.mods_tooltip
+                    )
+                    : skill.desc
+                  }
                   tooltipPosition="left"
-                  onmouseover={() => onBuyMouseOver(item)}
-                  onmouseout={() => onBuyMouseOut(item)}
-                  onClick={() => onBuy(item)} />
+                />
               </Table.Cell>
             </Table.Row>
           );
@@ -122,24 +95,32 @@ const skillList = props => {
       </Table>
     );
   }
-  return items.map(item => {
-    const notSameItem = hoveredItem && hoveredItem.name !== item.name;
-    const notEnoughHovered = telecrystals - hoveredCost < item.cost;
-    const disabledDueToHovered = notSameItem && notEnoughHovered;
+  return skills.map(skill => {
     return (
       <Section
-        key={item.name}
-        title={item.name}
+        key={skill.name}
+        title={skill.name}
         level={2}
         buttons={(
           <Button
-            content={item.cost + ' TC'}
-            disabled={telecrystals < item.cost || disabledDueToHovered}
-            onmouseover={() => onBuyMouseOver(item)}
-            onmouseout={() => onBuyMouseOut(item)}
-            onClick={() => onBuy(item)} />
+            content={see_mods
+              ? skill.skill_base
+              : skill.skill_mod
+            }
+          />
         )}>
-        {decodeHtmlEntities(item.desc)}
+        {decodeHtmlEntities(skill.desc)}
+        modifiers:
+        {skill.modifiers.map(modifier => {
+          <Button
+            textAlign="center"
+            color="transparent"
+            tooltip={
+              "<b>"+modifier.name+"</b>\n"+modifier.desc
+            }
+            <Box className={modifier.icon_class} />
+          />
+        })}
       </Section>
     );
   });