diff --git a/web/app-list/app-list-header.css b/web/app-list/app-list-header.css
new file mode 100644
--- /dev/null
+++ b/web/app-list/app-list-header.css
@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--card-background-primary-default);
+  padding: 16px;
+  box-shadow: 0px 1px 3px 0px var(--card-headerShadow-primary-default);
+  z-index: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+.headerLabel {
+  color: var(--text-background-primary-default);
+  font-weight: var(--semi-bold);
+}
diff --git a/web/app-list/app-list-header.react.js b/web/app-list/app-list-header.react.js
new file mode 100644
--- /dev/null
+++ b/web/app-list/app-list-header.react.js
@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './app-list-header.css';
+import AddButton from '../components/add-button.react.js';
+import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
+
+function AppListHeader(): React.Node {
+  const { pushModal } = useModalContext();
+
+  const onClickApps = React.useCallback(
+    () => pushModal(<AppsDirectory />),
+    [pushModal],
+  );
+
+  return (
+    <div className={css.container}>
+      <div className={css.headerLabel}>Your apps</div>
+      <AddButton onClick={onClickApps} />
+    </div>
+  );
+}
+
+export default AppListHeader;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -50,6 +50,9 @@
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
+  --shadow-dark-35: #00000059;
+  --shadow-light-35: #ffffff59;
+
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
@@ -262,6 +265,10 @@
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
+  /* Card */
+  --card-background-primary-default: var(--shades-black-85);
+  --card-headerShadow-primary-default: var(--shadow-dark-35);
+
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
@@ -338,6 +345,11 @@
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
+  /* Card */
+  /* @GINSU: TODO double check these values after redesign is finished */
+  --card-background-primary-default: var(--shades-white-80);
+  --card-headerShadow-primary-default: var(--shadow-light-35);
+
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);