Replace fakeLogin() with actual login() method in AuthService and remove redundant fakeLogin() implementation.

Integrate `@auth0/angular-jwt` for Token management. Update `app.config.ts` with `JwtModule` setup and token getter from cookies. Enhance `AuthService` to include token handling, fake login, and JWT validation using `JwtHelperService`. Introduce `JwtClaims` interface for structured token claims.

backend/src/main/java/com/alttd/altitudeweb/config/SecurityAuthFailureHandler.java

@@ -0,0 +1,36 @@
+package com.alttd.altitudeweb.config;
+
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.access.AccessDeniedException;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.AuthenticationEntryPoint;
+import org.springframework.security.web.access.AccessDeniedHandler;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+
+@Slf4j
+@Component
+public class SecurityAuthFailureHandler implements AccessDeniedHandler, AuthenticationEntryPoint {
+    
+    @Override
+    public void handle(HttpServletRequest request, HttpServletResponse response, 
+                      AccessDeniedException accessDeniedException) throws IOException {
+        log.warn("Access denied: User '{}' attempted to access '{}' without proper permissions",
+                  request.getUserPrincipal() != null ? request.getUserPrincipal().getName() : "unknown", 
+                  request.getRequestURI());
+        
+        response.sendError(HttpServletResponse.SC_FORBIDDEN, "Access Denied");
+    }
+    
+    @Override
+    public void commence(HttpServletRequest request, HttpServletResponse response, 
+                        AuthenticationException authException) throws IOException {
+        log.warn("Authentication failure: Unauthenticated user attempted to access secured endpoint '{}'",
+                  request.getRequestURI());
+        
+        response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Authentication Required");
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java

@@ -31,20 +31,34 @@ import java.security.interfaces.RSAPublicKey;
 public class SecurityConfig {
 
     private final KeyPairService keyPairService;
+    private final SecurityAuthFailureHandler securityAuthFailureHandler;
 
     @Bean
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         return http
-            .authorizeHttpRequests(auth -> auth
+                .authorizeHttpRequests(
-                .requestMatchers("/login/userLogin/**", "/login/requestNewUserLogin/**").permitAll()
+                        auth -> auth
-                .requestMatchers("/team/**", "/history/**").permitAll()
+                                .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
-                .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
+                                .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-                .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                                .requestMatchers("/particles/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-                .anyRequest().authenticated()
+                                .requestMatchers("/files/save/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-            )
+                                .anyRequest().permitAll()
-            .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
+                                      )
-            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+                .oauth2ResourceServer(
-            .build();
+                        oauth2 -> oauth2
+                                .jwt(Customizer.withDefaults())
+                                .authenticationEntryPoint(securityAuthFailureHandler)
+                                .accessDeniedHandler(securityAuthFailureHandler)
+                                     )
+                .exceptionHandling(
+                        ex -> ex
+                                .authenticationEntryPoint(securityAuthFailureHandler)
+                                .accessDeniedHandler(securityAuthFailureHandler)
+                                  )
+                .sessionManagement(
+                        session -> session
+                                .sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+                .build();
     }
 
     @Bean

backend/src/main/java/com/alttd/altitudeweb/controllers/login/LoginController.java

@@ -83,8 +83,6 @@ public class LoginController implements LoginApi {
     @RateLimit(limit = 5, timeValue = 1, timeUnit = TimeUnit.MINUTES, key = "login")
     @Override
     public ResponseEntity<String> login(String code) {
-        CacheEntry cacheEntry1 = new CacheEntry(UUID.fromString("55e46bc3-2a29-4c53-850f-dbd944dc5c5f"), Instant.now().plusSeconds(TimeUnit.DAYS.toSeconds(1)));
-        cache.put("23232323", cacheEntry1);
         if (code == null) {
             return ResponseEntity.badRequest().build();
         }
@@ -134,12 +132,12 @@ public class LoginController implements LoginApi {
         Instant now = Instant.now();
         //TODO make a JWT for renewing and one for storing permissions for a session (expiry 1 hour)
         Instant expiryTime = now.plusSeconds(TimeUnit.DAYS.toSeconds(30));
-        CompletableFuture<PrivilegedUser> privilegedUserCompletableFuture = new CompletableFuture<>();
+        CompletableFuture<Optional<PrivilegedUser>> privilegedUserCompletableFuture = new CompletableFuture<>();
         List<PermissionClaimDto> claimList = new ArrayList<>();
         Connection.getConnection(Databases.DEFAULT)
                 .runQuery(sqlSession -> {
                     try {
-                        PrivilegedUser privilegedUser = sqlSession.getMapper(PrivilegedUserMapper.class)
+                        Optional<PrivilegedUser> privilegedUser = sqlSession.getMapper(PrivilegedUserMapper.class)
                                 .getUserByUuid(uuid.toString());
 
                         privilegedUserCompletableFuture.complete(privilegedUser);
@@ -148,17 +146,15 @@ public class LoginController implements LoginApi {
                         privilegedUserCompletableFuture.completeExceptionally(e);
                     }
                 });
-        PrivilegedUser privilegedUser = privilegedUserCompletableFuture.join();
+        Optional<PrivilegedUser> privilegedUser = privilegedUserCompletableFuture.join();
         claimList.add(PermissionClaimDto.USER);
-        if (privilegedUser != null) {
+        privilegedUser.ifPresent(user -> user.getPermissions().forEach(permission -> {
-            privilegedUser.getPermissions().forEach(permission -> {
+            try {
-                try {
+                claimList.add(PermissionClaimDto.valueOf(permission));
-                    claimList.add(PermissionClaimDto.valueOf(permission));
+            } catch (IllegalArgumentException e) {
-                } catch (IllegalArgumentException e) {
+                log.warn("Received invalid permission claim: {}", permission);
-                    log.warn("Received invalid permission claim: {}", permission);
+            }
-                }
+        }));
-            });
-        }
         JwtClaimsSet claims = JwtClaimsSet.builder()
                 .issuer("altitudeweb")
                 .claim("authorities", claimList.stream().map(PermissionClaimDto::getValue).toList())

backend/src/main/java/com/alttd/altitudeweb/controllers/particles/ParticleController.java

@@ -0,0 +1,176 @@
+package com.alttd.altitudeweb.controllers.particles;
+
+import com.alttd.altitudeweb.api.ParticlesApi;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.core.io.ByteArrayResource;
+import org.springframework.core.io.Resource;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+@Slf4j
+@RequiredArgsConstructor
+@RestController
+public class ParticleController implements ParticlesApi {
+
+    @Value("${login.secret:#{null}}")
+    private String loginSecret;
+
+    @Value("${particles.file_path}")
+    private String particlesFilePath;
+
+    @Value("${notification.server.url:http://localhost:8080}")
+    private String notificationServerUrl;
+
+    @Override
+    public ResponseEntity<Resource> downloadFile(String authorization, String filename) throws Exception {
+        if (authorization == null || !authorization.equals(loginSecret)) {
+            return ResponseEntity.status(401).build();
+        }
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not downloading particles file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetFile = new File(file, filename);
+        return getFileForDownload(targetFile, filename);
+    }
+
+    @Override
+    public ResponseEntity<Resource> downloadFileForUser(String authorization, String uuid, String filename) throws Exception {
+        if (authorization == null || !authorization.equals(loginSecret)) {
+            return ResponseEntity.status(401).build();
+        }
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not downloading particles user file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetDir = new File(file, uuid);
+        if (targetDir.exists()) {
+            return getFileForDownload(targetDir, filename);
+        } else {
+            log.warn("User {} does not have a directory for particles files", uuid);
+            return ResponseEntity.notFound().build();
+        }
+    }
+
+    private ResponseEntity<Resource> getFileForDownload(File file, String filename) {
+        File targetFile = new File(file, filename);
+        if (!targetFile.exists()) {
+            log.warn("Particles file {} does not exist", targetFile.getAbsolutePath());
+            return ResponseEntity.notFound().build();
+        }
+
+        if (!targetFile.isFile()) {
+            log.warn("Particles file {} is not a file", targetFile.getAbsolutePath());
+            return ResponseEntity.status(404).build();
+        }
+
+        try {
+            Path path = targetFile.toPath();
+            ByteArrayResource resource = new ByteArrayResource(Files.readAllBytes(path));
+
+            return ResponseEntity.ok()
+                    .contentLength(targetFile.length())
+                    .contentType(MediaType.APPLICATION_JSON)
+                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"")
+                    .body(resource);
+        } catch (IOException e) {
+            log.error("Failed to read particles file {}: {}", targetFile.getAbsolutePath(), e.getMessage(), e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+
+    }
+
+    @Override
+    public ResponseEntity<Void> saveFile(String filename, MultipartFile content) throws Exception {
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not saving particles file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        notifyServerOfFileUpload(filename);
+        return voidResponseEntity;
+    }
+
+    @Override
+    public ResponseEntity<Void> saveFileForUser(String uuid, String filename, MultipartFile content) throws Exception {
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not saving particles user file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetDir = new File(file, uuid);
+        if (!file.exists()) {
+            log.debug("Creating particles directory {}", targetDir.getAbsolutePath());
+            if (targetDir.mkdirs()) {
+                log.info("Created particles user directory {}", targetDir.getAbsolutePath());
+            }
+        }
+
+        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        notifyServerOfFileUpload(uuid, filename);
+        return voidResponseEntity;
+    }
+
+    private void notifyServerOfFileUpload(String filename) {
+        String notificationUrl = String.format("%s/notify/%s.json", notificationServerUrl, filename);
+        sendNotification(notificationUrl, String.format("file upload: %s", filename));
+    }
+
+    private void notifyServerOfFileUpload(String uuid, String filename) {
+        String notificationUrl = String.format("%s/notify/%s/%s.json", notificationServerUrl, uuid, filename);
+        sendNotification(notificationUrl, String.format("file upload for user %s: %s", uuid, filename));
+    }
+
+    private void sendNotification(String notificationUrl, String logDescription) {
+        try {
+            RestTemplate restTemplate = new RestTemplate();
+            ResponseEntity<String> response = restTemplate.getForEntity(notificationUrl, String.class);
+
+            if (response.getStatusCode().is2xxSuccessful()) {
+                log.info("Successfully notified server of {}", logDescription);
+            } else {
+                log.warn("Failed to notify server of {}, status: {}",
+                         logDescription, response.getStatusCode());
+            }
+        } catch (Exception e) {
+            log.error("Error notifying server of {}", logDescription, e);
+        }
+    }
+
+
+    private ResponseEntity<Void> writeContentToFile(File dir, String filename, MultipartFile content) {
+        File targetFile = new File(dir, filename);
+        if (!Files.isWritable(targetFile.toPath())) {
+            log.error("Particles file {} is not writable", targetFile.getAbsolutePath());
+            return ResponseEntity.status(403).build();
+        }
+
+        if (targetFile.exists()) {
+            log.warn("Overwriting existing particles file {}", targetFile.getAbsolutePath());
+        }
+
+        try {
+            content.transferTo(targetFile);
+        } catch (Exception e) {
+            log.error("Failed to write particles file {}", targetFile.getAbsolutePath(), e);
+            return ResponseEntity.status(500).build();
+        }
+
+        return ResponseEntity.ok().build();
+    }
+}

backend/src/main/resources/application.properties

@@ -6,4 +6,6 @@ database.user=${DB_USER:root}
 database.password=${DB_PASSWORD:root}
 cors.allowed-origins=${CORS:https://alttd.com}
 login.secret=${LOGIN_SECRET:SET_TOKEN}
+particles.file_path=${user.home}/.altitudeweb/particles
+notification.server.url=${SERVER_IP:10.0.0.107}:${SERVER_PORT:8080}
 logging.level.com.alttd.altitudeweb=INFO

database/src/main/java/com/alttd/altitudeweb/database/web_db/PrivilegedUserMapper.java

@@ -1,8 +1,10 @@
 package com.alttd.altitudeweb.database.web_db;
 
 import org.apache.ibatis.annotations.*;
+import org.jetbrains.annotations.Nullable;
 
 import java.util.List;
+import java.util.Optional;
 
 public interface PrivilegedUserMapper {
 
@@ -23,7 +25,7 @@ public interface PrivilegedUserMapper {
             @Result(property = "permissions", column = "id", javaType = List.class,
                     many = @Many(select = "getPermissionsForUser"))
     })
-    PrivilegedUser getUserByUuid(@Param("uuid") String uuid);
+    Optional<PrivilegedUser> getUserByUuid(@Param("uuid") String uuid);
 
     /**
      * Retrieves all privileged users with their permissions

database/src/main/java/com/alttd/altitudeweb/setup/InitializeWebDb.java

@@ -2,6 +2,7 @@ package com.alttd.altitudeweb.setup;
 
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.web_db.KeyPairMapper;
+import com.alttd.altitudeweb.database.web_db.PrivilegedUserMapper;
 import com.alttd.altitudeweb.database.web_db.SettingsMapper;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.ibatis.session.SqlSession;
@@ -18,6 +19,7 @@ public class InitializeWebDb {
         Connection.getConnection(Databases.DEFAULT, (configuration) -> {
                     configuration.addMapper(SettingsMapper.class);
                     configuration.addMapper(KeyPairMapper.class);
+                    configuration.addMapper(PrivilegedUserMapper.class);
                 }).join()
                 .runQuery(SqlSession -> {
                     createSettingsTable(SqlSession);

frontend/package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@auth0/angular-jwt": "^5.2.0",
     "@types/three": "^0.177.0",
     "ngx-cookie-service": "^19.1.2",
     "rxjs": "~7.8.0",

frontend/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
-import {ALTITUDE_VERSION} from './constant';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
 import {Router, RouterOutlet} from '@angular/router';
-import {FooterComponent} from './footer/footer.component';
+import {FooterComponent} from '@pages/footer/footer/footer.component';
 
 @Component({
   standalone: true,
@@ -10,8 +10,8 @@ import {FooterComponent} from './footer/footer.component';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
-    FooterComponent,
+    RouterOutlet,
-    RouterOutlet
+    FooterComponent
   ]
 })
 export class AppComponent implements OnInit {

frontend/src/app/app.config.ts

@@ -1,8 +1,26 @@
 import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
 import {provideRouter} from '@angular/router';
+import {JwtHelperService, JwtModule} from '@auth0/angular-jwt';
+import {CookieService} from 'ngx-cookie-service';
 
 import {routes} from './app.routes';
 
+// Function to get the JWT token from cookies
+export function jwtTokenGetter() {
+  const cookieService = new CookieService(document, null);
+  return cookieService.check('jwt') ? cookieService.get('jwt') : null;
+}
+
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({eventCoalescing: true}), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({eventCoalescing: true}),
+    provideRouter(routes),
+    { provide: CookieService, useClass: CookieService },
+    { provide: JwtHelperService, useClass: JwtHelperService },
+    { provide: JwtModule, useValue: JwtModule.forRoot({
+      config: {
+        tokenGetter: jwtTokenGetter
+      }
+    })}
+  ]
 };

frontend/src/app/app.routes.ts

@@ -3,114 +3,110 @@ import {Routes} from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
+    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
   },
   {
     path: 'particles',
-    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
+    loadComponent: () => import('./pages/particles/particles.component').then(m => m.ParticlesComponent)
   },
   {
     path: 'map',
-    loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
+    loadComponent: () => import('./pages/features/map/map.component').then(m => m.MapComponent)
   },
   {
     path: 'rules',
-    loadComponent: () => import('./rules/rules.component').then(m => m.RulesComponent)
+    loadComponent: () => import('./pages/reference/rules/rules.component').then(m => m.RulesComponent)
   },
   {
     path: 'vote',
-    loadComponent: () => import('./vote/vote.component').then(m => m.VoteComponent)
+    loadComponent: () => import('./pages/vote/vote.component').then(m => m.VoteComponent)
   },
   {
     path: 'about',
-    loadComponent: () => import('./about/about.component').then(m => m.AboutComponent)
+    loadComponent: () => import('./pages/altitude/about/about.component').then(m => m.AboutComponent)
   },
   {
     path: 'socials',
-    loadComponent: () => import('./socials/socials.component').then(m => m.SocialsComponent)
+    loadComponent: () => import('./pages/altitude/socials/socials.component').then(m => m.SocialsComponent)
   },
   {
     path: 'team',
-    loadComponent: () => import('./team/team.component').then(m => m.TeamComponent)
+    loadComponent: () => import('./pages/altitude/team/team.component').then(m => m.TeamComponent)
   },
   {
     path: 'birthdays',
-    loadComponent: () => import('./birthdays/birthdays.component').then(m => m.BirthdaysComponent)
+    loadComponent: () => import('./pages/altitude/birthdays/birthdays.component').then(m => m.BirthdaysComponent)
   },
   {
     path: 'terms',
-    loadComponent: () => import('./terms/terms.component').then(m => m.TermsComponent)
+    loadComponent: () => import('./pages/footer/terms/terms.component').then(m => m.TermsComponent)
   },
   {
     path: 'privacy',
-    loadComponent: () => import('./privacy/privacy.component').then(m => m.PrivacyComponent)
+    loadComponent: () => import('./pages/footer/privacy/privacy.component').then(m => m.PrivacyComponent)
   },
   {
     path: 'bans',
-    loadComponent: () => import('./bans/bans.component').then(m => m.BansComponent)
+    loadComponent: () => import('./pages/reference/bans/bans.component').then(m => m.BansComponent)
   },
   {
     path: 'bans/:type/:id',
-    loadComponent: () => import('./bans/details/details.component').then(m => m.DetailsComponent)
+    loadComponent: () => import('./pages/reference/bans/details/details.component').then(m => m.DetailsComponent)
   },
   {
     path: 'economy',
-    loadComponent: () => import('./economy/economy.component').then(m => m.EconomyComponent)
+    loadComponent: () => import('./pages/features/economy/economy.component').then(m => m.EconomyComponent)
   },
   {
     path: 'claiming',
-    loadComponent: () => import('./claiming/claiming.component').then(m => m.ClaimingComponent)
+    loadComponent: () => import('./pages/features/claiming/claiming.component').then(m => m.ClaimingComponent)
   },
   {
     path: 'mypet',
-    loadComponent: () => import('./mypet/mypet.component').then(m => m.MypetComponent)
+    loadComponent: () => import('./pages/features/mypet/mypet.component').then(m => m.MypetComponent)
   },
   {
     path: 'warps',
-    loadComponent: () => import('./warps/warps.component').then(m => m.WarpsComponent)
+    loadComponent: () => import('./pages/features/warps/warps.component').then(m => m.WarpsComponent)
   },
   {
     path: 'skyblock',
-    loadComponent: () => import('./skyblock/skyblock.component').then(m => m.SkyblockComponent)
+    loadComponent: () => import('./pages/features/skyblock/skyblock.component').then(m => m.SkyblockComponent)
   },
   {
     path: 'customfeatures',
-    loadComponent: () => import('./customfeatures/customfeatures.component').then(m => m.CustomfeaturesComponent)
+    loadComponent: () => import('./pages/features/customfeatures/customfeatures.component').then(m => m.CustomfeaturesComponent)
   },
   {
     path: 'guide',
-    loadComponent: () => import('./guide/guide.component').then(m => m.GuideComponent)
+    loadComponent: () => import('./pages/reference/guide/guide.component').then(m => m.GuideComponent)
   },
   {
     path: 'ranks',
-    loadComponent: () => import('./ranks/ranks.component').then(m => m.RanksComponent)
+    loadComponent: () => import('./pages/reference/ranks/ranks.component').then(m => m.RanksComponent)
   },
   {
     path: 'commandlist',
-    loadComponent: () => import('./commandlist/commandlist.component').then(m => m.CommandlistComponent)
+    loadComponent: () => import('./pages/reference/commandlist/commandlist.component').then(m => m.CommandlistComponent)
   },
   {
     path: 'mapart',
-    loadComponent: () => import('./mapart/mapart.component').then(m => m.MapartComponent)
+    loadComponent: () => import('./pages/reference/mapart/mapart.component').then(m => m.MapartComponent)
   },
   {
     path: 'lag',
-    loadComponent: () => import('./lag/lag.component').then(m => m.LagComponent)
+    loadComponent: () => import('./pages/reference/lag/lag.component').then(m => m.LagComponent)
   },
   {
     path: 'staffpowers',
-    loadComponent: () => import('./staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
+    loadComponent: () => import('./pages/reference/staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
   },
   {
     path: 'forms/:form',
-    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
   },
   {
     path: 'forms',
-    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
-  },
+  }
-  {
-    path: 'particles',
-    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
-  },
 ];

frontend/src/app/login/login.component.html

@@ -1,18 +0,0 @@
-<h2 mat-dialog-title>Login</h2>
-<div mat-dialog-content>
-  <form [formGroup]="loginForm">
-    <mat-form-field appearance="fill" style="width: 100%">
-      <mat-label>Enter your code</mat-label>
-      <input matInput formControlName="code" type="text">
-      <mat-error *ngIf="formHasError()">
-        Code is required
-      </mat-error>
-    </mat-form-field>
-  </form>
-</div>
-<div mat-dialog-actions align="end">
-  <button mat-button (click)="onCancel()">Cancel</button>
-  <button mat-flat-button color="primary" (click)="onSubmit()" [disabled]="!loginForm.valid">
-    Submit
-  </button>
-</div>

frontend/src/app/pages/altitude/about/about.component.ts

@@ -1,16 +1,14 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
 import {CommonModule} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
-import {RemoveTrailingPeriodPipe} from "../util/RemoveTrailingPeriodPipe";
 
 @Component({
   selector: 'app-about',
   standalone: true,
   imports: [
     CommonModule,
-    HeaderComponent,
+    HeaderComponent
-    RemoveTrailingPeriodPipe
   ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'

frontend/src/app/pages/altitude/birthdays/birthdays.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
 import {CommonModule} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-birthdays',

frontend/src/app/pages/altitude/socials/socials.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-socials',

frontend/src/app/pages/altitude/team/team.component.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
-import {BASE_PATH, Player, TeamService} from '../../api';
+import {BASE_PATH, Player, TeamService} from '@api';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {CookieService} from 'ngx-cookie-service';
 import {map, Observable, shareReplay} from 'rxjs';
-import {environment} from '../../environments/environment';
+import {environment} from '@environment';
 
 @Component({
   selector: 'app-team',

frontend/src/app/pages/features/claiming/claiming.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/features/customfeatures/customfeatures.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 import {RouterLink} from '@angular/router';
 
 @Component({

frontend/src/app/pages/features/economy/economy.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 
 @Component({

frontend/src/app/pages/features/map/map.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   standalone: true,

frontend/src/app/pages/features/mypet/mypet.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 
 @Component({

frontend/src/app/pages/features/skyblock/skyblock.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-skyblock',

frontend/src/app/pages/features/warps/warps.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/footer/footer/footer.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ALTITUDE_VERSION} from '../constant';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/footer/privacy/privacy.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
 import {CommonModule} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {RouterLink} from '@angular/router';
 
 @Component({

frontend/src/app/pages/footer/terms/terms.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {CommonModule} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/forms/appeal/appeal.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormsComponent} from '../forms.component';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {AppealsService, MinecraftAppeal} from '../../../api';
+import {AppealsService, MinecraftAppeal} from '@api';
 
 @Component({
   selector: 'app-appeal',

frontend/src/app/pages/forms/forms.component.ts

@@ -1,12 +1,12 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {MatDialog} from '@angular/material/dialog';
 import {ActivatedRoute} from '@angular/router';
-import {LoginDialogComponent} from '../login/login.component';
+import {LoginDialogComponent} from '@shared-components/login/login.component';
 import {KeyValuePipe, NgForOf, NgIf} from '@angular/common';
 import {FormType} from './form_type';
 import {MatButton} from '@angular/material/button';
-import {AuthService} from '../services/auth.service';
+import {AuthService} from '@services/auth.service';
 
 @Component({
   selector: 'app-forms',

frontend/src/app/pages/header/header/header.component.html

@@ -130,7 +130,19 @@
               <li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
             </ul>
           </li>
+          <li class="nav_li" *ngIf="isAuthenticated">
+            <a [id]="getCurrentPageId(['particles'])"
+               class="nav_link fake_link" [ngClass]="active">Special</a>
+            <ul class="dropdown" *ngIf="hasAccess(['HEAD_MOD'])">
+              <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
+            </ul>
+          </li>
         </ul>
+        <ng-container *ngIf="!isAuthenticated">
+          <button mat-button (click)="openLoginDialog()" style="color: white">
+            Login
+          </button>
+        </ng-container>
         <app-theme></app-theme>
       </div>
     </nav>

frontend/src/app/pages/header/header/header.component.ts

@@ -1,7 +1,12 @@
-import {Component, HostListener, Input} from '@angular/core';
+import {Component, HostListener, Input, OnDestroy, OnInit} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
-import {ThemeComponent} from '../theme/theme.component';
+import {ThemeComponent} from '@shared-components/theme/theme.component';
 import {RouterLink} from '@angular/router';
+import {AuthService} from '@services/auth.service';
+import {Subscription} from 'rxjs';
+import {LoginDialogComponent} from '@shared-components/login/login.component';
+import {MatButton} from '@angular/material/button';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   standalone: true,
@@ -9,13 +14,14 @@ import {RouterLink} from '@angular/router';
     CommonModule,
     ThemeComponent,
     RouterLink,
-    NgOptimizedImage
+    NgOptimizedImage,
+    MatButton
   ],
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit, OnDestroy {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
@@ -23,6 +29,24 @@ export class HeaderComponent {
 
   public active: string = '';
   public inverseYPos: number = 0;
+  private subscription: Subscription | undefined;
+  public isAuthenticated: boolean = false;
+
+  constructor(protected authService: AuthService,
+              private dialog: MatDialog) {
+
+  }
+
+  ngOnInit(): void {
+    this.subscription = this.authService.isAuthenticated$.subscribe(isAuthenticated => {
+        this.isAuthenticated = isAuthenticated;
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
 
   @HostListener('window:scroll', [])
   onWindowScroll(): void {
@@ -59,4 +83,17 @@ export class HeaderComponent {
       return '';
     }
   }
+
+  public openLoginDialog() {
+    const dialogRef = this.dialog.open(LoginDialogComponent, {
+      width: '400px',
+    })
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+    });
+  }
+
+  public hasAccess(claims: string[]): boolean {
+    return this.authService.hasAccess(claims)
+  }
 }

frontend/src/app/pages/home/home.component.ts

@@ -1,10 +1,10 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {ALTITUDE_VERSION} from '../constant';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
-import {CopyIpComponent} from '../copy-ip/copy-ip.component';
+import {CopyIpComponent} from '@shared-components/copy-ip/copy-ip.component';
 import {RouterLink} from '@angular/router';
 
 @Component({

frontend/src/app/pages/particles/components/frames/frames.component.html

@@ -0,0 +1,48 @@
+<div class="card-div">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Frames</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="frames-container">
+        <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
+                       (selectedIndexChange)="switchFrame(frames[$event])">
+          <mat-tab *ngFor="let frameId of frames" [label]="frameId">
+            <div class="frame-content">
+              <h3>Particles in {{ frameId }}</h3>
+              <div class="particles-list">
+                <div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
+                <span class="particle-item-text">
+                  Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
+                  , {{ particle.z.toFixed(2) }})
+                </span>
+                  <button mat-icon-button (click)="removeParticle(frameId, i)">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                  <button mat-icon-button (click)="highlightParticle(frameId, i)">
+                    <mat-icon>lightbulb</mat-icon>
+                  </button>
+                </div>
+                <div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
+                     class="no-particles">
+                  No particles in this frame. Click on the plane to add particles.
+                </div>
+              </div>
+              <div class="frame-actions">
+                <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
+                        [disabled]="frames.length <= 1">
+                  Remove Frame
+                </button>
+              </div>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+        <div class="add-frame">
+          <button mat-raised-button color="primary" (click)="addFrame()">
+            Add New Frame
+          </button>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

frontend/src/app/pages/particles/components/frames/frames.component.scss

@@ -0,0 +1,61 @@
+.frames-container {
+  margin-top: 10px;
+}
+
+.frame-content {
+  padding: 15px;
+}
+
+.particles-list {
+  height: 550px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+
+.particle-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #eee;
+  gap: 10px;
+}
+
+.particle-item-text {
+  flex-grow: 1;
+}
+
+.particle-item:last-child {
+  border-bottom: none;
+}
+
+.no-particles {
+  padding: 20px;
+  text-align: center;
+  color: var(--color-primairy);
+}
+
+.frame-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.add-frame {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+}
+
+.card-div {
+  mat-card {
+    background-color: var(--color-primary);
+    color: var(--font-color);
+  }
+}
+
+span {
+  color: var(--font-color);
+}

frontend/src/app/pages/particles/components/frames/frames.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FramesComponent } from './frames.component';
+
+describe('FramesComponent', () => {
+  let component: FramesComponent;
+  let fixture: ComponentFixture<FramesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FramesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FramesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/pages/particles/components/frames/frames.component.ts

@@ -0,0 +1,89 @@
+import {Component} from '@angular/core';
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {NgForOf, NgIf} from "@angular/common";
+import {ParticleData} from '../../models/particle.model';
+import {MatIcon} from '@angular/material/icon';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+import {FrameManagerService} from '../../services/frame-manager.service';
+
+@Component({
+  selector: 'app-frames',
+  imports: [
+    MatButton,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatIcon,
+    MatIconButton,
+    MatTab,
+    MatTabGroup,
+    NgForOf,
+    NgIf
+  ],
+  templateUrl: './frames.component.html',
+  styleUrl: './frames.component.scss'
+})
+export class FramesComponent {
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+    private frameManagerService: FrameManagerService) {
+  }
+
+  /**
+   * Get the particle data
+   */
+  public get particleData(): ParticleData {
+    return this.particleManagerService.getParticleData();
+  }
+
+  /**
+   * Get the current frame
+   */
+  public get currentFrame(): string {
+    return this.particleManagerService.getCurrentFrame();
+  }
+
+  /**
+   * Get all frames
+   */
+  public get frames(): string[] {
+    return this.particleManagerService.getFrames();
+  }
+
+  /**
+   * Add a new frame
+   */
+  public addFrame(): void {
+    this.frameManagerService.addFrame();
+  }
+
+  /**
+   * Switch to a different frame
+   */
+  public switchFrame(frameId: string): void {
+    this.frameManagerService.switchFrame(frameId);
+  }
+
+  /**
+   * Remove a particle
+   */
+  public removeParticle(frameId: string, index: number): void {
+    this.particleManagerService.removeParticle(frameId, index);
+  }
+
+  /**
+   * Remove a frame
+   */
+  public removeFrame(frameId: string): void {
+    this.frameManagerService.removeFrame(frameId);
+  }
+
+
+  public highlightParticle(frameId: string, i: number) {
+    this.particleManagerService.highlightParticle(frameId, i);
+  }
+}

frontend/src/app/pages/particles/components/particle/particle.component.html

@@ -0,0 +1,37 @@
+<div class="card-div">
+  <mat-card class="particle-card">
+    <mat-card-header>
+      <mat-card-title>Particle Properties</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="particle-properties">
+        <div class="property-row">
+          <div class="color-picker">
+            <input type="color" [(ngModel)]="selectedColor">
+            <span>Current color: {{ selectedColor }}</span>
+          </div>
+          <mat-form-field appearance="fill" 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">
+              <mat-option *ngFor="let type of filteredParticleTypes | async" [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>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

frontend/src/app/pages/particles/components/particle/particle.component.scss

@@ -0,0 +1,61 @@
+.particle-card {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.particle-properties {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.property-row {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+}
+
+.type-field {
+  flex: 1;
+  min-width: 20ch;
+  max-width: 40ch;
+}
+
+.color-picker {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+}
+
+.color-picker input[type="color"] {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.card-div {
+  mat-card {
+    background-color: var(--color-primary);
+    color: var(--font-color);
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+.size-slider {
+  width: 95%;
+  display: flex;
+  flex-direction: column;
+  margin-top: 5px;
+}
+
+span {
+  color: var(--font-color);
+  font-size: 0.9rem;
+}

frontend/src/app/pages/particles/components/particle/particle.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ParticleComponent} from './particle.component';
+
+describe('ParticleComponent', () => {
+  let component: ParticleComponent;
+  let fixture: ComponentFixture<ParticleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticleComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ParticleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/pages/particles/components/particle/particle.component.ts

@@ -0,0 +1,115 @@
+import {Component, OnInit} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+import {Particle} from '../../models/particle.model';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+import {AsyncPipe, NgForOf} from '@angular/common';
+
+@Component({
+  selector: 'app-particle',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    ReactiveFormsModule,
+    FormsModule,
+    MatSliderModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    NgForOf,
+    AsyncPipe
+  ],
+  templateUrl: './particle.component.html',
+  styleUrl: './particle.component.scss'
+})
+export class ParticleComponent implements OnInit {
+  // Available particle types from the enum
+  particleTypes = Object.values(Particle);
+
+  // Form control for the particle type dropdown with filtering
+  particleTypeControl = new FormControl();
+  filteredParticleTypes: Observable<string[]>;
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+  ) {
+    this.filteredParticleTypes = this.particleTypeControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filterParticleTypes(value || ''))
+    );
+  }
+
+  ngOnInit() {
+    // Initialize the particle type control with the current value
+    this.particleTypeControl.setValue(this.selectedParticle);
+
+    // Update the selected particle when the control value changes
+    this.particleTypeControl.valueChanges.subscribe(value => {
+      if (value && Object.values(Particle).includes(value)) {
+        this.selectedParticle = value;
+      }
+    });
+  }
+
+  private _filterParticleTypes(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return this.particleTypes.filter(type => type.toLowerCase().includes(filterValue));
+  }
+
+  // Display function for the autocomplete
+  displayFn(particle: string): string {
+    return particle ? particle : '';
+  }
+
+  /**
+   * Get the selected color
+   */
+  public get selectedColor(): string {
+    return this.particleManagerService.getSelectedColor();
+  }
+
+  /**
+   * Set the selected color
+   */
+  public set selectedColor(color: string) {
+    this.particleManagerService.setSelectedColor(color);
+  }
+
+  /**
+   * Get the selected particle type
+   */
+  public get selectedParticle(): Particle {
+    return this.particleManagerService.particle;
+  }
+
+  /**
+   * Set the selected particle type
+   */
+  public set selectedParticle(particle: Particle) {
+    this.particleManagerService.particle = particle;
+  }
+
+  /**
+   * Get the selected particle size
+   */
+  public get selectedSize(): number {
+    return this.particleManagerService.size;
+  }
+
+  /**
+   * Set the selected particle size
+   */
+  public set selectedSize(size: number) {
+    this.particleManagerService.size = size;
+  }
+}

frontend/src/app/pages/particles/components/properties/properties.component.html

@@ -0,0 +1,93 @@
+<div class="card-div">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Particle Properties</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <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">
+        </mat-form-field>
+      </div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Particle Type</mat-label>
+          <mat-select [(ngModel)]="particleData.particle_type">
+            <mat-option *ngFor="let type of particleTypes" [value]="type">{{ type }}</mat-option>
+          </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">
+        </mat-form-field>
+      </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>
+      </div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Package Permission</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>Frame Delay</mat-label>
+          <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
+        </mat-form-field>
+      </div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <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>
+
+      <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>

frontend/src/app/pages/particles/components/properties/properties.component.scss

@@ -0,0 +1,14 @@
+.form-row {
+  margin-bottom: 15px;
+}
+
+.card-div {
+  mat-card {
+    background-color: var(--color-primary);
+    color: var(--font-color);
+  }
+}
+
+span {
+  color: var(--font-color);
+}

frontend/src/app/pages/particles/components/properties/properties.component.spec.ts

@@ -0,0 +1,23 @@
+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();
+  });
+});

frontend/src/app/pages/particles/components/properties/properties.component.ts

@@ -0,0 +1,43 @@
+import {Component} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
+import {NgForOf} from "@angular/common";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {ParticleData, ParticleType} from '../../models/particle.model';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+
+@Component({
+  selector: 'app-particle-properties',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatCheckbox,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatOption,
+    MatSelect,
+    NgForOf,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './properties.component.html',
+  styleUrl: './properties.component.scss'
+})
+export class PropertiesComponent {
+  public particleTypes = Object.values(ParticleType);
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+  ) {
+  }
+
+  public get particleData(): ParticleData {
+    return this.particleManagerService.getParticleData();
+  }
+}

frontend/src/app/pages/particles/components/render-container/render-container.component.html

@@ -0,0 +1,54 @@
+<div #rendererContainer class="renderer-container">
+  <div class="plane-controls-overlay">
+    <div>
+      <mat-form-field appearance="outline" style="width: 10ch">
+        <mat-label>Opacity</mat-label>
+        <input matInput type="number" [(ngModel)]="opacity" min="0" max="1" step="0.01" placeholder="">
+      </mat-form-field>
+    </div>
+    <div class="button-row">
+      <button mat-mini-fab color="primary" (click)="resetCamera()"
+              matTooltip="Reset camera">
+        <mat-icon>location_searching</mat-icon>
+      </button>
+
+      <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
+              [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+        <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
+      </button>
+    </div>
+
+    <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
+      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
+              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
+              matTooltip="Vertical Above">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
+              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
+              matTooltip="Vertical Below">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
+              matTooltip="Horizontal Front">
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
+              matTooltip="Horizontal Behind">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
+              matTooltip="Horizontal Right">
+        <mat-icon>arrow_right</mat-icon>
+      </button>
+      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
+              matTooltip="Horizontal Left">
+        <mat-icon>arrow_left</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

frontend/src/app/pages/particles/components/render-container/render-container.component.scss

@@ -0,0 +1,53 @@
+.renderer-container {
+  height: 1000px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: var(--color-primairy);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative; /* Added for absolute positioning of overlay */
+}
+
+.plane-controls-overlay {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  z-index: 10;
+}
+
+.button-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.plane-orientation-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.plane-orientation-buttons button {
+  opacity: 0.7;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.plane-orientation-buttons button:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.plane-orientation-buttons button.active {
+  opacity: 1;
+  transform: scale(1.1);
+  box-shadow: 0 0 10px var(--color-tertiary);
+}