diff --git a/public/assets/placeholders/wall-1.png b/public/assets/placeholders/wall-1.png
new file mode 100644
index 0000000..0b4f525
Binary files /dev/null and b/public/assets/placeholders/wall-1.png differ
diff --git a/src/components/utilities/AssetManager/AssetManager.vue b/src/components/utilities/AssetManager/AssetManager.vue
index 5e35f87..06a1c0b 100644
--- a/src/components/utilities/AssetManager/AssetManager.vue
+++ b/src/components/utilities/AssetManager/AssetManager.vue
@@ -1,10 +1,72 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="800" :modal-height="560">
+  <Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
     <template #modalHeader>
       <h3 class="modal-title">Asset manager</h3>
     </template>
     <template #modalBody>
+      <div class="assets-container">
+        <div class="asset-categories">
+          <!-- TODO: Asset categories, replace with loop -->
+          <a class="category">
+            <span class="category-name">Tiles</span>
+          </a>
+          <!-- Example selected category -->
+          <a class="category selected">
+            <span class="category-name">Walls</span>
+          </a>
+          <a class="category">
+            <span class="category-name">Weapons</span>
+          </a>
+          <a class="category">
+            <span class="category-name">NPC's</span>
+          </a>
+        </div>
 
+        <!-- TODO: Show content based on selected category, replace with loop -->
+        <div class="assets tiles">
+          
+        </div>
+        <!-- Example selected category & asset -->
+        <div class="assets walls active">
+          <a class="asset selected">
+            <span class="asset-name">Wall #1</span>
+          </a>
+        </div>
+        <div class="assets weapons">
+          
+        </div>
+        <div class="assets npcs">
+
+        </div>
+
+        <div class="asset-info">
+          <div class="image-container">
+            <img src="/assets/placeholders/wall-1.png"/>
+          </div>
+          <div class="modal-form asset-manager">
+            <form class="form-fields">
+              <div class="form-field name">
+                <label for="name">Name</label>
+                <input class="input-cyan" type="text" name="name" placeholder="Wall #1">
+              </div>
+
+              <div class="form-field">
+                <label for="originX">OriginX</label>
+                <input class="input-cyan" type="number" name="originX" placeholder="0">
+              </div>
+
+              <div class="form-field">
+                <label for="originY">OriginY</label>
+                <input class="input-cyan" type="number" name="originY" placeholder="0">
+              </div>
+
+              <div class="submit">
+                <button class="btn-cyan" type="submit">SAVE</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
     </template>
   </Modal>
 </template>
@@ -14,5 +76,100 @@ import Modal from '@/components/utilities/Modal.vue'
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/main';
 
+.assets-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  
+  .asset-categories {
+    width: calc(15% - 15px);
+    padding-right: 15px;
+    display: flex;
+  }
+
+  .assets {
+    width: calc(25% - 30px);
+    padding: 0 15px;
+    display: none;
+    &.active {
+      display: flex;
+    }
+  }
+  .asset-info {
+    display: flex;
+    width: calc(60% - 15px);
+    padding-left: 15px;
+    &::after {
+      display: none;
+    }
+    .image-container {
+      text-align: center;
+      img {
+        height: 200px;
+        padding-right: 15px;
+        margin: 30px 0;
+      }
+    }
+    .modal-form {
+      &.asset-manager {
+        .form-fields {
+          display: flex;
+          gap: 15px;
+          flex-wrap: wrap;
+
+          .form-field {
+            width: calc(50% - 15px);
+            &.name {
+              width: calc(100% - 15px);
+            }
+          }
+          .submit {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .asset-categories, .assets, .asset-info {
+    gap: 30px;
+    flex-direction: column;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      width: 1px;
+      height: calc(100% + 30px);
+      top: -15px;
+      background-color: $dark-cyan;
+    }
+    .category, .asset, .image-container {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        left: -15px;
+        bottom: -15px;
+        width: calc(100% + 30px);
+        height: 1px;
+        background-color: $dark-cyan;
+      }
+      &.selected {
+        &::before {
+          content: '';
+          position: absolute;
+          width: calc(100% + 30px);
+          height: calc(100% + 30px);
+          left: -15px;
+          top: -15px;
+          background-color: rgba($cyan, 0.8);
+          z-index: -1;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file