diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookStep/steps.ts b/frontend/src/metabase/query_builder/components/notebook/NotebookStep/steps.ts
index 97038aeef65d8b97180bd00ac0ffd114c50ee46b..0ba86488051b07d9878a1ffbcf6503c4ed047ab2 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookStep/steps.ts
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookStep/steps.ts
@@ -5,7 +5,7 @@ import { color } from "metabase/lib/colors";
 
 import { IconName } from "metabase/core/components/Icon";
 import { DataStep } from "../steps/DataStep";
-import JoinStep from "../steps/JoinStep";
+import { JoinStep } from "../steps/JoinStep";
 import ExpressionStep from "../steps/ExpressionStep";
 import FilterStep from "../steps/FilterStep";
 import { AggregateStep } from "../steps/AggregateStep";
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.jsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.jsx
similarity index 99%
rename from frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.jsx
rename to frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.jsx
index 6343bd4298f7f4e1dd94e05c8fad2dadc696b93f..546c1e1a65455c34efcd629e74edb8c2e5a5336e 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.jsx
@@ -14,13 +14,13 @@ import Join from "metabase-lib/queries/structured/Join";
 import Question from "metabase-lib/Question";
 import StructuredQuery from "metabase-lib/queries/StructuredQuery";
 
-import { NotebookCellAdd, NotebookCellItem } from "../NotebookCell";
+import { NotebookCellAdd, NotebookCellItem } from "../../NotebookCell";
 import {
   FieldPickerContentContainer,
   FIELDS_PICKER_STYLES,
   FieldsPickerIcon,
-} from "../FieldsPickerIcon";
-import FieldsPicker from "./FieldsPicker";
+} from "../../FieldsPickerIcon";
+import FieldsPicker from "../FieldsPicker";
 import {
   DimensionContainer,
   DimensionSourceName,
@@ -84,7 +84,7 @@ const JOIN_OPERATOR_OPTIONS = [
   { name: "≠", value: "!=" },
 ];
 
-export default function JoinStep({
+export function JoinStep({
   color,
   query,
   step,
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.styled.tsx b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.styled.tsx
similarity index 98%
rename from frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.styled.tsx
rename to frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.styled.tsx
index 400bf0d1fab5f82cfcbc18725f1cc7067baf01e6..ca3b557edbb867b376171552c60f5470cbb45250 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep.styled.tsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/JoinStep.styled.tsx
@@ -4,7 +4,7 @@ import { color } from "metabase/lib/colors";
 import { space, breakpointMaxMedium } from "metabase/styled-components/theme";
 import { Icon } from "metabase/core/components/Icon";
 import Button from "metabase/core/components/Button";
-import { NotebookCell } from "../NotebookCell";
+import { NotebookCell } from "../../NotebookCell";
 
 export const Row = styled.div`
   display: flex;
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/index.ts b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..966b1c60996795319efa08e01338ec8fcd5680b6
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/JoinStep/index.ts
@@ -0,0 +1 @@
+export * from "./JoinStep";