diff --git a/assets/plus.svg b/assets/plus.svg
new file mode 100755
index 00000000..db65f636
--- /dev/null
+++ b/assets/plus.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3478 7.04348C11.1317 7.04348 10.9565 6.86829 10.9565 6.65217V1.95652C10.9565 0.875969 10.0805 0 8.99998 0C7.91942 0 7.04345 0.875969 7.04345 1.95652V6.65217C7.04345 6.86829 6.86826 7.04348 6.65214 7.04348H1.95653C0.875971 7.04348 0 7.91945 0 9C0 10.0806 0.875971 10.9565 1.95653 10.9565H6.65214C6.86826 10.9565 7.04345 11.1317 7.04345 11.3478V16.0435C7.04345 17.124 7.91942 18 8.99998 18C10.0805 18 10.9565 17.124 10.9565 16.0435V11.3478C10.9565 11.1317 11.1317 10.9565 11.3478 10.9565H16.0435C17.124 10.9565 18 10.0806 18 9C18 7.91945 17.124 7.04348 16.0435 7.04348H11.3478Z" />
+</svg>
\ No newline at end of file
diff --git a/src/WeaponGrid/WeaponGrid.css b/src/WeaponGrid/WeaponGrid.css
new file mode 100644
index 00000000..dd717937
--- /dev/null
+++ b/src/WeaponGrid/WeaponGrid.css
@@ -0,0 +1,22 @@
+.WeaponGrid {
+    display: flex;
+    margin-top: 48px;
+    justify-content: center;
+}
+
+.grid-weapons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 528px;
+}
+
+.grid-weapons > * {
+    margin-bottom: 72px;
+    margin-right: 24px;
+
+}
+
+.grid-weapons > *:nth-child(3n+3) {
+    margin-right: 0;
+}
\ No newline at end of file
diff --git a/src/WeaponGrid/WeaponGrid.tsx b/src/WeaponGrid/WeaponGrid.tsx
new file mode 100644
index 00000000..460bf034
--- /dev/null
+++ b/src/WeaponGrid/WeaponGrid.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import './WeaponGrid.css'
+
+import WeaponGridMainhand from '../WeaponGridMainhand/WeaponGridMainhand'
+import WeaponGridUnit from '../WeaponGridUnit/WeaponGridUnit'
+
+const WeaponGrid = () => (
+    <div className="WeaponGrid">
+        <WeaponGridMainhand />
+
+        <div className="grid-weapons">
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+        </div>
+    </div>
+)
+
+export default WeaponGrid
\ No newline at end of file
diff --git a/src/WeaponGridMainhand/WeaponGridMainhand.css b/src/WeaponGridMainhand/WeaponGridMainhand.css
new file mode 100644
index 00000000..49380e25
--- /dev/null
+++ b/src/WeaponGridMainhand/WeaponGridMainhand.css
@@ -0,0 +1,25 @@
+.WeaponGridMainhand {
+    align-items: center;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    display: flex;
+    height: 432px;
+    justify-content: center;
+    margin-right: 24px;
+    transition: all 0.18s ease-in-out;
+    width: 205px;
+}
+
+.WeaponGridMainhand:hover {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+    cursor: pointer;
+    transform: scale(1.05, 1.05);
+}
+
+.WeaponGridMainhand .icon {
+    color: #c9c9c9;
+    height: 20px;
+    width: 20px;
+}
\ No newline at end of file
diff --git a/src/WeaponGridMainhand/WeaponGridMainhand.tsx b/src/WeaponGridMainhand/WeaponGridMainhand.tsx
new file mode 100644
index 00000000..d79dd8b7
--- /dev/null
+++ b/src/WeaponGridMainhand/WeaponGridMainhand.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import './WeaponGridMainhand.css'
+
+import Plus from '../../assets/plus.svg'
+
+const WeaponGridUnit = () => (
+    <div className="WeaponGridMainhand">
+        <span className='icon'><Plus /></span>
+    </div>
+)
+
+export default WeaponGridUnit
\ No newline at end of file
diff --git a/src/WeaponGridUnit/WeaponGridUnit.css b/src/WeaponGridUnit/WeaponGridUnit.css
new file mode 100644
index 00000000..ce0ac131
--- /dev/null
+++ b/src/WeaponGridUnit/WeaponGridUnit.css
@@ -0,0 +1,24 @@
+.WeaponGridUnit {
+    align-items: center;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    display: flex;
+    height: 92px;
+    justify-content: center;
+    transition: all 0.18s ease-in-out;
+    width: 160px;
+}
+
+.WeaponGridUnit:hover {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+    cursor: pointer;
+    transform: scale(1.1, 1.1);
+}
+
+.WeaponGridUnit .icon {
+    color: #c9c9c9;
+    height: 20px;
+    width: 20px;
+}
\ No newline at end of file
diff --git a/src/WeaponGridUnit/WeaponGridUnit.tsx b/src/WeaponGridUnit/WeaponGridUnit.tsx
new file mode 100644
index 00000000..bca7cf52
--- /dev/null
+++ b/src/WeaponGridUnit/WeaponGridUnit.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import './WeaponGridUnit.css'
+
+import Plus from '../../assets/plus.svg'
+
+const WeaponGridUnit = () => (
+    <div className="WeaponGridUnit">
+        <span className='icon'><Plus /></span>
+    </div>
+)
+
+export default WeaponGridUnit
\ No newline at end of file
diff --git a/src/routes/New/New.tsx b/src/routes/New/New.tsx
index bc644659..64296130 100644
--- a/src/routes/New/New.tsx
+++ b/src/routes/New/New.tsx
@@ -4,6 +4,7 @@ import WeaponGrid from '../../WeaponGrid/WeaponGrid'
 const New = () => (
     <div>
         <h1>New party</h1>
+        <WeaponGrid />
     </div>
 )