I'll center-align both the values and labels in the footer section:

I've updated the footer section to center-align both the values and their labels. The changes include:

1. Added items-center class to each flex column to vertically center the content
2. Added text-center class to ensure the text itself is centered within each column
3. Maintained the same 50:50 grid layout with the same styling for values and labels

Now both metrics are displayed with their values and labels perfectly centered in their respective columns, creating a balanced and visually appealing footer section.

I'll update the dashboard layout to center the widgets in the viewport and make them smaller:

I've made several changes to center the widgets in the viewport and make them smaller:

Dashboard Layout Changes:

1. Created a full-height container with min-h-screen that centers content both horizontally and vertically
2. Added a light gray background (bg-gray-50) to distinguish the dashboard area
3. Set a maximum width for the dashboard container (max-w-5xl)
4. Added individual container divs with max-w-md to constrain each widget's width
5. Added mx-auto to center each widget in its column
6. Added a subtle shadow to both cards with shadow-md for better visual separation

Size Reductions:

1. Reduced the chart height from 200px to 180px

2. Made text elements smaller:

   • Card titles: from default to text-base
   • Card descriptions: to text-xs
   • Dropdown button: smaller with h-7 and text-xs
   • Footer text: reduced to text-base for values and text-xs for labels
3. Added consistent padding with pb-4 to the card footers

Added App Page:

1. Created a simple app/page.tsx that renders the DashboardWidgets component

The result is a cleaner, more compact dashboard with both widgets centered in the viewport. The widgets maintain their functionality but take up less space and have a more refined appearance.