diff --git a/web/package.json b/web/package.json
index f07304c3..bdcfbb13 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,9 +8,11 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3",
     "@xterm/addon-canvas": "^0.6.0-beta.1",
     "@xterm/addon-fit": "^0.9.0-beta.1",
     "@xterm/addon-image": "^0.7.0-beta.1",
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 4db7ebc2..e105a357 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);
diff --git a/web/src/App.tsx b/web/src/App.tsx
index a14b118c..20c9a81d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route } from 'react-router-dom';
 
 import {
   configureStore,
@@ -11,11 +11,12 @@ import {
 import { history } from '~/store/configure';
 import { bootstrapGo } from '~/services/go';
 import config from './services/config';
-import Playground from '~/components/pages/Playground';
-import NotFoundPage from "~/components/pages/NotFoundPage";
-import ConnectedThemeProvider from '~/components/utils/ConnectedThemeProvider';
+import { PlaygroundPage } from '~/components/pages/PlaygroundPage';
+import { NotFoundPage } from "~/components/pages/NotFoundPage";
+import { ConnectedThemeProvider } from '~/components/utils/ConnectedThemeProvider';
+import {ApiClientProvider} from '~/services/api';
+
 import './App.css';
-import {ApiClientProvider} from "@services/api";
 
 // Configure store and import config from localStorage
 const store = configureStore();
@@ -27,7 +28,7 @@ bootstrapGo(
   createGoLifecycleAdapter(a => store.dispatch(a))
 );
 
-const App = () => {
+export const App = () => {
   return (
     <Provider store={store}>
       <ApiClientProvider>
@@ -40,7 +41,7 @@ const App = () => {
                   "/snippet/:snippetID"
                 ]}
                 exact
-                component={Playground}
+                component={PlaygroundPage}
               />
               <Route path="*" component={NotFoundPage}/>
             </Switch>
@@ -50,5 +51,3 @@ const App = () => {
     </Provider>
   );
 }
-
-export default App;
diff --git a/web/src/components/core/StatusBar/index.ts b/web/src/components/core/StatusBar/index.ts
deleted file mode 100644
index 38f630f4..00000000
--- a/web/src/components/core/StatusBar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import StatusBar from './StatusBar';
-export default StatusBar;
diff --git a/web/src/components/core/Panel/PanelAction.css b/web/src/components/elements/panel/PanelAction/PanelAction.css
similarity index 100%
rename from web/src/components/core/Panel/PanelAction.css
rename to web/src/components/elements/panel/PanelAction/PanelAction.css
diff --git a/web/src/components/core/Panel/PanelAction.tsx b/web/src/components/elements/panel/PanelAction/PanelAction.tsx
similarity index 77%
rename from web/src/components/core/Panel/PanelAction.tsx
rename to web/src/components/elements/panel/PanelAction/PanelAction.tsx
index f15fd279..40c64159 100644
--- a/web/src/components/core/Panel/PanelAction.tsx
+++ b/web/src/components/elements/panel/PanelAction/PanelAction.tsx
@@ -10,7 +10,7 @@ export interface PanelActionProps {
   onClick?: () => void
 }
 
-const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, label, onClick}) => {
+export const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, label, onClick}) => {
   if (hidden) {
     return null;
   }
@@ -25,5 +25,3 @@ const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, lab
     </button>
   );
 };
-
-export default PanelAction;
diff --git a/web/src/components/elements/panel/PanelAction/index.ts b/web/src/components/elements/panel/PanelAction/index.ts
new file mode 100644
index 00000000..9922d79b
--- /dev/null
+++ b/web/src/components/elements/panel/PanelAction/index.ts
@@ -0,0 +1 @@
+export * from './PanelAction';
diff --git a/web/src/components/core/Panel/PanelHeader.css b/web/src/components/elements/panel/PanelHeader/PanelHeader.css
similarity index 100%
rename from web/src/components/core/Panel/PanelHeader.css
rename to web/src/components/elements/panel/PanelHeader/PanelHeader.css
diff --git a/web/src/components/core/Panel/PanelHeader.tsx b/web/src/components/elements/panel/PanelHeader/PanelHeader.tsx
similarity index 86%
rename from web/src/components/core/Panel/PanelHeader.tsx
rename to web/src/components/elements/panel/PanelHeader/PanelHeader.tsx
index cbe0fabb..3b619803 100644
--- a/web/src/components/core/Panel/PanelHeader.tsx
+++ b/web/src/components/elements/panel/PanelHeader/PanelHeader.tsx
@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {ITheme, ThemeContext} from '@fluentui/react';
-import PanelAction, {PanelActionProps} from '~/components/core/Panel/PanelAction';
+import { PanelAction, type PanelActionProps } from '../PanelAction';
 import './PanelHeader.css';
 
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
   commands?: {[key: string]: PanelActionProps},
 }
 
-const PanelHeader: React.FC<Props> = ({label, commands}) => {
+export const PanelHeader: React.FC<Props> = ({label, commands}) => {
   const theme = useContext(ThemeContext);
   const {
     palette: { neutralLight, neutralDark, neutralQuaternaryAlt }
@@ -43,5 +43,3 @@ const PanelHeader: React.FC<Props> = ({label, commands}) => {
     </div>
   );
 };
-
-export default PanelHeader;
diff --git a/web/src/components/elements/panel/PanelHeader/index.ts b/web/src/components/elements/panel/PanelHeader/index.ts
new file mode 100644
index 00000000..c4946e74
--- /dev/null
+++ b/web/src/components/elements/panel/PanelHeader/index.ts
@@ -0,0 +1 @@
+export * from './PanelHeader';
diff --git a/web/src/components/editor/CodeEditor.css b/web/src/components/features/editor/CodeEditor.css
similarity index 100%
rename from web/src/components/editor/CodeEditor.css
rename to web/src/components/features/editor/CodeEditor.css
diff --git a/web/src/components/editor/CodeEditor.tsx b/web/src/components/features/editor/CodeEditor.tsx
similarity index 98%
rename from web/src/components/editor/CodeEditor.tsx
rename to web/src/components/features/editor/CodeEditor.tsx
index 7fe3b6c9..419570a7 100644
--- a/web/src/components/editor/CodeEditor.tsx
+++ b/web/src/components/features/editor/CodeEditor.tsx
@@ -39,7 +39,7 @@ interface CodeEditorState {
   options: s.monaco,
   vim: s.vim,
 }))
