Merge pull request #22 from RIT-SWEN-261-02/css

Merge css into main

43 files changed, 1623 insertions, 444 deletions

diff --git a/ufund-ui/public/jf.png b/ufund-ui/public/jf.png
new file mode 100644
index 0000000..bbf95d5
--- /dev/null
+++ b/ufund-ui/public/jf.png
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index a6ea806..89b6f67 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -9,13 +9,13 @@ import {NeedPageComponent} from './components/need-page/need-page.component';
 import {SignupComponent} from './components/signup/signup.component';
 
 const routes: Routes = [
-    {path: '', component: HomePageComponent},
-    {path: 'login', component: LoginComponent},
-    {path: 'cupboard', component: CupboardComponent},
-    {path: 'dashboard', component: DashboardComponent},
-    {path: 'basket', component: FundingBasketComponent},
-    {path: 'need/:id', component: NeedPageComponent},
-    {path: 'signup', component: SignupComponent},
+    { path: '',          component: HomePageComponent,      title: "Home | JS"      },
+    { path: 'login',     component: LoginComponent,         title: "Login | JS"     },
+    { path: 'cupboard',  component: CupboardComponent,      title: "Cupboard | JS"  },
+    { path: 'dashboard', component: DashboardComponent,     title: "Dashboard | JS" },
+    { path: 'basket',    component: FundingBasketComponent, title: "Basket | JS"    },
+    { path: 'need/:id',  component: NeedPageComponent,      title: "Need | JS"      },
+    { path: 'signup',    component: SignupComponent,        title: "Signup | JS"    },
 ];
 
 @NgModule({
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..f4ed668 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,70 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/
+    padding: 15px 20px;
+    /*background-color: light-dark(#f5f5f5, #2e2e2e);*/
+    z-index: 2;
+
+    h1 {
+        padding: 0;
+        margin: 0;
+        font-weight: 500;
+        /*text-decoration: none;*/
+        text-transform: uppercase;
+        font-size: 16pt;
+        letter-spacing: .5px;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    /*div:has(a:hover) a {*/
+    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
+    /*}*/
+
+    a {
+        color: light-dark(black, white);
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    /*a {*/
+    /*    display: block;*/
+    /*    position: relative;*/
+    /*    padding: 0.1em 0;*/
+    /*}*/
+
+    /*a::after {*/
+    /*    content: '';*/
+    /*    position: absolute;*/
+    /*    bottom: 4px;*/
+    /*    left: 0;*/
+    /*    width: 100%;*/
+    /*    height: 0.03em;*/
+    /*    background-color: white;*/
+    /*    opacity: 0;*/
+    /*    transition: opacity 300ms, transform 300ms;*/
+    /*}*/
+
+    /*a:hover::after,*/
+    /*a:focus::after {*/
+    /*    opacity: 1;*/
+    /*    transform: translate3d(0, 0.2em, 0);*/
+    /*}*/
+
+
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..959eada 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+    <div>
+        <a routerLink="/">
+            <h1>Jelly Solutions</h1>
+        </a>
+    </div>
+    <div>
+        <a routerLink="/dashboard">Dashboard</a>
+        <a routerLink="/cupboard">Cupboard</a>
+        <a routerLink="/basket">Basket</a>
+<!--        <span>{{currentUser$ | async}}</span>-->
+        <button *ngIf="currentUser | async" (click)="logout()"> Log Out</button>
+        <button *ngIf="!(currentUser | async)" (click)="login()"> Log In</button>
+    </div>
+</div>
 
 <router-outlet />
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 86717c4..2f98334 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,7 +1,10 @@
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
+import {ToastsService} from './services/toasts.service';
+import {User} from './models/User';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -11,10 +14,14 @@ import {AuthService} from './services/auth.service';
 })
 export class AppComponent implements OnInit {
     // title = 'ufund-ui';
-    currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
+    currentUser?: BehaviorSubject<User | null>;
 
     constructor(
         private authService: AuthService,
+        private router: Router,
+        private route: ActivatedRoute,
+        protected toastService: ToastsService,
+        private viewContainerRef: ViewContainerRef,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -23,12 +30,22 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.authService.getCurrentUserSubject().subscribe(r => {
-            this.currentUser$?.next(r
-                ? "Logged in as " + r.username
-                : "Logged out."
-            )
-        })
+        this.toastService.setRootViewContainerRef(this.viewContainerRef)
+        this.currentUser = this.authService.getCurrentUserSubject()
+        let data = localStorage.getItem("credential");
+        if (data) {
+            let dataParsed = JSON.parse(data)
+            this.authService.restoreLogin(dataParsed.username, dataParsed.key)
+            console.log("Key found", dataParsed.key)
+        }
     }
 
+    login() {
+        this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+    }
+
+    logout() {
+        localStorage.removeItem("credential")
+        location.reload()
+    }
 }
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index 156ef5f..16455be 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -14,7 +14,10 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {DashboardComponent} from './components/dashboard/dashboard.component';
 import {CommonModule} from '@angular/common';
 import {LoginComponent} from './components/login/login.component';
+import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 import { SignupComponent } from './components/signup/signup.component';
+import { ToastComponent } from './components/toast/toast.component';
+import { NeedEditComponent } from './components/need-edit/need-edit.component';
 
 @NgModule({
     declarations: [
@@ -27,6 +30,9 @@ import { SignupComponent } from './components/signup/signup.component';
         DashboardComponent,
         LoginComponent,
         SignupComponent,
+        MiniNeedListComponent,
+        ToastComponent,
+        NeedEditComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,21 +1,54 @@
 :host {
-    display: block;
-    border: 2px solid #000;
-    border-radius: 5px;
-    padding: 10px 20px;
+    display: flex;
+    justify-content: center;
 }
 
-#menu, #create-form, #delete-form, #update-form {
-   background-color: #d9d9d9;
+#box {
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+}
+
+#menu {
+      display: flex;
+
+      margin: 10px;
+
+}
+
+.tab, .selected-tab {
+   background-color: lightgray;
+   border: 3px solid #000;
+   border-top-left-radius: 5px;
+   border-top-right-radius: 5px;
+   margin-right: 5px;
+   border-bottom: 0;
+}
+
+.selected-tab {
+   background-color: white;
+}
+
+#create-form, #delete-form, #update-form {
+   background-color: #3a3a3a;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
-   border-radius: 5px;  
-   width: 20%;
+   border-radius: 5px;
    visibility: visible;
-
+    /*position: absolute;*/
 }
 
-#create-button {
-   padding: 10px 20px;
-   
-}
\ No newline at end of file
+#header {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    h1 {
+        display: inline;
+        width: min-content;
+    }
+
+    button {
+        margin-top: 3px;
+    }
+}
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,38 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
-    <button (click)="opencreate()">Create new Need</button>
-    <button (click)="openupdate()">Update existing Need</button>
+<div id="box">
+    <div id="header">
+        <h1> Cupboard </h1>
+        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+    </div>
+    <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
-<div id="create-form">
-    <h1> Create a new need </h1>
-    <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" ngModel><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" ngModel><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" ngModel>
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" ngModel>
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">‼️{{statusText | async}}</span>
+<ng-template [ngIf]="isManager()" >
+<div>
+    <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+    <div>
+    <div id="create-form" *ngIf="selectedForm === 'create'">
+        <h1> Create Need </h1>
+        <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
+            <label>Name:</label><br>
+            <input type="text" name="name" ngModel><br>
+            <label>Image:</label><br>
+            <input type="text" name="image" ngModel><br>
+            <label>Location:</label><br>
+            <input type="text" name="location" ngModel><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" ngModel><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" ngModel>
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" ngModel>
+            <label>Physical</label><br>
+            <input type="checkbox" name="urgent" value="false" ngModel>
+            <label>Urgent</label><br>
+            <label>Description</label><br>
+            <textarea name="description"></textarea><br>
+            <input type="submit" value="Submit">
 
