diff --git a/web/app-list/app-list-header.css b/web/app-list/app-list-header.css
--- a/web/app-list/app-list-header.css
+++ b/web/app-list/app-list-header.css
@@ -2,11 +2,7 @@
   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 {
diff --git a/web/app-list/app-list.css b/web/app-list/app-list.css
--- a/web/app-list/app-list.css
+++ b/web/app-list/app-list.css
@@ -1,6 +1,4 @@
 .container {
-  display: flex;
-  flex-direction: column;
   min-width: 160px;
 }
 
@@ -8,8 +6,5 @@
   display: flex;
   flex-direction: column;
   row-gap: 16px;
-  background-color: var(--card-background-primary-default);
   padding: 16px;
-  flex: 1;
-  border-radius: 0 0 8px 8px;
 }
diff --git a/web/app-list/app-list.react.js b/web/app-list/app-list.react.js
--- a/web/app-list/app-list.react.js
+++ b/web/app-list/app-list.react.js
@@ -8,6 +8,7 @@
 import AppListHeader from './app-list-header.react.js';
 import AppListItem from './app-list-item.react.js';
 import css from './app-list.css';
+import Panel, { type PanelData } from '../components/panel.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 
@@ -80,16 +81,22 @@
     [calendarAppListItem, onClickInbox],
   );
 
-  const appList = React.useMemo(
-    () => (
-      <div className={css.container}>
-        <AppListHeader />
-        {appListBody}
-      </div>
-    ),
+  const panelData: $ReadOnlyArray<PanelData> = React.useMemo(
+    () => [
+      {
+        header: <AppListHeader />,
+        body: appListBody,
+        classNameOveride: css.container,
+      },
+    ],
     [appListBody],
   );
 
+  const appList = React.useMemo(
+    () => <Panel panelItems={panelData} />,
+    [panelData],
+  );
+
   return appList;
 }
 
diff --git a/web/components/panel.css b/web/components/panel.css
new file mode 100644
--- /dev/null
+++ b/web/components/panel.css
@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.itemContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--card-background-primary-default);
+}
+
+.secondaryItemContainer {
+  background-color: var(--card-background-secondary-default);
+}
+
+.singleItemContainer {
+  border-radius: 8px;
+}
+
+.firstMultiItemContainer {
+  border-radius: 8px 0 0 8px;
+}
+
+.lastMultiItemContainer {
+  border-radius: 0 8px 8px 0;
+}
+
+.headerContainer {
+  height: 56px;
+  box-shadow: 0px 1px 3px 0px var(--card-headerShadow-primary-default);
+  clip-path: inset(0 0 -3px 0);
+}
diff --git a/web/components/panel.react.js b/web/components/panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/panel.react.js
@@ -0,0 +1,69 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import css from './panel.css';
+
+export type PanelData = {
+  +header: React.Node,
+  +body: React.Node,
+  +classNameOveride?: string,
+};
+
+type PanelItemProps = {
+  ...PanelData,
+  +index: number,
+  +numOfItems: number,
+};
+
+function PanelItem(props: PanelItemProps): React.Node {
+  const { header, body, index, numOfItems, classNameOveride } = props;
+
+  const className = classnames(
+    {
+      [css.itemContainer]: true,
+      [css.secondaryItemContainer]: index % 2 === 1,
+      [css.singleItemContainer]: numOfItems === 1,
+      [css.firstMultiItemContainer]: numOfItems > 1 && index === 0,
+      [css.lastMultiItemContainer]: numOfItems > 1 && index === numOfItems - 1,
+    },
+    classNameOveride,
+  );
+
+  return (
+    <div className={className}>
+      <div className={css.headerContainer}>{header}</div>
+      {body}
+    </div>
+  );
+}
+
+type PanelProps = {
+  +panelItems: $ReadOnlyArray<PanelData>,
+};
+
+function Panel(props: PanelProps): React.Node {
+  const { panelItems } = props;
+
+  const items = React.useMemo(
+    () =>
+      panelItems.map((item, index) => {
+        return (
+          <PanelItem
+            key={index}
+            header={item.header}
+            body={item.body}
+            classNameOveride={item.classNameOveride}
+            index={index}
+            numOfItems={panelItems.length}
+          />
+        );
+      }),
+    [panelItems],
+  );
+
+  return <div className={css.container}>{items}</div>;
+}
+
+export default Panel;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -267,6 +267,7 @@
 
   /* Card */
   --card-background-primary-default: var(--shades-black-85);
+  --card-background-secondary-default: var(--shades-black-90);
   --card-headerShadow-primary-default: var(--shadow-dark-35);
 
   /* Button */
@@ -353,6 +354,7 @@
   /* Card */
   /* @GINSU: TODO double check these values after redesign is finished */
   --card-background-primary-default: var(--shades-white-80);
+  --card-background-secondary-default: var(--shades-white-90);
   --card-headerShadow-primary-default: var(--shadow-light-35);
 
   /* Button */