diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
new file mode 100644
index 0000000..f8ae030
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
@@ -0,0 +1,58 @@
+.panel-actions {
+ float: right;
+}
+.add-btn {
+ width: 100%;
+}
+
+table {
+ width: 100%;
+}
+
+tr.example-detail-row {
+ height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+ background: #545456;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+ background: #4e5157;
+}
+
+.example-element-row td {
+ border-bottom-width: 0;
+}
+
+.example-element-detail {
+ overflow: hidden;
+}
+
+.example-element-diagram {
+ min-width: 80px;
+ border: 2px solid black;
+ padding: 8px;
+ font-weight: lighter;
+ margin: 8px 0;
+ height: 104px;
+}
+
+.example-element-symbol {
+ font-weight: bold;
+ font-size: 40px;
+ line-height: normal;
+}
+
+.example-element-description {
+ padding: 16px;
+}
+
+.example-element-description-attribution {
+ opacity: 0.5;
+}
+
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
+ width: 32px;
+ align-content: center;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts
new file mode 100644
index 0000000..8e5c454
--- /dev/null
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventorySlotEditorComponent } from './inventory-slot-editor.component';
+
+describe('InventorySlotEditorComponent', () => {
+ let component: InventorySlotEditorComponent;
+ let fixture: ComponentFixture