diff --git a/source/src/components/Footer.tsx b/source/src/components/Footer.tsx
index b865817..392c8c6 100644
--- a/source/src/components/Footer.tsx
+++ b/source/src/components/Footer.tsx
@@ -1,6 +1,7 @@
+import styled from "styled-components"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
-import styled from "styled-components"
 
 import theming from "../theming"
 
diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index 0d526d7..9b99cb3 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -1,17 +1,17 @@
-import React from "react"
+import styled from "styled-components"
+import { Link } from "react-router-dom"
+import ReactTooltip from "react-tooltip"
+import { isMobile } from "react-device-detect"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import styled from "styled-components"
-import ReactTooltip from "react-tooltip"
-import { Link } from "react-router-dom"
-import { isMobile } from "react-device-detect"
+
+import ThemeToggleButton from "./ThemeToggleButton"
+import Sidebar from "./Sidebar"
 
 import theming from "../theming"
 import NavbarData from "../data/NavbarData"
 
-import Sidebar from "./Sidebar"
-import ThemeToggleButton from "./ThemeToggleButton"
-
 const StyledNav = styled.nav`
 	/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
 	z-index: 9999;
@@ -65,44 +65,44 @@ const StyledLink = styled(Link)`
 	margin: 0 0.2rem 0 0.2rem;
 `
 
-export default class Navbar extends React.Component {
-	render() {
-		return (
-			<StyledNav>
-				<StyledContainer>
-					<Link to="/">
-						<StyledImg
-							src={
-								process.env.PUBLIC_URL + "/icon/icon_circle.svg"
-							}
-						/>
-					</Link>
-					<StyledNavLinks>
-						{NavbarData.map((item, index) => (
-							<StyledLink key={index} to={item.path}>
-								{item.title}
-							</StyledLink>
-						))}
-					</StyledNavLinks>
+const Navbar = () => {
+	return (
+		<StyledNav>
+			<StyledContainer>
+				<Link to="/">
+					<StyledImg
+						src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
+					/>
+				</Link>
 
-					<ThemeToggleButton />
+				<StyledNavLinks>
+					{NavbarData.map((item, index) => (
+						<StyledLink key={index} to={item.path}>
+							{item.title}
+						</StyledLink>
+					))}
+				</StyledNavLinks>
 
-					<StyledLink
-						data-tip
-						data-for="search"
-						to={`${process.env.PUBLIC_URL}/search`}
-					>
-						<FontAwesomeIcon icon={faSearch} />
-					</StyledLink>
-					{!isMobile && (
-						<ReactTooltip id="search" type="dark" effect="solid">
-							<span>Search</span>
-						</ReactTooltip>
-					)}
+				<ThemeToggleButton />
 
-					<Sidebar />
-				</StyledContainer>
-			</StyledNav>
-		)
-	}
+				<StyledLink
+					data-tip
+					data-for="search"
+					to={`${process.env.PUBLIC_URL}/search`}
+				>
+					<FontAwesomeIcon icon={faSearch} />
+				</StyledLink>
+
+				{!isMobile && (
+					<ReactTooltip id="search" type="dark" effect="solid">
+						<span>Search</span>
+					</ReactTooltip>
+				)}
+
+				<Sidebar />
+			</StyledContainer>
+		</StyledNav>
+	)
 }
+
+export default Navbar
diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx
index 2534a0b..d04a6ad 100644
--- a/source/src/components/PostCard.tsx
+++ b/source/src/components/PostCard.tsx
@@ -1,10 +1,8 @@
 import styled from "styled-components"
 import { useNavigate } from "react-router-dom"
 
-import theming from "../theming"
+import { Post } from "../types/typings"
 
-import Tag from "../components/Tag"
-import TagList from "../components/TagList"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
 	faBook,
@@ -12,7 +10,10 @@ import {
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
-import { Post } from "../types/typings"
+import Tag from "../components/Tag"
+import TagList from "../components/TagList"
+
+import theming from "../theming"
 
 const StyledPostCard = styled.div`
 	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
