diff --git a/kliento/package-lock.json b/kliento/package-lock.json
index 65640cc..ba30bef 100644
--- a/kliento/package-lock.json
+++ b/kliento/package-lock.json
@@ -1521,8 +1521,7 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
     "@emotion/serialize": {
       "version": "0.11.16",
@@ -1576,14 +1575,12 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
@@ -8220,6 +8217,16 @@
         "@types/unist": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -8455,6 +8462,17 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/styled-components": {
+      "version": "5.1.24",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.24.tgz",
+      "integrity": "sha512-mz0fzq2nez+Lq5IuYammYwWgyLUE6OMAJTQL9D8hFLP4Pkh7gVYJii/VQWxq8/TK34g/OrkehXaFNdcEKcItug==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -9647,11 +9665,22 @@
         "react-docgen": "^5.0.0"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz",
+      "integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
@@ -10291,6 +10320,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -11228,6 +11262,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-declaration-sorter": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@@ -11332,6 +11371,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -14034,7 +14083,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dev": true,
       "requires": {
         "react-is": "^16.7.0"
       }
@@ -20445,8 +20493,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
       "version": "2.0.0",
@@ -21095,6 +21142,33 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+          "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
diff --git a/kliento/package.json b/kliento/package.json
index 83893fc..d4220b6 100644
--- a/kliento/package.json
+++ b/kliento/package.json
@@ -14,6 +14,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },
@@ -66,6 +67,7 @@
     "@storybook/react": "^6.4.20",
     "@storybook/testing-library": "0.0.9",
     "@tauri-apps/cli": "^1.0.0-rc.8",
+    "@types/styled-components": "^5.1.24",
     "cross-env": "^7.0.3",
     "webpack": "^5.71.0"
   }
diff --git a/kliento/src/paĝoj/Rolulo.stories.tsx b/kliento/src/paĝoj/Rolulo.stories.tsx
deleted file mode 100644
index 50f276d..0000000
--- a/kliento/src/paĝoj/Rolulo.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { RolulPaĝo } from "./Rolulo";
-
-export default {
-  title: 'Paĝoj/RolulPaĝo',
-  component: RolulPaĝo,
-} as ComponentMeta<typeof RolulPaĝo>;
-
-const opal = {
-  nomo: "Opal",
-  ecGrupoj: {
-    "forto": {
-      aktuala: 11,
-      maksimuma: 11,
-      avantaĝo: 0,
-    },
-    "rapideco": {
-      aktuala: 12,
-      maksimuma: 12,
-      avantaĝo: 0,
-    },
-    "intelekto": {
-      aktuala: 13,
-      maksimuma: 13,
-      avantaĝo: 1
-    }
-  },
-};
-
-export const RolulPaĝRakonto = () => <RolulPaĝo rolulo={opal} />
diff --git a/kliento/src/paĝoj/Rolulo.tsx b/kliento/src/paĝoj/Rolulo.tsx
deleted file mode 100644
index 72bcad4..0000000
--- a/kliento/src/paĝoj/Rolulo.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-interface EcGrupo {
-  aktuala: number;
-  maksimuma: number;
-  avantaĝo: number;
-}
-
-interface Rolulo {
-  nomo: string;
-  ecGrupoj: { [key: string]: EcGrupo };
-}
-
-interface RolulEcoj {
-  rolulo: Rolulo;
-}
-
-export const RolulPaĝo = ({ rolulo: { nomo } }: RolulEcoj) =>
-  <div>{nomo}</div>;
-
diff --git a/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx b/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx
new file mode 100644
index 0000000..725b41b
--- /dev/null
+++ b/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import RolulPaĝo from "./Rolulo";
+
+export default {
+  title: 'Paĝoj/RolulPaĝo',
+  component: RolulPaĝo,
+} as ComponentMeta<typeof RolulPaĝo>;
+
+const opal = {
+  nomo: "Opal",
+  frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
+  ecGrupoj: [
+    {
+      eco: "Forto",
+      aktuala: 11,
+      maksimuma: 11,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Rapideco",
+      aktuala: 12,
+      maksimuma: 12,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Intelekto",
+      aktuala: 13,
+      maksimuma: 13,
+      avantaĝo: 1
+    }
+  ],
+  kapabloj: [
+    { nomo: "Versatile" },
+    { nomo: "Flex Skill" },
+    { nomo: "Face Morph", kosto: "2+" },
+    { nomo: "Link Senses", kosto: "2" },
+  ],
+  lertecoj: [
+    { nomo: "Perception", nivelo: "Trained", },
+    { nomo: "Resilient", nivelo: "Trained", },
+    { nomo: "Social Interactions", nivelo: "Trained", },
+    { nomo: "Pleasant social interactions", nivelo: "Specialized", },
+    { nomo: "Crafting, Understanding Numenera", nivelo: "Inability", },
+  ],
+  sekvaResaniĝo: "unu ago",
+};
+
+
+export const RolulPaĝRakonto = () => <RolulPaĝo rolulo={opal} />
diff --git a/kliento/src/paĝoj/Rolulo/Rolulo.tsx b/kliento/src/paĝoj/Rolulo/Rolulo.tsx
new file mode 100644
index 0000000..a06b13d
--- /dev/null
+++ b/kliento/src/paĝoj/Rolulo/Rolulo.tsx
@@ -0,0 +1,78 @@
+import styled from "styled-components"
+
+interface EcGrupo {
+  eco: string;
+  aktuala: number;
+  maksimuma: number;
+  avantaĝo: number;
+}
+
+interface Lerteco {
+  nomo: string;
+  nivelo: string;
+}
+
+interface Kapablo {
+  nomo: string;
+  kosto?: string;
+}
+
+interface Rolulo {
+  nomo: string;
+  frazo: string;
+  ecGrupoj: EcGrupo[];
+  kapabloj: Kapablo[];
+  lertecoj: Lerteco[];
+  sekvaResaniĝo: string;
+}
+
+interface RolulEcoj {
+  rolulo: Rolulo;
+}
+
+const EcGrupElemento = ( { eco, aktuala, maksimuma, avantaĝo }: EcGrupo ) => <tr>
+  <th key={eco}> {eco} </th>
+  <td> {aktuala} <button>+</button> <button>-</button> </td>
+  <td> {maksimuma} </td>
+  <td> {avantaĝo} </td>
+</tr>;
+
+const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
+  <dt key={nomo}> {nomo} {kosto && <span>({kosto})</span>} </dt>
+</>;
+
+const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
+  <th key={nomo}> {nomo} </th>
+  <td> {nivelo} </td>
+</tr>;
+
+export const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
+  <>
+    <h1> {nomo} </h1>
+    <h2> {frazo} </h2>
+    <table>
+      {ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
+    </table>
+    <div>
+      <div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
+      <div> <button> Resaniĝu </button> </div>
+    </div>
+    <dl>
+      {kapabloj.map((kapablo) => <KapablaElemento {...kapablo} />)}
+    </dl>
+    <table>
+      <tbody>
+        {lertecoj.map((lerteco) => <LertecaElemento {...lerteco} />)}
+      </tbody>
+    </table>
+  </>;
+
+const Ujo = styled.div`
+  # background-color: #fff5dc;
+  background-color: #fcd7b7;
+  color: #552511;
+`;
+
+const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;
+
+export default bildigu;