diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html
index d1d91488..66721092 100644
--- a/Frontend/src/app/app.component.html
+++ b/Frontend/src/app/app.component.html
@@ -19,6 +19,7 @@
       <router-outlet></router-outlet>
     </div>
   </div>  
+  
   <div *ngIf="screenSize === 'mobile'">
     <div class="grid grid-cols-3 grid-rows-[0.1fr,1fr,1fr]  gap-x-4 min-h-screen relative">
       <app-header class="col-start-2 col-span-1 row-start-1 row-span-1"></app-header>
diff --git a/Frontend/src/app/app.routes.ts b/Frontend/src/app/app.routes.ts
index a3cda8d5..e5a6761d 100644
--- a/Frontend/src/app/app.routes.ts
+++ b/Frontend/src/app/app.routes.ts
@@ -1,7 +1,6 @@
 import { RouterModule, Routes } from "@angular/router";
 import { LandingPageComponent } from "./pages/landing-page/landing-page.component";
-import { LoginComponent } from "./pages/login/login.component";
-import { RegisterComponent } from "./pages/register/register.component";
+// import { RegisterComponent } from "./pages/register/register.component";
 import { HomeComponent } from "./components/templates/desktop/home/home.component";
 import { ProfileComponent } from "./pages/profile/profile.component";
 import { AuthCallbackComponent } from "./authcallback/authcallback.component";
@@ -13,12 +12,14 @@ import { MoodComponent } from "./pages/mood/mood.component";
 import { NgModule } from "@angular/core";
 import { InsightsComponent } from "./pages/insights/insights.component";
 import { HelpMenuComponent } from "./pages/help-menu/help-menu.component";
-import { LoginComponentview} from "./views/login/login.component";
 import { EchoSongComponent } from "./components/templates/desktop/echo-song/echo-song.component";
