diff --git a/src/newsreader/js/pages/homepage/App.js b/src/newsreader/js/pages/homepage/App.js
index 01ca773..5b5acde 100644
--- a/src/newsreader/js/pages/homepage/App.js
+++ b/src/newsreader/js/pages/homepage/App.js
@@ -5,6 +5,7 @@ import { isEqual } from 'lodash';
 
 import { fetchCategories } from './actions/categories';
 
+import ScrollTop from './components/ScrollTop.js';
 import Sidebar from './components/sidebar/Sidebar.js';
 import PostList from './components/postlist/PostList.js';
 import PostModal from './components/PostModal.js';
@@ -41,6 +42,8 @@ class App extends React.Component {
           />
         )}
 
+        <ScrollTop />
+
         {this.props.error && (
           <Messages messages={[{ type: 'error', text: this.props.error.message }]} />
         )}
diff --git a/src/newsreader/js/pages/homepage/components/ScrollTop.js b/src/newsreader/js/pages/homepage/components/ScrollTop.js
new file mode 100644
index 0000000..83fdb43
--- /dev/null
+++ b/src/newsreader/js/pages/homepage/components/ScrollTop.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+// TODO show buttons when applicable
+// TODO caclulating height needs to take into account react renders later?
+const scrollTop = () => {
+  if (document.body.clientHeight < document.documentElement.clientHeight) {
+    return (
+      <div className="scroll-to-top">
+        <i
+          className="scroll-to-top__icon scroll-to-top__icon--top"
+          onClick={() => window.scrollTo(0, 0)}
+        />
+        <i
+          className="scroll-to-top__icon scroll-to-top__icon--bottom"
+          onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+        />
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default scrollTop;
diff --git a/src/newsreader/scss/components/index.scss b/src/newsreader/scss/components/index.scss
index d0419ac..d64031b 100644
--- a/src/newsreader/scss/components/index.scss
+++ b/src/newsreader/scss/components/index.scss
@@ -26,3 +26,4 @@
 @import './post-message/index';
 @import './posts/index';
 @import './posts-info/index';
+@import './scroll-to-top/index';
diff --git a/src/newsreader/scss/components/scroll-to-top/_scroll-to-top.scss b/src/newsreader/scss/components/scroll-to-top/_scroll-to-top.scss
new file mode 100644
index 0000000..84b40e6
--- /dev/null
+++ b/src/newsreader/scss/components/scroll-to-top/_scroll-to-top.scss
@@ -0,0 +1,33 @@
+.scroll-to-top {
+  display: flex;
+  gap: 10px;
+
+  position: fixed;
+  right: 15%;
+  bottom: 0;
+
+  margin: 0 0 20px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &__icon {
+    font-style: initial;
+    padding: 10px;
+
+    background-color: var(--lightest-accent-color);
+
+    &--top:before {
+      @include font-awesome;
+
+      content: "\f062";
+    }
+
+    &--bottom:before {
+      @include font-awesome;
+
+      content: "\f063";
+    }
+  }
+}
diff --git a/src/newsreader/scss/components/scroll-to-top/index.scss b/src/newsreader/scss/components/scroll-to-top/index.scss
new file mode 100644
index 0000000..dcaf7de
--- /dev/null
+++ b/src/newsreader/scss/components/scroll-to-top/index.scss
@@ -0,0 +1 @@
+@import './scroll-to-top';