diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
index 7ef214ec33..a93abece43 100644
--- a/src/components/Badge/Badge.module.css
+++ b/src/components/Badge/Badge.module.css
@@ -93,8 +93,8 @@
 .new_badges {
   display: flex;
   flex-wrap: wrap;
-  overflow-y: auto;
-  height: 70px;
+  overflow-y: scroll;
+  height: 120px;
 }
 
 .old_badges {
diff --git a/src/components/Badge/BadgeHistory.jsx b/src/components/Badge/BadgeHistory.jsx
index dd8012ce5f..314813e8f5 100644
--- a/src/components/Badge/BadgeHistory.jsx
+++ b/src/components/Badge/BadgeHistory.jsx
@@ -1,5 +1,6 @@
 import BadgeImage from './BadgeImage';
 import { WEEK_DIFF } from '../../constants/badge';
+import styles from './Badge.module.css';
 
 function BadgeHistory({ badges, personalBestMaxHrs }) {
   const filterBadges = allBadges => {
@@ -31,7 +32,7 @@ function BadgeHistory({ badges, personalBestMaxHrs }) {
   const filteredBadges = filterBadges(badges);
 
   return (
-    <div className="badge_history_container">
+    <div className={styles.badge_history_container}>
       {filteredBadges.map((value, index) =>
         value && value.badge ? (
           <BadgeImage
diff --git a/src/components/Badge/NewBadges.jsx b/src/components/Badge/NewBadges.jsx
index 41a0f8b166..40480d1cca 100644
--- a/src/components/Badge/NewBadges.jsx
+++ b/src/components/Badge/NewBadges.jsx
@@ -1,7 +1,7 @@
 import { Card, CardTitle, CardBody, UncontrolledTooltip } from 'reactstrap';
 import BadgeImage from './BadgeImage';
 import { WEEK_DIFF } from '../../constants/badge';
-import './Badge.module.css';
+import styles from './Badge.module.css';
 
 function NewBadges(props) {
   const filterBadges = allBadges => {
@@ -50,7 +50,8 @@ function NewBadges(props) {
           >
             New Badges Earned <i className="fa fa-info-circle" id="NewBadgeInfo" />
           </CardTitle>
-          <div className={`new_badges ${props.darkMode ? 'text-light' : ''}`}>
+
+          <div className={`${styles.new_badges} ${props.darkMode ? 'text-light' : ''}`}>
             {filteredBadges.length === 0 ? (
               <strong
                 style={{ opacity: 0.7 }}
@@ -76,6 +77,7 @@ function NewBadges(props) {
           </div>
         </CardBody>
       </Card>
+
       <UncontrolledTooltip
         placement="right"
         target="NewBadgeInfo"
diff --git a/src/components/UserProfile/Badge.module.css b/src/components/UserProfile/Badge.module.css
index bfc9caba5d..1b952d772d 100644
--- a/src/components/UserProfile/Badge.module.css
+++ b/src/components/UserProfile/Badge.module.css
@@ -84,7 +84,10 @@
 }
 
 .old_badges {
-  height: 220px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  height: 70px;
 }
 
 .badge_featured_container {