diff --git a/less/character-sheet.less b/less/character-sheet.less
index f0b281d..90522d1 100644
--- a/less/character-sheet.less
+++ b/less/character-sheet.less
@@ -73,6 +73,9 @@
 
     .advancementBox {
         margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     .lvlBox {
@@ -133,54 +136,51 @@
         text-align: center;
     }
 
+    .mainBox {
+        display: flex;
+    }
 
-    .sideBarBox {
-        float: left;
-        width: 185px;
-        min-height: 500px;
-        border-left-width: 18px;
-        border-right-width: 18px;
-        border-top-width: 21px;
-        border-bottom-width: 52px;
-        border-style: solid;
-        margin-top: 3px;
-    };
+    .sidebarBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 200px
+    }
 
-    .menuBox {
-        float: left;
-        width: 400px;
-        height: 26px;
-        position: relative;
-    };
+    .imgBox {
+        height: 165px;
+        width: 180px;
+        padding: 0 20px;
+        background-color: #b0b0b0;
+        border-radius: 15px;
+        -webkit-border-radius: 15px;
+        -moz-border-radius: 15px;
+        -o-border-radius: 15px;
+    }
 
-    .contentBox {
-        float: left;
-        width: 430px;
-        min-height: 500px;
-    };
+    .imgBox:after {
+		content: "";
+		border-top: 40px solid #b0b0b0;
+		border-left: 40px solid #c00d0d;
+		height: 0;
 
-    // .imgBox {
-    //     float: left;
-    //     width: 135px;
-    //     height: 175px;
-    //     position: relative;
-    //     margin-left: 8px;
-    //     margin-top: 10px;
-    //     margin-bottom: 3px;
-    //     border: 3px #e99d76 solid;
-    // };
-    // .charImg {
-    //     width: 100%;
-    //     height: 100%;
-    //     object-fit: cover;
-    // };
-    // .imgOverlay {
-    //     width: 135px;
-    //     height: 210px;
-    //     position: absolute;
-    //     top: -3px;
-    //     left: -3px;
-    //     background-image: url(assets/img/imageBorder.png);
-    //     pointer-events: none;
-    // };
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+
+    .charImg {
+		height: 95px;
+		width: 174px;
+		margin-top: 20px;
+		margin-bottom: 9px;
+		background-color: #fff;
+		border: 3px solid #494949;
+		clear: both;
+
+		border-radius: 15px;
+		-webkit-border-radius: 15px;
+		-moz-border-radius: 15px;
+		-o-border-radius: 15px;
+	}
 }
