diff --git a/package.json b/package.json
index 9dd76e7dd0..069e21bdeb 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
         "@types/node": "^16",
         "@types/node-fetch": "^2.6.4",
         "@types/react": "17.0.68",
+        "@types/react-beautiful-dnd": "^13.1.7",
         "@types/react-dom": "17.0.21",
         "@types/ua-parser-js": "^0.7.36",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -171,6 +172,7 @@
         "process": "^0.11.10",
         "proxy-agent": "^6.3.0",
         "raw-loader": "^4.0.2",
+        "react-beautiful-dnd": "^13.1.0",
         "rimraf": "^5.0.0",
         "semver": "^7.5.2",
         "setimmediate": "^1.0.5",
diff --git a/res/themes/superhero/img/icons/diamond.svg b/res/themes/superhero/img/icons/diamond.svg
index 3dde2a30d9..605a7794cf 100644
--- a/res/themes/superhero/img/icons/diamond.svg
+++ b/res/themes/superhero/img/icons/diamond.svg
@@ -1,3 +1,5 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9.69255L7.29577 4.91003H16.7042L22 9.69255L12.0282 19.0945L2 9.69255ZM7.88733 6.3774H10.7606L16.9014 12.4371L12 17.0565L4.19718 9.71973L7.88733 6.3774Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M2 9.69255L7.29577 4.91003H16.7042L22 9.69255L12.0282 19.0945L2 9.69255ZM7.88733 6.3774H10.7606L16.9014 12.4371L12 17.0565L4.19718 9.71973L7.88733 6.3774Z"
+        fill="currentColor" />
 </svg>
diff --git a/res/themes/superhero/img/icons/tokens.svg b/res/themes/superhero/img/icons/tokens.svg
index 3a9dbdadca..c4b45c7c24 100644
--- a/res/themes/superhero/img/icons/tokens.svg
+++ b/res/themes/superhero/img/icons/tokens.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
         d="M4.77777 17.4467C5.80561 18.1334 7.01401 18.5 8.25018 18.5C9.61022 18.5 10.9245 18.0567 12 17.2502C12.7164 17.7874 13.5435 18.1671 14.4271 18.3584C15.6806 18.6299 16.9873 18.5091 18.1698 18.0125C19.3524 17.5159 20.3535 16.6676 21.0374 15.5826C21.7212 14.4976 22.0548 13.2284 21.9927 11.9474C21.9306 10.6664 21.4759 9.43549 20.6903 8.42171C19.9047 7.40793 18.8262 6.66038 17.6012 6.28048C16.3762 5.90058 15.0639 5.90674 13.8426 6.29811C13.1758 6.51176 12.5537 6.83456 12 7.24979C11.5837 6.93761 11.1279 6.677 10.642 6.47576C9.49995 6.00271 8.24325 5.87894 7.03083 6.12009C5.81842 6.36125 4.70474 6.95651 3.83064 7.83059C2.95653 8.70466 2.36126 9.81831 2.1201 11.0307C1.87893 12.2431 2.00271 13.4997 2.47577 14.6418C2.94883 15.7838 3.74993 16.7599 4.77777 17.4467ZM13.6667 9.13148C14.2117 10.0779 14.5004 11.153 14.5004 12.25C14.5004 13.354 14.2083 14.4279 13.6669 15.3683C14.0563 15.6284 14.4932 15.8147 14.956 15.9149C15.7082 16.0778 16.4923 16.0053 17.2019 15.7073C17.9114 15.4092 18.5121 14.9001 18.9224 14.249C19.3327 13.5978 19.5327 12.8362 19.4953 12.0675C19.4578 11.2988 19.1848 10.5603 18.7132 9.95207C18.2416 9.34386 17.5943 8.89548 16.8592 8.66777C16.124 8.44007 15.3366 8.44406 14.6037 8.67922C14.27 8.78633 13.9549 8.93902 13.6667 9.13148Z"
-        fill="white" />
+        fill="currentColor" />
 </svg>
diff --git a/src/components/views/spaces/MintTokenButton.tsx b/src/components/views/spaces/MintTokenButton.tsx
index 8d2feae0cb..ce4cd51bb5 100644
--- a/src/components/views/spaces/MintTokenButton.tsx
+++ b/src/components/views/spaces/MintTokenButton.tsx
@@ -1,8 +1,9 @@
 import classNames from "classnames";
 import AccessibleTooltipButton from "matrix-react-sdk/src/components/views/elements/AccessibleTooltipButton";
-import { _t } from "matrix-react-sdk/src/languageHandler";
 import React, { useCallback } from "react";
 
+import { _t } from "../../../languageHandler";
+
 const MintTokenButton: React.FC<{
     isPanelCollapsed: boolean;
 }> = ({ isPanelCollapsed = false }) => {
@@ -19,11 +20,11 @@ const MintTokenButton: React.FC<{
                     expanded: !isPanelCollapsed,
                 })}
                 onClick={onOpenDex}
-                title={_t('mint_a_token')}
+                title={_t("mint_a_token")}
                 forceHide={!isPanelCollapsed}
                 aria-expanded={!isPanelCollapsed}
             >