+        </form>
+    </div>
+    </div>
 </div>
-<div id="update-form">
-    <h1> Update a need </h1>
-    <label>Needs:</label><br>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <div *ngFor="let need of needs">
-
-            <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
-            <label name="template">{{need.name}}</label><br>
-        </div>
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-
-</div>
-<hr>
-<app-need-list #needList></app-need-list>
+</ng-template>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index a812baf..2230cd3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
-import { BehaviorSubject, catchError, of } from 'rxjs';
+import { catchError, of } from 'rxjs';
 import { NeedListComponent } from '../need-list/need-list.component';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-cupboard',
@@ -15,21 +16,18 @@ import {AuthService} from '../../services/auth.service';
 
 export class CupboardComponent implements OnInit {
 
-    protected statusText = new BehaviorSubject("")
-
+    selectedForm?: string = undefined;
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
     constructor(
         private cupboardService: CupboardService,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n);
-        this.close();
-        this.openmenu();
-
         if (this.isManager()) {
             console.log("Admin view of Cupboard");
         } else {
@@ -39,54 +37,43 @@ export class CupboardComponent implements OnInit {
 
     selectedNeed: any = {
         name: '',
+        location:'',
         id: null,
         maxGoal: null,
-        type: ''
+        type: '',
+        urgent: false
     };
     selectedNeedId: number | null = null;
+    searchResults: any[] = [];
 
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
+    selectForm(name: string) {
+        //get search results from the need list
+        if (this.needList) {
+            this.searchResults = this.needList.searchResults;
         }
-    }
+        console.log(this.searchResults)
+        this.selectedForm = name;
+        if (name == 'update') {
+            if (this.searchResults) {
+                this.searchResults.forEach((element: any) => {
+                    console.log(element)
+                });
+            }
 
-    private showElement(element: any) {
-        if (element) {
-            element.style.visibility = 'visible';
-            element.style.position = 'relative';
         }
     }
 
-    openmenu() {
-        const menuElement = document.getElementById('menu');
-        this.showElement(menuElement);
-    }
-
-    opencreate() {
-        this.close();
-        this.showElement(document.getElementById('create-form'));
-    }
-
-    openupdate() {
-        this.close();
-        this.showElement(document.getElementById('update-form'));
-    }
-
-    back() {
-        this.close();
-        this.openmenu();
-    }
-
-    close() {
-        this.hideElement(document.getElementById('create-form'));
-        this.hideElement(document.getElementById('destroy-form'));
-        this.hideElement(document.getElementById('menu'));
-        this.hideElement(document.getElementById('update-form'));
+    async updateSearchResults() {
+        if (this.needList) {
+            while (this.selectedForm == 'update') {
+                this.searchResults = this.needList.searchResults
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
     }
 
     populateForm(need: any): void {
+        this.selectForm('update');
         this.selectedNeed = { ...need };
     }
 
@@ -95,61 +82,29 @@ export class CupboardComponent implements OnInit {
         return type === ("MANAGER" as unknown as userType);
     }
 
-    update(form: any) {
-        console.log(form);
-        const need: Need = {
-            name: form.name,
-            id: form.id, //system will control this
-            maxGoal: form.maxGoal,
-            type: GoalType[form.type as keyof typeof GoalType],
-            filterAttributes: [],
-            current: 0
-        };
-        console.log("need:", need);
-        console.log(need.id, need, "need updated");
-        this.cupboardService.updateNeed(need.id, need)
-            .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.statusText.next("Fields cannot be blank");
-                } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
-                } else {
-                    this.statusText.next("Error on creating need");
-                }
-                return of()
-            }))
-            .subscribe(
-                (result) => {
-                    if (result) {
-                        console.log("need updated successfully");
-                        this.needList?.refresh()
-                    } else {
-                        console.log("need update failed");
-                    }
-                }
-
-            );
-    }
-
     submit(form: any) {
         const need: Need = {
             name: form.name,
+            image: form.image,
+            location: form.location,
             id: 0,
             maxGoal: form.maxGoal,
             type: form.type,
+            urgent: form.urgent ? true : false,
             filterAttributes: [],
-            current: 0
+            current: 0,
+            description: form.description
         };
         console.log("need:", need);
         console.log("form submitted. creating need: ", need);
         this.cupboardService.createNeed(need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.statusText.next("Fields cannot be blank");
+                    this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.toastService.sendToast(ToastType.ERROR, ex.error);
                 } else {
-                    this.statusText.next("Error on creating need");
+                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
                 }
                 return of()
             }))
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index e69de29..78a69ba 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 1000px;
+    align-self: center;
+    gap: 20px
+}
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index a1151b7..6a95ecd 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -1,4 +1,5 @@
 
-<h1>Dashboard</h1>
-<app-cupboard></app-cupboard>
-<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file
+<h1>Your Dashboard</h1>
+<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
+<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index a0ad566..c94b5c6 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,10 @@
-import {Component} from '@angular/core';
-import {userType} from '../../models/User';
+import {Component, OnInit} from '@angular/core';
 import {AuthService} from '../../services/auth.service';
