diff --git a/hwe/scss/bootstrap5.scss b/hwe/scss/bootstrap5.scss
index c01a14db..e7b4bb2f 100644
--- a/hwe/scss/bootstrap5.scss
+++ b/hwe/scss/bootstrap5.scss
@@ -9,7 +9,7 @@ $input-color: #303030;
 
 @import "./variables.scss";
 @import "./bootswatch_custom_variables.scss";
-@import "../../node_modules/bootstrap5/scss/bootstrap.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap.scss";
 @import "./bootswatch_custom.scss";
 @import "./bootstrap_sammo.scss";
 @import "./vue-multiselect.scss";
\ No newline at end of file
diff --git a/hwe/ts/@types/bootstrap.d.ts b/hwe/ts/@types/bootstrap.d.ts
deleted file mode 100644
index 4318b6df..00000000
--- a/hwe/ts/@types/bootstrap.d.ts
+++ /dev/null
@@ -1,663 +0,0 @@
-// Type definitions for Bootstrap 4.6
-// Project: https://github.com/twbs/bootstrap/, https://getbootstrap.com
-// Definitions by: denisname <https://github.com/denisname>
-//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
-
-/// <reference types="jquery"/>
-
-import * as Popper from "popper.js";
-
-export as namespace Bootstrap;
-
-// --------------------------------------------------------------------------
-// Some Types and Interfaces
-// --------------------------------------------------------------------------
-
-export type Placement = "auto" | "top" | "bottom" | "left" | "right";
-
-export type Trigger = "click" | "hover" | "focus" | "manual" |
-    "click hover" | "click focus" | "hover focus" |
-    "click hover focus";
-
-export interface Delay {
-    show: number;
-    hide: number;
-}
-
-export interface TooltipInstance<T extends TooltipOption> {
-    config: T;
-    element: Element;
-    tip: HTMLElement;
-}
-
-export interface OffsetsExtend {
-    popper?: Partial<Popper.Offset> | undefined;
-    reference?: Partial<Popper.Offset> | undefined;
-}
-
-// --------------------------------------------------------------------------------------
-// Options Interfaces
-// --------------------------------------------------------------------------------------
-
-export interface CarouselOption {
-    /**
-     * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
-     *
-     * @default 5000
-     */
-    interval?: false | number | undefined;
-
-    /**
-     * Whether the carousel should react to keyboard events.
-     *
-     * @default true
-     */
-    keyboard?: boolean | undefined;
-
-    /**
-     * Use to easily control the position of the carousel. It accepts the keywords prev or next, which alters the slide position
-     * relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel.
-     *
-     * @default false
-     */
-    slide?: "next" | "prev" | false | undefined;
-
-    /**
-     * If set to "hover", pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`.
-     * If set to false, hovering over the carousel won't pause it.
-     *
-     * On touch-enabled devices, when set to "hover", cycling will pause on `touchend` (once the user finished interacting with the carousel)
-     * for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
-     *
-     * @default "hover"
-     */
-    pause?: "hover" | false | undefined;
-
-    /**
-     * Autoplays the carousel after the user manually cycles the first item.
-     * If `carousel`, autoplays the carousel on load.
-     * @default false
-     */
-    ride?: 'carousel' | boolean | undefined;
-
-    /**
-     * Whether the carousel should cycle continuously or have hard stops.
-     *
-     * @default true
-     */
-    wrap?: boolean | undefined;
-
-    /**
-     * Whether the carousel should support left/right swipe interactions on touchscreen devices.
-     *
-     * @default true
-     */
-    touch?: boolean | undefined;
-}
-
-export interface CollapseOption {
-    /**
-     * If parent is provided, then all collapsible elements under the specified parent will be closed when
-     * this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class).
-     * The attribute has to be set on the target collapsible area.
-     *
-     * @default ""
-     */
-    parent?: string | JQuery | Element | undefined;
-
-    /**
-     * Toggles the collapsible element on invocation.
-     *
-     * @default true
-     */
-    toggle?: boolean | undefined;
-}
-
-export interface DropdownOption {
-    /**
-     * Offset of the dropdown relative to its target.
-     * For more information refer to Popper.js's offset docs.
-     *
-     * @default 0
-     */
-    offset?: number | string | ((this: DropdownOption, offset: OffsetsExtend) => OffsetsExtend) | undefined;
-
-    /**
-     * Allow Dropdown to flip in case of an overlapping on the reference element.
-     * For more information refer to Popper.js's flip docs.
-     *
-     * @default true
-     */
-    flip?: boolean | undefined;
-
-    /**
-     * Overflow constraint boundary of the dropdown menu.
-     * Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only).
-     * For more information refer to Popper.js's preventOverflow docs.
-     *
-     * @default "scrollParent"
-     */
-    boundary?: Popper.Boundary | HTMLElement | undefined;
-
-    /**
-     * Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference.
-     * For more information refer to Popper.js's referenceObject docs.
-     *
-     * @default "toggle"
-     */
-    reference?: "toggle" | "parent" | HTMLElement | undefined;
-
-    /**
-     * By default, we use Popper.js for dynamic positioning. Disable this with 'static'.
-     *
-     * @default "dynamic"
-     */
-    display?: "dynamic" | "static" | undefined;
-}
-
-export interface ModalOption {
-    /**
-     * Includes a modal-backdrop element.
-     * Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
-     *
-     * @default true
-     */
-    backdrop?: boolean | "static" | undefined;
-
-    /**
-     * Closes the modal when escape key is pressed.
-     *
-     * @default true
-     */
-    keyboard?: boolean | undefined;
-
-    /**
-     * Puts the focus on the modal when initialized.
-     *
-     * @default true
-     */
-    focus?: boolean | undefined;
-
-    /**
-     * Shows the modal when initialized.
-     *
-     * @default true
-     */
-    show?: boolean | undefined;
-}
-
-export interface PopoverOption extends TooltipOption {
-    /**
-     * Default content value if `data-content` attribute isn't present.
-     * If a function is given, it will be called with its `this` reference
-     * set to the element that the popover is attached to.
-     *
-     * @default ""
-     */
-    content?: string | Element | ((this: Element) => string | Element) | undefined;
-}
-
-export interface ScrollspyOption {
-    /**
-     * Finds which section the spied element is in:
-     * * `auto` will choose the best method get scroll coordinates.
-     * * `offset` will use jQuery offset method to get scroll coordinates.
-     * * `position` will use jQuery position method to get scroll coordinates.
-     *
-     * @default "auto"
-     */
-    method?: "auto" | "offset" | "position" | undefined;
-
-    /**
-     * Pixels to offset from top when calculating position of scroll.
-     *
-     * @default 10
-     */
-    offset?: number | undefined;
-
-    /**
-     * A selector of the parent element or the parent element itself
-     * of any Bootstrap `.nav` or `.list-group` component.
-     *
-     * @default ""
-     */
-    target?: string | JQuery<Element> | Element | undefined;
-}
-
-export interface ToastOption {
-    /**
-     * Apply a CSS fade transition to the toast.
-     *
-     * @default true
-     */
-    animation?: boolean | undefined;
-
-    /**
-     * Auto hide the toast.
-     *
-     * @default true
-     */
-    autohide?: boolean | undefined;
-
-    /**
-     * Delay hiding the toast in millisecond.
-     *
-     * @default 500
-     */
-    delay?: number | undefined;
-}
-
-export interface TooltipOption {
-    /**
-     * Apply a CSS fade transition to the tooltip or popover.
-     *
-     * @default true
-     */
-    animation?: boolean | undefined;
-
-    /**
-     * Appends the tooltip or popover to a specific element. Example: `container: 'body'`.
-     * This option is particularly useful in that it allows you to position the tooltip or popover
-     * in the flow of the document near the triggering element - which will prevent
-     * it from floating away from the triggering element during a window resize.
-     *
-     * @default false
-     */
-    container?: string | Element | false | undefined;
-
-    /**
-     * Delay showing and hiding the tooltip or popover (ms) - does not apply to manual trigger type.
-     * If a number is supplied, delay is applied to both hide/show.
-     * Object structure is: `delay: { "show": 500, "hide": 100 }`.
-     *
-     * @default 0
-     */
-    delay?: number | Delay | undefined;
-
-    /**
-     * Allow HTML in the tooltip or popover.
-     * If true, HTML tags will be rendered in the tooltip or popover.
-     * If false, jQuery's text method will be used to insert content into the DOM.
-     * Use text if you're worried about XSS attacks.
-     *
-     * @default false
-     */
-    html?: boolean | undefined;
-
-    /**
-     * How to position the tooltip or popover - auto | top | bottom | left | right.
-     * When "auto" is specified, it will dynamically reorient the tooltip or popover.
-     *
-     * When a function is used to determine the placement, it is called with
-     * the tooltip or popover DOM node as its first argument and the triggering element DOM node as its second.
-     * The `this` context is set to the tooltip or popover instance.
-     *
-     * @default tooltip: "top", popover: "right"
-     */
-    placement?: Placement | ((this: TooltipInstance<this>, node: HTMLElement, trigger: Element) => Placement) | undefined;
-
-    /**
-     * If a selector is provided, tooltip or popover objects will be delegated to the specified targets.
-     * In practice, this is used to enable dynamic HTML content to have popovers added.
-     *
-     * @default false
-     */
-    selector?: string | false | undefined;
-
-    /**
-     * Base HTML to use when creating the tooltip or popover.
-     * The tooltip's (resp., popover's) title will be injected into the `.tooltip-inner` (resp., `.popover-header`).
-     * The `.arrow` will become the tooltip's (resp., popover's) arrow.
-     * The outermost wrapper element should have the `.tooltip` (resp., .popover) class and `role="tooltip"`.
-     *
-     * @default '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
-     * @default '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
-     */
-    template?: string | undefined;
-
-    /**
-     * Default title value if title attribute isn't present.
-     * If a function is given, it will be called with its `this` reference set to the element
-     * that the tooltip or popover is attached to.
-     *
-     * @default ""
-     */
-    title?: string | Element | ((this: Element) => string | Element) | undefined;
-
-    /**
-     * How tooltip or popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
-     * 'manual' indicates that the tooltip will be triggered programmatically; this value cannot be combined with any other trigger.
-     * 'hover' should only be used if alternative methods for conveying the same information for keyboard users is present.
-     *
-     * @default tooltip: "hover focus", popover: "click"
-     */
-    trigger?: Trigger | undefined;
-
-    /**
-     * Offset of the tooltip or popover relative to its target.
-     * For more information refer to Popper.js's offset docs.
-     *
-     * @default 0
-     */
-    offset?: number | string | undefined;
-
-    /**
-     * Allow to specify which position Popper will use on fallback.
-     * For more information refer to Popper.js's behavior docs.
-     *
-     * @default "flip"
-     */
-    fallbackPlacement?: Popper.Behavior | ReadonlyArray<Popper.Behavior> | undefined;
-
-    /**
-     * Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template.
-     * To add multiple classes, separate them with spaces: 'a b'.
-     * You can also pass a function that should return a single string containing additional class names.
-     * @default ''
-     */
-    customClass?: string | (() => string) | undefined;
-
-    /**
-     * Overflow constraint boundary of the tooltip or popover.
-     * Accepts the values of 'viewport', 'window', 'scrollParent',
-     * or an HTMLElement reference (JavaScript only).
-     * For more information refer to Popper.js's preventOverflow docs.
-     *
-     * @default "scrollParent"
-     */
-    boundary?: Popper.Boundary | HTMLElement | undefined;
-
-    /**
-     * Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
-     *
-     * @default true
-     */
-    sanitize?: boolean | undefined;
-
-    /**
-     * Object which contains allowed attributes and tags.
-     */
-    whiteList?: {[key: string]: string[]} | undefined;
-
-    /**
-     * Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
-     *
-     * @default null
-     */
-    sanitizeFn?: null | ((input: string) => string) | undefined;
-
-    /**
-     * To change Bootstrap's default Popper.js config,
-     * see {@link https://popper.js.org/docs/v1/ Popper.js's configuration}
-     */
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    popperConfig?: null | object | undefined;
-}
-
-// --------------------------------------------------------------------------------------
-// Events
-// --------------------------------------------------------------------------------------
-
-export interface CarouselEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
-    /**
-     * The carousel dom element.
-     */
-    target: HTMLElement; // overridden only for better JsDoc
-
-    /**
-     * The direction in which the carousel is sliding.
-     */
-    direction: "left" | "right";
-
-    /**
-     * The DOM element that is being slid into place as the active item.
-     */
-    relatedTarget: HTMLElement;
-
-    /**
-     * The index of the current item.
-     */
-    from: number;
-
-    /**
-     * The index of the next item.
-     */
-    to: number;
-}
-
-export interface DropdownsEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
-    /**
-     * The the dropdown's toggle and the dropdown menu container (the `.dropdown` element).
-     */
-    target: HTMLElement; // overridden only for better JsDoc
-
-    /**
-     * The toggling anchor element.
-     */
-    relatedTarget: HTMLElement;
-}
-
-export interface ModalEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
-    /**
-     * The modal dom element.
-     */
-    target: HTMLElement; // overridden only for better JsDoc
-
-    /**
-     * For `show.bs.modal` and `shown.bs.modal` is the clicked element, when caused by a _click_.
-     * Otherwise is undefined.
-     */
-    relatedTarget: HTMLElement | undefined;
-}
-
-export interface TapEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
-    /**
-     * * For `show.bs.tab` and `shown.bs.tab`, is the newly activated tab.
-     * * For `hide.bs.tab`, is the current active tab.
-     * * For `hidden.bs.tab`, is the previous active tab.
-     */
-    target: HTMLElement; // overridden only for better JsDoc
-
-    /**
-     * * For `show.bs.tab` and `shown.bs.tab`, is the previous active tab.
-     * * For `hide.bs.tab`, is the new soon-to-be-active tab.
-     * * For `hidden.bs.tab`, is the new active tab.
-     */
-    relatedTarget: HTMLElement;
-}
-
-export type AlertEvent = "close.bs.alert" | "closed.bs.alert";
-export type CarouselEvent = "slide.bs.carousel" | "slid.bs.carousel";
-export type CollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse";
-export type DropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown";
-export type ModalEvent = "show.bs.modal" | "shown.bs.modal" | "hide.bs.modal" | "hidden.bs.modal" | "hidePrevented.bs.modal";
-export type PopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover";
-export type ScrollspyEvent = "activate.bs.scrollspy";
-export type TapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab";
-export type ToastEvent = "show.bs.toast" | "shown.bs.toast" | "hide.bs.toast" | "hidden.bs.toast";
-export type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip";
-
-// --------------------------------------------------------------------------------------
-// jQuery
-// --------------------------------------------------------------------------------------
-
-declare global {
-    interface JQuery<TElement = HTMLElement> {
-        /**
-         * If no _method_ is specified, makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute.
-         * (Not necessary when using the data-api's auto-initialization.)
-         * Otherwise, call the method on the alert element:
-         * * `close` – Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed.
-         * * `dispose` – Destroys an element's alert.
-         */
-        alert(action?: "close" | "dispose"): this;
-
-        /**
-         * Call a method on the button element:
-         * * `toggle` – Toggles push state. Gives the button the appearance that it has been activated.
-         * * `dispose` – Destroys an element's button.
-         */
-        button(action: "toggle" | "dispose"): this;
-
-        /**
-         * Call a method on the carousel element:
-         * * `cycle` – Cycles through the carousel items from left to right.
-         * * `pause` – Stops the carousel from cycling through items.
-         * * _number_ – Cycles the carousel to a particular frame (0 based, similar to an array).
-         * * `prev` – Cycles to the previous item.
-         * * `next` – Cycles to the next item.
-         * * `dispose` – Destroys an element's carousel.
-         *
-         * Returns to the caller before the target item has been shown (i.e. before the `slid.bs.carousel` event occurs).
-         */
-        carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this;
-        /**
-         * Initializes the carousel and starts cycling through items.
-         */
-        carousel(options?: CarouselOption): this;
-
-        /**
-         * Call a method on the collapsible element:
-         * * `toggle` – Toggles a collapsible element to shown or hidden.
-         * * `show` – Shows a collapsible element.
-         * * `hide` – Hides a collapsible element.
-         * * `dispose` – Destroys an element's collapse.
-         *
-         * Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
-         */
-        collapse(action: "toggle" | "show" | "hide" | "dispose"): this;
-        /**
-         * Activates a content as a collapsible element.
-         */
-        collapse(options?: CollapseOption): this;
-
-        /**
-         * Call a method on the dropdown element:
-         * * `toggle` – Toggles the dropdown menu of a given navbar or tabbed navigation.
-         * * `show` – Shows the dropdown menu of a given navbar or tabbed navigation.
-         * * `hide` – Hides the dropdown menu of a given navbar or tabbed navigation.
-         * * `update` – Updates the position of an element's dropdown.
-         * * `dispose` – Destroys an element's dropdown.
-         */
-        dropdown(action: "toggle" | "show" | "hide" | "update" | "dispose"): this;
-        /**
-         * Toggle contextual overlays for displaying lists of links.
-         *
-         * The data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-         */
-        dropdown(options?: DropdownOption): this;
-
-        /**
-         * Call a method on the modal element:
-         * * `toggle` – Manually toggles a modal.
-         * * `show` – Manually opens a modal.
-         * * `hide` – Manually hides a modal.
-         * * `handleUpdate` – Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
-         * * `dispose` – Destroys an element's modal.
-         *
-         * Returns to the caller before the modal has actually been shown or hidden (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
-         */
-        modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this;
-        /**
-         * Activates a content as a modal.
-         */
-        modal(options?: ModalOption): this;
-
-        /**
-         * Call a method on the popover element:
-         * * `show` – Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
-         * * `hide` – Hides an element's popover.
-         * * `toggle` – Toggles an element's popover.
-         * * `dispose` – Hides and destroys an element's popover.
-         * Popovers that use delegation (which are created using the `selector` option) cannot be individually destroyed on descendant trigger elements.
-         * * `enable` – Gives an element's popover the ability to be shown. Popovers are enabled by default.
-         * * `disable` – Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-         * * `toggleEnabled` – Toggles the ability for an element's popover to be shown or hidden.
-         * * `update` – Updates the position of an element's popover.
-         *
-         * Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs).
-         * This is considered a "manual" triggering of the popover.
-         */
-        popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
-        /**
-         * Initializes popovers for an element collection.
-         */
-        popover(options?: PopoverOption): this;
-
-// tslint:disable:jsdoc-format
-        /**
-         * Call a method on the scrollspy element:
-         * * `refresh` – When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh, see example.
-         * * `dispose` – Destroys an element's scrollspy.
-         *
-         * @example
-```javascript
-$('[data-spy="scroll"]').each(function () {
-   var $spy = $(this).scrollspy('refresh')
-})
-```
-         */
-// tslint:enable:jsdoc-format
-        scrollspy(action: "refresh" | "dispose"): this;
-        /**
-         * Add scrollspy behavior to a topbar navigation.
-         */
-        scrollspy(options?: ScrollspyOption): this;
-
-        /**
-         * Call a method on the list item or tab element:
-         * * `show` – Selects the given list item or tab and shows its associated pane.
-         * Any other list item or tab that was previously selected becomes unselected and its associated pane is hidden.
-         * * `dispose` – Destroys an element's tab.
-         *
-         * Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs).
-         */
-        tab(action: "show" | "dispose"): this;
-
-        /**
-         * Call a method on the toast element:
-         * * `show` – Reveals an element's toast. You have to manually call this method, instead your toast won't show.
-         * * `hide` – Hides an element's toast. You have to manually call this method if you made `autohide` to false.
-         * * `dispose` – Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-         *
-         * Returns to the caller before the toast has actually been shown or hidden (i.e. before the `shown.bs.toast` or `hidden.bs.toast` event occurs).
-         */
-        toast(action: "show" | "hide" | "dispose"): this;
-        /**
-         * Attaches a toast handler to an element collection.
-         */
-        toast(options?: ToastOption): this;
-
-        /**
-         * Call a method on the tooltip element:
-         * * `show` – Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
-         * * `hide` – Hides an element's tooltip.
-         * * `toggle` – Toggles an element's tooltip.
-         * * `dispose` – Hides and destroys an element's tooltip.
-         * Tooltips that use delegation (which are created using `selector` option) cannot be individually destroyed on descendant trigger elements.
-         * * `enable` – Gives an element's tooltip the ability to be shown. Tooltips are enabled by default.
-         * * `disable` – Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
-         * * `toggleEnabled` – Toggles the ability for an element's tooltip to be shown or hidden.
-         * * `update` – Updates the position of an element's tooltip.
-         *
-         * Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs).
-         * This is considered a "manual" triggering of the tooltip.
-         */
-        tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
-        /**
-         * Attaches a tooltip handler to an element collection.
-         */
-        tooltip(options?: TooltipOption): this;
-
-        on(events: CarouselEvent, handler: JQuery.EventHandlerBase<TElement, CarouselEventHandler<TElement>>): this;
-        on(events: DropdownEvent, handler: JQuery.EventHandlerBase<TElement, DropdownsEventHandler<TElement>>): this;
-        on(events: ModalEvent, handler: JQuery.EventHandlerBase<TElement, ModalEventHandler<TElement>>): this;
-        on(events: TapEvent, handler: JQuery.EventHandlerBase<TElement, TapEventHandler<TElement>>): this;
-        on(
-            events: AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | ToastEvent | TooltipEvent,
-            handler: JQuery.EventHandler<TElement>
-        ): this;
-    }
-}
\ No newline at end of file
diff --git a/hwe/ts/ReservedCommand.vue b/hwe/ts/ReservedCommand.vue
index 00dcabcb..6f8a0a86 100644
--- a/hwe/ts/ReservedCommand.vue
+++ b/hwe/ts/ReservedCommand.vue
@@ -550,7 +550,7 @@ export default defineComponent({
 @import "../scss/break_500px.scss";
 @import "../scss/variables.scss";
 @import "../scss/bootswatch_custom_variables.scss";
-@import "../../node_modules/bootstrap5/scss/bootstrap-utilities.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
 
 .commandPad {
   background-color: $gray-900;
diff --git a/hwe/ts/battle_simulator.ts b/hwe/ts/battle_simulator.ts
index 3b26abd4..78e094ff 100644
--- a/hwe/ts/battle_simulator.ts
+++ b/hwe/ts/battle_simulator.ts
@@ -1,7 +1,4 @@
-import { exportWindow } from './util/exportWindow';
 import $ from 'jquery';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import download from 'downloadjs';
 import { unwrap } from "./util/unwrap";
diff --git a/hwe/ts/bossInfo.ts b/hwe/ts/bossInfo.ts
index 58c5d8aa..b4f5fdd7 100644
--- a/hwe/ts/bossInfo.ts
+++ b/hwe/ts/bossInfo.ts
@@ -1,12 +1,9 @@
-import { exportWindow } from './util/exportWindow';
 import $ from 'jquery';
 import axios from 'axios';
 import { convertFormData } from './util/convertFormData';
 import { InvalidResponse } from './defs';
 import { unwrap_any } from './util/unwrap_any';
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 
diff --git a/hwe/ts/common_deprecated.ts b/hwe/ts/common_deprecated.ts
index 35852e94..308640b3 100644
--- a/hwe/ts/common_deprecated.ts
+++ b/hwe/ts/common_deprecated.ts
@@ -7,8 +7,6 @@ import { TemplateEngine } from "./util/TemplateEngine";
 import { escapeHtml } from "./legacy/escapeHtml";
 import { nl2br } from "./util/nl2br";
 import jQuery from "jquery";
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 
 import "../scss/common_legacy.scss";
diff --git a/hwe/ts/common_legacy.ts b/hwe/ts/common_legacy.ts
index 35a2d316..2fb29433 100644
--- a/hwe/ts/common_legacy.ts
+++ b/hwe/ts/common_legacy.ts
@@ -1,5 +1,6 @@
 import $ from "jquery";
 import axios from "axios";
+import { Tooltip } from "bootstrap";
 
 /**
  * object의 array를 id를 key로 삼는 object로 재 변환
@@ -185,15 +186,16 @@ export function initTooltip($obj?: JQuery<HTMLElement>): void {
             if (!tooltipClassText) {
                 tooltipClassText = '';
             }
-            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`;
+            const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`;
 
-            $objTooltip.tooltip({
-                title: function () {
+            const oTooltip = new Tooltip(this, {
+                title: function(){
                     return $.trim($(this).find('.tooltiptext').html());
                 },
                 template: template,
                 html: true
-            }).tooltip('show');
+            });
+            oTooltip.show();
 
             $objTooltip.data('setObjTooltip', true);
         });
diff --git a/hwe/ts/currentCity.ts b/hwe/ts/currentCity.ts
index 56b513ba..d5dbdc1d 100644
--- a/hwe/ts/currentCity.ts
+++ b/hwe/ts/currentCity.ts
@@ -1,7 +1,4 @@
 import $ from 'jquery';
-import { exportWindow } from './util/exportWindow';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 
diff --git a/hwe/ts/dipcenter.ts b/hwe/ts/dipcenter.ts
index f3ccbccf..eb41af99 100644
--- a/hwe/ts/dipcenter.ts
+++ b/hwe/ts/dipcenter.ts
@@ -1,6 +1,4 @@
 import $ from 'jquery';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import 'summernote/dist/summernote-bs4';
 import 'summernote/dist/summernote-bs4.css';
@@ -8,7 +6,6 @@ import './summernote-image-flip';
 import './summernote-ko-KR';
 import { activateFlip } from './common_legacy';
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { exportWindow } from './util/exportWindow';
 
 declare const editable: boolean;
 
diff --git a/hwe/ts/diplomacy.ts b/hwe/ts/diplomacy.ts
index 160be3d3..ba002156 100644
--- a/hwe/ts/diplomacy.ts
+++ b/hwe/ts/diplomacy.ts
@@ -9,9 +9,6 @@ import { InvalidResponse, NationStaticItem } from './defs';
 import { escapeHtml } from './legacy/escapeHtml';
 import { nl2br } from './util/nl2br';
 import { unwrap } from './util/unwrap';
-import { exportWindow } from './util/exportWindow';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 import { LoadingData } from 'select2';
diff --git a/hwe/ts/gateway/admin_member.ts b/hwe/ts/gateway/admin_member.ts
index bb5847ce..ba74ecf4 100644
--- a/hwe/ts/gateway/admin_member.ts
+++ b/hwe/ts/gateway/admin_member.ts
@@ -1,7 +1,5 @@
 import axios from 'axios';
 import $ from 'jquery';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import { isNumber } from 'lodash';
 import { TemplateEngine } from '../util/TemplateEngine';
 import { InvalidResponse } from '../defs';
diff --git a/hwe/ts/gateway/entrance.ts b/hwe/ts/gateway/entrance.ts
index 753e9f45..e36b17f9 100644
--- a/hwe/ts/gateway/entrance.ts
+++ b/hwe/ts/gateway/entrance.ts
@@ -1,8 +1,6 @@
 import { exportWindow } from '../util/exportWindow';
 import $ from 'jquery';
 exportWindow($, '$');
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import axios from 'axios';
 import 'bootstrap';
 import { initTooltip } from '../common_legacy';
diff --git a/hwe/ts/gateway/login.ts b/hwe/ts/gateway/login.ts
index 8112cecc..e50fa74e 100644
--- a/hwe/ts/gateway/login.ts
+++ b/hwe/ts/gateway/login.ts
@@ -1,7 +1,4 @@
 import $ from 'jquery';
-import 'popper.js';
-import Popper from 'popper.js';
-(window as unknown as { Popper: unknown }).Popper = Popper;
 import 'bootstrap';
 import { JQValidateForm, NamedRules } from '../util/jqValidateForm';
 import axios from 'axios';
@@ -11,7 +8,6 @@ import { unwrap_any } from '../util/unwrap_any';
 import { sha512 } from 'js-sha512';
 import { unwrap } from '../util/unwrap';
 import { InvalidResponse } from '../defs';
-import internal from 'stream';
 import { delay } from '../util/delay';
 
 type LoginResponse = {
diff --git a/hwe/ts/gateway/user_info.ts b/hwe/ts/gateway/user_info.ts
index 0a4d98f0..ecf4aa9e 100644
--- a/hwe/ts/gateway/user_info.ts
+++ b/hwe/ts/gateway/user_info.ts
@@ -1,7 +1,5 @@
 import { setAxiosXMLHttpRequest } from "../util/setAxiosXMLHttpRequest";
 import $ from 'jquery';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import axios from 'axios';
 import { subDays } from 'date-fns';
@@ -12,7 +10,6 @@ import { InvalidResponse } from "../defs";
 import { unwrap } from "../util/unwrap";
 import { parseTime } from "../util/parseTime";
 import { formatTime } from "../util/formatTime";
-import { exportWindow } from "../util/exportWindow";
 
 type ResultUserInfo = {
     result: true,
diff --git a/hwe/ts/hallOfFame.ts b/hwe/ts/hallOfFame.ts
index 07839a02..78961dbf 100644
--- a/hwe/ts/hallOfFame.ts
+++ b/hwe/ts/hallOfFame.ts
@@ -1,10 +1,7 @@
 import $ from 'jquery';
 import { stringifyUrl } from 'query-string';
 import { initTooltip } from './common_legacy';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');
 import 'bootstrap';
-import { exportWindow } from './util/exportWindow';
 
 $(function ($) {
     $('#by_scenario').on('change', function (e) {
diff --git a/hwe/ts/install.ts b/hwe/ts/install.ts
index a45502ac..d3224d78 100644
--- a/hwe/ts/install.ts
+++ b/hwe/ts/install.ts
@@ -1,6 +1,4 @@
 import $ from "jquery";
-import Popper from 'popper.js';
-(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { setAxiosXMLHttpRequest } from "./util/setAxiosXMLHttpRequest";
 import axios from "axios";
diff --git a/hwe/ts/main.ts b/hwe/ts/main.ts
index 9377d259..8a87ca09 100644
--- a/hwe/ts/main.ts
+++ b/hwe/ts/main.ts
@@ -1,6 +1,4 @@
 import $ from 'jquery';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { activateFlip, initTooltip } from './common_legacy';
 import './msg.ts';
diff --git a/hwe/ts/processing.ts b/hwe/ts/processing.ts
index a5b557d3..9c72dfb2 100644
--- a/hwe/ts/processing.ts
+++ b/hwe/ts/processing.ts
@@ -2,8 +2,6 @@ import $ from 'jquery';
 exportWindow($, '$');
 import { exportWindow } from './util/exportWindow';
 import axios from 'axios';
-import Popper from 'popper.js';
-exportWindow(Popper, 'Popper');
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
diff --git a/hwe/ts/recent_map.ts b/hwe/ts/recent_map.ts
index 7e449e2c..94b9623c 100644
--- a/hwe/ts/recent_map.ts
+++ b/hwe/ts/recent_map.ts
@@ -1,6 +1,4 @@
 import $ from 'jquery';
-import Popper from 'popper.js';
-(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
 import { reloadWorldMap } from './map';
 
diff --git a/hwe/ts/select_general_from_pool.ts b/hwe/ts/select_general_from_pool.ts
index 9ac11ea7..e4384b8f 100644
--- a/hwe/ts/select_general_from_pool.ts
+++ b/hwe/ts/select_general_from_pool.ts
@@ -8,7 +8,8 @@ import { convertFormData } from './util/convertFormData';
 import { unwrap_any } from './util/unwrap_any';
 import { unwrap } from './util/unwrap';
 import { TemplateEngine } from './util/TemplateEngine';
-
+import { Tooltip } from 'bootstrap';
+import { trim } from 'lodash';
 type CardItem = {
     uniqueName: string,
 
@@ -233,11 +234,14 @@ function printGenerals(value: GeneralPoolResponse) {
 
         $('.card_holder').append($card);
         $card.find('.select_btn').on('click', pickGeneral);
-        $card.find('.obj_tooltip').tooltip({
-            title: function () {
-                return $.trim($(this).find('.tooltiptext').html());
-            },
-            html: true
+
+        $card.find('.obj_tooltip').each(function(){
+            new Tooltip(this, {
+                title: function () {
+                    return trim(this.querySelector('.tooltiptext')?.innerHTML);
+                },
+                html: true
+            })
         });
     }
 
diff --git a/hwe/ts/select_npc.ts b/hwe/ts/select_npc.ts
index f1b8e240..3452936b 100644
--- a/hwe/ts/select_npc.ts
+++ b/hwe/ts/select_npc.ts
@@ -6,6 +6,8 @@ import { GeneralListResponse, InvalidResponse } from './defs';
 import { convertFormData } from './util/convertFormData';
 import { unwrap_any } from './util/unwrap_any';
 import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { Tooltip } from 'bootstrap';
+import { trim } from 'lodash';
 
 setAxiosXMLHttpRequest();
 
@@ -250,11 +252,13 @@ function printGenerals(value: NPCToken) {
 
         $('.card_holder').append($card);
         $card.find('.select_btn').on('click', pickGeneral);
-        $card.find('.obj_tooltip').tooltip({
-            title: function () {
-                return $.trim($(this).find('.tooltiptext').html());
-            },
-            html: true
+        $card.find('.obj_tooltip').each(function(){
+            new Tooltip(this, {
+                title: function () {
+                    return trim(this.querySelector('.tooltiptext')?.innerHTML);
+                },
+                html: true
+            });
         });
     });
 
@@ -388,11 +392,13 @@ function _printGeneralList(clear?:boolean) {
         $('#row_print_more').hide();
     }
 
-    $generalTable.find('.obj_tooltip').tooltip({
-        title: function () {
-            return $.trim($(this).find('.tooltiptext').html());
-        },
-        html: true
+    $generalTable.find('.obj_tooltip').each(function(){
+        new Tooltip(this, {
+            title: function () {
+                return trim(this.querySelector('.tooltiptext')?.innerHTML);
+            },
+            html: true
+        })
     });
     $('#tb_general_list').show();
 }
diff --git a/package.json b/package.json
index 79aecc61..28f32552 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,10 @@
     "@types/select2": "^4.0.54",
     "@types/summernote": "^0.8.6",
     "async-validator": "^4.0.3",
-    "axios": "^0.21.4",
-    "bootstrap": "^4.6.0",
-    "bootstrap5": "npm:bootstrap@^5.1.3",
-    "core-js": "^3.17.3",
-    "date-fns": "^2.24.0",
+    "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
+    "core-js": "^3.19.3",
+    "date-fns": "^2.27.0",
     "downloadjs": "^1.4.7",
     "jquery": "^3.6.0",
     "js-sha512": "^0.8.0",
@@ -36,20 +35,20 @@
     "lodash": "^4.17.21",
     "query-string": "^7.0.1",
     "select2": "^4.0",
-    "summernote": "^0.8.18",
+    "summernote": "^0.8.20",
     "vue": "^3.2.2",
     "vue-multiselect": "^3.0.0-alpha.2",
-    "vue-types": "^4.1.0",
+    "vue-types": "^4.1.1",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.15.0",
-    "@coreui/vue": "^4.0.0-beta.2",
-    "@types/bootstrap": "^5.1.4",
-    "@types/jquery": "^3.5.6",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-typescript": "^7.16.0",
+    "@coreui/vue": "^4.1.1",
+    "@types/bootstrap": "^5.1.6",
+    "@types/jquery": "^3.5.10",
     "@types/lodash": "^4.14.173",
     "@types/node": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -58,7 +57,7 @@
     "@vue/eslint-config-typescript": "^7.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
-    "bootstrap-vue-3": "^0.0.5",
+    "bootstrap-vue-3": "^0.1.0",
     "bootswatch": "^5.1.3",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.2.0",
@@ -67,12 +66,12 @@
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.3.0",
     "pre-commit": "^1.2.2",
-    "sass": "^1.41.1",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
-    "typescript": "^4.4.3",
+    "sass": "^1.44.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.5.2",
     "url-loader": "^4.1.1",
-    "vue-eslint-parser": "^7.11.0",
+    "vue-eslint-parser": "^8.0.1",
     "vue-loader": "^16.5.0",
     "vue-style-loader": "^4.1.3",
     "webpack": "^5.53.0",