diff --git a/packages/keychain/__image_snapshots__/components-confirmtransaction--default-chromium.png b/packages/keychain/__image_snapshots__/components-confirmtransaction--default-chromium.png
index a1ae4e05e..44f65e777 100644
Binary files a/packages/keychain/__image_snapshots__/components-confirmtransaction--default-chromium.png and b/packages/keychain/__image_snapshots__/components-confirmtransaction--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png
index b6182c9bf..df0fb6de7 100644
Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-controllererroralert--all-chromium.png b/packages/keychain/__image_snapshots__/components-controllererroralert--all-chromium.png
index bf35065ce..477b82fb5 100644
Binary files a/packages/keychain/__image_snapshots__/components-controllererroralert--all-chromium.png and b/packages/keychain/__image_snapshots__/components-controllererroralert--all-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-erroralert--default-chromium.png b/packages/keychain/__image_snapshots__/components-erroralert--default-chromium.png
index c33689d62..2f8d88495 100644
Binary files a/packages/keychain/__image_snapshots__/components-erroralert--default-chromium.png and b/packages/keychain/__image_snapshots__/components-erroralert--default-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-erroralert--error-chromium.png b/packages/keychain/__image_snapshots__/components-erroralert--error-chromium.png
index 2d57f6b90..541920578 100644
Binary files a/packages/keychain/__image_snapshots__/components-erroralert--error-chromium.png and b/packages/keychain/__image_snapshots__/components-erroralert--error-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-erroralert--info-chromium.png b/packages/keychain/__image_snapshots__/components-erroralert--info-chromium.png
index 3d3198f53..234322447 100644
Binary files a/packages/keychain/__image_snapshots__/components-erroralert--info-chromium.png and b/packages/keychain/__image_snapshots__/components-erroralert--info-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-erroralert--long-title-chromium.png b/packages/keychain/__image_snapshots__/components-erroralert--long-title-chromium.png
index c471da540..74989188d 100644
Binary files a/packages/keychain/__image_snapshots__/components-erroralert--long-title-chromium.png and b/packages/keychain/__image_snapshots__/components-erroralert--long-title-chromium.png differ
diff --git a/packages/keychain/__image_snapshots__/components-erroralert--warning-chromium.png b/packages/keychain/__image_snapshots__/components-erroralert--warning-chromium.png
index 4297a4284..ee030d710 100644
Binary files a/packages/keychain/__image_snapshots__/components-erroralert--warning-chromium.png and b/packages/keychain/__image_snapshots__/components-erroralert--warning-chromium.png differ
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
index 0d53c876a..ce4869ba1 100644
--- a/packages/keychain/src/components/ErrorAlert.tsx
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -1,25 +1,23 @@
 import {
-  WedgeIcon,
   CopyIcon,
   CheckIcon,
   ErrorAlertIcon,
   ErrorAlertIconProps,
   Button,
-} from "@cartridge/ui-next";
-import {
-  Text,
   Accordion,
   AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  Spacer,
-  HStack,
-  Box,
-  VStack,
-  Divider,
-} from "@chakra-ui/react";
-import { motion } from "framer-motion";
-import React, { ReactElement, useCallback, useEffect, useState } from "react";
+  AccordionTrigger,
+  AccordionContent,
+  cn,
+} from "@cartridge/ui-next";
+import { Text, HStack, VStack, Divider } from "@chakra-ui/react";
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
 import { ControllerError } from "@/utils/connection";
 import { parseExecutionError, parseValidationError } from "@/utils/errors";
@@ -52,88 +50,67 @@ export function ErrorAlert({
     }, 3000);
   }, [copied]);
 
