diff --git a/src/UserMenuContainer.jsx b/src/UserMenuContainer.jsx
index 4229f69c..b4af921f 100644
--- a/src/UserMenuContainer.jsx
+++ b/src/UserMenuContainer.jsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import { useClient } from "./ClientContext";
-import { useProfile } from "./useProfile";
+import { useProfile } from "./profile/useProfile";
 import { useModalTriggerState } from "./Modal";
-import { ProfileModal } from "./ProfileModal";
+import { ProfileModal } from "./profile/ProfileModal";
 import { UserMenu } from "./UserMenu";
 
 export function UserMenuContainer({ disableLogout }) {
diff --git a/src/auth/LoginPage.jsx b/src/auth/LoginPage.jsx
index 5a8a4d26..a2bbe161 100644
--- a/src/auth/LoginPage.jsx
+++ b/src/auth/LoginPage.jsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, { useCallback, useRef, useState, useMemo } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
-import { FieldRow, InputField, ErrorMessage } from "../Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { defaultHomeserver, defaultHomeserverHost } from "../matrix-utils";
 import styles from "./LoginPage.module.css";
diff --git a/src/auth/RegisterPage.jsx b/src/auth/RegisterPage.jsx
index cd05b8b0..88e7f212 100644
--- a/src/auth/RegisterPage.jsx
+++ b/src/auth/RegisterPage.jsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
-import { FieldRow, InputField, ErrorMessage } from "../Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { useClient } from "../ClientContext";
 import { defaultHomeserverHost } from "../matrix-utils";
diff --git a/src/home/JoinExistingCallModal.jsx b/src/home/JoinExistingCallModal.jsx
index ec9435f9..8a749f93 100644
--- a/src/home/JoinExistingCallModal.jsx
+++ b/src/home/JoinExistingCallModal.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
-import { FieldRow } from "../Input";
+import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";
 
 export function JoinExistingCallModal({ onJoin, ...rest }) {
diff --git a/src/home/RegisteredView.jsx b/src/home/RegisteredView.jsx
index 1c73177b..f728adff 100644
--- a/src/home/RegisteredView.jsx
+++ b/src/home/RegisteredView.jsx
@@ -4,7 +4,7 @@ import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
 import styles from "./RegisteredView.module.css";
-import { FieldRow, InputField, ErrorMessage } from "../Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
diff --git a/src/home/UnauthenticatedView.jsx b/src/home/UnauthenticatedView.jsx
index c4eeca79..2949fa8d 100644
--- a/src/home/UnauthenticatedView.jsx
+++ b/src/home/UnauthenticatedView.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { useHistory } from "react-router-dom";
-import { FieldRow, InputField, ErrorMessage } from "../Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
diff --git a/src/Input.jsx b/src/input/Input.jsx
similarity index 95%
rename from src/Input.jsx
rename to src/input/Input.jsx
index b9ccdc1a..fa628e5d 100644
--- a/src/Input.jsx
+++ b/src/input/Input.jsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Input.module.css";
-import { ReactComponent as CheckIcon } from "./icons/Check.svg";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 
 export function FieldRow({ children, rightAlign, className, ...rest }) {
   return (
diff --git a/src/Input.module.css b/src/input/Input.module.css
similarity index 100%
rename from src/Input.module.css
rename to src/input/Input.module.css
diff --git a/src/SelectInput.jsx b/src/input/SelectInput.jsx
similarity index 90%
rename from src/SelectInput.jsx
rename to src/input/SelectInput.jsx
index 3f990b7c..956b9e0a 100644
--- a/src/SelectInput.jsx
+++ b/src/input/SelectInput.jsx
@@ -2,11 +2,11 @@ import React, { useRef } from "react";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
-import { Popover } from "./popover/Popover";
-import { ListBox } from "./ListBox";
+import { Popover } from "../popover/Popover";
+import { ListBox } from "../ListBox";
 import styles from "./SelectInput.module.css";
 import classNames from "classnames";
-import { ReactComponent as ArrowDownIcon } from "./icons/ArrowDown.svg";
+import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 
 export function SelectInput(props) {
   const state = useSelectState(props);
diff --git a/src/SelectInput.module.css b/src/input/SelectInput.module.css
similarity index 100%
rename from src/SelectInput.module.css
rename to src/input/SelectInput.module.css
diff --git a/src/ProfileModal.jsx b/src/profile/ProfileModal.jsx
similarity index 93%
rename from src/ProfileModal.jsx
rename to src/profile/ProfileModal.jsx
index 5b7e47f7..3a4b5dcc 100644
--- a/src/ProfileModal.jsx
+++ b/src/profile/ProfileModal.jsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Button } from "./button";
+import { Button } from "../button";
 import { useProfile } from "./useProfile";
-import { FieldRow, InputField, ErrorMessage } from "./Input";
-import { Modal, ModalContent } from "./Modal";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Modal, ModalContent } from "../Modal";
 
 export function ProfileModal({
   client,
diff --git a/src/ProfileModal.module.css b/src/profile/ProfileModal.module.css
similarity index 100%
rename from src/ProfileModal.module.css
rename to src/profile/ProfileModal.module.css
diff --git a/src/useProfile.js b/src/profile/useProfile.js
similarity index 97%
rename from src/useProfile.js
rename to src/profile/useProfile.js
index 0f164f7c..2483774a 100644
--- a/src/useProfile.js
+++ b/src/profile/useProfile.js
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
-import { getAvatarUrl } from "./matrix-utils";
+import { getAvatarUrl } from "../matrix-utils";
 
 export function useProfile(client) {
   const [{ loading, displayName, avatarUrl, error, success }, setState] =
diff --git a/src/room/CallEndedView.jsx b/src/room/CallEndedView.jsx
index 54f7c916..29cffbfc 100644
--- a/src/room/CallEndedView.jsx
+++ b/src/room/CallEndedView.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./CallEndedView.module.css";
 import { LinkButton } from "../button";
-import { useProfile } from "../useProfile";
+import { useProfile } from "../profile/useProfile";
 import { Subtitle, Body, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 
diff --git a/src/room/RoomAuthView.jsx b/src/room/RoomAuthView.jsx
index d57ac787..27b42544 100644
--- a/src/room/RoomAuthView.jsx
+++ b/src/room/RoomAuthView.jsx
@@ -5,7 +5,7 @@ import { Body, Caption, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { useLocation } from "react-router-dom";
 import { useRecaptcha } from "../auth/useRecaptcha";
-import { FieldRow, InputField, ErrorMessage } from "../Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { Form } from "../form/Form";
diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx
index d6e94f79..0c694c6e 100644
--- a/src/settings/SettingsModal.jsx
+++ b/src/settings/SettingsModal.jsx
@@ -5,10 +5,10 @@ import { TabContainer, TabItem } from "../Tabs";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
 import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
-import { SelectInput } from "../SelectInput";
+import { SelectInput } from "../input/SelectInput";
 import { Item } from "@react-stately/collections";
 import { useMediaHandler } from "./useMediaHandler";
-import { FieldRow, InputField } from "../Input";
+import { FieldRow, InputField } from "../input/Input";
 
 export function SettingsModal({
   client,