diff --git a/components/DataDirPicker.tsx b/components/DataDirPicker.tsx
new file mode 100644
index 0000000..72e8757
--- /dev/null
+++ b/components/DataDirPicker.tsx
@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from "react";
+
+import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import {
+  addPluginInOrder,
+  clearPlugins,
+  setPending,
+  decrementPending,
+  PluginFile,
+} from "../slices/plugins";
+import styles from "../styles/DataDirPicker.module.css";
+
+export const excludedPlugins = [
+  "Skyrim.esm",
+  "Update.esm",
+  "Dawnguard.esm",
+  "HearthFires.esm",
+  "Dragonborn.esm",
+];
+
+type Props = {};
+
+const DataDirPicker: React.FC<Props> = () => {
+  const workerRef = useRef<Worker>();
+  const dispatch = useAppDispatch();
+  const plugins = useAppSelector((state) => state.plugins.plugins);
+
+  useEffect(() => {
+    async function loadWorker() {
+      const { default: Worker } = await import(
+        "worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
+      );
+      console.log(Worker);
+      workerRef.current = new Worker();
+      workerRef.current.onmessage = (evt: { data: PluginFile }) => {
+        const { data } = evt;
+        console.log(`WebWorker Response =>`);
+        dispatch(decrementPending(1));
+        console.log(data.parsed);
+        dispatch(addPluginInOrder(data));
+      };
+    }
+    loadWorker();
+    return () => {
+      if (workerRef.current) {
+        workerRef.current.terminate();
+      }
+    };
+  }, [dispatch]);
+
+  const onDataDirButtonClick = async () => {
+    if (!workerRef.current) {
+      return alert("Worker not loaded yet");
+    }
+    const dirHandle = await (
+      window as Window & typeof globalThis & { showDirectoryPicker: () => any }
+    ).showDirectoryPicker();
+    dispatch(clearPlugins());
+    const values = dirHandle.values();
+    const plugins = [];
+    while (true) {
+      const next = await values.next();
+      if (next.done) {
+        break;
+      }
+      if (
+        next.value.kind == "file" &&
+        (next.value.name.endsWith(".esp") ||
+          next.value.name.endsWith(".esm") ||
+          next.value.name.endsWith(".esl"))
+      ) {
+        console.log(next.value);
+        plugins.push(next.value);
+      }
+    }
+    dispatch(setPending(plugins.length));
+
+    for (const plugin of plugins) {
+      const file = await plugin.getFile();
+      console.log(file.lastModified);
+      console.log(file.lastModifiedDate);
+      const contents = new Uint8Array(await file.arrayBuffer());
+      try {
+        workerRef.current.postMessage(
+          {
+            skipParsing: excludedPlugins.includes(plugin.name),
+            filename: plugin.name,
+            lastModified: file.lastModified,
+            contents,
+          },
+          [contents.buffer]
+        );
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  return (
+    <>
+      <p className={styles["no-top-margin"]}>
+        To see all of the cell edits and conflicts for your current mod load
+        order select your <code>Data</code> directory below to load the plugins.
+      </p>
+      <button onClick={onDataDirButtonClick}>
+        {plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
+      </button>
+    </>
+  );
+};
+
+export default DataDirPicker;
diff --git a/components/PluginTxtEditor.tsx b/components/PluginTxtEditor.tsx
new file mode 100644
index 0000000..f2fe519
--- /dev/null
+++ b/components/PluginTxtEditor.tsx
@@ -0,0 +1,88 @@
+import { createPortal } from "react-dom";
+import React, { useEffect, useState } from "react";
+
+import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import { setPluginsTxt } from "../slices/pluginsTxt";
+import { applyLoadOrder } from "../slices/plugins";
+import styles from "../styles/PluginTxtEditor.module.css";
+
+export const excludedPlugins = [
+  "Skyrim.esm",
+  "Update.esm",
+  "Dawnguard.esm",
+  "HearthFires.esm",
+  "Dragonborn.esm",
+];
+
+type Props = {};
+
+const PluginsLoader: React.FC<Props> = () => {
+  const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
+  const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
+  const dispatch = useAppDispatch();
+  const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
+
+  useEffect(() => {
+    setPluginsTxtShown(false);
+    console.log("going to apply!");
+    dispatch(applyLoadOrder());
+  }, [dispatch, pluginsTxt]);
+
+  const onPluginsTxtButtonClick = async () => {
+    setEditPluginsTxt(pluginsTxt);
+    setPluginsTxtShown(true);
+  };
+
+  return (
+    <>
+      <p>
+        Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
+        enable the loaded plugins by your current load order.
+      </p>
+      <button onClick={onPluginsTxtButtonClick}>
+        {!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
+      </button>
+      {process.browser &&
+        createPortal(
+          <dialog open={pluginsTxtShown} className={styles.dialog}>
+            <h3>Paste plugins.txt</h3>
+            <p>
+              The plugins.txt file is typically found at{" "}
+              <code>
+                C:\Users\username\AppData\Local\Skyrim Special Edition
+              </code>
+              . You can also drag-and-drop the file anywhere on the window to
+              load the file.
+            </p>
+            <textarea
+              value={editPluginsTxt ?? undefined}
+              onChange={(e) => setEditPluginsTxt(e.target.value)}
+            />
+            <menu>
+              <button
+                onClick={() => {
+                  setEditPluginsTxt(null);
+                  setPluginsTxtShown(false);
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  dispatch(setPluginsTxt(editPluginsTxt ?? ""));
+                  setPluginsTxtShown(false);
+                }}
+              >
+                Save
+              </button>
+            </menu>
+          </dialog>,
+          document.body
+        )}
+      {process.browser &&
+        createPortal(<div className={styles["drop-area"]} />, document.body)}
+    </>
+  );
+};
+
+export default PluginsLoader;
diff --git a/components/PluginsList.tsx b/components/PluginsList.tsx
new file mode 100644
index 0000000..badd910
--- /dev/null
+++ b/components/PluginsList.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+import React from "react";
+
+import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import { togglePlugin } from "../slices/plugins";
+import styles from "../styles/PluginList.module.css";
+import { excludedPlugins } from "./DataDirPicker";
+
+type Props = {};
+
+const PluginsList: React.FC<Props> = () => {
+  const dispatch = useAppDispatch();
+  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const pluginsPending = useAppSelector((state) => state.plugins.pending);
+
+  return (
+    <>
+      <ol className={styles["plugin-list"]}>
+        {plugins.map((plugin) => (
+          <li key={plugin.filename} title={plugin.filename}>
+            <input
+              id={plugin.filename}
+              type="checkbox"
+              disabled={
+                excludedPlugins.includes(plugin.filename) || !!plugin.parseError
+              }
+              checked={plugin.enabled}
+              onChange={() => dispatch(togglePlugin(plugin.filename))}
+            />
+            <label htmlFor={plugin.filename} className={styles["plugin-label"]}>
+              {excludedPlugins.includes(plugin.filename) ? (
+                <span>{plugin.filename}</span>
+              ) : (
+                <Link href={`/?plugin=${plugin.hash}`}>
+                  <a
+                    className={plugin.parseError ? styles["plugin-error"] : ""}
+                  >
+                    {plugin.filename}
+                  </a>
+                </Link>
+              )}
+            </label>
+            {/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
+          </li>
+        ))}
+      </ol>
+      {pluginsPending > 0 && (
+        <span className={styles.loading}>
+          Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default PluginsList;
diff --git a/components/PluginsLoader.tsx b/components/PluginsLoader.tsx
deleted file mode 100644
index 4851883..0000000
--- a/components/PluginsLoader.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import Link from "next/link";
-import { createPortal } from "react-dom";
-import React, { useEffect, useRef, useState } from "react";
-
-import { useAppSelector, useAppDispatch } from "../lib/hooks";
-import { setPluginsTxt } from "../slices/pluginsTxt";
-import {
-  addPluginInOrder,
-  applyLoadOrder,
-  clearPlugins,
-  setPending,
-  decrementPending,
-  togglePlugin,
-  PluginFile,
-} from "../slices/plugins";
-import styles from "../styles/PluginLoader.module.css";
-
-const excludedPlugins = [
-  "Skyrim.esm",
-  "Update.esm",
-  "Dawnguard.esm",
-  "HearthFires.esm",
-  "Dragonborn.esm",
-];
-
-type Props = {};
-
-const PluginsLoader: React.FC<Props> = () => {
-  const workerRef = useRef<Worker>();
-  const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
-  const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
-  const dispatch = useAppDispatch();
-  const plugins = useAppSelector((state) => state.plugins.plugins);
-  const pluginsPending = useAppSelector((state) => state.plugins.pending);
-  const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
-
-  useEffect(() => {
-    setPluginsTxtShown(false);
-    console.log("going to apply!");
-    dispatch(applyLoadOrder());
-  }, [dispatch, pluginsTxt]);
-
-  useEffect(() => {
-    async function loadWorker() {
-      const { default: Worker } = await import(
-        "worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
-      );
-      console.log(Worker);
-      workerRef.current = new Worker();
-      workerRef.current.onmessage = (evt: { data: PluginFile }) => {
-        const { data } = evt;
-        console.log(`WebWorker Response =>`);
-        dispatch(decrementPending(1));
-        console.log(data.parsed);
-        dispatch(addPluginInOrder(data));
-      };
-    }
-    loadWorker();
-    return () => {
-      if (workerRef.current) {
-        workerRef.current.terminate();
-      }
-    };
-  }, [dispatch]);
-
-  const onDataDirButtonClick = async () => {
-    if (!workerRef.current) {
-      return alert("Worker not loaded yet");
-    }
-    const dirHandle = await (
-      window as Window & typeof globalThis & { showDirectoryPicker: () => any }
-    ).showDirectoryPicker();
-    dispatch(clearPlugins());
-    const values = dirHandle.values();
-    const plugins = [];
-    while (true) {
-      const next = await values.next();
-      if (next.done) {
-        break;
-      }
-      if (
-        next.value.kind == "file" &&
-        (next.value.name.endsWith(".esp") ||
-          next.value.name.endsWith(".esm") ||
-          next.value.name.endsWith(".esl"))
-      ) {
-        console.log(next.value);
-        plugins.push(next.value);
-      }
-    }
-    dispatch(setPending(plugins.length));
-
-    for (const plugin of plugins) {
-      const file = await plugin.getFile();
-      console.log(file.lastModified);
-      console.log(file.lastModifiedDate);
-      const contents = new Uint8Array(await file.arrayBuffer());
-      try {
-        workerRef.current.postMessage(
-          {
-            skipParsing: excludedPlugins.includes(plugin.name),
-            filename: plugin.name,
-            lastModified: file.lastModified,
-            contents,
-          },
-          [contents.buffer]
-        );
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  };
-
-  const onPluginsTxtButtonClick = async () => {
-    setEditPluginsTxt(pluginsTxt);
-    setPluginsTxtShown(true);
-  };
-
-  return (
-    <>
-      <p className={styles["no-top-margin"]}>
-        To see all of the cell edits and conflicts for your current mod load
-        order select your <code>Data</code> directory below to load the plugins.
-      </p>
-      <button onClick={onDataDirButtonClick}>
-        {plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
-      </button>
-      <p>
-        Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
-        enable the loaded plugins by your current load order.
-      </p>
-      <button
-        onClick={onPluginsTxtButtonClick}
-        className={styles["plugins-txt-button"]}
-      >
-        {!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
-      </button>
-      <ol className={styles["plugin-list"]}>
-        {plugins.map((plugin) => (
-          <li key={plugin.filename} title={plugin.filename}>
-            <input
-              id={plugin.filename}
-              type="checkbox"
-              disabled={
-                excludedPlugins.includes(plugin.filename) || !!plugin.parseError
-              }
-              checked={plugin.enabled}
-              onChange={() => dispatch(togglePlugin(plugin.filename))}
-            />
-            <label htmlFor={plugin.filename} className={styles["plugin-label"]}>
-              {excludedPlugins.includes(plugin.filename) ? (
-                <span>{plugin.filename}</span>
-              ) : (
-                <Link href={`/?plugin=${plugin.hash}`}>
-                  <a
-                    className={plugin.parseError ? styles["plugin-error"] : ""}
-                  >
-                    {plugin.filename}
-                  </a>
-                </Link>
-              )}
-            </label>
-            {/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
-          </li>
-        ))}
-      </ol>
-      {pluginsPending > 0 && (
-        <span className={styles.processing}>
-          Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
-        </span>
-      )}
-      {process.browser &&
-        createPortal(
-          <dialog
-            open={pluginsTxtShown}
-            className={styles["plugins-txt-dialog"]}
-          >
-            <h3>Paste plugins.txt</h3>
-            <p>
-              The plugins.txt file is typically found at{" "}
-              <code>
-                C:\Users\username\AppData\Local\Skyrim Special Edition
-              </code>
-              . You can also drag-and-drop the file anywhere on the window to
-              load the file.
-            </p>
-            <textarea
-              value={editPluginsTxt ?? undefined}
-              onChange={(e) => setEditPluginsTxt(e.target.value)}
-            />
-            <menu>
-              <button
-                onClick={() => {
-                  setEditPluginsTxt(null);
-                  setPluginsTxtShown(false);
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  dispatch(setPluginsTxt(editPluginsTxt ?? ""));
-                  setPluginsTxtShown(false);
-                }}
-              >
-                Save
-              </button>
-            </menu>
-          </dialog>,
-          document.body
-        )}
-      {process.browser &&
-        createPortal(<div className={styles["drop-area"]} />, document.body)}
-    </>
-  );
-};
-
-export default PluginsLoader;
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index c0ac091..b18a1af 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -5,7 +5,9 @@ import { formatRelative } from "date-fns";
 import CellData from "./CellData";
 import ModData from "./ModData";
 import PluginData from "./PluginData";
-import PluginsLoader from "./PluginsLoader";
+import DataDirPicker from "./DataDirPicker";
+import PluginTxtEditor from "./PluginTxtEditor";
+import PluginsList from "./PluginsList";
 import styles from "../styles/Sidebar.module.css";
 
 type Props = {
@@ -126,7 +128,9 @@ const Sidebar: React.FC<Props> = ({
             <p className={styles.subheader}>
               An interactive map of Skyrim mods.
             </p>
-            <PluginsLoader />
+            <DataDirPicker />
+            <PluginTxtEditor />
+            <PluginsList />
             {lastModified && (
               <div className={styles["sidebar-modified-date"]}>
                 <strong>Last updated:</strong>{" "}
diff --git a/styles/DataDirPicker.module.css b/styles/DataDirPicker.module.css
new file mode 100644
index 0000000..b207fe7
--- /dev/null
+++ b/styles/DataDirPicker.module.css
@@ -0,0 +1,3 @@
+.no-top-margin {
+  margin-top: 0;
+}
diff --git a/styles/PluginLoader.module.css b/styles/PluginList.module.css
similarity index 56%
rename from styles/PluginLoader.module.css
rename to styles/PluginList.module.css
index 759609c..71bf8ff 100644
--- a/styles/PluginLoader.module.css
+++ b/styles/PluginList.module.css
@@ -1,7 +1,3 @@
-.no-top-margin {
-  margin-top: 0;
-}
-
 .plugin-list {
   list-style-type: none;
   padding: 0;
@@ -22,7 +18,7 @@
 }
 
 /* From: https://stackoverflow.com/a/28074607/6620612 */
-.processing:after {
+.loading:after {
   overflow: hidden;
   display: inline-block;
   vertical-align: bottom;
@@ -43,35 +39,3 @@
     width: 1.25em;
   }
 }
-
-.plugins-txt-dialog {
-  top: 12px;
-  z-index: 4;
-  background-color: #fbefd5;
-  box-shadow: 0 0 1em black;
-  max-width: 400px;
-}
-
-.plugins-txt-dialog h3 {
-  margin-top: 0px;
-}
-
-.plugins-txt-dialog textarea {
-  width: 100%;
-  min-height: 100px;
-  resize: vertical;
-}
-
-.plugins-txt-dialog menu {
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-}
-
-.drop-area {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
diff --git a/styles/PluginTxtEditor.module.css b/styles/PluginTxtEditor.module.css
new file mode 100644
index 0000000..ad82480
--- /dev/null
+++ b/styles/PluginTxtEditor.module.css
@@ -0,0 +1,31 @@
+.dialog {
+  top: 12px;
+  z-index: 4;
+  background-color: #fbefd5;
+  box-shadow: 0 0 1em black;
+  max-width: 400px;
+}
+
+.dialog h3 {
+  margin-top: 0px;
+}
+
+.dialog textarea {
+  width: 100%;
+  min-height: 100px;
+  resize: vertical;
+}
+
+.dialog menu {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.drop-area {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}