@@ -60,11 +61,12 @@ const StyledPostCardContent = styled.div`
 interface _PostDateBase extends Post {
 	url: string
 }
-interface PostCardProps {
+
+interface Props {
 	postData: _PostDateBase
 }
 
-export default function PostCard(props: PostCardProps) {
+const PostCard = (props: Props) => {
 	const navigate = useNavigate()
 
 	return (
@@ -120,3 +122,5 @@ export default function PostCard(props: PostCardProps) {
 		</StyledPostCard>
 	)
 }
+
+export default PostCard
diff --git a/source/src/components/Sidebar.tsx b/source/src/components/Sidebar.tsx
index be17448..b697abd 100644
--- a/source/src/components/Sidebar.tsx
+++ b/source/src/components/Sidebar.tsx
@@ -1,15 +1,16 @@
-import React from "react"
+import { useState } from "react"
 import styled, { css } from "styled-components"
 import ReactTooltip from "react-tooltip"
 import { isMobile } from "react-device-detect"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
 
-import theming from "../theming"
-import NavbarData, { Item } from "../data/NavbarData"
-
 import SubMenu from "./SubMenu"
 
+import NavbarData, { Item } from "../data/NavbarData"
+import theming from "../theming"
+
 const CommonSidebarToggleButtonStyle = css`
 	${theming.styles.navbarButtonStyle}
 	width: 1.5rem;
@@ -33,7 +34,7 @@ const StyledToggleSidebarButton2 = styled.div`
 	font-size: 1.1rem;
 `
 
-const StyledOverlay = styled.div<SidebarState>`
+const StyledOverlay = styled.div<{ isSidebarOpen: boolean }>`
 	display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
 	position: fixed;
 	top: 0;
@@ -49,7 +50,7 @@ const StyledOverlay = styled.div<SidebarState>`
 	}
 `
 
-const SidebarNav = styled.nav<SidebarState>`
+const SidebarNav = styled.nav<{ isSidebarOpen: boolean }>`
 	width: 250px;
 	height: 100vh;
 	display: flex;
@@ -77,63 +78,47 @@ const SidebarWrap = styled.div`
 	width: 100%;
 `
 
