diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7b45cfa..0dce350 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CoursesComponent } from './components/courses';
-import { RegisterComponent } from './components/sign-in';
-import { SignInComponent } from './components/sign-in';
+import { catalogComponent } from './components/catalog.component';
+import { RegisterComponent } from './components/sign-in.component';
+import { SignInComponent } from './components/sign-in.component';
 
 const routes: Routes = [
-  { path: 'catalog', component: CoursesComponent, },
+  { path: 'catalog', component: catalogComponent, },
   { path: 'users/register', component: RegisterComponent, },
   { path: 'users/sign-in', component: SignInComponent, },
   { path: '', redirectTo: '/catalog', pathMatch: 'full' },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1b8df5a..b3a8499 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,20 +3,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms'
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './components/app';
-import { NavBarComponent } from './components/nav-bar';
-import { CoursesComponent } from "./components/courses";
-import { RegisterComponent } from "./components/sign-in";
-import { SignInComponent } from "./components/sign-in";
-import { LoadingComponent } from "./components/loading-spinner";
-import { DataRepositoryService } from "./services/data-repository"
-import { AccountMenuComponent } from "./components/account-menu";
+import { AppComponent } from './components/app.component';
+import { NavBarComponent } from './components/nav-bar.component';
+import { catalogComponent } from "./components/catalog.component";
+import { RegisterComponent } from "./components/sign-in.component";
+import { SignInComponent } from "./components/sign-in.component";
+import { LoadingComponent } from "./components/loading-spinner.component";
+import { DataRepositoryService } from "./services/data-repository.service"
+import { AccountMenuComponent } from "./components/account-menu.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     NavBarComponent,
-    CoursesComponent,
+    catalogComponent,
     RegisterComponent,
     SignInComponent,
     LoadingComponent,
diff --git a/src/app/components/account-menu.ts b/src/app/components/account-menu.component.ts
similarity index 93%
rename from src/app/components/account-menu.ts
rename to src/app/components/account-menu.component.ts
index 544b8e0..724c70d 100644
--- a/src/app/components/account-menu.ts
+++ b/src/app/components/account-menu.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'account-menu',
-  styleUrls: ['../styles/account-menu.css'],
+  styleUrls: ['../styles/account-menu.component.css'],
   template: `
     <div class="account">
       <span class="welcome" *ngIf="user">
diff --git a/src/app/components/app.ts b/src/app/components/app.component.ts
similarity index 100%
rename from src/app/components/app.ts
rename to src/app/components/app.component.ts
diff --git a/src/app/components/courses.ts b/src/app/components/catalog.component.ts
similarity index 91%
rename from src/app/components/courses.ts
rename to src/app/components/catalog.component.ts
index 330c923..e2e6ba6 100644
--- a/src/app/components/courses.ts
+++ b/src/app/components/catalog.component.ts
@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
-import { DataRepositoryService } from "../services/data-repository"
+import { DataRepositoryService } from "../services/data-repository.service"
 import { IClass } from '../services/class.model';
 
 @Component({
-  styleUrls: ['../styles/catalog.css'],
-  templateUrl: '../templates/catalog.html'
+  styleUrls: ['../styles/catalog.component.css'],
+  templateUrl: '../templates/catalog.component.html'
 })
-export class CoursesComponent {
+export class catalogComponent {
   classes: IClass[] = [];
   visibleClasses: IClass[] = [];
 
diff --git a/src/app/components/loading-spinner.ts b/src/app/components/loading-spinner.component.ts
similarity index 100%
rename from src/app/components/loading-spinner.ts
rename to src/app/components/loading-spinner.component.ts
diff --git a/src/app/components/nav-bar.ts b/src/app/components/nav-bar.component.ts
similarity index 91%
rename from src/app/components/nav-bar.ts
rename to src/app/components/nav-bar.component.ts
index 3d146a8..35a1e38 100644
--- a/src/app/components/nav-bar.ts
+++ b/src/app/components/nav-bar.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
-import { DataRepositoryService } from "../services/data-repository";
+import { DataRepositoryService } from "../services/data-repository.service";
 
 @Component({
   selector: 'nav-bar',
-  styleUrls: [`../styles/nav-bar.css`],
+  styleUrls: [`../styles/nav-bar.component.css`],
   template: `
     <div class="nav-bar">
       <img class="logo" src="/assets/images/whitebeard-logo.png" alt="Whitebeard Logo" />
diff --git a/src/app/components/sign-in.ts b/src/app/components/sign-in.component.ts
similarity index 97%
rename from src/app/components/sign-in.ts
rename to src/app/components/sign-in.component.ts
index 262197e..b652322 100644
--- a/src/app/components/sign-in.ts
+++ b/src/app/components/sign-in.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router'
 
-import { DataRepositoryService } from '../services/data-repository'
+import { DataRepositoryService } from '../services/data-repository.service'
 import { IUser } from '../services/user.model';
 
 @Component({
@@ -94,8 +94,8 @@ export class SignInComponent {
 }
 
 @Component({
-  styleUrls: ['../styles/register.css'],
-  templateUrl: '../templates/register.html'
+  styleUrls: ['../styles/register.component.css'],
+  templateUrl: '../templates/register.component.html'
 })
 
 export class RegisterComponent {
diff --git a/src/app/services/data-repository.ts b/src/app/services/data-repository.service.ts
similarity index 98%
rename from src/app/services/data-repository.ts
rename to src/app/services/data-repository.service.ts
index c586294..25abe61 100644
--- a/src/app/services/data-repository.ts
+++ b/src/app/services/data-repository.service.ts
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject, EMPTY, throwError, timer } from 'rxjs';
 
 
-import { IUser } from '../services/user.model';
-import { IClass, ICourse } from '../services/class.model';
+import { IUser } from './user.model';
+import { IClass, ICourse } from './class.model';
 
 @Injectable()
 export class DataRepositoryService {
diff --git a/src/app/styles/account-menu.css b/src/app/styles/account-menu.component.css
similarity index 100%
rename from src/app/styles/account-menu.css
rename to src/app/styles/account-menu.component.css
diff --git a/src/app/styles/catalog.css b/src/app/styles/catalog.component.css
similarity index 100%
rename from src/app/styles/catalog.css
rename to src/app/styles/catalog.component.css
diff --git a/src/app/styles/nav-bar.css b/src/app/styles/nav-bar.component.css
similarity index 100%
rename from src/app/styles/nav-bar.css
rename to src/app/styles/nav-bar.component.css
diff --git a/src/app/styles/register.css b/src/app/styles/register.component.css
similarity index 100%
rename from src/app/styles/register.css
rename to src/app/styles/register.component.css
diff --git a/src/app/templates/catalog.html b/src/app/templates/catalog.component.html
similarity index 97%
rename from src/app/templates/catalog.html
rename to src/app/templates/catalog.component.html
index 2853828..2a15c23 100644
--- a/src/app/templates/catalog.html
+++ b/src/app/templates/catalog.component.html
@@ -1,3 +1,6 @@
+<!--
+  1. filename best practice.
+-->
 <div class="departments">
   <button (click)="applyFilter('CH')">Charms</button>
   <button (click)="applyFilter('PO')">Potions</button>
@@ -35,4 +38,4 @@
       </tr>
     </tbody>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/templates/register.html b/src/app/templates/register.component.html
similarity index 100%
rename from src/app/templates/register.html
rename to src/app/templates/register.component.html