diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index ea754d2..ae2855a 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -1,8 +1,8 @@
-import Layout from "./components/Layout"
+import Layout from "./components/interactive/Layout"
 import { BrowserRouter } from "react-router-dom"
-import GlobalTheme from "./components/GlobalTheme"
-import GlobalServer from "./components/GlobalServer"
-import GlobalUser from "./components/GlobalUser"
+import GlobalTheme from "./components/providers/GlobalTheme"
+import GlobalServer from "./components/providers/GlobalServer"
+import GlobalUser from "./components/providers/GlobalUser"
 import PageSwitcher from "./PageSwitcher"
 
 
diff --git a/code/frontend/src/components/BoxConditions.js b/code/frontend/src/components/BoxConditions.js
deleted file mode 100644
index b09a5fd..0000000
--- a/code/frontend/src/components/BoxConditions.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
-import ConditionBadge from "./ConditionBadge"
-
-
-export default function BoxConditions({ ...props }) {
-    const {conditions} = useContext(ContextRepositoryEditor)
-
-    const badges = conditions.map((cond, pos) => <ConditionBadge key={pos} {...cond}/>)
-
-    return (
-        <BoxFull header={"Conditions"} {...props}>
-            {badges}
-        </BoxFull>
-    )
-}
diff --git a/code/frontend/src/components/ButtonIconOnly.js b/code/frontend/src/components/ButtonIconOnly.js
deleted file mode 100644
index 564d4d5..0000000
--- a/code/frontend/src/components/ButtonIconOnly.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react"
-import Style from "./ButtonIconOnly.module.css"
-import classNames from "classnames"
-import Button from "./Button"
-
-
-export default function ButtonIconOnly({ children, className, ...props }) {
-    return (
-        <Button className={classNames(Style.ButtonIconOnly, className)} {...props}/>
-    )
-}
diff --git a/code/frontend/src/components/FormInline.js b/code/frontend/src/components/FormInline.js
deleted file mode 100644
index 34727dd..0000000
--- a/code/frontend/src/components/FormInline.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react"
-import Style from "./FormInline.module.css"
-import classNames from "classnames"
-
-
-export default function FormInline({ children, className, ...props }) {
-    return (
-        <div className={classNames(Style.FormInline, className)} {...props}>
-            {children}
-        </div>
-    )
-}
diff --git a/code/frontend/src/components/BoxAlert.js b/code/frontend/src/components/base/BoxAlert.js
similarity index 100%
rename from code/frontend/src/components/BoxAlert.js
rename to code/frontend/src/components/base/BoxAlert.js
diff --git a/code/frontend/src/components/BoxAlert.module.css b/code/frontend/src/components/base/BoxAlert.module.css
similarity index 100%
rename from code/frontend/src/components/BoxAlert.module.css
rename to code/frontend/src/components/base/BoxAlert.module.css
diff --git a/code/frontend/src/components/BoxFull.js b/code/frontend/src/components/base/BoxFull.js
similarity index 100%
rename from code/frontend/src/components/BoxFull.js
rename to code/frontend/src/components/base/BoxFull.js
diff --git a/code/frontend/src/components/BoxFull.module.css b/code/frontend/src/components/base/BoxFull.module.css
similarity index 100%
rename from code/frontend/src/components/BoxFull.module.css
rename to code/frontend/src/components/base/BoxFull.module.css
diff --git a/code/frontend/src/components/BoxFullScrollable.js b/code/frontend/src/components/base/BoxFullScrollable.js
similarity index 100%
rename from code/frontend/src/components/BoxFullScrollable.js
rename to code/frontend/src/components/base/BoxFullScrollable.js
diff --git a/code/frontend/src/components/BoxFullScrollable.module.css b/code/frontend/src/components/base/BoxFullScrollable.module.css
similarity index 100%
rename from code/frontend/src/components/BoxFullScrollable.module.css
rename to code/frontend/src/components/base/BoxFullScrollable.module.css
diff --git a/code/frontend/src/components/BoxHeader.js b/code/frontend/src/components/base/BoxHeader.js
similarity index 100%
rename from code/frontend/src/components/BoxHeader.js
rename to code/frontend/src/components/base/BoxHeader.js
diff --git a/code/frontend/src/components/BoxHeader.module.css b/code/frontend/src/components/base/BoxHeader.module.css
similarity index 100%
rename from code/frontend/src/components/BoxHeader.module.css
rename to code/frontend/src/components/base/BoxHeader.module.css
diff --git a/code/frontend/src/components/Button.js b/code/frontend/src/components/base/Button.js
similarity index 94%
rename from code/frontend/src/components/Button.js
rename to code/frontend/src/components/base/Button.js
index a71c3ce..1e4079e 100644
--- a/code/frontend/src/components/Button.js
+++ b/code/frontend/src/components/base/Button.js
@@ -1,7 +1,7 @@
 import React  from "react"
 import Style from "./Button.module.css"
 import classNames from "classnames"
