diff --git a/app/components/p8p_panels_menu.js b/app/components/p8p_panels_menu.js
index 458e50b..48212d5 100644
--- a/app/components/p8p_panels_menu.js
+++ b/app/components/p8p_panels_menu.js
@@ -58,7 +58,8 @@ const STYLES = {
     GRID: { maxWidth: 1200, direction: "row", justifyContent: "left", alignItems: "stretch" },
     GRID_PANEL_CARD: { maxWidth: 400, height: "100%", flexDirection: "column", display: "flex" },
     GRID_PANEL_CARD_MEDIA: { height: 140 },
-    GRID_PANEL_CARD_CONTENT_TITLE: { alignItems: "center" },
+    GRID_PANEL_CARD_CONTENT_TITLE: { alignItems: "flex-start" },
+    GRID_PANEL_CARD_CONTENT_TITLE_ICON: { paddingTop: "4px" },
     GRID_PANEL_CARD_ACTIONS: { marginTop: "auto", display: "flex", justifyContent: "flex-end", alignItems: "flex-start" },
     DESKTOP_GROUP_HEADER: { fontWeight: "bold", fontFamily: "tahoma, arial, verdana, sans-serif!important", fontSize: "13px!important" },
     DESKTOP_ITEM_BUTTON: { fontSize: "12px", textTransform: "none", "&:hover": { backgroundColor: "#c3e1ff" }, maxWidth: "150px" },
@@ -130,7 +131,7 @@ const getPanelsLinks = ({ variant, panels, selectedPanel, group, defaultGroupTyt
                                 ) : null}
                                 <CardContent>
                                     <Stack gap={1} direction="row" sx={STYLES.GRID_PANEL_CARD_CONTENT_TITLE}>
-                                        {panel.icon ? <Icon>{panel.icon}</Icon> : null}
+                                        {panel.icon ? <Icon sx={STYLES.GRID_PANEL_CARD_CONTENT_TITLE_ICON}>{panel.icon}</Icon> : null}
                                         <Typography variant="h5">{panel.caption}</Typography>
                                     </Stack>
                                     <Typography variant="body2" color="text.secondary">