diff --git a/public/assets/placeholders/chestplate.png b/public/assets/placeholders/chestplate.png
new file mode 100644
index 0000000..b6cbfb5
Binary files /dev/null and b/public/assets/placeholders/chestplate.png differ
diff --git a/src/components/utilities/inventory/Inventory.vue b/src/components/utilities/inventory/Inventory.vue
new file mode 100644
index 0000000..c62edb1
--- /dev/null
+++ b/src/components/utilities/inventory/Inventory.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="absolute z-50 w-full h-dvh top-0 left-0 backdrop-blur-sm">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[900px] w-[60%] h-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
+            <div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
+                <h3 class="m-0 font-medium shrink-0">Inventory</h3>
+                <div class="flex gap-2.5">
+                    <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+                        <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+                    </button>
+                </div>
+            </div>
+            <div class="grow flex flex-col">
+                <div class="w-full h-[60%] relative">
+                    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+                </div>
+                <div class="w-full h-[40%] flex relative">
+                    <div class="w-1/2 h-full">
+                        <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 mr-8">
+                            <div class="flex gap-2">
+                                <h3>Armor piece name</h3>
+                                <span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
+                            </div>
+                            <div class="flex justify-between items-center grow">
+                                <img src="/assets/placeholders/chestplate.png" class="max-w-40"/>
+                                <ul class="p-0 m-0 list-none">
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Health:</span>
+                                        <span>+15</span>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Defense:</span>
+                                        <span>500</span>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Stats:</span>
+                                        <span></span>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>More stats:</span>
+                                        <span></span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200"></div>
+                    <div class="w-1/2 h-full">
+                        <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 ml-8">
+                            <h3>Character stats</h3>
+                            <div class="flex justify-between items-center grow">
+                                <ul class="p-0 m-0 list-none">
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Health:</span>
+                                        <p class="m-0">100 <span class="text-green">+15</span></p>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Defense:</span>
+                                        <p class="m-0">1000 <span class="text-green">+500</span></p>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>Stats:</span>
+                                        <p class="m-0"></p>
+                                    </li>
+                                    <li class="flex gap-8 justify-between">
+                                        <span>More stats:</span>
+                                        <p class="m-0"></p>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index bd5bdd2..613e314 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -9,6 +9,7 @@
           <div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
             <Hud />
           </div>
+          <Inventory />
           <World v-if="isLoaded" :key="gameStore.character?.zoneId" />
           <div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
             <Chat />
@@ -43,6 +44,7 @@ import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/utilities/GmTools.vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/utilities/GmPanel.vue'
+import Inventory from '@/components/utilities/inventory/Inventory.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
diff --git a/tailwind.config.js b/tailwind.config.js
index 72efae5..e4676ff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,9 @@ export default {
         green: {
           DEFAULT: '#09ad19'
         },
+        purple: {
+          DEFAULT: '#9841e6'
+        },
         cyan: {
           DEFAULT: '#368f8b',
           50: '#00b3b3',