diff --git a/src/shared/components/Modals/ClickableModalOverlay.tsx b/src/shared/components/Dialogs/ClickableModalOverlay.tsx
similarity index 100%
rename from src/shared/components/Modals/ClickableModalOverlay.tsx
rename to src/shared/components/Dialogs/ClickableModalOverlay.tsx
diff --git a/src/shared/components/Modal.tsx b/src/shared/components/Dialogs/Modal.tsx
similarity index 98%
rename from src/shared/components/Modal.tsx
rename to src/shared/components/Dialogs/Modal.tsx
index 069541d1b..ab84eac58 100644
--- a/src/shared/components/Modal.tsx
+++ b/src/shared/components/Dialogs/Modal.tsx
@@ -2,9 +2,9 @@ import classNames from "classnames"
 import React, { CSSProperties } from "react"
 import { easings, useSpring, animated } from "@react-spring/web"
 
-import Portal from "./Portal"
-import { noop } from "../utils"
-import ClickableModalOverlay from "./Modals/ClickableModalOverlay"
+import Portal from "../Interface/Portal"
+import { noop } from "../../utils"
+import ClickableModalOverlay from "./ClickableModalOverlay"
 
 function CloseBtn({ onClick, style }: React.SVGProps<SVGSVGElement>) {
   return (
diff --git a/src/shared/components/Panel.tsx b/src/shared/components/Dialogs/Panel.tsx
similarity index 98%
rename from src/shared/components/Panel.tsx
rename to src/shared/components/Dialogs/Panel.tsx
index b7b22d80d..e36cc4b9c 100644
--- a/src/shared/components/Panel.tsx
+++ b/src/shared/components/Dialogs/Panel.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, CSSProperties } from "react"
 import classNames from "classnames"
 import { animated } from "@react-spring/web"
 import { useRealmPanelTransition } from "shared/hooks"
-import Portal from "./Portal"
+import Portal from "../Interface/Portal"
 
 type PortalSectionProps = {
   children: ReactNode
diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Dialogs/Popup.tsx
similarity index 97%
rename from src/shared/components/Popup.tsx
rename to src/shared/components/Dialogs/Popup.tsx
index b527b3a9d..07d8ca9a2 100644
--- a/src/shared/components/Popup.tsx
+++ b/src/shared/components/Dialogs/Popup.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react"
 import { animated } from "@react-spring/web"
 import { useVisibilityTransition } from "shared/hooks"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import closeIcon from "shared/assets/icons/s/close.svg"
 
 export type PopupProps = {
diff --git a/src/shared/components/Tooltip.tsx b/src/shared/components/Dialogs/Tooltip.tsx
similarity index 98%
rename from src/shared/components/Tooltip.tsx
rename to src/shared/components/Dialogs/Tooltip.tsx
index 71c8dc80a..38cbe8be1 100644
--- a/src/shared/components/Tooltip.tsx
+++ b/src/shared/components/Dialogs/Tooltip.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties, ReactNode, useState } from "react"
 import infoIcon from "shared/assets/icons/m/info.svg"
 import { animated } from "@react-spring/web"
 import { useVisibilityTransition } from "shared/hooks"
-import Icon from "./Icon"
+import Icon from "../Media/Icon"
 
 type TooltipProps = {
   children: ReactNode
diff --git a/src/shared/components/Accordion.tsx b/src/shared/components/Interface/Accordion.tsx
similarity index 98%
rename from src/shared/components/Accordion.tsx
rename to src/shared/components/Interface/Accordion.tsx
index 98868735b..d1b2f0a35 100644
--- a/src/shared/components/Accordion.tsx
+++ b/src/shared/components/Interface/Accordion.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames"
 import React, { CSSProperties, useEffect, useState } from "react"
-import arrowIcon from "../assets/icons/s/arrow-down.svg"
-import Icon from "./Icon"
+import arrowIcon from "shared/assets/icons/s/arrow-down.svg"
+import Icon from "../Media/Icon"
 
 type AccordionType = "default" | "frame" | "challenge" | "panel"
 
diff --git a/src/shared/components/Button.tsx b/src/shared/components/Interface/Button.tsx
similarity index 100%
rename from src/shared/components/Button.tsx
rename to src/shared/components/Interface/Button.tsx
diff --git a/src/shared/components/Input.tsx b/src/shared/components/Interface/Input.tsx
similarity index 100%
rename from src/shared/components/Input.tsx
rename to src/shared/components/Interface/Input.tsx
diff --git a/src/shared/components/Link.tsx b/src/shared/components/Interface/Link.tsx
similarity index 100%
rename from src/shared/components/Link.tsx
rename to src/shared/components/Interface/Link.tsx
diff --git a/src/shared/components/Portal.tsx b/src/shared/components/Interface/Portal.tsx
similarity index 100%
rename from src/shared/components/Portal.tsx
rename to src/shared/components/Interface/Portal.tsx
diff --git a/src/shared/components/TabPanel.tsx b/src/shared/components/Interface/TabPanel.tsx
similarity index 100%
rename from src/shared/components/TabPanel.tsx
rename to src/shared/components/Interface/TabPanel.tsx
diff --git a/src/shared/components/TahoAmount.tsx b/src/shared/components/Interface/TahoAmount.tsx
similarity index 90%
rename from src/shared/components/TahoAmount.tsx
rename to src/shared/components/Interface/TahoAmount.tsx
index 8d81830f3..33aa6f9ce 100644
--- a/src/shared/components/TahoAmount.tsx
+++ b/src/shared/components/Interface/TahoAmount.tsx
@@ -1,9 +1,9 @@
 import classNames from "classnames"
 import React from "react"
-import { parseTahoAmount, separateThousandsByComma } from "../utils"
-import Icon from "./Icon"
-import lockIcon from "../assets/icons/s/lock.svg"
-import coinIcon from "../assets/taho-coin.svg"
+import lockIcon from "shared/assets/icons/s/lock.svg"
+import coinIcon from "shared/assets/taho-coin.svg"
+import { parseTahoAmount, separateThousandsByComma } from "../../utils"
+import Icon from "../Media/Icon"
 
 type TahoAmountProps = {
   amount?: bigint
diff --git a/src/shared/components/TokenAmountInput.tsx b/src/shared/components/Interface/TokenAmountInput.tsx
similarity index 100%
rename from src/shared/components/TokenAmountInput.tsx
rename to src/shared/components/Interface/TokenAmountInput.tsx
diff --git a/src/shared/components/FullPageLoader.tsx b/src/shared/components/Loaders/FullPageLoader.tsx
similarity index 92%
rename from src/shared/components/FullPageLoader.tsx
rename to src/shared/components/Loaders/FullPageLoader.tsx
index 0b7d7b321..39b902544 100644
--- a/src/shared/components/FullPageLoader.tsx
+++ b/src/shared/components/Loaders/FullPageLoader.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { useVisibilityTransition } from "shared/hooks"
 import { animated } from "@react-spring/web"
-import GoldenCircleSpinner from "./Loaders/GoldenCircleSpinner"
-import LoadingText from "./Loaders/LoadingText"
+import GoldenCircleSpinner from "./GoldenCircleSpinner"
+import LoadingText from "./LoadingText"
 
 export default function FullPageLoader({ loaded }: { loaded: boolean }) {
   const transition = useVisibilityTransition(!loaded)
diff --git a/src/shared/components/Avatar.tsx b/src/shared/components/Media/Avatar.tsx
similarity index 100%
rename from src/shared/components/Avatar.tsx
rename to src/shared/components/Media/Avatar.tsx
diff --git a/src/ui/Island/Gif.tsx b/src/shared/components/Media/Gif.tsx
similarity index 100%
rename from src/ui/Island/Gif.tsx
rename to src/shared/components/Media/Gif.tsx
diff --git a/src/shared/components/Icon.tsx b/src/shared/components/Media/Icon.tsx
similarity index 100%
rename from src/shared/components/Icon.tsx
rename to src/shared/components/Media/Icon.tsx
diff --git a/src/shared/components/IconLink.tsx b/src/shared/components/Media/IconLink.tsx
similarity index 100%
rename from src/shared/components/IconLink.tsx
rename to src/shared/components/Media/IconLink.tsx
diff --git a/src/shared/components/KonvaVideo.tsx b/src/shared/components/Media/KonvaVideo.tsx
similarity index 100%
rename from src/shared/components/KonvaVideo.tsx
rename to src/shared/components/Media/KonvaVideo.tsx
diff --git a/src/ui/Island/RealmDetails/Placeholder/index.tsx b/src/shared/components/Media/Placeholder.tsx
similarity index 100%
rename from src/ui/Island/RealmDetails/Placeholder/index.tsx
rename to src/shared/components/Media/Placeholder.tsx
diff --git a/src/shared/components/PrivacyPolicy.tsx b/src/shared/components/Misc/PrivacyPolicy.tsx
similarity index 94%
rename from src/shared/components/PrivacyPolicy.tsx
rename to src/shared/components/Misc/PrivacyPolicy.tsx
index bc926df69..5c8822672 100644
--- a/src/shared/components/PrivacyPolicy.tsx
+++ b/src/shared/components/Misc/PrivacyPolicy.tsx
@@ -1,11 +1,11 @@
 import React from "react"
-import Popup from "shared/components/Popup"
+import Popup from "shared/components/Dialogs/Popup"
 import cookiesIcon from "shared/assets/icons/cookies.svg"
 import newTabIcon from "shared/assets/icons/s/new-tab.svg"
 import { LINKS, LOCAL_STORAGE_COOKIES } from "shared/constants"
 import { useLocalStorageChange } from "shared/hooks"
-import Icon from "./Icon"
-import Button from "./Button"
+import Icon from "../Media/Icon"
+import Button from "../Interface/Button"
 
 export default function PrivacyPolicy() {
   const { value, updateStorage } = useLocalStorageChange<boolean>(
diff --git a/src/shared/components/Version.tsx b/src/shared/components/Misc/Version.tsx
similarity index 100%
rename from src/shared/components/Version.tsx
rename to src/shared/components/Misc/Version.tsx
diff --git a/src/shared/components/RealmCutout/Bubble.tsx b/src/shared/components/Realm/Bubble.tsx
similarity index 100%
rename from src/shared/components/RealmCutout/Bubble.tsx
rename to src/shared/components/Realm/Bubble.tsx
diff --git a/src/shared/components/RealmCutout/RealmBackgroundCutout.tsx b/src/shared/components/Realm/RealmBackgroundCutout.tsx
similarity index 100%
rename from src/shared/components/RealmCutout/RealmBackgroundCutout.tsx
rename to src/shared/components/Realm/RealmBackgroundCutout.tsx
diff --git a/src/shared/components/RealmCutout/RealmCutout.tsx b/src/shared/components/Realm/RealmCutout.tsx
similarity index 100%
rename from src/shared/components/RealmCutout/RealmCutout.tsx
rename to src/shared/components/Realm/RealmCutout.tsx
diff --git a/src/shared/components/RealmCutout/RealmPin.tsx b/src/shared/components/Realm/RealmPin.tsx
similarity index 93%
rename from src/shared/components/RealmCutout/RealmPin.tsx
rename to src/shared/components/Realm/RealmPin.tsx
index a00a497ea..a282f50f5 100644
--- a/src/shared/components/RealmCutout/RealmPin.tsx
+++ b/src/shared/components/Realm/RealmPin.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import realmPin from "shared/assets/realm-pin.svg"
-import Avatar from "../Avatar"
+import Avatar from "../Media/Avatar"
 
 export default function RealmPin() {
   return (
diff --git a/src/shared/components/RealmCutout/index.ts b/src/shared/components/Realm/index.ts
similarity index 100%
rename from src/shared/components/RealmCutout/index.ts
rename to src/shared/components/Realm/index.ts
diff --git a/src/shared/components/Transactions/TransactionProgress.tsx b/src/shared/components/Transactions/TransactionProgress.tsx
index bc81cd28c..9950c73e0 100644
--- a/src/shared/components/Transactions/TransactionProgress.tsx
+++ b/src/shared/components/Transactions/TransactionProgress.tsx
@@ -4,9 +4,9 @@ import iconNotifWrong from "shared/assets/icons/m/notif-wrong.svg"
 import { TransactionProgressStatus } from "shared/types"
 import classNames from "classnames"
 import { isTransactionPending } from "shared/utils"
-import Button from "../Button"
+import Button from "../Interface/Button"
 import Ripple from "../Loaders/Ripple"
-import Icon from "../Icon"
+import Icon from "../Media/Icon"
 
 export type TransactionProgressProps = {
   title?: string
diff --git a/src/shared/components/Transactions/TransactionsModal.tsx b/src/shared/components/Transactions/TransactionsModal.tsx
index daf3d69c1..38d79fad3 100644
--- a/src/shared/components/Transactions/TransactionsModal.tsx
+++ b/src/shared/components/Transactions/TransactionsModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 // import { isTransactionPending } from "shared/utils"
-import Modal from "../Modal"
+import Modal from "../Dialogs/Modal"
 import TransactionProgress, {
   TransactionProgressProps,
 } from "./TransactionProgress"
diff --git a/src/ui/Assistant/AssistantContent/AssistantChallenges.tsx b/src/ui/Assistant/AssistantContent/AssistantChallenges.tsx
index 9359b8ca9..3af4b0d3b 100644
--- a/src/ui/Assistant/AssistantContent/AssistantChallenges.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantChallenges.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import starIcon from "shared/assets/icons/star-2.svg"
 import { useAssistant } from "shared/hooks"
 import AssistantContent from "."
diff --git a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
index a0b08f0d8..394a1129b 100644
--- a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import realmPointer from "shared/assets/realm-pointer.png"
 import { useAssistant } from "shared/hooks"
 import { selectNumberOfRealms, useDappSelector } from "redux-state"
diff --git a/src/ui/Assistant/AssistantContent/index.tsx b/src/ui/Assistant/AssistantContent/index.tsx
index da70315bf..4dc90ab5a 100644
--- a/src/ui/Assistant/AssistantContent/index.tsx
+++ b/src/ui/Assistant/AssistantContent/index.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from "react"
-import Popup from "shared/components/Popup"
+import Popup from "shared/components/Dialogs/Popup"
 
 type AssistantContentProps = {
   children: ReactNode
diff --git a/src/ui/Assistant/index.tsx b/src/ui/Assistant/index.tsx
index 938ce9276..a7db01dd0 100644
--- a/src/ui/Assistant/index.tsx
+++ b/src/ui/Assistant/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import assistantImage from "shared/assets/assistant.png"
-import Portal from "shared/components/Portal"
+import Portal from "shared/components/Interface/Portal"
 import { useAssistant } from "shared/hooks"
 import AssistantWelcome from "./AssistantContent/AssistantWelcome"
 import AssistantChallenges from "./AssistantContent/AssistantChallenges"
diff --git a/src/ui/Claim/ClaimAlreadyClaimed.tsx b/src/ui/Claim/ClaimAlreadyClaimed.tsx
index b14b10eed..b3c3cb290 100644
--- a/src/ui/Claim/ClaimAlreadyClaimed.tsx
+++ b/src/ui/Claim/ClaimAlreadyClaimed.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
-import TahoAmount from "shared/components/TahoAmount"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
 import { useDappSelector, selectEligibility } from "redux-state"
 import { ROUTES } from "shared/constants"
 import ClaimHeader from "./components/ClaimHeader"
diff --git a/src/ui/Claim/ClaimCheck.tsx b/src/ui/Claim/ClaimCheck.tsx
index 4d7276a31..debbe95b7 100644
--- a/src/ui/Claim/ClaimCheck.tsx
+++ b/src/ui/Claim/ClaimCheck.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import { Redirect } from "react-router-dom"
 import { useDebounce } from "shared/hooks/helpers"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import Spinner from "shared/components/Loaders/Spinner"
 import { isProbablyEVMAddress, resolveNameToAddress } from "shared/utils"
 import {
diff --git a/src/ui/Claim/ClaimCheckFail.tsx b/src/ui/Claim/ClaimCheckFail.tsx
index 23ed443d6..d6a2f6b63 100644
--- a/src/ui/Claim/ClaimCheckFail.tsx
+++ b/src/ui/Claim/ClaimCheckFail.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import {
   useDappDispatch,
   useDappSelector,
diff --git a/src/ui/Claim/ClaimCheckSuccess.tsx b/src/ui/Claim/ClaimCheckSuccess.tsx
index b53b31432..dda1b2aed 100644
--- a/src/ui/Claim/ClaimCheckSuccess.tsx
+++ b/src/ui/Claim/ClaimCheckSuccess.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Modal from "shared/components/Modal"
-import TahoAmount from "shared/components/TahoAmount"
+import Modal from "shared/components/Dialogs/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
 import iconConnected from "shared/assets/icons/s/connected.svg"
-import Button from "shared/components/Button"
+import Button from "shared/components/Interface/Button"
 import { useConnect } from "shared/hooks"
 import {
   useDappSelector,
diff --git a/src/ui/Claim/ClaimFinish.tsx b/src/ui/Claim/ClaimFinish.tsx
index a2d3a6b77..09bad7c43 100644
--- a/src/ui/Claim/ClaimFinish.tsx
+++ b/src/ui/Claim/ClaimFinish.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import TahoAmount from "shared/components/TahoAmount"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import { useDappSelector, selectEligibility } from "redux-state"
 import { ROUTES } from "shared/constants"
 import ClaimHeader from "./components/ClaimHeader"
diff --git a/src/ui/Claim/components/ClaimCheckRules.tsx b/src/ui/Claim/components/ClaimCheckRules.tsx
index dc9d13c26..d5b2febad 100644
--- a/src/ui/Claim/components/ClaimCheckRules.tsx
+++ b/src/ui/Claim/components/ClaimCheckRules.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import classNames from "classnames"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconNorifWrong from "shared/assets/icons/s/notif-wrong.svg"
 import { separateThousandsByComma } from "shared/utils"
diff --git a/src/ui/Claim/modals/ClaimCongratulations.tsx b/src/ui/Claim/modals/ClaimCongratulations.tsx
index 6eebd427a..73514e417 100644
--- a/src/ui/Claim/modals/ClaimCongratulations.tsx
+++ b/src/ui/Claim/modals/ClaimCongratulations.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { selectRealmById, useDappSelector } from "redux-state"
-import Button from "shared/components/Button"
-import CongratulationsModal from "shared/components/Modals/CongratulationsModal"
-import RealmIcon from "shared/components/RealmIcon"
+import Button from "shared/components/Interface/Button"
+import CongratulationsModal from "ui/Island/Modals/CongratulationsModal"
+import RealmIcon from "ui/Island/Realms/RealmIcon"
 
 type ClaimCongratulationsProps = {
   displayAmount: string
diff --git a/src/ui/Claim/subpages/ClaimingDelegate.tsx b/src/ui/Claim/subpages/ClaimingDelegate.tsx
index b9b3dff2f..7f0b47499 100644
--- a/src/ui/Claim/subpages/ClaimingDelegate.tsx
+++ b/src/ui/Claim/subpages/ClaimingDelegate.tsx
@@ -5,8 +5,8 @@
 import React, { useState } from "react"
 import { useHistory } from "react-router-dom"
 import classNames from "classnames"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconSearch from "shared/assets/icons/m/search.svg"
 import { ROUTES } from "shared/constants"
diff --git a/src/ui/Claim/subpages/ClaimingFlow.tsx b/src/ui/Claim/subpages/ClaimingFlow.tsx
index da2bb57b2..0dc9fe4b0 100644
--- a/src/ui/Claim/subpages/ClaimingFlow.tsx
+++ b/src/ui/Claim/subpages/ClaimingFlow.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Redirect, Route, Switch } from "react-router-dom"
-import Modal from "shared/components/Modal"
+import Modal from "shared/components/Dialogs/Modal"
 import { ROUTES } from "shared/constants"
 import ClaimingPledge from "./ClaimingPledge"
 import ClaimingSignTx from "./ClaimingSignTx"
diff --git a/src/ui/Claim/subpages/ClaimingPledge.tsx b/src/ui/Claim/subpages/ClaimingPledge.tsx
index bee20ea41..621383baa 100644
--- a/src/ui/Claim/subpages/ClaimingPledge.tsx
+++ b/src/ui/Claim/subpages/ClaimingPledge.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
 import earthIcon from "shared/assets/icons/earth.svg"
 import communityIcon from "shared/assets/icons/community.svg"
 import rulerIcon from "shared/assets/icons/ruler.svg"
diff --git a/src/ui/Claim/subpages/ClaimingSignTx.tsx b/src/ui/Claim/subpages/ClaimingSignTx.tsx
index 9f9ae050d..d5c9a87d8 100644
--- a/src/ui/Claim/subpages/ClaimingSignTx.tsx
+++ b/src/ui/Claim/subpages/ClaimingSignTx.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import Icon from "shared/components/Icon"
-import Button from "shared/components/Button"
+import Icon from "shared/components/Media/Icon"
+import Button from "shared/components/Interface/Button"
 import lockIcon from "shared/assets/icons/s/lock.svg"
 import ClaimingTransactions from "./ClaimingTransactions"
 
diff --git a/src/ui/Claim/subpages/ClaimingStats.tsx b/src/ui/Claim/subpages/ClaimingStats.tsx
index 20a048376..de694884a 100644
--- a/src/ui/Claim/subpages/ClaimingStats.tsx
+++ b/src/ui/Claim/subpages/ClaimingStats.tsx
@@ -1,11 +1,11 @@
 import React from "react"
-import TahoAmount from "shared/components/TahoAmount"
-import Modal from "shared/components/Modal"
-import Icon from "shared/components/Icon"
+import TahoAmount from "shared/components/Interface/TahoAmount"
+import Modal from "shared/components/Dialogs/Modal"
+import Icon from "shared/components/Media/Icon"
 import infoIcon from "shared/assets/icons/m/info.svg"
-import Accordion from "shared/components/Accordion"
+import Accordion from "shared/components/Interface/Accordion"
 import { useDappSelector, selectEligibility } from "redux-state"
-import { RealmCutout } from "shared/components/RealmCutout"
+import { RealmCutout } from "shared/components/Realm"
 import ClaimCheckRules from "../components/ClaimCheckRules"
 
 const MOCK_REALM = {
diff --git a/src/ui/Claim/subpages/ClaimingSteps.tsx b/src/ui/Claim/subpages/ClaimingSteps.tsx
index 4afa4764a..bd9060f2c 100644
--- a/src/ui/Claim/subpages/ClaimingSteps.tsx
+++ b/src/ui/Claim/subpages/ClaimingSteps.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import classNames from "classnames"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconStatusCurrent from "shared/assets/icons/s/status-current.svg"
 import iconStatusUpcoming from "shared/assets/icons/s/status-upcoming.svg"
diff --git a/src/ui/Claim/subpages/index.tsx b/src/ui/Claim/subpages/index.tsx
index 7c34f5329..862ab3bcc 100644
--- a/src/ui/Claim/subpages/index.tsx
+++ b/src/ui/Claim/subpages/index.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Modal from "shared/components/Modal"
+import Modal from "shared/components/Dialogs/Modal"
 import { selectIsJoinRealmIslandMode } from "redux-state/selectors/island"
 import { useDappSelector } from "redux-state"
 import ClaimingStats from "./ClaimingStats"
diff --git a/src/ui/Controls/ZoomControl.tsx b/src/ui/Controls/ZoomControl.tsx
index 18c73cf66..23d96d74e 100644
--- a/src/ui/Controls/ZoomControl.tsx
+++ b/src/ui/Controls/ZoomControl.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 
 type ZoomControlProps = {
   icon: string
diff --git a/src/ui/Controls/index.tsx b/src/ui/Controls/index.tsx
index a01753d99..dccd78414 100644
--- a/src/ui/Controls/index.tsx
+++ b/src/ui/Controls/index.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Portal from "shared/components/Portal"
+import Portal from "shared/components/Interface/Portal"
 import { Stage } from "konva/lib/Stage"
 import ZoomControls from "./ZoomControls"
 import IslandControl from "./IslandControl"
diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
index d82b39bfc..fdc908e7c 100644
--- a/src/ui/DApps/DesktopDApp.tsx
+++ b/src/ui/DApps/DesktopDApp.tsx
@@ -16,7 +16,7 @@ import {
   useWalletOnboarding,
 } from "shared/hooks"
 import Onboarding from "ui/Onboarding"
-import PrivacyPolicy from "../../shared/components/PrivacyPolicy"
+import PrivacyPolicy from "../../shared/components/Misc/PrivacyPolicy"
 import IslandView from "./IslandView"
 
 function DesktopDAppContent() {
diff --git a/src/ui/DApps/IslandView.tsx b/src/ui/DApps/IslandView.tsx
index fdca58fb3..528e520c2 100644
--- a/src/ui/DApps/IslandView.tsx
+++ b/src/ui/DApps/IslandView.tsx
@@ -14,7 +14,7 @@ import {
   selectIslandMode,
   useDappSelector,
 } from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
+import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import { Route, Switch } from "react-router-dom"
 import { useDisplayedPopulation } from "shared/hooks"
 
diff --git a/src/ui/Footer/FooterLinks.tsx b/src/ui/Footer/FooterLinks.tsx
index b4ed42374..93ddf3ab5 100644
--- a/src/ui/Footer/FooterLinks.tsx
+++ b/src/ui/Footer/FooterLinks.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import IconLink from "shared/components/IconLink"
+import IconLink from "shared/components/Media/IconLink"
 import { LINKS } from "shared/constants"
 import discordIcon from "shared/assets/icons/discord.svg"
 import twitterIcon from "shared/assets/icons/twitter.svg"
diff --git a/src/ui/Footer/PopulationCount.tsx b/src/ui/Footer/PopulationCount.tsx
index c8637d4a8..5f024eb0e 100644
--- a/src/ui/Footer/PopulationCount.tsx
+++ b/src/ui/Footer/PopulationCount.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { separateThousandsByComma } from "shared/utils"
 import populationIcon from "shared/assets/icons/people.svg"
 import { selectTotalPopulation, useDappSelector } from "redux-state"
diff --git a/src/ui/Footer/RealmBar/RealmBarIcon.tsx b/src/ui/Footer/RealmBar/RealmBarIcon.tsx
index 3f75a8f93..08060bf13 100644
--- a/src/ui/Footer/RealmBar/RealmBarIcon.tsx
+++ b/src/ui/Footer/RealmBar/RealmBarIcon.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { getRealmMapData } from "shared/constants"
 import { animated, easings, useSpring } from "@react-spring/web"
 import RealmBarTooltip from "./RealmBarTooltip"
diff --git a/src/ui/Footer/RealmBar/index.tsx b/src/ui/Footer/RealmBar/index.tsx
index 6278d0059..72f0fc614 100644
--- a/src/ui/Footer/RealmBar/index.tsx
+++ b/src/ui/Footer/RealmBar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from "react"
 import populationIcon from "shared/assets/icons/people.svg"
-import Icon from "shared/components/Icon"
-import Tooltip from "shared/components/Tooltip"
+import Icon from "shared/components/Media/Icon"
+import Tooltip from "shared/components/Dialogs/Tooltip"
 import { separateThousandsByComma } from "shared/utils"
 import {
   selectSortedDisplayedPopulation,
diff --git a/src/ui/Footer/index.tsx b/src/ui/Footer/index.tsx
index 1bb5151c8..61eb0ba3a 100644
--- a/src/ui/Footer/index.tsx
+++ b/src/ui/Footer/index.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 // import ClaimProgressBar from "./ClaimProgressBar" // not used at the moment
-import Version from "shared/components/Version"
+import Version from "shared/components/Misc/Version"
 import RealmsBar from "./RealmBar"
 import FooterLinks from "./FooterLinks"
 import FooterWrapper from "./FooterWrapper"
diff --git a/src/ui/Background/BackgroundOverlay.tsx b/src/ui/Island/Background/BackgroundOverlay.tsx
similarity index 100%
rename from src/ui/Background/BackgroundOverlay.tsx
rename to src/ui/Island/Background/BackgroundOverlay.tsx
diff --git a/src/ui/Island/InteractiveIsland.tsx b/src/ui/Island/Background/InteractiveIsland.tsx
similarity index 95%
rename from src/ui/Island/InteractiveIsland.tsx
rename to src/ui/Island/Background/InteractiveIsland.tsx
index aaa679297..148ae6439 100644
--- a/src/ui/Island/InteractiveIsland.tsx
+++ b/src/ui/Island/Background/InteractiveIsland.tsx
@@ -26,11 +26,11 @@ import {
   limitToBounds,
 } from "shared/utils"
 import Assistant from "ui/Assistant"
-import Background from "./Background"
-import Realms from "./IslandRealms"
-import RealmPin from "./IslandRealmsDetails/RealmPin"
-import Clouds from "./Clouds"
-import AttackLine from "./IslandRealmsDetails/AttackLine"
+import IslandBackground from "./IslandBackground"
+import Realms from "../Realms/IslandRealms"
+import RealmPin from "../Details/RealmPin"
+import Clouds from "../Details/Clouds"
+import AttackLine from "../Details/AttackLine"
 
 function InteractiveIsland() {
   const selectedRealmId = useDappSelector(selectDisplayedRealmId)
@@ -206,7 +206,7 @@ function InteractiveIsland() {
         height={stageBounds.height}
       >
         <Layer>
-          <Background overlay={overlay} />
+          <IslandBackground overlay={overlay} />
           <Realms />
           <Clouds />
           <RealmPin />
diff --git a/src/ui/Island/Background.tsx b/src/ui/Island/Background/IslandBackground.tsx
similarity index 95%
rename from src/ui/Island/Background.tsx
rename to src/ui/Island/Background/IslandBackground.tsx
index 25a766d56..c14324b91 100644
--- a/src/ui/Island/Background.tsx
+++ b/src/ui/Island/Background/IslandBackground.tsx
@@ -19,7 +19,7 @@ import {
 import { usePrevious, useBeforeFirstPaint, useTimeout } from "shared/hooks"
 import { createBackgroundMask } from "shared/utils"
 import { OverlayType } from "shared/types"
-import BackgroundOverlay from "ui/Background/BackgroundOverlay"
+import BackgroundOverlay from "ui/Island/Background/BackgroundOverlay"
 import { selectRealmPanelVisible, useDappSelector } from "redux-state"
 
 const getOverlay = (overlay: OverlayType) => {
@@ -65,7 +65,11 @@ const getOverlay = (overlay: OverlayType) => {
   return null
 }
 
-export default function Background({ overlay }: { overlay: OverlayType }) {
+export default function IslandBackground({
+  overlay,
+}: {
+  overlay: OverlayType
+}) {
   const [islandImage] = useImage(backgroundImg)
   // const overlayRef = useRef<Konva.Group | null>(null)
   // const [currentOverlay, setCurrentOverlay] = useState<JSX.Element | null>(null)
diff --git a/src/ui/Island/IslandRealmsDetails/AttackLine.tsx b/src/ui/Island/Details/AttackLine.tsx
similarity index 100%
rename from src/ui/Island/IslandRealmsDetails/AttackLine.tsx
rename to src/ui/Island/Details/AttackLine.tsx
diff --git a/src/ui/Island/Clouds.tsx b/src/ui/Island/Details/Clouds.tsx
similarity index 100%
rename from src/ui/Island/Clouds.tsx
rename to src/ui/Island/Details/Clouds.tsx
diff --git a/src/ui/Island/NetOverlay.tsx b/src/ui/Island/Details/NetOverlay.tsx
similarity index 94%
rename from src/ui/Island/NetOverlay.tsx
rename to src/ui/Island/Details/NetOverlay.tsx
index b1ebb3637..c7bb1b037 100644
--- a/src/ui/Island/NetOverlay.tsx
+++ b/src/ui/Island/Details/NetOverlay.tsx
@@ -2,7 +2,7 @@ import React, { memo } from "react"
 import { Group } from "react-konva"
 import netGif from "shared/assets/island-overlay-net.gif"
 import { FIGMA_FACTOR } from "shared/constants"
-import Gif from "./Gif"
+import Gif from "../../../shared/components/Media/Gif"
 
 function NetOverlay() {
   return (
diff --git a/src/ui/Island/IslandRealmsDetails/NewChallengeLabel.tsx b/src/ui/Island/Details/NewChallengeLabel.tsx
similarity index 100%
rename from src/ui/Island/IslandRealmsDetails/NewChallengeLabel.tsx
rename to src/ui/Island/Details/NewChallengeLabel.tsx
diff --git a/src/ui/Island/IslandRealmsDetails/NewRealmLabel.tsx b/src/ui/Island/Details/NewRealmLabel.tsx
similarity index 100%
rename from src/ui/Island/IslandRealmsDetails/NewRealmLabel.tsx
rename to src/ui/Island/Details/NewRealmLabel.tsx
diff --git a/src/ui/Island/IslandRealmsDetails/RealmPin.tsx b/src/ui/Island/Details/RealmPin.tsx
similarity index 97%
rename from src/ui/Island/IslandRealmsDetails/RealmPin.tsx
rename to src/ui/Island/Details/RealmPin.tsx
index 6978694be..20d61595e 100644
--- a/src/ui/Island/IslandRealmsDetails/RealmPin.tsx
+++ b/src/ui/Island/Details/RealmPin.tsx
@@ -12,7 +12,7 @@ import {
 } from "redux-state"
 import { FIGMA_FACTOR, getRealmMapData } from "shared/constants"
 import { getPinShift } from "shared/utils"
-import KonvaVideo from "shared/components/KonvaVideo"
+import KonvaVideo from "shared/components/Media/KonvaVideo"
 
 type RealmPinAvatarProps = {
   x: number
diff --git a/src/ui/Island/Img.tsx b/src/ui/Island/Img.tsx
deleted file mode 100644
index cfbfee260..000000000
--- a/src/ui/Island/Img.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react"
-import { Image } from "react-konva"
-import useImage from "use-image"
-
-type ImgProps = {
-  src: string
-  scale?: number
-  x?: number
-  y?: number
-}
-
-export default function Img(props: ImgProps) {
-  const { src, scale = 1, x, y } = props
-  const [image] = useImage(src)
-
-  return <Image x={x} y={y} image={image} scale={{ x: scale, y: scale }} />
-}
diff --git a/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardCurrentUser.tsx b/src/ui/Island/Leaderboard/LeaderboardCurrentUser.tsx
similarity index 98%
rename from src/ui/Island/RealmDetails/LeaderboardList/LeaderboardCurrentUser.tsx
rename to src/ui/Island/Leaderboard/LeaderboardCurrentUser.tsx
index 5e1bbb20e..9c27da924 100644
--- a/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardCurrentUser.tsx
+++ b/src/ui/Island/Leaderboard/LeaderboardCurrentUser.tsx
@@ -6,7 +6,7 @@ import {
   selectWalletName,
   useDappSelector,
 } from "redux-state"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import {
   bigIntToDisplayUserAmount,
   separateThousandsByComma,
diff --git a/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx b/src/ui/Island/Leaderboard/LeaderboardItem.tsx
similarity index 100%
rename from src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx
rename to src/ui/Island/Leaderboard/LeaderboardItem.tsx
diff --git a/src/ui/Island/RealmDetails/LeaderboardList/index.tsx b/src/ui/Island/Leaderboard/index.tsx
similarity index 93%
rename from src/ui/Island/RealmDetails/LeaderboardList/index.tsx
rename to src/ui/Island/Leaderboard/index.tsx
index 069be660e..e4ca048f2 100644
--- a/src/ui/Island/RealmDetails/LeaderboardList/index.tsx
+++ b/src/ui/Island/Leaderboard/index.tsx
@@ -7,7 +7,7 @@ import {
   useDappSelector,
 } from "redux-state"
 import LeaderboardItem from "./LeaderboardItem"
-import RealmDetailsPlaceholder from "../Placeholder"
+import RealmDetailsPlaceholder from "../../../shared/components/Media/Placeholder"
 
 const leaderboardDateAvailable = "Dec 14"
 
diff --git a/src/shared/components/Modals/CongratulationsModal.tsx b/src/ui/Island/Modals/CongratulationsModal.tsx
similarity index 93%
rename from src/shared/components/Modals/CongratulationsModal.tsx
rename to src/ui/Island/Modals/CongratulationsModal.tsx
index 5b89448b5..85f8c75d6 100644
--- a/src/shared/components/Modals/CongratulationsModal.tsx
+++ b/src/ui/Island/Modals/CongratulationsModal.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react"
-import Modal from "../Modal"
-import Button from "../Button"
+import Modal from "../../../shared/components/Dialogs/Modal"
+import Button from "../../../shared/components/Interface/Button"
 
 type CongratulationsModalProps = {
   children: string | ReactNode
diff --git a/src/ui/Island/Modals/ModalLeavingRealm.tsx b/src/ui/Island/Modals/ModalLeavingRealm.tsx
index 757a0c240..e50cda134 100644
--- a/src/ui/Island/Modals/ModalLeavingRealm.tsx
+++ b/src/ui/Island/Modals/ModalLeavingRealm.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import Modal from "shared/components/Modal"
-import Icon from "shared/components/Icon"
+import Modal from "shared/components/Dialogs/Modal"
+import Icon from "shared/components/Media/Icon"
 import lightIcon from "shared/assets/icons/m/light.svg"
-import Button from "shared/components/Button"
+import Button from "shared/components/Interface/Button"
 
 import TransactionProgress, {
   TransactionProgressProps,
diff --git a/src/shared/components/Modals/OnboardingModal.tsx b/src/ui/Island/Modals/OnboardingModal.tsx
similarity index 90%
rename from src/shared/components/Modals/OnboardingModal.tsx
rename to src/ui/Island/Modals/OnboardingModal.tsx
index 001e8c163..b2780ab54 100644
--- a/src/shared/components/Modals/OnboardingModal.tsx
+++ b/src/ui/Island/Modals/OnboardingModal.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
-import Modal from "../Modal"
-import Button from "../Button"
+import Modal from "../../../shared/components/Dialogs/Modal"
+import Button from "../../../shared/components/Interface/Button"
 
 type OnboardingModalProps = {
   children: ReactNode
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/Modals/XpClaimModal.tsx
similarity index 100%
rename from src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
rename to src/ui/Island/Modals/XpClaimModal.tsx
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx
similarity index 94%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx
index f05ef7ea2..8e5f02870 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeInfo.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import lightIcon from "shared/assets/icons/m/light.svg"
 
 export default function RealmDetailsChallengeInfo({
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx
similarity index 93%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx
index 266f55991..88621e5c6 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallengeItem.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react"
 import Markdown from "react-markdown"
-import Accordion from "shared/components/Accordion"
+import Accordion from "shared/components/Interface/Accordion"
 import { useDisplayedChallenges } from "shared/hooks"
 
 type RealmDetailsChallengeItemProps = {
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallenges.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallenges.tsx
similarity index 100%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsChallenges.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsChallenges.tsx
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
similarity index 96%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
index c0d54660a..81b6dc6fa 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Panel from "shared/components/Panel"
+import Panel from "shared/components/Dialogs/Panel"
 import { RootState } from "redux-state/reducers"
 import {
   selectDisplayedRealmId,
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
similarity index 96%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
index ccf125a15..873b26580 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import iconCommunity from "shared/assets/icons/people.svg"
-import RealmIcon from "shared/components/RealmIcon"
+import RealmIcon from "ui/Island/Realms/RealmIcon"
 import {
   getRadialGradientFromRealmColor,
   separateThousandsByComma,
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx
similarity index 92%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx
index 66ddcb129..a1355fed8 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsJoin.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
 import lightIcon from "shared/assets/icons/m/light.svg"
 
 type RealmDetailsJoinProps = {
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
similarity index 95%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
index e856bb01f..83b9bc5f5 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
@@ -7,13 +7,13 @@ import {
   selectUnclaimedXpSumById,
   useDappSelector,
 } from "redux-state"
-import Button from "shared/components/Button"
-import RealmIcon from "shared/components/RealmIcon"
-import Tooltip from "shared/components/Tooltip"
+import Button from "shared/components/Interface/Button"
+import RealmIcon from "ui/Island/Realms/RealmIcon"
+import Tooltip from "shared/components/Dialogs/Tooltip"
 import { LINKS } from "shared/constants"
 import { bigIntToDisplayUserAmount } from "shared/utils"
 import ClaimCongratulations from "ui/Claim/modals/ClaimCongratulations"
-import XpClaimModal from "ui/Island/RealmDetails/XpClaim/XpClaimModal"
+import XpClaimModal from "ui/Island/Modals/XpClaimModal"
 
 function RealmDetailsRewards({
   amount,
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsSection.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsSection.tsx
similarity index 100%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsSection.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsSection.tsx
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx
similarity index 95%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx
index f02b49be7..6ce07307e 100644
--- a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx
+++ b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsStaked.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import lightIcon from "shared/assets/icons/m/light.svg"
 
 type RealmDetailsStakedProps = {
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/index.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/index.tsx
similarity index 100%
rename from src/shared/components/RealmPanel/RealmDetailsPanel/index.tsx
rename to src/ui/Island/RealmPanel/RealmDetailsPanel/index.tsx
diff --git a/src/shared/components/RealmPanel/RealmLeaderboardPanel/index.tsx b/src/ui/Island/RealmPanel/RealmLeaderboardPanel/index.tsx
similarity index 85%
rename from src/shared/components/RealmPanel/RealmLeaderboardPanel/index.tsx
rename to src/ui/Island/RealmPanel/RealmLeaderboardPanel/index.tsx
index 81ac63f32..8ce80d9fb 100644
--- a/src/shared/components/RealmPanel/RealmLeaderboardPanel/index.tsx
+++ b/src/ui/Island/RealmPanel/RealmLeaderboardPanel/index.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from "react"
-import Panel from "shared/components/Panel"
-import TabPanel from "shared/components/TabPanel"
-import { useMobileScreen, useTabletScreen } from "shared/hooks"
-import LeaderboardList from "ui/Island/RealmDetails/LeaderboardList"
-import LeaderboardCurrentUser from "ui/Island/RealmDetails/LeaderboardList/LeaderboardCurrentUser"
+import Panel from "shared/components/Dialogs/Panel"
+import TabPanel from "shared/components/Interface/TabPanel"
+import LeaderboardList from "ui/Island/Leaderboard"
+import LeaderboardCurrentUser from "ui/Island/Leaderboard/LeaderboardCurrentUser"
 
 // TODO: remove this when we have more than one leaderboard type
 const SHOW_LEADERBOARD_SELECTION = false
diff --git a/src/shared/components/RealmPanel/RealmPanelAccordion/GuardiansSection.tsx b/src/ui/Island/RealmPanel/RealmPanelAccordion/GuardiansSection.tsx
similarity index 100%
rename from src/shared/components/RealmPanel/RealmPanelAccordion/GuardiansSection.tsx
rename to src/ui/Island/RealmPanel/RealmPanelAccordion/GuardiansSection.tsx
diff --git a/src/shared/components/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx b/src/ui/Island/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx
similarity index 89%
rename from src/shared/components/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx
rename to src/ui/Island/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx
index c28a234cc..a518e58e0 100644
--- a/src/shared/components/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx
+++ b/src/ui/Island/RealmPanel/RealmPanelAccordion/StakeUnstakeSection.tsx
@@ -7,10 +7,10 @@ import {
   useDappSelector,
 } from "redux-state"
 import { TAHO_ADDRESS } from "shared/constants"
-import TabPanel from "shared/components/TabPanel"
-import StakeForm from "ui/Island/RealmDetails/StakingForms/StakeForm"
-import UnstakeForm from "ui/Island/RealmDetails/StakingForms/UnstakeForm"
-import { AccordionOutsideActions } from "shared/components/Accordion"
+import TabPanel from "shared/components/Interface/TabPanel"
+import StakeForm from "ui/Island/Staking/StakeForm"
+import UnstakeForm from "ui/Island/Staking/UnstakeForm"
+import { AccordionOutsideActions } from "shared/components/Interface/Accordion"
 import RealmPanelAccordion from "."
 
 function isFormDisabled(
diff --git a/src/shared/components/RealmPanel/RealmPanelAccordion/index.tsx b/src/ui/Island/RealmPanel/RealmPanelAccordion/index.tsx
similarity index 87%
rename from src/shared/components/RealmPanel/RealmPanelAccordion/index.tsx
rename to src/ui/Island/RealmPanel/RealmPanelAccordion/index.tsx
index 6b743323c..73319995d 100644
--- a/src/shared/components/RealmPanel/RealmPanelAccordion/index.tsx
+++ b/src/ui/Island/RealmPanel/RealmPanelAccordion/index.tsx
@@ -1,6 +1,8 @@
 import React from "react"
 import { selectRealmPanelVisible, useDappSelector } from "redux-state"
-import Accordion, { CommonAccordion } from "shared/components/Accordion"
+import Accordion, {
+  CommonAccordion,
+} from "shared/components/Interface/Accordion"
 
 export default function RealmDetailsAccordion({
   title,
diff --git a/src/shared/components/RealmPanel/RealmPanelCloseButton.tsx b/src/ui/Island/RealmPanel/RealmPanelCloseButton.tsx
similarity index 90%
rename from src/shared/components/RealmPanel/RealmPanelCloseButton.tsx
rename to src/ui/Island/RealmPanel/RealmPanelCloseButton.tsx
index a47ca31da..6949ea45a 100644
--- a/src/shared/components/RealmPanel/RealmPanelCloseButton.tsx
+++ b/src/ui/Island/RealmPanel/RealmPanelCloseButton.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import closeIcon from "shared/assets/icons/s/close-black.svg"
 import { animated } from "@react-spring/web"
 import { useRealmCloseButtonTransition } from "shared/hooks"
-import Button from "../Button"
+import Button from "../../../shared/components/Interface/Button"
 
 export default function RealmPanelCloseButton({
   onClose,
diff --git a/src/shared/components/RealmPanel/RealmPanelCountdown.tsx b/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx
similarity index 97%
rename from src/shared/components/RealmPanel/RealmPanelCountdown.tsx
rename to src/ui/Island/RealmPanel/RealmPanelCountdown.tsx
index 1b7addf59..efbd1b299 100644
--- a/src/shared/components/RealmPanel/RealmPanelCountdown.tsx
+++ b/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx
@@ -7,7 +7,7 @@ import {
 } from "redux-state"
 import { getNextSelectedWeekDay, getTimeRemaining } from "shared/utils"
 import xpBoostIcon from "shared/assets/icons/xp-boost.svg"
-import Icon from "../Icon"
+import Icon from "shared/components/Media/Icon"
 
 export default function RealmPanelCountdown() {
   const seasonWeek = useDappSelector(selectSeasonWeek)
diff --git a/src/shared/components/RealmPanel/index.tsx b/src/ui/Island/RealmPanel/index.tsx
similarity index 95%
rename from src/shared/components/RealmPanel/index.tsx
rename to src/ui/Island/RealmPanel/index.tsx
index 4193815f3..69cfa0a6f 100644
--- a/src/shared/components/RealmPanel/index.tsx
+++ b/src/ui/Island/RealmPanel/index.tsx
@@ -9,7 +9,7 @@ import RealmDetailsPanel from "./RealmDetailsPanel"
 import RealmLeaderboardPanel from "./RealmLeaderboardPanel"
 import RealmPanelCountdown from "./RealmPanelCountdown"
 import RealmPanelCloseButton from "./RealmPanelCloseButton"
-import Panel from "../Panel"
+import Panel from "../../../shared/components/Dialogs/Panel"
 
 export default function RealmPanel({ onClose }: { onClose: () => void }) {
   const { updateAssistant } = useAssistant()
diff --git a/src/ui/Island/IslandRealms.tsx b/src/ui/Island/Realms/IslandRealms.tsx
similarity index 100%
rename from src/ui/Island/IslandRealms.tsx
rename to src/ui/Island/Realms/IslandRealms.tsx
diff --git a/src/ui/Island/Realm.tsx b/src/ui/Island/Realms/Realm.tsx
similarity index 96%
rename from src/ui/Island/Realm.tsx
rename to src/ui/Island/Realms/Realm.tsx
index 4a82bd012..924cc727c 100644
--- a/src/ui/Island/Realm.tsx
+++ b/src/ui/Island/Realms/Realm.tsx
@@ -11,20 +11,21 @@ import {
   REALM_FONT_FAMILY,
   REALM_FONT_STYLE,
 } from "shared/constants"
-import { useDisplayedRealms, useMultiRef } from "shared/hooks"
-import { BUBBLE_CONFIG } from "shared/components/RealmCutout/Bubble"
+import {
+  useDisplayedRealms,
+  useMultiRef,
+  useIslandContext,
+  useIslandRealmsPaths,
+  usePopulationBubble,
+} from "shared/hooks"
+import { BUBBLE_CONFIG } from "shared/components/Realm/Bubble"
 import {
   selectDisplayedRealmId,
   selectRealmPanelVisible,
   useDappSelector,
 } from "redux-state"
-import {
-  useIslandContext,
-  useIslandRealmsPaths,
-  usePopulationBubble,
-} from "../../shared/hooks"
-import NewRealmLabel from "./IslandRealmsDetails/NewRealmLabel"
-import NewChallengeLabel from "./IslandRealmsDetails/NewChallengeLabel"
+import NewRealmLabel from "../Details/NewRealmLabel"
+import NewChallengeLabel from "../Details/NewChallengeLabel"
 
 type RealmProps = {
   id: string
diff --git a/src/shared/components/RealmIcon.tsx b/src/ui/Island/Realms/RealmIcon.tsx
similarity index 100%
rename from src/shared/components/RealmIcon.tsx
rename to src/ui/Island/Realms/RealmIcon.tsx
diff --git a/src/ui/Island/Cursor/CursorLabel.tsx b/src/ui/Island/Reflect/CursorLabel.tsx
similarity index 96%
rename from src/ui/Island/Cursor/CursorLabel.tsx
rename to src/ui/Island/Reflect/CursorLabel.tsx
index 6eaafb527..2cd2b401a 100644
--- a/src/ui/Island/Cursor/CursorLabel.tsx
+++ b/src/ui/Island/Reflect/CursorLabel.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { ReflectCursor, ReflectUserInfo } from "shared/types"
 import { REALM_ICONS } from "shared/constants"
 
diff --git a/src/ui/Island/Cursor/index.tsx b/src/ui/Island/Reflect/IslandCursor.tsx
similarity index 100%
rename from src/ui/Island/Cursor/index.tsx
rename to src/ui/Island/Reflect/IslandCursor.tsx
diff --git a/src/ui/Island/IslandPresence.tsx b/src/ui/Island/Reflect/IslandPresence.tsx
similarity index 93%
rename from src/ui/Island/IslandPresence.tsx
rename to src/ui/Island/Reflect/IslandPresence.tsx
index 85858ca37..62d836d4e 100644
--- a/src/ui/Island/IslandPresence.tsx
+++ b/src/ui/Island/Reflect/IslandPresence.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { useReflectCursors } from "shared/hooks"
-import IslandCursor from "./Cursor"
+import IslandCursor from "./IslandCursor"
 
 export default function IslandPresence() {
   const { visibleCursors, currentUser } = useReflectCursors()
diff --git a/src/ui/Island/RealmDetails/StakingForms/StakeCongratulationsModal.tsx b/src/ui/Island/Staking/StakeCongratulationsModal.tsx
similarity index 81%
rename from src/ui/Island/RealmDetails/StakingForms/StakeCongratulationsModal.tsx
rename to src/ui/Island/Staking/StakeCongratulationsModal.tsx
index c6cccae2e..6731a6b5c 100644
--- a/src/ui/Island/RealmDetails/StakingForms/StakeCongratulationsModal.tsx
+++ b/src/ui/Island/Staking/StakeCongratulationsModal.tsx
@@ -4,9 +4,9 @@ import {
   useDappSelector,
   selectDisplayedRealmId,
 } from "redux-state"
-import Button from "shared/components/Button"
-import CongratulationsModal from "shared/components/Modals/CongratulationsModal"
-import { RealmCutout } from "shared/components/RealmCutout"
+import Button from "shared/components/Interface/Button"
+import CongratulationsModal from "ui/Island/Modals/CongratulationsModal"
+import { RealmCutout } from "shared/components/Realm"
 
 type StakeCongratulationsModalProps = {
   isOpen: boolean
diff --git a/src/ui/Island/RealmDetails/StakingForms/StakeForm.tsx b/src/ui/Island/Staking/StakeForm.tsx
similarity index 98%
rename from src/ui/Island/RealmDetails/StakingForms/StakeForm.tsx
rename to src/ui/Island/Staking/StakeForm.tsx
index 5bcb102d0..3874d78b3 100644
--- a/src/ui/Island/RealmDetails/StakingForms/StakeForm.tsx
+++ b/src/ui/Island/Staking/StakeForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react"
-import TokenAmountInput from "shared/components/TokenAmountInput"
+import TokenAmountInput from "shared/components/Interface/TokenAmountInput"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import {
   stakeTaho,
diff --git a/src/shared/components/Staking/UnstakeCooldown.tsx b/src/ui/Island/Staking/UnstakeCooldown.tsx
similarity index 100%
rename from src/shared/components/Staking/UnstakeCooldown.tsx
rename to src/ui/Island/Staking/UnstakeCooldown.tsx
diff --git a/src/ui/Island/RealmDetails/StakingForms/UnstakeForm.tsx b/src/ui/Island/Staking/UnstakeForm.tsx
similarity index 97%
rename from src/ui/Island/RealmDetails/StakingForms/UnstakeForm.tsx
rename to src/ui/Island/Staking/UnstakeForm.tsx
index ef34446d1..97ce14793 100644
--- a/src/ui/Island/RealmDetails/StakingForms/UnstakeForm.tsx
+++ b/src/ui/Island/Staking/UnstakeForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react"
-import TokenAmountInput from "shared/components/TokenAmountInput"
+import TokenAmountInput from "shared/components/Interface/TokenAmountInput"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import {
   useDappDispatch,
@@ -15,7 +15,7 @@ import {
 } from "redux-state"
 import { isValidInputAmount } from "shared/utils"
 import classNames from "classnames"
-import UnstakeCooldown from "shared/components/Staking/UnstakeCooldown"
+import UnstakeCooldown from "ui/Island/Staking/UnstakeCooldown"
 import { TransactionProgressStatus } from "shared/types"
 import TransactionProgress from "shared/components/Transactions/TransactionProgress"
 import ModalLeavingRealm from "ui/Island/Modals/ModalLeavingRealm"
diff --git a/src/ui/Island/index.tsx b/src/ui/Island/index.tsx
index 217fdf9b5..0aa33ed01 100644
--- a/src/ui/Island/index.tsx
+++ b/src/ui/Island/index.tsx
@@ -14,12 +14,12 @@ import {
   useDappDispatch,
   useDappSelector,
 } from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
+import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import { usePostHog } from "posthog-js/react"
-import RealmPanel from "shared/components/RealmPanel"
+import RealmPanel from "ui/Island/RealmPanel"
 import { REALM_PANEL_ANIMATION_TIME } from "shared/constants"
-import InteractiveIsland from "./InteractiveIsland"
-import IslandPresence from "./IslandPresence"
+import InteractiveIsland from "./Background/InteractiveIsland"
+import IslandPresence from "./Reflect/IslandPresence"
 
 function IslandWrapper() {
   const assetsLoaded = useAssets([backgroundImg])
diff --git a/src/ui/LiquidityPool/index.tsx b/src/ui/LiquidityPool/index.tsx
index 0e19573a8..7730b4734 100644
--- a/src/ui/LiquidityPool/index.tsx
+++ b/src/ui/LiquidityPool/index.tsx
@@ -9,9 +9,9 @@ import {
 } from "redux-state"
 import { isValidInputAmount } from "shared/utils"
 import { useArbitrumProvider } from "shared/hooks"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
-import TokenAmountInput from "shared/components/TokenAmountInput"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
+import TokenAmountInput from "shared/components/Interface/TokenAmountInput"
 import { ETH_ADDRESS, TAHO_ADDRESS } from "shared/constants"
 
 const LP_TX_ID = "joinLP"
diff --git a/src/ui/Nav/AccountDropdown.tsx b/src/ui/Nav/AccountDropdown.tsx
index 39706af23..57616db5c 100644
--- a/src/ui/Nav/AccountDropdown.tsx
+++ b/src/ui/Nav/AccountDropdown.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react"
 import { useConnect } from "shared/hooks"
-import Button from "shared/components/Button"
+import Button from "shared/components/Interface/Button"
 import { useDappSelector, selectWalletName } from "redux-state"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import disconnectIcon from "shared/assets/icons/m/disconnect.svg"
 import arbitrumIcon from "shared/assets/partners/arbitrum.svg"
 
diff --git a/src/ui/Nav/AccountInfo.tsx b/src/ui/Nav/AccountInfo.tsx
index 140c0eb67..6ea0ff9bb 100644
--- a/src/ui/Nav/AccountInfo.tsx
+++ b/src/ui/Nav/AccountInfo.tsx
@@ -5,9 +5,9 @@ import {
   selectStakingRealmId,
   selectRealmById,
 } from "redux-state"
-import RealmIcon from "shared/components/RealmIcon"
+import RealmIcon from "ui/Island/Realms/RealmIcon"
 import { getRealmColor } from "shared/constants"
-import Avatar from "shared/components/Avatar"
+import Avatar from "shared/components/Media/Avatar"
 import AccountDropdown from "./AccountDropdown"
 
 export default function AccountInfo() {
diff --git a/src/ui/Nav/BraveNav.tsx b/src/ui/Nav/BraveNav.tsx
index c26705dec..d06852cf1 100644
--- a/src/ui/Nav/BraveNav.tsx
+++ b/src/ui/Nav/BraveNav.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import braveIcon from "shared/assets/brave.png"
 import { LINKS, LOCAL_STORAGE_BRAVE } from "shared/constants"
 import closeIcon from "shared/assets/icons/s/close-black.svg"
diff --git a/src/ui/Nav/MobileNav.tsx b/src/ui/Nav/MobileNav.tsx
index 025c6139f..7bfd98de8 100644
--- a/src/ui/Nav/MobileNav.tsx
+++ b/src/ui/Nav/MobileNav.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import logoIcon from "shared/assets/nav_logo.svg"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { useResetTenderlyFork } from "shared/hooks"
 import NavContainer from "./NavContainer"
 
diff --git a/src/ui/Nav/index.tsx b/src/ui/Nav/index.tsx
index 5b3971d45..200387502 100644
--- a/src/ui/Nav/index.tsx
+++ b/src/ui/Nav/index.tsx
@@ -1,9 +1,9 @@
 import React from "react"
-import Button from "shared/components/Button"
+import Button from "shared/components/Interface/Button"
 import logoIcon from "shared/assets/nav_logo.svg"
 import walletIcon from "shared/assets/icons/wallet.svg"
 import { useConnect, useResetTenderlyFork } from "shared/hooks"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import AccountInfo from "./AccountInfo"
 import NavItems from "./NavItems"
 import NavContainer from "./NavContainer"
diff --git a/src/ui/Onboarding/ConnectWallet.tsx b/src/ui/Onboarding/ConnectWallet.tsx
index e79331ec9..3e6c74409 100644
--- a/src/ui/Onboarding/ConnectWallet.tsx
+++ b/src/ui/Onboarding/ConnectWallet.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import OnboardingModal from "shared/components/Modals/OnboardingModal"
+import OnboardingModal from "ui/Island/Modals/OnboardingModal"
 import { useConnect } from "shared/hooks"
 
 export default function ConnectWallet() {
diff --git a/src/ui/Onboarding/EnterPortal.tsx b/src/ui/Onboarding/EnterPortal.tsx
index baea0e0ee..659087a1a 100644
--- a/src/ui/Onboarding/EnterPortal.tsx
+++ b/src/ui/Onboarding/EnterPortal.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react"
-import OnboardingModal from "shared/components/Modals/OnboardingModal"
+import OnboardingModal from "ui/Island/Modals/OnboardingModal"
 import { useWalletOnboarding } from "shared/hooks"
 import {
   selectWalletAddress,
diff --git a/src/ui/Onboarding/JoinWaitlist.tsx b/src/ui/Onboarding/JoinWaitlist.tsx
index 20af0c8d5..92f05ba37 100644
--- a/src/ui/Onboarding/JoinWaitlist.tsx
+++ b/src/ui/Onboarding/JoinWaitlist.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import OnboardingModal from "shared/components/Modals/OnboardingModal"
-import Icon from "shared/components/Icon"
+import OnboardingModal from "ui/Island/Modals/OnboardingModal"
+import Icon from "shared/components/Media/Icon"
 import newTab from "shared/assets/icons/m/new-tab.svg"
 import { LINKS } from "shared/constants"
 
diff --git a/src/ui/Onboarding/Loader.tsx b/src/ui/Onboarding/Loader.tsx
index e9267a181..b43e649b9 100644
--- a/src/ui/Onboarding/Loader.tsx
+++ b/src/ui/Onboarding/Loader.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import GoldenCircleSpinner from "shared/components/Loaders/GoldenCircleSpinner"
 import LoadingText from "shared/components/Loaders/LoadingText"
-import OnboardingModal from "shared/components/Modals/OnboardingModal"
+import OnboardingModal from "ui/Island/Modals/OnboardingModal"
 
 export default function OnboardingModalLoader() {
   return (
diff --git a/src/ui/Onboarding/index.tsx b/src/ui/Onboarding/index.tsx
index bd0ad1a74..d76fac4ea 100644
--- a/src/ui/Onboarding/index.tsx
+++ b/src/ui/Onboarding/index.tsx
@@ -5,10 +5,10 @@ import {
   selectHasRelevantTokens,
   selectHasLoadedBalances,
 } from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
+import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import Nav from "ui/Nav"
 import portalBackground from "shared/assets/portal-background.mp4"
-import Version from "shared/components/Version"
+import Version from "shared/components/Misc/Version"
 import OnboardingFooter from "ui/Footer/OnboardingFooter"
 import ConnectWallet from "./ConnectWallet"
 import JoinWaitlist from "./JoinWaitlist"
diff --git a/src/ui/Referrals/ReferralsTips.tsx b/src/ui/Referrals/ReferralsTips.tsx
index 95f06ea6d..8d6c4f328 100644
--- a/src/ui/Referrals/ReferralsTips.tsx
+++ b/src/ui/Referrals/ReferralsTips.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import lightIcon from "shared/assets/icons/m/light.svg"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 
 export default function ReferralsTips() {
   return (
diff --git a/src/ui/Referrals/index.tsx b/src/ui/Referrals/index.tsx
index 9892a8911..3403d8a98 100644
--- a/src/ui/Referrals/index.tsx
+++ b/src/ui/Referrals/index.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { useConnect } from "shared/hooks"
-import TahoAmount from "shared/components/TahoAmount"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
-import Modal from "shared/components/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
+import Modal from "shared/components/Dialogs/Modal"
 import eyeIcon from "shared/assets/icons/m/eye.svg"
 import twitterIcon from "shared/assets/icons/twitter.svg"
 import copyIcon from "shared/assets/icons/s/copy.svg"