diff --git a/frontend/src/lib/ArticleEditor.svelte b/frontend/src/lib/ArticleEditor.svelte
new file mode 100644
index 00000000..6b67cc05
--- /dev/null
+++ b/frontend/src/lib/ArticleEditor.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import {
+		Card,
+		Tabs,
+		TabItem,
+		Heading,
+		Label,
+		Textarea,
+	} from "flowbite-svelte";
+	import Markdown from "$lib/Markdown.svelte";
+	import References from "$lib/References.svelte";
+	export let refs = "";
+	export let content = "";
+</script>
+
+<Card
+	class="max-w-full"
+	style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
+>
+	<Tabs contentClass="bg-none p-5" style="underline">
+		<TabItem title="article content" open>
+			<div>
+				<Label for="content" class="block mb-2"
+					>Protein Article (Markdown)</Label
+				>
+				<Textarea
+					id="content"
+					placeholder="Enter markdown..."
+					rows={12}
+					bind:value={content}
+				/>
+			</div>
+
+			<div class="mt-3">
+				<Label for="refs" class="block mb-2">References (BibTeX)</Label>
+				<Textarea
+					id="refs"
+					placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
+					rows={4}
+					bind:value={refs}
+				/>
+			</div>
+		</TabItem>
+		<TabItem title="preview">
+			{#if content.length > 0 || refs.length > 0}
+				<Card class="max-w-full">
+					<Heading tag="h4">Article</Heading>
+					<Markdown text={content} />
+				</Card>
+
+				<Card class="max-w-full mt-5">
+					<Heading tag="h4">References</Heading>
+					<References bibtex={String.raw`${refs}`} />
+				</Card>
+			{:else}
+				No content to render/preview
+			{/if}
+		</TabItem>
+	</Tabs>
+</Card>
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 1c8ea2e6..d1bd9087 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -16,6 +16,7 @@
 	import { formatProteinName } from "$lib/format";
 	import Markdown from "$lib/Markdown.svelte";
 	import References from "$lib/References.svelte";
+	import ArticleEditor from "$lib/ArticleEditor.svelte";
 
 	let name: string = "";
 	let content: string = "";
@@ -59,51 +60,9 @@
 			{/if}
 		</div>
 
-		<Card
-			class="max-w-full"
-			style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
-		>
-			<Tabs contentClass="bg-none p-5" style="underline">
-				<TabItem title="article content" open>
-					<div>
-						<Label for="content" class="block mb-2"
-							>Protein Article (Markdown)</Label
-						>
-						<Textarea
-							id="content"
-							placeholder="Enter markdown..."
-							rows={12}
-							bind:value={content}
-						/>
-					</div>
-
-					<div class="mt-3">
-						<Label for="refs" class="block mb-2">References (BibTeX)</Label>
-						<Textarea
-							id="refs"
-							placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
-							rows={4}
-							bind:value={refs}
-						/>
-					</div>
-				</TabItem>
-				<TabItem title="preview">
-					{#if content.length > 0 || refs.length > 0}
-						<Card class="max-w-full">
-							<Heading tag="h4">Article</Heading>
-							<Markdown text={content} />
-						</Card>
-
-						<Card class="max-w-full mt-5">
-							<Heading tag="h4">References</Heading>
-							<References bibtex={String.raw`${refs}`} />
-						</Card>
-					{:else}
-						No content to render/preview
-					{/if}
-				</TabItem>
-			</Tabs>
-		</Card>
+		<div>
+			<ArticleEditor bind:content bind:refs />
+		</div>
 
 		<div>
 			<Fileupload class="w-100" bind:files />