diff --git a/src/components/WeaponGrid/WeaponGrid.css b/src/components/WeaponGrid/WeaponGrid.css
index dd717937..ee4d4d22 100644
--- a/src/components/WeaponGrid/WeaponGrid.css
+++ b/src/components/WeaponGrid/WeaponGrid.css
@@ -1,6 +1,6 @@
 .WeaponGrid {
     display: flex;
-    margin-top: 48px;
+    margin-top: 96px;
     justify-content: center;
 }
 
diff --git a/src/components/WeaponGrid/WeaponGrid.tsx b/src/components/WeaponGrid/WeaponGrid.tsx
index 460bf034..b9d6037d 100644
--- a/src/components/WeaponGrid/WeaponGrid.tsx
+++ b/src/components/WeaponGrid/WeaponGrid.tsx
@@ -4,22 +4,25 @@ import './WeaponGrid.css'
 import WeaponGridMainhand from '../WeaponGridMainhand/WeaponGridMainhand'
 import WeaponGridUnit from '../WeaponGridUnit/WeaponGridUnit'
 
-const WeaponGrid = () => (
-    <div className="WeaponGrid">
-        <WeaponGridMainhand />
+class WeaponGrid extends React.Component {
+    render() {
+        const numWeapons = 9
+        let weapons = []
 
-        <div className="grid-weapons">
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-            <WeaponGridUnit />
-        </div>
-    </div>
-)
+        Array.from(Array(numWeapons)).forEach((x, i) => {
+            weapons.push(<WeaponGridUnit key={`grid_unit_${i}`} />)
+        })
+
+        return (
+            <div className="WeaponGrid">
+                <WeaponGridMainhand key="grid_mainhand" />
+
+                <div className="grid-weapons">
+                    {weapons}
+                </div>
+            </div>
+        )
+    }
+}
 
 export default WeaponGrid
\ No newline at end of file