diff --git a/resources/js/components/TodaysPick.vue b/resources/js/components/TodaysPick.vue
index 036aed2..7d8c178 100644
--- a/resources/js/components/TodaysPick.vue
+++ b/resources/js/components/TodaysPick.vue
@@ -14,72 +14,78 @@
         >
             <!-- sub-main posts -->
             <div class="md:w-4/7">
-                <div
-                    v-for="subarticle in subarticles"
-                    :key="subarticle.id"
-                    class="rounded w-full flex flex-col md:flex-row mb-10"
-                >
-                    <div class="bg-white rounded px-4">
-                        <div
-                            class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right leading-8 MvAamu"
-                            v-text="subarticle.title"
-                            style="direction:rtl;"
-                        ></div>
+                <div v-for="subarticle in subarticles" :key="subarticle.id">
+                    <router-link
+                        :to="{
+                            name: 'article.show',
+                            params: { id: subarticle.id }
+                        }"
+                        class="rounded w-full flex flex-col md:flex-row mb-10"
+                    >
+                        <div class="bg-white rounded px-4">
+                            <div
+                                class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right leading-8 MvAamu hover:underline"
+                                v-text="subarticle.title"
+                                style="direction:rtl;"
+                            ></div>
 
-                        <div class="flex justify-end items-center">
-                            <div>
-                                <p
-                                    class="font-semibold text-gray-700 text-sm capitalize MvTyper"
-                                    v-text="subarticle.source.name"
-                                ></p>
+                            <div class="flex justify-end items-center">
+                                <div>
+                                    <p
+                                        class="font-semibold text-gray-700 text-sm capitalize MvTyper"
+                                        v-text="subarticle.source.name"
+                                    ></p>
+                                </div>
+
+                                <img
+                                    :src="subarticle.source.logo"
+                                    class="h-10 w-10 rounded-full ml-1 object-cover"
+                                />
                             </div>
 
-                            <img
-                                :src="subarticle.source.logo"
-                                class="h-10 w-10 rounded-full ml-1 object-cover"
-                            />
-                        </div>
-
-                        <div
-                            class="text-gray-600 text-md mt-1 flex justify-end items-center"
-                        >
-                            <svg
-                                class="h-4 w-4"
-                                viewBox="0 0 443.294 443.294"
-                                fill="currentColor"
-                                xmlns="http://www.w3.org/2000/svg"
+                            <div
+                                class="text-gray-600 text-md mt-1 flex justify-end items-center"
                             >
-                                <path
-                                    d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
-                                />
-                                <path
-                                    d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
-                                />
-                            </svg>
-                            <span
-                                class="ml-1"
-                                v-text="subarticle.readtime"
-                            ></span>
+                                <svg
+                                    class="h-4 w-4"
+                                    viewBox="0 0 443.294 443.294"
+                                    fill="currentColor"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                        d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
+                                    />
+                                    <path
+                                        d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
+                                    />
+                                </svg>
+                                <span
+                                    class="ml-1"
+                                    v-text="subarticle.readtime"
+                                ></span>
 
-                            <p class="text-gray-600 text-sm text-right mb-2">
-                                &#8210;
-                                {{
-                                    subarticle.published_date
-                                        | moment("calendar")
-                                }}
-                            </p>
+                                <p
+                                    class="text-gray-600 text-sm text-right mb-2"
+                                >
+                                    &#8210;
+                                    {{
+                                        subarticle.published_date
+                                            | moment("calendar")
+                                    }}
+                                </p>
+                            </div>
+
+                            <p
+                                class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
+                                style="direction:rtl;"
+                                v-text="subarticle.body[0]"
+                            ></p>
                         </div>
-
-                        <p
-                            class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
-                            style="direction:rtl;"
-                            v-text="subarticle.body[0]"
-                        ></p>
-                    </div>
-                    <img
-                        :src="subarticle.featured_image"
-                        class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
-                    />
+                        <img
+                            :src="subarticle.featured_image"
+                            class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
+                        />
+                    </router-link>
                 </div>
             </div>
 
@@ -88,20 +94,24 @@
                 class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
                 v-if="article"
             >
-                <a href="#">
+                <router-link
+                    :to="{ name: 'article.show', params: { id: article.id } }"
+                >
                     <img
                         :src="article.featured_image"
                         class="rounded-md object-cover w-full h-3/4"
                     />
-                </a>
+                </router-link>
 
-                <a href="#">
+                <router-link
+                    :to="{ name: 'article.show', params: { id: article.id } }"
+                >
                     <h1
                         class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
                         style="direction:rtl;"
                         v-text="article.title"
                     ></h1>
-                </a>
+                </router-link>
 
                 <div class="flex justify-end items-center">
                     <div>
diff --git a/resources/js/pages/Article.vue b/resources/js/pages/Article.vue
index ca1a5d7..8c5d69a 100644
--- a/resources/js/pages/Article.vue
+++ b/resources/js/pages/Article.vue
@@ -4,7 +4,7 @@
         <div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
           :style="{'background-image':'url(' + article.featured_image + ')'}"
           ></div>
-        <div class="p-4 absolute bottom-0 left-0 z-20">
+        <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;" v-text="article.title"></h2>
           <div class="flex justify-end mt-3">
             <img v-if="article.source" :src="article.source.logo"