diff --git a/README.md b/README.md
index f12d753..296b063 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ dependencies:
 https://www.pinterest.com/official_softmarshmallow/flutter-timeline/
 
 
-## simple example
+## simple example [(run it now!)](https://softmarshmallow.github.io/flutter-timeline/)
 ![demo app](./docs/images/mac-ss.png)
 ![demo app](./docs/images/mac-ss-2.png)
 ![demo app](./docs/images/mac-ss-3.png)
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 3dffa97..6bbe043 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -1,4 +1,5 @@
 import 'package:example/screen/cms_comments_demo.dart';
+import 'package:example/screen/github_activity_demo.dart';
 import 'package:example/screen/plain_timeline_demo.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
@@ -19,7 +20,8 @@ class TimelineDemoApp extends StatelessWidget {
       ),
       routes: {
         PlainTimelineDemoScreen.routeName: (c) => PlainTimelineDemoScreen(),
-        CmsCommentsDemoScreen.routeName: (c) => CmsCommentsDemoScreen(),
+        DeskTimelineDemoScreen.routeName: (c) => DeskTimelineDemoScreen(),
+        GithubActivityDemo.routeName: (c) => GithubActivityDemo(),
       },
       home: DemoHomePage(title: 'Flutter Timeline Demo'),
     );
@@ -33,13 +35,18 @@ List<DemoScreen> demos = [
       cover: null,
       route: PlainTimelineDemoScreen.routeName),
   DemoScreen(
-      name: "cms / e-commerce with comments",
-      description: "demo for creating timeline such like shopify",
+      name: "github activity",
+      description: "github's activity timeline demo",
       cover: null,
-      route: CmsCommentsDemoScreen.routeName),
+      route: GithubActivityDemo.routeName),
   DemoScreen(
-      name: "plain timeline",
-      description: "simplest timeline demo",
+      name: "genoplan desk",
+      description: "genoplan's desk crm app timeline demo",
+      cover: null,
+      route: DeskTimelineDemoScreen.routeName),
+  DemoScreen(
+      name: "shopify",
+      description: "timeline demo from shopify admin",
       cover: null,
       route: PlainTimelineDemoScreen.routeName),
 ];
diff --git a/example/lib/screen/cms_comments_demo.dart b/example/lib/screen/cms_comments_demo.dart
index fae5e2b..caca559 100644
--- a/example/lib/screen/cms_comments_demo.dart
+++ b/example/lib/screen/cms_comments_demo.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
 import 'package:flutter_timeline/timeline.dart';
 
-class CmsCommentsDemoScreen extends StatefulWidget {
+class DeskTimelineDemoScreen extends StatefulWidget {
   static const routeName = "/demo/cms-comments";
 
   @override
-  State<StatefulWidget> createState() => _CmsCommentsDemoScreenState();
+  State<StatefulWidget> createState() => _DeskTimelineDemoScreenState();
 }
 
-class _CmsCommentsDemoScreenState extends State<CmsCommentsDemoScreen> {
+class _DeskTimelineDemoScreenState extends State<DeskTimelineDemoScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
diff --git a/example/lib/screen/github_activity_demo.dart b/example/lib/screen/github_activity_demo.dart
new file mode 100644
index 0000000..14cb2ab
--- /dev/null
+++ b/example/lib/screen/github_activity_demo.dart
@@ -0,0 +1,97 @@
+import 'package:example/themes/github_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_timeline/flutter_timeline.dart';
+
+class GithubActivityDemo extends StatefulWidget {
+  static const routeName = "/demo/github-activity";
+
+  @override
+  State<StatefulWidget> createState() => _GithubActivityDemoState();
+}
+
+class _GithubActivityDemoState extends State<GithubActivityDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Theme(data: makeGithubTheme(), child: buildScreen());
+  }
+
+  Widget buildScreen() {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("github"),
+      ),
+      body: buildBody(),
+    );
+  }
+
+  Widget buildBody() {
+    return SingleChildScrollView(
+      child: Column(
+        children: [buildTimeline()],
+      ),
+    );
+  }
+
+  Widget buildTimeline() {
+    return Timeline(events: [TimelineEventDisplay(child: Text("wow"))]);
+  }
+}
+
+/// github's timeline card (the embedded type of card, not event itself)
+///  <div class="profile-timeline-card bg-white border border-gray-dark rounded-1 p-3">
+///      <svg class="octicon octicon-issue-closed closed d-inline-block mt-1 float-left" title="Closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z"></path></svg>
+///   <div class="ml-4">
+///      <h3 class="lh-condensed my-0">
+///        <a class="text-gray-dark" data-hovercard-type="issue" data-hovercard-url="/nuxt/content/issues/339/hovercard" href="/nuxt/content/issues/339">use content theme on existing nuxt project</a>
+///      </h3>
+///
+///        <div class="text-gray mb-0 mt-2 ">
+///          <p><a href="https://github.com/nuxt/content/edit/dev/docs/content/en/themes-docs.md">https://github.com/nuxt/content/edit/dev/docs/content/en/themes-docs.md</a>
+///this example is outdated and wont work.
+///<span class="pl-k">import</span> <span class="pl-s1">theme</span> <span class="pl-k">from</span> <span class="pl-s">'@nuxt/content-th…</span></p>
+///        </div>
+///
+///      <div class="f6 text-gray mt-2">
+///        10
+///        comments
+///      </div>
+///    </div>
+///  </div>
+class TimelineCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(),
+    );
+  }
+}
+
+/// a indicator used at github activity timeline
+/// <span class="discussion-item-icon">
+///     <svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+///  </span>
+class DiscussionItemIcon extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(32)),
+          color: Colors.grey),
+      child: Icon(Icons.fiber_manual_record),
+    );
+  }
+}
+
+/// timeline date indicator by github
+/// <h3 class="profile-timeline-month-heading bg-white d-inline-block h6 pr-2 py-1">
+///     August <span class="text-gray">2020</span>
+///    </h3>
+class TimelineMonthHeading extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "data",
+      style: Theme.of(context).textTheme.headline3,
+    );
+  }
+}
diff --git a/example/lib/screen/plain_timeline_demo.dart b/example/lib/screen/plain_timeline_demo.dart
index 1707707..161bda7 100644
--- a/example/lib/screen/plain_timeline_demo.dart
+++ b/example/lib/screen/plain_timeline_demo.dart
@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline/flutter_timeline.dart';
 import 'package:flutter_timeline/timeline_theme.dart';
