diff --git a/apps/login/src/app/remote-entry/entry.component.css b/apps/login/src/app/remote-entry/entry.component.css
new file mode 100644
index 0000000..30cb06c
--- /dev/null
+++ b/apps/login/src/app/remote-entry/entry.component.css
@@ -0,0 +1,16 @@
+.login-app {
+  width: 30vw;
+  border: 2px dashed black;
+  padding: 8px;
+  margin: 0 auto;
+}
+.login-form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 8px;
+}
+label {
+  display: block;
+}
\ No newline at end of file
diff --git a/apps/login/src/app/remote-entry/entry.component.html b/apps/login/src/app/remote-entry/entry.component.html
new file mode 100644
index 0000000..548b8c9
--- /dev/null
+++ b/apps/login/src/app/remote-entry/entry.component.html
@@ -0,0 +1,17 @@
+<div class="login-app">
+  <form class="login-form" (ngSubmit)="login()">
+    <label>
+      Username:
+      <input type="text" name="username" [(ngModel)]="username" />
+    </label>
+    <label>
+      Password:
+      <input type="password" name="password" [(ngModel)]="password" />
+    </label>
+    <button type="submit">Login</button>
+  </form>
+  <!-- This is the chat bot component that is exposed by the shared library -->
+  <ac-chat-bot></ac-chat-bot>
+  <div *ngIf="isLoggedIn$ | async">User is logged in!</div>
+  <div *ngIf="(isLoggedIn$ | async) === false">User is not logged in!</div>
+</div>
\ No newline at end of file
diff --git a/apps/login/src/app/remote-entry/entry.component.ts b/apps/login/src/app/remote-entry/entry.component.ts
index 70a79de..a2d894c 100644
--- a/apps/login/src/app/remote-entry/entry.component.ts
+++ b/apps/login/src/app/remote-entry/entry.component.ts
@@ -5,58 +5,31 @@ import { UserService } from '@ng-mf/data-access-user';
 import { ChatBotComponent } from 'login/chatBot';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, FormsModule, ChatBotComponent],
   selector: 'ng-mf-login-entry',
-  template: `
-    <div class="login-app">
-      <form class="login-form" (ngSubmit)="login()">
-        <label>
-          Username:
-          <input type="text" name="username" [(ngModel)]="username" />
-        </label>
-        <label>
-          Password:
-          <input type="password" name="password" [(ngModel)]="password" />
-        </label>
-        <button type="submit">Login</button>
-      </form>
-      <!-- This is the chat bot component that is exposed by the shared library -->
-      <ac-chat-bot></ac-chat-bot>
-      <div *ngIf="isLoggedIn$ | async">User is logged in!</div>
-      <div *ngIf="(isLoggedIn$ | async) === false">User is not logged in!</div>
-    </div>
-  `,
-  styles: [
-    `
-      .login-app {
-        width: 30vw;
-        border: 2px dashed black;
-        padding: 8px;
-        margin: 0 auto;
-      }
-      .login-form {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        margin: 0 auto;
-        padding: 8px;
-      }
-      label {
-        display: block;
-      }
-    `,
-  ],
+  templateUrl: './entry.component.html',
+  styleUrls: ['./entry.component.css'],
 })
+/**
+ * This component is the entry point for the remote login application.
+ */
 export class RemoteEntryComponent {
   username = '';
   password = '';
   isLoggedIn$;
 
+  /**
+   * Constructor for the RemoteEntryComponent.
+   * 
+   * @param userService 
+   */
   constructor(private userService: UserService) {
     this.isLoggedIn$ = this.userService.isUserLoggedIn$;
   }
 
+  /**
+   * Method to log in the user.
+   */
   login() {
     this.userService.checkCredentials(this.username, this.password);
   }