created the general layout. Next step: rearrange the modules

src/app/journal/journal-stats/journal-stats.component.html

@@ -3,13 +3,33 @@
     <!-- Attribute and skill container -->
     <attribute-skill-container></attribute-skill-container>
 
+    <div class="container2">
+      <div class="info-row">
+        <armor-class></armor-class>
+        <proficiency></proficiency>
+        <movement></movement>
+        <initiative></initiative>
+        <status></status>
+        <app-death-save></app-death-save>
+      </div>
+
+      <div class="rest">
+        <div class="life-weapon-container">
+          <life></life>
+          <app-weapons-container></app-weapons-container>
+        </div>
+
+        <ability-panel></ability-panel>
+      </div>
+    </div>
+
     <!-- Life and Weapon Container -->
-    <div class="life-weapon-container">
+    <!-- <div class="life-weapon-container">
       <app-life-container></app-life-container>
       <app-weapons-container></app-weapons-container>
     </div>
 
-    <!-- Ability Panel -->
-    <ability-panel></ability-panel>
+
+    <ability-panel></ability-panel> -->
   </div>
 </div>

src/app/journal/journal-stats/journal-stats.component.scss

@@ -1,25 +1,68 @@
 .center{
-
     display: flex;
     justify-content: center;
-    height: 100vh;
+    height: 95vh;
 }
 
 .stats-container{
     display: flex;
     justify-content: space-between;
     margin: 2rem 2rem 2rem 2rem;
+    gap: 2rem;
     border: 1px solid #ff0000;
+    width: 100%;
 }
 
 attribute-skill-container{
     width: 25%;
 }
 
+.container2{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    justify-content: space-between;
+    border: 1px solid #00ff22;
+    width: 75%;
+}
+
+.info-row{
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #0000ff;
+    width: 100%;
+    // height: 5vh;
+}
+
+.rest{
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #ff00ff;
+    width: 100%;
+}
+
 .life-weapon-container{
-    width: 35%;
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-between;
+    gap: 2rem;
+    border: 3px solid #eeff00;
+    width: 49%;
 }
 
 ability-panel{
-    width: 35%;
+    width: 49%;
+}
+
+.life{
+    width: 100%;
+    height: 20%;
+    border: 3px solid #020202;
+}
+
+.weapon{
+    width: 100%;
+    min-height: 50%;
+    max-height: 70%;
+    border: 3px solid #5e0e0e;
 }

src/app/journal/journal-stats/life-container/life-container.component.html

@@ -12,5 +12,5 @@
   </div>
 
   <!-- Hit Points -->
-  <app-life style="width: 100%"></app-life>
+  <life style="width: 100%"></life>
 </div>

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -4,7 +4,7 @@ import { DetailsService } from 'src/services/details/details.service';
 import { LifeDetailsComponent } from './life-details/life-details.component';
 
 @Component({
-  selector: 'app-life',
+  selector: 'life',
   templateUrl: './life.component.html',
   styleUrls: ['./life.component.scss'],
 })