-import make_icon from "../utils/make_icon"
+import make_icon from "../../utils/make_icon"
 
 
 /**
diff --git a/code/frontend/src/components/Button.module.css b/code/frontend/src/components/base/Button.module.css
similarity index 100%
rename from code/frontend/src/components/Button.module.css
rename to code/frontend/src/components/base/Button.module.css
diff --git a/code/frontend/src/components/base/ButtonIconOnly.js b/code/frontend/src/components/base/ButtonIconOnly.js
new file mode 100644
index 0000000..3eecdff
--- /dev/null
+++ b/code/frontend/src/components/base/ButtonIconOnly.js
@@ -0,0 +1,19 @@
+import React from "react"
+import Style from "./ButtonIconOnly.module.css"
+import classNames from "classnames"
+import Button from "./Button"
+
+
+/**
+ * A {@link Button} with only an icon.
+ *
+ * @param className - Additional class(es) to add to the button.
+ * @param props - Additional props to pass to the button.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function ButtonIconOnly({ className, ...props }) {
+    return (
+        <Button className={classNames(Style.ButtonIconOnly, className)} {...props}/>
+    )
+}
diff --git a/code/frontend/src/components/ButtonIconOnly.module.css b/code/frontend/src/components/base/ButtonIconOnly.module.css
similarity index 100%
rename from code/frontend/src/components/ButtonIconOnly.module.css
rename to code/frontend/src/components/base/ButtonIconOnly.module.css
diff --git a/code/frontend/src/components/ButtonSidebar.js b/code/frontend/src/components/base/ButtonSidebar.js
similarity index 96%
rename from code/frontend/src/components/ButtonSidebar.js
rename to code/frontend/src/components/base/ButtonSidebar.js
index cea61d2..1f65a37 100644
--- a/code/frontend/src/components/ButtonSidebar.js
+++ b/code/frontend/src/components/base/ButtonSidebar.js
@@ -1,7 +1,7 @@
 import React from "react"
 import Style from "./ButtonSidebar.module.css"
 import classNames from "classnames"
-import make_icon from "../utils/make_icon"
+import make_icon from "../../utils/make_icon"
 import { Link } from "react-router-dom"
 import { useRouteMatch } from "react-router"
 
diff --git a/code/frontend/src/components/ButtonSidebar.module.css b/code/frontend/src/components/base/ButtonSidebar.module.css
similarity index 100%
rename from code/frontend/src/components/ButtonSidebar.module.css
rename to code/frontend/src/components/base/ButtonSidebar.module.css
diff --git a/code/frontend/src/components/ButtonSmallX.js b/code/frontend/src/components/base/ButtonSmallX.js
similarity index 58%
rename from code/frontend/src/components/ButtonSmallX.js
rename to code/frontend/src/components/base/ButtonSmallX.js
index 7d0cff3..ab55e25 100644
--- a/code/frontend/src/components/ButtonSmallX.js
+++ b/code/frontend/src/components/base/ButtonSmallX.js
@@ -5,7 +5,15 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import { faTimes } from "@fortawesome/free-solid-svg-icons"
 
 
-export default function ButtonSmallX({ children, className, ...props }) {
+/**
+ * A button with a small X, used to delete Conditions.
+ *
+ * @param className - Additional class(es) to pass to the button.
+ * @param props - Additional props to pass to the button.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function ButtonSmallX({ className, ...props }) {
     return (
         <button type={"button"} className={classNames(Style.ButtonSmallX, className)} {...props}>
             <FontAwesomeIcon icon={faTimes}/>
diff --git a/code/frontend/src/components/ButtonSmallX.module.css b/code/frontend/src/components/base/ButtonSmallX.module.css
similarity index 100%
rename from code/frontend/src/components/ButtonSmallX.module.css
rename to code/frontend/src/components/base/ButtonSmallX.module.css
diff --git a/code/frontend/src/components/Checkbox.js b/code/frontend/src/components/base/Checkbox.js
similarity index 100%
rename from code/frontend/src/components/Checkbox.js
rename to code/frontend/src/components/base/Checkbox.js
diff --git a/code/frontend/src/components/Checkbox.module.css b/code/frontend/src/components/base/Checkbox.module.css
similarity index 100%
rename from code/frontend/src/components/Checkbox.module.css
rename to code/frontend/src/components/base/Checkbox.module.css
diff --git a/code/frontend/src/components/base/FormInline.js b/code/frontend/src/components/base/FormInline.js
new file mode 100644
index 0000000..4eb7af3
--- /dev/null
+++ b/code/frontend/src/components/base/FormInline.js
@@ -0,0 +1,21 @@
+import React from "react"
+import Style from "./FormInline.module.css"
+import classNames from "classnames"
+
+
+/**
+ * A form displayed in a single line.
+ *
+ * @param children - The contents of the form.
+ * @param className - Additional class(es) to pass to the form.
+ * @param props - Additional props to pass to the form.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function FormInline({ children, className, ...props }) {
+    return (
+        <form className={classNames(Style.FormInline, className)} {...props}>
+            {children}
+        </form>
+    )
+}
diff --git a/code/frontend/src/components/FormInline.module.css b/code/frontend/src/components/base/FormInline.module.css
similarity index 100%
rename from code/frontend/src/components/FormInline.module.css
rename to code/frontend/src/components/base/FormInline.module.css
diff --git a/code/frontend/src/components/FormLabelled.js b/code/frontend/src/components/base/FormLabelled.js
similarity index 83%
rename from code/frontend/src/components/FormLabelled.js
rename to code/frontend/src/components/base/FormLabelled.js
index 6d179d9..bc6e2c6 100644
--- a/code/frontend/src/components/FormLabelled.js
+++ b/code/frontend/src/components/base/FormLabelled.js
@@ -6,8 +6,6 @@ import classNames from "classnames"
 /**
  * A form with two columns: the leftmost one contains labels, while the rightmost one contains input elements.
  *
- * The {@link FormLabel} element can be used to quickly generate labelled input elements.
- *
  * @returns {JSX.Element}
  * @constructor
  */
diff --git a/code/frontend/src/components/FormLabelled.module.css b/code/frontend/src/components/base/FormLabelled.module.css
similarity index 100%
rename from code/frontend/src/components/FormLabelled.module.css
rename to code/frontend/src/components/base/FormLabelled.module.css
diff --git a/code/frontend/src/components/Input.js b/code/frontend/src/components/base/Input.js
similarity index 100%
rename from code/frontend/src/components/Input.js
rename to code/frontend/src/components/base/Input.js
diff --git a/code/frontend/src/components/Input.module.css b/code/frontend/src/components/base/Input.module.css
similarity index 100%
rename from code/frontend/src/components/Input.module.css
rename to code/frontend/src/components/base/Input.module.css
diff --git a/code/frontend/src/components/InputWithIcon.js b/code/frontend/src/components/base/InputWithIcon.js
similarity index 97%
rename from code/frontend/src/components/InputWithIcon.js
rename to code/frontend/src/components/base/InputWithIcon.js
index b66638c..da72870 100644
--- a/code/frontend/src/components/InputWithIcon.js
+++ b/code/frontend/src/components/base/InputWithIcon.js
@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import Style from "./InputWithIcon.module.css"
 import classNames from "classnames"
