diff --git a/web_src/css/base.css b/web_src/css/base.css
index 1515b12320..d449fcef1e 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -34,7 +34,7 @@
   --transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
 
   /* z-index */
-  --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */
+  --z-index-modal: 1001; /* modal dialog */
   --z-index-toast: 1002; /* should be larger than modal */
 
   --font-size-label: 12px; /* font size of individual labels */
@@ -337,37 +337,6 @@ a.label,
   background: currentcolor;
 }
 
-.ui.search > .results {
-  background: var(--color-body);
-  border-color: var(--color-secondary);
-  overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */
-}
-
-.ui.search > .results .result {
-  background: var(--color-body);
-  border-color: var(--color-secondary);
-  display: flex;
-  align-items: center;
-}
-
-.ui.search > .results .result .title {
-  color: var(--color-text-dark);
-}
-
-.ui.search > .results .result .description {
-  color: var(--color-text-light-2);
-}
-
-.ui.search > .results .result .image {
-  width: auto;
-  height: auto;
-}
-
-.ui.search > .results .result:hover,
-.ui.category.search > .results .category .result:hover {
-  background: var(--color-hover);
-}
-
 .empty-placeholder {
   display: flex;
   flex-direction: column;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 3edb3df6c1..8107d06f1d 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -18,6 +18,7 @@
 @import "./modules/checkbox.css";
 @import "./modules/dimmer.css";
 @import "./modules/modal.css";
+@import "./modules/search.css";
 @import "./modules/tab.css";
 @import "./modules/form.css";
 @import "./modules/dropdown.css";
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index fd6dacc30c..5d686746cb 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -1,3 +1,298 @@
+/* These are the remnants of the fomantic modal module */
+
+.ui.modal {
+  position: absolute;
+  display: none;
+  z-index: var(--z-index-modal);
+  text-align: left;
+  background: var(--color-body);
+  border: none;
+  box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
+  transform-origin: 50% 25%;
+  flex: 0 0 auto;
+  border-radius: var(--border-radius);
+  user-select: text;
+  will-change: top, left, margin, transform, opacity;
+}
+
+.ui.modal > :first-child:not(.icon) {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.ui.modal > :last-child {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.ui.modal > .close {
+  cursor: pointer;
+  position: absolute;
+  top: -2.5rem;
+  right: -2.5rem;
+  z-index: 1;
+  opacity: 0.8;
+  font-size: 1.25em;
+  color: var(--color-white);
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0.625rem 0 0;
+}
+
+.ui.modal > .close:hover {
+  opacity: 1;
+}
+
+.ui.modal > .header {
+  display: block;
+  font-family: var(--fonts-regular);
+  background: var(--color-body);
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  box-shadow: none;
+  color: var(--color-text-dark);
+  border-bottom: 1px solid var(--color-secondary);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.ui.modal > .header:not(.ui) {
+  font-size: 1.42857143rem;
+  line-height: 1.28571429em;
+  font-weight: var(--font-weight-medium);
+}
+
+.ui.modal > .header .svg {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.ui.modal > .content,
+.ui.modal form > .content {
+  display: block;
+  width: 100%;
+  font-size: 1em;
+  line-height: 1.4;
+  padding: 1.5em;
+  background: var(--color-body);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.ui.modal > .actions,
+.ui.modal .content + .actions,
+.ui.modal .content + form > .actions {
+  background: var(--color-secondary-bg);
+  padding: 1rem;
+  border-top: 1px solid var(--color-secondary);
+  text-align: right;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.ui.modal .actions > .button {
+  margin-left: 0.75em;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.modal {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .ui.modal {
+    width: 88%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .ui.modal {
+    width: 850px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .ui.modal {
+    width: 900px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .ui.modal {
+    width: 950px;
+  }
+}
+
+@media only screen and (max-width: 991.98px) {
+  .ui.modal > .header {
+    padding-right: 2.25rem;
+  }
+  .ui.modal > .close {
+    top: 1.0535rem;
+    right: 1rem;
+    color: var(--color-text);
+  }
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.modal > .header {
+    padding: 0.75rem 1rem !important;
+    padding-right: 2.25rem !important;
+  }
+  .ui.modal > .content {
+    display: block;
+    padding: 1rem !important;
+  }
+  .ui.modal > .close {
+    top: 0.5rem !important;
+    right: 0.5rem !important;
+  }
+  .ui.modal > .actions {
+    padding: 1rem 1rem 0 !important;
+  }
+  .ui.modal .actions > .buttons,
+  .ui.modal .actions > .button {
+    margin-bottom: 1rem;
+  }
+}
+
+.ui.active.modal {
+  display: block;
+}
+
+.scrolling.dimmable.dimmed {
+  overflow: hidden;
+}
+
+.scrolling.dimmable > .dimmer {
+  justify-content: flex-start;
+  position: fixed;
+}
+
+.scrolling.dimmable.dimmed > .dimmer {
+  overflow: auto;
+}
+
+.modals.dimmer .ui.scrolling.modal {
+  margin: 2rem auto;
+}
+
+.ui.modal > .close.inside + .header {
+  padding-right: 2.25rem;
+}
+
+.ui.modal > .close.inside {
+  top: 1.0535rem;
+  right: 1rem;
+  color: inherit;
+}
+
+.ui.modal > .close.icon[height="16"] {
+  top: 0.7em;
+  color: var(--color-text-dark);
+}
+
+.ui.mini.modal > .header:not(.ui) {
+  font-size: 1.3em;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.mini.modal {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .ui.mini.modal {
+    width: 35.2%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .ui.mini.modal {
+    width: 340px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .ui.mini.modal {
+    width: 360px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .ui.mini.modal {
+    width: 380px;
+  }
+}
+
+.ui.tiny.modal > .header:not(.ui) {
+  font-size: 1.3em;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.tiny.modal {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .ui.tiny.modal {
+    width: 52.8%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .ui.tiny.modal {
+    width: 510px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .ui.tiny.modal {
+    width: 540px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .ui.tiny.modal {
+    width: 570px;
+  }
+}
+
+.ui.small.modal > .header:not(.ui) {
+  font-size: 1.3em;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.small.modal {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .ui.small.modal {
+    width: 70.4%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .ui.small.modal {
+    width: 680px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .ui.small.modal {
+    width: 720px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .ui.small.modal {
+    width: 760px;
+  }
+}
+
 .ui.modal.g-modal-confirm {
   max-width: min(800px, 90vw);
   width: fit-content;
@@ -10,70 +305,12 @@
   top: 1.2em;
 }
 
-.ui.modal > .close.inside {
-  color: inherit;
-}
-
-.ui.modal > .close.icon[height="16"] {
-  top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
-  color: var(--color-text-dark);
-}
-
-.ui.modal > .header {
-  /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
-  color: var(--color-text-dark);
-  background: var(--color-body);
-  border-color: var(--color-secondary);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  vertical-align: middle;
-}
-
-.ui.modal > .header .svg {
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.ui.modal {
-  background: var(--color-body);
-  box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
-}
-
-/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
-Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
-However, Gitea uses the following layouts:
-* <div .modal><div .content><div .actions/></div></div>
-* <div .modal><form><div .content/><div .actions/></form></div>
-* <div .modal><div .content><form><div .actions/></form></div></div>
-* <div .modal><div .content></div><form><div .actions/></form></div>
-* ...
-These inconsistent layouts should be refactored to simple ones.
-*/
-
-.ui.modal > .content,
-.ui.modal form > .content {
-  padding: 1.5em;
-  background: var(--color-body);
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-.ui.modal > .actions,
-.ui.modal .content + .actions,
-.ui.modal .content + form > .actions {
-  background: var(--color-secondary-bg);
-  border-color: var(--color-secondary);
-  padding: 1rem;
-  text-align: right;
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
 .ui.modal .content > form > .actions,
 .ui.modal .content > .actions {
-  padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
+  padding-top: 1em;
   text-align: right;
 }
 
-/* positive/negative action buttons */
 .ui.modal .actions > .ui.button {
   display: inline-flex;
   align-items: center;
diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css
new file mode 100644
index 0000000000..647b7e27a3
--- /dev/null
+++ b/web_src/css/modules/search.css
@@ -0,0 +1,86 @@
+/* These are the remnants of the fomantic search module */
+
+.ui.search {
+  position: relative;
+}
+
+.ui.search > .results {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  white-space: normal;
+  text-align: left;
+  background: var(--color-body);
+  margin-top: 0.5em;
+  width: 18em;
+  border-radius: 0.28571429rem;
+  box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow);
+  border: 1px solid var(--color-secondary);
+  z-index: 998;
+  transform-origin: center top;
+  overflow-wrap: anywhere;
+}
+
+.ui.search > .results > :first-child {
+  border-top-left-radius: 0.28571429rem;
+  border-top-right-radius: 0.28571429rem;
+}
+
+.ui.search > .results > :last-child {
+  border-bottom-left-radius: 0.28571429rem;
+  border-bottom-right-radius: 0.28571429rem;
+}
+
+.ui.search > .results .result {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 0.85714286em 1.14285714em;
+  color: var(--color-text);
+  line-height: 1.33;
+  border-bottom: 1px solid var(--color-secondary);
+  background: var(--color-body);
+}
+
+.ui.search > .results .result:last-child {
+  border-bottom: none;
+}
+
+.ui.search > .results .result .image {
+  overflow: hidden;
+  border-radius: 0.25em;
+}
+
+.ui.search > .results .result .image img {
+  display: block;
+  height: 100%;
+}
+
+.ui.search > .results .result .title {
+  margin: -0.14285714em 0 0;
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-dark);
+}
+
+.ui.search > .results .result .description {
+  font-size: 0.92857143em;
+  color: var(--color-text-light-2);
+}
+
+.ui.search > .results .result:hover,
+.ui.search > .results .result.active {
+  background: var(--color-hover);
+}
+
+.ui.fluid.search .results {
+  width: 100%;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.search .results {
+    max-width: calc(100vw - 2rem);
+  }
+}
diff --git a/web_src/fomantic/build/components/modal.css b/web_src/fomantic/build/components/modal.css
deleted file mode 100644
index 7da015cfd0..0000000000
--- a/web_src/fomantic/build/components/modal.css
+++ /dev/null
@@ -1,698 +0,0 @@
-/*!
- * # Fomantic-UI - Modal
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
-             Modal
-*******************************/
-
-.ui.modal {
-  position: absolute;
-  display: none;
-  z-index: 1001;
-  text-align: left;
-  background: #FFFFFF;
-  border: none;
-  box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
-  transform-origin: 50% 25%;
-  flex: 0 0 auto;
-  border-radius: 0.28571429rem;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-  will-change: top, left, margin, transform, opacity;
-}
-.ui.modal > :first-child:not(.icon):not(.dimmer),
-.ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.icon),
-.ui.modal > .dimmer:first-child + i.icon + * {
-  border-top-left-radius: 0.28571429rem;
-  border-top-right-radius: 0.28571429rem;
-}
-.ui.modal > :last-child {
-  border-bottom-left-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
-}
-.ui.modal > .ui.dimmer {
-  border-radius: inherit;
-}
-
-
-/*******************************
-            Content
-*******************************/
-
-
-/*--------------
-     Close
----------------*/
-
-.ui.modal > .close {
-  cursor: pointer;
-  position: absolute;
-  top: -2.5rem;
-  right: -2.5rem;
-  z-index: 1;
-  opacity: 0.8;
-  font-size: 1.25em;
-  color: #FFFFFF;
-  width: 2.25rem;
-  height: 2.25rem;
-  padding: 0.625rem 0 0 0;
-}
-.ui.modal > .close:hover {
-  opacity: 1;
-}
-
-/*--------------
-     Header
----------------*/
-
-.ui.modal > .header {
-  display: block;
-  font-family: var(--fonts-regular);
-  background: #FFFFFF;
-  margin: 0;
-  padding: 1.25rem 1.5rem;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.85);
-  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
-}
-.ui.modal > .header:not(.ui) {
-  font-size: 1.42857143rem;
-  line-height: 1.28571429em;
-  font-weight: 500;
-}
-
-/*--------------
-     Content
----------------*/
-
-.ui.modal > .content {
-  display: block;
-  width: 100%;
-  font-size: 1em;
-  line-height: 1.4;
-  padding: 1.5rem;
-  background: #FFFFFF;
-}
-.ui.modal > .image.content {
-  display: flex;
-  flex-direction: row;
-}
-
-/* Image */
-.ui.modal > .content > .image {
-  display: block;
-  flex: 0 1 auto;
-  width: '';
-  align-self: start;
-  max-width: 100%;
-}
-
-.ui.modal > [class*="stretched"] {
-  align-self: stretch;
-}
-
-/* Description */
-.ui.modal > .content > .description {
-  display: block;
-  flex: 1 0 auto;
-  min-width: 0;
-  align-self: start;
-}
-.ui.modal > .content > i.icon + .description,
-.ui.modal > .content > .image + .description {
-  flex: 0 1 auto;
-  min-width: '';
-  width: auto;
-  padding-left: 2em;
-}
-/*rtl:ignore*/
-.ui.modal > .content > .image > i.icon {
-  margin: 0;
-  opacity: 1;
-  width: auto;
-  line-height: 1;
-  font-size: 8rem;
-}
-
-/*--------------
-     Actions
----------------*/
-
-.ui.modal > .actions {
-  background: #F9FAFB;
-  padding: 1rem 1rem;
-  border-top: 1px solid rgba(34, 36, 38, 0.15);
-  text-align: right;
-}
-.ui.modal .actions > .button:not(.fluid) {
-  margin-left: 0.75em;
-}
-.ui.basic.modal > .actions {
-  border-top: none;
-}
-
-/*-------------------
-       Responsive
---------------------*/
-
-
-/* Modal Width */
-@media only screen and (max-width: 767.98px) {
-  .ui.modal:not(.fullscreen) {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.modal:not(.fullscreen) {
-    width: 88%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.modal:not(.fullscreen) {
-    width: 850px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.modal:not(.fullscreen) {
-    width: 900px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.modal:not(.fullscreen) {
-    width: 950px;
-    margin: 0 0 0 0;
-  }
-}
-
-/* Tablet and Mobile */
-@media only screen and (max-width: 991.98px) {
-  .ui.modal > .header {
-    padding-right: 2.25rem;
-  }
-  .ui.modal > .close {
-    top: 1.0535rem;
-    right: 1rem;
-    color: rgba(0, 0, 0, 0.87);
-  }
-}
-
-/* Mobile */
-@media only screen and (max-width: 767.98px) {
-  .ui.modal > .header {
-    padding: 0.75rem 1rem !important;
-    padding-right: 2.25rem !important;
-  }
-  .ui.overlay.fullscreen.modal > .content.content.content {
-    min-height: calc(100vh - 8.1rem);
-  }
-  .ui.overlay.fullscreen.modal > .scrolling.content.content.content {
-    max-height: calc(100vh - 8.1rem);
-  }
-  .ui.modal > .content {
-    display: block;
-    padding: 1rem !important;
-  }
-  .ui.modal > .close {
-    top: 0.5rem !important;
-    right: 0.5rem !important;
-  }
-  /*rtl:ignore*/
-  .ui.modal .image.content {
-    flex-direction: column;
-  }
-  .ui.modal > .content > .image {
-    display: block;
-    max-width: 100%;
-    margin: 0 auto !important;
-    text-align: center;
-    padding: 0 0 1rem !important;
-  }
-  .ui.modal > .content > .image > i.icon {
-    font-size: 5rem;
-    text-align: center;
-  }
-  /*rtl:ignore*/
-  .ui.modal > .content > .description {
-    display: block;
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 1rem 0 !important;
-    box-shadow: none;
-  }
-
-/* Let Buttons Stack */
-  .ui.modal > .actions {
-    padding: 1rem 1rem 0rem !important;
-  }
-  .ui.modal .actions > .buttons,
-  .ui.modal .actions > .button {
-    margin-bottom: 1rem;
-  }
-}
-
-/*--------------
-    Coupling
----------------*/
-
-.ui.inverted.dimmer > .ui.modal {
-  box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
-}
-
-
-/*******************************
-             Types
-*******************************/
-
-.ui.basic.modal {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none !important;
-  color: #FFFFFF;
-}
-.ui.basic.modal > .header,
-.ui.basic.modal > .content,
-.ui.basic.modal > .actions {
-  background-color: transparent;
-}
-.ui.basic.modal > .header {
-  color: #FFFFFF;
-  border-bottom: none;
-}
-.ui.basic.modal > .close {
-  top: 1rem;
-  right: 1.5rem;
-  color: #FFFFFF;
-}
-.ui.inverted.dimmer > .basic.modal {
-  color: rgba(0, 0, 0, 0.87);
-}
-.ui.inverted.dimmer > .ui.basic.modal > .header {
-  color: rgba(0, 0, 0, 0.85);
-}
-
-/* Resort to margin positioning if legacy */
-.ui.legacy.legacy.modal,
-.ui.legacy.legacy.page.dimmer > .ui.modal {
-  left: 50% !important;
-}
-.ui.legacy.legacy.modal:not(.aligned),
-.ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
-  top: 50%;
-}
-.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
-.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
-.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
-.ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
-  top: auto;
-}
-.ui.legacy.overlay.fullscreen.modal {
-  margin-top: -2rem !important;
-}
-
-
-/*******************************
-             States
-*******************************/
-
-.ui.loading.modal {
-  display: block;
-  visibility: hidden;
-  z-index: -1;
-}
-.ui.active.modal {
-  display: block;
-}
-
-
-/*******************************
-           Variations
-*******************************/
-
-
-/*--------------
-     Aligned
-  ---------------*/
-
-.modals.dimmer .ui.top.aligned.modal {
-  top: 5vh;
-}
-.modals.dimmer .ui.bottom.aligned.modal {
-  bottom: 5vh;
-}
-@media only screen and (max-width: 767.98px) {
-  .modals.dimmer .ui.top.aligned.modal {
-    top: 1rem;
-  }
-  .modals.dimmer .ui.bottom.aligned.modal {
-    bottom: 1rem;
-  }
-}
-
-/*--------------
-      Scrolling
-  ---------------*/
-
-
-/* Scrolling Dimmer */
-.scrolling.dimmable.dimmed {
-  overflow: hidden;
-}
-.scrolling.dimmable > .dimmer {
-  justify-content: flex-start;
-  position: fixed;
-}
-.scrolling.dimmable.dimmed > .dimmer {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
-  margin: 2rem auto;
-}
-
-/* Fix for Firefox, Edge, IE11 */
-.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
-  content: '\00A0';
-  position: absolute;
-  height: 2rem;
-}
-
-/* Undetached Scrolling */
-.scrolling.undetached.dimmable.dimmed {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.scrolling.undetached.dimmable.dimmed > .dimmer {
-  overflow: hidden;
-}
-.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
-  position: absolute;
-  left: 50%;
-}
-
-/* Scrolling Content */
-.ui.modal > .scrolling.content {
-  max-height: calc(80vh - 10rem);
-  overflow: auto;
-}
-.ui.overlay.fullscreen.modal > .content {
-  min-height: calc(100vh - 9.1rem);
-}
-.ui.overlay.fullscreen.modal > .scrolling.content {
-  max-height: calc(100vh - 9.1rem);
-}
-
-/*--------------
-     Full Screen
-  ---------------*/
-
-.ui.fullscreen.modal {
-  width: 95%;
-  left: 2.5%;
-  margin: 1em auto;
-}
-.ui.overlay.fullscreen.modal {
-  width: 100%;
-  left: 0;
-  margin: 0 auto;
-  top: 0;
-  border-radius: 0;
-}
-.ui.modal > .close.inside + .header,
-.ui.fullscreen.modal > .header {
-  padding-right: 2.25rem;
-}
-.ui.modal > .close.inside,
-.ui.fullscreen.modal > .close {
-  top: 1.0535rem;
-  right: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-}
-.ui.basic.fullscreen.modal > .close {
-  color: #FFFFFF;
-}
-
-/*--------------
-      Size
----------------*/
-
-.ui.modal {
-  font-size: 1rem;
-}
-.ui.mini.modal > .header:not(.ui) {
-  font-size: 1.3em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.mini.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.mini.modal {
-    width: 35.2%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.mini.modal {
-    width: 340px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.mini.modal {
-    width: 360px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.mini.modal {
-    width: 380px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.tiny.modal > .header:not(.ui) {
-  font-size: 1.3em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.tiny.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.tiny.modal {
-    width: 52.8%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.tiny.modal {
-    width: 510px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.tiny.modal {
-    width: 540px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.tiny.modal {
-    width: 570px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.small.modal > .header:not(.ui) {
-  font-size: 1.3em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.small.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.small.modal {
-    width: 70.4%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.small.modal {
-    width: 680px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.small.modal {
-    width: 720px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.small.modal {
-    width: 760px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.large.modal > .header:not(.ui) {
-  font-size: 1.6em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.large.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.large.modal {
-    width: 88%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.large.modal {
-    width: 1020px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.large.modal {
-    width: 1080px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.large.modal {
-    width: 1140px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.big.modal > .header:not(.ui) {
-  font-size: 1.6em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.big.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.big.modal {
-    width: 88%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.big.modal {
-    width: 1190px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.big.modal {
-    width: 1260px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.big.modal {
-    width: 1330px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.huge.modal > .header:not(.ui) {
-  font-size: 1.6em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.huge.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.huge.modal {
-    width: 88%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.huge.modal {
-    width: 1360px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.huge.modal {
-    width: 1440px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.huge.modal {
-    width: 1520px;
-    margin: 0 0 0 0;
-  }
-}
-.ui.massive.modal > .header:not(.ui) {
-  font-size: 1.8em;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.massive.modal {
-    width: 95%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.massive.modal {
-    width: 88%;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.massive.modal {
-    width: 1530px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .ui.massive.modal {
-    width: 1620px;
-    margin: 0 0 0 0;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.massive.modal {
-    width: 1710px;
-    margin: 0 0 0 0;
-  }
-}
-
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-
-
-/*******************************
-         Site Overrides
-*******************************/
-
diff --git a/web_src/fomantic/build/components/search.css b/web_src/fomantic/build/components/search.css
deleted file mode 100644
index b0a7b8db7e..0000000000
--- a/web_src/fomantic/build/components/search.css
+++ /dev/null
@@ -1,520 +0,0 @@
-/*!
- * # Fomantic-UI - Search
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
-             Search
-*******************************/
-
-.ui.search {
-  position: relative;
-}
-.ui.search > .prompt {
-  margin: 0;
-  outline: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-shadow: none;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1.21428571em;
-  padding: 0.67857143em 1em;
-  font-size: 1em;
-  background: #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  color: rgba(0, 0, 0, 0.87);
-  box-shadow: 0 0 0 0 transparent inset;
-  transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
-}
-.ui.search .prompt {
-  border-radius: 500rem;
-}
-
-/*--------------
-     Icon
----------------*/
-
-.ui.search .prompt ~ .search.icon {
-  cursor: pointer;
-}
-
-/*--------------
-    Results
----------------*/
-
-.ui.search > .results {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  transform-origin: center top;
-  white-space: normal;
-  text-align: left;
-  text-transform: none;
-  background: #FFFFFF;
-  margin-top: 0.5em;
-  width: 18em;
-  border-radius: 0.28571429rem;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-  border: 1px solid #D4D4D5;
-  z-index: 998;
-}
-.ui.search > .results > :first-child {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-.ui.search > .results > :last-child {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-}
-
-/*--------------
-    Result
----------------*/
-
-.ui.search > .results .result {
-  cursor: pointer;
-  display: block;
-  overflow: hidden;
-  font-size: 1em;
-  padding: 0.85714286em 1.14285714em;
-  color: rgba(0, 0, 0, 0.87);
-  line-height: 1.33;
-  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
-}
-.ui.search > .results .result:last-child {
-  border-bottom: none !important;
-}
-
-/* Image */
-.ui.search > .results .result .image {
-  float: right;
-  overflow: hidden;
-  background: none;
-  width: 5em;
-  height: 3em;
-  border-radius: 0.25em;
-}
-.ui.search > .results .result .image img {
-  display: block;
-  width: auto;
-  height: 100%;
-}
-
-/*--------------
-      Info
----------------*/
-
-.ui.search > .results .result .image + .content {
-  margin: 0 6em 0 0;
-}
-.ui.search > .results .result .title {
-  margin: -0.14285714em 0 0;
-  font-family: var(--fonts-regular);
-  font-weight: 500;
-  font-size: 1em;
-  color: rgba(0, 0, 0, 0.85);
-}
-.ui.search > .results .result .description {
-  margin-top: 0;
-  font-size: 0.92857143em;
-  color: rgba(0, 0, 0, 0.4);
-}
-.ui.search > .results .result .price {
-  float: right;
-  color: #21BA45;
-}
-
-/*--------------
-    Message
----------------*/
-
-.ui.search > .results > .message {
-  padding: 1em 1em;
-}
-.ui.search > .results > .message .header {
-  font-family: var(--fonts-regular);
-  font-size: 1rem;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-}
-.ui.search > .results > .message .description {
-  margin-top: 0.25rem;
-  font-size: 1em;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* View All Results */
-.ui.search > .results > .action {
-  display: block;
-  border-top: none;
-  background: #F3F4F5;
-  padding: 0.92857143em 1em;
-  color: rgba(0, 0, 0, 0.87);
-  font-weight: 500;
-  text-align: center;
-}
-
-
-/*******************************
-            States
-*******************************/
-
-
-/*--------------------
-       Focus
----------------------*/
-
-.ui.search > .prompt:focus {
-  border-color: rgba(34, 36, 38, 0.35);
-  background: #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------------
-         Loading
-  ---------------------*/
-
-.ui.loading.search .input > i.icon:before {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-.ui.loading.search .input > i.icon:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid #767676;
-  border-radius: 500rem;
-  box-shadow: 0 0 0 1px transparent;
-}
-
-/*--------------
-      Hover
----------------*/
-
-.ui.search > .results .result:hover,
-.ui.category.search > .results .category .result:hover {
-  background: #F9FAFB;
-}
-.ui.search .action:hover:not(div) {
-  background: #E0E0E0;
-}
-
-/*--------------
-      Active
----------------*/
-
-.ui.category.search > .results .category.active {
-  background: #F3F4F5;
-}
-.ui.category.search > .results .category.active > .name {
-  color: rgba(0, 0, 0, 0.87);
-}
-.ui.search > .results .result.active,
-.ui.category.search > .results .category .result.active {
-  position: relative;
-  border-left-color: rgba(34, 36, 38, 0.1);
-  background: #F3F4F5;
-  box-shadow: none;
-}
-.ui.search > .results .result.active .title {
-  color: rgba(0, 0, 0, 0.85);
-}
-.ui.search > .results .result.active .description {
-  color: rgba(0, 0, 0, 0.85);
-}
-
-/*--------------------
-          Disabled
-  ----------------------*/
-
-
-/* Disabled */
-.ui.disabled.search {
-  cursor: default;
-  pointer-events: none;
-  opacity: var(--opacity-disabled);
-}
-
-
-/*******************************
-           Types
-*******************************/
-
-
-/*--------------
-      Selection
-  ---------------*/
-
-.ui.search.selection .prompt {
-  border-radius: 0.28571429rem;
-}
-
-/* Remove input */
-.ui.search.selection > .icon.input > .remove.icon {
-  pointer-events: none;
-  position: absolute;
-  left: auto;
-  opacity: 0;
-  color: '';
-  top: 0;
-  right: 0;
-  transition: color 0.1s ease, opacity 0.1s ease;
-}
-.ui.search.selection > .icon.input > .active.remove.icon {
-  cursor: pointer;
-  opacity: 0.8;
-  pointer-events: auto;
-}
-.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
-  right: 1.85714em;
-}
-.ui.search.selection > .icon.input > .remove.icon:hover {
-  opacity: 1;
-  color: #DB2828;
-}
-
-/*--------------
-      Category
-  ---------------*/
-
-.ui.category.search .results {
-  width: 28em;
-}
-.ui.category.search .results.animating,
-.ui.category.search .results.visible {
-  display: table;
-}
-
-/* Category */
-.ui.category.search > .results .category {
-  display: table-row;
-  background: #F3F4F5;
-  box-shadow: none;
-  transition: background 0.1s ease, border-color 0.1s ease;
-}
-
-/* Last Category */
-.ui.category.search > .results .category:last-child {
-  border-bottom: none;
-}
-
-/* First / Last */
-.ui.category.search > .results .category:first-child .name + .result {
-  border-radius: 0 0.28571429rem 0 0;
-}
-.ui.category.search > .results .category:last-child .result:last-child {
-  border-radius: 0 0 0.28571429rem 0;
-}
-
-/* Category Result Name */
-.ui.category.search > .results .category > .name {
-  display: table-cell;
-  text-overflow: ellipsis;
-  width: 100px;
-  white-space: nowrap;
-  background: transparent;
-  font-family: var(--fonts-regular);
-  font-size: 1em;
-  padding: 0.4em 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
-}
-
-/* Category Result */
-.ui.category.search > .results .category .results {
-  display: table-cell;
-  background: #FFFFFF;
-  border-left: 1px solid rgba(34, 36, 38, 0.15);
-  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
-}
-.ui.category.search > .results .category .result {
-  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
-  transition: background 0.1s ease, border-color 0.1s ease;
-  padding: 0.85714286em 1.14285714em;
-}
-
-
-/*******************************
-           Variations
-*******************************/
-
-
-/*-------------------
-       Scrolling
-  --------------------*/
-
-.ui.scrolling.search > .results,
-.ui.search.long > .results,
-.ui.search.short > .results {
-  overflow-x: hidden;
-  overflow-y: auto;
-  backface-visibility: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.scrolling.search > .results {
-    max-height: 12.17714286em;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.scrolling.search > .results {
-    max-height: 18.26571429em;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.scrolling.search > .results {
-    max-height: 24.35428571em;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.scrolling.search > .results {
-    max-height: 36.53142857em;
-  }
-}
-@media only screen and (max-width: 767.98px) {
-  .ui.search.short > .results {
-    max-height: 12.17714286em;
-  }
-  .ui.search[class*="very short"] > .results {
-    max-height: 9.13285714em;
-  }
-  .ui.search.long > .results {
-    max-height: 24.35428571em;
-  }
-  .ui.search[class*="very long"] > .results {
-    max-height: 36.53142857em;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .ui.search.short > .results {
-    max-height: 18.26571429em;
-  }
-  .ui.search[class*="very short"] > .results {
-    max-height: 13.69928571em;
-  }
-  .ui.search.long > .results {
-    max-height: 36.53142857em;
-  }
-  .ui.search[class*="very long"] > .results {
-    max-height: 54.79714286em;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .ui.search.short > .results {
-    max-height: 24.35428571em;
-  }
-  .ui.search[class*="very short"] > .results {
-    max-height: 18.26571429em;
-  }
-  .ui.search.long > .results {
-    max-height: 48.70857143em;
-  }
-  .ui.search[class*="very long"] > .results {
-    max-height: 73.06285714em;
-  }
-}
-@media only screen and (min-width: 1920px) {
-  .ui.search.short > .results {
-    max-height: 36.53142857em;
-  }
-  .ui.search[class*="very short"] > .results {
-    max-height: 27.39857143em;
-  }
-  .ui.search.long > .results {
-    max-height: 73.06285714em;
-  }
-  .ui.search[class*="very long"] > .results {
-    max-height: 109.59428571em;
-  }
-}
-
-/*-------------------
-       Left / Right
-  --------------------*/
-
-.ui[class*="left aligned"].search > .results {
-  right: auto;
-  left: 0;
-}
-.ui[class*="right aligned"].search > .results {
-  right: 0;
-  left: auto;
-}
-
-/*--------------
-    Fluid
----------------*/
-
-.ui.fluid.search .results {
-  width: 100%;
-}
-
-/*--------------
-      Sizes
----------------*/
-
-.ui.search {
-  font-size: 1em;
-}
-.ui.mini.search {
-  font-size: 0.78571429em;
-}
-.ui.tiny.search {
-  font-size: 0.85714286em;
-}
-.ui.small.search {
-  font-size: 0.92857143em;
-}
-.ui.large.search {
-  font-size: 1.14285714em;
-}
-.ui.big.search {
-  font-size: 1.28571429em;
-}
-.ui.huge.search {
-  font-size: 1.42857143em;
-}
-.ui.massive.search {
-  font-size: 1.71428571em;
-}
-
-/*--------------
-      Mobile
----------------*/
-
-@media only screen and (max-width: 767.98px) {
-  .ui.search .results {
-    max-width: calc(100vw - 2rem);
-  }
-}
-
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-
-
-/*******************************
-         Site Overrides
-*******************************/
-
diff --git a/web_src/fomantic/build/fomantic.css b/web_src/fomantic/build/fomantic.css
deleted file mode 100644
index 9b5f654a8e..0000000000
--- a/web_src/fomantic/build/fomantic.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "./components/modal.css";
-@import "./components/search.css";
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index e135528f8f..8a59dd1683 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -22,8 +22,6 @@
   "admin": false,
   "components": [
     "api",
-    "modal",
-    "search",
     "tab"
   ]
 }
diff --git a/webpack.config.ts b/webpack.config.ts
index ef08239354..e3ef996909 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -66,7 +66,6 @@ export default {
   entry: {
     index: [
       fileURLToPath(new URL('web_src/js/index.ts', import.meta.url)),
-      fileURLToPath(new URL('web_src/fomantic/build/fomantic.css', import.meta.url)),
       fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
     ],
     swagger: [