diff --git a/app/Http/Controllers/TopicsController.php b/app/Http/Controllers/TopicsController.php
new file mode 100644
index 0000000..f33e585
--- /dev/null
+++ b/app/Http/Controllers/TopicsController.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Topic;
+
+class TopicsController extends Controller
+{    
+    /**
+     *  Load a single Topic view
+     *
+     * @param  mixed $topic
+     * @return void
+     */
+    public function show(Topic $topic)
+    {
+        return view('topics.show', [
+            'topic' => $topic->load('articles')
+        ]);
+    }
+}
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..6d6bbf4
--- /dev/null
+++ b/public/css/styles.css
@@ -0,0 +1,26 @@
+@font-face {
+    font-family: "mvtyper";
+    src: url("/fonts/mvtyper.ttf");
+}
+
+@font-face {
+    font-family: "Mvaamu";
+    src: url("/fonts/mv-aammu-fk.ttf");
+}
+
+@font-face {
+    font-family: "MvWaheed";
+    src: url("/fonts/mv_waheed.otf");
+}
+
+.MvAamu {
+    font-family: "Mvaamu";
+}
+
+.MvTyper {
+    font-family: "mvtyper";
+}
+
+.MvWaheed {
+    font-family: "MvWaheed";
+}
diff --git a/public/js/app.js b/public/js/app.js
index 2b37010..7926bf2 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -20071,7 +20071,7 @@ var render = function() {
               "a",
               {
                 staticClass: "block w-full lg:flex mb-10 shadow rounded-lg",
-                attrs: { href: "" }
+                attrs: { href: "/article/" + story.id }
               },
               [
                 _c(
diff --git a/resources/js/components/RecentStories.vue b/resources/js/components/RecentStories.vue
index bf0f968..0bbef8c 100644
--- a/resources/js/components/RecentStories.vue
+++ b/resources/js/components/RecentStories.vue
@@ -13,7 +13,7 @@
             <div class="w-full lg:w-2/3">
                 <div v-for="story in recentStories" :key="story.id">
                     <a
-                        href=""
+                        :href="'/article/' + story.id"
                         class="block w-full lg:flex mb-10 shadow rounded-lg"
                     >
                         <div
diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
index 3a9e921..f9916ae 100644
--- a/resources/views/articles/show.blade.php
+++ b/resources/views/articles/show.blade.php
@@ -3,8 +3,8 @@
 @section('content')
 <div>
     <div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
-    <div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
-      style="background-image: url({{$article->featured_image}});"
+    <div class="absolute left-0 bottom-0 w-full h-full z-10"
+      style="background-image: url({{$article->featured_image}}); filter: brightness(50%);"
       ></div>
     <div class="p-4 absolute bottom-0 right-0 z-20">
     <h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;">{{$article->title}}</h2>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 2203a58..a6d6984 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="/css/app.css">
-    <style>
-        @font-face {
-            font-family: "mvtyper";
-            src: url("/fonts/mvtyper.ttf");
-        }
-
-        @font-face {
-            font-family: "Mvaamu";
-            src: url("/fonts/mv-aammu-fk.ttf");
-        }
-
-        @font-face {
-            font-family: "MvWaheed";
-            src: url("/fonts/mv_waheed.otf");
-        }
-        .MvAamu {
-            font-family: "Mvaamu";
-        }
-
-        .MvTyper {
-            font-family: "mvtyper";
-        }
-
-        .MvWaheed {
-            font-family: "MvWaheed";
-        }
-    </style>
+    <link rel="stylesheet" href="/css/styles.css">
 
 
 </head>
diff --git a/resources/views/topics/show.blade.php b/resources/views/topics/show.blade.php
new file mode 100644
index 0000000..4dfe6d2
--- /dev/null
+++ b/resources/views/topics/show.blade.php
@@ -0,0 +1,59 @@
+@extends('layouts.app')
+
+@section('content')
+<div>
+    <section class="mx-auto max-w-6xl py-5">
+        <div class="flex flex-col">
+            <div class="flex flex-col md:flex-row justify-center items-center">
+                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
+            </div>
+            <div class="flex flex-col md:flex-row justify-center items-center">
+                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
+                    <div slot="middle-right" class="max-w-xs">
+                        <div class="flex flex-col justify-center h-48 p-3">
+                            <div class="text-5xl font-bold text-gray-800 mb-2 text-center MvAamu">{{$topic->name}}</div>
+                            <div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
+                                {{$topic->name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
+
+                @foreach ($topic->articles as $article)
+                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">
+
+
+                    <div slot="bottom-left" class="max-w-xs">
+                        <div class="p-5 shadow-md m-2 mt-4">
+
+                            <a href="{{route('articles.show', $article->id)}}">
+                                <img class="object-scale-down h-30" src="{{$article->featured_image}}"
+                                    alt="{{$article->meta['title']}}">
+                            </a>
+
+                            <div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
+                                {{$article->source->name}}</div>
+
+                            <a href="{{route('articles.show', $article->id)}}">
+                                <div class="text-md font-bold leading-7 mb-2 MvTyper text-right hover:underline">
+                                    {{$article->title}}</div>
+                            </a>
+
+                        </div>
+                    </div>
+
+
+                </div>
+
+                @endforeach
+
+
+
+            </div>
+        </div>
+    </section>
+</div>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 1a4294a..16562cc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +4,8 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Article;
 use App\Http\Controllers\ArticlesController;
+use App\Http\Controllers\TopicsController;
+
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -20,6 +22,7 @@ Route::get('/', function(){
 });
 
 Route::get('/article/{article:id}', [ArticlesController::class,'show'])->name('articles.show');
+Route::get('/topic/{topic:slug}', [TopicsController::class,'show'])->name('topics.show');
 
 Route::get('/ogimage', function(Request $request) {