-import make_icon from "../utils/make_icon"
+import make_icon from "../../utils/make_icon"
 
 
 /**
diff --git a/code/frontend/src/components/InputWithIcon.module.css b/code/frontend/src/components/base/InputWithIcon.module.css
similarity index 100%
rename from code/frontend/src/components/InputWithIcon.module.css
rename to code/frontend/src/components/base/InputWithIcon.module.css
diff --git a/code/frontend/src/components/Loading.js b/code/frontend/src/components/base/Loading.js
similarity index 61%
rename from code/frontend/src/components/Loading.js
rename to code/frontend/src/components/base/Loading.js
index b076e4d..02ad294 100644
--- a/code/frontend/src/components/Loading.js
+++ b/code/frontend/src/components/base/Loading.js
@@ -3,9 +3,15 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 
 
-export default function Loading({ ...props }) {
+/**
+ * A div with a spinning dots icon and a "Loading..." text.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Loading() {
     return (
-        <div {...props}>
+        <div>
             <FontAwesomeIcon icon={faSpinner} pulse={true}/> Loading...
         </div>
     )
diff --git a/code/frontend/src/components/Radio.js b/code/frontend/src/components/base/Radio.js
similarity index 100%
rename from code/frontend/src/components/Radio.js
rename to code/frontend/src/components/base/Radio.js
diff --git a/code/frontend/src/components/Radio.module.css b/code/frontend/src/components/base/Radio.module.css
similarity index 100%
rename from code/frontend/src/components/Radio.module.css
rename to code/frontend/src/components/base/Radio.module.css
diff --git a/code/frontend/src/components/Select.js b/code/frontend/src/components/base/Select.js
similarity index 100%
rename from code/frontend/src/components/Select.js
rename to code/frontend/src/components/base/Select.js
diff --git a/code/frontend/src/components/Select.module.css b/code/frontend/src/components/base/Select.module.css
similarity index 100%
rename from code/frontend/src/components/Select.module.css
rename to code/frontend/src/components/base/Select.module.css
diff --git a/code/frontend/src/components/Slider.js b/code/frontend/src/components/base/Slider.js
similarity index 100%
rename from code/frontend/src/components/Slider.js
rename to code/frontend/src/components/base/Slider.js
diff --git a/code/frontend/src/components/Slider.module.css b/code/frontend/src/components/base/Slider.module.css
similarity index 100%
rename from code/frontend/src/components/Slider.module.css
rename to code/frontend/src/components/base/Slider.module.css
diff --git a/code/frontend/src/components/TextArea.js b/code/frontend/src/components/base/TextArea.js
similarity index 100%
rename from code/frontend/src/components/TextArea.js
rename to code/frontend/src/components/base/TextArea.js
diff --git a/code/frontend/src/components/TextArea.module.css b/code/frontend/src/components/base/TextArea.module.css
similarity index 100%
rename from code/frontend/src/components/TextArea.module.css
rename to code/frontend/src/components/base/TextArea.module.css
diff --git a/code/frontend/src/components/FormAlert.js b/code/frontend/src/components/base/formparts/FormAlert.js
similarity index 94%
rename from code/frontend/src/components/FormAlert.js
rename to code/frontend/src/components/base/formparts/FormAlert.js
index 6449a0e..f30a707 100644
--- a/code/frontend/src/components/FormAlert.js
+++ b/code/frontend/src/components/base/formparts/FormAlert.js
@@ -1,7 +1,7 @@
 import React from "react"
 import Style from "./FormAlert.module.css"
 import classNames from "classnames"
-import BoxAlert from "./BoxAlert"
+import BoxAlert from "../BoxAlert"
 
 
 /**
diff --git a/code/frontend/src/components/FormAlert.module.css b/code/frontend/src/components/base/formparts/FormAlert.module.css
similarity index 100%
rename from code/frontend/src/components/FormAlert.module.css
rename to code/frontend/src/components/base/formparts/FormAlert.module.css
diff --git a/code/frontend/src/components/FormButton.js b/code/frontend/src/components/base/formparts/FormButton.js
similarity index 93%
rename from code/frontend/src/components/FormButton.js
rename to code/frontend/src/components/base/formparts/FormButton.js
index 0baeb61..7c93aa4 100644
--- a/code/frontend/src/components/FormButton.js
+++ b/code/frontend/src/components/base/formparts/FormButton.js
@@ -1,7 +1,7 @@
 import React from "react"
 import Style from "./FormButton.module.css"
 import classNames from "classnames"
-import Button from "./Button"
+import Button from "../Button"
 
 
 /**
diff --git a/code/frontend/src/components/FormButton.module.css b/code/frontend/src/components/base/formparts/FormButton.module.css
similarity index 100%
rename from code/frontend/src/components/FormButton.module.css
rename to code/frontend/src/components/base/formparts/FormButton.module.css
diff --git a/code/frontend/src/components/FormLabel.js b/code/frontend/src/components/base/formparts/FormLabel.js
similarity index 100%
rename from code/frontend/src/components/FormLabel.js
rename to code/frontend/src/components/base/formparts/FormLabel.js
diff --git a/code/frontend/src/components/FormLabel.module.css b/code/frontend/src/components/base/formparts/FormLabel.module.css
similarity index 100%
rename from code/frontend/src/components/FormLabel.module.css
rename to code/frontend/src/components/base/formparts/FormLabel.module.css
diff --git a/code/frontend/src/components/BoxConditionHashtag.js b/code/frontend/src/components/interactive/BoxConditionHashtag.js
similarity index 82%
rename from code/frontend/src/components/BoxConditionHashtag.js
rename to code/frontend/src/components/interactive/BoxConditionHashtag.js
index 7b00a13..a234e24 100644
--- a/code/frontend/src/components/BoxConditionHashtag.js
+++ b/code/frontend/src/components/interactive/BoxConditionHashtag.js
@@ -1,21 +1,29 @@
-import React, { useContext, useState } from "react"
-import BoxFull from "./BoxFull"
+import React, { useState } from "react"
+import BoxFull from "../base/BoxFull"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import { faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons"
-import InputWithIcon from "./InputWithIcon"
-import FormInline from "./FormInline"
+import InputWithIcon from "../base/InputWithIcon"
+import FormInline from "../base/FormInline"
 import Style from "./BoxConditionHashtag.module.css"
-import ButtonIconOnly from "./ButtonIconOnly"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 
 // Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
 // noinspection RegExpAnonymousGroup,LongLine
 const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0100-\u024f\u0253-\u0254\u0256-\u0257\u0300-\u036f\u1e00-\u1eff\u0400-\u04ff\u0500-\u0527\u2de0-\u2dff\ua640-\ua69f\u0591-\u05bf\u05c1-\u05c2\u05c4-\u05c5\u05d0-\u05ea\u05f0-\u05f4\ufb12-\ufb28\ufb2a-\ufb36\ufb38-\ufb3c\ufb40-\ufb41\ufb43-\ufb44\ufb46-\ufb4f\u0610-\u061a\u0620-\u065f\u066e-\u06d3\u06d5-\u06dc\u06de-\u06e8\u06ea-\u06ef\u06fa-\u06fc\u0750-\u077f\u08a2-\u08ac\u08e4-\u08fe\ufb50-\ufbb1\ufbd3-\ufd3d\ufd50-\ufd8f\ufd92-\ufdc7\ufdf0-\ufdfb\ufe70-\ufe74\ufe76-\ufefc\u200c\u0e01-\u0e3a\u0e40-\u0e4e\u1100-\u11ff\u3130-\u3185\ua960-\ua97f\uac00-\ud7af\ud7b0-\ud7ff\uffa1-\uffdc\u30a1-\u30fa\u30fc-\u30fe\uff66-\uff9f\uff10-\uff19\uff21-\uff3a\uff41-\uff5a\u3041-\u3096\u3099-\u309e\u3400-\u4dbf\u4e00-\u9fff\u20000-\u2a6df\u2a700-\u2b73\u2b740-\u2b81\u2f800-\u2fa1])/g
 
 
+/**
+ * A {@link BoxFull} that allows the user to select a Twitter hashtag to search for, and then to add it as a Condition
+ * to the {@link ContextRepositoryEditor}.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export default function BoxConditionHashtag({ ...props }) {
     const [hashtag, setHashtag] = useState("")
-    const {conditions, appendCondition} = useContext(ContextRepositoryEditor)
+    const {conditions, appendCondition} = useRepositoryEditor()
 
     const onInputChange = event => {
         let text = event.target.value
diff --git a/code/frontend/src/components/BoxConditionHashtag.module.css b/code/frontend/src/components/interactive/BoxConditionHashtag.module.css
similarity index 100%
rename from code/frontend/src/components/BoxConditionHashtag.module.css
rename to code/frontend/src/components/interactive/BoxConditionHashtag.module.css
diff --git a/code/frontend/src/components/BoxConditionUser.js b/code/frontend/src/components/interactive/BoxConditionUser.js
similarity index 72%
rename from code/frontend/src/components/BoxConditionUser.js
rename to code/frontend/src/components/interactive/BoxConditionUser.js
index 748f8d1..cc38959 100644
--- a/code/frontend/src/components/BoxConditionUser.js
+++ b/code/frontend/src/components/interactive/BoxConditionUser.js
@@ -1,20 +1,28 @@
-import React, { useContext, useState } from "react"
-import BoxFull from "./BoxFull"
+import React, { useState } from "react"
+import BoxFull from "../base/BoxFull"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import { faAt, faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons"
-import InputWithIcon from "./InputWithIcon"
-import FormInline from "./FormInline"
+import { faAt, faPlus } from "@fortawesome/free-solid-svg-icons"
+import InputWithIcon from "../base/InputWithIcon"
+import FormInline from "../base/FormInline"
 import Style from "./BoxConditionHashtag.module.css"
-import ButtonIconOnly from "./ButtonIconOnly"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 
 
 const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
 
 
+/**
+ * A {@link BoxFull} that allows the user to select a Twitter user to search for, and then to add it as a Condition
+ * to the {@link ContextRepositoryEditor}.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export default function BoxConditionUser({ ...props }) {
     const [user, setUser] = useState("")
-    const {conditions, appendCondition} = useContext(ContextRepositoryEditor)
+    const {conditions, appendCondition} = useRepositoryEditor()
 
     const onInputChange = event => {
         let text = event.target.value
diff --git a/code/frontend/src/components/interactive/BoxConditions.js b/code/frontend/src/components/interactive/BoxConditions.js
new file mode 100644
index 0000000..fd542c9
--- /dev/null
+++ b/code/frontend/src/components/interactive/BoxConditions.js
@@ -0,0 +1,24 @@
+import React from "react"
+import BoxFull from "../base/BoxFull"
+import ConditionBadge from "./ConditionBadge"
+import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+
+
+/**
+ * A box which renders all conditions of the {@link RepositoryEditor} as {@link ConditionBadge}s.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function BoxConditions({ ...props }) {
+    const {conditions} = useRepositoryEditor()
+
+    const badges = conditions.map((cond, pos) => <ConditionBadge key={pos} {...cond}/>)
+
+    return (
+        <BoxFull header={"Conditions"} {...props}>
+            {badges}
+        </BoxFull>
+    )
+}
diff --git a/code/frontend/src/components/BoxLoggedIn.js b/code/frontend/src/components/interactive/BoxLoggedIn.js
similarity index 85%
rename from code/frontend/src/components/BoxLoggedIn.js
rename to code/frontend/src/components/interactive/BoxLoggedIn.js
index 533ead6..01340fd 100644
--- a/code/frontend/src/components/BoxLoggedIn.js
+++ b/code/frontend/src/components/interactive/BoxLoggedIn.js
@@ -1,9 +1,9 @@
 import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
+import BoxFull from "../base/BoxFull"
 import LoggedInUser from "./LoggedInUser"
-import Button from "./Button"
+import Button from "../base/Button"
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
 import { useHistory } from "react-router"
 import Style from "./BoxLoggedIn.module.css"
 import CurrentServer from "./CurrentServer"
@@ -27,7 +27,7 @@ export default function BoxLoggedIn({ ...props }) {
                     You are currently logged in at <CurrentServer/> as <LoggedInUser/>.
                 </div>
                 <div>
-                    <Button color={"Red"} onClick={e => {
+                    <Button color={"Red"} onClick={() => {
                         logout()
                         history.push("/login")
                     }} icon={faSignOutAlt}>Logout</Button>
diff --git a/code/frontend/src/components/BoxLoggedIn.module.css b/code/frontend/src/components/interactive/BoxLoggedIn.module.css
similarity index 100%
rename from code/frontend/src/components/BoxLoggedIn.module.css
rename to code/frontend/src/components/interactive/BoxLoggedIn.module.css
diff --git a/code/frontend/src/components/BoxLogin.js b/code/frontend/src/components/interactive/BoxLogin.js
similarity index 86%
rename from code/frontend/src/components/BoxLogin.js
rename to code/frontend/src/components/interactive/BoxLogin.js
index 2e09320..18e6286 100644
--- a/code/frontend/src/components/BoxLogin.js
+++ b/code/frontend/src/components/interactive/BoxLogin.js
@@ -1,13 +1,13 @@
 import React, { useContext, useState } from "react"
-import FormLabelled from "./FormLabelled"
-import FormLabel from "./FormLabel"
-import InputWithIcon from "./InputWithIcon"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
 import { faArrowRight, faEnvelope, faKey } from "@fortawesome/free-solid-svg-icons"
-import BoxFull from "./BoxFull"
-import FormButton from "./FormButton"
-import ContextUser from "../contexts/ContextUser"
+import BoxFull from "../base/BoxFull"
+import FormButton from "../base/formparts/FormButton"
+import ContextUser from "../../contexts/ContextUser"
 import { useHistory } from "react-router"
-import FormAlert from "./FormAlert"
+import FormAlert from "../base/formparts/FormAlert"
 
 
 /**
@@ -25,7 +25,7 @@ export default function BoxLogin({ ...props }) {
     const {login} = useContext(ContextUser)
     const history = useHistory()
 
-    const doLogin = async (event) => {
+    const doLogin = async () => {
         if(working) {
             return;
         }
diff --git a/code/frontend/src/components/BoxRepositoriesActive.js b/code/frontend/src/components/interactive/BoxRepositoriesActive.js
similarity index 71%
rename from code/frontend/src/components/BoxRepositoriesActive.js
rename to code/frontend/src/components/interactive/BoxRepositoriesActive.js
index 6db8da9..42ace13 100644
--- a/code/frontend/src/components/BoxRepositoriesActive.js
+++ b/code/frontend/src/components/interactive/BoxRepositoriesActive.js
@@ -1,12 +1,19 @@
 import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import ContextUser from "../contexts/ContextUser"
-import useData from "../hooks/useData"
+import BoxFull from "../base/BoxFull"
+import ContextUser from "../../contexts/ContextUser"
+import useData from "../../hooks/useData"
 import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "./Loading"
-import BoxAlert from "./BoxAlert"
+import Loading from "../base/Loading"
+import BoxAlert from "../base/BoxAlert"
 
 
+/**
+ * A {@link BoxFull} listing all the user's active repositories.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export default function BoxRepositoriesActive({ ...props }) {
     const {fetchDataAuth} = useContext(ContextUser)
     const {data, started, loading, error} = useData(fetchDataAuth, "GET", "/api/repository/list", {
diff --git a/code/frontend/src/components/BoxRepositoriesArchived.js b/code/frontend/src/components/interactive/BoxRepositoriesArchived.js
similarity index 71%
rename from code/frontend/src/components/BoxRepositoriesArchived.js
rename to code/frontend/src/components/interactive/BoxRepositoriesArchived.js
index f947061..2b2d4a5 100644
--- a/code/frontend/src/components/BoxRepositoriesArchived.js
+++ b/code/frontend/src/components/interactive/BoxRepositoriesArchived.js
@@ -1,12 +1,19 @@
 import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import ContextUser from "../contexts/ContextUser"
-import useData from "../hooks/useData"
+import BoxFull from "../base/BoxFull"
+import ContextUser from "../../contexts/ContextUser"
+import useData from "../../hooks/useData"
 import RepositorySummaryBase from "./RepositorySummaryBase"
-import Loading from "./Loading"
-import BoxAlert from "./BoxAlert"
+import Loading from "../base/Loading"
+import BoxAlert from "../base/BoxAlert"
 
 
+/**
+ * A {@link BoxFull} listing all the user's archived repositories.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export default function BoxRepositoriesArchived({ ...props }) {
     const {fetchDataAuth} = useContext(ContextUser)
     const {data, started, loading, error} = useData(fetchDataAuth, "GET", "/api/repository/list", {
diff --git a/code/frontend/src/components/BoxSetServer.js b/code/frontend/src/components/interactive/BoxSetServer.js
similarity index 79%
rename from code/frontend/src/components/BoxSetServer.js
rename to code/frontend/src/components/interactive/BoxSetServer.js
index 43a855c..ada5c92 100644
--- a/code/frontend/src/components/BoxSetServer.js
+++ b/code/frontend/src/components/interactive/BoxSetServer.js
@@ -1,10 +1,10 @@
 import React, { useContext } from "react"
-import BoxFull from "./BoxFull"
-import FormLabelled from "./FormLabelled"
-import FormLabel from "./FormLabel"
-import InputWithIcon from "./InputWithIcon"
+import BoxFull from "../base/BoxFull"
+import FormLabelled from "../base/FormLabelled"
+import FormLabel from "../base/formparts/FormLabel"
+import InputWithIcon from "../base/InputWithIcon"
 import { faGlobe } from "@fortawesome/free-solid-svg-icons"
-import ContextServer from "../contexts/ContextServer"
+import ContextServer from "../../contexts/ContextServer"
 
 
 /**
diff --git a/code/frontend/src/components/ConditionBadge.js b/code/frontend/src/components/interactive/ConditionBadge.js
similarity index 92%
rename from code/frontend/src/components/ConditionBadge.js
rename to code/frontend/src/components/interactive/ConditionBadge.js
index 668eeb2..0e8f410 100644
--- a/code/frontend/src/components/ConditionBadge.js
+++ b/code/frontend/src/components/interactive/ConditionBadge.js
@@ -2,9 +2,9 @@ import React, { useContext } from "react"
 import Style from "./ConditionBadge.module.css"
 import classNames from "classnames"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import ButtonSmallX from "./ButtonSmallX"
+import ButtonSmallX from "../base/ButtonSmallX"
 import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
 
 
 const CONDITION_COLORS = {
diff --git a/code/frontend/src/components/ConditionBadge.module.css b/code/frontend/src/components/interactive/ConditionBadge.module.css
similarity index 100%
rename from code/frontend/src/components/ConditionBadge.module.css
rename to code/frontend/src/components/interactive/ConditionBadge.module.css
diff --git a/code/frontend/src/components/CurrentServer.js b/code/frontend/src/components/interactive/CurrentServer.js
similarity index 90%
rename from code/frontend/src/components/CurrentServer.js
rename to code/frontend/src/components/interactive/CurrentServer.js
index 6b012d7..7508657 100644
--- a/code/frontend/src/components/CurrentServer.js
+++ b/code/frontend/src/components/interactive/CurrentServer.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import { faGlobe } from "@fortawesome/free-solid-svg-icons"
-import ContextServer from "../contexts/ContextServer"
+import ContextServer from "../../contexts/ContextServer"
 
 
 /**
diff --git a/code/frontend/src/components/Layout.js b/code/frontend/src/components/interactive/Layout.js
similarity index 89%
rename from code/frontend/src/components/Layout.js
rename to code/frontend/src/components/interactive/Layout.js
index 28d123d..83094dd 100644
--- a/code/frontend/src/components/Layout.js
+++ b/code/frontend/src/components/interactive/Layout.js
@@ -1,8 +1,8 @@
 import React, { useContext } from "react"
 import Style from "./Layout.module.css"
 import classNames from "classnames"
-import Sidebar from "./Sidebar"
-import ContextTheme from "../contexts/ContextTheme"
+import Sidebar from "../interactive/Sidebar"
+import ContextTheme from "../../contexts/ContextTheme"
 
 
 /**
diff --git a/code/frontend/src/components/Layout.module.css b/code/frontend/src/components/interactive/Layout.module.css
similarity index 100%
rename from code/frontend/src/components/Layout.module.css
rename to code/frontend/src/components/interactive/Layout.module.css
diff --git a/code/frontend/src/components/LoggedInUser.js b/code/frontend/src/components/interactive/LoggedInUser.js
similarity index 92%
rename from code/frontend/src/components/LoggedInUser.js
rename to code/frontend/src/components/interactive/LoggedInUser.js
index fffb9c9..504dddb 100644
--- a/code/frontend/src/components/LoggedInUser.js
+++ b/code/frontend/src/components/interactive/LoggedInUser.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faUser } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
 
 
 /**
diff --git a/code/frontend/src/components/Logo.js b/code/frontend/src/components/interactive/Logo.js
similarity index 85%
rename from code/frontend/src/components/Logo.js
rename to code/frontend/src/components/interactive/Logo.js
index 2ed7e77..be5e774 100644
--- a/code/frontend/src/components/Logo.js
+++ b/code/frontend/src/components/interactive/Logo.js
@@ -1,8 +1,8 @@
 import React, {useContext} from "react"
 import Style from "./Logo.module.css"
-import LogoDark from "../media/LogoDark.png"
-import LogoLight from "../media/LogoLight.png"
-import ContextTheme from "../contexts/ContextTheme"
+import LogoDark from "../../media/LogoDark.png"
+import LogoLight from "../../media/LogoLight.png"
+import ContextTheme from "../../contexts/ContextTheme"
 import classNames from "classnames"
 
 
diff --git a/code/frontend/src/components/Logo.module.css b/code/frontend/src/components/interactive/Logo.module.css
similarity index 100%
rename from code/frontend/src/components/Logo.module.css
rename to code/frontend/src/components/interactive/Logo.module.css
diff --git a/code/frontend/src/components/RepositorySummaryBase.js b/code/frontend/src/components/interactive/RepositorySummaryBase.js
similarity index 98%
rename from code/frontend/src/components/RepositorySummaryBase.js
rename to code/frontend/src/components/interactive/RepositorySummaryBase.js
index 96aeffe..e241b88 100644
--- a/code/frontend/src/components/RepositorySummaryBase.js
+++ b/code/frontend/src/components/interactive/RepositorySummaryBase.js
@@ -2,7 +2,7 @@ import React from "react"
 import Style from "./RepositorySummaryBase.module.css"
 import classNames from "classnames"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import Button from "./Button"
+import Button from "../base/Button"
 import { faArchive, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
 
 
diff --git a/code/frontend/src/components/RepositorySummaryBase.module.css b/code/frontend/src/components/interactive/RepositorySummaryBase.module.css
similarity index 100%
rename from code/frontend/src/components/RepositorySummaryBase.module.css
rename to code/frontend/src/components/interactive/RepositorySummaryBase.module.css
diff --git a/code/frontend/src/components/SelectTheme.js b/code/frontend/src/components/interactive/SelectTheme.js
similarity index 87%
rename from code/frontend/src/components/SelectTheme.js
rename to code/frontend/src/components/interactive/SelectTheme.js
index 8e28e75..60a7cc0 100644
--- a/code/frontend/src/components/SelectTheme.js
+++ b/code/frontend/src/components/interactive/SelectTheme.js
@@ -1,6 +1,6 @@
 import React, {useContext} from "react"
-import Select from "./Select"
-import ContextTheme from "../contexts/ContextTheme"
+import Select from "../base/Select"
+import ContextTheme from "../../contexts/ContextTheme"
 
 
 /**
diff --git a/code/frontend/src/components/Sidebar.js b/code/frontend/src/components/interactive/Sidebar.js
similarity index 92%
rename from code/frontend/src/components/Sidebar.js
rename to code/frontend/src/components/interactive/Sidebar.js
index ec6162c..5c0c625 100644
--- a/code/frontend/src/components/Sidebar.js
+++ b/code/frontend/src/components/interactive/Sidebar.js
@@ -1,10 +1,10 @@
 import React, { Fragment, useContext } from "react"
 import Style from "./Sidebar.module.css"
 import classNames from "classnames"
-import Logo from "./Logo"
-import ButtonSidebar from "./ButtonSidebar"
+import Logo from "../interactive/Logo"
+import ButtonSidebar from "../base/ButtonSidebar"
 import { faCog, faExclamationTriangle, faFolder, faHome, faKey, faWrench } from "@fortawesome/free-solid-svg-icons"
-import ContextUser from "../contexts/ContextUser"
+import ContextUser from "../../contexts/ContextUser"
 
 
 /**
diff --git a/code/frontend/src/components/Sidebar.module.css b/code/frontend/src/components/interactive/Sidebar.module.css
similarity index 100%
rename from code/frontend/src/components/Sidebar.module.css
rename to code/frontend/src/components/interactive/Sidebar.module.css
diff --git a/code/frontend/src/components/GlobalServer.js b/code/frontend/src/components/providers/GlobalServer.js
similarity index 94%
rename from code/frontend/src/components/GlobalServer.js
rename to code/frontend/src/components/providers/GlobalServer.js
index a29f217..4e3272d 100644
--- a/code/frontend/src/components/GlobalServer.js
+++ b/code/frontend/src/components/providers/GlobalServer.js
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextServer from "../contexts/ContextServer"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextServer from "../../contexts/ContextServer"
 import isString from "is-string"
 
 
diff --git a/code/frontend/src/components/GlobalTheme.js b/code/frontend/src/components/providers/GlobalTheme.js
similarity index 77%
rename from code/frontend/src/components/GlobalTheme.js
rename to code/frontend/src/components/providers/GlobalTheme.js
index 2dd467a..f763eca 100644
--- a/code/frontend/src/components/GlobalTheme.js
+++ b/code/frontend/src/components/providers/GlobalTheme.js
@@ -1,6 +1,6 @@
 import React from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextTheme from "../contexts/ContextTheme"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextTheme from "../../contexts/ContextTheme"
 
 
 /**
diff --git a/code/frontend/src/components/GlobalUser.js b/code/frontend/src/components/providers/GlobalUser.js
similarity index 93%
rename from code/frontend/src/components/GlobalUser.js
rename to code/frontend/src/components/providers/GlobalUser.js
index 0514031..4797ae6 100644
--- a/code/frontend/src/components/GlobalUser.js
+++ b/code/frontend/src/components/providers/GlobalUser.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext } from "react"
-import useLocalStorageState from "../hooks/useLocalStorageState"
-import ContextServer from "../contexts/ContextServer"
-import ContextUser from "../contexts/ContextUser"
+import useLocalStorageState from "../../hooks/useLocalStorageState"
+import ContextServer from "../../contexts/ContextServer"
+import ContextUser from "../../contexts/ContextUser"
 
 
 /**
diff --git a/code/frontend/src/components/RepositoryEditor.js b/code/frontend/src/components/providers/RepositoryEditor.js
similarity index 87%
rename from code/frontend/src/components/RepositoryEditor.js
rename to code/frontend/src/components/providers/RepositoryEditor.js
index 2c92a3a..b62b796 100644
--- a/code/frontend/src/components/RepositoryEditor.js
+++ b/code/frontend/src/components/providers/RepositoryEditor.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
-import useArrayState from "../hooks/useArrayState"
+import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import useArrayState from "../../hooks/useArrayState"
 
 
 export default function RepositoryEditor({ children, id, name, start, end, conditions }) {
diff --git a/code/frontend/src/contexts/ContextRepositoryEditor.js b/code/frontend/src/contexts/ContextRepositoryEditor.js
index 5d9ff86..94b0ce5 100644
--- a/code/frontend/src/contexts/ContextRepositoryEditor.js
+++ b/code/frontend/src/contexts/ContextRepositoryEditor.js
@@ -1,5 +1,7 @@
 import {createContext} from "react";
 
 
-const ContextRepositoryEditor = createContext(null)
-export default ContextRepositoryEditor
+/**
+ * @todo Document this.
+ */
+export default createContext(null)
diff --git a/code/frontend/src/hooks/useArrayState.js b/code/frontend/src/hooks/useArrayState.js
index ec529f4..08e169a 100644
--- a/code/frontend/src/hooks/useArrayState.js
+++ b/code/frontend/src/hooks/useArrayState.js
@@ -1,6 +1,12 @@
 import { useCallback, useState } from "react"
 
 
