diff --git a/frontend/src/app/pages/particles/components/particle/particle.component.html b/frontend/src/app/pages/particles/components/particle/particle.component.html
index 313a3c0..849b497 100644
--- a/frontend/src/app/pages/particles/components/particle/particle.component.html
+++ b/frontend/src/app/pages/particles/components/particle/particle.component.html
@@ -10,30 +10,30 @@
             <input type="color" [(ngModel)]="selectedColor">
             <span>Current color: {{ selectedColor }}</span>
           </div>
-          <mat-form-field appearance="fill" class="type-field">
+          <mat-form-field appearance="outline" class="type-field">
             <mat-label>Select Particle Type</mat-label>
             <input type="text"
-              placeholder="Search for a particle type"
-              matInput
-              [formControl]="particleTypeControl"
-              [matAutocomplete]="auto">
-              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-                @for (type of filteredParticleTypes | async; track type) {
-                  <mat-option [value]="type">
-                    {{ type }}
-                  </mat-option>
-                }
-              </mat-autocomplete>
-            </mat-form-field>
-          </div>
-
-          <div class="size-slider">
-            <mat-slider min="0.1" max="4" step="0.1" class="full-width">
-              <input matSliderThumb [(ngModel)]="selectedSize">
-            </mat-slider>
-            <span>Size: {{ selectedSize }}</span>
-          </div>
+                   placeholder="Search for a particle type"
+                   matInput
+                   [formControl]="particleTypeControl"
+                   [matAutocomplete]="auto">
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+              @for (type of filteredParticleTypes | async; track type) {
+                <mat-option [value]="type">
+                  {{ type }}
+                </mat-option>
+              }
+            </mat-autocomplete>
+          </mat-form-field>
         </div>
-      </mat-card-content>
-    </mat-card>
-  </div>
+
+        <div class="size-slider">
+          <mat-slider min="0.1" max="4" step="0.1" class="full-width">
+            <input matSliderThumb [(ngModel)]="selectedSize">
+          </mat-slider>
+          <span>Size: {{ selectedSize }}</span>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/frontend/src/app/pages/particles/components/properties/properties.component.html b/frontend/src/app/pages/particles/components/properties/properties.component.html
index 8299662..31bb77a 100644
--- a/frontend/src/app/pages/particles/components/properties/properties.component.html
+++ b/frontend/src/app/pages/particles/components/properties/properties.component.html
@@ -9,9 +9,6 @@
           <mat-label>Particle Name</mat-label>
           <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Display Name</mat-label>
           <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
@@ -27,16 +24,6 @@
             }
           </mat-select>
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Lore</mat-label>
-          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
-        </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Display Item</mat-label>
           <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
@@ -44,20 +31,29 @@
       </div>
 
       <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Permission</mat-label>
-          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+        <mat-form-field appearance="outline" class="lore-double">
+          <mat-label>Lore</mat-label>
+          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
         </mat-form-field>
       </div>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
-          <mat-label>Package Permission</mat-label>
+          <mat-label>Permission name</mat-label>
+          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Package name</mat-label>
           <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
         </mat-form-field>
       </div>
 
       <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Random Offset</mat-label>
+          <input matInput type="number" [(ngModel)]="particleData.random_offset"
+                 placeholder="Enter random offset">
+        </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>Frame Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
@@ -69,27 +65,16 @@
           <mat-label>Repeat</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Repeat Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
-            placeholder="Enter repeat delay">
-          </mat-form-field>
-        </div>
+                 placeholder="Enter repeat delay">
+        </mat-form-field>
+      </div>
 
-        <div class="form-row">
-          <mat-form-field appearance="outline">
-            <mat-label>Random Offset</mat-label>
-            <input matInput type="number" [(ngModel)]="particleData.random_offset"
-              placeholder="Enter random offset">
-            </mat-form-field>
-          </div>
-
-          <div class="form-row">
-            <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
+      <div class="form-row">
+        <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/frontend/src/app/pages/particles/components/properties/properties.component.scss b/frontend/src/app/pages/particles/components/properties/properties.component.scss
index 2fb7996..1076633 100644
--- a/frontend/src/app/pages/particles/components/properties/properties.component.scss
+++ b/frontend/src/app/pages/particles/components/properties/properties.component.scss
@@ -1,5 +1,12 @@
 .form-row {
-  margin-bottom: 15px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.lore-double {
+  grid-column: span 2;
 }
 
 .card-div {
diff --git a/frontend/src/app/pages/particles/components/properties/properties.component.spec.ts b/frontend/src/app/pages/particles/components/properties/properties.component.spec.ts
deleted file mode 100644
index 33213d7..0000000
--- a/frontend/src/app/pages/particles/components/properties/properties.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PropertiesComponent } from './properties.component';
-
-describe('PropertiesComponent', () => {
-  let component: PropertiesComponent;
-  let fixture: ComponentFixture<PropertiesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PropertiesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PropertiesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/pages/particles/particles.component.html b/frontend/src/app/pages/particles/particles.component.html
index d32f2f8..8d920de 100644
--- a/frontend/src/app/pages/particles/particles.component.html
+++ b/frontend/src/app/pages/particles/particles.component.html
@@ -10,8 +10,9 @@
     <section class="darkmodeSection full-height">
       <section class="column">
         <div class="renderer-section column">
-          <div class="flex row">
+          <div class="flex row spacing">
             <div class="flex side-column">
+              <app-particle></app-particle>
               <app-particle-properties></app-particle-properties>
             </div>
             <div class="flex middle-column">
@@ -25,7 +26,6 @@
               </div>
             </div>
             <div class="flex side-column">
-              <app-particle></app-particle>
               <app-frames>
                 <button mat-icon-button matTooltip="Copy JSON to clipboard" (click)="copyJson()">
                   <mat-icon>content_copy</mat-icon>
diff --git a/frontend/src/app/pages/particles/particles.component.scss b/frontend/src/app/pages/particles/particles.component.scss
index e98d7ee..a1fe198 100644
--- a/frontend/src/app/pages/particles/particles.component.scss
+++ b/frontend/src/app/pages/particles/particles.component.scss
@@ -1,9 +1,14 @@
 .renderer-section {
+  margin-top: 15px;
   flex: 1;
   min-width: 300px;
   display: flex;
 }
 
+.spacing {
+  gap: 10px;
+}
+
 .side-column {
   flex: 1;
   flex-direction: column;