diff --git a/src/components/EntityAttributes.tsx b/src/components/EntityAttributes.tsx
index 52c51bf..9945018 100644
--- a/src/components/EntityAttributes.tsx
+++ b/src/components/EntityAttributes.tsx
@@ -1,48 +1,110 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import React from "react";
 
+export default function EntityAttributes(props: any) {
+    return (
+        <div className="item-card">
+            {props.title && (
+                <div className="item-card__header">
+                    <h3 className="item-card__title">{props.title}</h3>
+                </div>
+            )}
+            {props.health && (
+                <div className="item-attribute-card__content">
+                    <b>Health:&nbsp;</b><Hearts amount={props.health}/>
+                </div>
+            )}
+            {props.behavior && (
+                <div className="item-attribute-card__content">
+                    <div>
+                        <b>Behavior: </b>{props.behavior}
+                    </div>
+                </div>
+            )}
+            {props.attacks && (
+                <div className="item-attribute-card__content">
+                    <div>
+                        <b>Attack Strength:</b> {props.attacks.map((item: Damage) =>
+                            <div className={"attack-card"}>
+                                <div className={"attack-header"}>
+                                    <h4>{item.type}</h4>
+                                    <img
+                                        src={useBaseUrl("/img/" + item.weapontype + ".png")}
+                                        alt={item.weapontype + " icon"}
+                                    />
+                                </div>
+                                <ul>
+                                    <li>Easy:<Hearts amount={item.easy}/></li>
+                                    <li>Normal:<Hearts amount={item.normal}/></li>
+                                    <li>Hard:<Hearts amount={item.hard}/></li>
+                                </ul>
+                            </div>
+                    )}
+                    </div>
+                </div>
+            )}
+            {props.speed && (
+                <div className="item-attribute-card__content">
+                    <div>
+                        <b>Speed:</b> {props.speed.map((item: string) =>
+                        <p>{item}</p>
+                    )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
 function calculateHearts(count: number) {
     const full = Math.floor(count / 2);
     const half = count % 2;
     return { full, half };
 }
 
-export default function EntityAttributes(props: any) {
+export function Hearts(props: any) {
     const fullImage = useBaseUrl("/img/full_heart.png");
     const halfImage = useBaseUrl("/img/half_heart.png");
-    let heartAmount = calculateHearts(props.health);
-
+    let heartAmount = calculateHearts(props.amount);
     return (
-        <div className="item-card">
-            <div className="item-card__header">
-                <h3 className="item-card__title">{"Attributes"}</h3>
-            </div>
-            {props.health && (
-                <div className="item-card__content">
-                    <div>
-                        <b>Health:</b> {props.health} (
-                    </div>
-                    {Array.from({ length: heartAmount.full }).map((_, index) => (
-                        <img
-                            key={index}
-                            src={fullImage}
-                            alt={"Full Heart icon"}
-                            width={11.25}
-                            height={11.25}
-                        />
-                    ))}
-                    {Array.from({ length: heartAmount.half }).map((_, index) => (
-                        <img
-                            key={index}
-                            src={halfImage}
-                            alt={"Half Heart icon"}
-                            width={11.25}
-                            height={11.25}
-                        />
-                    ))}
-                    )
-                </div>
-            )}
+        <div className={"hearts"}>
+            {props.amount} (
+            {Array.from({ length: heartAmount.full }).map((_, index) => (
+                <img
+                    key={index}
+                    src={fullImage}
+                    alt={"Full Heart icon"}
+                />
+            ))}
+            {Array.from({ length: heartAmount.half }).map((_, index) => (
+                <img
+                    key={index}
+                    src={halfImage}
+                    alt={"Half Heart icon"}
+                />
+            ))}
+            )
         </div>
     );
 }
+
+export enum MobBehavior {
+    Passive = "Passive",
+    Neutral = "Neutral",
+    Hostile = "Hostile"
+}
+
+interface Damage {
+    type: WeaponType;
+    weapontype: string;
+    easy: number | string;
+    normal: number | string;
+    hard: number | string;
+}
+
+
+export enum WeaponType {
+    Ranged = "Ranged",
+    Melee = "Melee",
+    Unarmed = "Unarmed"
+}
diff --git a/src/components/ShowcaseBlock.tsx b/src/components/ShowcaseBlock.tsx
index 1bcc4c9..a8d8ea6 100644
--- a/src/components/ShowcaseBlock.tsx
+++ b/src/components/ShowcaseBlock.tsx
@@ -6,9 +6,11 @@ export default function ShowcaseBlock(props: any) {
     return (
         <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
             <div className="item-card">
-                <div className="item-card__header">
-                    <h3 className="item-card__title">{props.title}</h3>
-                </div>
+                {props.title && (
+                    <div className="item-card__header">
+                        <h3 className="item-card__title">{props.title}</h3>
+                    </div>
+                )}
                 <div className="item-card__content">
                     <img
                         src={useBaseUrl('/' + props.image)}
diff --git a/src/components/SpawnConfig.tsx b/src/components/SpawnConfig.tsx
new file mode 100644
index 0000000..40deec2
--- /dev/null
+++ b/src/components/SpawnConfig.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+export default function SpawnConfig(props: any) {
+    return (
+        <div className="item-card">
+            {props.title && (
+                <div className="item-card__header">
+                    <h3 className="item-card__title">{props.title}</h3>
+                </div>
+            )}
+            {props.dim && (
+                <div className="item-attribute-card__content">
+                    <div>
+                        <b>Dimension:</b> {props.dim}
+                    </div>
+                </div>
+            )}
+            {props.amount && (
+                <div className="item-attribute-card__content">
+                    <div>
+                        <b>Spawn Amount:</b> {props.amount}
+                    </div>
+                </div>
+            )}
+            {props.spawnRules && (
+                props.spawnRules.map((item: string) =>
+                    <div className={"item-attribute-card__content"}>
+                        {item}
+                    </div>
+                )
+            )}
+        </div>
+    );
+}
+
+export enum Dimension {
+    Overworld = "Overworld",
+    Nether = "The Nether",
+    End = "The End"
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 8801cf7..badf4af 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -90,13 +90,30 @@ a.no-underline {
 .item-card__content {
     padding: 20px;
     display: flex;
-    flex-wrap: wrap;
-    gap: 1px;
-    max-width: 100%;
     justify-content: center;
     align-items: center;
 }
 
+.item-attribute-card__content {
+    padding: 10px;
+    display: flex;
+    justify-content: left;
+    border-bottom: 1px solid var(--box-outline);
+}
+
+.hearts {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    flex-wrap: wrap;
+    max-width: 100%;
+}
+
+.hearts img {
+    width: 11px;
+    height: 11px;
+}
+
 .item-card__image {
     max-width: 100%;
     height: auto;
@@ -109,3 +126,33 @@ a.no-underline {
     align-items: flex-start;
     margin-bottom: 10px;
 }
+
+.attack-card {
+    margin-left: 20px;
+}
+
+.attack-card ul li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.attack-header {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.attack-header h4 {
+    margin: 0;
+    line-height: 1;
+    font-size: inherit;
+}
+
+.attack-header img {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    object-fit: contain;
+}
diff --git a/static/img/bow.png b/static/img/bow.png
new file mode 100644
index 0000000..e66f7c1
Binary files /dev/null and b/static/img/bow.png differ
diff --git a/static/img/iron_sword.png b/static/img/iron_sword.png
new file mode 100644
index 0000000..5b9dae3
Binary files /dev/null and b/static/img/iron_sword.png differ
diff --git a/sullysmod/mauled.mdx b/sullysmod/mauled.mdx
index 294e357..8d9a01b 100644
--- a/sullysmod/mauled.mdx
+++ b/sullysmod/mauled.mdx
@@ -2,8 +2,60 @@
 title: The Mauled
 ---
 import ShowcaseBlock from "../src/components/ShowcaseBlock";
-import EntityAttributes from "../src/components/EntityAttributes";
+import EntityAttributes, {MobBehavior, WeaponType} from "../src/components/EntityAttributes";
+import SpawnConfig, {Dimension} from "../src/components/SpawnConfig";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+export const ranged = {
+    type: WeaponType.Ranged,
+    weapontype: "bow",
+    easy: 2,
+    normal: 3,
+    hard: 4
+}
+
+export const melee = {
+    type: WeaponType.Melee,
+    weapontype: "iron_sword",
+    easy: 3,
+    normal: 5,
+    hard: 7
+}
+
+export const spawnRules = [
+        "Only in deepslate levels",
+        "In all biomes besides the Deep Dark"
+]
+
+<Tabs queryString="overview-tab">
+    <TabItem value={"showcase"} label={"View"}>
+        <ShowcaseBlock image="img/mauled.png"/>
+    </TabItem>
+    <TabItem value={"attributes"} label={"Attributes"}>
+        <EntityAttributes
+            health={26}
+            behavior={MobBehavior.Hostile}
+            attacks={[ranged, melee]}
+            speed={["With Skin: 0.15 for ranged and 0.18 for melee","Without Skin: 0.25 for ranged and 0.3 for melee"]}
+        />
+    </TabItem>
+    <TabItem value={"spawning"} label={"Spawning"}>
+        <SpawnConfig
+        dim={Dimension.Overworld}
+        amount={"Between 2 and 4 per chunk"}
+        spawnRules={spawnRules}
+        />
+    </TabItem>
+</Tabs>
+
+
+The Mauled is a short skeleton that spawns below deepslate levels.
+
+It has a bow and an iron sword. <br/>
+By default it will use the bow for ranged attacks and will try to circle around you like a normal skeleton.
+However, if you get too close, it will switch to a sword and try to close distance by itself.
+
+When the Mauled is half dead, it sheds its flesh (sometimes dropping rotten flesh) and becomes faster, prefers the sword and tries to hunt you.
+
 
-<ShowcaseBlock title="The Mauled" image="img/mauled.png">
-    <EntityAttributes health={26}/>
-</ShowcaseBlock>
\ No newline at end of file