diff --git a/frontend/src/BrowseTools.js b/frontend/src/components/BrowseTools.js
similarity index 100%
rename from frontend/src/BrowseTools.js
rename to frontend/src/components/BrowseTools.js
diff --git a/frontend/src/CroppedImage.js b/frontend/src/components/CroppedImage.js
similarity index 95%
rename from frontend/src/CroppedImage.js
rename to frontend/src/components/CroppedImage.js
index 267741c4..6d26c7da 100644
--- a/frontend/src/CroppedImage.js
+++ b/frontend/src/components/CroppedImage.js
@@ -1,4 +1,4 @@
-import './CroppedImage.css';
+import '../styles/CroppedImage.css';
 
 import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
diff --git a/frontend/src/DocumentSources.js b/frontend/src/components/DocumentSources.js
similarity index 100%
rename from frontend/src/DocumentSources.js
rename to frontend/src/components/DocumentSources.js
diff --git a/frontend/src/DocumentsCards.js b/frontend/src/components/DocumentsCards.js
similarity index 100%
rename from frontend/src/DocumentsCards.js
rename to frontend/src/components/DocumentsCards.js
diff --git a/frontend/src/EditableText.js b/frontend/src/components/EditableText.js
similarity index 97%
rename from frontend/src/EditableText.js
rename to frontend/src/components/EditableText.js
index 8e6dca22..40cac0c0 100644
--- a/frontend/src/EditableText.js
+++ b/frontend/src/components/EditableText.js
@@ -1,4 +1,4 @@
-import './EditableText.css';
+import '../styles/EditableText.css';
 
 import { useState, useEffect } from 'react';
 import FormattedText from './FormattedText';
diff --git a/frontend/src/FormattedText.js b/frontend/src/components/FormattedText.js
similarity index 100%
rename from frontend/src/FormattedText.js
rename to frontend/src/components/FormattedText.js
diff --git a/frontend/src/FutureCollection.js b/frontend/src/components/FutureCollection.js
similarity index 100%
rename from frontend/src/FutureCollection.js
rename to frontend/src/components/FutureCollection.js
diff --git a/frontend/src/FutureDocument.js b/frontend/src/components/FutureDocument.js
similarity index 96%
rename from frontend/src/FutureDocument.js
rename to frontend/src/components/FutureDocument.js
index ded5222a..b417fa5b 100644
--- a/frontend/src/FutureDocument.js
+++ b/frontend/src/components/FutureDocument.js
@@ -1,4 +1,4 @@
-import './FutureDocument.css';
+import '../styles/FutureDocument.css';
 
 import { useNavigate } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
diff --git a/frontend/src/Menu.js b/frontend/src/components/Menu.js
similarity index 98%
rename from frontend/src/Menu.js
rename to frontend/src/components/Menu.js
index 8b98bd36..a2f0da73 100644
--- a/frontend/src/Menu.js
+++ b/frontend/src/components/Menu.js
@@ -1,4 +1,4 @@
-import './Menu.css';
+import '../styles/Menu.css';
 
 import Navbar from 'react-bootstrap/Navbar';
 import Container from 'react-bootstrap/Container';
diff --git a/frontend/src/Metadata.js b/frontend/src/components/Metadata.js
similarity index 98%
rename from frontend/src/Metadata.js
rename to frontend/src/components/Metadata.js
index 518db45c..366a2ac3 100644
--- a/frontend/src/Metadata.js
+++ b/frontend/src/components/Metadata.js
@@ -1,4 +1,4 @@
-import './Metadata.css';
+import '../styles/Metadata.css';
 
 import { useEffect, useState } from 'react';
 import yaml from 'yaml';
diff --git a/frontend/src/Type.js b/frontend/src/components/Type.js
similarity index 97%
rename from frontend/src/Type.js
rename to frontend/src/components/Type.js
index 1d8368c6..d096e58a 100644
--- a/frontend/src/Type.js
+++ b/frontend/src/components/Type.js
@@ -1,5 +1,5 @@
-import './Metadata.css';
-import './Type.css';
+import '../styles/Metadata.css';
+import '../styles/Type.css';
 
 import { TagFill } from 'react-bootstrap-icons';
 import { useState, useContext } from 'react';
diff --git a/frontend/src/TypesContext.js b/frontend/src/components/TypesContext.js
similarity index 100%
rename from frontend/src/TypesContext.js
rename to frontend/src/components/TypesContext.js
diff --git a/frontend/src/VideoComment.js b/frontend/src/components/VideoComment.js
similarity index 94%
rename from frontend/src/VideoComment.js
rename to frontend/src/components/VideoComment.js
index 64bbca92..d71772c3 100644
--- a/frontend/src/VideoComment.js
+++ b/frontend/src/components/VideoComment.js
@@ -1,4 +1,4 @@
-import './VideoComment.css';
+import '../styles/VideoComment.css';
 
 function VideoComment({ children }) {
   const timecodeRegex = /(\d{2}:\d{2}:\d{2}\.\d{3}\s*-->\s*\d{2}:\d{2}:\d{2}\.\d{3})/;
@@ -31,4 +31,4 @@ function VideoComment({ children }) {
   }
 }
 