-                {!isPanelCollapsed ? _t('mint_a_token') : null}
+                {!isPanelCollapsed ? _t("mint_a_token") : null}
             </AccessibleTooltipButton>
         </>
     );
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index b8395d6459..8d0566a86d 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -61,6 +61,7 @@ import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore";
 import React, {
     ComponentProps,
     Dispatch,
+    ReactElement,
     ReactNode,
     RefCallback,
     SetStateAction,
@@ -71,6 +72,7 @@ import React, {
     useState,
 } from "react";
 import { DragDropContext, Draggable, Droppable, DroppableProvidedProps } from "react-beautiful-dnd";
+
 import SuperheroDexButton from "./SuperheroDexButton";
 import MintTokenButton from "./MintTokenButton";
 
@@ -104,7 +106,7 @@ export const HomeButtonContextMenu: React.FC<ComponentProps<typeof SpaceContextM
                     iconClassName="mx_SpacePanel_noIcon"
                     label={_t("settings|sidebar|metaspaces_home_all_rooms")}
                     active={allRoomsInHome}
-                    onClick={() => {
+                    onClick={(): void => {
                         onFinished();
                         SettingsStore.setValue("Spaces.allRoomsInHome", null, SettingLevel.ACCOUNT, !allRoomsInHome);
                     }}
@@ -228,7 +230,7 @@ const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed"
 
     const onNewClick = menuDisplayed
         ? closeMenu
-        : () => {
+        : (): void => {
               if (!isPanelCollapsed) setPanelCollapsed(true);
               openMenu();
           };
@@ -307,12 +309,12 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                         space={s}
                         activeSpaces={activeSpaces}
                         isPanelCollapsed={isPanelCollapsed}
-                        onExpand={() => setPanelCollapsed(false)}
+                        onExpand={(): void => setPanelCollapsed(false)}
                     />
                 ))}
                 {actualSpaces.map((s, i) => (
                     <Draggable key={s.roomId} draggableId={s.roomId} index={i}>
-                        {(provided, snapshot) => (
+                        {(provided, snapshot): ReactElement => (
                             <SpaceItem
                                 {...provided.draggableProps}
                                 dragHandleProps={provided.dragHandleProps}
@@ -322,7 +324,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                                 space={s}
                                 activeSpaces={activeSpaces}
                                 isPanelCollapsed={isPanelCollapsed}
-                                onExpand={() => setPanelCollapsed(false)}
+                                onExpand={(): void => setPanelCollapsed(false)}
                             />
                         )}
                     </Draggable>
@@ -353,12 +355,12 @@ const SpacePanel: React.FC = () => {
 
     return (
         <RovingTabIndexProvider handleHomeEnd handleUpDown={!dragging}>
-            {({ onKeyDownHandler, onDragEndHandler }) => (
+            {({ onKeyDownHandler, onDragEndHandler }): ReactElement => (
                 <DragDropContext
-                    onDragStart={() => {
+                    onDragStart={(): void => {
                         setDragging(true);
                     }}
-                    onDragEnd={(result) => {
+                    onDragEnd={(result): void => {
                         setDragging(false);
                         if (!result.destination) return; // dropped outside the list
                         SpaceStore.instance.moveRootSpace(result.source.index, result.destination.index);
@@ -373,7 +375,7 @@ const SpacePanel: React.FC = () => {
                         <UserMenu isPanelCollapsed={isPanelCollapsed}>
                             <AccessibleTooltipButton
                                 className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
-                                onClick={() => setPanelCollapsed(!isPanelCollapsed)}
+                                onClick={(): void => setPanelCollapsed(!isPanelCollapsed)}
                                 title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
                                 tooltip={
                                     <div>
@@ -393,7 +395,7 @@ const SpacePanel: React.FC = () => {
                             />
                         </UserMenu>
                         <Droppable droppableId="top-level-spaces">
-                            {(provided, snapshot) => (
+                            {(provided, snapshot): ReactElement => (
                                 <InnerSpacePanel
                                     {...provided.droppableProps}
                                     isPanelCollapsed={isPanelCollapsed}
diff --git a/src/components/views/spaces/SuperheroDexButton.tsx b/src/components/views/spaces/SuperheroDexButton.tsx
index 0824fc1019..f570d2a18c 100644
--- a/src/components/views/spaces/SuperheroDexButton.tsx
+++ b/src/components/views/spaces/SuperheroDexButton.tsx
@@ -1,8 +1,9 @@
 import classNames from "classnames";
 import AccessibleTooltipButton from "matrix-react-sdk/src/components/views/elements/AccessibleTooltipButton";
-import { _t } from "matrix-react-sdk/src/languageHandler";
 import React, { useCallback } from "react";
 
+import { _t } from "../../../languageHandler";
+
 const SuperheroDexButton: React.FC<{
     isPanelCollapsed: boolean;
 }> = ({ isPanelCollapsed = false }) => {
diff --git a/yarn.lock b/yarn.lock
index 585819d42d..c91654e9d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2782,6 +2782,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-beautiful-dnd@^13.1.7":
+  version "13.1.7"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.7.tgz#cc8038896ee7dee99b8bfd0eaed0a02a8617bedc"
+  integrity sha512-jQZLov9OkD0xRQkqz8/lx66bHYAYv+g4+POBqnH5Jtt/xo4MygzM879Q9sxAiosPBdNj1JYTdbPxDn3dNRYgow==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@17.0.21", "@types/react-dom@<18.0.0":
   version "17.0.21"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.21.tgz#85d56965483ce4850f5f03f9234e54a1f47786e5"