diff --git a/frontend/src/components/BackstoryLayout.tsx b/frontend/src/components/layout/BackstoryLayout.tsx
similarity index 94%
rename from frontend/src/components/BackstoryLayout.tsx
rename to frontend/src/components/layout/BackstoryLayout.tsx
index 9820681..a6c5c92 100644
--- a/frontend/src/components/BackstoryLayout.tsx
+++ b/frontend/src/components/layout/BackstoryLayout.tsx
@@ -11,14 +11,14 @@ import InfoIcon from '@mui/icons-material/Info';
 import { SxProps, Theme } from '@mui/material';
 
 
-import {Header} from './Header';
-import { Scrollable } from './Scrollable';
-import { Footer } from './Footer';
-import { Snack, SetSnackType } from './Snack';
-import { useUser } from './UserContext';
-import { User } from '../types/types';
-import { getBackstoryDynamicRoutes } from './BackstoryRoutes';
-import { LoadingComponent } from "./LoadingComponent";
+import { Header } from 'components/layout/Header';
+import { Scrollable } from 'components/Scrollable';
+import { Footer } from 'components/layout/Footer';
+import { Snack, SetSnackType } from 'components/Snack';
+import { useUser } from 'components/UserContext';
+import { User } from 'types/types';
+import { getBackstoryDynamicRoutes } from 'components/BackstoryRoutes';
+import { LoadingComponent } from "components/LoadingComponent";
 
 type NavigationLinkType = {
     name: string;
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/layout/Footer.tsx
similarity index 100%
rename from frontend/src/components/Footer.tsx
rename to frontend/src/components/layout/Footer.tsx
diff --git a/frontend/src/components/Header.css b/frontend/src/components/layout/Header.css
similarity index 100%
rename from frontend/src/components/Header.css
rename to frontend/src/components/layout/Header.css
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/layout/Header.tsx
similarity index 97%
rename from frontend/src/components/Header.tsx
rename to frontend/src/components/layout/Header.tsx
index 252c61a..6eb877f 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -30,13 +30,13 @@ import {
   ExpandMore,
 } from '@mui/icons-material';
 
-import { NavigationLinkType } from './BackstoryLayout';
-import { Beta } from './Beta';
-import './Header.css';
-import { useUser } from './UserContext';
+import { NavigationLinkType } from 'components/layout/BackstoryLayout';
+import { Beta } from 'components/Beta';
+import 'components/layout/Header.css';
+import { useUser } from 'components/UserContext';
 // import { Candidate, Employer } from '../types/types';
-import { SetSnackType } from './Snack';
-import { CopyBubble } from './CopyBubble';
+import { SetSnackType } from 'components/Snack';
+import { CopyBubble } from 'components/CopyBubble';
 
 // Styled components
 const StyledAppBar = styled(AppBar, {