@@ -15,6 +17,7 @@ class _PlainTimelineDemoScreenState extends State<PlainTimelineDemoScreen> {
   void initState() {
     super.initState();
     events = [
+      smallEventDisplay,
       plainEventDisplay,
       TimelineEventDisplay(
           child: Card(
@@ -41,13 +44,46 @@ class _PlainTimelineDemoScreenState extends State<PlainTimelineDemoScreen> {
     );
   }
 
+  TimelineEventDisplay get smallEventDisplay {
+    return TimelineEventDisplay(
+        child: Card(
+          child: TimelineEventCard(
+            title: Text("click the + button"),
+            content: Text("to add a new event item"),
+          ),
+        ),
+        indicatorSize: 12,
+        indicator: Container(
+          width: 12,
+          height: 12,
+          decoration: BoxDecoration(color: Colors.blueAccent),
+        ));
+  }
+
+  Widget get randomIndicator {
+    var candidates = [
+      TimelineDots.of(context).circleIcon,
+      Container(
+        width: 16,
+        height: 16,
+        decoration: BoxDecoration(
+          color: Colors.blueAccent,
+          borderRadius: BorderRadius.all(Radius.circular(4)),
+        ),
+      ),
+    ];
+    final _random = new Random();
+    var element = candidates[_random.nextInt(candidates.length)];
+    return element;
+  }
+
   TimelineEventDisplay get plainEventDisplay {
     return TimelineEventDisplay(
         child: TimelineEventCard(
           title: Text("just now"),
           content: Text("someone commented on your timeline ${DateTime.now()}"),
         ),
-        indicator: TimelineDots.of(context).circleIcon);
+        indicator: randomIndicator);
   }
 
   List<TimelineEventDisplay> events;
diff --git a/example/lib/themes/github_theme.dart b/example/lib/themes/github_theme.dart
new file mode 100644
index 0000000..47f7100
--- /dev/null
+++ b/example/lib/themes/github_theme.dart
@@ -0,0 +1,4 @@
+import 'package:flutter/material.dart';
+
+ThemeData makeGithubTheme() =>
+    new ThemeData(appBarTheme: AppBarTheme(color: Colors.black));
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 7a100ab..d6d537b 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.0"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   charcode:
     dependency: transitive
     description:
@@ -35,7 +42,14 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.12"
+    version: "1.14.13"
+  expandable:
+    dependency: "direct main"
+    description:
+      name: expandable
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.4"
   fake_async:
     dependency: transitive
     description:
@@ -59,14 +73,14 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.4"
+    version: "0.0.4+4"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.8"
   meta:
     dependency: transitive
     description:
@@ -99,7 +113,7 @@ packages:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.9.5"
   stream_channel:
     dependency: transitive
     description:
@@ -127,14 +141,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.16"
+    version: "0.2.17"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.2.0"
   vector_math:
     dependency: transitive
     description:
@@ -143,4 +157,5 @@ packages:
     source: hosted
     version: "2.0.8"
 sdks:
-  dart: ">=2.7.0 <3.0.0"
+  dart: ">=2.9.0-14.0.dev <3.0.0"
+  flutter: ">=1.12.0 <2.0.0"
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index ef795d2..66059bb 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -27,6 +27,8 @@ dependencies:
   flutter_timeline:
     path: "../"
 
+  expandable: ^4.1.4
+
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/lib/event_item.dart b/lib/event_item.dart
index 8348b20..9a725dd 100644
--- a/lib/event_item.dart
+++ b/lib/event_item.dart
@@ -4,9 +4,13 @@ class TimelineEventDisplay {
   TimelineEventDisplay(
       {@required @required this.child,
       this.indicator,
+      this.indicatorSize,
       this.forceLineDrawing = false});
 
   final Widget child;
+
+  /// if not provided, use the default indicator size
+  final double indicatorSize;
   final Widget indicator;
 
   /// enables indicator line drawing even no indicator is passed.
@@ -15,6 +19,11 @@ class TimelineEventDisplay {
   bool get hasIndicator {
     return indicator != null;
   }
+
+  @override
+  String toString() {
+    return "Instance of TimelineEventDisplay:: indicator size = $indicatorSize";
+  }
 }
 
 class TimelineEventCard extends StatelessWidget {
diff --git a/lib/indicator_position.dart b/lib/indicator_position.dart
new file mode 100644
index 0000000..5845b28
--- /dev/null
+++ b/lib/indicator_position.dart
@@ -0,0 +1,5 @@
+enum IndicatorPosition{
+  top,
+  center,
+  bottom
+}
\ No newline at end of file
diff --git a/lib/timeline.dart b/lib/timeline.dart
index b20e5b8..305e046 100644
--- a/lib/timeline.dart
+++ b/lib/timeline.dart
@@ -48,22 +48,14 @@ class Timeline extends StatelessWidget {
       primary: primary,
       itemBuilder: (context, index) {
         final event = events[index];
-
-        Widget indicator;
-
-        if (event.indicator != null) {
-          indicator = event.indicator;
-        }
-
         final isFirst = index == 0;
         final isLast = index == itemCount - 1;
-
         final timelineTile = <Widget>[
           if (event.hasIndicator)
-            _buildIndicator(
+            _buildIndicatorSection(
                 isFirst: isFirst,
                 isLast: isLast,
-                child: indicator,
+                event: event,
                 theme: timelineTheme),
           if (event.hasIndicator) SizedBox(width: timelineTheme.gutterSpacing),
           Expanded(child: event.child),
@@ -80,14 +72,27 @@ class Timeline extends StatelessWidget {
     );
   }
 
-  Widget _buildIndicator(
-      {bool isFirst, bool isLast, Widget child, TimelineThemeData theme}) {
-    //    return
+  Widget buildWrappedIndicator(Widget child, {double width, double height}) {
+    return SizedBox(
+      width: width,
+      height: height,
+      child: child,
+    );
+  }
+
+  Widget _buildIndicatorSection(
+      {bool isFirst,
+      bool isLast,
+      TimelineEventDisplay event,
+      TimelineThemeData theme}) {
+    var overrideIndicatorSize =
+        event.indicatorSize != null ? event.indicatorSize : indicatorSize;
     var line = CustomPaint(
       painter: _LineIndicatorPainter(
-        hideDefaultIndicator: child != null,
+        hideDefaultIndicator: event.child != null,
         lineColor: theme.lineColor,
-        indicatorSize: indicatorSize,
+        indicatorSize: overrideIndicatorSize,
+        maxIndicatorSize: indicatorSize,
         isFirst: isFirst,
         isLast: isLast,
         lineGap: theme.lineGap,
@@ -102,13 +107,16 @@ class Timeline extends StatelessWidget {
     return Stack(
       children: [
         line,
-        Align(
-          child: SizedBox(
-            width: indicatorSize,
-            height: indicatorSize,
-            child: child,
-          ),
-        )
+        // align the indicator to the center
+        Positioned.fill(
+          child: Align(
+              alignment: Alignment.center,
+              child: buildWrappedIndicator(
+                event.indicator,
+                width: overrideIndicatorSize,
+                height: overrideIndicatorSize,
+              )),
+        ),
       ],
     );
   }
@@ -118,6 +126,7 @@ class _LineIndicatorPainter extends CustomPainter {
   _LineIndicatorPainter({
     @required this.hideDefaultIndicator,
     @required this.indicatorSize,
+    @required this.maxIndicatorSize,
     @required this.lineGap,
     @required this.strokeCap,
     @required this.strokeWidth,
@@ -134,6 +143,7 @@ class _LineIndicatorPainter extends CustomPainter {
 
   final bool hideDefaultIndicator;
   final double indicatorSize;
+  final double maxIndicatorSize;
   final double lineGap;
   final StrokeCap strokeCap;
   final double strokeWidth;
@@ -147,17 +157,19 @@ class _LineIndicatorPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     final indicatorRadius = indicatorSize / 2;
+    final maxIndicatorRadius = maxIndicatorSize / 2;
     final indicatorMargin = indicatorRadius + lineGap;
-    final safeItemGap = indicatorMargin + 0.0;
+    final safeItemGap = (indicatorSize / 2) + lineGap;
 
-    final top = size.topLeft(Offset(indicatorRadius, 0.0 - safeItemGap));
+    final top = size.topLeft(Offset(maxIndicatorRadius, 0.0 - safeItemGap));
     final centerTop = size.centerLeft(
-      Offset(indicatorRadius, -indicatorMargin),
+      Offset(maxIndicatorRadius, -indicatorMargin),
     );
 
-    final bottom = size.bottomLeft(Offset(indicatorRadius, 0.0 + safeItemGap));
+    final bottom =
+        size.bottomLeft(Offset(maxIndicatorRadius, 0.0 + safeItemGap));
     final centerBottom = size.centerLeft(
-      Offset(indicatorRadius, indicatorMargin),
+      Offset(maxIndicatorRadius, indicatorMargin),
     );
 
     if (!isFirst) canvas.drawLine(top, centerTop, linePaint);
diff --git a/lib/timeline_theme_data.dart b/lib/timeline_theme_data.dart
index 5cbc216..6cc74cf 100644
--- a/lib/timeline_theme_data.dart
+++ b/lib/timeline_theme_data.dart
@@ -1,7 +1,8 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_timeline/indicator_position.dart';
 
-@immutable
+/// [TimelineThemeData] is passed through [TimelineTheme], works like general flutter theme object.
 class TimelineThemeData with Diagnosticable {
   TimelineThemeData({
     this.gutterSpacing = 12.0,
@@ -11,6 +12,7 @@ class TimelineThemeData with Diagnosticable {
     this.strokeCap = StrokeCap.butt,
     this.lineColor = Colors.lightBlueAccent,
     this.style = PaintingStyle.stroke,
+    this.indicatorPosition = IndicatorPosition.center,
   })  : assert(itemGap >= 0),
         assert(lineGap >= 0);
 
@@ -22,6 +24,9 @@ class TimelineThemeData with Diagnosticable {
   final double itemGap;
   final double gutterSpacing;
 
+  /// the position of the indicator. this affects the placing of the indicator, and following line measurement
+  final IndicatorPosition indicatorPosition;
+
   /// Whether all the properties of this object are non-null.
   bool get isConcrete => lineColor != null; // &&
 
@@ -35,11 +40,8 @@ class TimelineThemeData with Diagnosticable {
         strokeWidth = 4.0,
         style = PaintingStyle.stroke,
         itemGap = 24.0,
-        gutterSpacing = 12.0;
-
-//      : color = const Color(0xFF000000),
-//        _opacity = 1.0,
-//        size = 24.0;
+        gutterSpacing = 12.0,
+        indicatorPosition = IndicatorPosition.center;
 
   TimelineThemeData copyWith(
       {Color lineColor, StrokeCap strokeCap, double strokeWidth}) {
diff --git a/pubspec.lock b/pubspec.lock
index bd50f82..9477cdd 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.0"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   charcode:
     dependency: transitive
     description:
@@ -35,7 +42,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.12"
+    version: "1.14.13"
   fake_async:
     dependency: transitive
     description:
@@ -59,7 +66,7 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.8"
   meta:
     dependency: transitive
     description:
@@ -92,7 +99,7 @@ packages:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.9.5"
   stream_channel:
     dependency: transitive
     description:
@@ -120,14 +127,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.16"
+    version: "0.2.17"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.2.0"
   vector_math:
     dependency: transitive
     description:
@@ -136,4 +143,4 @@ packages:
     source: hosted
     version: "2.0.8"
 sdks:
-  dart: ">=2.7.0 <3.0.0"
+  dart: ">=2.9.0-14.0.dev <3.0.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 995c28b..f4828bf 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: flutter_timeline
 description: a fully customizable & general timeline widget, based on real-world application references
-version: 0.0.4+1
+version: 0.0.4+4
 author: (softmarshmallow) woojoo@softmarshmallow.com
 homepage: https://github.com/softmarshmallow/flutter-timeline
 repository: https://github.com/softmarshmallow/flutter-timeline