\ No newline at end of file
diff --git a/pokemon.css b/pokemon.css
index c60e9a8..c4b688e 100644
--- a/pokemon.css
+++ b/pokemon.css
@@ -62,6 +62,9 @@
 }
 .pokemon.sheet.characterSheet .advancementBox {
   margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .pokemon.sheet.characterSheet .lvlBox {
   width: 60px;
@@ -111,25 +114,44 @@
 .pokemon.sheet.characterSheet .expValue {
   text-align: center;
 }
-.pokemon.sheet.characterSheet .sideBarBox {
-  float: left;
-  width: 185px;
-  min-height: 500px;
-  border-left-width: 18px;
-  border-right-width: 18px;
-  border-top-width: 21px;
-  border-bottom-width: 52px;
-  border-style: solid;
-  margin-top: 3px;
+.pokemon.sheet.characterSheet .mainBox {
+  display: flex;
 }
-.pokemon.sheet.characterSheet .menuBox {
-  float: left;
-  width: 400px;
-  height: 26px;
-  position: relative;
+.pokemon.sheet.characterSheet .sidebarBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200px;
 }
-.pokemon.sheet.characterSheet .contentBox {
-  float: left;
-  width: 430px;
-  min-height: 500px;
+.pokemon.sheet.characterSheet .imgBox {
+  height: 165px;
+  width: 180px;
+  padding: 0 20px;
+  background-color: #b0b0b0;
+  border-radius: 15px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+}
+.pokemon.sheet.characterSheet .imgBox:after {
+  content: "";
+  border-top: 40px solid #b0b0b0;
+  border-left: 40px solid #c00d0d;
+  height: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.pokemon.sheet.characterSheet .charImg {
+  height: 95px;
+  width: 174px;
+  margin-top: 20px;
+  margin-bottom: 9px;
+  background-color: #fff;
+  border: 3px solid #494949;
+  clear: both;
+  border-radius: 15px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
 }
diff --git a/system.json b/system.json
index 2f81a02..285b441 100644
--- a/system.json
+++ b/system.json
@@ -1,5 +1,5 @@
 {
-    "version": "0.0.19",
+    "version": "0.0.20",
     "id": "pokemon",
     "title": "Pokémon TTRPG",
     "description": "A Pokémon TTRPG",
diff --git a/system.zip b/system.zip
index 5498b09..3c5b0ad 100644
Binary files a/system.zip and b/system.zip differ
diff --git a/templates/sheets/character/sidebar.hbs b/templates/sheets/character/sidebar.hbs
index 5dbe2e2..1f4da8a 100644
--- a/templates/sheets/character/sidebar.hbs
+++ b/templates/sheets/character/sidebar.hbs
@@ -1,37 +1,47 @@
-<div>
+<div class="mainBox">
     <div class="sideBarBox">
 
         <div class="imgBox">
-            <img class="charImg" src="{{actor.img}}" data-edit="img" data-action="editImage" title="{{actor.name}}" >
-            <div class="imgOverlay">
-                <div class="charHex charHPCurrent"><span class="charHexHead">HP</span></br><span class="charHexValue">{{system.hp.current}}</span></div>
-                <div class="charHex charHPMax"><span class="charHexHead">Max</span></br><span class="charHexValue">{{system.hp.max}}</span></div>
+            <div class="topPicture">
+                <div class="buttontopPicture"></div>
+                <div class="buttontopPicture"></div>
+            </div>
+            <img class="charImg" src="{{actor.img}}" data-edit="img" data-action="editImage" title="{{actor.name}}" >
+            <div class="buttonbottomPicture"></div>
+            <div class="speakers">
+                <div class="sp"></div>
+                <div class="sp"></div>
+                <div class="sp"></div>
+                <div class="sp"></div>
             </div>
-            <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.ArmorClass"}}</span></br><span class="charHexValue">{{system.armorClass}}</span></div>
-            <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.Speed"}}</span></br><span class="charHexValue">{{system.speed}}</span></div>
         </div>
 
-    <div class="menuBox">
-
-        <div class="menuBG"></div>
-        <div class="menuLbl"></div>
-
-        <nav class="tabs menuTabs" data-group="primary-tabs">  
-            <div class="menuIcon" style="left: 135px;">
-                <a class="item" data-tab="tab1" data-group="primary-tabs">
-                    <i class="fa-solid fa-book-open-cover"></i>
-                </a>
-            </div>
-            <div class="menuIcon" style="left: 180px;">
-                <a class="item" data-tab="tab2" data-group="primary-tabs">
-                    <i class="fa-solid fa-book"></i>
-                </a>
-            </div>
-        </nav>
-
-    </div>
+        <div class="charHex charHPCurrent"><span class="charHexHead">HP</span></br><span class="charHexValue">{{system.hp.current}}</span></div>
+        <div class="charHex charHPMax"><span class="charHexHead">Max</span></br><span class="charHexValue">{{system.hp.max}}</span></div>
+        <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.ArmorClass"}}</span></br><span class="charHexValue">{{system.armorClass}}</span></div>
+        <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.Speed"}}</span></br><span class="charHexValue">{{system.speed}}</span></div>
 
     <div class="contentBox">
+        <div class="menuBox">
+
+            <div class="menuBG"></div>
+            <div class="menuLbl"></div>
+
+            <nav class="tabs menuTabs" data-group="primary-tabs">
+                <div class="menuIcon" style="left: 135px;">
+                    <a class="item" data-tab="tab1" data-group="primary-tabs">
+                        <i class="fa-solid fa-book-open-cover"></i>
+                    </a>
+                </div>
+                <div class="menuIcon" style="left: 180px;">
+                    <a class="item" data-tab="tab2" data-group="primary-tabs">
+                        <i class="fa-solid fa-book"></i>
+                    </a>
+                </div>
+            </nav>
+
+        </div>
+
         <section class="content">
             <div class="tab" data-tab="tab1" data-group="primary-tabs">
                 {{> "systems/pokemon/templates/partials/character-sheet-character.hbs"}}