diff --git a/src/App.jsx b/src/App.jsx
index e75dd46..8a650ed 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,9 @@
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 import './style.css';
 import Loader from './components/Loader.jsx';
-const Header = lazy(() => import('./components/Header.jsx'));
-const MainSection = lazy(() => import('./components/MainSection.jsx'));
-const Footer = lazy(() => import('./components/Footer.jsx'));
+const Header = lazy(() => import('./components/header/Header.jsx'));
+const MainSection = lazy(() => import('./components/main/MainSection.jsx'));
+const Footer = lazy(() => import('./components/footer/Footer.jsx'));
 
 export default function App() {
 
diff --git a/src/components/NotFoundError.jsx b/src/components/error/NotFoundError.jsx
similarity index 100%
rename from src/components/NotFoundError.jsx
rename to src/components/error/NotFoundError.jsx
diff --git a/src/components/Footer.jsx b/src/components/footer/Footer.jsx
similarity index 79%
rename from src/components/Footer.jsx
rename to src/components/footer/Footer.jsx
index b03d855..6dfa9af 100644
--- a/src/components/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import xDark from '../images/x-twitter-dark.svg';
-import xLight from '../images/x-twitter-light.svg';
-import linkedinDark from '../images/linkedin-dark.svg';
-import linkedinLight from '../images/linkedin-light.svg';
-import githubDark from '../images/github-dark.svg';
-import githubLight from '../images/github-light.svg';
+import xDark from '../../images/x-twitter-dark.svg';
+import xLight from '../../images/x-twitter-light.svg';
+import linkedinDark from '../../images/linkedin-dark.svg';
+import linkedinLight from '../../images/linkedin-light.svg';
+import githubDark from '../../images/github-dark.svg';
+import githubLight from '../../images/github-light.svg';
 
 export default function Footer({ theme }) {
 
diff --git a/src/components/Header.jsx b/src/components/header/Header.jsx
similarity index 85%
rename from src/components/Header.jsx
rename to src/components/header/Header.jsx
index a383b63..de9b385 100644
--- a/src/components/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import photo from '../images/photo.jpeg';
-import iconSun from '../images/icon-sun.svg';
-import iconMoon from '../images/icon-moon.svg';
+import photo from '../../images/photo.jpeg';
+import iconSun from '../../images/icon-sun.svg';
+import iconMoon from '../../images/icon-moon.svg';
 
 export default function Header({theme, changeTheme}) {
 
diff --git a/src/components/History.jsx b/src/components/history/History.jsx
similarity index 97%
rename from src/components/History.jsx
rename to src/components/history/History.jsx
index 77ac75b..7ab1d1b 100644
--- a/src/components/History.jsx
+++ b/src/components/history/History.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 import { Link } from 'react-router-dom';
 
 export default function History() {
diff --git a/src/components/MainSection.jsx b/src/components/main/MainSection.jsx
similarity index 73%
rename from src/components/MainSection.jsx
rename to src/components/main/MainSection.jsx
index 46269d6..fac5758 100644
--- a/src/components/MainSection.jsx
+++ b/src/components/main/MainSection.jsx
@@ -1,17 +1,17 @@
 import React, { Suspense, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import searchDark from '../images/search-dark.svg';
-import searchLight from '../images/search-light.svg';
-import historyDark from '../images/clock-rotate-left-dark.svg';
-import historyLight from '../images/clock-rotate-left-light.svg';
-import houseDark from '../images/house-dark.svg';
-import houseLight from '../images/house-light.svg';
-import xMarkDark from '../images/xmark-dark.svg';
-import xMarkLight from '../images/xmark-light.svg';
-import { WordDataContextProvider } from '../contexts/WordDataContext.jsx';
+import searchDark from '../../images/search-dark.svg';
+import searchLight from '../../images/search-light.svg';
+import historyDark from '../../images/clock-rotate-left-dark.svg';
+import historyLight from '../../images/clock-rotate-left-light.svg';
+import houseDark from '../../images/house-dark.svg';
+import houseLight from '../../images/house-light.svg';
+import xMarkDark from '../../images/xmark-dark.svg';
+import xMarkLight from '../../images/xmark-light.svg';
+import { WordDataContextProvider } from '../../contexts/WordDataContext.jsx';
 import NavLinks from './NavLinks.jsx';
-import Loader from './Loader.jsx';
+import Loader from '../Loader.jsx';
 
 export default function MainSection({ theme, userData, setUserData }) {
 
diff --git a/src/components/NavLinks.jsx b/src/components/main/NavLinks.jsx
similarity index 98%
rename from src/components/NavLinks.jsx
rename to src/components/main/NavLinks.jsx
index 4866bc5..99fe297 100644
--- a/src/components/NavLinks.jsx
+++ b/src/components/main/NavLinks.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 
 export default function NavLinks() {
 
diff --git a/src/components/Input.jsx b/src/components/search/Input.jsx
similarity index 95%
rename from src/components/Input.jsx
rename to src/components/search/Input.jsx
index bb6aa96..5e5a2dd 100644
--- a/src/components/Input.jsx
+++ b/src/components/search/Input.jsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext.jsx';
+import { useWordDataContext } from '../../contexts/WordDataContext.jsx';
 
 export default function Input() {
 
diff --git a/src/components/Search.jsx b/src/components/search/Search.jsx
similarity index 94%
rename from src/components/Search.jsx
rename to src/components/search/Search.jsx
index 3d86f45..011995a 100644
--- a/src/components/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -1,10 +1,10 @@
 import React, { lazy, Suspense, useCallback, useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext.jsx';
+import { useWordDataContext } from '../../contexts/WordDataContext.jsx';
 const Input = lazy(() => import('./Input.jsx'));
 const WordResult = lazy(() => import('./WordResult.jsx'));
-const NotFoundError = lazy(() => import('./NotFoundError.jsx'));
-import Loader from './Loader.jsx';
+const NotFoundError = lazy(() => import('../error/NotFoundError.jsx'));
+import Loader from '../Loader.jsx';
 
 export default function Search() {
 
diff --git a/src/components/WordResult.jsx b/src/components/search/WordResult.jsx
similarity index 100%
rename from src/components/WordResult.jsx
rename to src/components/search/WordResult.jsx
diff --git a/src/components/WelcomeScreen.jsx b/src/components/welcomeScreen/WelcomeScreen.jsx
similarity index 95%
rename from src/components/WelcomeScreen.jsx
rename to src/components/welcomeScreen/WelcomeScreen.jsx
index 4a71c25..587d85d 100644
--- a/src/components/WelcomeScreen.jsx
+++ b/src/components/welcomeScreen/WelcomeScreen.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 
 export default function WelcomeScreen() {
 
@@ -9,7 +9,7 @@ export default function WelcomeScreen() {
     // Home state is active when this component is rendered.
     useEffect(() => {
         setHomeLinkActive(true);
-    })
+    });
 
     // Array of objects for initial word cards.
     const wordCards = [
diff --git a/src/main.jsx b/src/main.jsx
index 68eca1c..b148cca 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,9 +2,9 @@ import React, { lazy } from 'react';
 import ReactDOM from 'react-dom/client';
 import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
 import App from './App.jsx';
-const History = lazy(() => import('./components/History.jsx'));
-const WelcomeScreen = lazy(() => import('./components/WelcomeScreen.jsx'));
-const Search = lazy(() => import('./components/Search.jsx'));
+const History = lazy(() => import('./components/history/History.jsx'));
+const WelcomeScreen = lazy(() => import('./components/welcomeScreen/WelcomeScreen.jsx'));
+const Search = lazy(() => import('./components/search/Search.jsx'));
 
 const router = createBrowserRouter(
   createRoutesFromElements(