+  const collapsible = !isExpanded || allowToggle;
+  const styles = useMemo(() => {
+    switch (variant) {
+      case "info":
+        return { bg: "bg-info", text: "text-info-foreground" };
+      case "warning":
+        return { bg: "bg-warning", text: "text-warning-foreground" };
+      case "error":
+        return { bg: "bg-error", text: "text-error-foreground" };
+      default:
+        return { bg: "bg-secondary", text: "text-secondary-foreground" };
+    }
+  }, [variant]);
+
   return (
     <Accordion
-      w="full"
-      allowToggle={!isExpanded || allowToggle}
-      defaultIndex={isExpanded ? [0] : undefined}
-      variant={variant}
-      color="solid.bg"
-      fontSize="sm"
+      type="single"
+      collapsible={collapsible}
+      defaultValue={isExpanded ? "item-1" : undefined}
     >
-      <AccordionItem position="relative" border="none">
-        {({ isExpanded: itemExpanded }) => (
-          <>
-            <AccordionButton
-              disabled={!description || (isExpanded && !allowToggle)}
-            >
-              <HStack alignItems="flex-start">
-                {variant && (
-                  <ErrorAlertIcon
-                    variant={variant as ErrorAlertIconProps["variant"]}
-                    size="xs"
-                  />
-                )}
-                <Text
-                  as="b"
-                  fontSize="2xs"
-                  color="inherit"
-                  textTransform="uppercase"
-                  align="left"
-                >
-                  {title}
-                </Text>
-              </HStack>
-
-              <Spacer />
+      <AccordionItem
+        value="item-1"
+        className={cn(
+          "flex flex-col rounded p-3 gap-3",
+          styles.bg,
+          styles.text,
+        )}
+      >
+        <AccordionTrigger hideIcon={!collapsible} className="items-start gap-1">
+          {variant && variant !== "default" && (
+            <div className="w-5">
+              <ErrorAlertIcon
+                variant={variant as ErrorAlertIconProps["variant"]}
+              />
+            </div>
+          )}
+          <div className={cn("text-2xs font-bold uppercase", styles.text)}>
+            {title}
+          </div>
+        </AccordionTrigger>
 
-              {description && !isExpanded && (
-                <HStack>
-                  <Box
-                    as={motion.div}
-                    animate={{
-                      rotate: itemExpanded ? 180 : 0,
-                    }}
-                  >
-                    <WedgeIcon size="sm" variant="down" />
-                  </Box>
-                </HStack>
+        <AccordionContent>
+          {copyText && (
+            <Button
+              size="icon"
+              variant="icon"
+              className="absolute right-5 w-5 h-5 bg-[rgba(0,0,0,0.1)]"
+              onClick={() => {
+                setCopied(true);
+                navigator.clipboard.writeText(copyText);
+              }}
+            >
+              {copied ? (
+                <CheckIcon size="xs" className="text-[black]" />
+              ) : (
+                <CopyIcon size="xs" className="text-[black]" />
               )}
-            </AccordionButton>
-
-            {description && (
-              <AccordionPanel w="full" position="relative">
-                {copyText && (
-                  <Button
-                    size="icon"
-                    variant="icon"
-                    className="absolute right-3 w-5 h-5 bg-[rgba(0,0,0,0.1)]"
-                    onClick={() => {
-                      setCopied(true);
-                      navigator.clipboard.writeText(copyText);
-                    }}
-                  >
-                    {copied ? (
-                      <CheckIcon size="xs" className="text-[black]" />
-                    ) : (
-                      <CopyIcon size="xs" className="text-[black]" />
-                    )}
-                  </Button>
-                )}
-                <Box
-                  h="full"
-                  maxH={200}
-                  p={3}
-                  pt={0}
-                  overflowY="auto"
-                  pr={copyText ? 10 : undefined}
-                >
-                  {description}
-                </Box>
-              </AccordionPanel>
-            )}
-          </>
-        )}
+            </Button>
+          )}
+          {description && <div className="text-xs mr-7">{description}</div>}
+        </AccordionContent>
       </AccordionItem>
     </Accordion>
   );
diff --git a/packages/keychain/src/components/Policies.tsx b/packages/keychain/src/components/Policies.tsx
index c6e8160ee..3b47b5032 100644
--- a/packages/keychain/src/components/Policies.tsx
+++ b/packages/keychain/src/components/Policies.tsx
@@ -1,148 +1,35 @@
-import {
-  HStack,
-  VStack,
-  Text,
-  AccordionButton,
-  AccordionItem,
-  Accordion,
-  Spacer,
-  AccordionPanel,
-  Box,
-} from "@chakra-ui/react";
-import { FnIcon, WedgeIcon, CopyAddress } from "@cartridge/ui-next";
 import { SessionPolicies } from "@cartridge/presets";
+import { ContractCard } from "./session/ContractCard";
+import { useConnection } from "@/hooks/connection";
+import { MessageCard } from "./session/MessageCard";
 
 export function Policies({
-  title,
   policies,
 }: {
   title?: string;
   policies: SessionPolicies;
 }) {
+  const connection = useConnection();
+  const parsedContracts = connection.policies?.contracts ?? {};
+
   return (
-    <Box position="relative">
-      {title && (
-        <VStack
-          align="flex-start"
-          bg="solid.primary"
-          p={3}
-          position="sticky"
-          top={0}
-          borderTopRadius="base"
-        >
-          <Text
-            color="text.secondaryAccent"
-            fontSize="xs"
-            fontWeight="bold"
-            casing="uppercase"
-          >
-            {title}
-          </Text>
-        </VStack>
+    <div className="flex flex-col gap-4">
+      {Object.entries(policies.contracts ?? {}).map(([address, p]) => {
+        const c = parsedContracts[address];
+        return (
+          <ContractCard
+            key={address}
+            address={address}
+            title={c?.meta?.name || "Contract"}
+            icon={c?.meta?.icon}
+            methods={p.methods}
+          />
+        );
+      })}
+
+      {policies.messages && policies.messages.length > 0 && (
+        <MessageCard messages={policies.messages} />
       )}
-
-      <Accordion w="full" allowMultiple overflowY="auto">
-        {Object.entries(policies.contracts ?? {}).map(([contractAddress, p]) =>
-          p.methods.map((m) => (
-            <AccordionItem
-              key={`${contractAddress}${m.entrypoint}`}
-              // borderTopRadius={i === 0 && !title ? "base" : "none"}
-              // // The container already set border radius (for top & bottom), but we
-              // // set the bottom radius for the last item here because for certain
-              // // browsers' scrolling behaviour (eg Firefox) just to make it look nicer.
-              // borderBottomRadius={i === policies?.length - 1 ? "base" : "none"}
-            >
-              {({ isExpanded }) => (
-                <>
-                  <AccordionButton
-                    _disabled={{
-                      cursor: "auto",
-                      opacity: 1,
-                    }}
-                  >
-                    <HStack>
-                      <FnIcon size="sm" />
-                      <Text>{m.entrypoint}</Text>
-                    </HStack>
-
-                    <Spacer />
-
-                    <WedgeIcon
-                      variant={isExpanded ? "down" : "right"}
-                      className="text-muted-foreground"
-                    />
-                  </AccordionButton>
-
-                  <AccordionPanel>
-                    <VStack align="flex-start" w="full" p={3}>
-                      <CopyAddress address={contractAddress} />
-                      {m.description && (
-                        <Text w="full" color="inherit">
-                          {m.description}
-                        </Text>
-                      )}
-                    </VStack>
-                  </AccordionPanel>
-                </>
-              )}
-            </AccordionItem>
-          )),
-        )}
-        {policies.messages?.map((p) => (
-          <AccordionItem
-            key={`${p.domain.name}${p.primaryType}`}
-            // borderTopRadius={i === 0 && !title ? "base" : "none"}
-            // // The container already set border radius (for top & bottom), but we
-            // // set the bottom radius for the last item here because for certain
-            // // browsers' scrolling behaviour (eg Firefox) just to make it look nicer.
-            // borderBottomRadius={i === policies?.length - 1 ? "base" : "none"}
-          >
-            {({ isExpanded }) => (
-              <>
-                <AccordionButton
-                  _disabled={{
-                    cursor: "auto",
-                    opacity: 1,
-                  }}
-                >
-                  <HStack>
-                    <Text>Sign Message</Text>
-                  </HStack>
-
-                  <Spacer />
-
-                  <WedgeIcon
-                    variant={isExpanded ? "down" : "right"}
-                    className="text-muted-foreground"
-                  />
-                </AccordionButton>
-
-                <AccordionPanel>
-                  <VStack align="flex-start" w="full" p={3}>
-                    <Text w="full" color="inherit">
-                      Domain: {p.domain.name}
-                    </Text>
-                    <Text w="full" color="inherit">
-                      Primary Type: {p.primaryType}
-                    </Text>
-                    <Text w="full" color="inherit">
-                      Types:
-                    </Text>
-                    {Object.keys(p.types).map((key) =>
-                      key === "StarknetDomain" ||
-                      key === "StarkNetDomain" ? null : (
-                        <Text key={key} w="full" color="inherit">
-                          {key}: {JSON.stringify(p.types[key])}
-                        </Text>
-                      ),
-                    )}
-                  </VStack>
-                </AccordionPanel>
-              </>
-            )}
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </Box>
+    </div>
   );
 }
diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index 9d1651c7e..b6c24a014 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -64,10 +64,12 @@ export function ContractCard({
         <Accordion type="multiple" defaultValue={["methods"]}>
           <AccordionItem value="methods" className="flex flex-col gap-4">
             <AccordionTrigger className="text-xs text-muted-foreground">
-              Approve{" "}
-              <span className="text-accent-foreground font-bold">
-                {methods.length} {methods.length > 1 ? "methods" : "method"}
-              </span>
+              <div>
+                Approve{" "}
+                <span className="text-accent-foreground font-bold">
+                  {methods.length} {methods.length > 1 ? "methods" : "method"}
+                </span>
+              </div>
             </AccordionTrigger>
             <AccordionContent className="bg-background border border-background rounded-md gap-px">
               {methods.map((method) => (
diff --git a/packages/ui-next/src/components/icons/error-alert-icon.tsx b/packages/ui-next/src/components/icons/error-alert-icon.tsx
index d0200a49e..06343c761 100644
--- a/packages/ui-next/src/components/icons/error-alert-icon.tsx
+++ b/packages/ui-next/src/components/icons/error-alert-icon.tsx
@@ -3,35 +3,32 @@ import { InfoIcon, WarningIcon, AlertIcon as AlertIconRaw } from "./utility";
 
 export type ErrorAlertIconProps = {
   variant: "info" | "warning" | "error";
-  size?: "xs" | "default";
+  size?: "sm";
   className?: string;
 };
 
 export function ErrorAlertIcon({
   variant,
-  size = "default",
+  size = "sm",
   className,
 }: ErrorAlertIconProps) {
   switch (variant) {
     case "info":
       return (
-        <InfoIcon
-          size={size}
-          className={cn("text-info-foreground", className)}
-        />
+        <InfoIcon size={size} className={cn("text-info-icon", className)} />
       );
     case "warning":
       return (
         <WarningIcon
           size={size}
-          className={cn("text-warning-foreground", className)}
+          className={cn("text-warning-icon", className)}
         />
       );
     case "error":
       return (
         <AlertIconRaw
           size={size}
-          className={cn("text-error-foreground", className)}
+          className={cn("text-error-icon", className)}
         />
       );
   }
diff --git a/packages/ui-next/src/components/primitives/accordion.tsx b/packages/ui-next/src/components/primitives/accordion.tsx
index 50a5c5a65..bfd678e1b 100644
--- a/packages/ui-next/src/components/primitives/accordion.tsx
+++ b/packages/ui-next/src/components/primitives/accordion.tsx
@@ -24,13 +24,10 @@ const AccordionTrigger = React.forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
-      className={cn(
-        "w-full flex items-center justify-between text-sm text-muted-foreground transition-all text-left [&[data-state=open]>svg]:rotate-90",
-        className,
-      )}
+      className="w-full flex items-center justify-between text-sm text-muted-foreground transition-all text-left [&[data-state=open]>svg]:rotate-90"
       {...props}
     >
-      <div>{children}</div>
+      <div className={cn("flex items-center", className)}>{children}</div>
       {!hideIcon && (
         <ChevronRightIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
       )}
diff --git a/packages/ui-next/src/preset.ts b/packages/ui-next/src/preset.ts
index 415af5103..8aad80fa0 100644
--- a/packages/ui-next/src/preset.ts
+++ b/packages/ui-next/src/preset.ts
@@ -59,6 +59,21 @@ export const cartridgeTWPreset: Partial<Config> = {
       spacer: {
         DEFAULT: "hsl(var(--spacer))",
       },
+      info: {
+        DEFAULT: "hsl(var(--info))",
+        foreground: "hsl(var(--info-foreground))",
+        icon: "hsl(var(--info-icon))",
+      },
+      warning: {
+        DEFAULT: "hsl(var(--warning))",
+        foreground: "hsl(var(--warning-foreground))",
+        icon: "hsl(var(--warning-icon))",
+      },
+      error: {
+        DEFAULT: "hsl(var(--error))",
+        foreground: "hsl(var(--error-foreground))",
+        icon: "hsl(var(--error-icon))",
+      },
     },
     extend: {
       fontFamily: {
diff --git a/packages/ui-next/src/themes/default.css b/packages/ui-next/src/themes/default.css
index 7e2607827..1005d96fe 100644
--- a/packages/ui-next/src/themes/default.css
+++ b/packages/ui-next/src/themes/default.css
@@ -39,10 +39,13 @@
     --spacer: 0 0% 0%; /* solid-fills/spacer */
 
     --info: 209 67% 75%;
-    --info-foreground: 208 100% 30%;
-    --warning: 209 67% 75%;
-    --warning-foreground: 208 100% 30%;
-    --error: 209 67% 75%;
-    --error-foreground: 208 100% 30%;
+    --info-foreground: 135 8% 9%;
+    --info-icon: 208 100% 30%;
+    --warning: 135 6% 13%;
+    --warning-foreground: 0 0% 100%;
+    --warning-icon: 47 100% 49%;
+    --error: 0 84% 85%;
+    --error-foreground: 0 0% 0%;
+    --error-icon: 0 72% 65%;
   }
 }