diff --git a/react-ystemandchess/src/AppRoutes.js b/react-ystemandchess/src/AppRoutes.js
index 019fcee4..501fb515 100644
--- a/react-ystemandchess/src/AppRoutes.js
+++ b/react-ystemandchess/src/AppRoutes.js
@@ -14,7 +14,7 @@ import SponsorsPartners from "./Pages/About-Us/SponsorsPartners/SponsorsPartners
 import Board from "./Pages/About-Us/Board/Board";
 import Mentor from "./Pages/Mentor/Mentor";
 import Financial from "./Pages/About-Us/Financial/Financial";
-import StudentInventory from "./Pages/Student-Inventory/StudentInventory"
+import StudentInventory from "./Pages/Student-Inventory/StudentInventory";
 
 // Variables and Mutable Data
 import userPortraitImg from "./images/user-portrait-placeholder.svg"
diff --git a/react-ystemandchess/src/components/badges/Badges.jsx b/react-ystemandchess/src/components/badges/Badges.jsx
new file mode 100644
index 00000000..38c7fe82
--- /dev/null
+++ b/react-ystemandchess/src/components/badges/Badges.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import './Badges.scss';
+import Images from '../../images/imageImporter'
+
+const BadgeKnight = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeKnight} alt="YSC Knight Badge" />
+        </div>
+    )
+}
+const BadgeKing = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeKing} alt="YSC King Badge" />
+        </div>
+    )
+}
+const BadgeQueen = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeQueen} alt="YSC Queen Badge" />
+        </div>
+    )
+}
+const BadgeRook = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeRook} alt="YSC Rook Badge" />
+        </div>
+    )
+}
+const BadgePawn = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgePawn} alt="YSC Pawn Badge" />
+        </div>
+    )
+}
+const BadgeBishop = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.BadgeBishop} alt="YSC Bishop Badge" />
+        </div>
+    )
+}
+
+export default Badges = {
+    BadgeKnight,
+    BadgeKing,
+    BadgeQueen,
+    BadgeRook,
+    BadgePawn,
+    BadgeBishop
+} 
\ No newline at end of file
diff --git a/react-ystemandchess/src/components/badges/Badges.scss b/react-ystemandchess/src/components/badges/Badges.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/react-ystemandchess/src/images/badges/badge-bishop.png b/react-ystemandchess/src/images/badges/badge-bishop.png
new file mode 100644
index 00000000..01f83eb8
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-bishop.png differ
diff --git a/react-ystemandchess/src/images/badges/badge-king.png b/react-ystemandchess/src/images/badges/badge-king.png
new file mode 100644
index 00000000..8f59f43a
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-king.png differ
diff --git a/react-ystemandchess/src/images/badges/badge-knight.png b/react-ystemandchess/src/images/badges/badge-knight.png
new file mode 100644
index 00000000..e953cd0f
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-knight.png differ
diff --git a/react-ystemandchess/src/images/badges/badge-pawn.png b/react-ystemandchess/src/images/badges/badge-pawn.png
new file mode 100644
index 00000000..3213f60b
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-pawn.png differ
diff --git a/react-ystemandchess/src/images/badges/badge-queen.png b/react-ystemandchess/src/images/badges/badge-queen.png
new file mode 100644
index 00000000..b3e9d0fa
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-queen.png differ
diff --git a/react-ystemandchess/src/images/badges/badge-rook.png b/react-ystemandchess/src/images/badges/badge-rook.png
new file mode 100644
index 00000000..1685adf5
Binary files /dev/null and b/react-ystemandchess/src/images/badges/badge-rook.png differ
diff --git a/react-ystemandchess/src/images/imageImporter.jsx b/react-ystemandchess/src/images/imageImporter.jsx
index 500b261b..c4c916e9 100644
--- a/react-ystemandchess/src/images/imageImporter.jsx
+++ b/react-ystemandchess/src/images/imageImporter.jsx
@@ -24,10 +24,18 @@ import playComputerIcon from "./StudentInventoryIcons/play-computer-icon.svg"
 import recordingsIcon from "./StudentInventoryIcons/recordings-icon.svg"
 import backpackIcon from "./StudentInventoryIcons/backpack-icon.svg"
 
-// Chess Benefit Page
-import mathComputerImg from "./mathArticle/computer.png";
+// Chess Benefits Page
+import mathComputerImg from "./mathArticle/computer.png"
 import mathChampImg from "./mathArticle/Junechamp 2.png"
 
+// Badges
+import badgeKnight from "./badges/badge-knight.png";
+import badgeQueen from "./badges/badge-knight.png";
+import badgeRook from "./badges/badge-knight.png";
+import badgeKing from "./badges/badge-knight.png";
+import badgePawn from "./badges/badge-knight.png";
+import badgeBishop from "./badges/badge-knight.png";
+
 // Global image object. Don't forget to place images here.
 const images = {
     // Home
@@ -55,6 +63,13 @@ const images = {
     playComputerIcon,
     recordingsIcon,
     backpackIcon,
+    // Badges
+    badgeKnight,
+    badgeQueen,
+    badgeRook,
+    badgeKing,
+    badgePawn,
+    badgeBishop
 };
 
 export default images;