-export default class CodeEditor extends React.Component<any, CodeEditorState> {
+export class CodeEditor extends React.Component<any, CodeEditorState> {
   private analyzer?: Analyzer;
   private _previousTimeout: any;
   private editorInstance?: editor.IStandaloneCodeEditor;
diff --git a/web/src/components/editor/FlexContainer.tsx b/web/src/components/features/editor/FlexContainer.tsx
similarity index 62%
rename from web/src/components/editor/FlexContainer.tsx
rename to web/src/components/features/editor/FlexContainer.tsx
index 3d8ef00f..b95e730c 100644
--- a/web/src/components/editor/FlexContainer.tsx
+++ b/web/src/components/features/editor/FlexContainer.tsx
@@ -1,6 +1,6 @@
 import React, { FC, PropsWithChildren } from 'react';
 
-const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
+export const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
   <div style={{
     background: '#000',
     flex: '1 1',
@@ -9,5 +9,3 @@ const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
     {children}
   </div>
 );
-
-export default FlexContainer;
diff --git a/web/src/components/editor/commands.ts b/web/src/components/features/editor/commands.ts
similarity index 100%
rename from web/src/components/editor/commands.ts
rename to web/src/components/features/editor/commands.ts
diff --git a/web/src/components/editor/props.ts b/web/src/components/features/editor/props.ts
similarity index 100%
rename from web/src/components/editor/props.ts
rename to web/src/components/features/editor/props.ts
diff --git a/web/src/components/editor/provider.ts b/web/src/components/features/editor/provider.ts
similarity index 100%
rename from web/src/components/editor/provider.ts
rename to web/src/components/features/editor/provider.ts
diff --git a/web/src/components/editor/snippets.ts b/web/src/components/features/editor/snippets.ts
similarity index 100%
rename from web/src/components/editor/snippets.ts
rename to web/src/components/features/editor/snippets.ts
diff --git a/web/src/components/editor/utils.ts b/web/src/components/features/editor/utils.ts
similarity index 100%
rename from web/src/components/editor/utils.ts
rename to web/src/components/features/editor/utils.ts
diff --git a/web/src/components/inspector/Console/Console.css b/web/src/components/features/inspector/Console/Console.css
similarity index 100%
rename from web/src/components/inspector/Console/Console.css
rename to web/src/components/features/inspector/Console/Console.css
diff --git a/web/src/components/inspector/Console/Console.tsx b/web/src/components/features/inspector/Console/Console.tsx
similarity index 100%
rename from web/src/components/inspector/Console/Console.tsx
rename to web/src/components/features/inspector/Console/Console.tsx
diff --git a/web/src/components/inspector/Console/format.ts b/web/src/components/features/inspector/Console/format.ts
similarity index 96%
rename from web/src/components/inspector/Console/format.ts
rename to web/src/components/features/inspector/Console/format.ts
index e07864fd..7bf6e0ce 100644
--- a/web/src/components/inspector/Console/format.ts
+++ b/web/src/components/features/inspector/Console/format.ts
@@ -1,4 +1,4 @@
-import type { EvalEvent } from '@services/api';
+import type { EvalEvent } from '~/services/api';
 
 const imgRegEx = /\bIMAGE:([A-Za-z0-9=+/]+)\b/;
 
diff --git a/web/src/components/inspector/Console/index.ts b/web/src/components/features/inspector/Console/index.ts
similarity index 100%
rename from web/src/components/inspector/Console/index.ts
rename to web/src/components/features/inspector/Console/index.ts
diff --git a/web/src/components/inspector/Console/utils.ts b/web/src/components/features/inspector/Console/utils.ts
similarity index 100%
rename from web/src/components/inspector/Console/utils.ts
rename to web/src/components/features/inspector/Console/utils.ts
diff --git a/web/src/components/inspector/InspectorPanel/InspectorPanel.css b/web/src/components/features/inspector/InspectorPanel/InspectorPanel.css
similarity index 100%
rename from web/src/components/inspector/InspectorPanel/InspectorPanel.css
rename to web/src/components/features/inspector/InspectorPanel/InspectorPanel.css
diff --git a/web/src/components/inspector/InspectorPanel/InspectorPanel.tsx b/web/src/components/features/inspector/InspectorPanel/InspectorPanel.tsx
similarity index 93%
rename from web/src/components/inspector/InspectorPanel/InspectorPanel.tsx
rename to web/src/components/features/inspector/InspectorPanel/InspectorPanel.tsx
index ab58a464..5a2171a9 100644
--- a/web/src/components/inspector/InspectorPanel/InspectorPanel.tsx
+++ b/web/src/components/features/inspector/InspectorPanel/InspectorPanel.tsx
@@ -9,8 +9,8 @@ import {
   VscSplitVertical
 } from 'react-icons/vsc';
 
-import RunOutput from '~/components/inspector/RunOutput';
-import PanelHeader from '~/components/core/Panel/PanelHeader';
+import { ConnectedRunOutput } from '../RunOutput';
+import { PanelHeader } from '~/components/elements/panel/PanelHeader';
 import {LayoutType, DEFAULT_PANEL_HEIGHT, DEFAULT_PANEL_WIDTH} from '~/styles/layout';
 import './InspectorPanel.css';
 
@@ -32,7 +32,7 @@ interface Props extends ResizePanelParams {
   onViewChange?: (changes: ResizePanelParams) => void
 }
 
-const InspectorPanel: React.FC<Props> = ({
+export const InspectorPanel: React.FC<Props> = ({
   layout = LayoutType.Vertical,
   height = DEFAULT_PANEL_HEIGHT,
   width= DEFAULT_PANEL_WIDTH,
@@ -116,10 +116,8 @@ const InspectorPanel: React.FC<Props> = ({
         }}
       />
       <div className="InspectorPanel__container" hidden={isCollapsed}>
-        <RunOutput />
+        <ConnectedRunOutput />
       </div>
     </Resizable>
   );
 };
-
-export default InspectorPanel;
diff --git a/web/src/components/inspector/RunOutput/RunOutput.css b/web/src/components/features/inspector/RunOutput/RunOutput.css
similarity index 100%
rename from web/src/components/inspector/RunOutput/RunOutput.css
rename to web/src/components/features/inspector/RunOutput/RunOutput.css
diff --git a/web/src/components/inspector/RunOutput/RunOutput.tsx b/web/src/components/features/inspector/RunOutput/RunOutput.tsx
similarity index 93%
rename from web/src/components/inspector/RunOutput/RunOutput.tsx
rename to web/src/components/features/inspector/RunOutput/RunOutput.tsx
index 5776bb00..4bd58b4e 100644
--- a/web/src/components/inspector/RunOutput/RunOutput.tsx
+++ b/web/src/components/features/inspector/RunOutput/RunOutput.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {MessageBar, MessageBarType, useTheme} from '@fluentui/react';
 
-import { Console } from '~/components/inspector/Console';
+import { Console } from '~/components/features/inspector/Console';
 import {connect, type StatusState} from '~/store';
 import type { TerminalState } from '~/store/terminal';
 import type {MonacoSettings} from '~/services/config';
@@ -74,10 +74,9 @@ const RunOutput: React.FC<StateProps & OwnProps> = ({ status, monaco, terminal }
   )
 }
 
-const ConnectedRunOutput = connect<StateProps, OwnProps>((
+export const ConnectedRunOutput = connect<StateProps, OwnProps>((
   { status, monaco, terminal }
 ) => ({
   status, monaco, terminal
 }))(RunOutput);
 
-export default ConnectedRunOutput;
diff --git a/web/src/components/features/inspector/RunOutput/index.ts b/web/src/components/features/inspector/RunOutput/index.ts
new file mode 100644
index 00000000..6b3d885e
--- /dev/null
+++ b/web/src/components/features/inspector/RunOutput/index.ts
@@ -0,0 +1 @@
+export * from './RunOutput'
diff --git a/web/src/components/settings/SettingsModal.tsx b/web/src/components/features/settings/SettingsModal.tsx
similarity index 97%
rename from web/src/components/settings/SettingsModal.tsx
rename to web/src/components/features/settings/SettingsModal.tsx
index 434aca83..405010e7 100644
--- a/web/src/components/settings/SettingsModal.tsx
+++ b/web/src/components/features/settings/SettingsModal.tsx
@@ -9,9 +9,9 @@ import {
   PivotItem
 } from '@fluentui/react';
 
-import ThemeableComponent from '~/components/utils/ThemeableComponent';
+import { ThemeableComponent } from '~/components/utils/ThemeableComponent';
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
-import SettingsProperty from './SettingsProperty';
+import { SettingsProperty } from './SettingsProperty';
 import { DEFAULT_FONT } from '~/services/fonts';
 import type { MonacoSettings } from '~/services/config';
 import type { TerminalSettings, RenderingBackend } from '~/store/terminal';
@@ -52,7 +52,7 @@ interface SettingsModalState {
   monaco: state.monaco,
   terminal: state.terminal.settings,
 }))
-export default class SettingsModal extends ThemeableComponent<SettingsProps, SettingsModalState> {
+export class SettingsModal extends ThemeableComponent<SettingsProps, SettingsModalState> {
   private titleID = 'Settings';
   private subtitleID = 'SettingsSubText';
   private changes: SettingsChanges = {};
diff --git a/web/src/components/settings/SettingsProperty.tsx b/web/src/components/features/settings/SettingsProperty.tsx
similarity index 91%
rename from web/src/components/settings/SettingsProperty.tsx
rename to web/src/components/features/settings/SettingsProperty.tsx
index e4c8d2c9..ef558110 100644
--- a/web/src/components/settings/SettingsProperty.tsx
+++ b/web/src/components/features/settings/SettingsProperty.tsx
@@ -7,7 +7,7 @@ interface SettingsSectionProps {
   control: JSX.Element
 }
 
-export default function SettingsProperty(props: SettingsSectionProps) {
+export function SettingsProperty(props: SettingsSectionProps) {
   if (props.description) {
     return (
       <div className={settingsPropStyles.block}>
diff --git a/web/src/components/settings/SettingsSection.tsx b/web/src/components/features/settings/SettingsSection.tsx
similarity index 82%
rename from web/src/components/settings/SettingsSection.tsx
rename to web/src/components/features/settings/SettingsSection.tsx
index e1d7ba48..0a53a284 100644
--- a/web/src/components/settings/SettingsSection.tsx
+++ b/web/src/components/features/settings/SettingsSection.tsx
@@ -6,7 +6,7 @@ interface SettingsSectionProps {
   children: JSX.Element | JSX.Element[]
 }
 
-export default function SettingsSection(props: SettingsSectionProps) {
+export function SettingsSection(props: SettingsSectionProps) {
   return (
     <div className={settingsSectionStyles.section}>
       <div className={settingsSectionStyles.title}>{props.title}</div>
diff --git a/web/src/components/settings/options.ts b/web/src/components/features/settings/options.ts
similarity index 100%
rename from web/src/components/settings/options.ts
rename to web/src/components/features/settings/options.ts
diff --git a/web/src/components/settings/styles.tsx b/web/src/components/features/settings/styles.tsx
similarity index 100%
rename from web/src/components/settings/styles.tsx
rename to web/src/components/features/settings/styles.tsx
diff --git a/web/src/components/inputs/RunTargetSelector/RunTargetSelector.tsx b/web/src/components/inputs/RunTargetSelector/RunTargetSelector.tsx
index 1b3194a7..43979934 100644
--- a/web/src/components/inputs/RunTargetSelector/RunTargetSelector.tsx
+++ b/web/src/components/inputs/RunTargetSelector/RunTargetSelector.tsx
@@ -1,41 +1,41 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import {Dropdown, IDropdownStyles} from '@fluentui/react';
-import {RunTargetConfig} from "~/services/config";
+import {RunTargetConfig} from '~/services/config';
+import {VersionsInfo} from '~/services/api';
 import {
   StateDispatch,
   connect,
   newRunTargetChangeDispatcher,
-} from "~/store";
+} from '~/store';
 
-import {onRenderOption, onRenderTitle} from "./dropdown";
+import {onRenderOption, onRenderTitle} from './dropdown';
 import {
   createDropdownOptions,
   DropdownOption,
   dropdownOptionsFromResponse,
   keyFromOption,
-} from "./options";
+} from './options';
 
-import "./RunTargetSelector.css";
-import {VersionsInfo} from "@services/api";
+import './RunTargetSelector.css';
 
 const dropdownStyles: Partial<IDropdownStyles> = {
   callout: {
-    minWidth: "256px"
+    minWidth: '256px'
   },
   dropdown: {
-    maxWidth: "10rem"
+    maxWidth: '10rem'
   },
   dropdownOptionText: { overflow: 'visible', whiteSpace: 'normal' },
   dropdownItem: {
     height: 'auto',
-    paddingTop: ".3rem",
-    paddingBottom: ".3rem"
+    paddingTop: '.3rem',
+    paddingBottom: '.3rem'
   },
   dropdownItemSelected: {
     height: 'auto',
-    paddingTop: ".3rem",
-    paddingBottom: ".3rem"
+    paddingTop: '.3rem',
+    paddingBottom: '.3rem'
   },
 };
 
@@ -53,7 +53,7 @@ interface Props extends OwnProps, StateProps {
   dispatch: StateDispatch
 }
 
-const RunTargetSelector: React.FC<Props> = ({
+const RunTargetSelectorBase: React.FC<Props> = ({
   responsive,
   disabled,
   runTarget,
@@ -97,9 +97,7 @@ const RunTargetSelector: React.FC<Props> = ({
   )
 }
 
-const ConnectedRunTargetSelector = connect<StateProps, OwnProps>
+export const RunTargetSelector = connect<StateProps, OwnProps>
 (({runTarget}) => ({runTarget}))(
-  RunTargetSelector
+  RunTargetSelectorBase
 );
-
-export default ConnectedRunTargetSelector;
diff --git a/web/src/components/inputs/RunTargetSelector/index.ts b/web/src/components/inputs/RunTargetSelector/index.ts
index a3a17208..561f7128 100644
--- a/web/src/components/inputs/RunTargetSelector/index.ts
+++ b/web/src/components/inputs/RunTargetSelector/index.ts
@@ -1 +1 @@
-export {default} from './RunTargetSelector';
+export * from './RunTargetSelector';
diff --git a/web/src/components/inspector/RunOutput/index.ts b/web/src/components/inspector/RunOutput/index.ts
deleted file mode 100644
index fbad5ade..00000000
--- a/web/src/components/inspector/RunOutput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './RunOutput'
diff --git a/web/src/components/core/Header/Header.css b/web/src/components/layout/Header/Header.css
similarity index 100%
rename from web/src/components/core/Header/Header.css
rename to web/src/components/layout/Header/Header.css
diff --git a/web/src/components/core/Header/Header.tsx b/web/src/components/layout/Header/Header.tsx
similarity index 95%
rename from web/src/components/core/Header/Header.tsx
rename to web/src/components/layout/Header/Header.tsx
index 36c6247d..cafce1c3 100644
--- a/web/src/components/core/Header/Header.tsx
+++ b/web/src/components/layout/Header/Header.tsx
@@ -6,11 +6,11 @@ import {
 
 import apiClient, { type VersionsInfo } from "~/services/api";
 import { newAddNotificationAction, NotificationType } from "~/store/notifications";
-import SettingsModal, { type SettingsChanges } from '~/components/settings/SettingsModal';
-import ThemeableComponent from '~/components/utils/ThemeableComponent';
-import AboutModal from '~/components/modals/AboutModal';
-import RunTargetSelector from '~/components/inputs/RunTargetSelector';
-import SharePopup from '~/components/utils/SharePopup';
+import { SettingsModal, type SettingsChanges } from '~/components/features/settings/SettingsModal';
+import { ThemeableComponent } from '~/components/utils/ThemeableComponent';
+import { AboutModal } from '~/components/modals/AboutModal';
+import { RunTargetSelector } from '~/components/inputs/RunTargetSelector';
+import { SharePopup } from '~/components/utils/SharePopup';
 
 import { dispatchTerminalSettingsChange } from '~/store/terminal';
 import {
diff --git a/web/src/components/core/Header/index.ts b/web/src/components/layout/Header/index.ts
similarity index 100%
rename from web/src/components/core/Header/index.ts
rename to web/src/components/layout/Header/index.ts
diff --git a/web/src/components/core/Header/utils.ts b/web/src/components/layout/Header/utils.ts
similarity index 95%
rename from web/src/components/core/Header/utils.ts
rename to web/src/components/layout/Header/utils.ts
index 4761a1e4..c49828d9 100644
--- a/web/src/components/core/Header/utils.ts
+++ b/web/src/components/layout/Header/utils.ts
@@ -1,5 +1,5 @@
 import { ContextualMenuItemType, IContextualMenuItem, IIconProps } from '@fluentui/react';
-import snippets, { Snippet, SnippetType } from '@services/go/snippets';
+import snippets, { Snippet, SnippetType } from '~/services/go/snippets';
 
 const snippetIconTypeMapping: { [type: string]: IIconProps } = {
   [SnippetType.Test]: {
diff --git a/web/src/components/core/Layout/Layout.css b/web/src/components/layout/Layout/Layout.css
similarity index 100%
rename from web/src/components/core/Layout/Layout.css
rename to web/src/components/layout/Layout/Layout.css
diff --git a/web/src/components/core/Layout/Layout.tsx b/web/src/components/layout/Layout/Layout.tsx
similarity index 67%
rename from web/src/components/core/Layout/Layout.tsx
rename to web/src/components/layout/Layout/Layout.tsx
index 2ce55d43..c047fff7 100644
--- a/web/src/components/core/Layout/Layout.tsx
+++ b/web/src/components/layout/Layout/Layout.tsx
@@ -6,10 +6,8 @@ interface Props {
   layout?: LayoutType;
 }
 
-const Layout: React.FC<Props> = ({layout = LayoutType.Vertical, children}) => (
+export const Layout: React.FC<Props> = ({layout = LayoutType.Vertical, children}) => (
   <div className={`Layout Layout--${layout}`}>
     {children}
   </div>
 );
-
-export default Layout;
diff --git a/web/src/components/core/Layout/index.ts b/web/src/components/layout/Layout/index.ts
similarity index 100%
rename from web/src/components/core/Layout/index.ts
rename to web/src/components/layout/Layout/index.ts
diff --git a/web/src/components/core/StatusBar/StatusBar.css b/web/src/components/layout/StatusBar/StatusBar.css
similarity index 100%
rename from web/src/components/core/StatusBar/StatusBar.css
rename to web/src/components/layout/StatusBar/StatusBar.css
diff --git a/web/src/components/core/StatusBar/StatusBar.tsx b/web/src/components/layout/StatusBar/StatusBar.tsx
similarity index 91%
rename from web/src/components/core/StatusBar/StatusBar.tsx
rename to web/src/components/layout/StatusBar/StatusBar.tsx
index 34b41865..bb17b2fe 100644
--- a/web/src/components/core/StatusBar/StatusBar.tsx
+++ b/web/src/components/layout/StatusBar/StatusBar.tsx
@@ -5,9 +5,9 @@ import {VscDebugAlt} from "react-icons/vsc";
 import environment from "~/environment";
 import {StateDispatch, connect} from "~/store";
 
-import EllipsisText from "~/components/utils/EllipsisText";
-import StatusBarItem from "~/components/core/StatusBar/StatusBarItem";
-import VimStatusBarItem from "~/plugins/vim/VimStatusBarItem";
+import { EllipsisText } from "~/components/utils/EllipsisText";
+import { StatusBarItem } from "~/components/layout/StatusBar/StatusBarItem";
+import { VimStatusBarItem } from "~/plugins/vim/VimStatusBarItem";
 
 import "./StatusBar.css";
 
@@ -152,7 +152,7 @@ const StatusBar: React.FC<Props> = ({
   );
 };
 
-const ConnectedStatusBar = connect<StateProps, OwnProps>(
+export const ConnectedStatusBar = connect<StateProps, OwnProps>(
   ({status}) => {
     const {
       loading,
@@ -163,5 +163,3 @@ const ConnectedStatusBar = connect<StateProps, OwnProps>(
     return { loading, lastError, running, markers };
   }
 )(StatusBar);
-
-export default ConnectedStatusBar;
diff --git a/web/src/components/core/StatusBar/StatusBarItem.css b/web/src/components/layout/StatusBar/StatusBarItem.css
similarity index 100%
rename from web/src/components/core/StatusBar/StatusBarItem.css
rename to web/src/components/layout/StatusBar/StatusBarItem.css
diff --git a/web/src/components/core/StatusBar/StatusBarItem.tsx b/web/src/components/layout/StatusBar/StatusBarItem.tsx
similarity index 96%
rename from web/src/components/core/StatusBar/StatusBarItem.tsx
rename to web/src/components/layout/StatusBar/StatusBarItem.tsx
index d546e9f6..65fb1114 100644
--- a/web/src/components/core/StatusBar/StatusBarItem.tsx
+++ b/web/src/components/layout/StatusBar/StatusBarItem.tsx
@@ -48,7 +48,7 @@ const getItemContents = ({icon, iconOnly, imageSrc, title, children}) => (
   </>
 )
 
-const StatusBarItem: React.FC<StatusBarItemProps> = ({
+export const StatusBarItem: React.FC<StatusBarItemProps> = ({
   title,
   className,
   icon,
@@ -107,5 +107,3 @@ const StatusBarItem: React.FC<StatusBarItemProps> = ({
     </div>
   );
 };
-
-export default StatusBarItem;
diff --git a/web/src/components/layout/StatusBar/index.ts b/web/src/components/layout/StatusBar/index.ts
new file mode 100644
index 00000000..eb6d3dde
--- /dev/null
+++ b/web/src/components/layout/StatusBar/index.ts
@@ -0,0 +1 @@
+export * from './StatusBar';
diff --git a/web/src/components/modals/AboutModal/AboutModal.tsx b/web/src/components/modals/AboutModal/AboutModal.tsx
index e4e521c6..af3f69e5 100644
--- a/web/src/components/modals/AboutModal/AboutModal.tsx
+++ b/web/src/components/modals/AboutModal/AboutModal.tsx
@@ -11,7 +11,7 @@ import {
 import { Modal } from '@fluentui/react/lib/Modal';
 import { Link } from '@fluentui/react/lib/Link';
 
-import ChangeLog from './ChangeLog';
+import { ChangeLog } from './ChangeLog';
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
 import environment from "~/environment";
 
@@ -23,7 +23,7 @@ interface AboutModalProps {
   onClose: () => void
 }
 
-const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) => {
+export const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) => {
   const theme = useTheme();
   const contentStyles = getContentStyles(theme);
   const iconButtonStyles = getIconButtonStyles(theme);
@@ -135,4 +135,3 @@ const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) => {
 }
 
 AboutModal.defaultProps = { isOpen: false };
-export default AboutModal;
diff --git a/web/src/components/modals/AboutModal/ChangeLog/ChangeLog.tsx b/web/src/components/modals/AboutModal/ChangeLog/ChangeLog.tsx
index b56a4a3f..5fa22729 100644
--- a/web/src/components/modals/AboutModal/ChangeLog/ChangeLog.tsx
+++ b/web/src/components/modals/AboutModal/ChangeLog/ChangeLog.tsx
@@ -9,7 +9,7 @@ import './ChangeLog.css';
 
 interface Props extends Pick<React.HTMLProps<HTMLDivElement>, 'className' | 'style'> { }
 
-const ChangeLog: React.FC<Props> = ({ className, ...props }) => {
+export const ChangeLog: React.FC<Props> = ({ className, ...props }) => {
   return (
     <div
       className={
@@ -42,5 +42,3 @@ const ChangeLog: React.FC<Props> = ({ className, ...props }) => {
     </div>
   );
 }
-
-export default ChangeLog;
diff --git a/web/src/components/modals/AboutModal/ChangeLog/index.ts b/web/src/components/modals/AboutModal/ChangeLog/index.ts
index 21d61303..58b251cc 100644
--- a/web/src/components/modals/AboutModal/ChangeLog/index.ts
+++ b/web/src/components/modals/AboutModal/ChangeLog/index.ts
@@ -1 +1 @@
-export { default } from './ChangeLog';
+export * from './ChangeLog';
diff --git a/web/src/components/modals/AboutModal/index.tsx b/web/src/components/modals/AboutModal/index.tsx
index fd5f0fb8..dc9fc06d 100644
--- a/web/src/components/modals/AboutModal/index.tsx
+++ b/web/src/components/modals/AboutModal/index.tsx
@@ -1 +1 @@
-export { default } from './AboutModal';
+export * from './AboutModal';
diff --git a/web/src/components/modals/Notification/Notification.tsx b/web/src/components/modals/Notification/Notification.tsx
index 9b8b5a7e..e9baff36 100644
--- a/web/src/components/modals/Notification/Notification.tsx
+++ b/web/src/components/modals/Notification/Notification.tsx
@@ -80,7 +80,7 @@ const NotificationActionButton: React.FC<Omit<NotificationAction, 'key'>> = (
   );
 }
 
-const Notification: React.FunctionComponent<NotificationProps> = ({
+export const Notification: React.FunctionComponent<NotificationProps> = ({
   id,
   title,
   progress,
@@ -171,5 +171,3 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
     </div>
   );
 }
-
-export default Notification;
diff --git a/web/src/components/modals/Notification/NotificationHost.tsx b/web/src/components/modals/Notification/NotificationHost.tsx
index b5b0d88b..b937150a 100644
--- a/web/src/components/modals/Notification/NotificationHost.tsx
+++ b/web/src/components/modals/Notification/NotificationHost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {connect} from "react-redux";
 import {StateDispatch, State} from "~/store";
 import { NotificationsState, newRemoveNotificationAction } from "~/store/notifications";
-import Notification from "./Notification";
+import { Notification } from "./Notification";
 import "./NotificationHost.css";
 
 
@@ -11,7 +11,7 @@ interface Props {
   dispatch?: StateDispatch
 }
 
-const NotificationHost: React.FunctionComponent<Props> = ({notifications, dispatch}) => {
+const NotificationHostBase: React.FunctionComponent<Props> = ({notifications, dispatch}) => {
   return (
     <div className="NotificationHost">
       { notifications ? (
@@ -27,6 +27,6 @@ const NotificationHost: React.FunctionComponent<Props> = ({notifications, dispat
   )
 };
 
-export default connect<Props, any, any, State>(({notifications}) => ({notifications}))(
-  NotificationHost
+export const NotificationHost = connect<Props, any, any, State>(({notifications}) => ({notifications}))(
+  NotificationHostBase
 );
diff --git a/web/src/components/modals/Notification/index.ts b/web/src/components/modals/Notification/index.ts
index b9fa3dc7..bffe072b 100644
--- a/web/src/components/modals/Notification/index.ts
+++ b/web/src/components/modals/Notification/index.ts
@@ -1,2 +1,2 @@
-export {default as Notification} from "./Notification";
-export {default as NotificationHost} from "./NotificationHost";
+export * from "./Notification";
+export * from "./NotificationHost";
diff --git a/web/src/components/pages/NotFoundPage.css b/web/src/components/pages/NotFoundPage/NotFoundPage.css
similarity index 100%
rename from web/src/components/pages/NotFoundPage.css
rename to web/src/components/pages/NotFoundPage/NotFoundPage.css
diff --git a/web/src/components/pages/NotFoundPage.tsx b/web/src/components/pages/NotFoundPage/NotFoundPage.tsx
similarity index 96%
rename from web/src/components/pages/NotFoundPage.tsx
rename to web/src/components/pages/NotFoundPage/NotFoundPage.tsx
index cc5c39ac..95bf0cb6 100644
--- a/web/src/components/pages/NotFoundPage.tsx
+++ b/web/src/components/pages/NotFoundPage/NotFoundPage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import './NotFoundPage.css';
 
-const NotFoundPage: React.FC = () => {
+export const NotFoundPage: React.FC = () => {
   const [catVisible, setCatVisible] = useState(false);
   return (
     <div className="errorPage">
@@ -53,5 +53,3 @@ const NotFoundPage: React.FC = () => {
     </div>
   );
 };
-
-export default NotFoundPage;
diff --git a/web/src/components/pages/NotFoundPage/index.ts b/web/src/components/pages/NotFoundPage/index.ts
new file mode 100644
index 00000000..42eb304b
--- /dev/null
+++ b/web/src/components/pages/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage'
diff --git a/web/src/components/pages/Playground.css b/web/src/components/pages/PlaygroundPage/PlaygroundPage.css
similarity index 100%
rename from web/src/components/pages/Playground.css
rename to web/src/components/pages/PlaygroundPage/PlaygroundPage.css
diff --git a/web/src/components/pages/Playground.tsx b/web/src/components/pages/PlaygroundPage/PlaygroundPage.tsx
similarity index 56%
rename from web/src/components/pages/Playground.tsx
rename to web/src/components/pages/PlaygroundPage/PlaygroundPage.tsx
index 92275ac3..a7826c4b 100644
--- a/web/src/components/pages/Playground.tsx
+++ b/web/src/components/pages/PlaygroundPage/PlaygroundPage.tsx
@@ -6,18 +6,22 @@ import {
   dispatchPanelLayoutChange,
   newSnippetLoadDispatcher,
 } from '~/store';
-import { Header } from '~/components/core/Header';
-import CodeEditor from '~/components/editor/CodeEditor';
-import FlexContainer from '~/components/editor/FlexContainer';
-import InspectorPanel from '~/components/inspector/InspectorPanel/InspectorPanel';
+import { Header } from '~/components/layout/Header';
+import { CodeEditor } from '~/components/features/editor/CodeEditor';
+import { FlexContainer } from '~/components/features/editor/FlexContainer';
+import { InspectorPanel } from '~/components/features/inspector/InspectorPanel/InspectorPanel';
 import { NotificationHost } from "~/components/modals/Notification";
-import Layout from '~/components/core/Layout/Layout';
-import StatusBar from '~/components/core/StatusBar';
+import { Layout } from '~/components/layout/Layout/Layout';
+import { ConnectedStatusBar } from '~/components/layout/StatusBar';
 
-import './Playground.css';
+import './PlaygroundPage.css';
+
+interface PageParams {
+  snippetID: string
+}
 
 const CodeContainer = connect()(({ dispatch }: any) => {
-  const { snippetID } = useParams();
+  const { snippetID } = useParams<PageParams>();
   useEffect(() => {
     dispatch(newSnippetLoadDispatcher(snippetID));
   }, [snippetID, dispatch]);
@@ -27,7 +31,7 @@ const CodeContainer = connect()(({ dispatch }: any) => {
   );
 })
 
-const Playground = connect(({ panel }: any) => ({ panelProps: panel }))(({ panelProps, dispatch }: any) => {
+export const PlaygroundPage = connect(({ panel }: any) => ({ panelProps: panel }))(({ panelProps, dispatch }: any) => {
   return (
     <div className="Playground">
       <Header />
@@ -43,9 +47,7 @@ const Playground = connect(({ panel }: any) => ({ panelProps: panel }))(({ panel
         />
         <NotificationHost />
       </Layout>
-      <StatusBar />
+      <ConnectedStatusBar />
     </div>
   );
 });
-
-export default Playground;
diff --git a/web/src/components/pages/PlaygroundPage/index.ts b/web/src/components/pages/PlaygroundPage/index.ts
new file mode 100644
index 00000000..34cee0ea
--- /dev/null
+++ b/web/src/components/pages/PlaygroundPage/index.ts
@@ -0,0 +1 @@
+export * from './PlaygroundPage';
diff --git a/web/src/components/utils/ConnectedThemeProvider.tsx b/web/src/components/utils/ConnectedThemeProvider.tsx
index 118ddeeb..895d8e09 100644
--- a/web/src/components/utils/ConnectedThemeProvider.tsx
+++ b/web/src/components/utils/ConnectedThemeProvider.tsx
@@ -23,7 +23,7 @@ const getInitialTheme = ({darkMode, useSystemTheme}: SettingsState) => {
   return { currentTheme: darkMode ? ThemeVariant.dark : ThemeVariant.light, matchMedia: false};
 };
 
-const ConnectedThemeProvider: React.FunctionComponent<Props> = ({settings, children, dispatch, ...props}) => {
+const ThemeProviderContainer: React.FunctionComponent<Props> = ({settings, children, dispatch, ...props}) => {
   const { currentTheme, matchMedia } = getInitialTheme(settings as SettingsState);
   const systemTheme = usePrefersColorScheme(currentTheme, matchMedia);
   useEffect(() => {
@@ -37,5 +37,5 @@ const ConnectedThemeProvider: React.FunctionComponent<Props> = ({settings, child
   );
 };
 
-export default connect(({settings, dispatch}: any) =>
-  ({settings, dispatch}))(ConnectedThemeProvider);
+export const ConnectedThemeProvider = connect(({settings, dispatch}: any) =>
+  ({settings, dispatch}))(ThemeProviderContainer);
diff --git a/web/src/components/utils/EllipsisText.tsx b/web/src/components/utils/EllipsisText.tsx
index b0151dd1..35d10398 100644
--- a/web/src/components/utils/EllipsisText.tsx
+++ b/web/src/components/utils/EllipsisText.tsx
@@ -3,10 +3,8 @@ import './EllipsisText.css';
 
 interface Props {}
 
-const EllipsisText: React.FC<Props> = ({children, ...props}) => (
+export const EllipsisText: React.FC<Props> = ({children, ...props}) => (
   <span className="EllipsisText" {...props}>
     {children}
   </span>
 );
-
-export default EllipsisText;
diff --git a/web/src/components/utils/SharePopup.tsx b/web/src/components/utils/SharePopup.tsx
index b3112e54..f628dad2 100644
--- a/web/src/components/utils/SharePopup.tsx
+++ b/web/src/components/utils/SharePopup.tsx
@@ -1,4 +1,4 @@
-import React, {FC, useMemo} from 'react';
+import React, {type FC, useMemo} from 'react';
 import copy from 'copy-to-clipboard';
 import { Target } from '@fluentui/react-hooks';
 import {
@@ -17,7 +17,7 @@ interface Props {
   onDismiss?: () => void
 }
 
-const SharePopup: FC<Props> = ({ visible, snippetId, originUrl, onDismiss, target }) => {
+export const SharePopup: FC<Props> = ({ visible, snippetId, originUrl, onDismiss, target }) => {
   const { semanticColors: { bodyBackground } } = useTheme();
   const primaryButtonProps: IButtonProps = useMemo(
     () => ({
@@ -67,5 +67,3 @@ const SharePopup: FC<Props> = ({ visible, snippetId, originUrl, onDismiss, targe
 SharePopup.defaultProps = {
   originUrl: window?.location?.origin
 }
-
-export default SharePopup;
diff --git a/web/src/components/utils/ThemeableComponent.tsx b/web/src/components/utils/ThemeableComponent.tsx
index 56dd77b2..865cd667 100644
--- a/web/src/components/utils/ThemeableComponent.tsx
+++ b/web/src/components/utils/ThemeableComponent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {ITheme, ThemeContext} from '@fluentui/react';
 
-export default class ThemeableComponent<P=any, S=any> extends React.Component<P, S> {
+export class ThemeableComponent<P=any, S=any> extends React.Component<P, S> {
   static contextType = ThemeContext;
 
   get theme() {
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 166c2319..6377f9f9 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initializeIcons } from '@fluentui/react/lib/Icons';
-import { registerGoLanguageProvider } from '~/components/editor/provider';
+import { registerGoLanguageProvider } from '~/components/features/editor/provider';
 import apiClient from '~/services/api';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import App from './App';
+import { App } from './App';
 import './index.css';
 
 // Polyfills
diff --git a/web/src/plugins/vim/VimStatusBarItem.tsx b/web/src/plugins/vim/VimStatusBarItem.tsx
index 715be1df..6ae37250 100644
--- a/web/src/plugins/vim/VimStatusBarItem.tsx
+++ b/web/src/plugins/vim/VimStatusBarItem.tsx
@@ -5,7 +5,7 @@ import { SiVim } from 'react-icons/si';
 import { State } from '~/store';
 import { Nullable } from '~/utils/types';
 import { VimMode, VimState, VimSubMode } from '~/store/vim/state';
-import StatusBarItem from '~/components/core/StatusBar/StatusBarItem';
+import { StatusBarItem } from '~/components/layout/StatusBar/StatusBarItem';
 import './VimStatusBarItem.css'
 
 
@@ -38,7 +38,7 @@ const getItemText = (state: Nullable<VimState>): Nullable<string> => {
   }
 }
 
-const VimStatusBarItem: React.FC<Props> = ({vimState}) => {
+const VimStatusBarItemBase: React.FC<Props> = ({vimState}) => {
   if (!vimState) {
     return null;
   }
@@ -57,6 +57,6 @@ const VimStatusBarItem: React.FC<Props> = ({vimState}) => {
   )
 }
 
-export default connect(
+export const VimStatusBarItem = connect(
   ({vim}: State) => ({ vimState: vim})
-)(VimStatusBarItem);
+)(VimStatusBarItemBase);
diff --git a/web/src/services/gorepl/pkgcache/pkgindex.ts b/web/src/services/gorepl/pkgcache/pkgindex.ts
index 2899a91b..5cbf8936 100644
--- a/web/src/services/gorepl/pkgcache/pkgindex.ts
+++ b/web/src/services/gorepl/pkgcache/pkgindex.ts
@@ -1,5 +1,5 @@
 import * as packagedb from "~/lib/gowasm/bindings/packagedb";
-import {PackageCacheDB} from "@services/gorepl/pkgcache/db";
+import {PackageCacheDB} from "~/services/gorepl/pkgcache/db";
 
 export class PackageIndex implements packagedb.PackageIndex {
   constructor(private db: PackageCacheDB) {}
diff --git a/web/src/store/dispatchers/snippets.ts b/web/src/store/dispatchers/snippets.ts
index 3ec87b44..f02efe12 100644
--- a/web/src/store/dispatchers/snippets.ts
+++ b/web/src/store/dispatchers/snippets.ts
@@ -2,7 +2,7 @@ import {saveAs} from 'file-saver';
 import {replace} from "connected-react-router";
 
 import client from "~/services/api";
-import {DEMO_CODE} from '~/components/editor/props';
+import {DEMO_CODE} from '~/components/features/editor/props';
 
 import { StateProvider, DispatchFn } from "../helpers";
 import { newAddNotificationAction, NotificationType } from "../notifications";
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
index 1deda9f1..ff1da424 100644
--- a/web/src/utils/theme.ts
+++ b/web/src/utils/theme.ts
@@ -1,5 +1,5 @@
 import {useState, useEffect} from "react";
-import {DarkTheme, LightTheme} from "@services/colors";
+import {DarkTheme, LightTheme} from "~/services/colors";
 
 const query = '(prefers-color-scheme)';
 
diff --git a/web/tsconfig.paths.json b/web/tsconfig.paths.json
index d1d99d4f..f92bea53 100644
--- a/web/tsconfig.paths.json
+++ b/web/tsconfig.paths.json
@@ -2,15 +2,6 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@components/*": [
-        "./components/*"
-      ],
-      "@services/*": [
-        "./services/*"
-      ],
-      "@store/*": [
-        "./store/*"
-      ],
       "~/*": [
         "./*"
       ]
diff --git a/web/yarn.lock b/web/yarn.lock
index 31357bd0..ee7e2d02 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2099,6 +2099,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/file-saver@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.7.tgz#8dbb2f24bdc7486c54aa854eb414940bbd056f7d"
+  integrity sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -2106,6 +2111,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
+
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2225,6 +2235,23 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.20"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
+  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"