+//vies 
+import { LoginComponentview} from "./views/login/login.component";
+import { RegisterComponent} from "./views/register/register.component";
 
 export const routes: Routes = [
   { path: "landing", component: LandingPageComponent },
-  { path: "login", component: LoginComponent },
+  { path: "login", component: LoginComponentview},
   { path: "home", component: HomeComponent},
   { path: "register", component: RegisterComponent },
   { path: "profile", component: ProfileComponent },
@@ -30,7 +31,6 @@ export const routes: Routes = [
   { path: "help", component: HelpMenuComponent },
   { path: "insights", component: InsightsComponent},
   { path: "search", component: SearchComponent},
-  { path: "newlogin", component: LoginComponentview},
   { path: "library", component: UserLibraryComponent},
   { path: "echo Song", component: EchoSongComponent},
   { path: '**', redirectTo: '/login' } //DO NOT MOVE - MUST ALWAYS BE LAST
diff --git a/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.css b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/Frontend/src/app/pages/register/register.component.html b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.html
similarity index 53%
rename from Frontend/src/app/pages/register/register.component.html
rename to Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.html
index 056c8314..cc668831 100644
--- a/Frontend/src/app/pages/register/register.component.html
+++ b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.html
@@ -1,60 +1,61 @@
-<div class="h-screen flex flex-row">
-  <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-    <div class="text-center">
-      <div class="text-white font-semibold text-5xl">
-        Welcome to
+<div class="h-screen flex flex-col">
+  <div class="flex flex-1 flex-row">
+    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="text-center">
+        <div class="text-white font-semibold text-5xl">
+          Welcome to 
+        </div>
+        <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
       </div>
-      <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
     </div>
-  </div>
-
-  <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-    <div class="w-full max-w-sm p-6 rounded-lg">
-      <form class="space-y-6" action="#" method="POST">
-        <div>
-          <input id="username" [(ngModel)]="username" name="username" autocomplete="username" placeholder="  Username" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div>
-          <input id="email" [(ngModel)]="email" name="email" type="email" autocomplete="email" placeholder="  Email address" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div>
-          <input id="password" [(ngModel)]="password" name="password" type="password" autocomplete="current-password" placeholder="  Password" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div class="flex justify-center">
-          <button type="submit" (click)="register()" class="rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Create account</button>
-        </div>
-
-        <div class="relative flex py-3 items-center">
-          <div class="flex-grow border-t border-gray-light"></div>
-          <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign up with</span>
-          <div class="flex-grow border-t border-gray-light"></div>
-        </div>
-
-        <div class="flex justify-between items-center w-full">
-          <app-spotify-login (click)="spotify()"></app-spotify-login>
-          <app-google-login></app-google-login>
-          <app-apple-login></app-apple-login>
+  
+    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="w-full max-w-sm p-6 rounded-lg">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <input id="username" [(ngModel)]="username" name="username" autocomplete="username" placeholder="  Username" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+  
+          <div>
+            <input id="email" [(ngModel)]="email" name="email" type="email" autocomplete="email" placeholder="  Email address" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+  
+          <div>
+            <input id="password" [(ngModel)]="password" name="password" type="password" autocomplete="current-password" placeholder="  Password" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+  
+          <div class="flex justify-center">
+            <button type="submit" (click)="register()" class="rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Create account</button>
+          </div>
+  
+          <div class="relative flex py-3 items-center">
+            <div class="flex-grow border-t border-gray-light"></div>
+            <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign up with</span>
+            <div class="flex-grow border-t border-gray-light"></div>
+          </div>
+  
+          <div class="flex justify-between items-center w-full">
+            <app-spotify-login (click)="spotify()"></app-spotify-login>
+            <app-google-login></app-google-login>
+            <app-apple-login></app-apple-login>
+          </div>
+        </form>
+  
+        <p class="mt-10 text-center text-sm text-black font-semibold">
+          Already have an Echo account?
+          <button (click)="navigateTologin()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Login</button>
+        </p>
+  
+        <div class="toast-container">
+          <app-toast></app-toast>
         </div>
-      </form>
-
-      <p class="mt-10 text-center text-sm text-black font-semibold">
-        Already have and Echo account
-        <button (click)="navigateTologin()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Login</button>
-      </p>
-
-      <div class="toast-container">
-        <app-toast></app-toast>
       </div>
     </div>
   </div>
-
-  <!-- Modal Overlays -->
+  
   <div *ngIf="showModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -68,7 +69,7 @@ <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showAboutModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -78,7 +79,7 @@ <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showContactModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -88,7 +89,7 @@ <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showPrivacyModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -98,8 +99,7 @@ <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
       </div>
     </div>
   </div>
-
-  <!-- Footer Section -->
+  
   <footer class="bg-gray-light dark:bg-dark-bg py-1">
     <div class="container mx-auto px-6 lg:px-8">
       <div class="flex flex-wrap justify-between items-center">
diff --git a/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.spec.ts b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.spec.ts
new file mode 100644
index 00000000..e67da89f
--- /dev/null
+++ b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeskRegisterComponent } from './desk-register.component';
+
+describe('DeskRegisterComponent', () => {
+  let component: DeskRegisterComponent;
+  let fixture: ComponentFixture<DeskRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeskRegisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeskRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Frontend/src/app/pages/register/register.component.ts b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.ts
similarity index 75%
rename from Frontend/src/app/pages/register/register.component.ts
rename to Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.ts
index 3a4c57c6..57e8def2 100644
--- a/Frontend/src/app/pages/register/register.component.ts
+++ b/Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.ts
@@ -1,20 +1,21 @@
 import { Component, OnInit,ViewChild } from '@angular/core';
-import { SpotifyLoginComponent } from '../../components/organisms/spotify-login/spotify-login.component';
-import { AuthService } from '../../services/auth.service';
+import { SpotifyLoginComponent } from '../../../../components/organisms/spotify-login/spotify-login.component';
+import { AuthService } from '../../../../services/auth.service';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { ToastComponent } from '../../components/organisms/toast/toast.component';
+import { ToastComponent } from '../../../../components/organisms/toast/toast.component';
 import { CommonModule } from '@angular/common';
-import { AppleLoginComponent } from "../../components/organisms/apple-login/apple-login.component";
-import { GoogleLoginComponent } from "../../components/organisms/google-login/google-login.component";
+import { AppleLoginComponent } from "../../../../components/organisms/apple-login/apple-login.component";
+import { GoogleLoginComponent } from "../../../../components/organisms/google-login/google-login.component";
+
 @Component({
-    selector: 'app-register',
-    standalone: true,
+  selector: 'app-desk-register',
+  standalone: true,
   imports: [SpotifyLoginComponent, FormsModule, ToastComponent, CommonModule, AppleLoginComponent, GoogleLoginComponent],
-    templateUrl: './register.component.html',
-    styleUrl: './register.component.css',
+  templateUrl: './desk-register.component.html',
+  styleUrl: './desk-register.component.css'
 })
-export class RegisterComponent {
+export class DeskRegisterComponent {
     username: string = '';
     email: string = '';
     password: string = '';
@@ -77,3 +78,4 @@ export class RegisterComponent {
       this.showPrivacyModal = false;
     }
 }
+
diff --git a/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html b/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html
index 48345677..59b1233f 100644
--- a/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html
+++ b/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html
@@ -1 +1,141 @@
-<app-input-component placeholder="placeholder" type="type"></app-input-component>
\ No newline at end of file
+<div class="h-screen flex flex-col">
+  <div class="flex flex-1 flex-row">
+    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="text-center">
+        <div class="text-white font-semibold text-5xl">
+          Welcome to 
+        </div>
+        <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
+      </div>
+    </div>
+  
+    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="w-full max-w-sm  p-6 rounded-lg">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <label for="email" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
+            <div class="mt-2">
+              <input id="email" [(ngModel)]="email" name="email" autocomplete="email" placeholder=" Email" required class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+            </div>
+          </div>
+  
+          <div>
+            <div class="flex items-center justify-between">
+              <label for="password" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
+              <div class="text-xs">
+                <a href="#" class="text-white font-semibold hover:text-red">Forgot password?</a>
+              </div>
+            </div>
+            <div class="mt-2">
+              <input id="password" [(ngModel)]="password" name="password" type="password" placeholder="  Password" required class="block w-full rounded-full border-0 py-2 text-stone-900 bg-gray-verylight ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+            </div>
+          </div>
+  
+          <div class="mt-5 flex justify-center">
+            <button type="submit" (click)="login()" class="w-30 rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Sign in</button>
+          </div>
+  
+          <div class="relative flex py-3 items-center">
+            <div class="flex-grow border-t border-gray-light"></div>
+            <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign in with</span>
+            <div class="flex-grow border-t border-gray-light"></div>
+          </div>
+  
+          <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+            <app-spotify-login (click)="spotify()"></app-spotify-login>
+            <app-google-login (click)="google()"></app-google-login>
+            <app-apple-login></app-apple-login>
+          </div>
+        </form>
+        <p class="mt-10 text-center text-sm text-black font-semibold">
+          Don't have an ECHO account?
+          <button (click)="navigateToRegister()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Sign up now</button>
+        </p>
+        <div class="toast-container">
+          <app-toast></app-toast>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="showModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">
+          Close<!-- Need to add icon -->
+        </button>
+        <div class="p-5 text-center">
+          <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
+  
+          <p class="question">What is the ECHO Progressive Web App (PWA)?</p>
+          <p class="text">ECHO is a Progressive Web App designed to enhance your music experience by providing personalized song recommendations, sentiment analysis of lyrics, and insightful listening habits. It integrates seamlessly with Spotify to offer a comprehensive music platform.</p>
+          <br/>
+          <p class="question">I forgot my password. How can I reset it?</p>
+          <p class="text">Click on the "Forgot Password" link on the login page. Enter your registered email address, and follow the instructions sent to your email to reset your password.</p>
+          <br/>
+          <p class="question">How do I play music in ECHO?</p>
+          <p class="text">Select a song from your library or search results and click the "Play" button to start playing the music.</p>
+        </div>
+      </div>
+    </div>
+  
+    <div *ngIf="showAboutModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">
+          Close<!-- Need to add icon -->
+        </button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
+          <p class="text">ECHO is a team of passionate music lovers dedicated to enhancing your music listening experience. Learn more about our team, mission, and the technology behind ECHO.</p>
+        </div>
+      </div>
+    </div>
+  
+    <div *ngIf="showContactModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">
+          Close<!-- Need to add icon -->
+        </button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
+          <p class="text">Email address:</p>
+        </div>
+      </div>
+    </div>
+  
+    <div *ngIf="showPrivacyModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">
+          Close<!-- Need to add icon -->
+        </button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
+          <p class="text">At ECHO, we are committed to protecting your privacy. This Privacy Policy outlines the types of personal information we collect when you use our services, how we use it, and the steps we take to ensure your data is kept secure and confidential. We collect personal information such as your email address and music preferences to enhance our service and provide you with personalized music recommendations. We do not share your personal information with third parties without your explicit consent, except as necessary to provide the services or as required by law. Your continued use of our services signifies your acceptance of our Privacy Policy. If you have any questions regarding how we handle your data, please contact us through our support channels.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <footer class="bg-gray-light dark:bg-dark-bg py-1">
+    <div class="container mx-auto px-6 lg:px-8">
+      <div class="flex flex-wrap justify-between items-center">
+        <div class="w-full lg:w-auto text-center lg:text-left">
+          <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
+            <li>
+              <button (click)="toggleModal()" class=" text-default  hover:text-white">FAQ</button>
+            </li>
+            <li>
+              <button (click)="toggleAboutModal()" class="text-default  hover:text-white">About Us</button>
+            </li>
+            <li>
+              <button (click)="toggleContactModal()" class="text-default hover:text-white">Contact</button>
+            </li>
+            <li>
+              <button (click)="togglePrivacyModal()" class=" text-default hover:text-white">Privacy Policy</button>
+            </li>
+          </ul>
+        </div>
+        <div class="w-full lg:w-auto text-center lg:text-right mt-4 lg:mt-0">
+          <p class=" text-default">© 2024 ECHO. All rights reserved.</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
\ No newline at end of file
diff --git a/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.ts b/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.ts
index 9a999ca1..c5fda4ea 100644
--- a/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.ts
+++ b/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.ts
@@ -1,12 +1,102 @@
-import { Component,Input  } from '@angular/core';
-import {InputComponentComponent} from "./../../../atoms/input-component/input-component.component";
+import { Component, Inject, OnInit, ViewChild } from "@angular/core";
+import { SpotifyLoginComponent } from '../../../../components/organisms/spotify-login/spotify-login.component';
+import { AuthService } from '../../../../services/auth.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { ToastComponent } from '../../../../components/organisms/toast/toast.component';
+import { CommonModule } from '@angular/common';
+import { GoogleLoginComponent } from "../../../../components/organisms/google-login/google-login.component";
+import { AppleLoginComponent } from "../../../../components/organisms/apple-login/apple-login.component";
+import { ProviderService } from "../../../../services/provider.service";
+import { YouTubeService } from "../../../../services/youtube.service";
+
 @Component({
   selector: 'app-desk-login',
   standalone: true,
-  imports: [InputComponentComponent],
+  imports: [CommonModule, FormsModule, SpotifyLoginComponent, ToastComponent, GoogleLoginComponent, AppleLoginComponent],
   templateUrl: './desk-login.component.html',
   styleUrl: './desk-login.component.css'
 })
-export class DeskLoginComponent {
+export class DeskLoginComponent implements OnInit {
+  email: string = '';
+    password: string = '';
+    username: string = '';
+    showModal: boolean = false;
+    showAboutModal: boolean = false;
+    showContactModal: boolean = false;
+    showPrivacyModal: boolean = false;
+
+    @ViewChild(ToastComponent) toastComponent!: ToastComponent;
+
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        private providerService: ProviderService,
+        private youtubeService: YouTubeService
+    ) {}
+    ngOnInit(): void {
+
+    }
+    async spotify() {
+      if (typeof window !== 'undefined') {
+        await this.authService.signInWithOAuth();
+      }
+    }
+    navigateToRegister(){
+      this.router.navigate(['/register']);
+    }
+    login() {
+      this.providerService.setProviderName('email');
+        this.authService.signIn(this.email, this.password).subscribe(
+            response => {
+                if (response.user) {
+                    localStorage.setItem('username', this.email);
+                    console.log('User logged in successfully', response);
+                    this.toastComponent.showToast('User logged in successfully', 'success');
+                    setTimeout(async () =>
+                    {
+                      await this.youtubeService.init();
+                      await this.router.navigate(['/home']);
+                    }, 1000);
+                } else {
+                    console.error('Error logging in user', response);
+                    this.toastComponent.showToast('Invalid username or password', 'info');
+                }
+            },
+            error => {
+                console.error('Error logging in user', error);
+                this.toastComponent.showToast('There was an issue logging in', 'error');
+            }
+        );
+    }
+
+    toggleModal(): void {
+        this.showModal = !this.showModal;
+      }
 
+      toggleAboutModal(): void {
+        this.showAboutModal = !this.showAboutModal;
+      }
+
+      toggleContactModal(): void {
+        this.showContactModal = !this.showContactModal;
+      }
+
+      togglePrivacyModal(): void {
+        this.showPrivacyModal = !this.showPrivacyModal;
+      }
+
+      closeModal(): void {
+        this.showModal = false;
+        this.showAboutModal = false;
+        this.showContactModal = false;
+        this.showPrivacyModal = false;
+      }
+
+  async google()
+  {
+    await this.youtubeService.init();
+    this.providerService.setProviderName('google');
+  }
 }
+
diff --git a/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.html b/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.html
index d0c24798..23dbb592 100644
--- a/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.html
+++ b/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.html
@@ -1 +1,142 @@
-<p>mobilelogin works!</p>
+<div class="h-screen flex flex-col">
+    <div class="flex flex-1 flex-col">
+        
+      <div class="flex flex-[0.2] items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+        <div class="text-center">
+          <div class="text-white font-semibold text-3xl p-[1vh]">
+            Welcome to 
+          </div>
+          <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-[20vh]">
+        </div>
+      </div>
+    
+      <div class="flex flex-1 justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+        <div class="w-full max-w-sm  p-6 rounded-lg">
+          <form class="space-y-6" action="#" method="POST">
+            <div>
+              <label for="email" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
+              <div class="mt-2">
+                <input id="email" [(ngModel)]="email" name="email" autocomplete="email" placeholder=" Email" required class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+              </div>
+            </div>
+    
+            <div>
+              <div class="flex items-center justify-between">
+                <label for="password" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
+                <div class="text-xs">
+                  <a href="#" class="text-white font-semibold hover:text-red">Forgot password?</a>
+                </div>
+              </div>
+              <div class="mt-2">
+                <input id="password" [(ngModel)]="password" name="password" type="password" placeholder="  Password" required class="block w-full rounded-full border-0 py-2 text-stone-900 bg-gray-verylight ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+              </div>
+            </div>
+    
+            <div class="mt-5 flex justify-center">
+              <button type="submit" (click)="login()" class="w-30 rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Sign in</button>
+            </div>
+    
+            <div class="relative flex py-3 items-center">
+              <div class="flex-grow border-t border-gray-light"></div>
+              <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign in with</span>
+              <div class="flex-grow border-t border-gray-light"></div>
+            </div>
+    
+            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+              <app-spotify-login (click)="spotify()"></app-spotify-login>
+              <app-google-login (click)="google()"></app-google-login>
+              <app-apple-login></app-apple-login>
+            </div>
+          </form>
+          <p class="mt-10 text-center text-sm text-black font-semibold">
+            Don't have an ECHO account?
+            <button (click)="navigateToRegister()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Sign up now</button>
+          </p>
+          <div class="toast-container">
+            <app-toast></app-toast>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="showModal" class="modal-overlay">
+        <div class="modal-content">
+          <button (click)="closeModal()" class="close-button">
+            Close<!-- Need to add icon -->
+          </button>
+          <div class="p-5 text-center">
+            <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
+    
+            <p class="question">What is the ECHO Progressive Web App (PWA)?</p>
+            <p class="text">ECHO is a Progressive Web App designed to enhance your music experience by providing personalized song recommendations, sentiment analysis of lyrics, and insightful listening habits. It integrates seamlessly with Spotify to offer a comprehensive music platform.</p>
+            <br/>
+            <p class="question">I forgot my password. How can I reset it?</p>
+            <p class="text">Click on the "Forgot Password" link on the login page. Enter your registered email address, and follow the instructions sent to your email to reset your password.</p>
+            <br/>
+            <p class="question">How do I play music in ECHO?</p>
+            <p class="text">Select a song from your library or search results and click the "Play" button to start playing the music.</p>
+          </div>
+        </div>
+      </div>
+    
+      <div *ngIf="showAboutModal" class="modal-overlay">
+        <div class="modal-content">
+          <button (click)="closeModal()" class="close-button">
+            Close<!-- Need to add icon -->
+          </button>
+          <div>
+            <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
+            <p class="text">ECHO is a team of passionate music lovers dedicated to enhancing your music listening experience. Learn more about our team, mission, and the technology behind ECHO.</p>
+          </div>
+        </div>
+      </div>
+    
+      <div *ngIf="showContactModal" class="modal-overlay">
+        <div class="modal-content">
+          <button (click)="closeModal()" class="close-button">
+            Close<!-- Need to add icon -->
+          </button>
+          <div>
+            <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
+            <p class="text">Email address:</p>
+          </div>
+        </div>
+      </div>
+    
+      <div *ngIf="showPrivacyModal" class="modal-overlay">
+        <div class="modal-content">
+          <button (click)="closeModal()" class="close-button">
+            Close<!-- Need to add icon -->
+          </button>
+          <div>
+            <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
+            <p class="text">At ECHO, we are committed to protecting your privacy. This Privacy Policy outlines the types of personal information we collect when you use our services, how we use it, and the steps we take to ensure your data is kept secure and confidential. We collect personal information such as your email address and music preferences to enhance our service and provide you with personalized music recommendations. We do not share your personal information with third parties without your explicit consent, except as necessary to provide the services or as required by law. Your continued use of our services signifies your acceptance of our Privacy Policy. If you have any questions regarding how we handle your data, please contact us through our support channels.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <footer style="background-color: rgba(0, 0, 0, 0.5);" class="py-1">
+      <div class="container mx-auto px-6 lg:px-8">
+        <div class="flex flex-wrap justify-between items-center">
+          <div class="w-full lg:w-auto text-center lg:text-left">
+            <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
+              <li>
+                <button (click)="toggleModal()" class=" text-default  hover:text-white">FAQ</button>
+              </li>
+              <li>
+                <button (click)="toggleAboutModal()" class="text-default  hover:text-white">About Us</button>
+              </li>
+              <li>
+                <button (click)="toggleContactModal()" class="text-default hover:text-white">Contact</button>
+              </li>
+              <li>
+                <button (click)="togglePrivacyModal()" class=" text-default hover:text-white">Privacy Policy</button>
+              </li>
+            </ul>
+          </div>
+          <div class="w-full lg:w-auto text-center lg:text-right mt-4 lg:mt-0">
+            <p class=" text-default">© 2024 ECHO. All rights reserved.</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
\ No newline at end of file
diff --git a/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.ts b/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.ts
index 347ff83c..24df3d39 100644
--- a/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.ts
+++ b/Frontend/src/app/components/templates/mobile/mobilelogin/mobilelogin.component.ts
@@ -1,12 +1,102 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from "@angular/core";
+import { SpotifyLoginComponent } from '../../../../components/organisms/spotify-login/spotify-login.component';
+import { AuthService } from '../../../../services/auth.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { ToastComponent } from '../../../../components/organisms/toast/toast.component';
+import { CommonModule } from '@angular/common';
+import { GoogleLoginComponent } from "../../../../components/organisms/google-login/google-login.component";
+import { AppleLoginComponent } from "../../../../components/organisms/apple-login/apple-login.component";
+import { ProviderService } from "../../../../services/provider.service";
+import { YouTubeService } from "../../../../services/youtube.service";
 
 @Component({
   selector: 'app-mobilelogin',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, FormsModule, SpotifyLoginComponent, ToastComponent, GoogleLoginComponent, AppleLoginComponent],
   templateUrl: './mobilelogin.component.html',
   styleUrl: './mobilelogin.component.css'
 })
-export class MobileloginComponent {
+export class MobileloginComponent implements OnInit {
+  email: string = '';
+    password: string = '';
+    username: string = '';
+    showModal: boolean = false;
+    showAboutModal: boolean = false;
+    showContactModal: boolean = false;
+    showPrivacyModal: boolean = false;
 
+    @ViewChild(ToastComponent) toastComponent!: ToastComponent;
+
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        private providerService: ProviderService,
+        private youtubeService: YouTubeService
+    ) {}
+    ngOnInit(): void {
+
+    }
+    async spotify() {
+      if (typeof window !== 'undefined') {
+        await this.authService.signInWithOAuth();
+      }
+    }
+    navigateToRegister(){
+      this.router.navigate(['/register']);
+    }
+    login() {
+      this.providerService.setProviderName('email');
+        this.authService.signIn(this.email, this.password).subscribe(
+            response => {
+                if (response.user) {
+                    localStorage.setItem('username', this.email);
+                    console.log('User logged in successfully', response);
+                    this.toastComponent.showToast('User logged in successfully', 'success');
+                    setTimeout(async () =>
+                    {
+                      await this.youtubeService.init();
+                      await this.router.navigate(['/home']);
+                    }, 1000);
+                } else {
+                    console.error('Error logging in user', response);
+                    this.toastComponent.showToast('Invalid username or password', 'info');
+                }
+            },
+            error => {
+                console.error('Error logging in user', error);
+                this.toastComponent.showToast('There was an issue logging in', 'error');
+            }
+        );
+    }
+
+    toggleModal(): void {
+        this.showModal = !this.showModal;
+      }
+
+      toggleAboutModal(): void {
+        this.showAboutModal = !this.showAboutModal;
+      }
+
+      toggleContactModal(): void {
+        this.showContactModal = !this.showContactModal;
+      }
+
+      togglePrivacyModal(): void {
+        this.showPrivacyModal = !this.showPrivacyModal;
+      }
+
+      closeModal(): void {
+        this.showModal = false;
+        this.showAboutModal = false;
+        this.showContactModal = false;
+        this.showPrivacyModal = false;
+      }
+
+  async google()
+  {
+    await this.youtubeService.init();
+    this.providerService.setProviderName('google');
+  }
 }
+
diff --git a/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.css b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.html b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.html
new file mode 100644
index 00000000..990d1aaa
--- /dev/null
+++ b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.html
@@ -0,0 +1,128 @@
+<div class="h-screen flex flex-col">
+  <div class="flex flex-1 flex-col">
+    <div class="flex flex-[0.2] items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="text-center">
+        <div class="text-white font-semibold text-3xl p-[1vh]">
+          Welcome to 
+        </div>
+        <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-[20vh]">
+      </div>
+    </div>
+
+    <div class="flex flex-1 justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="w-full max-w-sm p-6 rounded-lg">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <input id="username" [(ngModel)]="username" name="username" autocomplete="username" placeholder="  Username" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div>
+            <input id="email" [(ngModel)]="email" name="email" type="email" autocomplete="email" placeholder="  Email address" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div>
+            <input id="password" [(ngModel)]="password" name="password" type="password" autocomplete="current-password" placeholder="  Password" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div class="mt-5 flex justify-center">
+            <button type="submit" (click)="register()" class="w-30 rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Create account</button>
+          </div>
+
+          <div class="relative flex py-3 items-center">
+            <div class="flex-grow border-t border-gray-light"></div>
+            <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign up with</span>
+            <div class="flex-grow border-t border-gray-light"></div>
+          </div>
+
+          <div class="flex justify-between items-center w-full">
+            <app-spotify-login (click)="spotify()"></app-spotify-login>
+            <app-google-login></app-google-login>
+            <app-apple-login></app-apple-login>
+          </div>
+        </form>
+
+        <p class="mt-10 text-center text-sm text-black font-semibold">
+          Already have an Echo account?
+          <button (click)="navigateTologin()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Login</button>
+        </p>
+
+        <div class="toast-container">
+          <app-toast></app-toast>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="showModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">Close</button>
+        <div class="p-5 text-center">
+          <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
+          <p class="question">What is the ECHO Progressive Web App (PWA)?</p>
+          <p class="text">ECHO is a Progressive Web App designed to enhance your music experience by providing personalized song recommendations, sentiment analysis of lyrics, and insightful listening habits. It integrates seamlessly with Spotify to offer a comprehensive music platform.</p>
+          <br/>
+          <p class="question">I forgot my password. How can I reset it?</p>
+          <p class="text">Click on the "Forgot Password" link on the login page. Enter your registered email address, and follow the instructions sent to your email to reset your password.</p>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="showAboutModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">Close</button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
+          <p class="text">ECHO is a team of passionate music lovers dedicated to enhancing your music listening experience. Learn more about our team, mission, and the technology behind ECHO.</p>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="showContactModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">Close</button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
+          <p class="text">Email address:</p>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="showPrivacyModal" class="modal-overlay">
+      <div class="modal-content">
+        <button (click)="closeModal()" class="close-button">Close</button>
+        <div>
+          <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
+          <p class="text">At ECHO, we are committed to protecting your privacy. This Privacy Policy outlines the types of personal information we collect when you use our services, how we use it, and the steps we take to ensure your data is kept secure and confidential. We collect personal information such as your email address and music preferences to enhance our service and provide you with personalized music recommendations.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer style="background-color: rgba(0, 0, 0, 0.5);" class="py-1">
+    <div class="container mx-auto px-6 lg:px-8">
+      <div class="flex flex-wrap justify-between items-center">
+        <div class="w-full lg:w-auto text-center lg:text-left">
+          <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
+            <li>
+              <button (click)="toggleModal()" class=" text-default  hover:text-white">FAQ</button>
+            </li>
+            <li>
+              <button (click)="toggleAboutModal()" class="text-default  hover:text-white">About Us</button>
+            </li>
+            <li>
+              <button (click)="toggleContactModal()" class="text-default hover:text-white">Contact</button>
+            </li>
+            <li>
+              <button (click)="togglePrivacyModal()" class=" text-default hover:text-white">Privacy Policy</button>
+            </li>
+          </ul>
+        </div>
+        <div class="w-full lg:w-auto text-center lg:text-right mt-4 lg:mt-0">
+          <p class=" text-default">© 2024 ECHO. All rights reserved.</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
\ No newline at end of file
diff --git a/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.spec.ts b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.spec.ts
new file mode 100644
index 00000000..a7e777b1
--- /dev/null
+++ b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MobileregisterComponent } from './mobileregister.component';
+
+describe('MobileregisterComponent', () => {
+  let component: MobileregisterComponent;
+  let fixture: ComponentFixture<MobileregisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MobileregisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MobileregisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.ts b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.ts
new file mode 100644
index 00000000..3e58230c
--- /dev/null
+++ b/Frontend/src/app/components/templates/mobile/mobileregister/mobileregister.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit,ViewChild } from '@angular/core';
+import { SpotifyLoginComponent } from '../../../../components/organisms/spotify-login/spotify-login.component';
+import { AuthService } from '../../../../services/auth.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { ToastComponent } from '../../../../components/organisms/toast/toast.component';
+import { CommonModule } from '@angular/common';
+import { AppleLoginComponent } from "../../../../components/organisms/apple-login/apple-login.component";
+import { GoogleLoginComponent } from "../../../../components/organisms/google-login/google-login.component";
+
+@Component({
+  selector: 'app-mobileregister',
+  standalone: true,
+  imports: [SpotifyLoginComponent, FormsModule, ToastComponent, CommonModule, AppleLoginComponent, GoogleLoginComponent],
+  templateUrl: './mobileregister.component.html',
+  styleUrl: './mobileregister.component.css'
+})
+export class MobileregisterComponent {
+  username: string = '';
+  email: string = '';
+  password: string = '';
+  showModal: boolean = false;
+  showAboutModal: boolean = false;
+  showContactModal: boolean = false;
+  showPrivacyModal: boolean = false;
+
+  @ViewChild(ToastComponent) toastComponent!: ToastComponent;
+constructor(
+  private authService: AuthService,
+  private router: Router,
+) {
+}
+  spotify() {
+    if (typeof window !== 'undefined') {
+      window.location.href = 'http://localhost:3000/api/auth/oauth-signin';
+    }
+  }
+
+  async register() {
+    if (this.username === '' || this.email === '' || this.password === '') {
+      alert('Please fill in all fields');
+      return;
+    }
+
+    const metadata = {
+      username: this.username,
+      name: this.username,
+    };
+
+    this.authService.signUp(this.email, this.password, metadata).subscribe(
+      () => this.router.navigate(["/home"]),
+      (error) => this.toastComponent.showToast("Ensure password contains at least one lower case letter, one capital letter, one number, and one symbol.", 'error')
+    );
+  }
+  navigateTologin(){
+    this.router.navigate(['/login']);
+  }
+  toggleModal(): void {
+    this.showModal = !this.showModal;
+  }
+
+  toggleAboutModal(): void {
+    this.showAboutModal = !this.showAboutModal;
+  }
+
+  toggleContactModal(): void {
+    this.showContactModal = !this.showContactModal;
+  }
+
+  togglePrivacyModal(): void {
+    this.showPrivacyModal = !this.showPrivacyModal;
+  }
+
+  closeModal(): void {
+    this.showModal = false;
+    this.showAboutModal = false;
+    this.showContactModal = false;
+    this.showPrivacyModal = false;
+  }
+}
+
diff --git a/Frontend/src/app/pages/login/login.component.css b/Frontend/src/app/pages/login/login.component.css
deleted file mode 100644
index e64cb8da..00000000
--- a/Frontend/src/app/pages/login/login.component.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* Add this to your login.component.css or global styles.css */
-.toast-container {
-  display: flex;
-  justify-content: center; /* Center horizontally */
-}
-
-.question {
-  font-size: medium;
-  font-weight: bold;
-}
-
-.text {
-  font-size:small;
-}
-
-.modal-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 50;
-  background-color: rgba(0,0,0,0.5); /* Optional: for darkening the background */
-}
-  
-.modal-content {
-  position: relative;
-  max-width: 500px; /* Adjust based on your preference */
-  max-height: 70vh; /* 80% of the viewport height */
-  padding: 20px;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-  overflow-y: auto; /* Enables scrollbar when content overflows */
-}
-  
-.close-button {
-  position: absolute;
-  top: 10px; /* Adjust for proper positioning */
-  right: 10px; /* Adjust for proper positioning */
-  background: transparent;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-footer.bg-gray-light {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 1000; /* Ensures the footer stays above other content */
-}
-
-footer .container {
-  max-width: 100%; /* Adjust this value as needed */
-}
-
-footer .text-center {
-  text-align: left;
-}
\ No newline at end of file
diff --git a/Frontend/src/app/pages/login/login.component.html b/Frontend/src/app/pages/login/login.component.html
deleted file mode 100644
index 040e9ba5..00000000
--- a/Frontend/src/app/pages/login/login.component.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<div class="h-screen flex flex-row">
-  <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-    <div class="text-center">
-      <div class="text-white font-semibold text-5xl">
-        Welcome to 
-      </div>
-      <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
-    </div>
-  </div>
-
-  <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-    <div class="w-full max-w-sm  p-6 rounded-lg">
-      <form class="space-y-6" action="#" method="POST">
-        <div>
-          <label for="email" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
-          <div class="mt-2">
-            <input id="email" [(ngModel)]="email" name="email" autocomplete="email" placeholder=" Email" required class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-          </div>
-        </div>
-
-        <div>
-          <div class="flex items-center justify-between">
-            <label for="password" class="text-default-backgroundDark block text-sm font-medium leading-6"></label>
-            <div class="text-xs">
-              <a href="#" class="text-white font-semibold hover:text-red">Forgot password?</a>
-            </div>
-          </div>
-          <div class="mt-2">
-            <input id="password" [(ngModel)]="password" name="password" type="password" placeholder="  Password" required class="block w-full rounded-full border-0 py-2 text-stone-900 bg-gray-verylight ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-          </div>
-        </div>
-
-        <div class="mt-5 flex justify-center">
-          <button type="submit" (click)="login()" class="w-30 rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Sign in</button>
-        </div>
-
-        <div class="relative flex py-3 items-center">
-          <div class="flex-grow border-t border-gray-light"></div>
-          <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign in with</span>
-          <div class="flex-grow border-t border-gray-light"></div>
-        </div>
-
-        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
-          <app-spotify-login (click)="spotify()"></app-spotify-login>
-          <app-google-login (click)="google()"></app-google-login>
-          <app-apple-login></app-apple-login>
-        </div>
-      </form>
-      <p class="mt-10 text-center text-sm text-black font-semibold">
-        Don't have an ECHO account?
-        <button (click)="navigateToRegister()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Sign up now</button>
-      </p>
-      <div class="toast-container">
-        <app-toast></app-toast>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="showModal" class="modal-overlay">
-    <div class="modal-content">
-      <button (click)="closeModal()" class="close-button">
-        Close<!-- Need to add icon -->
-      </button>
-      <div class="p-5 text-center">
-        <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
-
-        <p class="question">What is the ECHO Progressive Web App (PWA)?</p>
-        <p class="text">ECHO is a Progressive Web App designed to enhance your music experience by providing personalized song recommendations, sentiment analysis of lyrics, and insightful listening habits. It integrates seamlessly with Spotify to offer a comprehensive music platform.</p>
-        <br/>
-        <p class="question">I forgot my password. How can I reset it?</p>
-        <p class="text">Click on the "Forgot Password" link on the login page. Enter your registered email address, and follow the instructions sent to your email to reset your password.</p>
-        <br/>
-        <p class="question">How do I play music in ECHO?</p>
-        <p class="text">Select a song from your library or search results and click the "Play" button to start playing the music.</p>
-      </div>
-    </div>
-  </div>
-
-  <div *ngIf="showAboutModal" class="modal-overlay">
-    <div class="modal-content">
-      <button (click)="closeModal()" class="close-button">
-        Close<!-- Need to add icon -->
-      </button>
-      <div>
-        <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
-        <p class="text">ECHO is a team of passionate music lovers dedicated to enhancing your music listening experience. Learn more about our team, mission, and the technology behind ECHO.</p>
-      </div>
-    </div>
-  </div>
-
-  <div *ngIf="showContactModal" class="modal-overlay">
-    <div class="modal-content">
-      <button (click)="closeModal()" class="close-button">
-        Close<!-- Need to add icon -->
-      </button>
-      <div>
-        <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
-        <p class="text">Email address:</p>
-      </div>
-    </div>
-  </div>
-
-  <div *ngIf="showPrivacyModal" class="modal-overlay">
-    <div class="modal-content">
-      <button (click)="closeModal()" class="close-button">
-        Close<!-- Need to add icon -->
-      </button>
-      <div>
-        <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
-        <p class="text">At ECHO, we are committed to protecting your privacy. This Privacy Policy outlines the types of personal information we collect when you use our services, how we use it, and the steps we take to ensure your data is kept secure and confidential. We collect personal information such as your email address and music preferences to enhance our service and provide you with personalized music recommendations. We do not share your personal information with third parties without your explicit consent, except as necessary to provide the services or as required by law. Your continued use of our services signifies your acceptance of our Privacy Policy. If you have any questions regarding how we handle your data, please contact us through our support channels.</p>
-      </div>
-    </div>
-  </div>
-
-
-<footer class="bg-gray-light dark:bg-dark-bg py-1">
-  <div class="container mx-auto px-6 lg:px-8">
-    <div class="flex flex-wrap justify-between items-center">
-      <div class="w-full lg:w-auto text-center lg:text-left">
-        <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
-          <li>
-            <button (click)="toggleModal()" class=" text-default  hover:text-white">FAQ</button>
-          </li>
-          <li>
-            <button (click)="toggleAboutModal()" class="text-default  hover:text-white">About Us</button>
-          </li>
-          <li>
-            <button (click)="toggleContactModal()" class="text-default hover:text-white">Contact</button>
-          </li>
-          <li>
-            <button (click)="togglePrivacyModal()" class=" text-default hover:text-white">Privacy Policy</button>
-          </li>
-        </ul>
-      </div>
-      <div class="w-full lg:w-auto text-center lg:text-right mt-4 lg:mt-0">
-        <p class=" text-default">© 2024 ECHO. All rights reserved.</p>
-      </div>
-    </div>
-  </div>
-</footer>
-</div>
\ No newline at end of file
diff --git a/Frontend/src/app/pages/login/login.component.spec.ts b/Frontend/src/app/pages/login/login.component.spec.ts
deleted file mode 100644
index ea60fe5f..00000000
--- a/Frontend/src/app/pages/login/login.component.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-// import { LoginComponent } from './login.component';
-// import { LoginComponent } from './login.component';
-
-describe('LoginComponent', () => {
-    // let component: LoginComponent;
-    // let fixture: ComponentFixture<LoginComponent>;
-
-    // beforeEach(async () => {
-    //   await TestBed.configureTestingModule({
-    //     imports: [LoginComponent]
-    //   })
-    //   .compileComponents();
-
-    //   fixture = TestBed.createComponent(LoginComponent);
-    //   component = fixture.componentInstance;
-    //   fixture.detectChanges();
-    // });
-
-    // it('should create', () => {
-    //   expect(component).toBeTruthy();
-    // });
-
-    it('should have a title', () => {
-        expect(true).toBe(true);
-    });
-});
diff --git a/Frontend/src/app/pages/login/login.component.ts b/Frontend/src/app/pages/login/login.component.ts
deleted file mode 100644
index 7588d87c..00000000
--- a/Frontend/src/app/pages/login/login.component.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Component, Inject, OnInit, ViewChild } from "@angular/core";
-import { SpotifyLoginComponent } from '../../components/organisms/spotify-login/spotify-login.component';
-import { AuthService } from '../../services/auth.service';
-import { Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { ToastComponent } from '../../components/organisms/toast/toast.component';
-import { CommonModule } from '@angular/common';
-import { GoogleLoginComponent } from "../../components/organisms/google-login/google-login.component";
-import { AppleLoginComponent } from "../../components/organisms/apple-login/apple-login.component";
-import { ProviderService } from "../../services/provider.service";
-import { YouTubeService } from "../../services/youtube.service";
-
-@Component({
-    selector: 'app-login',
-    standalone: true,
-  imports: [CommonModule, FormsModule, SpotifyLoginComponent, ToastComponent, GoogleLoginComponent, AppleLoginComponent],
-    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css'],
-})
-export class LoginComponent implements OnInit {
-    email: string = '';
-    password: string = '';
-    username: string = '';
-    showModal: boolean = false;
-    showAboutModal: boolean = false;
-    showContactModal: boolean = false;
-    showPrivacyModal: boolean = false;
-
-    @ViewChild(ToastComponent) toastComponent!: ToastComponent;
-
-    constructor(
-        private authService: AuthService,
-        private router: Router,
-        private providerService: ProviderService,
-        private youtubeService: YouTubeService
-    ) {}
-    ngOnInit(): void {
-
-    }
-    async spotify() {
-      if (typeof window !== 'undefined') {
-        await this.authService.signInWithOAuth();
-      }
-    }
-    navigateToRegister(){
-      this.router.navigate(['/register']);
-    }
-    login() {
-      this.providerService.setProviderName('email');
-        this.authService.signIn(this.email, this.password).subscribe(
-            response => {
-                if (response.user) {
-                    localStorage.setItem('username', this.email);
-                    console.log('User logged in successfully', response);
-                    this.toastComponent.showToast('User logged in successfully', 'success');
-                    setTimeout(async () =>
-                    {
-                      await this.youtubeService.init();
-                      await this.router.navigate(['/home']);
-                    }, 1000);
-                } else {
-                    console.error('Error logging in user', response);
-                    this.toastComponent.showToast('Invalid username or password', 'info');
-                }
-            },
-            error => {
-                console.error('Error logging in user', error);
-                this.toastComponent.showToast('There was an issue logging in', 'error');
-            }
-        );
-    }
-
-    toggleModal(): void {
-        this.showModal = !this.showModal;
-      }
-
-      toggleAboutModal(): void {
-        this.showAboutModal = !this.showAboutModal;
-      }
-
-      toggleContactModal(): void {
-        this.showContactModal = !this.showContactModal;
-      }
-
-      togglePrivacyModal(): void {
-        this.showPrivacyModal = !this.showPrivacyModal;
-      }
-
-      closeModal(): void {
-        this.showModal = false;
-        this.showAboutModal = false;
-        this.showContactModal = false;
-        this.showPrivacyModal = false;
-      }
-
-  async google()
-  {
-    await this.youtubeService.init();
-    this.providerService.setProviderName('google');
-  }
-}
diff --git a/Frontend/src/app/pages/register/register.component.css b/Frontend/src/app/pages/register/register.component.css
deleted file mode 100644
index 07e5a2d4..00000000
--- a/Frontend/src/app/pages/register/register.component.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* Add this to your login.component.css or global styles.css */
-.toast-container {
-    display: flex;
-    justify-content: center; /* Center horizontally */
-}
-
-.question {
-    font-size: medium;
-    font-weight: bold;
-}
-
-.text {
-    font-size:small;
-}
-
-.modal-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 50;
-    background-color: rgba(0,0,0,0.5); /* Optional: for darkening the background */
-  }
-  
-  .modal-content {
-    position: relative;
-    max-width: 500px; /* Adjust based on your preference */
-    max-height: 80vh; /* 80% of the viewport height */
-    padding: 20px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    overflow-y: auto; /* Enables scrollbar when content overflows */
-  }
-  
-  .close-button {
-    position: absolute;
-    top: 10px; /* Adjust for proper positioning */
-    right: 10px; /* Adjust for proper positioning */
-    background: transparent;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-  }
-  
-  footer.bg-gray-light {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 1000; /* Ensures the footer stays above other content */
-  }
-  
-  footer .container {
-    max-width: 100%; /* Adjust this value as needed */
-  }
-  
-  footer .text-center {
-    text-align: left;
-  }
\ No newline at end of file
diff --git a/Frontend/src/app/pages/register/register.component.spec.ts b/Frontend/src/app/pages/register/register.component.spec.ts
deleted file mode 100644
index 8ac39995..00000000
--- a/Frontend/src/app/pages/register/register.component.spec.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-// import { RegisterComponent } from './register.component';
-// import { RegisterComponent } from './register.component';
-
-describe('RegisterComponent', () => {
-    // let component: RegisterComponent;
-    // let fixture: ComponentFixture<RegisterComponent>;
-
-    // beforeEach(async () => {
-    //   await TestBed.configureTestingModule({
-    //     imports: [RegisterComponent]
-    //   })
-    //   .compileComponents();
-
-    //   fixture = TestBed.createComponent(RegisterComponent);
-    //   component = fixture.componentInstance;
-    //   fixture.detectChanges();
-    // });
-
-    //this breaks asuming it needs backend to run
-
-    // it('should create', () => {
-    //   expect(component).toBeTruthy();
-    // });
-
-    //test something trivial
-    it('should have a title', () => {
-        expect(true).toBe(true);
-    });
-});
diff --git a/Frontend/src/app/views/login/login.component.html b/Frontend/src/app/views/login/login.component.html
index d8404844..2c839284 100644
--- a/Frontend/src/app/views/login/login.component.html
+++ b/Frontend/src/app/views/login/login.component.html
@@ -1,2 +1,2 @@
-<app-desk-login *ngIf="screenSize === 'desktop'">login works!</app-desk-login>
-<app-mobilelogin *ngIf="screenSize === 'mobile'">login works!</app-mobilelogin>
+<app-desk-login *ngIf="screenSize === 'desktop'"></app-desk-login>
+<app-mobilelogin *ngIf="screenSize === 'mobile'"></app-mobilelogin>
diff --git a/Frontend/src/app/views/register/register.component.css b/Frontend/src/app/views/register/register.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/Frontend/src/app/views/register/register.component.html b/Frontend/src/app/views/register/register.component.html
new file mode 100644
index 00000000..fb914e7d
--- /dev/null
+++ b/Frontend/src/app/views/register/register.component.html
@@ -0,0 +1,2 @@
+<app-desk-register *ngIf="screenSize === 'desktop'"></app-desk-register>
+<app-mobileregister *ngIf="screenSize === 'mobile'">login works!</app-mobileregister>
diff --git a/Frontend/src/app/views/register/register.component.spec.ts b/Frontend/src/app/views/register/register.component.spec.ts
new file mode 100644
index 00000000..757b8952
--- /dev/null
+++ b/Frontend/src/app/views/register/register.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Frontend/src/app/views/register/register.component.ts b/Frontend/src/app/views/register/register.component.ts
new file mode 100644
index 00000000..a3f30915
--- /dev/null
+++ b/Frontend/src/app/views/register/register.component.ts
@@ -0,0 +1,27 @@
+//angular imports
+import { Component } from '@angular/core';
+import {CommonModule} from '@angular/common';
+//services
+import {ScreenSizeService} from './../../services/screen-size-service.service';
+//Component Template imports 
+import {DeskRegisterComponent} from './../../components/templates/desktop/desk-register/desk-register.component';
+import {MobileregisterComponent} from './../../components/templates/mobile/mobileregister/mobileregister.component';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [CommonModule, DeskRegisterComponent,MobileregisterComponent],
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.css'
+})
+export class RegisterComponent {
+  screenSize?: string;
+  constructor( private screenSizeService: ScreenSizeService){
+  }
+  async ngOnInit() {
+    this.screenSizeService.screenSize$.subscribe(screenSize => {
+      this.screenSize = screenSize;
+    });
+  }
+}
+