+/**
+ * An hook similar to {@link useState} which stores an array of values.
+ *
+ * @param def - The starting value of the hook.
+ * @returns {{spliceValue, removeValue, setValue, appendValue, value}}
+ */
 export default function useArrayState(def) {
     const [value, setValue] = useState(def ?? [])
 
diff --git a/code/frontend/src/hooks/useRepositoryEditor.js b/code/frontend/src/hooks/useRepositoryEditor.js
new file mode 100644
index 0000000..387ad3b
--- /dev/null
+++ b/code/frontend/src/hooks/useRepositoryEditor.js
@@ -0,0 +1,14 @@
+import { useContext } from "react"
+import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+
+
+/**
+ * @todo Document this.
+ */
+export default function useRepositoryEditor() {
+    const context = useContext(ContextRepositoryEditor)
+    if(!context) {
+        throw new Error("This component must be placed inside a RepositoryEditor.")
+    }
+    return context
+}
\ No newline at end of file
diff --git a/code/frontend/src/routes/PageAlerts.js b/code/frontend/src/routes/PageAlerts.js
index 5770e89..bbb5437 100644
--- a/code/frontend/src/routes/PageAlerts.js
+++ b/code/frontend/src/routes/PageAlerts.js
@@ -1,7 +1,7 @@
 import React from "react"
 import Style from "./PageAlerts.module.css"
 import classNames from "classnames"
-import BoxFull from "../components/BoxFull"
+import BoxFull from "../components/base/BoxFull"
 
 
 export default function PageAlerts({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageDashboard.js b/code/frontend/src/routes/PageDashboard.js
index ba10f90..cf4da58 100644
--- a/code/frontend/src/routes/PageDashboard.js
+++ b/code/frontend/src/routes/PageDashboard.js
@@ -1,15 +1,15 @@
 import React from "react"
 import Style from "./PageDashboard.module.css"
 import classNames from "classnames"
-import BoxHeader from "../components/BoxHeader"
-import BoxFull from "../components/BoxFull"
-import Checkbox from "../components/Checkbox"
-import InputWithIcon from "../components/InputWithIcon"
+import BoxHeader from "../components/base/BoxHeader"
+import BoxFull from "../components/base/BoxFull"
+import Checkbox from "../components/base/Checkbox"
+import InputWithIcon from "../components/base/InputWithIcon"
 import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
-import Radio from "../components/Radio"
-import Button from "../components/Button"
-import FormLabelled from "../components/FormLabelled"
-import FormLabel from "../components/FormLabel"
+import Radio from "../components/base/Radio"
+import Button from "../components/base/Button"
+import FormLabelled from "../components/base/FormLabelled"
+import FormLabel from "../components/base/formparts/FormLabel"
 
 
 export default function PageDashboard({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageLogin.js b/code/frontend/src/routes/PageLogin.js
index 9392428..4ef8c9a 100644
--- a/code/frontend/src/routes/PageLogin.js
+++ b/code/frontend/src/routes/PageLogin.js
@@ -1,8 +1,8 @@
 import React from "react"
 import Style from "./PageLogin.module.css"
 import classNames from "classnames"
-import BoxSetServer from "../components/BoxSetServer"
-import BoxLogin from "../components/BoxLogin"
+import BoxSetServer from "../components/interactive/BoxSetServer"
+import BoxLogin from "../components/interactive/BoxLogin"
 
 
 export default function PageLogin({ className, ...props }) {
diff --git a/code/frontend/src/routes/PageRepositories.js b/code/frontend/src/routes/PageRepositories.js
index eb3c7db..c064790 100644
--- a/code/frontend/src/routes/PageRepositories.js
+++ b/code/frontend/src/routes/PageRepositories.js
@@ -1,8 +1,8 @@
 import React from "react"
 import Style from "./PageRepositories.module.css"
 import classNames from "classnames"
-import BoxRepositoriesActive from "../components/BoxRepositoriesActive"
-import BoxRepositoriesArchived from "../components/BoxRepositoriesArchived"
+import BoxRepositoriesActive from "../components/interactive/BoxRepositoriesActive"
+import BoxRepositoriesArchived from "../components/interactive/BoxRepositoriesArchived"
 
 
 export default function PageRepositories({ children, className, ...props }) {
diff --git a/code/frontend/src/routes/PageSettings.js b/code/frontend/src/routes/PageSettings.js
index 92c633c..d05272a 100644
--- a/code/frontend/src/routes/PageSettings.js
+++ b/code/frontend/src/routes/PageSettings.js
@@ -1,10 +1,10 @@
 import React from "react"
 import Style from "./PageSettings.module.css"
 import classNames from "classnames"
-import BoxHeader from "../components/BoxHeader"
-import BoxFull from "../components/BoxFull"
-import SelectTheme from "../components/SelectTheme"
-import BoxLoggedIn from "../components/BoxLoggedIn"
+import BoxHeader from "../components/base/BoxHeader"
+import BoxFull from "../components/base/BoxFull"
+import SelectTheme from "../components/interactive/SelectTheme"
+import BoxLoggedIn from "../components/interactive/BoxLoggedIn"
 
 
 export default function PageSettings({ children, className, ...props }) {