+import {Router} from '@angular/router';
+import {Need} from '../../models/Need';
+import {CupboardService} from '../../services/cupboard.service';
+import {firstValueFrom} from 'rxjs';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-dashboard',
@@ -8,14 +12,34 @@ import {AuthService} from '../../services/auth.service';
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.css'
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit{
+
+    topNeeds?: Need[]
+    almostThere?: Need[]
+    inBasket?: Need[]
+
     constructor(
         protected authService: AuthService,
+        protected router: Router,
+        protected cupboardService: CupboardService,
+        protected userService: UsersService
     ) {}
 
-    isManager() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
+    ngOnInit() {
+        let user = this.authService.getCurrentUser()
+        if(!localStorage.getItem("credential") && !user) {
+            this.router.navigate(['/login'])
+            return
+        }
+
+        firstValueFrom(this.cupboardService.getNeeds()).then(r => {
+            this.topNeeds = r.sort((a, b) => b.current - a.current)
+            this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
+        })
+
+        this.userService.getBasket().subscribe(r => {
+            this.inBasket = r;
+        })
     }
 
 }
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index 3dec496..c46ef57 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -1,7 +1,82 @@
-td, p {
-    border: 2px solid #000;
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    width: 800px;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.needEntry {
+    background-color: #2e2e2e;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-width: 1000px;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
 
-}
\ No newline at end of file
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 504e694..52b35c1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -1,39 +1,81 @@
-<h1>Funding Basket</h1>
 
-<div id="needCount">
-    <label for="needCount">Needs in Basket:</label>
-    <span>{{ this.usersService.getBasket().getValue().length }}</span>
-</div>
+<!--<div id="needCount">-->
+<!--    <label for="needCount">Needs in Basket:</label>-->
+<!--    <span>{{ this.usersService.getBasket().getValue().length }}</span>-->
+<!--</div>-->
 
-<div *ngIf="this.usersService.getBasket().getValue().length == 0">
-    <h2>There are no needs in the basket</h2>
-</div>
+<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">-->
+<!--    <h2>There are no needs in the basket</h2>-->
+<!--</div>-->
+
+<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">-->
+<!--    <thead>-->
+<!--        <tr>-->
+<!--            <th class="need"></th>-->
+<!--        </tr>-->
+<!--    </thead>-->
+<!--    <tbody>-->
+<!--        <tr *ngFor="let need of usersService.getBasket().getValue()">-->
+<!--            <td>-->
+<!--                <a routerLink="/need/{{need.id}}">{{need.name}}</a>-->
+<!--                <p>Goal: {{need.maxGoal}}</p>-->
+<!--                <p>Current: {{(need.current).toFixed(2)}}</p>-->
+<!--                <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>-->
+<!--                <br>-->
+<!--                <div>-->
+<!--                    <button type="button" class="removeNeed" title="delete need"-->
+<!--                    (click)="this.usersService.removeNeed(need.id)">Remove Need</button>-->
+<!--                </div>-->
+<!--            </td>-->
+<!--        </tr>-->
+<!--    </tbody>-->
+<!--</table>-->
+<!--<br>-->
+<div id="box">
+    <h1>Funding Basket</h1>
+    <ng-template [ngIf]="usersService.getBasket().getValue().length">
+        <div id="needList">
+            <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry">
+                <div [routerLink]="'/need/' + need.id" class="clickable">
+                    <div class="split">
+                        <div class="left">
+                            <span class="needName">{{need.name}}</span>
+                            <span class="needType">{{need.type}}</span>
+                        </div>
+
+                        <div class="right">
+                            <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                            <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+                        </div>
+                    </div>
+
+                    <br>
 
-<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">
-    <thead>
-        <tr>
-            <th class="need"></th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let need of usersService.getBasket().getValue()">
-            <td>
-                <a routerLink="/need/{{need.id}}">{{need.name}}</a>
-                <p>Goal: {{need.maxGoal}}</p>
-                <p>Current: {{(need.current).toFixed(2)}}</p>
-                <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>
-                <br>
-                <div>
-                    <button type="button" class="removeNeed" title="delete need"
-                    (click)="this.usersService.removeNeed(need.id)">Remove Need</button>
+                    <div class="prog">
+                        <span id="hover-status-label-{{need.id}}"> </span>
+                        <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+                        <progress [value]="need.current" [max]="need.maxGoal"></progress>
+                    </div>
+
+                    <!--            <div class="description">-->
+                    <!--                {{need.description}}-->
+                    <!--            </div>-->
+                </div>
+
+                <div class="actionArea">
+                    <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">
+                    <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
+                        <span class="icon">delete</span> Remove from Basket
+                    </button>
                 </div>
-            </td>
-        </tr>
-    </tbody>
-</table>
-<br>
-<div>
-    <p *ngIf="!isValid">Invalid input in funding basket!</p>
-    <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-</div>
\ No newline at end of file
+            </div>
+        </div>
+        <br>
+        <div id="footer">
+            <button class="button2" title="checkout" (click)="checkout()">Checkout</button>
+        </div>
+    </ng-template>
+    <div *ngIf="!usersService.getBasket().getValue().length">
+        <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index faa7e0b..dcacca1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
 import {CupboardService} from '../../services/cupboard.service';
 import {catchError, firstValueFrom, Observable} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-funding-basket',
@@ -12,13 +13,13 @@ import {AuthService} from '../../services/auth.service';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-    statusText: any;
 
     constructor(
         private router: Router,
         protected cupboardService: CupboardService,
         protected usersService: UsersService,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     @ViewChild("contribution") contribution?: Input;
@@ -37,16 +38,31 @@ export class FundingBasketComponent implements OnInit {
 
     async checkout() {
         this.isValid = true;
-        for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+        for (let c of document.querySelectorAll('.contribution')!) {
             let contribution = c as HTMLInputElement;
             contribution.setAttribute("style", "");
             if (contribution.value == '' || contribution.valueAsNumber <= 0) {
                 this.isValid = false;
-                contribution.setAttribute("style", "color: #ff0000");
+
+                contribution.setAttribute("style", "border-color: #ff0000");
+                this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
+
+                setTimeout(() => {
+                    contribution.setAttribute("style", "border-color: #ffffff");
+                }, 3000);
             }
         }
+        // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
+        // for (let c of this.usersService.getBasket().value) {
+        //     if (c == null) {
+        //         this.isValid = false;
+        //         this.statusText.next("One or more needs have been deleted")
+        //     } else {
+        //         this.statusText.next("test")
+        //     }
+        // }
         if (this.isValid) {
-            for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+            for (let c of document.querySelectorAll('.contribution')!) {
                 let contribution = c as HTMLInputElement;
                 let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
                 need.current += +contribution.value;
@@ -54,21 +70,21 @@ export class FundingBasketComponent implements OnInit {
                 this.cupboardService.checkoutNeed(need.id, +contribution.value)
                     .pipe(catchError((ex, _) => {
                         if (ex.status == 500) {
-                            this.statusText.next('Fields cannot be blank');
+                            this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
                         } else if (ex.status == 400) {
-                            this.statusText.next('Goal must be greater than 0');
+                            this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0');
                         } else {
-                            this.statusText.next('Error on creating need');
+                            this.toastService.sendToast(ToastType.INFO, 'Error on creating need');
                         }
                         return new Observable<string>();
                     }))
                     .subscribe((result) => {
                         if (result) {
-                            console.log('need updated successfully');
                             //this.needList?.refresh()
                         } else {
                             console.log('need update failed');
                         }
+                        this.toastService.sendToast(ToastType.INFO, "Checkout successful");
                     });
             }
         }
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index e69de29..a10377f 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -0,0 +1,38 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: clip;
+}
+
+#hero {
+    display: flex;
+    /*flex-direction: column;*/
+    /*align-items: start;*/
+    /*justify-content: center;*/
+}
+
+h1 {
+    font-size: 50px;
+    max-width: 1200px;
+}
+
+#jf {
+    /*position: absolute;*/
+}
+
+#right {
+    max-width: 500px;
+    max-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*z-index: -0.5;*/
+}
+
+#left {
+    max-width: 500px;
+    z-index: 1;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index d41e670..7a7ff96 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,3 +1,10 @@
-<a routerLink="/login">
-    Login/Sign Up
-</a>
\ No newline at end of file
+<div id="hero">
+    <div id="left">
+        <h1>Helping fund coral reef and marine life conservation</h1>
+        <p>View our online cupboard holding all needs related to sea life preservation</p>
+        <button class="button2" routerLink="/cupboard">View needs</button>
+    </div>
+    <div id="right">
+        <img id="jf" src="jf.png" height="1024" width="1024"/>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..b56b4eb 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,28 @@
-:host, .border {
-  display: flex;
-  flex-direction: column;
-    max-width: 300px;
-    gap: 5px
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
+    background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+    background-blend-mode: darken;
+    margin-top: -66px
+
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    max-width: 350px;
+    gap: 10px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    color: white;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(140, 140, 255);
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index a6441f4..c67b903 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,7 +1,9 @@
-<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-<p>Login:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" #password>
-<button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" routerLink="/signup">Create Account...</button>
-<span *ngIf="statusText">{{statusText | async}}</span>
+<div id="box">
+    <h1>Login</h1>
+    <input placeholder="Username" type="text" #username>
+    <input placeholder="Password" type="password" #password>
+    <button type="button" (click)="login(username.value, password.value)">Login</button>
+    <div>
+        New? <a routerLink="/signup">Create an account</a>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index f6a2996..0177f67 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core'
 import {UsersService} from '../../services/users.service';
 import {ActivatedRoute, Router} from '@angular/router';
-import {BehaviorSubject} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-login',
@@ -13,13 +13,13 @@ import {AuthService} from '../../services/auth.service';
 export class LoginComponent implements OnInit {
 
     protected next?: string | null;
-    protected statusText = new BehaviorSubject("")
 
     constructor(
         protected usersService: UsersService,
         protected router: Router,
         private route: ActivatedRoute,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     ngOnInit() {
@@ -35,8 +35,10 @@ export class LoginComponent implements OnInit {
 
         this.authService.login(username, password).then(() => {
             this.router.navigate([next]);
+            let key = this.authService.getApiKey()
+            localStorage.setItem("credential", JSON.stringify({username: username, key: key}))
         }).catch(ex => {
-            this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
@@ -48,9 +50,9 @@ export class LoginComponent implements OnInit {
         }
 
         this.usersService.createUser(username, password).then(() => {
-             this.statusText.next("Account created, click login.")
+            this.toastService.sendToast(ToastType.INFO, "Account created, click login.")
         }).catch(ex => {
-            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
new file mode 100644
index 0000000..ac456ab
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -0,0 +1,56 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    border: solid rgba(255, 255, 255, 0.5) 1px;
+    border-radius: 5px;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: solid rgba(255, 255, 255, 0.5) 1px;
+    padding: 10px;
+
+    a {
+        display: flex;
+    }
+}
+
+#needList {
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+    gap: 10px;
+    justify-content: start;
+    overflow: clip;
+}
+
+.needEntry {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    height: 175px;
+    width: 200px;
+    justify-content: space-between;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    user-select: none;
+    cursor: pointer;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-weight: 300;*/
+    font-size: 10pt;
+}
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
new file mode 100644
index 0000000..a2de9e5
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
@@ -0,0 +1,17 @@
+<div id="header">
+    <span>{{jtitle}}</span>
+    <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a>
+</div>
+
+<div id="needList">
+    <div class="needEntry" *ngFor="let need of needList" [routerLink]="'/need/'+need.id">
+        <div>
+            <span class="needName">{{need.name}}</span>
+            <span class="needType">{{need.type}}</span>
+        </div>
+        <div>
+            <span>{{need.current}}/{{need.maxGoal}}</span>
+            <progress [max]="need.maxGoal" [value]="need.current"></progress>
+        </div>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
new file mode 100644
index 0000000..c909ae6
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {Need} from '../../models/Need';
+
+@Component({
+    selector: 'app-mini-need-list',
+    standalone: false,
+    templateUrl: './mini-need-list.component.html',
+    styleUrl: './mini-need-list.component.css'
+})
+export class MiniNeedListComponent {
+
+    @Input() needList?: Need[]
+    @Input() jtitle?: string
+    @Input() url?: string
+
+    constructor(
+
+    ) {}
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
new file mode 100644
index 0000000..17605c2
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -0,0 +1,21 @@
+:host {
+    /*position: absolute;*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
+    /*display: flex;*/
+    /*height: 100%;*/
+    /*top: 0;*/
+    /*left: 0;*/
+    /*right: 0;*/
+    /*z-index: 5;*/
+    /*justify-content: center;*/
+}
+
+#create-form, #delete-form, #update-form {
+    margin-top: 50px;
+    background-color: #3a3a3a;
+    padding: 10px 20px 20px 20px;
+    border: 2px solid #000;
+    border-radius: 5px;
+    /*visibility: visible;*/
+    /*position: absolute;*/
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
new file mode 100644
index 0000000..e776415
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,24 @@
+<div id="update-form">
+    <h1> Update Need </h1>
+    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <label>Name:</label><br>
+        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+        <label>Image:</label><br>
+        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+        <label>Location:</label><br>
+        <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
+        <label>Max Goal:</label><br>
+        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+        <label>Type</label><br>
+        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+        <label>Monetary</label><br>
+        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+        <label>Physical</label><br>
+        <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+        <label>Urgent</label> <br>
+        <label>Description</label> <br>
+        <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+        <input type="submit" value="Submit">
+
+    </form>
+</div>
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
new file mode 100644
index 0000000..2462534
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Need, GoalType } from '../../models/Need'; 
+import { CupboardService } from '../../services/cupboard.service';
+import { catchError, of } from 'rxjs';
+import { ToastsService, ToastType } from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-need-edit',
+  standalone: false,
+  templateUrl: './need-edit.component.html',
+  styleUrl: './need-edit.component.css'
+})
+export class NeedEditComponent {
+  constructor(
+    private cupboardService: CupboardService,
+    private toastService: ToastsService
+
+  ) {}
+
+  @Input() selectedNeed!: Need;
+  @Output() refreshNeedList = new EventEmitter<void>();
+
+  update(form: any) {
+    console.log(form);
+    const need: Need = {
+        name: form.name,
+        image: form.image,
+        location: form.location,
+        id: this.selectedNeed.id, //system will control this
+        maxGoal: form.maxGoal,
+        type: GoalType[form.type as keyof typeof GoalType],
+        urgent: form.urgent,
+        filterAttributes: [],
+        current: 0,
+        description: form.description
+    };
+
+    this.cupboardService.updateNeed(need.id, need)
+        .pipe(catchError((ex, _) => {
+            if (ex.status == 500) {
+                this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
+            } else if (ex.status == 400) {
+                this.toastService.sendToast(ToastType.ERROR, ex.error);
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+            }
+            return of()
+        }))
+        .subscribe(
+            (result) => {
+                if (result) {
+                    console.log("need updated successfully");
+                    this.refreshNeedList.emit();
+                } else {
+                    console.log("need update failed");
+                }
+            }
+
+        );
+  }
+}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..5f2e5e1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,24 +1,110 @@
-:host {
-    list-style-type:circle;
-    border: 2px solid #000;
-    display: block;
-    width: 30%;
-    border-radius: 5px;
-    
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-li, div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #2e2e2e;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 15px
+}
+
+select {
+    font-size: 14pt;
     padding: 5px;
-    margin: 5px;
+}
+
+#searchArea {
+    display: flex;
 
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
+    }
+
+    input[type=text] {
+        display: flex;
+        width: 100%;
+    }
 }
 
-#search-form {
-    background-color: #d9d9d9;
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;  
-    visibility: visible;
- }
\ No newline at end of file
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..c0501ba 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,28 +1,71 @@
-<h1>Needs List</h1>
-<input id="search-button" type="button" value="Search" (click)="open()">
-<div id="search-form">
-    <form #searchForm="ngForm">
-        <label>Search:</label><br>
-        <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
-        <input type="button" value="Clear" (click)="searchForm.reset()"> <br>
-    </form>
-    <button (click)="close()">Close</button>
-    <div>
-        <h2 id="search-status">Search Results:</h2>
-        <div *ngFor="let need of searchResults">
-            <a routerLink="/need/{{need.id}}">
-                {{need.name}}
-            </a>
-            <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
-            <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
+<div id="header">
+    <div id="searchArea">
+        <form id="search-form" #searchForm="ngForm">
+            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="reset" value="Clear" (click)="search(null)"> <br>
+        </form>
+    </div>
+    <div id="sortArea">
+        <label for="sort">Sort by: </label>
+        <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+            <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+                {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
+            </option>
+        </select>
+        <button (click)="changeSortMode(searchForm.value)">
+            <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
+        </button>
+        <label>Needs per page: </label>
+        <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
+    </div>
+    <!--<button (click)="close()">Close</button>-->
+</div>
+
+<!-- display for when results are present and filtered-->
+<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
+<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
+<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
+<div id="needList">
+    <div *ngFor="let need of visibleNeeds" class="needEntry">
+        <div [routerLink]="'/need/' + need.id" class="clickable">
+            <div class="split">
+                <div class="left">
+                    <span class="needName">{{need.name}}</span>
+                    <span class="needType">{{need.type}}</span>
+                </div>
+
+                <div class="right">
+                    <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                    <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+                </div>
+            </div>
+
+            <br>
+
+            <div class="prog">
+                <span id="hover-status-label-{{need.id}}"> </span>
+                <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+                <progress [value]="need.current" [max]="need.maxGoal"></progress>
+            </div>
+
+        </div>
+
+        <div class="actionArea">
+            <button *ngIf="isHelper()" (click)="add(need)">
+                <span class="icon">add</span>Add To Basket
+            </button>
+            <button *ngIf="isManager()" (click)="select(need)">
+                <span class="icon">edit</span>Edit Need
+            </button>
+            <button *ngIf="isManager()" (click)="delete(need.id)" >
+                <span class="icon">delete</span>Delete Need
+            </button>
         </div>
     </div>
 </div>
 
-<li *ngFor="let need of needs">
-    <a routerLink="/need/{{need.id}}">
-        {{need.name}}
-    </a>
-    <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
-    <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-</li>
+<div id="page-selector">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 3a89a20..cd3d9bd 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,138 +1,275 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import {UsersService} from '../../services/users.service';
 import {userType} from '../../models/User';
-import {catchError, of} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+
+interface sortAlgo {
+  (a: Need,b: Need): number;
+}
+
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+  if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
+  if(a.maxGoal == b.maxGoal) {
+    return sortByName(a,b);
+  }
+  else if(a.maxGoal > b.maxGoal) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByCompletion: sortAlgo = (a: Need, b: Need): number => {
+  if(a.current == b.current) {
+    return sortByGoal(a,b);
+  }
+  else if(a.current > b.current) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
+  if(a.urgent == b.urgent) {
+    return sortByGoal(a,b);
+  }
+  else if(a.urgent && !b.urgent) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByLocation: sortAlgo = (a: Need, b: Need): number => {
+  if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
 
 @Component({
-    selector: 'app-need-list',
-    standalone: false,
-    templateUrl: './need-list.component.html',
-    styleUrl: './need-list.component.css'
+  selector: 'app-need-list',
+  standalone: false,
+  templateUrl: './need-list.component.html',
+  styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
-    needs: Need[] = [];
-    searchResults: Need[] = [];
+  selectedNeed: Need | null = null;
+  needs: Need[] = [];
+  searchResults: Need[] = [];
+  visibleNeeds: Need[] = [];
+  sortMode: 'Ascending' | 'Descending' = 'Ascending'
+  currentPage: number = 0;
+  itemsPerPage: number = 5;
+  totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage);
 
-    constructor(
-        private cupboardService: CupboardService,
-        private usersService: UsersService,
-        private authService: AuthService
-    ) {}
+  decrementPage() {
+    this.currentPage--;
+    this.updateVisibleNeeds();    
+  }
 
-    refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
-    }
+  incrementPage() {
+    this.currentPage++;
+    this.updateVisibleNeeds();    
+  }
 
-    ngOnInit(): void {
-        this.refresh()
+  editNeedsPerPage(amount: number) {
+    this.itemsPerPage = amount;
+    this.updateVisibleNeeds();
+  }
 
-        this.close();
-    }
+  updateVisibleNeeds() {
+    this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage);
+    this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
+  }
 
-    private showElement(element: any) {
-        if (element) {
-            element.style.visibility = 'visible';
-            element.style.position = 'relative';
-        }
-    }
+  resetVisibleNeeds() {
+    this.currentPage = 0;
+    this.updateVisibleNeeds();
+  }
 
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
-        }
-    }
+  currentSortAlgo: sortAlgo = sortByPriority;
+  sortSelection: string = 'sortByPriority';
 
-    private updateSearchStatus(text: string) {
-        let element = document.getElementById('search-status');
-        if (element) {
-            element.innerHTML = text;
-        }
-    }
+  SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+    {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+    {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
+    {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]},
+    {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+  ];
 
-    open() {
-        this.hideElement(document.getElementById('search-button'));
-        this.showElement(document.getElementById('search-form'));
-    }
+  @Output() currentNeed = new EventEmitter<Need>();
 
-    close() {
-        this.hideElement(document.getElementById('search-form'));
-        this.showElement(document.getElementById('search-button'));
-        this.hideElement(document.getElementById('search-status'));
-    }
+  constructor(
+    private cupboardService: CupboardService,
+    private usersService: UsersService,
+    private authService: AuthService,
+    private toastService: ToastsService
+  ) {}
 
-    private searchDelay: any;
-
-    async search(form: any) {
-        //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
-
-        //remove previous search if it exists
-        if (this.searchDelay) {
-            clearTimeout(this.searchDelay);
-        }
-
-        this.searchDelay = setTimeout(() => {
-            const currentSearchValue = form.search; //latest value of the search
-            this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-                this.searchResults = n;
-                console.log(currentSearchValue, this.searchResults);
-                this.showElement(document.getElementById('search-results'));
-                this.showElement(document.getElementById('search-status'));
-                if (this.searchResults.length === this.needs.length) {
-                    this.updateSearchStatus("Please refine your search");
-                    this.searchResults = [];
-                } else if (this.searchResults.length === 0) {
-                    this.updateSearchStatus("No results found");
-                } else {
-                    this.updateSearchStatus("Search results:");
-                }
-            });
-        }, 250);
-    }
+    refresh() {
+        this.cupboardService.getNeeds().subscribe(n => {
+          if (this.sortMode == 'Ascending') {
+            this.needs = n.sort(this.currentSortAlgo);
+          } else {
+            this.needs = n.sort(this.currentSortAlgo).reverse();
+          }
+          this.searchResults = this.needs;
+          this.updateVisibleNeeds();
+        });
 
-    delete(id: number) {
-        this.cupboardService.deleteNeed(id).subscribe(() => {
-            this.needs = this.needs.filter(n => n.id !== id)
-        })
+        const form = document.getElementById('search-form') as HTMLFormElement;
+        form.reset();
+        this.search(null);
     }
 
-    isManager() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
+  ngOnInit(): void {
+    this.refresh()
+   
+  }
+
+  changeSortMode(form : any) {
+    if (this.sortMode == 'Ascending'){
+      this.sortMode = 'Descending'
+    } else {
+      this.sortMode = 'Ascending'
     }
+    this.search(form)
+  }
+
+  private searchDelay: any;
 
-    isHelper() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("HELPER" as unknown as userType);
+  async search(form: any) {
+    //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
+
+    //remove previous search if it exists
+    if (this.searchDelay) {
+      clearTimeout(this.searchDelay);
     }
+    if (form) {
+      this.searchDelay = setTimeout(() => {
+
+        if (form) {
+          //sorting based on algo selected
+          this.SortingAlgoArrays.forEach(algo => {
+            if(algo.name === this.sortSelection) {
+              this.currentSortAlgo = algo.func;
+              console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
+              return
+            }
+          });
 
-    add(need: Need) {
-        const currentUser = this.authService.getCurrentUser();
-        //console.log("get current user in angular:", currentUser)
-        if (currentUser) {
-            if (!currentUser.basket.includes(need.id)) {
-                currentUser.basket.push(need.id);
-                this.usersService.updateUser(currentUser)
-                    .pipe(catchError((err: any, _) => {
-                        console.error(err);
-                        return of();
-                    }))
-                    .subscribe(() => {
-                        this.usersService.refreshBasket();
-                    });
+          const currentSearchValue = form.search; //latest value of the search
+          this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+            if (this.sortMode == 'Ascending') {
+              this.searchResults = n.sort(this.currentSortAlgo);
             } else {
-                window.alert("This need is already in your basket!")
+              this.searchResults = n.sort(this.currentSortAlgo).reverse();
             }
+            this.updateVisibleNeeds();
+            });
+          }
+        }, 250);
+      } else {
+        //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
+        //clear timeout to stop pending search
+        clearTimeout(this.searchDelay);
+        this.searchResults = this.needs;
+      }
+  }
+
+  delete(id : number) {
+    this.cupboardService.deleteNeed(id).subscribe(() => {
+        this.toastService.sendToast(ToastType.INFO, "Need deleted.")
+      this.needs = this.needs.filter(n => n.id !== id)
+    })
+    this.refresh();
+  }
+
+  isManager() {
+    const type = this.authService.getCurrentUser()?.type;
+    return type === ("MANAGER" as unknown as userType);
+  }
 
+  isHelper() {
+    const type = this.authService.getCurrentUser()?.type;
+    return type === ("HELPER" as unknown as userType);
+  }
 
-        }
+  changeText(id : number, text : string) {
+    const span = document.getElementById('hover-status-label-' + id);
+    if (span) {
+      span.innerHTML = ' ' + text;
+    }
+  }
 
+  add(need: Need) {
+    const currentUser = this.authService.getCurrentUser();
+    //console.log("get current user in angular:", currentUser)
+    if (currentUser) {
+      if (!currentUser.basket.includes(need.id)) {
+        currentUser.basket.push(need.id);
+        this.usersService.updateUser(currentUser)
+            .pipe(catchError((err, _) =>  {
+                console.error(err);
+                return of();
+            }))
+            .subscribe(() => {
+                this.usersService.refreshBasket();
+            });
+      } else {
+        this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+      }
     }
+  }
+
+  back() {
+    this.searchResults = this.needs;
+  }
 
-    back() {
-        this.searchResults = [];
+  select(need : Need) {
+    //emit value
+    this.currentNeed.emit(need);
+    if (this.selectedNeed) {
+      //revert already selected need to previous style
+      console.log(need.id);
+      let button = document.getElementById('need-button-' + this.selectedNeed.id);
+      if (button) {
+        console.log(button)
+        button.style.background = 'lightgray';
+        button.style.marginLeft = '0%';
+        button.style.width = '98%';
+      }
+      button = document.getElementById('need-edit-button-' + this.selectedNeed.id);
+      if (button) {
+        button.style.visibility = 'visible';
+      }
     }
+      //change selected need to selected style
+      this.selectedNeed = need;
+      let button = document.getElementById('need-button-' + need.id);
+      if (button) {
+        button.style.background = 'white';
+        button.style.marginLeft = '4%';
+        button.style.width = '100%';
+      }
+      button = document.getElementById('need-edit-button-' + need.id);
+      if (button) {
+        button.style.visibility = 'hidden';
+      }
+  }
 }
+function not(location: string) {
+  throw new Error('Function not implemented.');
+}
+
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index e69de29..844410f 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -0,0 +1,73 @@
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+    margin-top: 10px;
+}
+
+/*#editor {*/
+/*    position: absolute;*/
+/*    background-color: #4a4a4a;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    justify-self: center;*/
+/*    align-self: center;*/
+/*    padding: 20px;*/
+/*    box-shadow: 0 0 100px black;*/
+/*}*/
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 90fd459..958dfa6 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,22 +1,45 @@
-<button routerLink="/dashboard">Back to dashboard</button>
-<h1>Viewing Need: {{need?.name}}</h1>
-<a>internal id: {{need?.id}}</a>
-<div style="display: flex; column-gap: 6px;">
-    <h3>Looking for</h3>
-    <h3><u>{{need?.type}}</u></h3>
-    <h3>Donations.</h3>
-</div>
-<div *ngIf="need?.filterAttributes != null">
-    <p>Tags:</p>
-    <ul style="display: flex; column-gap: 24px;">
-        <li *ngFor="let tag of need?.filterAttributes">
-            <p>{{tag}}</p>
-        </li>
-    </ul>
-</div>
+<div id="box">
+    <h1>{{need?.name}}</h1>
+    <span class="needType">{{need?.type}} GOAL</span>
+
+    <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+    <p>{{need?.description}}</p>
+    <div class="prog">
+<!--        <span>{{need?.current}} / {{need?.maxGoal}}</span>-->
+        <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+        <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
+    </div>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
 
-<hr>
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
 
-<p>Goal: {{need?.maxGoal}}</p>
-<p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file
+    <span><strong>Location:</strong> {{need.location}}</span>
+
+    <span><strong>Urgency: </strong>
+        <span *ngIf="!need.urgent">Not urgent</span>
+        <span *ngIf="need.urgent" class="urgent">URGENT</span>
+    </span>
+
+    <div *ngIf="need.filterAttributes.length > 0">
+        <strong>Tags:</strong>
+        <ul style="display: flex; column-gap: 24px;">
+            <li *ngFor="let tag of need?.filterAttributes">
+                <p>{{tag}}</p>
+            </li>
+        </ul>
+    </div>
+
+    <div class="actionArea">
+        <button *ngIf="isHelper()" (click)="add(need!)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+<!--        <button *ngIf="isManager()" (click)="edit(need!)">-->
+<!--            <span class="icon">edit</span>Edit Need-->
+<!--        </button>-->
+        <button *ngIf="isManager()" (click)="delete(need!.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index e38554c..ad4cacf 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -1,8 +1,12 @@
 import {Component, Input} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
-import {NgFor} from '@angular/common';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-need-page',
@@ -14,11 +18,15 @@ export class NeedPageComponent {
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
+        private authService: AuthService,
+        private usersService: UsersService,
+        private toastService: ToastsService,
+        private router: Router
     ) {}
 
     public GoalType = GoalType;
 
-    @Input() need?: Need;
+    @Input() need!: Need;
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -28,4 +36,52 @@ export class NeedPageComponent {
     back() {
         window.history.back();
     }
+
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err, _) =>  {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+            }
+        }
+    }
+
+    delete(id : number) {
+        this.cupboardService.deleteNeed(id)
+            .pipe(catchError((ex, r) => {
+                this.toastService.sendToast(ToastType.ERROR, ex.error)
+                return of()
+            }))
+            .subscribe(() => {
+                // this.needs = this.needs.filter(n => n.id !== id)
+                this.toastService.sendToast(ToastType.INFO, "Need deleted")
+                this.router.navigate(['/'])
+            })
+        // this.refresh();
+    }
+
+    edit(need: Need) {
+
+    }
 }
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index f286cf9..429bc42 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -1,7 +1,16 @@
 :host {
     display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-top: -66px
+
+}
+
+#box {
+    display: flex;
     flex-direction: column;
