diff --git a/client_v2/src/components/ui/Card.css b/client_v2/src/components/ui/Card.css
deleted file mode 100644
index 5323c9a8..00000000
--- a/client_v2/src/components/ui/Card.css
+++ /dev/null
@@ -1,155 +0,0 @@
-.card-header {
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.6rem 1.5rem;
-    flex-shrink: 0;
-}
-
-.card-subtitle {
-    margin: 4px 0;
-    line-height: 1.4;
-}
-
-.card-table-overflow {
-    overflow-y: auto;
-    max-height: 100%;
-}
-
-.card-table-overflow--limited {
-    overflow-y: auto;
-    max-height: 17.5rem;
-}
-
-.dashboard .card-table {
-    overflow: hidden;
-}
-
-.dashboard .card-table-overflow--limited {
-    max-height: 292px;
-}
-
-.dashboard .ReactTable .rt-tr-group {
-    min-height: 52px;
-}
-
-.card-actions {
-    margin-top: 20px;
-}
-
-.card-actions-top {
-    margin-bottom: 20px;
-}
-
-.card-graph {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.card-body--status {
-    padding: 2.5rem 1.5rem;
-    text-align: center;
-}
-
-.card-body--loading {
-    position: relative;
-}
-
-.card-body--loading:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.6);
-}
-
-.card-body--loading:after {
-    content: '';
-    position: absolute;
-    z-index: 101;
-    left: 50%;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin-top: -20px;
-    margin-left: -20px;
-    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E');
-    will-change: transform;
-    animation: clockwise 2s linear infinite;
-}
-
-.card-title-stats {
-    font-size: 13px;
-    color: #9aa0ac;
-}
-
-.card-body-stats {
-    position: relative;
-    flex: 1 1 auto;
-    margin: 0;
-    padding: 1rem 1.5rem;
-}
-
-.card-value-stats {
-    display: block;
-    font-size: 2.1rem;
-    line-height: 2.7rem;
-    height: 2.7rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.card-value-percent {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    font-size: 0.9rem;
-    line-height: 1;
-    height: auto;
-}
-
-.card-value-percent:after {
-    content: '%';
-}
-
-.card--full {
-    height: calc(100% - 1.5rem);
-}
-
-.card-wrap {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-@media screen and (min-width: 1280px) {
-    .card-title-stats {
-        font-size: 14px;
-    }
-}
-
-@media (min-width: 992px) {
-    .dashboard .card:not(.card--full) {
-        height: 360px;
-    }
-}
-
-.card .logs__cell--red {
-    background-color: #fff4f2;
-}
-
-.card .logs__cell--green {
-    background-color: #f1faf3;
-}
-
-.card .logs__row--blue {
-    background-color: #ecf7ff;
-}
-
-[data-theme='dark'] .card .logs__row--blue {
-    background-color: var(--logs__row--blue-bgcolor);
-}
diff --git a/client_v2/src/components/ui/Card.tsx b/client_v2/src/components/ui/Card.tsx
deleted file mode 100644
index 27fcf9a1..00000000
--- a/client_v2/src/components/ui/Card.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import './Card.css';
-
-interface CardProps {
-    id?: string;
-    title?: string;
-    subtitle?: string;
-    bodyType?: string;
-    type?: string;
-    refresh?: React.ReactNode;
-    children: React.ReactNode;
-}
-
-const Card = ({ type, id, title, subtitle, refresh, bodyType, children }: CardProps) => (
-    <div className={type ? `card ${type}` : 'card'} id={id || ''}>
-        {(title || subtitle) && (
-            <div className="card-header with-border">
-                <div className="card-inner">
-                    {title && <div className="card-title">{title}</div>}
-
-                    {subtitle && <div className="card-subtitle" dangerouslySetInnerHTML={{ __html: subtitle }} />}
-                </div>
-
-                {refresh && <div className="card-options">{refresh}</div>}
-            </div>
-        )}
-
-        <div className={bodyType || 'card-body'}>{children}</div>
-    </div>
-);
-
-export default Card;
diff --git a/client_v2/src/components/ui/Controls/Checkbox/checkbox.css b/client_v2/src/components/ui/Controls/Checkbox/checkbox.css
deleted file mode 100644
index 40e35a08..00000000
--- a/client_v2/src/components/ui/Controls/Checkbox/checkbox.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.checkbox {
-    display: inline-block;
-    margin: 0;
-}
-
-.checkbox--single {
-    display: block;
-    margin: 2px auto 6px;
-}
-
-.checkbox--single .checkbox__label:before {
-    margin-right: 0;
-}
-
-.checkbox--settings .checkbox__label:before {
-    top: 2px;
-    margin-right: 20px;
-}
-
-.checkbox--settings .checkbox__label-title {
-    margin-bottom: 2px;
-    font-weight: 600;
-}
-
-.checkbox--form .checkbox__label:before {
-    top: 1px;
-    margin-right: 10px;
-}
-
-.checkbox__label {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 400;
-    user-select: none;
-    cursor: pointer;
-}
-
-.checkbox__label:before {
-    content: '';
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    vertical-align: middle;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    margin-right: 10px;
-    background-color: var(--checkbox-bg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 12px 10px;
-    border-radius: 3px;
-    transition:
-        0.3s ease-in-out box-shadow,
-        0.3s ease-in-out opacity;
-}
-
-.checkbox__label .checkbox__label-text {
-    line-height: 1.3;
-}
-
-.checkbox__label .checkbox__label-text .md__paragraph {
-    display: inline-block;
-    vertical-align: baseline;
-    margin: 0;
-    text-align: left;
-    line-height: 1.3;
-}
-
-.checkbox__input {
-    position: absolute;
-    opacity: 0;
-}
-
-.checkbox__input:checked + .checkbox__label:before {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
-}
-
-.checkbox__input:focus + .checkbox__label:before {
-    box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32);
-}
-
-.checkbox__input:disabled + .checkbox__label {
-    cursor: default;
-    color: var(--gray);
-}
-
-.checkbox__input:disabled + .checkbox__label:before {
-    opacity: 0.6;
-}
-
-.checkbox__label-text {
-    max-width: 515px;
-    line-height: 1.5;
-}
-
-.checkbox__label-text--long {
-    max-width: initial;
-}
-
-.checkbox__label-title {
-    display: block;
-    line-height: 1.5;
-}
-
-.checkbox__label-subtitle {
-    display: block;
-    line-height: 1.5;
-    color: var(--scolor);
-}
diff --git a/client_v2/src/components/ui/Controls/Checkbox/index.tsx b/client_v2/src/components/ui/Controls/Checkbox/index.tsx
deleted file mode 100644
index 09ed43fa..00000000
--- a/client_v2/src/components/ui/Controls/Checkbox/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-import clsx from 'clsx';
-
-import './checkbox.css';
-
-type Props = {
-    title: string;
-    subtitle?: ReactNode;
-    value: boolean;
-    name?: string;
-    disabled?: boolean;
-    className?: string;
-    error?: string;
-    onChange: (value: boolean) => void;
-    onBlur?: () => void;
-};
-
-export const Checkbox = forwardRef<HTMLInputElement, Props>(
-    (
-        { title, subtitle, value, name, disabled, error, className = 'checkbox--form', onChange, onBlur, ...rest },
-        ref,
-    ) => (
-        <>
-            <label className={clsx('checkbox', className)}>
-                <span className="checkbox__marker" />
-                <input
-                    name={name}
-                    type="checkbox"
-                    className="checkbox__input"
-                    disabled={disabled}
-                    checked={value}
-                    onChange={(e) => onChange(e.target.checked)}
-                    onBlur={onBlur}
-                    ref={ref}
-                    {...rest}
-                />
-                <span className="checkbox__label">
-                    <span className="checkbox__label-text checkbox__label-text--long">
-                        <span className="checkbox__label-title">{title}</span>
-
-                        {subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
-                    </span>
-                </span>
-            </label>
-            {error && <div className="form__message form__message--error">{error}</div>}
-        </>
-    ),
-);
-
-Checkbox.displayName = 'Checkbox';
diff --git a/client_v2/src/components/ui/Controls/Input.tsx b/client_v2/src/components/ui/Controls/Input.tsx
deleted file mode 100644
index becb7cbd..00000000
--- a/client_v2/src/components/ui/Controls/Input.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { ComponentProps, forwardRef, ReactNode } from 'react';
-import clsx from 'clsx';
-
-type Props = ComponentProps<'input'> & {
-    label?: string;
-    desc?: string;
-    leftAddon?: ReactNode;
-    rightAddon?: ReactNode;
-    error?: string;
-    trimOnBlur?: boolean;
-};
-
-export const Input = forwardRef<HTMLInputElement, Props>(
-    ({ name, label, desc, className, leftAddon, rightAddon, error, trimOnBlur, onBlur, ...rest }, ref) => (
-        <div className={clsx('form-group', { 'has-error': !!error })}>
-            {label && (
-                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
-                    {label}
-                </label>
-            )}
-            {desc && <div className="form__desc form__desc--top">{desc}</div>}
-            <div className="input-group">
-                {leftAddon && <div>{leftAddon}</div>}
-                <input
-                    className={clsx('form-control', { 'is-invalid': !!error }, className)}
-                    ref={ref}
-                    onBlur={(e) => {
-                        if (trimOnBlur) {
-                            e.target.value = e.target.value.trim();
-                            rest.onChange(e);
-                        }
-                        if (onBlur) {
-                            onBlur(e);
-                        }
-                    }}
-                    {...rest}
-                />
-                {rightAddon && <div>{rightAddon}</div>}
-            </div>
-            {error && <div className="form__message form__message--error mt-1">{error}</div>}
-        </div>
-    ),
-);
-
-Input.displayName = 'Input';
diff --git a/client_v2/src/components/ui/Controls/Select.tsx b/client_v2/src/components/ui/Controls/Select.tsx
deleted file mode 100644
index 18ee61c2..00000000
--- a/client_v2/src/components/ui/Controls/Select.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { ComponentProps, forwardRef } from 'react';
-import clsx from 'clsx';
-
-type SelectProps = ComponentProps<'select'> & {
-    label?: string;
-    error?: string;
-};
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-    ({ name, label, className, error, children, ...rest }, ref) => (
-        <div className={clsx('form-group', { 'has-error': !!error })}>
-            {label && (
-                <label className="form__label" htmlFor={name}>
-                    {label}
-                </label>
-            )}
-            <div className="input-group">
-                <select className={clsx('form-control custom-select', className)} ref={ref} {...rest}>
-                    {children}
-                </select>
-            </div>
-            {error && <div className="form__message form__message--error mt-1">{error}</div>}
-        </div>
-    ),
-);
-
-Select.displayName = 'Select';
diff --git a/client_v2/src/components/ui/Controls/Textarea.tsx b/client_v2/src/components/ui/Controls/Textarea.tsx
deleted file mode 100644
index 4c9dfe04..00000000
--- a/client_v2/src/components/ui/Controls/Textarea.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { ComponentProps, forwardRef } from 'react';
-import clsx from 'clsx';
-import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
-
-type Props = ComponentProps<'textarea'> & {
-    className?: string;
-    wrapperClassName?: string;
-    label?: string;
-    desc?: string;
-    error?: string;
-    trimOnBlur?: boolean;
-};
-
-export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
-    ({ name, label, desc, className, wrapperClassName, error, trimOnBlur, onBlur, ...rest }, ref) => (
-        <div className={clsx('form-group', wrapperClassName, { 'has-error': !!error })}>
-            {label && (
-                <label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
-                    {label}
-                </label>
-            )}
-            {desc && <div className="form__desc form__desc--top">{desc}</div>}
-            <textarea
-                className={clsx(
-                    'form-control form-control--textarea form-control--textarea-small font-monospace',
-                    className,
-                )}
-                ref={ref}
-                onBlur={(e) => {
-                    if (trimOnBlur) {
-                        const normalizedValue = trimLinesAndRemoveEmpty(e.target.value);
-                        rest.onChange(normalizedValue);
-                    }
-                    if (onBlur) {
-                        onBlur(e);
-                    }
-                }}
-                {...rest}
-            />
-            {error && <div className="form__message form__message--error">{error}</div>}
-        </div>
-    ),
-);
-
-Textarea.displayName = 'Textarea';
diff --git a/client_v2/src/components/ui/Loading.css b/client_v2/src/components/ui/Loading.css
deleted file mode 100644
index 7a3d71e1..00000000
--- a/client_v2/src/components/ui/Loading.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.loading {
-    position: relative;
-    z-index: 101;
-    opacity: 0;
-    animation: opacity 0.2s linear 0.2s forwards;
-}
-
-.loading:before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    width: 100%;
-    min-height: 100vh;
-    background-color: var(--loading-bg);
-}
-
-.loading:after {
-    content: '';
-    position: fixed;
-    z-index: 101;
-    left: 50%;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin-top: -20px;
-    margin-left: -20px;
-    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E');
-    will-change: transform;
-    animation: clockwise 2s linear infinite;
-}
-
-@keyframes opacity {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 0.8;
-    }
-}
-
-@keyframes clockwise {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
diff --git a/client_v2/src/components/ui/Loading.tsx b/client_v2/src/components/ui/Loading.tsx
deleted file mode 100644
index a88faefb..00000000
--- a/client_v2/src/components/ui/Loading.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import classNames from 'clsx';
-import { useTranslation } from 'react-i18next';
-import './Loading.css';
-
-interface LoadingProps {
-    className?: string;
-    text?: string;
-}
-
-const Loading = ({ className, text }: LoadingProps) => {
-    const { t } = useTranslation();
-
-    return <div className={classNames('loading', className)}>{t(text)}</div>;
-};
-
-export default Loading;
diff --git a/client_v2/src/components/ui/PageTitle.css b/client_v2/src/components/ui/PageTitle.css
deleted file mode 100644
index 57966d75..00000000
--- a/client_v2/src/components/ui/PageTitle.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.page-header {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.page-header--logs {
-    flex-direction: row;
-    align-items: flex-end;
-    margin: 0.5rem 0 2.8rem;
-}
-
-.page-header--logs .page-title {
-    display: inline-flex;
-    align-items: center;
-}
-
-@media (max-width: 991px) {
-    .page-header--logs {
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 0 0 1.1rem;
-    }
-
-    .page-header--logs .page-title {
-        margin-bottom: 1.1rem;
-        font-size: 1.8rem;
-    }
-}
-
-.page-subtitle {
-    margin-left: 0;
-    font-size: 0.9rem;
-}
-
-.page-title--large {
-    font-size: 36px;
-    line-height: 46px;
-}
diff --git a/client_v2/src/components/ui/PageTitle.tsx b/client_v2/src/components/ui/PageTitle.tsx
deleted file mode 100644
index fdbfe959..00000000
--- a/client_v2/src/components/ui/PageTitle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import './PageTitle.css';
-
-interface PageTitleProps {
-    title: string;
-    subtitle?: string;
-    children?: React.ReactNode;
-    containerClass?: string;
-}
-
-const PageTitle = ({ title, subtitle, children, containerClass }: PageTitleProps) => (
-    <div className="page-header">
-        <div className={containerClass}>
-            <h1 className="page-title pr-2">{title}</h1>
-            {children}
-        </div>
-
-        {subtitle && <div className="page-subtitle">{subtitle}</div>}
-    </div>
-);
-
-export default PageTitle;
diff --git a/client_v2/src/install/Setup/Settings.tsx b/client_v2/src/install/Setup/Settings.tsx
index 31e201a0..c7848bf4 100644
--- a/client_v2/src/install/Setup/Settings.tsx
+++ b/client_v2/src/install/Setup/Settings.tsx
@@ -20,9 +20,8 @@ import {
 
 import { validateRequiredValue } from '../../helpers/validators';
 import { InstallInterface } from '../../initialState';
-import { Input } from '../../components/ui/Controls/Input';
-import { Select } from '../../components/ui/Controls/Select';
 import { toNumber } from '../../helpers/form';
+import { Input } from 'panel/common/controls/Input';
 
 const validateInstallPort = (value: number) => {
     if (value < MIN_PORT || value > MAX_PORT) {
@@ -253,12 +252,12 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                 name="web.ip"
                                 control={control}
                                 render={({ field }) => (
-                                    <Select {...field} data-testid="install_web_ip">
+                                    <select {...field} data-testid="install_web_ip">
                                         <option value={ALL_INTERFACES_IP}>
                                             {t('install_settings_all_interfaces')}
                                         </option>
                                         {renderInterfaces(interfaces)}
-                                    </Select>
+                                    </select>
                                 )}
                             />
                         </div>
@@ -284,7 +283,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                         type="number"
                                         data-testid="install_web_port"
                                         placeholder={STANDARD_WEB_PORT.toString()}
-                                        error={fieldState.error?.message}
+                                        errorMessage={fieldState.error?.message}
                                         onChange={(e) => {
                                             const { value } = e.target;
                                             field.onChange(toNumber(value));
@@ -343,12 +342,12 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                 name="dns.ip"
                                 control={control}
                                 render={({ field }) => (
-                                    <Select {...field} data-testid="install_dns_ip">
+                                    <select {...field} data-testid="install_dns_ip">
                                         <option value={ALL_INTERFACES_IP}>
                                             {t('install_settings_all_interfaces')}
                                         </option>
                                         {renderInterfaces(interfaces)}
-                                    </Select>
+                                    </select>
                                 )}
                             />
                         </div>
@@ -374,7 +373,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                         {...field}
                                         type="number"
                                         data-testid="install_dns_port"
-                                        error={fieldState.error?.message}
+                                        errorMessage={fieldState.error?.message}
                                         placeholder={STANDARD_WEB_PORT.toString()}
                                         onChange={(e) => {
                                             const { value } = e.target;