diff --git a/client/src/components/Apps/AppCard/AppCard.module.css b/client/src/components/Apps/AppCard/AppCard.module.css
index ae5e808368fdea497386bc14214ef11e5f8b0a40..05dce479b29d3f4c272ea72a4e94a79ae39b383f 100644
--- a/client/src/components/Apps/AppCard/AppCard.module.css
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@@ -26,7 +26,7 @@
   margin-bottom: -8px;
 }
 
-.AppCardDetails a {
+.AppCardDetails span {
   color: var(--color-accent);
   font-weight: 400;
   font-size: 0.8em;
diff --git a/client/src/components/Themer/ThemePreview.module.css b/client/src/components/Themer/ThemePreview.module.css
index 2c54f42e9e4a439682954f43d86a55413a87fdd5..11c8c64d325d37acc268632b31e9159a2b3f369e 100644
--- a/client/src/components/Themer/ThemePreview.module.css
+++ b/client/src/components/Themer/ThemePreview.module.css
@@ -25,4 +25,11 @@
 .ColorPreview {
   width: 50px;
   height: 50px;
+}
+
+@media (min-width: 340px) {
+  .ColorPreview {
+    width: 40px;
+    height: 40px;
+  }
 }
\ No newline at end of file
diff --git a/client/src/components/Themer/Themer.module.css b/client/src/components/Themer/Themer.module.css
index 6473c620ee40de8f6bcf762aa32de725576c5510..986f6c5d24a866488ad22f2d44e6b17467a8dce6 100644
--- a/client/src/components/Themer/Themer.module.css
+++ b/client/src/components/Themer/Themer.module.css
@@ -1,11 +1,17 @@
 .ThemerGrid {
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-auto-rows: 100px;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 340px) {
+  .ThemerGrid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 680px) {
   .ThemerGrid {
     grid-template-columns: 1fr 1fr 1fr;
   }
diff --git a/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css b/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dbf6d05dc1bc4f2a04c5d98be526553065562
--- /dev/null
+++ b/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css
@@ -0,0 +1,31 @@
+.ActionButton {
+  /* background-color: var(--color-accent); */
+  border: 1.5px solid var(--color-accent);
+  border-radius: 4px;
+  color: var(--color-primary);
+  padding: 5px 15px;
+  transition: all 0.3s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 250px;
+  margin-right: 10px;
+  margin-bottom: 20px;
+}
+
+.ActionButton:hover {
+  background-color: var(--color-accent);
+  color: var(--color-background);
+  cursor: pointer;
+}
+
+.ActionButtonIcon {
+  --size: 20px;
+  width: var(--size);
+  height: var(--size);
+  /* display: flex; */
+}
+
+.ActionButtonName {
+  display: flex;
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9c9c3358d9be73156e32765381dbd5fc112582a6
--- /dev/null
+++ b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx
@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+
+import classes from './ActionButton.module.css';
+import Icon from '../../Icon/Icon';
+
+interface ComponentProps {
+  name: string;
+  icon: string;
+  link?: string;
+  handler?: () => void;
+}
+
+const ActionButton = (props: ComponentProps): JSX.Element => {
+  const body = (
+    <Fragment>
+      <div className={classes.ActionButtonIcon}>
+        <Icon icon={props.icon} />
+      </div>
+      <div className={classes.ActionButtonName}>
+        {props.name}
+      </div>
+    </Fragment>
+  );
+
+  if (props.link) {
+    return (<Link to={props.link}>{body}</Link>)
+  } else if (props.handler) {
+    return (<div className={classes.ActionButton} onClick={props.handler}>{body}</div>)
+  } else {
+    return (<div className={classes.ActionButton}>{body}</div>)
+  }
+}
+
+export default ActionButton;
\ No newline at end of file
diff --git a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
index 5b9a7bd9da7078602935ef5ea79a453518ef3a03..8fd2a195a61d77759d5fee35d98ec556af80eb3e 100644
--- a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
+++ b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
@@ -1,12 +1,17 @@
+import { Link } from 'react-router-dom';
+
 import classes from './SectionHeadline.module.css';
 
 interface ComponentProps {
   title: string;
+  link: string
 }
 
 const SectionHeadline = (props: ComponentProps): JSX.Element => {
   return (
-    <h2 className={classes.SectionHeadline}>{props.title}</h2>
+    <Link to={props.link}>
+      <h2 className={classes.SectionHeadline}>{props.title}</h2>
+    </Link>
   )
 }
 
diff --git a/client/src/components/UI/Icon/Icon.tsx b/client/src/components/UI/Icon/Icon.tsx
index 3bdc420b4fc1de3072eab06a8fb497e1a6bcf480..2ea43500d85e43205c0540ab98248e152c93e651 100644
--- a/client/src/components/UI/Icon/Icon.tsx
+++ b/client/src/components/UI/Icon/Icon.tsx
@@ -11,7 +11,7 @@ const Icon = (props: ComponentProps): JSX.Element => {
   let iconPath = MDIcons[props.icon];
 
   if (!iconPath) {
-    console.log('icon not found');
+    console.log(`Icon ${props.icon} not found`);
     iconPath = MDIcons.mdiCancel;
   }
 
@@ -19,7 +19,7 @@ const Icon = (props: ComponentProps): JSX.Element => {
     <MDIcon className={classes.Icon}
       path={iconPath}
     />
-    )
+  )
 }
 
 export default Icon;
\ No newline at end of file
diff --git a/client/src/components/UI/Modal/Modal.module.css b/client/src/components/UI/Modal/Modal.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..200595bb1168072b92a7b398d810197ce7e5121e
--- /dev/null
+++ b/client/src/components/UI/Modal/Modal.module.css
@@ -0,0 +1,21 @@
+.Modal {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ModalClose {
+  background-color: rgba(0, 0, 0, 0);
+  visibility: hidden;
+}
+
+.ModalOpen {
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: visible;
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Modal/Modal.tsx b/client/src/components/UI/Modal/Modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..da350dde1ca71d8b7d68642344143a7078ff0191
--- /dev/null
+++ b/client/src/components/UI/Modal/Modal.tsx
@@ -0,0 +1,19 @@
+import classes from './Modal.module.css';
+import Icon from '../Icon/Icon';
+
+interface ComponentProps {
+  isOpen: boolean;
+  children: JSX.Element;
+}
+
+const Modal = (props: ComponentProps): JSX.Element => {
+  const modalClasses = [classes.Modal, props.isOpen ? classes.ModalOpen : classes.ModalClose].join(' ');
+
+  return (
+    <div className={modalClasses}>
+      {props.children}
+    </div>
+  )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 24c1877a22b32c4bfe16556ffff3ff44534e7747..5f82a6fde65f68c4a533cbd473390937878c3908 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -27,7 +27,7 @@ body {
 a {
   color: var(--color-primary);
   text-decoration: none;
-  opacity: 0.75;
+  /* opacity: 0.75; */
 }
 
 /* 320px — 480px: Mobile devices.