-export default VideoComment;
\ No newline at end of file
+export default VideoComment;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index ff466f55..e7d47b6e 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import Menu from './Menu';
-import Page from './Page';
-import Bookshelf from './Bookshelf';
+import './styles/index.css';
+import Menu from './components/Menu';
+import Page from './routes/Page';
+import Bookshelf from './routes/Bookshelf';
 import Hyperglosae from './hyperglosae';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import 'react-notifications/lib/notifications.css';
-import { TypesContext } from './TypesContext.js';
+import { TypesContext } from './components/TypesContext.js';
 
 const backend = new Hyperglosae(
   x => NotificationManager.warning(x, '', 2000)
diff --git a/frontend/src/Bookshelf.js b/frontend/src/routes/Bookshelf.js
similarity index 88%
rename from frontend/src/Bookshelf.js
rename to frontend/src/routes/Bookshelf.js
index d4c0576c..5c3ecc70 100644
--- a/frontend/src/Bookshelf.js
+++ b/frontend/src/routes/Bookshelf.js
@@ -1,8 +1,8 @@
-import './Bookshelf.css';
+import '../styles/Bookshelf.css';
 
 import { useState, useEffect } from 'react';
 import Container from 'react-bootstrap/Container';
-import DocumentsCards from './DocumentsCards';
+import DocumentsCards from '../components/DocumentsCards';
 
 function Bookshelf({backend}) {
   const [documents, setDocuments] = useState([]);
diff --git a/frontend/src/Page.js b/frontend/src/routes/Page.js
similarity index 94%
rename from frontend/src/Page.js
rename to frontend/src/routes/Page.js
index ba12cdd4..2a5ffd51 100644
--- a/frontend/src/Page.js
+++ b/frontend/src/routes/Page.js
@@ -1,4 +1,4 @@
-import './Page.css';
+import '../styles/Page.css';
 
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
@@ -6,12 +6,12 @@ import Col from 'react-bootstrap/Col';
 import { useState, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { BookmarkFill } from 'react-bootstrap-icons';
-import Metadata from './Metadata';
-import DocumentsCards from './DocumentsCards';
-import BrowseTools from './BrowseTools';
-import EditableText from './EditableText';
-import DocumentSources from './DocumentSources';
-import Type, { TypeBadge } from './Type';
+import Metadata from '../components/Metadata';
+import DocumentsCards from '../components/DocumentsCards';
+import BrowseTools from '../components/BrowseTools';
+import EditableText from '../components/EditableText';
+import DocumentSources from '../components/DocumentSources';
+import Type, { TypeBadge } from '../components/Type';
 
 function Page({backend}) {
 
diff --git a/frontend/src/Bookshelf.css b/frontend/src/styles/Bookshelf.css
similarity index 100%
rename from frontend/src/Bookshelf.css
rename to frontend/src/styles/Bookshelf.css
diff --git a/frontend/src/CroppedImage.css b/frontend/src/styles/CroppedImage.css
similarity index 100%
rename from frontend/src/CroppedImage.css
rename to frontend/src/styles/CroppedImage.css
diff --git a/frontend/src/EditableText.css b/frontend/src/styles/EditableText.css
similarity index 100%
rename from frontend/src/EditableText.css
rename to frontend/src/styles/EditableText.css
diff --git a/frontend/src/FutureDocument.css b/frontend/src/styles/FutureDocument.css
similarity index 100%
rename from frontend/src/FutureDocument.css
rename to frontend/src/styles/FutureDocument.css
diff --git a/frontend/src/Menu.css b/frontend/src/styles/Menu.css
similarity index 100%
rename from frontend/src/Menu.css
rename to frontend/src/styles/Menu.css
diff --git a/frontend/src/Metadata.css b/frontend/src/styles/Metadata.css
similarity index 100%
rename from frontend/src/Metadata.css
rename to frontend/src/styles/Metadata.css
diff --git a/frontend/src/Page.css b/frontend/src/styles/Page.css
similarity index 100%
rename from frontend/src/Page.css
rename to frontend/src/styles/Page.css
diff --git a/frontend/src/Type.css b/frontend/src/styles/Type.css
similarity index 100%
rename from frontend/src/Type.css
rename to frontend/src/styles/Type.css
diff --git a/frontend/src/VideoComment.css b/frontend/src/styles/VideoComment.css
similarity index 100%
rename from frontend/src/VideoComment.css
rename to frontend/src/styles/VideoComment.css
diff --git a/frontend/src/index.css b/frontend/src/styles/index.css
similarity index 100%
rename from frontend/src/index.css
rename to frontend/src/styles/index.css