diff --git a/src/components/molecules/BrowserRecordingSave.tsx b/src/components/molecules/BrowserRecordingSave.tsx
index 6e3e68f8..af9e9ea1 100644
--- a/src/components/molecules/BrowserRecordingSave.tsx
+++ b/src/components/molecules/BrowserRecordingSave.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Grid, Button, Box, Typography } from '@mui/material';
-import { SaveRecording } from "./SaveRecording";
+import { SaveRecording } from "../recorder/SaveRecording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { stopRecording } from "../../api/recording";
 import { useNavigate } from 'react-router-dom';
diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 58362061..c82cb0a4 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -8,7 +8,7 @@ import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab,
 import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language, Brightness7, Brightness4, Description } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
-import { SaveRecording } from '../molecules/SaveRecording';
+import { SaveRecording } from '../recorder/SaveRecording';
 import DiscordIcon from '../icons/DiscordIcon';
 import { apiUrl } from '../../apiConfig';
 import MaxunLogo from "../../assets/maxunlogo.png";
diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 45b55642..cde65f96 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSocketStore } from '../../context/socket';
 import { Button } from '@mui/material';
-import Canvas from "../atoms/canvas";
-import { Highlighter } from "../atoms/Highlighter";
+import Canvas from "../recorder/canvas";
+import { Highlighter } from "../recorder/Highlighter";
 import { GenericModal } from '../ui/GenericModal';
 import { useActionContext } from '../../context/browserActions';
 import { useBrowserSteps, TextStep } from '../../context/browserSteps';
diff --git a/src/components/pickers/DateTimeLocalPicker.tsx b/src/components/pickers/DateTimeLocalPicker.tsx
index 3017bd8f..c51e3540 100644
--- a/src/components/pickers/DateTimeLocalPicker.tsx
+++ b/src/components/pickers/DateTimeLocalPicker.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSocketStore } from '../../context/socket';
-import { Coordinates } from '../atoms/canvas';
+import { Coordinates } from '../recorder/canvas';
 
 interface DateTimeLocalPickerProps {
   coordinates: Coordinates;
diff --git a/src/components/pickers/Dropdown.tsx b/src/components/pickers/Dropdown.tsx
index 1333403c..df695efa 100644
--- a/src/components/pickers/Dropdown.tsx
+++ b/src/components/pickers/Dropdown.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSocketStore } from '../../context/socket';
-import { Coordinates } from '../atoms/canvas';
+import { Coordinates } from '../recorder/canvas';
 
 interface DropdownProps {
     coordinates: Coordinates;
diff --git a/src/components/pickers/TimePicker.tsx b/src/components/pickers/TimePicker.tsx
index aaa80157..7877787e 100644
--- a/src/components/pickers/TimePicker.tsx
+++ b/src/components/pickers/TimePicker.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSocketStore } from '../../context/socket';
-import { Coordinates } from '../atoms/canvas';
+import { Coordinates } from '../recorder/canvas';
 
 interface TimePickerProps {
     coordinates: Coordinates;
diff --git a/src/components/atoms/Highlighter.tsx b/src/components/recorder/Highlighter.tsx
similarity index 100%
rename from src/components/atoms/Highlighter.tsx
rename to src/components/recorder/Highlighter.tsx
diff --git a/src/components/organisms/LeftSidePanel.tsx b/src/components/recorder/LeftSidePanel.tsx
similarity index 98%
rename from src/components/organisms/LeftSidePanel.tsx
rename to src/components/recorder/LeftSidePanel.tsx
index de0b728e..05834e6b 100644
--- a/src/components/organisms/LeftSidePanel.tsx
+++ b/src/components/recorder/LeftSidePanel.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { getActiveWorkflow, getParamsOfActiveWorkflow } from "../../api/workflow";
 import { useSocketStore } from '../../context/socket';
 import { WhereWhatPair, WorkflowFile } from "maxun-core";
-import { SidePanelHeader } from "../molecules/SidePanelHeader";
+import { SidePanelHeader } from "./SidePanelHeader";
 import { emptyWorkflow } from "../../shared/constants";
 import { LeftSidePanelContent } from "../molecules/LeftSidePanelContent";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx
similarity index 99%
rename from src/components/organisms/RightSidePanel.tsx
rename to src/components/recorder/RightSidePanel.tsx
index adb295e9..5b5b5760 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/recorder/RightSidePanel.tsx
@@ -12,7 +12,7 @@ import { useBrowserSteps } from '../../context/browserSteps';
 import { useSocketStore } from '../../context/socket';
 import { ScreenshotSettings } from '../../shared/types';
 import InputAdornment from '@mui/material/InputAdornment';
-import { SidePanelHeader } from '../molecules/SidePanelHeader';
+import { SidePanelHeader } from './SidePanelHeader';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/recorder/SaveRecording.tsx
similarity index 100%
rename from src/components/molecules/SaveRecording.tsx
rename to src/components/recorder/SaveRecording.tsx
diff --git a/src/components/molecules/SidePanelHeader.tsx b/src/components/recorder/SidePanelHeader.tsx
similarity index 100%
rename from src/components/molecules/SidePanelHeader.tsx
rename to src/components/recorder/SidePanelHeader.tsx
diff --git a/src/components/atoms/canvas.tsx b/src/components/recorder/canvas.tsx
similarity index 100%
rename from src/components/atoms/canvas.tsx
rename to src/components/recorder/canvas.tsx
diff --git a/src/components/run/InterpretationLog.tsx b/src/components/run/InterpretationLog.tsx
index 5c1ccbbb..925a95ba 100644
--- a/src/components/run/InterpretationLog.tsx
+++ b/src/components/run/InterpretationLog.tsx
@@ -15,7 +15,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import StorageIcon from '@mui/icons-material/Storage';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import { SidePanelHeader } from '../molecules/SidePanelHeader';
+import { SidePanelHeader } from '../recorder/SidePanelHeader';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useThemeMode } from '../../context/theme-provider';
 import { useTranslation } from 'react-i18next';
diff --git a/src/helpers/inputHelpers.ts b/src/helpers/inputHelpers.ts
index d7861734..4d81dc59 100644
--- a/src/helpers/inputHelpers.ts
+++ b/src/helpers/inputHelpers.ts
@@ -4,7 +4,7 @@ import {
   VIEWPORT_W,
   VIEWPORT_H,
 } from "../constants/const";
-import { Coordinates } from '../components/atoms/canvas';
+import { Coordinates } from '../components/recorder/canvas';
 
 export const throttle = (callback: any, limit: number) => {
   let wait = false;
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index c1ee6200..d06340a1 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -3,8 +3,8 @@ import { Grid } from '@mui/material';
 import { BrowserContent } from "../components/organisms/BrowserContent";
 import { InterpretationLog } from "../components/run/InterpretationLog";
 import { startRecording, getActiveBrowserId } from "../api/recording";
-import { LeftSidePanel } from "../components/organisms/LeftSidePanel";
-import { RightSidePanel } from "../components/organisms/RightSidePanel";
+import { LeftSidePanel } from "../components/recorder/LeftSidePanel";
+import { RightSidePanel } from "../components/recorder/RightSidePanel";
 import { Loader } from "../components/ui/Loader";
 import { useSocketStore } from "../context/socket";
 import { useBrowserDimensionsStore } from "../context/browserDimensions";