-interface SidebarProps {}
-interface SidebarState {
-	isSidebarOpen: boolean
-}
-
-export default class Sidebar extends React.Component<
-	SidebarProps,
-	SidebarState
-> {
-	constructor(props: SidebarProps) {
-		super(props)
-		this.state = {
-			isSidebarOpen: false,
-		}
-	}
+const Sidebar = () => {
+	const [isSidebarOpen, setSidebarOpen] = useState(false)
 
 	// for some reason this.setState only works if this is an arrow function
-	toggleSidebar = () => {
-		this.setState({ isSidebarOpen: !this.state.isSidebarOpen })
-		document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
+	const toggleSidebar = () => {
+		setSidebarOpen((prev) => !prev)
+		document.body.style.overflow = isSidebarOpen ? "" : "hidden"
 	}
 
-	render() {
-		return (
-			<>
-				<StyledOverlay
-					isSidebarOpen={this.state.isSidebarOpen}
-					onClick={this.toggleSidebar}
-				/>
+	return (
+		<>
+			<StyledOverlay
+				isSidebarOpen={isSidebarOpen}
+				onClick={toggleSidebar}
+			/>
 
-				<StyledToggleSidebarButton
-					data-tip
-					data-for="sidebar"
-					onClick={this.toggleSidebar}
-				>
-					<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
-					{!isMobile && (
-						<ReactTooltip id="sidebar" type="dark" effect="solid">
-							<span>open sidebar</span>
-						</ReactTooltip>
-					)}
-				</StyledToggleSidebarButton>
+			<StyledToggleSidebarButton
+				data-tip
+				data-for="sidebar"
+				onClick={toggleSidebar}
+			>
+				<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
+				{!isMobile && (
+					<ReactTooltip id="sidebar" type="dark" effect="solid">
+						<span>open sidebar</span>
+					</ReactTooltip>
+				)}
+			</StyledToggleSidebarButton>
 
-				<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
-					<SidebarWrap>
-						<StyledToggleSidebarButton2
-							onClick={this.toggleSidebar}
-						>
-							<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>{" "}
-							Close
-						</StyledToggleSidebarButton2>
-						{NavbarData.map((item: Item, index) => {
-							return <SubMenu item={item} key={index} />
-						})}
-					</SidebarWrap>
-				</SidebarNav>
-			</>
-		)
-	}
+			<SidebarNav isSidebarOpen={isSidebarOpen}>
+				<SidebarWrap>
+					<StyledToggleSidebarButton2 onClick={toggleSidebar}>
+						<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon> Close
+					</StyledToggleSidebarButton2>
+					{NavbarData.map((item: Item, index) => {
+						return <SubMenu item={item} key={index} />
+					})}
+				</SidebarWrap>
+			</SidebarNav>
+		</>
+	)
 }
+
+export default Sidebar
diff --git a/source/src/components/SubMenu.tsx b/source/src/components/SubMenu.tsx
index cf344b6..4d83609 100644
--- a/source/src/components/SubMenu.tsx
+++ b/source/src/components/SubMenu.tsx
@@ -1,9 +1,13 @@
-import React from "react"
+/**
+ * @file Submenu item for sidebar
+ */
+
+import { useState } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
 
-import theming from "../theming"
 import { Item } from "../data/NavbarData"
+import theming from "../theming"
 
 const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
@@ -38,60 +42,47 @@ const DropdownLink = styled(Link)`
 	}
 `
 
-interface SubMenuProps {
+interface Props {
 	item: Item
 }
 
-interface SubMenuState {
-	isSubNavOpen: boolean
-}
+const SubMenu = (props: Props) => {
+	const [isSubNavOpen, setSubNavOpen] = useState(false)
 
-export default class SubMenu extends React.Component<
-	SubMenuProps,
-	SubMenuState
-> {
-	constructor(props: SubMenuProps) {
-		super(props)
-		this.state = {
-			isSubNavOpen: false,
-		}
+	const handleSidebarLinkClick = () => {
+		if (props.item.subNav) setSubNavOpen((prev) => !prev)
 	}
 
-	showSubNav = () => this.setState({ isSubNavOpen: !this.state.isSubNavOpen })
+	return (
+		<>
+			<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
+				<div>
+					{props.item.icon}
+					<SidebarLabel>{props.item.title}</SidebarLabel>
+				</div>
+				<div>
+					{props.item.subNav && isSubNavOpen
+						? props.item.iconOpened
+						: props.item.subNav
+						? props.item.iconClosed
+						: null}
+				</div>
+			</SidebarLink>
 
-	render() {
-		return (
-			<>
-				<SidebarLink
-					to={this.props.item.path}
-					onClick={this.props.item.subNav && this.showSubNav}
-				>
-					<div>
-						{this.props.item.icon}
-						<SidebarLabel>{this.props.item.title}</SidebarLabel>
-					</div>
-					<div>
-						{this.props.item.subNav && this.state.isSubNavOpen
-							? this.props.item.iconOpened
-							: this.props.item.subNav
-							? this.props.item.iconClosed
-							: null}
-					</div>
-				</SidebarLink>
-
-				{/* not used as of the moment */}
-				{this.state.isSubNavOpen && // check if subNav is open
-					this.props.item.subNav && // check if subNav exists in that item
-					this.props.item.subNav.map((item, index) => {
-						// shows all items in subNav
-						return (
-							<DropdownLink to={item.path} key={index}>
-								{item.icon}
-								<SidebarLabel>{item.title}</SidebarLabel>
-							</DropdownLink>
-						)
-					})}
-			</>
-		)
-	}
+			{/* not used as of the moment */}
+			{isSubNavOpen && // check if subNav is open
+				props.item.subNav && // check if subNav exists in that item
+				props.item.subNav.map((item, index) => {
+					// shows all items in subNav
+					return (
+						<DropdownLink to={item.path} key={index}>
+							{item.icon}
+							<SidebarLabel>{item.title}</SidebarLabel>
+						</DropdownLink>
+					)
+				})}
+		</>
+	)
 }
+
+export default SubMenu
diff --git a/source/src/components/Tag.tsx b/source/src/components/Tag.tsx
index dc01739..6dd0b4b 100644
--- a/source/src/components/Tag.tsx
+++ b/source/src/components/Tag.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import styled from "styled-components"
 
-import theming from "../theming"
 import { faTag } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+import theming from "../theming"
 
 const StyledTag = styled.div`
 	text-align: center;
@@ -15,17 +16,17 @@ const StyledTag = styled.div`
 	color: white;
 `
 
-interface TagProps {
+interface Props {
 	text: string
 	onClick?: (event: React.MouseEvent<never>) => void
 }
 
-export default class Tag extends React.Component<TagProps> {
-	render() {
-		return (
-			<StyledTag onClick={this.props.onClick || undefined}>
-				<FontAwesomeIcon icon={faTag} /> &nbsp;{this.props.text}
-			</StyledTag>
-		)
-	}
+const Tag = (props: Props) => {
+	return (
+		<StyledTag onClick={props.onClick || undefined}>
+			<FontAwesomeIcon icon={faTag} /> &nbsp;{props.text}
+		</StyledTag>
+	)
 }
+
+export default Tag
diff --git a/source/src/components/TagList.tsx b/source/src/components/TagList.tsx
index 65c2382..bea589f 100644
--- a/source/src/components/TagList.tsx
+++ b/source/src/components/TagList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { ReactNode } from "react"
 import styled from "styled-components"
 
 const StyledTagList = styled.div<{ direction: string }>`
@@ -10,16 +10,17 @@ const StyledTagList = styled.div<{ direction: string }>`
 	justify-content: ${({ direction }) => direction};
 `
 
-interface TagListProps {
+interface Props {
 	direction?: string
+	children?: ReactNode | undefined
 }
 
-export default class TagList extends React.Component<TagListProps> {
-	render() {
-		return (
-			<StyledTagList direction={this.props.direction || "center"}>
-				{this.props.children}
-			</StyledTagList>
-		)
-	}
+const TagList = (props: Props) => {
+	return (
+		<StyledTagList direction={props.direction || "center"}>
+			{props.children}
+		</StyledTagList>
+	)
 }
+
+export default TagList
diff --git a/source/src/components/ThemeToggleButton.tsx b/source/src/components/ThemeToggleButton.tsx
index 8c72b5c..17be38e 100644
--- a/source/src/components/ThemeToggleButton.tsx
+++ b/source/src/components/ThemeToggleButton.tsx
@@ -1,9 +1,9 @@
-import React from "react"
+import styled, { ThemeConsumer } from "styled-components"
+import { isMobile } from "react-device-detect"
+import ReactTooltip from "react-tooltip"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
-import styled, { ThemeConsumer } from "styled-components"
-import ReactTooltip from "react-tooltip"
-import { isMobile } from "react-device-detect"
 
 import theming from "../theming"
 
@@ -16,37 +16,35 @@ const StyledThemeButton = styled.div`
 		})};
 `
 
-export default class Navbar extends React.Component {
-	render() {
-		return (
-			<ThemeConsumer>
-				{({ currentTheme, setTheme }) => (
-					<>
-						<StyledThemeButton
-							data-tip
-							data-for="theme"
-							className="right"
-							onClick={() =>
-								setTheme(
-									currentTheme === "dark" ? "light" : "dark"
-								)
-							}
-						>
-							{currentTheme == "dark" && (
-								<FontAwesomeIcon icon={faMoon} />
-							)}
-							{currentTheme == "light" && (
-								<FontAwesomeIcon icon={faSun} />
-							)}
-						</StyledThemeButton>
-						{!isMobile && (
-							<ReactTooltip id="theme" type="dark" effect="solid">
-								<span>Using {currentTheme} theme</span>
-							</ReactTooltip>
+const Navbar = () => {
+	return (
+		<ThemeConsumer>
+			{({ currentTheme, setTheme }) => (
+				<>
+					<StyledThemeButton
+						data-tip
+						data-for="theme"
+						className="right"
+						onClick={() =>
+							setTheme(currentTheme === "dark" ? "light" : "dark")
+						}
+					>
+						{currentTheme == "dark" && (
+							<FontAwesomeIcon icon={faMoon} />
 						)}
-					</>
-				)}
-			</ThemeConsumer>
-		)
-	}
+						{currentTheme == "light" && (
+							<FontAwesomeIcon icon={faSun} />
+						)}
+					</StyledThemeButton>
+					{!isMobile && (
+						<ReactTooltip id="theme" type="dark" effect="solid">
+							<span>Using {currentTheme} theme</span>
+						</ReactTooltip>
+					)}
+				</>
+			)}
+		</ThemeConsumer>
+	)
 }
+
+export default Navbar