diff --git a/client/public/icons/other/License b/client/public/icons/other/License
new file mode 100644
index 00000000..d1858cf4
--- /dev/null
+++ b/client/public/icons/other/License
@@ -0,0 +1,2 @@
+Shield icon created by Marcus Avedis
+from Noun Project2
\ No newline at end of file
diff --git a/client/public/icons/other/noun-shield.svg b/client/public/icons/other/noun-shield.svg
new file mode 100644
index 00000000..25b4cc76
--- /dev/null
+++ b/client/public/icons/other/noun-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><path fill="#DED4D6" d="M49.746,3.244L13.644,9.884v51.803c0,3.987,1.786,8.293,5.318,12.804c3.131,3.99,7.564,8.076,13.174,12.146  c7.004,5.063,14.144,8.834,17.61,10.551c3.472-1.717,10.612-5.487,17.614-10.551c5.614-4.069,10.039-8.155,13.168-12.146  c3.535-4.516,5.327-8.816,5.327-12.804V9.884L49.746,3.244z"/></svg>
\ No newline at end of file
diff --git a/client/public/img/dracblau.png b/client/public/img/dracblau.png
new file mode 100644
index 00000000..c3f3198d
Binary files /dev/null and b/client/public/img/dracblau.png differ
diff --git a/client/public/img/monke.jpg b/client/public/img/monke.jpg
new file mode 100644
index 00000000..a5a7084c
Binary files /dev/null and b/client/public/img/monke.jpg differ
diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index d9eba1e3..6c512582 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -192,4 +192,4 @@ button:active {
   -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
-}
+}
\ No newline at end of file
diff --git a/client/src/views/partials/WindowHandle.vue b/client/src/views/partials/WindowHandle.vue
index 0c539f7c..1fb0e0d8 100644
--- a/client/src/views/partials/WindowHandle.vue
+++ b/client/src/views/partials/WindowHandle.vue
@@ -51,10 +51,6 @@ function CloseButton(){
 
 onMounted(() => {
     if(props.custom) def.value = false;
-    if(props.color) {
-        let handle = document.getElementById('window-handle-' + id);
-        handle.style.backgroundColor = props.color;
-    }
 });
 
 defineExpose({
diff --git a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue
index b992cd7d..a524c4e1 100644
--- a/client/src/views/windows/game/dnd-5e/CharacterSheet.vue
+++ b/client/src/views/windows/game/dnd-5e/CharacterSheet.vue
@@ -37,7 +37,7 @@ function ConfigureBookmarks(){
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <WindowHandle :window="id" ref="handle" handleHeight="105px" custom="true" color="#731A2B"></WindowHandle>
+        <WindowHandle :window="id" ref="handle" handleHeight="105px" custom="true" class="character-sheet-handle"></WindowHandle>
         <div class="header-info">
             <div class="header-left-info">
                 <span class="header-char-name">Thrak Thor</span>
@@ -45,7 +45,7 @@ function ConfigureBookmarks(){
             </div>
             <div class="header-right-info">
                 <div class="header-xp-bar-container">
-                    <span class="xp-text">33 / 300 XP</span>
+                    <span class="xp-text">33 <span class="gray">/</span> 300 XP</span>
                     <div class="xp-progress-bar">
                         <div class="xp-progress-bar-content"></div>
                     </div>
@@ -107,10 +107,186 @@ function ConfigureBookmarks(){
                 </div>
             </div>
             <div class="two-column-layout">
-                <div class="flex-container">
-                    
+                <div class="flex-container border">
+                    <!--<img class="player-sheet-splash" src="img/monke.jpg">-->
+                    <img class="player-sheet-splash" src="img/dracblau.png">
+                    <div class="player-info-div">
+
+                        <div class="ac-container">
+                            <span class="attr-bonus">15</span>
+                        </div>
+
+                        <div class="death-rolls">
+                            <div class="success-rolls">
+                                <input class="checkbox-radio-green" type="checkbox" name="deathsave_success1">
+                                <input class="checkbox-radio-green" type="checkbox" name="deathsave_success2">
+                                <input class="checkbox-radio-green" type="checkbox" name="deathsave_success3">
+                            </div>
+                            <div class="failed-rolls">
+                                <input class="checkbox-radio-red" type="checkbox" name="deathsave_fail1">
+                                <input class="checkbox-radio-red" type="checkbox" name="deathsave_fail2">
+                                <input class="checkbox-radio-red" type="checkbox" name="deathsave_fail3">
+                            </div>
+                        </div>
+                        <span class="player-info-div">Hit Points</span>
+                        <div class="health-bar">
+                            <div class="health-bar-value-content"></div>
+                            <div class="health-bar-tmp-content"></div>
+                            <div class="health-bar-content">80 <span class="gray">/</span> 80</div>
+                        </div>
+                        <span class="player-info-div">Hit Dice</span>
+                        <div class="dice-bar">
+                            <div class="dice-bar-value-content"></div>
+                            <div class="dice-bar-content">80 <span class="gray">/</span> 80</div>
+                        </div>
+                        <div class="extra-stats-div">
+                            <div class="extra-stat-container">
+                                <span>Initiative</span>
+                                <div class="extra-stat">+2</div>
+                            </div>
+                            <div class="extra-stat-container">
+                                <span>Walk speed</span>
+                                <div class="extra-stat">30ft</div>
+                            </div>
+                            <div class="extra-stat-container">
+                                <span>Proficency</span>
+                                <div class="extra-stat">+2</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-container">
+                    <div class="saving-throws">
+                        <span class="span-header">Saving Throws</span>
+                        <div class="saving-throws-container">
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">STR</span>
+                                <span class="saving-throw-modifier">+1</span>
+                            </div>
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">DEX</span>
+                                <span class="saving-throw-modifier">+5</span>
+                            </div>
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">CON</span>
+                                <span class="saving-throw-modifier">+2</span>
+                            </div>
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">INT</span>
+                                <span class="saving-throw-modifier">+3</span>
+                            </div>
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">WIS</span>
+                                <span class="saving-throw-modifier">-1</span>
+                            </div>
+                            <div class="saving-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="saving-throw-class">CHA</span>
+                                <span class="saving-throw-modifier">+1</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="skill-throws">
+                        <span class="span-header">Skills</span>
+                        <div class="skill-throws-container">
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Acrobatics (Dex)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Animal Handling (Wis)</span>
+                                <span class="skill-throw-modifier">+5</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Arcana (Int)</span>
+                                <span class="skill-throw-modifier">+2</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Athletics (Str)</span>
+                                <span class="skill-throw-modifier">+3</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Deception (Cha)</span>
+                                <span class="skill-throw-modifier">-1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">History (Int)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Insight (Wis)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Intimidation (Cha)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Investigation (Int)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Medicine (Wis)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Nature (Int)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Perception (Wis)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Performance (Cha)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Persuasion (Cha)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Religion (Int)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Sleight of Hand (Dex)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Stealth (Dex)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                            <div class="skill-throw">
+                                <input type="checkbox" name="str-saving">
+                                <span class="skill-throw-class">Survival (Wis)</span>
+                                <span class="skill-throw-modifier">+1</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="flex-container"></div>
             </div>
         </div>
         <div class="sheet-content" v-show="selectedBookmark == 1">
@@ -130,6 +306,267 @@ function ConfigureBookmarks(){
 
 
 <style scoped lang="scss">
+.skill-throws-container {
+    display: flex;
+    flex-direction: column;
+
+    .skill-throw {
+        margin-top: -2px;
+        line-height: 28px;
+        padding: 0px 5px 0 5px;
+
+        justify-content: center;
+        display: flex;
+        width: 100%;
+
+        .skill-throw-class {
+            margin-right: auto;
+        }
+
+        .skill-throw-modifier {
+            margin-left: auto;
+            font-weight: bold;
+        }
+    }
+}
+
+.skill-throws {
+    margin-top: 15px;
+}
+
+.saving-throws, .skill-throws {
+    display: flex;
+    flex-direction: column;
+    background-color: #1B1B1B;
+    padding: 10px;
+    border: 1px solid var(--color-border);
+
+    .saving-throws-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+
+        .saving-throw {
+            margin-top: -1px;
+            line-height: 24px;
+            padding: 0px 5px 0 5px;
+
+            justify-content: center;
+            display: flex;
+            width: 100%;
+
+            .saving-throw-class {
+                margin-right: auto;
+            }
+
+            .saving-throw-modifier {
+                margin-left: auto;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+input[type="checkbox"] { 
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    margin: 6px;
+    padding: 0;
+    border: 2px solid #DED4D6aa;
+    appearance: none;
+    background-color: transparent;
+    border-radius: 20px;
+    outline: none;
+    transition: outline 0.1s;
+
+    &:checked {
+        background-color: white;
+    }
+}
+
+.span-header {
+    text-align: left;
+    font-family: ScalySansSmallCapsRemake;
+    font-weight: bold;
+    margin-left: 9px;
+}
+
+.extra-stats-div {
+    display: flex;
+    margin-bottom: 15px;
+    margin-left: 15px;
+    margin-right: 15px;
+
+    .extra-stat-container {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &:nth-child(2){
+            margin-top: 20px;
+        }
+
+        .extra-stat {
+            -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+            clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+            background: #DED4D6;
+            height: 35px;
+            width: 90px;
+            color: black;
+            line-height: 35px;
+            font-size: 18px;
+            font-weight: bold;
+        }
+    }
+}
+
+span.player-info-div {
+    text-align: left;
+    font-family: ScalySansSmallCapsRemake;
+    font-weight: bold;
+    margin-left: 9px;
+}
+
+.dice-bar {
+    background-color: #181818;
+    height: 30px;
+    margin: 7px;
+    border: 1px solid var(--color-golden-border);
+    position: relative;
+    margin-top: 0px;
+
+    .dice-bar-value-content {
+        position: absolute;
+        height: 28px;
+        width: 100%;
+        background: linear-gradient(90deg, #411E24, #721B2A)
+    }
+
+    .dice-bar-content {
+        position: absolute;
+        height: 28px;
+
+        line-height: 30px;
+        font-size: 18px;
+        margin-left: 12px;
+        font-weight: bold;
+    }
+}
+
+.health-bar {
+    background-color: #181818;
+    height: 40px;
+    margin: 7px;
+    border: 1px solid var(--color-golden-border);
+    position: relative;
+    margin-top: 0px;
+
+    .health-bar-value-content {
+        position: absolute;
+        height: 38px;
+        width: 100%;
+        background: linear-gradient(90deg, #1C4F2A, #39A05A)
+    }
+
+    .health-bar-tmp-content {
+        position: absolute;
+        height: 38px;
+        background: linear-gradient(90deg, #306977, #49d3d3)
+    }
+
+    .health-bar-content {
+        position: absolute;
+        height: 38px;
+
+        line-height: 40px;
+        font-size: 24px;
+        margin-left: 12px;
+        font-weight: bold;
+    }
+}
+
+div.player-info-div {
+    margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.death-rolls {
+    display: flex;
+    width: 300px;
+
+    input[type="checkbox"] { 
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        margin: 6px;
+        padding: 0;
+        border: 2px solid #DED4D6aa;
+        appearance: none;
+        background-color: transparent;
+        border-radius: 20px;
+        outline: none;
+        transition: outline 0.1s;
+    }
+
+    .success-rolls {
+        margin-right: auto;
+        margin-left: 20px;
+    }
+
+    .failed-rolls {
+        margin-right: 20px;
+        margin-left: auto;
+    }
+
+    .success-rolls input[type="checkbox"]:checked {
+        background-color: var(--c-button-green-hover);
+    }
+
+    .failed-rolls input[type="checkbox"]:checked {
+        background-color: var(--c-button-red-hover);
+
+    }
+
+    .checkbox-radio-red {
+        background-color: red;
+    }
+}
+
+.ac-container {
+    width: 70px;
+    height: 70px;
+    background-image: url('icons/other/noun-shield.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    color: black;
+    position: absolute;
+    left: calc(50% - 35px);
+    top: -30px;
+    filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.8));
+
+    .attr-bonus {
+        color: #1B1A18;
+        font-weight: bold;
+        position: relative;
+        top: 15px;
+        font-size: 24px;
+    }
+}
+
+.player-sheet-splash {
+    width: 100%;
+    object-fit: cover;
+    max-height: 400px;
+    border: 1px solid var(--color-golden-border);
+    padding: 5px;
+    box-sizing: border-box; 
+}
+
 .two-column-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -139,10 +576,14 @@ function ConfigureBookmarks(){
     margin-right: 20px;
 
     .flex-container {
+        &.border {
+            border: 1px solid var(--color-border);
+            background-color: #1b1b1b;
+        }
         margin: auto;
         width: 300px;
         display: flex;
-        
+        flex-direction: column;
     }
 }
 
@@ -222,8 +663,9 @@ function ConfigureBookmarks(){
     height: 105px;
     pointer-events: none;
     width: 100%;
-    margin-top: -105px; /* Adjust to fixed height header */
+    margin-top: -103px; /* Adjust to fixed height header */
     display: flex;
+    background: linear-gradient(90deg, #731A2B, #49131d);
 }
 
 .header-left-info {
@@ -291,8 +733,6 @@ function ConfigureBookmarks(){
         border-width: 4px;
         border-style: solid;
         margin-right: 20px;
-
-        font-family:'Courier New', Courier, monospace;
     }
 }
 
@@ -306,4 +746,8 @@ function ConfigureBookmarks(){
     user-select: none;
 }
 
+span.gray {
+    color: gray;
+}
+
 </style>