diff --git a/webclient/src/utils.js b/webclient/src/utils.js
index 5fd95e2..47de1e4 100644
--- a/webclient/src/utils.js
+++ b/webclient/src/utils.js
@@ -21,63 +21,52 @@ export const infoLine = (story) =>
 	</div>
 ;
 
-export class ToggleDot extends React.Component {
-	render() {
-		const id = this.props.id;
-		const article = this.props.article;
+export const ToggleDot = ({ id, article }) => (
+	<div className='dot toggleDot'>
+		<div className='button'>
+			<Link to={'/' + id + (article ? '' : '/c')}>
+				{article ? '' : ''}
+			</Link>
+		</div>
+	</div>
+);
 
-		return (
-			<div className='dot toggleDot'>
-				<div className='button'>
-					<Link to={'/' + id + (article ? '' : '/c')}>
-						{article ? '' : ''}
-					</Link>
-				</div>
-			</div>
-		);
-	}
-}
-
-export class BackwardDot extends React.Component {
-	goBackward() {
+export const BackwardDot = () => {
+	const goBackward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.back();
-	}
+	};
 
-	render() {
-		const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-		if (!isMobile) return null;
-		if (!document.fullscreenElement) return null;
+	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+	if (!isMobile) return null;
+	if (!document.fullscreenElement) return null;
 
-		return (
-			<div className='dot backwardDot' onClick={this.goBackward}>
-				<div className='button'>
-					
-				</div>
+	return (
+		<div className='dot backwardDot' onClick={goBackward}>
+			<div className='button'>
+				
 			</div>
-		);
-	}
-}
+		</div>
+	);
+};
 
-export class ForwardDot extends React.Component {
-	goForward() {
+export const ForwardDot = () => {
+	const goForward = () => {
 		localStorage.setItem('scrollLock', 'True');
 		window.history.forward();
-	}
+	};
 
-	render() {
-		const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-		if (!isMobile) return null;
+	const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+	if (!isMobile) return null;
 
-		return (
-			<div className='dot forwardDot' onClick={this.goForward}>
-				<div className='button'>
-					
-				</div>
+	return (
+		<div className='dot forwardDot' onClick={goForward}>
+			<div className='button'>
+				
 			</div>
-		);
-	}
-}
+		</div>
+	);
+};
 
 export const logos = {
 	hackernews: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wgeBhwhciGZUAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGCSURBVFjD7Za/S0JRFMc/+oSgLWjLH/2AIKEhC2opIp1amqw/INCo9lbHghCnKDdpN5OoIGhISSLwx2RCEYSjUWhWpO+9hicopCHh8w29Mx3u/XLv95z7Pedcg+y1VQEBbUw0ang5gGBEY9MJ6ARMbaH6HdBnBlmC+5PfsVYX9PTCSx4KyQ4RsI6DxwcYIGSFxF5znHkOtvZBECDoa4tAe0+QDMFDVvFd7ta4pU0QTAo2GeqwBqIHIEkwMAQzaz/3LfNgn1Qw0aAKIswdQzZVy8Jyk+g3lNTfpSEXUakKjgJQrYB5GKY9DRpZALsDxCqEAyqWYT4G6etaFlYaol8HowCZBOSvVO4DR374+gTLCEytgs0JYxPKWtivUh9otOcM3FzC7CI43fBWVKK/vYBCqkudMLIN7yUYHFXe/qMMkZ0utuLyE8ROwWBU6j5+BqXHLs+C+GHdP9/VYBhJ1bpfedXHsU5A5Q9JKxEWa+KT5T8fY5C9NlnXgE7g3xMQNbxf/AZyEGqvyYs/dQAAAABJRU5ErkJggg==',