diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index d1bacad..aed540d 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -37,6 +37,7 @@ import {
   closeBracketsKeymap,
 } from '@codemirror/autocomplete';
 import { lintKeymap } from '@codemirror/lint';
+import { Router } from '@angular/router';
 import { WorkService } from '../../services/work.service';
 import { Work } from '../../models/work.model';
 
@@ -142,6 +143,7 @@ export class EditorComponent {
   ];
 
   constructor(
+    private router: Router,
     private codeExecutionService: CodeExecutionService,
     protected workService: WorkService
   ) {}
@@ -238,7 +240,10 @@ export class EditorComponent {
       );
     }
     else {
-      this.addToDatabase();
+      const link = this.addToDatabase();
+      const url = `/work/${link}`;
+      this.router.navigateByUrl(url);
+
     }
   }
 
diff --git a/src/app/components/works-list/works-list.component.html b/src/app/components/works-list/works-list.component.html
index abb0eed..23e2b20 100644
--- a/src/app/components/works-list/works-list.component.html
+++ b/src/app/components/works-list/works-list.component.html
@@ -1,13 +1,15 @@
-<h2>Works</h2>
+<div style="margin-left: 30px">
+  <h2>Works</h2>
 
-<h3>Last Work</h3>
-<div *ngFor="let work of works | slice: -1">
-  <app-work-list-detail [work]="work"></app-work-list-detail>
-</div>
-
-<h3>All Works</h3>
-<div class="all-works">
-  <div *ngFor="let work of works">
+  <h3>Last Work</h3>
+  <div *ngFor="let work of works | slice: -1">
     <app-work-list-detail [work]="work"></app-work-list-detail>
   </div>
+
+  <h3>All Works</h3>
+  <div class="all-works">
+    <div *ngFor="let work of works">
+      <app-work-list-detail [work]="work"></app-work-list-detail>
+    </div>
+  </div>
 </div>