Cards are now looking pretty good

webapp/src/app/components/card/card.scss

@@ -4,7 +4,7 @@
 	border-radius: 0.2em;
 	color: var(--color-on-surface);
 	display: inline-grid;
-	font-size: 2em;
+	font-size: 1.8em;
 	grid-template-areas:
 		'head'
 		'body'

webapp/src/app/routes/plan/plan.scss

@@ -1,17 +1,23 @@
 :host {
-    display: grid;
-    grid-template-areas:
-        "head"
-        "body";
-    grid-template-rows: min-content auto;
-    height: 100%;
+	display: grid;
+	grid-template-areas:
+		'head'
+		'body';
+	grid-template-rows: min-content auto;
+	height: 100%;
 }
 
 header {
-    grid-area: 'head';
+	grid-area: head;
 }
 
 .meal-plan {
-    grid-area: "body";
-    padding-left: 1.8em;
+	display: flex;
+	flex-direction: column;
+	grid-area: body;
+	padding-left: 1.8em;
+
+	& > *:not(:last-child) {
+		margin-bottom: 1.6em;
+	}
 }

webapp/src/app/routes/plan/plan.ts

@@ -11,5 +11,11 @@ import { Meal } from './components/meal/meal';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Plan {
-	protected meals = signal<Array<TMeal>>([new TMeal(uuidv7(), 'breakfast', [])]);
+	protected meals = signal<Array<TMeal>>([
+		new TMeal(uuidv7(), 'breakfast', []),
+		new TMeal(uuidv7(), 'snack', [], 'Morning Snack'),
+		new TMeal(uuidv7(), 'lunch', []),
+		new TMeal(uuidv7(), 'snack', [], 'Afternoon Snack'),
+		new TMeal(uuidv7(), 'dinner', []),
+	]);
 }

webapp/src/styles/components/button.scss

@@ -0,0 +1,23 @@
+button {
+	background-color: var(--color-surface-container);
+	border: 1px solid var(--color-outline);
+	border-radius: 0.4em;
+	color: var(--color-on-surface-container);
+	cursor: pointer;
+	font-size: 0.8em;
+	padding: 0.2em 0.6em;
+
+	&:hover {
+		box-shadow: var(--color-shadow) 0px 3px 8px;
+		box-shadow: var(--color-shadow) 0px 2px 5px -1px, var(--color-shadow-variant) 0px 1px 3px -1px;
+
+		&:active {
+			background-color: var(--color-primary-container-alt);
+		}
+	}
+
+	&.primary {
+		background-color: var(--color-primary-container);
+		color: var(--color-on-primary-container);
+	}
+}