-    max-width: 300px;
+    /*max-width: 300px;*/
     gap: 10px;
 
     & > div {
@@ -45,3 +54,20 @@
     color: red;
 }
 
+#passReq {
+    display: flex;
+    flex-direction: column;
+}
+
+#box > div {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 20px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ebedc2a..bc3aaf0 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,26 +1,31 @@
-<p>Signup:</p>
-<div>
-    <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
-    <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
-</div>
+<div id="box">
+    <h1>Create an account</h1>
+    <div>
+        <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
+        <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+    </div>
 
-<div>
-    <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
-    <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
-    <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+    <div>
+        <div>
+            <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
+            <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+            <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+        </div>
 
-    <span *ngFor="let requirement of Object.values(passwordRequirements)">
-        <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
-    </span>
-</div>
+        <div id="passReq">
+            <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
+        </div>
+    </div>
 
-<div>
-    <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
-    <span *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span>
-</div>
+    <div>
+        <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+        <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span>
+    </div>
 
-<div>
-    <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
-    <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
-    <span *ngIf="statusText | async">{{statusText | async}}</span>
+    <div>
+        <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+        <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+        <span *ngIf="statusText | async">{{statusText | async}}</span>
+    </div>
+    <span>Already have an account? <a routerLink="/login">Log in</a></span>
 </div>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 3b43287..a20d828 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 class PasswordRequirements {
     sixLong:    {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false}
@@ -22,7 +23,7 @@ class PasswordRequirements {
 export class SignupComponent {
 
     protected passwordStatusText = new BehaviorSubject("")
-    protected confirmPassStatusText = new BehaviorSubject("")
+    protected passwordsMatch = new BehaviorSubject(false)
     protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
     protected passwordStrongEnough = new BehaviorSubject(false)
@@ -34,6 +35,7 @@ export class SignupComponent {
     constructor(
         protected usersService: UsersService,
         protected router: Router,
+        protected toastService: ToastsService
     ) {}
 
     signup(username: string | null, password: string | null) {
@@ -45,13 +47,13 @@ export class SignupComponent {
         this.usersService.createUser(username, password).then(() => {
             this.showSuccessMessage.next(true);
         }).catch(ex => {
-            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
 
     validate(username: string, passConfirm:string, password: string) {
-        this.confirmPassStatusText.next("")
+        this.passwordsMatch.next(false)
         this.usernameStatusText.next("")
         this.checkPasswordStrength(password);
 
@@ -59,8 +61,8 @@ export class SignupComponent {
             this.usernameStatusText.next("Username field can't be blank")
         }
 
-        if (!(password === passConfirm) && !!passConfirm) {
-            this.confirmPassStatusText.next("Passwords don't match")
+        if (passConfirm && password === passConfirm) {
+            this.passwordsMatch.next(true)
         }
         this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
     }
@@ -106,7 +108,7 @@ export class SignupComponent {
         } else if (strength == 0) {
             this.passwordStatusText.next("")
         } else {
-            this.passwordStatusText.next("Password does not meet requirements")
+            this.passwordStatusText.next("5/6 checks required")
         }
 
         this.strength.next(strength)
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
new file mode 100644
index 0000000..4cd81fe
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -0,0 +1,57 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes slideDown {
+    from {transform: translateY(-90px);}
+    to {transform: translateY(0);}
+}
+
+.toast {
+    /*transform: translateY(-90px);*/
+    animation: slideDown .5s ease-in-out;
+    transition: transform .5s;
+    align-self: center;
+    z-index: 3;
+    position: absolute;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 15px;
+    background-color: #3a3a3a;
+    border-radius: 100000px;
+    gap: 10px;
+    align-items: center;
+
+    button {
+        aspect-ratio: 1/1;
+        margin-right: -11px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+    }
+
+    button:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.toast.hide {
+    transform: translateY(-90px);
+}
+
+.toast.warning {
+    background-color: #ffc500;
+    color: black;
+
+    button {
+        color: black;
+    }
+}
+
+.toast.error {
+    background-color: #d81a1a;
+}
diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html
new file mode 100644
index 0000000..dccf869
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.html
@@ -0,0 +1,7 @@
+<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv>
+    <span>{{this.message}}</span>
+    <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a>
+    <button (click)="hide()">
+        <span class="icon">close</span>
+    </button>
+</div>
diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts
new file mode 100644
index 0000000..47fd7ff
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.ts
@@ -0,0 +1,37 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ToastType} from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-toast',
+  standalone: false,
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.css'
+})
+export class ToastComponent implements OnInit{
+    @Input() type!: ToastType
+    @Input() message!: string
+    @Input() action?: {label: string, onAction: () => void}
+
+    @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement>
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.hide();
+        }, 3000)
+    }
+
+    hide() {
+        console.log(this.toastDiv, typeof this.toastDiv)
+        this.toastDiv.nativeElement.classList.add('hide')
+    }
+
+    getColor() {
+        switch (this.type) {
+            case ToastType.ERROR: return "red";
+            case ToastType.INFO: return "";
+            case ToastType.WARNING: return "yellow";
+        }
+    }
+
+    protected readonly ToastType = ToastType;
+}
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 5cd4e39..6cf7e76 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -1,10 +1,14 @@
 export interface Need {
     name: string,
+    image: string,
     id: number,
     filterAttributes: string[],
+    location: string;
     type: GoalType;
     maxGoal: number;
     current: number;
+    urgent: boolean;
+    description: string;
 }
 
 export enum GoalType {
diff --git a/ufund-ui/src/app/services/auth.service.ts b/ufund-ui/src/app/services/auth.service.ts
index 6bc7145..b75c931 100644
--- a/ufund-ui/src/app/services/auth.service.ts
+++ b/ufund-ui/src/app/services/auth.service.ts
@@ -1,7 +1,8 @@
-import {Injectable} from '@angular/core';
+import {Injectable, Injector} from '@angular/core';
 import {BehaviorSubject, firstValueFrom} from 'rxjs';
 import {User} from '../models/User';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {UsersService} from './users.service';
 
 @Injectable({
     providedIn: 'root'
@@ -24,7 +25,9 @@ export class AuthService {
     });
 
     constructor(
-        private http: HttpClient
+        private http: HttpClient,
+        // private userService: UsersService
+        private injector: Injector
     ) {}
 
     async login(username: string, password: string) {
@@ -42,6 +45,13 @@ export class AuthService {
         // this.currentUser.subscribe(r => console.log("currentUser: "+r.username))
     }
 
+    async restoreLogin(username: string, key: string) {
+
+        const userService = this.injector.get(UsersService);
+        this.apiKey = key;
+        this.currentUser.next(await firstValueFrom(userService.getUser(username)))
+    }
+
     getCurrentUserSubject() {
         return this.currentUser;
     }
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
new file mode 100644
index 0000000..4fd024e
--- /dev/null
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -0,0 +1,27 @@
+import {Injectable, ViewContainerRef} from '@angular/core';
+import {ToastComponent} from '../components/toast/toast.component';
+
+export enum ToastType {
+    INFO,
+    WARNING,
+    ERROR
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ToastsService {
+
+    private vcr?: ViewContainerRef
+
+    sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+        let compRef = this.vcr?.createComponent(ToastComponent)!
+        compRef.setInput("message", message)
+        compRef.setInput("type", type)
+        compRef.setInput("action", action)
+    }
+
+    setRootViewContainerRef(vcr: ViewContainerRef) {
+        this.vcr = vcr
+    }
+}
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 0517d5e..b6ae1a2 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>UfundUi</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta charset="utf-8">
+    <title>UfundUi</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..75d6b36 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,71 @@
 /* You can add global styles to this file, and also import other style files */
+
+:root {
+    color-scheme: /*light*/ dark;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    height: 100%;
+    background-color: light-dark(white, #000715);
+}
+
+body {
+    font-family: Inter, sans-serif;
+    font-optical-sizing: auto;
+}
+
+input {
+    font-size: 14pt;
+    padding: 5px;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
+}
+
+button, input[type=button], input[type=reset], input[type=submit], .button {
+    font-size: 14pt;
+    padding: 6px 16px;
+    border-radius: 9999px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+    display: flex;
+    gap: 5px;
+    text-align: center;
+    justify-content: center;
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
+}
+
+.button2 {
+    text-transform: uppercase;
+    border: 1px solid #5cdbff;
+    padding: 10px 25px;
+    font-size: 12pt;
+    font-weight: 600;
+    background-color: transparent;
+    text-shadow: #5cdbff 0 0 50px;
+}
+
+.icon {
+    font-family: 'Material Symbols Outlined'
+}
+
+h1 {
+    font-size: 40px;
+}
+
+progress {
+    min-width: 100%;
+}