diff --git a/lib/models/github_trending.dart b/lib/models/github_trending.dart
new file mode 100644
index 0000000..87a078c
--- /dev/null
+++ b/lib/models/github_trending.dart
@@ -0,0 +1,21 @@
+import 'package:json_annotation/json_annotation.dart';
+
+part 'github_trending.g.dart';
+
+@JsonSerializable()
+class GithubTrendingItem {
+  String author;
+  String name;
+  String avatar;
+  String description;
+  String language;
+  String languageColor;
+  int stars;
+  int forks;
+  int currentPeriodStars;
+
+  GithubTrendingItem();
+
+  factory GithubTrendingItem.fromJson(Map<String, dynamic> json) =>
+      _$GithubTrendingItemFromJson(json);
+}
diff --git a/lib/models/github_trending.g.dart b/lib/models/github_trending.g.dart
new file mode 100644
index 0000000..531b157
--- /dev/null
+++ b/lib/models/github_trending.g.dart
@@ -0,0 +1,33 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'github_trending.dart';
+
+// **************************************************************************
+// JsonSerializableGenerator
+// **************************************************************************
+
+GithubTrendingItem _$GithubTrendingItemFromJson(Map<String, dynamic> json) {
+  return GithubTrendingItem()
+    ..author = json['author'] as String
+    ..name = json['name'] as String
+    ..avatar = json['avatar'] as String
+    ..description = json['description'] as String
+    ..language = json['language'] as String
+    ..languageColor = json['languageColor'] as String
+    ..stars = json['stars'] as int
+    ..forks = json['forks'] as int
+    ..currentPeriodStars = json['currentPeriodStars'] as int;
+}
+
+Map<String, dynamic> _$GithubTrendingItemToJson(GithubTrendingItem instance) =>
+    <String, dynamic>{
+      'author': instance.author,
+      'name': instance.name,
+      'avatar': instance.avatar,
+      'description': instance.description,
+      'language': instance.language,
+      'languageColor': instance.languageColor,
+      'stars': instance.stars,
+      'forks': instance.forks,
+      'currentPeriodStars': instance.currentPeriodStars,
+    };
diff --git a/lib/screens/trending.dart b/lib/screens/trending.dart
index ee2e74e..7ef7ec2 100644
--- a/lib/screens/trending.dart
+++ b/lib/screens/trending.dart
@@ -1,6 +1,8 @@
 import 'dart:convert';
 import 'package:flutter/material.dart';
+import 'package:git_touch/models/github_trending.dart';
 import 'package:git_touch/scaffolds/tab_stateful.dart';
+import 'package:git_touch/screens/repository.dart';
 import 'package:git_touch/utils/utils.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
 import 'package:git_touch/widgets/user_item.dart';
@@ -9,15 +11,15 @@ import 'package:git_touch/widgets/repository_item.dart';
 
 class TrendingScreen extends StatelessWidget {
   Widget build(BuildContext context) {
-    return TabStatefulScaffold(
+    return TabStatefulScaffold<Iterable<GithubTrendingItem>>(
       title: AppBarTitle('Trending'),
       tabs: ['Repositories', 'Users'],
       fetchData: (tabIndex) async {
         var uri = Uri.parse('https://github-trending-api.now.sh')
             .resolve(tabIndex == 1 ? '/developers' : '/');
         var res = await http.get(uri);
-        var items = json.decode(res.body) as List;
-        return items;
+        return (json.decode(res.body) as List)
+            .map((v) => GithubTrendingItem.fromJson(v));
       },
       bodyBuilder: (payload, activeTab) {
         return Column(
@@ -27,33 +29,24 @@ class TrendingScreen extends StatelessWidget {
             payload.map<Widget>((item) {
               switch (activeTab) {
                 case 0:
-                  return RepositoryItem({
-                    'owner': {
-                      'login': item['author'],
-                      'avatarUrl': item['avatar']
-                    },
-                    'name': item['name'],
-                    'description': item['description'],
-                    'stargazers': {
-                      'totalCount': item['stars'],
-                    },
-                    'forks': {
-                      'totalCount': item['forks'],
-                    },
-                    'primaryLanguage': item['language'] == null
-                        ? null
-                        : {
-                            'name': item['language'],
-                            'color': item['languageColor'],
-                          },
-                    'isPrivate': false,
-                    'isFork': false // TODO:
-                  });
+                  return RepositoryItem.raw(
+                    item.author,
+                    item.avatar,
+                    item.name,
+                    item.description,
+                    Octicons.repo,
+                    item.stars,
+                    item.forks,
+                    item.language,
+                    item.languageColor,
+                    (_) => RepositoryScreen(item.author, item.name),
+                    [],
+                  );
                 case 1:
                   return UserItem(
-                    login: item['username'],
-                    name: item['name'],
-                    avatarUrl: item['avatar'],
+                    login: item.author,
+                    name: item.name,
+                    avatarUrl: item.avatar,
                     bio: '',
                   );
                 default:
diff --git a/lib/widgets/repository_item.dart b/lib/widgets/repository_item.dart
index 97947e9..0398051 100644
--- a/lib/widgets/repository_item.dart
+++ b/lib/widgets/repository_item.dart
@@ -48,6 +48,20 @@ class RepositoryItem extends StatelessWidget {
   final bool inRepoScreen;
   final List topics;
 
+  RepositoryItem.raw(
+      this.owner,
+      this.avatarUrl,
+      this.name,
+      this.description,
+      this.iconData,
+      this.starCount,
+      this.forkCount,
+      this.primaryLanguageName,
+      this.primaryLanguageColor,
+      this.screenBuilder,
+      this.topics,
+      {this.inRepoScreen = false});
+
   RepositoryItem(payload, {this.inRepoScreen = false})
       : this.owner = payload['owner']['login'],
         this.avatarUrl = payload['owner']['avatarUrl'],