diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json
index c2ff2b8dc..7d5164f4f 100644
--- a/frontend-react/package-lock.json
+++ b/frontend-react/package-lock.json
@@ -12663,9 +12663,9 @@
       }
     },
     "react-draggable": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.2.0.tgz",
-      "integrity": "sha512-5wFq//gEoeTYprnd4ze8GrFc+Rbnx+9RkOMR3vk4EbWxj02U6L6T3yrlKeiw4X5CtjD2ma2+b3WujghcXNRzkw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.0.tgz",
+      "integrity": "sha512-er6mpn/F/8qLdhGJ21XSzcQl7hTWGsb/af9NaOhSH1M/aivhwf8WHfopmRAF7iRL3x7guLC5TF9HJaouIGHVvw==",
       "requires": {
         "classnames": "^2.2.5",
         "prop-types": "^15.6.0"
diff --git a/frontend-react/package.json b/frontend-react/package.json
index 4c99f5688..c1967e42c 100644
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@@ -32,7 +32,7 @@
     "react-color": "^2.18.0",
     "react-datepicker": "^2.14.1",
     "react-dom": "^16.13.1",
-    "react-draggable": "^4.2.0",
+    "react-draggable": "^4.3.0",
     "react-helmet-async": "^1.0.4",
     "react-hotkeys-hook": "^2.1.1",
     "react-icons": "^3.9.0",
diff --git a/frontend-react/src/components/xtrends/XTrendsPage.tsx b/frontend-react/src/components/xtrends/XTrendsPage.tsx
index cf4a79caa..70865d726 100644
--- a/frontend-react/src/components/xtrends/XTrendsPage.tsx
+++ b/frontend-react/src/components/xtrends/XTrendsPage.tsx
@@ -14,11 +14,14 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverArrow,
+  Badge,
 } from "@chakra-ui/core"
 import WeaponImage from "../common/WeaponImage"
 import MyThemeContext from "../../themeContext"
 import ModeButtons from "./ModeButtons"
 import Select from "../elements/Select"
+import Button from "../elements/Button"
+import { FaChartLine } from "react-icons/fa"
 
 const tiers = [
   {
@@ -69,7 +72,9 @@ const tiers = [
 ] as const
 
 const XTrendsPage: React.FC<RouteComponentProps> = () => {
-  const { grayWithShade, darkerBgColor } = useContext(MyThemeContext)
+  const { grayWithShade, darkerBgColor, themeColor } = useContext(
+    MyThemeContext
+  )
   const { data, error, loading } = useQuery<XTrendsData>(X_TRENDS)
   const [month, setMonth] = useState("March 2020")
   const [mode, setMode] = useState<"SZ" | "TC" | "RM" | "CB">("SZ")
@@ -119,8 +124,6 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
     return weapons.indexOf(a.name) - weapons.indexOf(b.name)
   })
 
-  console.log("weaponMonths", weaponMonths)
-
   return (
     <>
       <PageHeader title="X Trends" />
@@ -149,7 +152,7 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
         <Flex key={tier.criteria}>
           <Flex
             flexDir="column"
-            w="100px"
+            w="80px"
             minH="100px"
             padding="10px"
             borderRight="5px solid"
@@ -188,7 +191,21 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
                   </PopoverTrigger>
                   <PopoverContent zIndex={4} p="0.5em" bg={darkerBgColor}>
                     <PopoverArrow />
-                    {weapon.name} - {weapon.amount}
+                    <Flex
+                      justifyContent="space-evenly"
+                      alignItems="center"
+                      mr="0.5em"
+                    >
+                      <Flex alignItems="center">
+                        <Badge variantColor={themeColor} mr="0.5em">
+                          {weapon.amount}
+                        </Badge>
+                        {weapon.name}{" "}
+                      </Flex>
+                      <Box>
+                        <Button icon={FaChartLine}>Add to chart</Button>
+                      </Box>
+                    </Flex>
                   </PopoverContent>
                 </Popover>
               ))}