diff --git a/packages/widgetbook/.gitignore b/packages/widgetbook/.gitignore
new file mode 100644
index 0000000..29a3a50
--- /dev/null
+++ b/packages/widgetbook/.gitignore
@@ -0,0 +1,43 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
diff --git a/packages/widgetbook/README.md b/packages/widgetbook/README.md
new file mode 100644
index 0000000..5122f24
--- /dev/null
+++ b/packages/widgetbook/README.md
@@ -0,0 +1,16 @@
+# widgetbook
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.
diff --git a/packages/widgetbook/analysis_options.yaml b/packages/widgetbook/analysis_options.yaml
new file mode 100644
index 0000000..0d29021
--- /dev/null
+++ b/packages/widgetbook/analysis_options.yaml
@@ -0,0 +1,28 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at https://dart.dev/lints.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
diff --git a/packages/widgetbook/lib/main.dart b/packages/widgetbook/lib/main.dart
new file mode 100644
index 0000000..d0373b9
--- /dev/null
+++ b/packages/widgetbook/lib/main.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_timeline/flutter_timeline.dart';
+import 'package:intl/date_symbol_data_local.dart';
+import 'package:timeline_widgetbook/main.directories.g.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+void main() {
+  initializeDateFormatting();
+
+  runApp(const WidgetBookApp());
+}
+
+@widgetbook.App()
+class WidgetBookApp extends StatelessWidget {
+  const WidgetBookApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Widgetbook.material(
+      integrations: [
+        WidgetbookCloudIntegration(),
+      ],
+      addons: [
+        DeviceFrameAddon(
+          devices: [
+            Devices.ios.iPhoneSE,
+            Devices.ios.iPhone13,
+            Devices.android.bigPhone,
+            Devices.android.mediumPhone,
+            Devices.android.smallPhone,
+          ],
+          initialDevice: Devices.ios.iPhone13,
+        ),
+        MaterialThemeAddon(
+          themes: [
+            WidgetbookTheme(
+              name: 'Light',
+              data: ThemeData.light(),
+            ),
+            WidgetbookTheme(
+              name: 'Dark',
+              data: ThemeData.dark(),
+            ),
+          ],
+          initialTheme: WidgetbookTheme(
+            name: 'Light',
+            data: ThemeData.light(),
+          ),
+        ),
+      ],
+      directories: directories,
+    );
+  }
+}
+
+@widgetbook.UseCase(
+  designLink:
+      'https://www.figma.com/file/PRJoVXQ5aOjAICfkQdAq2A/Iconica-User-Stories?type=design&node-id=34-2763&mode=design&t=W72P3tkEascAKDCk-4',
+  name: 'Timeline screen',
+  type: TimelineScreen,
+)
+Widget timelineUseCase(BuildContext context) => Container();
diff --git a/packages/widgetbook/lib/main.directories.g.dart b/packages/widgetbook/lib/main.directories.g.dart
new file mode 100644
index 0000000..e8e3bee
--- /dev/null
+++ b/packages/widgetbook/lib/main.directories.g.dart
@@ -0,0 +1,30 @@
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AppGenerator
+// **************************************************************************
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:timeline_widgetbook/main.dart' as _i2;
+import 'package:widgetbook/widgetbook.dart' as _i1;
+
+final directories = <_i1.WidgetbookNode>[
+  _i1.WidgetbookFolder(
+    name: 'screens',
+    children: [
+      _i1.WidgetbookLeafComponent(
+        name: 'TimelineScreen',
+        useCase: _i1.WidgetbookUseCase(
+          name: 'Timeline screen',
+          builder: _i2.timelineUseCase,
+          designLink:
+              'https://www.figma.com/file/PRJoVXQ5aOjAICfkQdAq2A/Iconica-User-Stories?type=design&node-id=34-2763&mode=design&t=W72P3tkEascAKDCk-4',
+        ),
+      )
+    ],
+  )
+];
diff --git a/packages/widgetbook/pubspec.yaml b/packages/widgetbook/pubspec.yaml
new file mode 100644
index 0000000..cbc3ebb
--- /dev/null
+++ b/packages/widgetbook/pubspec.yaml
@@ -0,0 +1,29 @@
+name: timeline_widgetbook
+description: "A new Flutter project."
+publish_to: 'none'
+version: 1.0.0+1
+
+environment:
+  sdk: '>=3.2.5 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+  cupertino_icons: ^1.0.2
+  widgetbook_annotation: ^3.1.0
+  widgetbook: ^3.7.1
+  flutter_timeline:
+    path: ../flutter_timeline
+  intl: ^0.19.0
+
+dev_dependencies:
+  build_runner: any
+  widgetbook_generator: ^3.7.0
+  flutter_test:
+    sdk: flutter
+
+  flutter_lints: ^2.0.0
+
+flutter:
+  uses-material-design: true
\ No newline at end of file
diff --git a/packages/widgetbook/web/favicon.png b/packages/widgetbook/web/favicon.png
new file mode 100644
index 0000000..8aaa46a
Binary files /dev/null and b/packages/widgetbook/web/favicon.png differ
diff --git a/packages/widgetbook/web/icons/Icon-192.png b/packages/widgetbook/web/icons/Icon-192.png
new file mode 100644
index 0000000..b749bfe
Binary files /dev/null and b/packages/widgetbook/web/icons/Icon-192.png differ
diff --git a/packages/widgetbook/web/icons/Icon-512.png b/packages/widgetbook/web/icons/Icon-512.png
new file mode 100644
index 0000000..88cfd48
Binary files /dev/null and b/packages/widgetbook/web/icons/Icon-512.png differ
diff --git a/packages/widgetbook/web/icons/Icon-maskable-192.png b/packages/widgetbook/web/icons/Icon-maskable-192.png
new file mode 100644
index 0000000..eb9b4d7
Binary files /dev/null and b/packages/widgetbook/web/icons/Icon-maskable-192.png differ
diff --git a/packages/widgetbook/web/icons/Icon-maskable-512.png b/packages/widgetbook/web/icons/Icon-maskable-512.png
new file mode 100644
index 0000000..d69c566
Binary files /dev/null and b/packages/widgetbook/web/icons/Icon-maskable-512.png differ
diff --git a/packages/widgetbook/web/index.html b/packages/widgetbook/web/index.html
new file mode 100644
index 0000000..9dc83bd
--- /dev/null
+++ b/packages/widgetbook/web/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="widgetbook">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>widgetbook</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    const serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: function(engineInitializer) {
+          engineInitializer.initializeEngine().then(function(appRunner) {
+            appRunner.runApp();
+          });
+        }
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/packages/widgetbook/web/manifest.json b/packages/widgetbook/web/manifest.json
new file mode 100644
index 0000000..6bd71b6
--- /dev/null
+++ b/packages/widgetbook/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "widgetbook",
+    "short_name": "widgetbook",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}