diff --git a/client/src/components/CourseEditor.vue b/client/src/components/CourseEditor.vue
deleted file mode 100644
index dce9c608..00000000
--- a/client/src/components/CourseEditor.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div v-if="AuthService.isAdmin(auth0)"
-    class="bg-mysticStone text-white border-slate-400 border-2 rounded p-1 pl-2 my-2">
-    <div class="text-2xl">Course Editor</div>
-    <input type="checkbox" id="edit-mode" name="editMode" v-model="state.isEditMode">
-    <label for="edit-mode"> {{ handlerText }} mode?</label>
-    <span class="inline-block" :class="{ invisible: !state.isEditMode }">
-      <Button :handler="() => handler(state)" :text="handlerText"></Button>
-    </span>
-    <div :class="{ invisible: !state.isEditMode }">
-      <input type="checkbox" id="show-preview" @change="onPreviewChangeAsync" name="showPreview"
-        v-model="state.showPreview">
-      <label for="show-preview"> Show preview?</label>
-    </div>
-    <div v-if="AuthService.isAdmin(auth0) && state.isEditMode">
-      <div class="text-white border-white border-2 rounded p-1 pl-2 my-2 mr-12">Name</div>
-      <CodeEditor v-model="state.name" :height="2"></CodeEditor>
-      <p v-if="AuthService.isAdmin(auth0) && state.isEditMode && state.showPreview"
-        class="text-2xl font-bold border-slate-400 rounded border-2 p-1 pl-2">{{ state.name?.toUpperCase() }}</p>
-      <div class="text-white border-white border-2 rounded p-1 pl-2 p my-2 mr-1">Description</div>
-      <CodeEditor v-model="state.description" :height="2"></CodeEditor>
-      <p v-if="AuthService.isAdmin(auth0) && state.isEditMode && state.showPreview"
-        class="text-xl border-slate-400 rounded border-2 p-1 pl-2 my-2" v-html="state.description"></p>
-      <div class="text-white border-white border-2 rounded p-1 pl-2 my-2 mr-8">Content</div>
-      <CodeEditor v-model="state.content" language="html" v-on:update:model-value="onContentChangeAsync" :height="40">
-      </CodeEditor>
-      <div v-if="AuthService.isAdmin(auth0) && state.isEditMode && state.showPreview"
-        class="text-xl border-slate-400 rounded border-2 p-1 pl-2 my-2" v-html="state.templatedContent"></div>
-      <div class="text-white border-white border-2 rounded p-1 pl-2 my-2 mr-12">Id</div>
-      <CodeEditor v-model="state.id" :height="2"></CodeEditor>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/Button.vue';
-import CodeEditor from '@/components/CodeEditor.vue';
-import { reactive } from 'vue';
-import AuthService from '@/services/AuthService';
-import { useAuth0 } from '@auth0/auth0-vue';
-import CourseService from '@/services/CourseService';
-import { useToast } from 'vue-toastification';
-
-export type CourseEditorState = {
-  isEditMode: boolean,
-  showPreview: boolean,
-  id: string,
-  name: string,
-  description: string,
-  content: string,
-  templatedContent: string,
-};
-
-const auth0 = useAuth0();
-const toast = useToast();
-
-const props = defineProps<{
-  handler: (state: CourseEditorState) => void,
-  handlerText: string,
-  courseId: string,
-  courseName: string,
-  courseDescription: string,
-  courseContent: string,
-}>();
-
-const state = reactive<CourseEditorState>({
-  isEditMode: false,
-  showPreview: false,
-  id: props.courseId,
-  name: props.courseName,
-  description: props.courseDescription,
-  content: props.courseContent,
-  templatedContent: props.courseContent,
-});
-
-const token = await AuthService.getAccessTokenAsync(auth0, { toast: toast });
-
-async function onPreviewChangeAsync(event: any) {
-  if (event.target.checked) {
-    state.templatedContent = await CourseService.fillTemplateAsync(state.content, { toast: toast, token: token });
-  }
-}
-
-async function onContentChangeAsync(event: any) {
-  if (state.showPreview) {
-    state.templatedContent = await CourseService.fillTemplateAsync(state.content, { toast: toast, token: token });
-  }
-}
-</script>
diff --git a/client/src/components/CourseLink.vue b/client/src/components/CourseLink.vue
index e3225b65..b4b650af 100644
--- a/client/src/components/CourseLink.vue
+++ b/client/src/components/CourseLink.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { RouterLink } from 'vue-router';
 
 export default defineComponent({
   name: 'CourseLink',
diff --git a/client/src/components/CoursePost.vue b/client/src/components/CoursePost.vue
index f7cba790..9f506580 100644
--- a/client/src/components/CoursePost.vue
+++ b/client/src/components/CoursePost.vue
@@ -7,8 +7,8 @@
         v-html="state.description"></p>
       <div v-if="auth0.isAuthenticated" class="text-xl border-slate-400 rounded border-2 p-1 pl-2 my-2"
         v-html="props.templatedContent"></div>
-      <CourseEditor :handler="saveCourseAsync" handlerText="Update" :courseId="state.id" :courseContent="state.content"
-        :courseDescription="state.description" :courseName="state.name"></CourseEditor>
+      <!-- <CourseEditor :handler="saveCourseAsync" handlerText="Update" :courseId="state.id" :courseContent="state.content"
+        :courseDescription="state.description" :courseName="state.name"></CourseEditor> -->
     </div>
   </div>
 </template>
@@ -16,7 +16,6 @@
 <script setup lang="ts">
 import AuthService from '@/services/AuthService';
 import CourseService from '@/services/CourseService';
-import CourseEditor from '@/components/CourseEditor.vue';
 import type { Course, CourseEditorState } from '@/models';
 import { reactive } from 'vue';
 import { useAuth0 } from '@auth0/auth0-vue';
diff --git a/client/src/components/ModelEditor.vue b/client/src/components/ModelEditor.vue
new file mode 100644
index 00000000..ac39e90d
--- /dev/null
+++ b/client/src/components/ModelEditor.vue
@@ -0,0 +1,61 @@
+<template>
+  <div v-if="AuthService.isAdmin(auth0)"
+    class="bg-mysticStone text-white border-slate-400 border-2 rounded p-1 pl-2 my-2">
+    <div class="text-2xl">Model Editor</div>
+    <input type="checkbox" id="edit-mode" name="editMode" v-model="state.isEditMode">
+    <label for="edit-mode"> {{ handlerText }} mode?</label>
+    <span class="inline-block" :class="{ invisible: !state.isEditMode }">
+      <Button :handler="() => handler(state.viewModel)" :text="handlerText"></Button>
+    </span>
+    <div :class="{ invisible: !state.isEditMode }">
+      <input type="checkbox" id="show-preview" name="showPreview"
+        v-model="state.showPreview">
+      <label for="show-preview"> Show preview?</label>
+    </div>
+    <div v-if="AuthService.isAdmin(auth0) && state.isEditMode">
+      <div v-for="viewKey in modelService.objectViewKeys">
+        <div class="capitalize text-white border-white border-2 rounded p-1 pl-2 my-2 mr-12">{{ viewKey.key }}</div>
+        <input v-if="viewKey.kind !== 'code'" v-model="(state.viewModel as any)[viewKey.key]" :type="viewKey.kind">
+        <CodeEditor v-if="viewKey.kind === 'code'" v-model="(state.viewModel as any)[viewKey.key]" :height="viewKey.height ?? 2"></CodeEditor>
+      </div>
+
+      <!-- TODO: Enable preview by embedding the View component for the type -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/Button.vue';
+import CodeEditor from '@/components/CodeEditor.vue';
+import { reactive, type UnwrapRef } from 'vue';
+import AuthService from '@/services/AuthService';
+import { useAuth0 } from '@auth0/auth0-vue';
+import { useToast } from 'vue-toastification';
+import ModelService from '@/services/ModelService';
+import type { ViewModel } from '@/models';
+
+const auth0 = useAuth0();
+const toast = useToast();
+
+const props = defineProps<{
+  handler: (viewModel: UnwrapRef<ViewModel>) => void,
+  handlerText: string,
+  modelKind: string
+}>();
+
+type EditorState = {
+  isEditMode: boolean,
+  showPreview: boolean,
+  viewModel: ViewModel,
+};
+
+const modelService = ModelService.inject(props.modelKind) as ModelService<ViewModel>;
+
+const state = reactive<EditorState>({
+  isEditMode: false,
+  showPreview: false,  
+  viewModel: modelService.make()
+});
+
+const token = await AuthService.getAccessTokenAsync(auth0, { toast: toast });
+</script>
diff --git a/client/src/models/index.ts b/client/src/models/index.ts
index cb4d9e0b..0b3ef0c3 100644
--- a/client/src/models/index.ts
+++ b/client/src/models/index.ts
@@ -7,6 +7,12 @@ export type ViewKey = {
   height?: number
 }
 
+export interface ModelEditorState {
+  isEditMode: boolean
+  showPreview: boolean
+  id: string
+};
+
 export abstract class ViewModel {
   id: Id;
   
@@ -78,7 +84,7 @@ export class Course extends ViewModel {
   }
 };
 
-export class CourseEditorState {
+export class CourseEditorState implements ModelEditorState {
   isEditMode: boolean = false
   showPreview: boolean = false
   id: string = ''
diff --git a/client/src/services/AssignmentService.ts b/client/src/services/AssignmentService.ts
index 278411be..f1c7ed20 100644
--- a/client/src/services/AssignmentService.ts
+++ b/client/src/services/AssignmentService.ts
@@ -1,8 +1,8 @@
-import BlobService from './BlobService';
 import HttpServiceV1, { type HttpOptions } from './HttpServiceV1';
 import { Assignment, AssignmentMetadata, type AssignmentIndex, type Id, type ViewKey } from '@/models';
+import type ModelService from './ModelService';
 
-export default class AssignmentService  {
+export default class AssignmentService implements ModelService<Assignment>  {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
   ];
@@ -33,26 +33,6 @@ export default class AssignmentService  {
     }
   }
 
-  static async fillTemplateAsync(template: string, options: HttpOptions = {}): Promise<string> {
-    if (!template) {
-      return '';
-    }
-    // NOTE: Match and captures what is between ${}, to replace with presigned URLss
-    const re = /"\${([0-9a-zA-Z_\-\/\.]+)}"/g;
-    const presignedUrls = new Map<string, string>();
-    for (let match of template.matchAll(re)) {
-      const textToReplace = match[0];
-      const filePath = match[1];
-      if (!(textToReplace in presignedUrls)) {
-        presignedUrls.set(textToReplace, await BlobService.getPresignedUrlAsync(filePath, options));
-      }
-    }
-    for (let [key, value] of presignedUrls) {
-      template = template.replace(key, value);
-    }
-    return template;
-  }
-
   static async getAsync(id: Id, options: HttpOptions = {}): Promise<Assignment> {
     try {
       return new Assignment(
diff --git a/client/src/services/BlobService.ts b/client/src/services/BlobService.ts
index 8bd83e94..5de61c58 100644
--- a/client/src/services/BlobService.ts
+++ b/client/src/services/BlobService.ts
@@ -1,7 +1,7 @@
 import type { Id } from '@/models';
 import HttpServiceV1, { type HttpOptions } from './HttpServiceV1';
 
-export default class BlobService {
+export default class BlobService  {  
   static async getPresignedUrlAsync(id: Id, options: HttpOptions = {}): Promise<string> {
     try {
       return await HttpServiceV1.getTextAsync(`blob?url=${id}`, options);
diff --git a/client/src/services/BlogService.ts b/client/src/services/BlogService.ts
index 7853698e..9a39708e 100644
--- a/client/src/services/BlogService.ts
+++ b/client/src/services/BlogService.ts
@@ -1,8 +1,9 @@
 import type { BlogIndex, Id, ViewKey } from '@/models';
 import { Blog, BlogMetadata } from '@/models';
 import HttpServiceV1, { type HttpOptions } from './HttpServiceV1';
+import type ModelService from './ModelService';
 
-export default class BlogService {
+export default class BlogService implements ModelService<Blog>  {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
   ];
diff --git a/client/src/services/CourseService.ts b/client/src/services/CourseService.ts
index 231693d2..63b55db8 100644
--- a/client/src/services/CourseService.ts
+++ b/client/src/services/CourseService.ts
@@ -1,8 +1,8 @@
 import { Course, CourseMetadata, type CourseIndex, type Id, type ViewKey } from '@/models';
-import BlobService from './BlobService';
 import HttpServiceV1, { type HttpOptions } from './HttpServiceV1';
+import ModelService from './ModelService';
 
-export default class CourseService {
+export default class CourseService implements ModelService<Course> {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
     { key: 'name', kind: 'code' },
@@ -35,33 +35,12 @@ export default class CourseService {
       throw err;
     }
   }
-
-  static async fillTemplateAsync(template: string, options: HttpOptions = {}): Promise<string> {
-    if (!template) {
-      return '';
-    }
-    // NOTE: Match and captures what is between ${}, to replace with presigned URLss
-    const re = /"\${([0-9a-zA-Z_\-\/\.]+)}"/g;
-    const presignedUrls = new Map<string, string>();
-    for (let match of template.matchAll(re)) {
-      const textToReplace = match[0];
-      const filePath = match[1];
-      if (!(textToReplace in presignedUrls)) {
-        presignedUrls.set(textToReplace, await BlobService.getPresignedUrlAsync(filePath, options));
-      }
-    }
-    for (let [key, value] of presignedUrls) {
-      template = template.replace(key, value);
-    }
-    return template;
-  }
-
   static async getAsync(id: Id, options: HttpOptions = {}): Promise<Course> {
     try {
       const course = new Course(
         await HttpServiceV1.getAsync('course', id, options));
       try {
-        course.templatedContent = await CourseService.fillTemplateAsync(course.content, options);
+        course.templatedContent = await ModelService.fillTemplateAsync(course.content, options);
       }
       catch (err: any) {
         options.toast?.error(`Failed to fill template for course content: ${err}`);
diff --git a/client/src/services/ModelService.ts b/client/src/services/ModelService.ts
new file mode 100644
index 00000000..aa074d0d
--- /dev/null
+++ b/client/src/services/ModelService.ts
@@ -0,0 +1,50 @@
+import type { ViewKey } from "@/models";
+import BlobService from "./BlobService";
+import type { HttpOptions } from "./HttpServiceV1";
+import SectionService from "./SectionService";
+import CourseService from "./CourseService";
+import AssignmentService from "./AssignmentService";
+import BlogService from "./BlogService";
+
+abstract class ModelService<T> {
+  abstract objectViewKeys: ViewKey[];
+
+  static inject(kind: string) {
+    switch (kind) {
+      case 'assignment':
+        return new AssignmentService();
+      case 'blog':
+        return new BlogService();
+      case 'course':
+        return new CourseService();
+      case 'section':
+        return new SectionService();
+      default:
+        throw new Error(`Unknown kind: ${kind}`);
+    }
+  }
+
+  abstract make(): T;
+
+  static async fillTemplateAsync(template: string, options: HttpOptions = {}): Promise<string> {
+    if (!template) {
+      return '';
+    }
+    // NOTE: Match and captures what is between ${}, to replace with presigned URLs
+    const re = /"\${([0-9a-zA-Z_\-\/\.]+)}"/g;
+    const presignedUrls = new Map<string, string>();
+    for (let match of template.matchAll(re)) {
+      const textToReplace = match[0];
+      const filePath = match[1];
+      if (!(textToReplace in presignedUrls)) {
+        presignedUrls.set(textToReplace, await BlobService.getPresignedUrlAsync(filePath, options));
+      }
+    }
+    for (let [key, value] of presignedUrls) {
+      template = template.replace(key, value);
+    }
+    return template;
+  }
+}
+
+export default ModelService;
diff --git a/client/src/services/SectionService.ts b/client/src/services/SectionService.ts
index 7f5f398d..af25d533 100644
--- a/client/src/services/SectionService.ts
+++ b/client/src/services/SectionService.ts
@@ -1,7 +1,8 @@
 import { Section, type ViewKey, type Id, type SectionIndex, SectionMetadata } from '@/models';
 import HttpServiceV1, { type HttpOptions } from './HttpServiceV1';
+import type ModelService from './ModelService';
 
-export default class SectionService {
+export default class SectionService implements ModelService<Section> {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
   ];
diff --git a/client/src/views/AssignmentView.vue b/client/src/views/AssignmentView.vue
index f8d42622..79c3e191 100644
--- a/client/src/views/AssignmentView.vue
+++ b/client/src/views/AssignmentView.vue
@@ -29,7 +29,7 @@ import AssignmentEditor, { type AssignmentEditorState } from '@/components/Assig
 import AssignmentLink from '@/components/AssignmentLink.vue';
 import AssignmentService from '@/services/AssignmentService';
 import Spinner from '@/components/Spinner.vue';
-import type { AssignmentIndex, AssignmentMetadata, Id } from '@/models';
+import type { AssignmentIndex } from '@/models';
 import { onMounted, reactive } from 'vue';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useToast } from "vue-toastification";
diff --git a/client/src/views/CourseView.vue b/client/src/views/CourseView.vue
index f8035cca..c3a77ff9 100644
--- a/client/src/views/CourseView.vue
+++ b/client/src/views/CourseView.vue
@@ -12,8 +12,7 @@
           <Button v-if="AuthService.isAdmin(auth0)" :handler="async () => await deleteCourseAsync(id)"
             text="Delete?" class="w-20"></Button>
         </span>
-        <CourseEditor :handler="createCourseAsync" handlerText="Create" courseId="" courseContent=""
-          courseDescription="" courseName=""></CourseEditor>
+        <ModelEditor :handler="createCourseAsync" handlerText="Create" modelKind="course"></ModelEditor>
       </div>
     </div>
   </div>
@@ -28,7 +27,7 @@ import Spinner from '@/components/Spinner.vue';
 import { onMounted, reactive } from 'vue';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useToast } from "vue-toastification";
-import CourseEditor from '@/components/CourseEditor.vue';
+import ModelEditor from '@/components/ModelEditor.vue';
 import type { CourseIndex } from '@/models';