diff --git a/packages/pinorama-server/src/index.mts b/packages/pinorama-server/src/index.mts
index 60588e8..8bf25d0 100644
--- a/packages/pinorama-server/src/index.mts
+++ b/packages/pinorama-server/src/index.mts
@@ -46,53 +46,44 @@ export const defaultOptions: PinoramaServerOptions = {
     pid: "enum",
     hostname: "string"
   },
-  ui: {}
-  // ui: {
-  //   props: {
-  //     level: {
-  //       label: "Level",
-  //       type: "enum",
-  //     }
-  //   },
-  //   labels: {
-  //     level: "Level",
-  //     time: "Time",
-  //     msg: "Message",
-  //     pid: "PID",
-  //     hostname: "Host"
-  //   },
-  //   enumLabels: {
-  //     level: {
-  //       10: "TRACE",
-  //       20: "DEBUG",
-  //       30: "INFO",
-  //       40: "WARN",
-  //       50: "ERROR",
-  //       60: "FATAL"
-  //     }
-  //   },
-  //   formatters: {
-  //     time: "timestamp"
-  //   },
-  //   styles: {
-  //     time: {
-  //       default: { opacity: "0.5" }
-  //     },
-  //     level: {
-  //       byValue: {
-  //         10: { color: "var(--color-gray-500)" },
-  //         20: { color: "var(--color-purple-500)" },
-  //         30: { color: "var(--color-lime-500)" },
-  //         40: { color: "var(--color-yellow-500)" },
-  //         50: { color: "var(--color-red-500)" },
-  //         60: { color: "var(--color-red-500)" }
-  //       }
-  //     }
-  //   },
-  //   defaultColumns: ["time", "level", "msg", "hostname", "pid"],
-  //   defaultFacets: ["level", "hostname", "pid"]
-  //   // facets: [["level", { search: false }], "hostname", "pid"],
-  // }
+  ui: {
+    labels: {
+      level: [
+        "Level",
+        {
+          10: "TRACE",
+          20: "DEBUG",
+          30: "INFO",
+          40: "WARN",
+          50: "ERROR",
+          60: "FATAL"
+        }
+      ],
+      time: "Time",
+      msg: "Message",
+      pid: "PID",
+      hostname: "Host"
+    },
+    formatters: {
+      time: "timestamp"
+    },
+    styles: {
+      time: {
+        opacity: "0.5"
+      },
+      level: [
+        { fontWeight: "bold" },
+        {
+          10: { color: "var(--color-gray-500)" },
+          20: { color: "var(--color-purple-500)" },
+          30: { color: "var(--color-lime-500)" },
+          40: { color: "var(--color-yellow-500)" },
+          50: { color: "var(--color-red-500)" },
+          60: { color: "var(--color-red-500)" }
+        }
+      ]
+    }
+  }
 }
 
 const fastifyPinoramaServer: FastifyPluginAsync<PinoramaServerOptions> = async (
diff --git a/packages/pinorama-server/src/routes/styles.mts b/packages/pinorama-server/src/routes/styles.mts
index a841f52..59ec5f5 100644
--- a/packages/pinorama-server/src/routes/styles.mts
+++ b/packages/pinorama-server/src/routes/styles.mts
@@ -6,13 +6,13 @@ export async function stylesRoute(fastify: FastifyInstance) {
     url: "/styles.css",
     method: "get",
     handler: async (req, res) => {
-      const columns = fastify.pinoramaOpts?.ui?.columns
+      const styles = fastify.pinoramaOpts?.ui?.styles
 
-      if (!columns || columns?.length === 0) {
+      if (!styles || Object.keys(styles).length === 0) {
         res.type("text/css").send("")
       }
 
-      const css = generateCSS(columns)
+      const css = generateCSS(styles)
       res.type("text/css").send(css)
     }
   })
diff --git a/packages/pinorama-server/src/utils/styles.mts b/packages/pinorama-server/src/utils/styles.mts
index 5159182..350eafc 100644
--- a/packages/pinorama-server/src/utils/styles.mts
+++ b/packages/pinorama-server/src/utils/styles.mts
@@ -1,45 +1,54 @@
 import { kebabCase } from "change-case"
 
-type StyleConfig = {
-  base?: Record<string, string>
-  conditions?: Record<string | number, Record<string, string>>
+type CSSProperties = {
+  [key: string]: string | number
 }
 
-type ColumnnDefinition =
-  | [string, { style: StyleConfig; formatter?: string }]
-  | string
+type ValueStyles = {
+  [key: string]: CSSProperties
+}
 
-export function generateCSS(columns: ColumnnDefinition[]) {
-  let css = ""
+type StyleDefinition = CSSProperties | [CSSProperties, ValueStyles]
 
-  const generateCSSProps = (styles: Record<string, string>) => {
-    let props = ""
-    for (const [prop, value] of Object.entries(styles)) {
-      props += `${kebabCase(prop)}: ${value};`
-    }
-    return props
-  }
+type Styles = { [key: string]: StyleDefinition }
+
+export function generateCSS(styles: Styles) {
+  return Object.entries(styles)
+    .map(([field, style]) => generateCSSForField(field, style))
+    .join("")
+}
 
-  for (const column of columns) {
-    if (typeof column === "string") continue
+const generateCSSForField = (field: string, style: StyleDefinition) => {
+  let fieldCSS = ""
 
-    const prefix = "pinorama-col"
-    const [className, config] = column
-    const baseStyles = config.style?.base ?? {}
-    const conditions = config.style?.conditions ?? {}
+  const className = `pinorama-${kebabCase(field)}`
+
+  if (Array.isArray(style)) {
+    const [baseStyles, valueStyles] = style
 
     // Generate base style
-    css += `.${prefix}-${kebabCase(className)} {`
-    css += generateCSSProps(baseStyles)
-    css += "}\n"
-
-    // Generate conditional style
-    for (const [condition, conditionStyles] of Object.entries(conditions)) {
-      css += `.${prefix}-${kebabCase(className)}-${condition} {`
-      css += generateCSSProps(conditionStyles)
-      css += "}\n"
+    fieldCSS += `.${className} {`
+    fieldCSS += generateCSSProps(baseStyles)
+    fieldCSS += "}\n"
+
+    // Generate value styles
+    for (const [value, valueStyle] of Object.entries(valueStyles)) {
+      fieldCSS += `.${className}-${kebabCase(value)} {`
+      fieldCSS += generateCSSProps(valueStyle)
+      fieldCSS += "}\n"
     }
+  } else {
+    // Generate base style
+    fieldCSS += `.${className} {`
+    fieldCSS += generateCSSProps(style)
+    fieldCSS += "}\n"
   }
 
-  return css
+  return fieldCSS
+}
+
+const generateCSSProps = (style: CSSProperties) => {
+  return Object.entries(style)
+    .map(([cssProp, value]) => `${kebabCase(cssProp)}: ${value};`)
+    .join("")
 }