diff --git a/app/Http/Controllers/CategoryController.php b/app/Http/Controllers/CategoryController.php
index 4b64afc..cdfc274 100644
--- a/app/Http/Controllers/CategoryController.php
+++ b/app/Http/Controllers/CategoryController.php
@@ -33,4 +33,8 @@ class CategoryController extends Controller {
             ->where('id', $id)
             ->get();
     }
+
+    public function category($cat_id) { // /category/cat_id
+        return view('category', compact('cat_id'));
+    }
 }
diff --git a/app/Http/Controllers/FileController.php b/app/Http/Controllers/FileController.php
index bfa368c..d055f9d 100644
--- a/app/Http/Controllers/FileController.php
+++ b/app/Http/Controllers/FileController.php
@@ -35,21 +35,21 @@ class FileController extends Controller {
     }
 
     public function getNewFiles() { // /api/rpc/file/getnewfiles
-	    return DB::table('str_file')
-		    ->select('id', 'title', 'submit_date')
-		    ->where('isApproved', 1)
-		    ->orderBy('submit_date', 'desc')
-		    ->limit(5)
-		    ->get();
+        return DB::table('str_file')
+            ->select('id', 'title', 'submit_date')
+            ->where('isApproved', 1)
+            ->orderBy('submit_date', 'desc')
+            ->limit(5)
+            ->get();
     }
 
     public function getHotFiles() { // /api/rpc/file/gethotfiles
-	    return DB::table('str_file')
-		    ->select('id', 'title', 'downloads')
-		    ->where('isApproved', 1)
-		    ->orderBy('downloads', 'desc')
-		    ->limit(5)
-		    ->get();
+        return DB::table('str_file')
+            ->select('id', 'title', 'downloads')
+            ->where('isApproved', 1)
+            ->orderBy('downloads', 'desc')
+            ->limit(5)
+            ->get();
     }
 
     public function getFilesPageAll($cat, $from, $to) { // /api/rpc/file/getfilespageall/cat/from/to
diff --git a/app/Http/Controllers/OwnerController.php b/app/Http/Controllers/OwnerController.php
index 148ec64..837a76d 100644
--- a/app/Http/Controllers/OwnerController.php
+++ b/app/Http/Controllers/OwnerController.php
@@ -7,32 +7,60 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
 
 class OwnerController extends Controller {
-    public function getOwners() { // /api/rpc/owner/getowners
-        // $getUsers = DB::table('for_users')->select('id', 'username', 'display_name', 'name_colour', 'group', 'gender', 'avatar');
+    public function countOwnersOfFile($file_id) { // /api/rpc/owner/countownersoffile/id
         return DB::table('str_owners')
-            ->select('*')
-            // ->union($getUsers)
-		    ->get();
+            ->where('file_id', $file_id)
+            ->count();
     }
 
-    public function getOwner($id) { // /api/rpc/owner/getowner/id
+    public function getOwnersOfFile($file_id) { // /api/rpc/owner/getownersoffile/id
         return DB::table('str_owners')
-        ->select('*')
-        ->where('id', $id)
-        ->get();
+            ->join('str_file', 'str_owners.file_id', '=', 'str_file.id')
+            ->join('for_users', 'str_owners.user_id', '=', 'for_users.id')
+            ->where('file_id', $file_id)
+            ->get(array(
+                "user_id",
+                "title",
+                "version",
+                "views",
+                "downloads",
+                "submit_date",
+                "last_date",
+                "username",
+                "avatar",
+                "perm_id",
+                "gender",
+                "display_name",
+                "name_colour",
+            ));
     }
 
-    public function getOwnerFile($file_id) { // /api/rpc/owner/getownerfile/id
+    public function countFilesOfOwner($user_id) { // /api/rpc/owner/countfilesofowner/id
         return DB::table('str_owners')
-        ->select('*')
-        ->where('file_id', $file_id)
-        ->get();
+            ->where('user_id', $user_id)
+            ->count();
     }
 
-    public function getOwnerUser($user_id) { // /api/rpc/owner/getowneruser/id
+
+    public function getFilesOfOwner($user_id) { // /api/rpc/owner/getfilesofowner/id
         return DB::table('str_owners')
-        ->select('*')
-        ->where('user_id', $user_id)
-        ->get();
+            ->join('str_file', 'str_owners.file_id', '=', 'str_file.id')
+            ->join('for_users', 'str_owners.user_id', '=', 'for_users.id')
+            ->where('user_id', $user_id)
+            ->get(array(
+                "user_id",
+                "title",
+                "version",
+                "views",
+                "downloads",
+                "submit_date",
+                "last_date",
+                "username",
+                "avatar",
+                "perm_id",
+                "gender",
+                "display_name",
+                "name_colour",
+            ));
     }
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index d32e30e..9cc79ef 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -27,6 +27,11 @@ Vue.component('entry-screenshots', require('./components/Entry/Screenshots.vue')
 Vue.component('entry-description', require('./components/Entry/Description.vue'));
 Vue.component('entry-changelog', require('./components/Entry/Changelog.vue'));
 
+// Category page.
+Vue.component('category-entry', require('./components/Category/All.vue'));
+Vue.component('category-entry-downloads', require('./components/Category/Downloads.vue'));
+Vue.component('category-entry-views', require('./components/Category/Views.vue'));
+
 new Vue({
     el: '#app'
 });
diff --git a/resources/assets/js/components/Category/All.vue b/resources/assets/js/components/Category/All.vue
new file mode 100644
index 0000000..9b78c44
--- /dev/null
+++ b/resources/assets/js/components/Category/All.vue
@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <div v-for="e in entries">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <a :href="'/entry/' + e.fid">{{ e.title }} {{ e.version }}</a> by 
+                    <span v-for="o in owners">
+                        <span v-if="o.fid === e.fid">
+                            <a :href="'/profile/' + o.uid"><span :style="o.name_colour">{{ o.showname }}</span></a>&nbsp;
+                        </span>
+                    </span>
+                </div>
+                <div class="panel-body">
+                    <div class="container">
+                        <div class="row">
+                            <img :src="'/assets/store/' + e.fid + '/screens/1.png'" height="100px" />
+                            <br /><br />
+                            Submitted on {{ e.submit_date }}
+                            <span v-if="e.ld !== 0">
+                                , last updated on {{ e.last_date }}
+                            </span>
+                            <br />
+                            {{ e.downloads }} downloads
+                            <br />
+                            {{ e.views }} views
+                            <br /><br />
+                            {{ e.description }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import moment from 'moment';
+
+    export default {
+        name: 'category-entry',
+        props: [
+            'cid',
+            'page',
+            'limit',
+        ],
+        data: function () {
+            return {
+                id: this.cid,
+                from: this.page,
+                to: this.limit,
+                entries: [],
+                owners: [],
+                groupCol: [],
+            }
+        },
+        created: function () {
+            // TODO: show all to users with approval permissions only.
+            // For other users, use /api/rpc/file/getfilespageapproved instead.
+            axios.get('/api/rpc/user/getgroupcolours').then(res => {
+                res.data.forEach(cb => {
+                    this.groupCol.push({
+                        'id': cb.id,
+                        'name': cb.name,
+                        'male': cb.colour_m,
+                        'female': cb.colour_f,
+                        'unknown': cb.colour_u,
+                    });
+                });
+            });
+            axios.get('/api/rpc/file/getfilespageall/' + this.id + '/' + this.from + '/' + this.to).then(res => {
+                res.data.forEach(cb => {
+                    axios.get('/api/rpc/owner/getownersoffile/' + cb.id).then(res => {
+                        res.data.forEach(db => {
+                            var showName = '';
+                            var showCol = '';
+
+                            if (db.display_name !== '') {
+                                showName = db.display_name;
+                            }
+                            else {
+                                showName = db.username;
+                            }
+
+                            if (db.name_colour !== '') {
+                                showCol = db.name_colour;
+                            }
+                            else {
+                                this.groupCol.forEach(re => {
+                                    if (re.id === db.perm_id) {
+                                        if (db.gender === 1) {
+                                            showCol = re.male;
+                                        }
+                                        else if (db.gender === 2) {
+                                            showCol = re.female;
+                                        }
+                                        else {
+                                            showCol = re.unknown;
+                                        }
+                                    }
+                                });
+                            }
+
+                            this.owners.push({
+                                'fid': cb.id,
+                                'uid': db.user_id,
+                                'showname': showName,
+                                'username': db.username,
+                                'display_name': db.display_name,
+                                'avatar': db.avatar,
+                                'gender': db.gender,
+                                'name_colour': showCol,
+                            });
+                        });
+                    });
+
+                    this.entries.push({
+                        'fid': cb.id,
+                        'title': cb.title,
+                        'version': cb.version,
+                        'description': cb.description,
+                        'submit_date': moment.unix(cb.submit_date).format("YYYY/MM/DD"),
+                        'ld': cb.last_date,
+                        'last_date': moment.unix(cb.last_date).format("YYYY/MM/DD"),
+                        'views': cb.views,
+                        'downloads': cb.downloads,
+                    });
+                });
+            });
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/Category/Downloads.vue b/resources/assets/js/components/Category/Downloads.vue
new file mode 100644
index 0000000..5c851b9
--- /dev/null
+++ b/resources/assets/js/components/Category/Downloads.vue
@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <div v-for="e in entries">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <a :href="'/entry/' + e.fid">{{ e.title }} {{ e.version }}</a> by 
+                    <span v-for="o in owners">
+                        <span v-if="o.fid === e.fid">
+                            <a :href="'/profile/' + o.uid"><span :style="o.name_colour">{{ o.showname }}</span></a>&nbsp;
+                        </span>
+                    </span>
+                </div>
+                <div class="panel-body">
+                    <div class="container">
+                        <div class="row">
+                            <img :src="'/assets/store/' + e.fid + '/screens/1.png'" height="100px" />
+                            <br /><br />
+                            Submitted on {{ e.submit_date }}
+                            <span v-if="e.ld !== 0">
+                                , last updated on {{ e.last_date }}
+                            </span>
+                            <br />
+                            {{ e.downloads }} downloads
+                            <br />
+                            {{ e.views }} views
+                            <br /><br />
+                            {{ e.description }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import moment from 'moment';
+
+    export default {
+        name: 'category-entry-downloads',
+        props: [
+            'cid',
+            'page',
+            'limit',
+        ],
+        data: function () {
+            return {
+                id: this.cid,
+                from: this.page,
+                to: this.limit,
+                entries: [],
+                owners: [],
+                groupCol: [],
+            }
+        },
+        created: function () {
+            axios.get('/api/rpc/user/getgroupcolours').then(res => {
+                res.data.forEach(cb => {
+                    this.groupCol.push({
+                        'id': cb.id,
+                        'name': cb.name,
+                        'male': cb.colour_m,
+                        'female': cb.colour_f,
+                        'unknown': cb.colour_u,
+                    });
+                });
+            });
+            axios.get('/api/rpc/file/getfilespagepopulardownload/' + this.id + '/' + this.from + '/' + this.to).then(res => {
+                res.data.forEach(cb => {
+                    axios.get('/api/rpc/owner/getownersoffile/' + cb.id).then(res => {
+                        res.data.forEach(db => {
+                            var showName = '';
+                            var showCol = '';
+
+                            if (db.display_name !== '') {
+                                showName = db.display_name;
+                            }
+                            else {
+                                showName = db.username;
+                            }
+
+                            if (db.name_colour !== '') {
+                                showCol = db.name_colour;
+                            }
+                            else {
+                                this.groupCol.forEach(re => {
+                                    if (re.id === db.perm_id) {
+                                        if (db.gender === 1) {
+                                            showCol = re.male;
+                                        }
+                                        else if (db.gender === 2) {
+                                            showCol = re.female;
+                                        }
+                                        else {
+                                            showCol = re.unknown;
+                                        }
+                                    }
+                                });
+                            }
+
+                            this.owners.push({
+                                'fid': cb.id,
+                                'uid': db.user_id,
+                                'showname': showName,
+                                'username': db.username,
+                                'display_name': db.display_name,
+                                'avatar': db.avatar,
+                                'gender': db.gender,
+                                'name_colour': showCol,
+                            });
+                        });
+                    });
+
+                    this.entries.push({
+                        'fid': cb.id,
+                        'title': cb.title,
+                        'version': cb.version,
+                        'description': cb.description,
+                        'submit_date': moment.unix(cb.submit_date).format("YYYY/MM/DD"),
+                        'ld': cb.last_date,
+                        'last_date': moment.unix(cb.last_date).format("YYYY/MM/DD"),
+                        'views': cb.views,
+                        'downloads': cb.downloads,
+                    });
+                });
+            });
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/Category/Entry.vue b/resources/assets/js/components/Category/Entry.vue
deleted file mode 100644
index 601e61c..0000000
--- a/resources/assets/js/components/Category/Entry.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Example Component</div>
-
-                    <div class="panel-body">
-                        I'm an example component!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>
diff --git a/resources/assets/js/components/Category/Views.vue b/resources/assets/js/components/Category/Views.vue
new file mode 100644
index 0000000..96b447b
--- /dev/null
+++ b/resources/assets/js/components/Category/Views.vue
@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <div v-for="e in entries">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <a :href="'/entry/' + e.fid">{{ e.title }} {{ e.version }}</a> by 
+                    <span v-for="o in owners">
+                        <span v-if="o.fid === e.fid">
+                            <a :href="'/profile/' + o.uid"><span :style="o.name_colour">{{ o.showname }}</span></a>&nbsp;
+                        </span>
+                    </span>
+                </div>
+                <div class="panel-body">
+                    <div class="container">
+                        <div class="row">
+                            <img :src="'/assets/store/' + e.fid + '/screens/1.png'" height="100px" />
+                            <br /><br />
+                            Submitted on {{ e.submit_date }}
+                            <span v-if="e.ld !== 0">
+                                , last updated on {{ e.last_date }}
+                            </span>
+                            <br />
+                            {{ e.downloads }} downloads
+                            <br />
+                            {{ e.views }} views
+                            <br /><br />
+                            {{ e.description }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import moment from 'moment';
+
+    export default {
+        name: 'category-entry-views',
+        props: [
+            'cid',
+            'page',
+            'limit',
+        ],
+        data: function () {
+            return {
+                id: this.cid,
+                from: this.page,
+                to: this.limit,
+                entries: [],
+                owners: [],
+                groupCol: [],
+            }
+        },
+        created: function () {
+            axios.get('/api/rpc/user/getgroupcolours').then(res => {
+                res.data.forEach(cb => {
+                    this.groupCol.push({
+                        'id': cb.id,
+                        'name': cb.name,
+                        'male': cb.colour_m,
+                        'female': cb.colour_f,
+                        'unknown': cb.colour_u,
+                    });
+                });
+            });
+            axios.get('/api/rpc/file/getfilespagepopularview/' + this.id + '/' + this.from + '/' + this.to).then(res => {
+                res.data.forEach(cb => {
+                    axios.get('/api/rpc/owner/getownersoffile/' + cb.id).then(res => {
+                        res.data.forEach(db => {
+                            var showName = '';
+                            var showCol = '';
+
+                            if (db.display_name !== '') {
+                                showName = db.display_name;
+                            }
+                            else {
+                                showName = db.username;
+                            }
+
+                            if (db.name_colour !== '') {
+                                showCol = db.name_colour;
+                            }
+                            else {
+                                this.groupCol.forEach(re => {
+                                    if (re.id === db.perm_id) {
+                                        if (db.gender === 1) {
+                                            showCol = re.male;
+                                        }
+                                        else if (db.gender === 2) {
+                                            showCol = re.female;
+                                        }
+                                        else {
+                                            showCol = re.unknown;
+                                        }
+                                    }
+                                });
+                            }
+
+                            this.owners.push({
+                                'fid': cb.id,
+                                'uid': db.user_id,
+                                'showname': showName,
+                                'username': db.username,
+                                'display_name': db.display_name,
+                                'avatar': db.avatar,
+                                'gender': db.gender,
+                                'name_colour': showCol,
+                            });
+                        });
+                    });
+
+                    this.entries.push({
+                        'fid': cb.id,
+                        'title': cb.title,
+                        'version': cb.version,
+                        'description': cb.description,
+                        'submit_date': moment.unix(cb.submit_date).format("YYYY/MM/DD"),
+                        'ld': cb.last_date,
+                        'last_date': moment.unix(cb.last_date).format("YYYY/MM/DD"),
+                        'views': cb.views,
+                        'downloads': cb.downloads,
+                    });
+                });
+            });
+        }
+    }
+</script>
diff --git a/resources/views/category.blade.php b/resources/views/category.blade.php
index d8437bf..df19640 100644
--- a/resources/views/category.blade.php
+++ b/resources/views/category.blade.php
@@ -3,20 +3,8 @@
 @section('content')
 <div class="container">
     <div class="row">
-        <div class="col-md-8 col-md-offset-2">
-            <div class="panel panel-default">
-                <div class="panel-heading">Dashboard</div>
-
-                <div class="panel-body">
-                    @if (session('status'))
-                        <div class="alert alert-success">
-                            {{ session('status') }}
-                        </div>
-                    @endif
-
-                    You are logged in!
-                </div>
-            </div>
+        <div class="col-md-12">
+            <div><category-entry cid="{{ $cat_id }}" page="0" limit="15" /></div>
         </div>
     </div>
 </div>
diff --git a/routes/web.php b/routes/web.php
index 7ffbda4..c9cd0de 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,7 +20,7 @@ Auth::routes();
 Route::get('/', 'HomeController@index')->name('home');
 Route::get('/upload', 'UploadController@index')->name('upload');
 Route::get('/search', 'SearchController@index')->name('search');
-Route::get('/category/{cat_id}', 'CategoryController@index')->name('category');
+Route::get('/category/{cat_id}', 'CategoryController@category')->name('category');
 Route::get('/entry/{file_id}', 'FileController@entry')->name('entry');
 Route::get('/profile/{user_id}', 'ProfileController@index')->name('profile');
 
@@ -49,10 +49,10 @@ Route::get('/api/rpc/file/getfilechangelog/{id}', 'FileController@getFileChangel
 Route::get('/api/rpc/file/getfilesincategory/{cat_id}', 'FileController@getFilesInCategory');
 
 // Owners
-Route::get('/api/rpc/owner/getowners', 'OwnerController@getOwners');
-Route::get('/api/rpc/owner/getowner/{id}', 'OwnerController@getOwner');
-Route::get('/api/rpc/owner/getownerfile/{file_id}', 'OwnerController@getOwnerFile');
-Route::get('/api/rpc/owner/getowneruser/{user_id}', 'OwnerController@getOwnerUser');
+Route::get('/api/rpc/owner/countownersoffile/{id}', 'OwnerController@countOwnersOfFile');
+Route::get('/api/rpc/owner/getownersoffile/{id}', 'OwnerController@getOwnersOfFile');
+Route::get('/api/rpc/owner/countfilesofowner/{id}', 'OwnerController@countFilesOfOwner');
+Route::get('/api/rpc/owner/getfilesofowner/{id}', 'OwnerController@getFilesOfOwner');
 
 // Permissions
 Route::get('/api/rpc/permission/getpermissionsfrommodule', 'PermissionController@getPermissionsFromModule');