diff --git a/design/Quiz-Game(Community)Layout.fig b/design/Quiz-Game(Community)Layout.fig
index 9ccafcd..b413f47 100644
Binary files a/design/Quiz-Game(Community)Layout.fig and b/design/Quiz-Game(Community)Layout.fig differ
diff --git a/src/app/components/answer-question/answer-question.component.css b/src/app/components/answer-question/answer-question.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/answer-question/answer-question.component.html b/src/app/components/answer-question/answer-question.component.html
new file mode 100644
index 0000000..fa9f27c
--- /dev/null
+++ b/src/app/components/answer-question/answer-question.component.html
@@ -0,0 +1 @@
+<p>answer-question works!</p>
diff --git a/src/app/components/answer-question/answer-question.component.spec.ts b/src/app/components/answer-question/answer-question.component.spec.ts
new file mode 100644
index 0000000..18dce69
--- /dev/null
+++ b/src/app/components/answer-question/answer-question.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnswerQuestionComponent } from './answer-question.component';
+
+describe('AnswerQuestionComponent', () => {
+  let component: AnswerQuestionComponent;
+  let fixture: ComponentFixture<AnswerQuestionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AnswerQuestionComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AnswerQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/answer-question/answer-question.component.ts b/src/app/components/answer-question/answer-question.component.ts
new file mode 100644
index 0000000..fe1abdd
--- /dev/null
+++ b/src/app/components/answer-question/answer-question.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-answer-question',
+  standalone: true,
+  imports: [],
+  templateUrl: './answer-question.component.html',
+  styleUrl: './answer-question.component.css'
+})
+export class AnswerQuestionComponent {
+
+}
diff --git a/src/app/components/answer-question/submit-modal/submit-modal.component.css b/src/app/components/answer-question/submit-modal/submit-modal.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/answer-question/submit-modal/submit-modal.component.html b/src/app/components/answer-question/submit-modal/submit-modal.component.html
new file mode 100644
index 0000000..52d467a
--- /dev/null
+++ b/src/app/components/answer-question/submit-modal/submit-modal.component.html
@@ -0,0 +1 @@
+<p>submit-modal works!</p>
diff --git a/src/app/components/answer-question/submit-modal/submit-modal.component.spec.ts b/src/app/components/answer-question/submit-modal/submit-modal.component.spec.ts
new file mode 100644
index 0000000..35300c7
--- /dev/null
+++ b/src/app/components/answer-question/submit-modal/submit-modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubmitModalComponent } from './submit-modal.component';
+
+describe('SubmitModalComponent', () => {
+  let component: SubmitModalComponent;
+  let fixture: ComponentFixture<SubmitModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubmitModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SubmitModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/answer-question/submit-modal/submit-modal.component.ts b/src/app/components/answer-question/submit-modal/submit-modal.component.ts
new file mode 100644
index 0000000..484f1cf
--- /dev/null
+++ b/src/app/components/answer-question/submit-modal/submit-modal.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-submit-modal',
+  standalone: true,
+  imports: [],
+  templateUrl: './submit-modal.component.html',
+  styleUrl: './submit-modal.component.css'
+})
+export class SubmitModalComponent {
+
+}
diff --git a/src/app/components/instruction/instruction.component.css b/src/app/components/instruction/instruction.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/instruction/instruction.component.html b/src/app/components/instruction/instruction.component.html
new file mode 100644
index 0000000..62ff6d4
--- /dev/null
+++ b/src/app/components/instruction/instruction.component.html
@@ -0,0 +1 @@
+<p>instruction works!</p>
diff --git a/src/app/components/instruction/instruction.component.spec.ts b/src/app/components/instruction/instruction.component.spec.ts
new file mode 100644
index 0000000..7e80e47
--- /dev/null
+++ b/src/app/components/instruction/instruction.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InstructionComponent } from './instruction.component';
+
+describe('InstructionComponent', () => {
+  let component: InstructionComponent;
+  let fixture: ComponentFixture<InstructionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InstructionComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InstructionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/instruction/instruction.component.ts b/src/app/components/instruction/instruction.component.ts
new file mode 100644
index 0000000..ee5f9ba
--- /dev/null
+++ b/src/app/components/instruction/instruction.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-instruction',
+  standalone: true,
+  imports: [],
+  templateUrl: './instruction.component.html',
+  styleUrl: './instruction.component.css'
+})
+export class InstructionComponent {
+
+}
diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
new file mode 100644
index 0000000..147cfc4
--- /dev/null
+++ b/src/app/components/login/login.component.html
@@ -0,0 +1 @@
+<p>login works!</p>
diff --git a/src/app/components/login/login.component.spec.ts b/src/app/components/login/login.component.spec.ts
new file mode 100644
index 0000000..1e19e5d
--- /dev/null
+++ b/src/app/components/login/login.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+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();
+  });
+});
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..5ed433d
--- /dev/null
+++ b/src/app/components/login/login.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+
+}
diff --git a/src/app/components/menu/asside-menu/asside-menu.component.css b/src/app/components/menu/asside-menu/asside-menu.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/menu/asside-menu/asside-menu.component.html b/src/app/components/menu/asside-menu/asside-menu.component.html
new file mode 100644
index 0000000..f345246
--- /dev/null
+++ b/src/app/components/menu/asside-menu/asside-menu.component.html
@@ -0,0 +1 @@
+<p>asside-menu works!</p>
diff --git a/src/app/components/menu/asside-menu/asside-menu.component.spec.ts b/src/app/components/menu/asside-menu/asside-menu.component.spec.ts
new file mode 100644
index 0000000..91cd205
--- /dev/null
+++ b/src/app/components/menu/asside-menu/asside-menu.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssideMenuComponent } from './asside-menu.component';
+
+describe('AssideMenuComponent', () => {
+  let component: AssideMenuComponent;
+  let fixture: ComponentFixture<AssideMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AssideMenuComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AssideMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/menu/asside-menu/asside-menu.component.ts b/src/app/components/menu/asside-menu/asside-menu.component.ts
new file mode 100644
index 0000000..3af0136
--- /dev/null
+++ b/src/app/components/menu/asside-menu/asside-menu.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-asside-menu',
+  standalone: true,
+  imports: [],
+  templateUrl: './asside-menu.component.html',
+  styleUrl: './asside-menu.component.css'
+})
+export class AssideMenuComponent {
+
+}
diff --git a/src/app/components/menu/menu.component.css b/src/app/components/menu/menu.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html
new file mode 100644
index 0000000..136889f
--- /dev/null
+++ b/src/app/components/menu/menu.component.html
@@ -0,0 +1 @@
+<p>menu works!</p>
diff --git a/src/app/components/menu/menu.component.spec.ts b/src/app/components/menu/menu.component.spec.ts
new file mode 100644
index 0000000..d475a1a
--- /dev/null
+++ b/src/app/components/menu/menu.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MenuComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/menu/menu.component.ts b/src/app/components/menu/menu.component.ts
new file mode 100644
index 0000000..37459b8
--- /dev/null
+++ b/src/app/components/menu/menu.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  standalone: true,
+  imports: [],
+  templateUrl: './menu.component.html',
+  styleUrl: './menu.component.css'
+})
+export class MenuComponent {
+
+}
diff --git a/src/app/components/profile/achievements/achievements.component.css b/src/app/components/profile/achievements/achievements.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/profile/achievements/achievements.component.html b/src/app/components/profile/achievements/achievements.component.html
new file mode 100644
index 0000000..9785769
--- /dev/null
+++ b/src/app/components/profile/achievements/achievements.component.html
@@ -0,0 +1 @@
+<p>achievements works!</p>
diff --git a/src/app/components/profile/achievements/achievements.component.spec.ts b/src/app/components/profile/achievements/achievements.component.spec.ts
new file mode 100644
index 0000000..d10c645
--- /dev/null
+++ b/src/app/components/profile/achievements/achievements.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AchievementsComponent } from './achievements.component';
+
+describe('AchievementsComponent', () => {
+  let component: AchievementsComponent;
+  let fixture: ComponentFixture<AchievementsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AchievementsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AchievementsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/profile/achievements/achievements.component.ts b/src/app/components/profile/achievements/achievements.component.ts
new file mode 100644
index 0000000..96e1b14
--- /dev/null
+++ b/src/app/components/profile/achievements/achievements.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-achievements',
+  standalone: true,
+  imports: [],
+  templateUrl: './achievements.component.html',
+  styleUrl: './achievements.component.css'
+})
+export class AchievementsComponent {
+
+}
diff --git a/src/app/components/profile/featured-category/featured-category.component.css b/src/app/components/profile/featured-category/featured-category.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/profile/featured-category/featured-category.component.html b/src/app/components/profile/featured-category/featured-category.component.html
new file mode 100644
index 0000000..2113148
--- /dev/null
+++ b/src/app/components/profile/featured-category/featured-category.component.html
@@ -0,0 +1 @@
+<p>featured-category works!</p>
diff --git a/src/app/components/profile/featured-category/featured-category.component.spec.ts b/src/app/components/profile/featured-category/featured-category.component.spec.ts
new file mode 100644
index 0000000..e9dc403
--- /dev/null
+++ b/src/app/components/profile/featured-category/featured-category.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeaturedCategoryComponent } from './featured-category.component';
+
+describe('FeaturedCategoryComponent', () => {
+  let component: FeaturedCategoryComponent;
+  let fixture: ComponentFixture<FeaturedCategoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FeaturedCategoryComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FeaturedCategoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/profile/featured-category/featured-category.component.ts b/src/app/components/profile/featured-category/featured-category.component.ts
new file mode 100644
index 0000000..0570640
--- /dev/null
+++ b/src/app/components/profile/featured-category/featured-category.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-featured-category',
+  standalone: true,
+  imports: [],
+  templateUrl: './featured-category.component.html',
+  styleUrl: './featured-category.component.css'
+})
+export class FeaturedCategoryComponent {
+
+}
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
new file mode 100644
index 0000000..9df0576
--- /dev/null
+++ b/src/app/components/profile/profile.component.html
@@ -0,0 +1 @@
+<p>profile works!</p>
diff --git a/src/app/components/profile/profile.component.spec.ts b/src/app/components/profile/profile.component.spec.ts
new file mode 100644
index 0000000..f997fb0
--- /dev/null
+++ b/src/app/components/profile/profile.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
new file mode 100644
index 0000000..164f030
--- /dev/null
+++ b/src/app/components/profile/profile.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  imports: [],
+  templateUrl: './profile.component.html',
+  styleUrl: './profile.component.css'
+})
+export class ProfileComponent {
+
+}
diff --git a/src/app/components/recover-account/recover-account.component.css b/src/app/components/recover-account/recover-account.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/recover-account/recover-account.component.html b/src/app/components/recover-account/recover-account.component.html
new file mode 100644
index 0000000..dd76458
--- /dev/null
+++ b/src/app/components/recover-account/recover-account.component.html
@@ -0,0 +1 @@
+<p>recover-account works!</p>
diff --git a/src/app/components/recover-account/recover-account.component.spec.ts b/src/app/components/recover-account/recover-account.component.spec.ts
new file mode 100644
index 0000000..e2f066d
--- /dev/null
+++ b/src/app/components/recover-account/recover-account.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecoverAccountComponent } from './recover-account.component';
+
+describe('RecoverAccountComponent', () => {
+  let component: RecoverAccountComponent;
+  let fixture: ComponentFixture<RecoverAccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecoverAccountComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(RecoverAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/recover-account/recover-account.component.ts b/src/app/components/recover-account/recover-account.component.ts
new file mode 100644
index 0000000..2c14e3a
--- /dev/null
+++ b/src/app/components/recover-account/recover-account.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-recover-account',
+  standalone: true,
+  imports: [],
+  templateUrl: './recover-account.component.html',
+  styleUrl: './recover-account.component.css'
+})
+export class RecoverAccountComponent {
+
+}
diff --git a/src/app/components/review-questions/review-modal/review-modal.component.css b/src/app/components/review-questions/review-modal/review-modal.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/review-questions/review-modal/review-modal.component.html b/src/app/components/review-questions/review-modal/review-modal.component.html
new file mode 100644
index 0000000..2411df6
--- /dev/null
+++ b/src/app/components/review-questions/review-modal/review-modal.component.html
@@ -0,0 +1 @@
+<p>review-modal works!</p>
diff --git a/src/app/components/review-questions/review-modal/review-modal.component.spec.ts b/src/app/components/review-questions/review-modal/review-modal.component.spec.ts
new file mode 100644
index 0000000..f197d14
--- /dev/null
+++ b/src/app/components/review-questions/review-modal/review-modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewModalComponent } from './review-modal.component';
+
+describe('ReviewModalComponent', () => {
+  let component: ReviewModalComponent;
+  let fixture: ComponentFixture<ReviewModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReviewModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ReviewModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/review-questions/review-modal/review-modal.component.ts b/src/app/components/review-questions/review-modal/review-modal.component.ts
new file mode 100644
index 0000000..bb7b2f5
--- /dev/null
+++ b/src/app/components/review-questions/review-modal/review-modal.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-review-modal',
+  standalone: true,
+  imports: [],
+  templateUrl: './review-modal.component.html',
+  styleUrl: './review-modal.component.css'
+})
+export class ReviewModalComponent {
+
+}
diff --git a/src/app/components/review-questions/review-questions.component.css b/src/app/components/review-questions/review-questions.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/review-questions/review-questions.component.html b/src/app/components/review-questions/review-questions.component.html
new file mode 100644
index 0000000..649acb1
--- /dev/null
+++ b/src/app/components/review-questions/review-questions.component.html
@@ -0,0 +1 @@
+<p>review-questions works!</p>
diff --git a/src/app/components/review-questions/review-questions.component.spec.ts b/src/app/components/review-questions/review-questions.component.spec.ts
new file mode 100644
index 0000000..42b0b3d
--- /dev/null
+++ b/src/app/components/review-questions/review-questions.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewQuestionsComponent } from './review-questions.component';
+
+describe('ReviewQuestionsComponent', () => {
+  let component: ReviewQuestionsComponent;
+  let fixture: ComponentFixture<ReviewQuestionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReviewQuestionsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ReviewQuestionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/review-questions/review-questions.component.ts b/src/app/components/review-questions/review-questions.component.ts
new file mode 100644
index 0000000..c8ca39c
--- /dev/null
+++ b/src/app/components/review-questions/review-questions.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-review-questions',
+  standalone: true,
+  imports: [],
+  templateUrl: './review-questions.component.html',
+  styleUrl: './review-questions.component.css'
+})
+export class ReviewQuestionsComponent {
+
+}
diff --git a/src/app/components/select-topic/select-topic.component.css b/src/app/components/select-topic/select-topic.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/select-topic/select-topic.component.html b/src/app/components/select-topic/select-topic.component.html
new file mode 100644
index 0000000..fb41a39
--- /dev/null
+++ b/src/app/components/select-topic/select-topic.component.html
@@ -0,0 +1 @@
+<p>select-topic works!</p>
diff --git a/src/app/components/select-topic/select-topic.component.spec.ts b/src/app/components/select-topic/select-topic.component.spec.ts
new file mode 100644
index 0000000..d7987c0
--- /dev/null
+++ b/src/app/components/select-topic/select-topic.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectTopicComponent } from './select-topic.component';
+
+describe('SelectTopicComponent', () => {
+  let component: SelectTopicComponent;
+  let fixture: ComponentFixture<SelectTopicComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectTopicComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SelectTopicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/select-topic/select-topic.component.ts b/src/app/components/select-topic/select-topic.component.ts
new file mode 100644
index 0000000..2aa2297
--- /dev/null
+++ b/src/app/components/select-topic/select-topic.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-select-topic',
+  standalone: true,
+  imports: [],
+  templateUrl: './select-topic.component.html',
+  styleUrl: './select-topic.component.css'
+})
+export class SelectTopicComponent {
+
+}
diff --git a/src/app/components/sign-up/sign-up.component.css b/src/app/components/sign-up/sign-up.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/sign-up/sign-up.component.html b/src/app/components/sign-up/sign-up.component.html
new file mode 100644
index 0000000..7e8b79f
--- /dev/null
+++ b/src/app/components/sign-up/sign-up.component.html
@@ -0,0 +1 @@
+<p>sign-up works!</p>
diff --git a/src/app/components/sign-up/sign-up.component.spec.ts b/src/app/components/sign-up/sign-up.component.spec.ts
new file mode 100644
index 0000000..9e16d47
--- /dev/null
+++ b/src/app/components/sign-up/sign-up.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignUpComponent } from './sign-up.component';
+
+describe('SignUpComponent', () => {
+  let component: SignUpComponent;
+  let fixture: ComponentFixture<SignUpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SignUpComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SignUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/sign-up/sign-up.component.ts b/src/app/components/sign-up/sign-up.component.ts
new file mode 100644
index 0000000..49f2f01
--- /dev/null
+++ b/src/app/components/sign-up/sign-up.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sign-up',
+  standalone: true,
+  imports: [],
+  templateUrl: './sign-up.component.html',
+  styleUrl: './sign-up.component.css'
+})
+export class SignUpComponent {
+
+}