diff --git a/kliento/src/paĝoj/Rolulo.stories.tsx b/kliento/src/paĝoj/Rolulo.stories.tsx
new file mode 100644
index 0000000..50f276d
--- /dev/null
+++ b/kliento/src/paĝoj/Rolulo.stories.tsx
@@ -0,0 +1,32 @@
+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
new file mode 100644
index 0000000..72bcad4
--- /dev/null
+++ b/kliento/src/paĝoj/Rolulo.tsx
@@ -0,0 +1,18 @@
+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>;
+