diff --git a/web/components/BanUserButton.tsx b/web/components/admin/BanUserButton.tsx
similarity index 95%
rename from web/components/BanUserButton.tsx
rename to web/components/admin/BanUserButton.tsx
index cc00efb9b..63cc2649b 100644
--- a/web/components/BanUserButton.tsx
+++ b/web/components/admin/BanUserButton.tsx
@@ -1,8 +1,8 @@
 import { Modal, Button } from 'antd';
 import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
 import { FC } from 'react';
-import { USER_ENABLED_TOGGLE, fetchData } from '../utils/apis';
-import { User } from '../types/chat';
+import { USER_ENABLED_TOGGLE, fetchData } from '../../utils/apis';
+import { User } from '../../types/chat';
 
 export type BanUserButtonProps = {
   user: User;
diff --git a/web/components/BannedIPsTable.tsx b/web/components/admin/BannedIPsTable.tsx
similarity index 94%
rename from web/components/BannedIPsTable.tsx
rename to web/components/admin/BannedIPsTable.tsx
index 1b4a7caf4..725b10e20 100644
--- a/web/components/BannedIPsTable.tsx
+++ b/web/components/admin/BannedIPsTable.tsx
@@ -3,8 +3,8 @@ import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import React, { FC } from 'react';
 import { StopTwoTone } from '@ant-design/icons';
-import { User } from '../types/chat';
-import { BANNED_IP_REMOVE, fetchData } from '../utils/apis';
+import { User } from '../../types/chat';
+import { BANNED_IP_REMOVE, fetchData } from '../../utils/apis';
 
 function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');
diff --git a/web/components/Chart.tsx b/web/components/admin/Chart.tsx
similarity index 100%
rename from web/components/Chart.tsx
rename to web/components/admin/Chart.tsx
diff --git a/web/components/ClientTable.tsx b/web/components/admin/ClientTable.tsx
similarity index 97%
rename from web/components/ClientTable.tsx
rename to web/components/admin/ClientTable.tsx
index b63949fb5..38ece5af6 100644
--- a/web/components/ClientTable.tsx
+++ b/web/components/admin/ClientTable.tsx
@@ -4,10 +4,10 @@ import { ColumnsType } from 'antd/es/table';
 import { SearchOutlined } from '@ant-design/icons';
 import { formatDistanceToNow } from 'date-fns';
 import { FC } from 'react';
-import { Client } from '../types/chat';
+import { Client } from '../../types/chat';
 import { UserPopover } from './UserPopover';
 import { BanUserButton } from './BanUserButton';
-import { formatUAstring } from '../utils/format';
+import { formatUAstring } from '../../utils/format';
 
 export type ClientTableProps = {
   data: Client[];
diff --git a/web/components/config/CodecSelector.tsx b/web/components/admin/CodecSelector.tsx
similarity index 100%
rename from web/components/config/CodecSelector.tsx
rename to web/components/admin/CodecSelector.tsx
diff --git a/web/components/Color.tsx b/web/components/admin/Color.tsx
similarity index 100%
rename from web/components/Color.tsx
rename to web/components/admin/Color.tsx
diff --git a/web/components/ComposeFederatedPost.tsx b/web/components/admin/ComposeFederatedPost.tsx
similarity index 93%
rename from web/components/ComposeFederatedPost.tsx
rename to web/components/admin/ComposeFederatedPost.tsx
index fc2940645..ac7219fc4 100644
--- a/web/components/ComposeFederatedPost.tsx
+++ b/web/components/admin/ComposeFederatedPost.tsx
@@ -1,8 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { Button, Input, Modal } from 'antd';
-import { STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
-import { fetchData, FEDERATION_MESSAGE_SEND } from '../utils/apis';
+import { STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
+import { fetchData, FEDERATION_MESSAGE_SEND } from '../../utils/apis';
 
 const { TextArea } = Input;
 
diff --git a/web/components/config/CurrentVariantsTable.tsx b/web/components/admin/CurrentVariantsTable.tsx
similarity index 99%
rename from web/components/config/CurrentVariantsTable.tsx
rename to web/components/admin/CurrentVariantsTable.tsx
index 20094c624..f2d730ee9 100644
--- a/web/components/config/CurrentVariantsTable.tsx
+++ b/web/components/admin/CurrentVariantsTable.tsx
@@ -28,6 +28,7 @@ import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const CurrentVariantsTable: FC = () => {
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);
diff --git a/web/components/config/EditCustomStyles.tsx b/web/components/admin/EditCustomStyles.tsx
similarity index 98%
rename from web/components/config/EditCustomStyles.tsx
rename to web/components/admin/EditCustomStyles.tsx
index 703f4bb75..d9e5f3947 100644
--- a/web/components/config/EditCustomStyles.tsx
+++ b/web/components/admin/EditCustomStyles.tsx
@@ -22,6 +22,7 @@ import { FormStatusIndicator } from './FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditCustomStyles: FC = () => {
   const [content, setContent] = useState('/* Enter custom CSS here */');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
diff --git a/web/components/config/EditInstanceDetails2.tsx b/web/components/admin/EditInstanceDetails2.tsx
similarity index 97%
rename from web/components/config/EditInstanceDetails2.tsx
rename to web/components/admin/EditInstanceDetails2.tsx
index 23e4372c0..5679c8fdb 100644
--- a/web/components/config/EditInstanceDetails2.tsx
+++ b/web/components/admin/EditInstanceDetails2.tsx
@@ -22,7 +22,8 @@ const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
 
 const { Panel } = Collapse;
 
-export const EditInstanceDetails = () => {
+// eslint-disable-next-line react/function-component-definition
+export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
   const { setMessage } = useContext(AlertMessageContext);
@@ -161,4 +162,4 @@ export const EditInstanceDetails = () => {
       </Collapse>
     </div>
   );
-};
+}
diff --git a/web/components/config/EditLogo.tsx b/web/components/admin/EditLogo.tsx
similarity index 98%
rename from web/components/config/EditLogo.tsx
rename to web/components/admin/EditLogo.tsx
index c566b6433..49be45435 100644
--- a/web/components/config/EditLogo.tsx
+++ b/web/components/admin/EditLogo.tsx
@@ -25,6 +25,7 @@ import {
   readableBytes,
 } from '../../utils/images';
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditLogo: FC = () => {
   const [logoUrl, setlogoUrl] = useState(null);
   const [loading, setLoading] = useState(false);
diff --git a/web/components/config/EditValueArray.tsx b/web/components/admin/EditValueArray.tsx
similarity index 100%
rename from web/components/config/EditValueArray.tsx
rename to web/components/admin/EditValueArray.tsx
diff --git a/web/components/config/EditYPDetails.tsx b/web/components/admin/EditYPDetails.tsx
similarity index 97%
rename from web/components/config/EditYPDetails.tsx
rename to web/components/admin/EditYPDetails.tsx
index 13e39dcfc..d3381a773 100644
--- a/web/components/config/EditYPDetails.tsx
+++ b/web/components/admin/EditYPDetails.tsx
@@ -8,6 +8,7 @@ import { FIELD_PROPS_NSFW, FIELD_PROPS_YP } from '../../utils/config-constants';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line import/prefer-default-export
 export const EditYPDetails: FC = () => {
   const [formDataValues, setFormDataValues] = useState(null);
 
diff --git a/web/components/config/FormStatusIndicator.tsx b/web/components/admin/FormStatusIndicator.tsx
similarity index 100%
rename from web/components/config/FormStatusIndicator.tsx
rename to web/components/admin/FormStatusIndicator.tsx
diff --git a/web/components/ImageAsset.tsx b/web/components/admin/ImageAsset.tsx
similarity index 100%
rename from web/components/ImageAsset.tsx
rename to web/components/admin/ImageAsset.tsx
diff --git a/web/components/InfoTip.tsx b/web/components/admin/InfoTip.tsx
similarity index 100%
rename from web/components/InfoTip.tsx
rename to web/components/admin/InfoTip.tsx
diff --git a/web/components/KeyValueTable.tsx b/web/components/admin/KeyValueTable.tsx
similarity index 100%
rename from web/components/KeyValueTable.tsx
rename to web/components/admin/KeyValueTable.tsx
diff --git a/web/components/LogTable.tsx b/web/components/admin/LogTable.tsx
similarity index 100%
rename from web/components/LogTable.tsx
rename to web/components/admin/LogTable.tsx
diff --git a/web/components/MainLayout.tsx b/web/components/admin/MainLayout.tsx
similarity index 93%
rename from web/components/MainLayout.tsx
rename to web/components/admin/MainLayout.tsx
index 2c2fb29cf..404a52b83 100644
--- a/web/components/MainLayout.tsx
+++ b/web/components/admin/MainLayout.tsx
@@ -20,19 +20,19 @@ import {
 
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
-import { upgradeVersionAvailable } from '../utils/apis';
-import { parseSecondsToDurationString } from '../utils/format';
+import { upgradeVersionAvailable } from '../../utils/apis';
+import { parseSecondsToDurationString } from '../../utils/format';
 
-import { OwncastLogo } from './common/OwncastLogo/OwncastLogo';
-import { ServerStatusContext } from '../utils/server-status-context';
-import { AlertMessageContext } from '../utils/alert-message-context';
+import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
+import { ServerStatusContext } from '../../utils/server-status-context';
+import { AlertMessageContext } from '../../utils/alert-message-context';
 
-import { TextFieldWithSubmit } from './config/TextFieldWithSubmit';
-import { TEXTFIELD_PROPS_STREAM_TITLE } from '../utils/config-constants';
+import { TextFieldWithSubmit } from './TextFieldWithSubmit';
+import { TEXTFIELD_PROPS_STREAM_TITLE } from '../../utils/config-constants';
 import { ComposeFederatedPost } from './ComposeFederatedPost';
-import { UpdateArgs } from '../types/config-section';
+import { UpdateArgs } from '../../types/config-section';
 
-import FediverseIcon from '../assets/images/fediverse-black.png';
+import FediverseIcon from '../../assets/images/fediverse-black.png';
 
 // Lazy loaded components
 
diff --git a/web/components/MessageVisiblityToggle.tsx b/web/components/admin/MessageVisiblityToggle.tsx
similarity index 90%
rename from web/components/MessageVisiblityToggle.tsx
rename to web/components/admin/MessageVisiblityToggle.tsx
index fa8fa66b4..3f576db71 100644
--- a/web/components/MessageVisiblityToggle.tsx
+++ b/web/components/admin/MessageVisiblityToggle.tsx
@@ -8,10 +8,9 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons';
 import dynamic from 'next/dynamic';
-import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../utils/apis';
-import { MessageType } from '../types/chat';
-import { OUTCOME_TIMEOUT } from '../pages/admin/chat/messages';
-import { isEmptyObject } from '../utils/format';
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
+import { MessageType } from '../../types/chat';
+import { isEmptyObject } from '../../utils/format';
 
 // Lazy loaded components
 
@@ -40,7 +39,7 @@ export const MessageVisiblityToggle: FC<MessageToggleProps> = ({
   const resetOutcome = () => {
     outcomeTimeout = setTimeout(() => {
       setOutcome(0);
-    }, OUTCOME_TIMEOUT);
+    }, 3000);
   };
 
   useEffect(() => () => {
diff --git a/web/components/ModeratorUserButton.tsx b/web/components/admin/ModeratorUserButton.tsx
similarity index 95%
rename from web/components/ModeratorUserButton.tsx
rename to web/components/admin/ModeratorUserButton.tsx
index 97bc5689a..a7a4cc396 100644
--- a/web/components/ModeratorUserButton.tsx
+++ b/web/components/admin/ModeratorUserButton.tsx
@@ -6,8 +6,8 @@ import {
   SafetyCertificateTwoTone,
 } from '@ant-design/icons';
 import { FC } from 'react';
-import { USER_SET_MODERATOR, fetchData } from '../utils/apis';
-import { User } from '../types/chat';
+import { USER_SET_MODERATOR, fetchData } from '../../utils/apis';
+import { User } from '../../types/chat';
 
 export type ModeratorUserButtonProps = {
   user: User;
diff --git a/web/components/NewsFeed.tsx b/web/components/admin/NewsFeed.tsx
similarity index 97%
rename from web/components/NewsFeed.tsx
rename to web/components/admin/NewsFeed.tsx
index e47d24c34..2d3114b9e 100644
--- a/web/components/NewsFeed.tsx
+++ b/web/components/admin/NewsFeed.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect, FC } from 'react';
 import { Collapse, Typography, Skeleton } from 'antd';
 import format from 'date-fns/format';
 
-import { fetchExternalData } from '../utils/apis';
+import { fetchExternalData } from '../../utils/apis';
 
 const { Panel } = Collapse;
 const { Title, Link } = Typography;
diff --git a/web/components/Offline.tsx b/web/components/admin/Offline.tsx
similarity index 95%
rename from web/components/Offline.tsx
rename to web/components/admin/Offline.tsx
index 99d7ff761..f69b620b0 100644
--- a/web/components/Offline.tsx
+++ b/web/components/admin/Offline.tsx
@@ -3,10 +3,10 @@ import { Card, Col, Row, Typography } from 'antd';
 import Link from 'next/link';
 import { FC, useContext } from 'react';
 import { LogTable } from './LogTable';
-import { OwncastLogo } from './common/OwncastLogo/OwncastLogo';
+import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
 import { NewsFeed } from './NewsFeed';
-import { ConfigDetails } from '../types/config-section';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ConfigDetails } from '../../types/config-section';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
 const { Paragraph, Text } = Typography;
 
diff --git a/web/components/config/ResetYP.tsx b/web/components/admin/ResetYP.tsx
similarity index 97%
rename from web/components/config/ResetYP.tsx
rename to web/components/admin/ResetYP.tsx
index 3022ba2a2..5e58226e7 100644
--- a/web/components/config/ResetYP.tsx
+++ b/web/components/admin/ResetYP.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../utils/input-statuses';
 import { FormStatusIndicator } from './FormStatusIndicator';
 
+// eslint-disable-next-line import/prefer-default-export
 export const ResetYP: FC = () => {
   const { setMessage } = useContext(AlertMessageContext);
 
diff --git a/web/components/config/SocialDropdown.tsx b/web/components/admin/SocialDropdown.tsx
similarity index 100%
rename from web/components/config/SocialDropdown.tsx
rename to web/components/admin/SocialDropdown.tsx
diff --git a/web/components/StatisticItem.tsx b/web/components/admin/StatisticItem.tsx
similarity index 100%
rename from web/components/StatisticItem.tsx
rename to web/components/admin/StatisticItem.tsx
diff --git a/web/components/StreamHealthOverview.tsx b/web/components/admin/StreamHealthOverview.tsx
similarity index 97%
rename from web/components/StreamHealthOverview.tsx
rename to web/components/admin/StreamHealthOverview.tsx
index 815a0a608..73a27095c 100644
--- a/web/components/StreamHealthOverview.tsx
+++ b/web/components/admin/StreamHealthOverview.tsx
@@ -2,7 +2,7 @@ import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icon
 import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
 import Link from 'next/link';
 import React, { FC, useContext } from 'react';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
 export type StreamHealthOverviewProps = {
   showTroubleshootButton?: Boolean;
diff --git a/web/components/config/TextField.tsx b/web/components/admin/TextField.tsx
similarity index 100%
rename from web/components/config/TextField.tsx
rename to web/components/admin/TextField.tsx
diff --git a/web/components/config/TextFieldWithSubmit.tsx b/web/components/admin/TextFieldWithSubmit.tsx
similarity index 100%
rename from web/components/config/TextFieldWithSubmit.tsx
rename to web/components/admin/TextFieldWithSubmit.tsx
diff --git a/web/components/config/ToggleSwitch.tsx b/web/components/admin/ToggleSwitch.tsx
similarity index 100%
rename from web/components/config/ToggleSwitch.tsx
rename to web/components/admin/ToggleSwitch.tsx
diff --git a/web/components/UserPopover.tsx b/web/components/admin/UserPopover.tsx
similarity index 97%
rename from web/components/UserPopover.tsx
rename to web/components/admin/UserPopover.tsx
index 50d5032ce..02defc66c 100644
--- a/web/components/UserPopover.tsx
+++ b/web/components/admin/UserPopover.tsx
@@ -10,9 +10,9 @@ import dynamic from 'next/dynamic';
 import { BanUserButton } from './BanUserButton';
 import { ModeratorUserButton } from './ModeratorUserButton';
 
-import { User, UserConnectionInfo } from '../types/chat';
+import { User, UserConnectionInfo } from '../../types/chat';
 import { formatDisplayDate } from './UserTable';
-import { formatUAstring } from '../utils/format';
+import { formatUAstring } from '../../utils/format';
 
 // Lazy loaded components
 
diff --git a/web/components/UserTable.tsx b/web/components/admin/UserTable.tsx
similarity index 97%
rename from web/components/UserTable.tsx
rename to web/components/admin/UserTable.tsx
index a91ec724c..3180e8acb 100644
--- a/web/components/UserTable.tsx
+++ b/web/components/admin/UserTable.tsx
@@ -2,7 +2,7 @@ import { Table } from 'antd';
 import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import { FC } from 'react';
-import { User } from '../types/chat';
+import { User } from '../../types/chat';
 import { UserPopover } from './UserPopover';
 import { BanUserButton } from './BanUserButton';
 
diff --git a/web/components/config/VideoLatency.tsx b/web/components/admin/VideoLatency.tsx
similarity index 98%
rename from web/components/config/VideoLatency.tsx
rename to web/components/admin/VideoLatency.tsx
index 4bbe3fa52..6564823ce 100644
--- a/web/components/config/VideoLatency.tsx
+++ b/web/components/admin/VideoLatency.tsx
@@ -34,6 +34,7 @@ const SLIDER_COMMENTS = {
   4: 'Highest latency, highest error tolerance',
 };
 
+// eslint-disable-next-line import/prefer-default-export
 export const VideoLatency: FC = () => {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [selectedOption, setSelectedOption] = useState(null);
diff --git a/web/components/config/VideoVariantForm.tsx b/web/components/admin/VideoVariantForm.tsx
similarity index 100%
rename from web/components/config/VideoVariantForm.tsx
rename to web/components/admin/VideoVariantForm.tsx
diff --git a/web/components/ViewerTable.tsx b/web/components/admin/ViewerTable.tsx
similarity index 93%
rename from web/components/ViewerTable.tsx
rename to web/components/admin/ViewerTable.tsx
index 6f9ffafcd..37abb2fa6 100644
--- a/web/components/ViewerTable.tsx
+++ b/web/components/admin/ViewerTable.tsx
@@ -3,8 +3,8 @@ import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
 import { formatDistanceToNow } from 'date-fns';
 import { FC } from 'react';
-import { User } from '../types/chat';
-import { formatUAstring } from '../utils/format';
+import { User } from '../../types/chat';
+import { formatUAstring } from '../../utils/format';
 
 export function formatDisplayDate(date: string | Date) {
   return format(new Date(date), 'MMM d H:mma');
diff --git a/web/pages/admin/config/general/components/AppearanceConfig.tsx b/web/components/admin/config/general/AppearanceConfig.tsx
similarity index 95%
rename from web/pages/admin/config/general/components/AppearanceConfig.tsx
rename to web/components/admin/config/general/AppearanceConfig.tsx
index 19b167d87..d128d9489 100644
--- a/web/pages/admin/config/general/components/AppearanceConfig.tsx
+++ b/web/components/admin/config/general/AppearanceConfig.tsx
@@ -3,17 +3,17 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Button, Col, Collapse, Row, Slider, Space } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import Title from 'antd/lib/typography/Title';
-import { EditCustomStyles } from '../../../../../components/config/EditCustomStyles';
-import s from '../appearance.module.scss';
-import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../../../../utils/config-constants';
+import { EditCustomStyles } from '../../EditCustomStyles';
+import s from './appearance.module.scss';
+import { postConfigUpdateToAPI, RESET_TIMEOUT } from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/input-statuses';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Panel } = Collapse;
 
@@ -79,6 +79,7 @@ const allAvailableValues = [
   return obj;
 }, {});
 
+// eslint-disable-next-line react/function-component-definition
 function ColorPicker({
   value,
   name,
@@ -105,6 +106,7 @@ function ColorPicker({
     </Col>
   );
 }
+// eslint-disable-next-line react/function-component-definition
 export default function Appearance() {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig } = serverStatusData;
diff --git a/web/pages/admin/config/general/components/EditInstanceDetails.tsx b/web/components/admin/config/general/EditInstanceDetails.tsx
similarity index 91%
rename from web/pages/admin/config/general/components/EditInstanceDetails.tsx
rename to web/components/admin/config/general/EditInstanceDetails.tsx
index 40701e2fb..cb578aef0 100644
--- a/web/pages/admin/config/general/components/EditInstanceDetails.tsx
+++ b/web/components/admin/config/general/EditInstanceDetails.tsx
@@ -4,8 +4,8 @@ import {
   TextFieldWithSubmit,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from '../../../../../components/config/TextFieldWithSubmit';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+} from '../../TextFieldWithSubmit';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
   TEXTFIELD_PROPS_INSTANCE_URL,
@@ -16,13 +16,14 @@ import {
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
   FIELD_PROPS_HIDE_VIEWER_COUNT,
-} from '../../../../../utils/config-constants';
-import { UpdateArgs } from '../../../../../types/config-section';
-import { ToggleSwitch } from '../../../../../components/config/ToggleSwitch';
-import { EditLogo } from '../../../../../components/config/EditLogo';
+} from '../../../../utils/config-constants';
+import { UpdateArgs } from '../../../../types/config-section';
+import { ToggleSwitch } from '../../ToggleSwitch';
+import { EditLogo } from '../../EditLogo';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
diff --git a/web/pages/admin/config/general/components/EditInstanceTags.tsx b/web/components/admin/config/general/EditInstanceTags.tsx
similarity index 90%
rename from web/pages/admin/config/general/components/EditInstanceTags.tsx
rename to web/components/admin/config/general/EditInstanceTags.tsx
index b3e88c06a..3a7ccf191 100644
--- a/web/pages/admin/config/general/components/EditInstanceTags.tsx
+++ b/web/components/admin/config/general/EditInstanceTags.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useContext, useState, useEffect } from 'react';
 import { Typography, Tag } from 'antd';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   FIELD_PROPS_TAGS,
   RESET_TIMEOUT,
   postConfigUpdateToAPI,
-} from '../../../../../utils/config-constants';
-import { TextField } from '../../../../../components/config/TextField';
-import { UpdateArgs } from '../../../../../types/config-section';
+} from '../../../../utils/config-constants';
+import { TextField } from '../../TextField';
+import { UpdateArgs } from '../../../../types/config-section';
 import {
   createInputStatus,
   StatusState,
@@ -16,11 +16,12 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
   STATUS_WARNING,
-} from '../../../../../utils/input-statuses';
-import { TAG_COLOR } from '../../../../../components/config/EditValueArray';
+} from '../../../../utils/input-statuses';
+import { TAG_COLOR } from '../../EditValueArray';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditInstanceTags() {
   const [newTagInput, setNewTagInput] = useState<string>('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
diff --git a/web/pages/admin/config/general/components/EditPageContent.tsx b/web/components/admin/config/general/EditPageContent.tsx
similarity index 91%
rename from web/pages/admin/config/general/components/EditPageContent.tsx
rename to web/components/admin/config/general/EditPageContent.tsx
index b83e0d75f..b7383fdea 100644
--- a/web/pages/admin/config/general/components/EditPageContent.tsx
+++ b/web/components/admin/config/general/EditPageContent.tsx
@@ -6,23 +6,24 @@ import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   API_CUSTOM_CONTENT,
-} from '../../../../../utils/config-constants';
+} from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_PROCESSING,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/input-statuses';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditPageContent() {
   const [content, setContent] = useState('');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
diff --git a/web/pages/admin/config/general/components/EditSocialLinks.tsx b/web/components/admin/config/general/EditSocialLinks.tsx
similarity index 93%
rename from web/pages/admin/config/general/components/EditSocialLinks.tsx
rename to web/components/admin/config/general/EditSocialLinks.tsx
index e9bee22bb..7786c7f81 100644
--- a/web/pages/admin/config/general/components/EditSocialLinks.tsx
+++ b/web/components/admin/config/general/EditSocialLinks.tsx
@@ -2,33 +2,30 @@ import React, { useState, useContext, useEffect } from 'react';
 import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { CaretDownOutlined, CaretUpOutlined, DeleteOutlined } from '@ant-design/icons';
-import { SocialDropdown } from '../../../../../components/config/SocialDropdown';
-import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../../utils/apis';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { SocialDropdown } from '../../SocialDropdown';
+import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 import {
   API_SOCIAL_HANDLES,
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
   DEFAULT_SOCIAL_HANDLE,
   OTHER_SOCIAL_HANDLE_OPTION,
-} from '../../../../../utils/config-constants';
-import { SocialHandle, UpdateArgs } from '../../../../../types/config-section';
+} from '../../../../utils/config-constants';
+import { SocialHandle, UpdateArgs } from '../../../../types/config-section';
 import {
   isValidMatrixAccount,
   isValidAccount,
   isValidUrl,
   DEFAULT_TEXTFIELD_URL_PATTERN,
-} from '../../../../../utils/urls';
-import { TextField } from '../../../../../components/config/TextField';
-import {
-  createInputStatus,
-  STATUS_ERROR,
-  STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
+} from '../../../../utils/urls';
+import { TextField } from '../../TextField';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
 
 const { Title } = Typography;
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditSocialLinks() {
   const [availableIconsList, setAvailableIconsList] = useState([]);
   const [currentSocialHandles, setCurrentSocialHandles] = useState([]);
diff --git a/web/pages/admin/config/general/components/GeneralConfig.tsx b/web/components/admin/config/general/GeneralConfig.tsx
similarity index 95%
rename from web/pages/admin/config/general/components/GeneralConfig.tsx
rename to web/components/admin/config/general/GeneralConfig.tsx
index bbc87f24e..8cfb48f1c 100644
--- a/web/pages/admin/config/general/components/GeneralConfig.tsx
+++ b/web/components/admin/config/general/GeneralConfig.tsx
@@ -5,6 +5,7 @@ import EditInstanceTags from './EditInstanceTags';
 import EditSocialLinks from './EditSocialLinks';
 import EditPageContent from './EditPageContent';
 
+// eslint-disable-next-line react/function-component-definition
 export default function PublicFacingDetails() {
   return (
     <div className="config-public-details-page">
diff --git a/web/pages/admin/config/general/appearance.module.scss b/web/components/admin/config/general/appearance.module.scss
similarity index 100%
rename from web/pages/admin/config/general/appearance.module.scss
rename to web/components/admin/config/general/appearance.module.scss
diff --git a/web/pages/admin/config/server/components/EditStorage.tsx b/web/components/admin/config/server/EditStorage.tsx
similarity index 92%
rename from web/pages/admin/config/server/components/EditStorage.tsx
rename to web/components/admin/config/server/EditStorage.tsx
index cbea40dc8..4fa415bf4 100644
--- a/web/pages/admin/config/server/components/EditStorage.tsx
+++ b/web/components/admin/config/server/EditStorage.tsx
@@ -1,27 +1,27 @@
 import { Button, Collapse } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useState, useEffect } from 'react';
-import { UpdateArgs } from '../../../../../types/config-section';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
-import { AlertMessageContext } from '../../../../../utils/alert-message-context';
+import { UpdateArgs } from '../../../../types/config-section';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../../utils/alert-message-context';
 
 import {
   postConfigUpdateToAPI,
   API_S3_INFO,
   RESET_TIMEOUT,
   S3_TEXT_FIELDS_INFO,
-} from '../../../../../utils/config-constants';
+} from '../../../../utils/config-constants';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_PROCESSING,
   STATUS_SUCCESS,
-} from '../../../../../utils/input-statuses';
-import { TextField } from '../../../../../components/config/TextField';
-import { FormStatusIndicator } from '../../../../../components/config/FormStatusIndicator';
-import { isValidUrl } from '../../../../../utils/urls';
-import { ToggleSwitch } from '../../../../../components/config/ToggleSwitch';
+} from '../../../../utils/input-statuses';
+import { TextField } from '../../TextField';
+import { FormStatusIndicator } from '../../FormStatusIndicator';
+import { isValidUrl } from '../../../../utils/urls';
+import { ToggleSwitch } from '../../ToggleSwitch';
 
 const { Panel } = Collapse;
 
@@ -64,6 +64,7 @@ function checkSaveable(formValues: any, currentValues: any) {
   return false;
 }
 
+// eslint-disable-next-line react/function-component-definition
 export default function EditStorage() {
   const [formDataValues, setFormDataValues] = useState(null);
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
diff --git a/web/pages/admin/config/server/components/ServerConfig.tsx b/web/components/admin/config/server/ServerConfig.tsx
similarity index 79%
rename from web/pages/admin/config/server/components/ServerConfig.tsx
rename to web/components/admin/config/server/ServerConfig.tsx
index 18380af40..388b64941 100644
--- a/web/pages/admin/config/server/components/ServerConfig.tsx
+++ b/web/components/admin/config/server/ServerConfig.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { EditInstanceDetails } from '../../../../../components/config/EditInstanceDetails2';
+import EditInstanceDetails from '../../EditInstanceDetails2';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ConfigServerDetails() {
   return (
     <div className="config-server-details-form">
diff --git a/web/pages/admin/config/server/components/StorageConfig.tsx b/web/components/admin/config/server/StorageConfig.tsx
similarity index 93%
rename from web/pages/admin/config/server/components/StorageConfig.tsx
rename to web/components/admin/config/server/StorageConfig.tsx
index f3e1d4e78..33e1a3e4a 100644
--- a/web/pages/admin/config/server/components/StorageConfig.tsx
+++ b/web/components/admin/config/server/StorageConfig.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import EditStorage from './EditStorage';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ConfigStorageInfo() {
   return (
     <>
diff --git a/web/pages/admin/config/server/components/StreamKeys.tsx b/web/components/admin/config/server/StreamKeys.tsx
similarity index 96%
rename from web/pages/admin/config/server/components/StreamKeys.tsx
rename to web/components/admin/config/server/StreamKeys.tsx
index 8ba0cea08..aac9b5b3e 100644
--- a/web/pages/admin/config/server/components/StreamKeys.tsx
+++ b/web/components/admin/config/server/StreamKeys.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
 import { Table, Space, Button, Typography, Alert, Input, Form } from 'antd';
 import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
-import { ServerStatusContext } from '../../../../../utils/server-status-context';
+import { ServerStatusContext } from '../../../../utils/server-status-context';
 
-import { fetchData, UPDATE_STREAM_KEYS } from '../../../../../utils/apis';
+import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
 
 const { Paragraph } = Typography;
 const { Item } = Form;
diff --git a/web/components/config/notification/browser.tsx b/web/components/admin/notification/browser.tsx
similarity index 100%
rename from web/components/config/notification/browser.tsx
rename to web/components/admin/notification/browser.tsx
diff --git a/web/components/config/notification/discord.tsx b/web/components/admin/notification/discord.tsx
similarity index 100%
rename from web/components/config/notification/discord.tsx
rename to web/components/admin/notification/discord.tsx
diff --git a/web/components/config/notification/federation.tsx b/web/components/admin/notification/federation.tsx
similarity index 100%
rename from web/components/config/notification/federation.tsx
rename to web/components/admin/notification/federation.tsx
diff --git a/web/components/config/notification/twitter.tsx b/web/components/admin/notification/twitter.tsx
similarity index 100%
rename from web/components/config/notification/twitter.tsx
rename to web/components/admin/notification/twitter.tsx
diff --git a/web/pages/admin/actions.tsx b/web/pages/admin/actions.tsx
index f43061040..9a56f74a4 100644
--- a/web/pages/admin/actions.tsx
+++ b/web/pages/admin/actions.tsx
@@ -2,7 +2,7 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Form, Input, Modal, Space, Table, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
-import { FormStatusIndicator } from '../../components/config/FormStatusIndicator';
+import { FormStatusIndicator } from '../../components/admin/FormStatusIndicator';
 import { ExternalAction } from '../../interfaces/external-action';
 import {
   API_EXTERNAL_ACTIONS,
diff --git a/web/pages/admin/chat/emojis.tsx b/web/pages/admin/chat/emojis.tsx
index f3e320045..ec5e34b08 100644
--- a/web/pages/admin/chat/emojis.tsx
+++ b/web/pages/admin/chat/emojis.tsx
@@ -2,7 +2,7 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Space, Table, Typography, Upload } from 'antd';
 import { RcFile } from 'antd/lib/upload';
 import React, { useEffect, useState } from 'react';
-import FormStatusIndicator from '../../../components/config/FormStatusIndicator';
+import FormStatusIndicator from '../../../components/admin/FormStatusIndicator';
 
 import { DELETE_EMOJI, fetchData, UPLOAD_EMOJI } from '../../../utils/apis';
 
diff --git a/web/pages/admin/chat/messages.tsx b/web/pages/admin/chat/messages.tsx
index 99c861315..727553573 100644
--- a/web/pages/admin/chat/messages.tsx
+++ b/web/pages/admin/chat/messages.tsx
@@ -13,8 +13,8 @@ import {
   UPDATE_CHAT_MESSGAE_VIZ,
 } from '../../../utils/apis';
 import { isEmptyObject } from '../../../utils/format';
-import { MessageVisiblityToggle } from '../../../components/MessageVisiblityToggle';
-import { UserPopover } from '../../../components/UserPopover';
+import { MessageVisiblityToggle } from '../../../components/admin/MessageVisiblityToggle';
+import { UserPopover } from '../../../components/admin/UserPopover';
 
 const { Title } = Typography;
 
diff --git a/web/pages/admin/chat/users.tsx b/web/pages/admin/chat/users.tsx
index 354d8e6a2..6dd0612f5 100644
--- a/web/pages/admin/chat/users.tsx
+++ b/web/pages/admin/chat/users.tsx
@@ -8,9 +8,9 @@ import {
   MODERATORS,
   BANNED_IPS,
 } from '../../../utils/apis';
-import { UserTable } from '../../../components/UserTable';
-import { ClientTable } from '../../../components/ClientTable';
-import { BannedIPsTable } from '../../../components/BannedIPsTable';
+import { UserTable } from '../../../components/admin/UserTable';
+import { ClientTable } from '../../../components/admin/ClientTable';
+import { BannedIPsTable } from '../../../components/admin/BannedIPsTable';
 
 export const FETCH_INTERVAL = 10 * 1000; // 10 sec
 
diff --git a/web/pages/admin/config-chat.tsx b/web/pages/admin/config-chat.tsx
index 7ac37f863..44babe2a6 100644
--- a/web/pages/admin/config-chat.tsx
+++ b/web/pages/admin/config-chat.tsx
@@ -1,9 +1,9 @@
 import { Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
-import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/config/TextField';
-import { TextFieldWithSubmit } from '../../components/config/TextFieldWithSubmit';
-import { ToggleSwitch } from '../../components/config/ToggleSwitch';
-import { EditValueArray } from '../../components/config/EditValueArray';
+import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/admin/TextField';
+import { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';
+import { ToggleSwitch } from '../../components/admin/ToggleSwitch';
+import { EditValueArray } from '../../components/admin/EditValueArray';
 import {
   createInputStatus,
   StatusState,
diff --git a/web/pages/admin/config-federation.tsx b/web/pages/admin/config-federation.tsx
index ca8237391..ba07f8e30 100644
--- a/web/pages/admin/config-federation.tsx
+++ b/web/pages/admin/config-federation.tsx
@@ -6,10 +6,10 @@ import {
   TEXTFIELD_TYPE_TEXT,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from '../../components/config/TextField';
-import { TextFieldWithSubmit } from '../../components/config/TextFieldWithSubmit';
-import { ToggleSwitch } from '../../components/config/ToggleSwitch';
-import { EditValueArray } from '../../components/config/EditValueArray';
+} from '../../components/admin/TextField';
+import { TextFieldWithSubmit } from '../../components/admin/TextFieldWithSubmit';
+import { ToggleSwitch } from '../../components/admin/ToggleSwitch';
+import { EditValueArray } from '../../components/admin/EditValueArray';
 import { UpdateArgs } from '../../types/config-section';
 import {
   FIELD_PROPS_ENABLE_FEDERATION,
diff --git a/web/pages/admin/config-notify.tsx b/web/pages/admin/config-notify.tsx
index 6f64a636d..a7c733adf 100644
--- a/web/pages/admin/config-notify.tsx
+++ b/web/pages/admin/config-notify.tsx
@@ -2,14 +2,14 @@ import { Alert, Button, Col, Row, Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
 import Link from 'next/link';
 
-import Discord from '../../components/config/notification/discord';
-import Browser from '../../components/config/notification/browser';
-import Twitter from '../../components/config/notification/twitter';
-import Federation from '../../components/config/notification/federation';
+import Discord from '../../components/admin/notification/discord';
+import Browser from '../../components/admin/notification/browser';
+import Twitter from '../../components/admin/notification/twitter';
+import Federation from '../../components/admin/notification/federation';
 import {
   TextFieldWithSubmit,
   TEXTFIELD_TYPE_URL,
-} from '../../components/config/TextFieldWithSubmit';
+} from '../../components/admin/TextFieldWithSubmit';
 import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { UpdateArgs } from '../../types/config-section';
diff --git a/web/pages/admin/config-social-items.tsx b/web/pages/admin/config-social-items.tsx
index 8aa865b9b..dfa58ccc5 100644
--- a/web/pages/admin/config-social-items.tsx
+++ b/web/pages/admin/config-social-items.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from 'antd';
-import EditSocialLinks from './config/general/components/EditSocialLinks';
+import EditSocialLinks from '../../components/admin/config/general/EditSocialLinks';
 
 const { Title } = Typography;
 
diff --git a/web/pages/admin/config-video.tsx b/web/pages/admin/config-video.tsx
index 87e457cc8..ec7fbaa51 100644
--- a/web/pages/admin/config-video.tsx
+++ b/web/pages/admin/config-video.tsx
@@ -1,8 +1,8 @@
 import { Col, Collapse, Row, Typography } from 'antd';
 import React from 'react';
-import { CodecSelector as VideoCodecSelector } from '../../components/config/CodecSelector';
-import { VideoLatency } from '../../components/config/VideoLatency';
-import { CurrentVariantsTable } from '../../components/config/CurrentVariantsTable';
+import { CodecSelector as VideoCodecSelector } from '../../components/admin/CodecSelector';
+import { VideoLatency } from '../../components/admin/VideoLatency';
+import { CurrentVariantsTable } from '../../components/admin/CurrentVariantsTable';
 
 const { Panel } = Collapse;
 const { Title } = Typography;
diff --git a/web/pages/admin/config/general/index.tsx b/web/pages/admin/config/general/index.tsx
index 1f00884e5..263ea00db 100644
--- a/web/pages/admin/config/general/index.tsx
+++ b/web/pages/admin/config/general/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Tabs } from 'antd';
 
-import GeneralConfig from './components/GeneralConfig';
-import AppearanceConfig from './components/AppearanceConfig';
+import GeneralConfig from '../../../../components/admin/config/general/GeneralConfig';
+import AppearanceConfig from '../../../../components/admin/config/general/AppearanceConfig';
 
 export default function PublicFacingDetails() {
   return (
diff --git a/web/pages/admin/config/server/index.tsx b/web/pages/admin/config/server/index.tsx
index cb7293dfb..6af87ac93 100644
--- a/web/pages/admin/config/server/index.tsx
+++ b/web/pages/admin/config/server/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Tabs } from 'antd';
 
-import StreamKeys from './components/StreamKeys';
-import ServerConfig from './components/ServerConfig';
-import StorageConfig from './components/StorageConfig';
+import StreamKeys from '../../../../components/admin/config/server/StreamKeys';
+import ServerConfig from '../../../../components/admin/config/server/ServerConfig';
+import StorageConfig from '../../../../components/admin/config/server/StorageConfig';
 
 export default function PublicFacingDetails() {
   return (
diff --git a/web/pages/admin/hardware-info.tsx b/web/pages/admin/hardware-info.tsx
index 7f2e86519..702639274 100644
--- a/web/pages/admin/hardware-info.tsx
+++ b/web/pages/admin/hardware-info.tsx
@@ -2,8 +2,8 @@ import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
 import { Row, Col, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
-import { Chart } from '../../components/Chart';
-import { StatisticItem } from '../../components/StatisticItem';
+import { Chart } from '../../components/admin/Chart';
+import { StatisticItem } from '../../components/admin/StatisticItem';
 
 // TODO: FIX TS WARNING FROM THIS.
 // interface TimedValue {
diff --git a/web/pages/admin/index.tsx b/web/pages/admin/index.tsx
index 413f7402b..e5d733a00 100644
--- a/web/pages/admin/index.tsx
+++ b/web/pages/admin/index.tsx
@@ -4,16 +4,16 @@ import { Skeleton, Card, Statistic, Row, Col } from 'antd';
 import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { formatDistanceToNow, formatRelative } from 'date-fns';
 import ServerStatusProvider, { ServerStatusContext } from '../../utils/server-status-context';
-import { LogTable } from '../../components/LogTable';
-import { Offline } from '../../components/Offline';
-import { StreamHealthOverview } from '../../components/StreamHealthOverview';
+import { LogTable } from '../../components/admin/LogTable';
+import { Offline } from '../../components/admin/Offline';
+import { StreamHealthOverview } from '../../components/admin/StreamHealthOverview';
 
 import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../../utils/format';
-import { NewsFeed } from '../../components/NewsFeed';
+import { NewsFeed } from '../../components/admin/NewsFeed';
 
 import AlertMessageProvider from '../../utils/alert-message-context';
-import { MainLayout } from '../../components/MainLayout';
+import { MainLayout } from '../../components/admin/MainLayout';
 
 function streamDetailsFormatter(streamDetails) {
   return (
diff --git a/web/pages/admin/logs.tsx b/web/pages/admin/logs.tsx
index f9d774752..3398a990e 100644
--- a/web/pages/admin/logs.tsx
+++ b/web/pages/admin/logs.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { LogTable } from '../../components/LogTable';
+import { LogTable } from '../../components/admin/LogTable';
 
 import { LOGS_ALL, fetchData } from '../../utils/apis';
 
diff --git a/web/pages/admin/stream-health.tsx b/web/pages/admin/stream-health.tsx
index 1a826e26f..97b48c496 100644
--- a/web/pages/admin/stream-health.tsx
+++ b/web/pages/admin/stream-health.tsx
@@ -4,8 +4,8 @@ import { Row, Col, Typography, Space, Statistic, Card, Alert, Spin } from 'antd'
 import React, { ReactNode, useEffect, useState } from 'react';
 import { ClockCircleOutlined, WarningOutlined, WifiOutlined } from '@ant-design/icons';
 import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../../utils/apis';
-import { Chart } from '../../components/Chart';
-import { StreamHealthOverview } from '../../components/StreamHealthOverview';
+import { Chart } from '../../components/admin/Chart';
+import { StreamHealthOverview } from '../../components/admin/StreamHealthOverview';
 
 interface TimedValue {
   time: Date;
diff --git a/web/pages/admin/viewer-info.tsx b/web/pages/admin/viewer-info.tsx
index 58cbbe757..a5b7c8f25 100644
--- a/web/pages/admin/viewer-info.tsx
+++ b/web/pages/admin/viewer-info.tsx
@@ -2,9 +2,9 @@ import React, { useState, useEffect, useContext } from 'react';
 import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
 import { getUnixTime, sub } from 'date-fns';
-import { Chart } from '../../components/Chart';
-import { StatisticItem } from '../../components/StatisticItem';
-import { ViewerTable } from '../../components/ViewerTable';
+import { Chart } from '../../components/admin/Chart';
+import { StatisticItem } from '../../components/admin/StatisticItem';
+import { ViewerTable } from '../../components/admin/ViewerTable';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
 
diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx
index e555a032d..c182c6bba 100644
--- a/web/utils/config-constants.tsx
+++ b/web/utils/config-constants.tsx
@@ -1,7 +1,7 @@
 // DEFAULT VALUES
 import { fetchData, SERVER_CONFIG_UPDATE_URL } from './apis';
 import { ApiPostArgs, VideoVariant, SocialHandle } from '../types/config-section';
-import { TEXTFIELD_TYPE_URL } from '../components/config/TextField';
+import { TEXTFIELD_TYPE_URL } from '../components/admin/TextField';
 import { DEFAULT_TEXTFIELD_URL_PATTERN } from './urls';
 
 export const TEXT_MAXLENGTH = 255;