diff --git a/src/App.css b/src/App.css
index 01ed8ef..7b4ff5d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -47,3 +47,20 @@
 .card span {
   font-size: 18px;
 }
+
+.show-more-button {
+  background-color: #af9363;
+  color: #fff;
+  border-radius: 40px;
+  padding: 14px 24.5px;
+  border: none;
+  cursor: pointer;
+  font-size: 15px;
+  letter-spacing: 1.2px;
+  font-family: "Assistant", sans-serif;
+  border: 1px solid #fff;
+}
+
+.show-more-button:hover {
+  border: 1px solid #af9363;
+}
diff --git a/src/App.js b/src/App.js
index c54fa13..dfc77a9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,19 +25,7 @@ function SkeletonPlaceholder() {
 function ShowMoreButton({ onClick }) {
   return (
     <Flex justify="center">
-      <button
-        onClick={onClick}
-        style={{
-          backgroundColor: "#af9363",
-          color: "#fff",
-          borderRadius: 40,
-          padding: "11.5px 19px",
-          border: "none",
-          cursor: "pointer",
-          fontSize: "16px",
-          letterSpacing: "1.2px",
-        }}
-      >
+      <button className="show-more-button" onClick={onClick}>
         Alle anzeigen
       </button>
     </Flex>