diff --git a/resources/js/components/TodaysPick.vue b/resources/js/components/TodaysPick.vue
index 9683630..036aed2 100644
--- a/resources/js/components/TodaysPick.vue
+++ b/resources/js/components/TodaysPick.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <div>
+        <div class="py-6 flex justify-center lg:justify-end md:justify-end">
             <h3
-                class="text-gray-800 font-bold text-3xl mb-2 MvAamu"
+                class="text-gray-800 font-bold text-3xl MvAamu"
                 style="direction: rtl;"
             >
                 މިއަދުގެ ޙުލާސާ
@@ -27,7 +27,7 @@
                         ></div>
 
                         <div class="flex justify-end items-center">
-                             <div>
+                            <div>
                                 <p
                                     class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                                     v-text="subarticle.source.name"
@@ -38,8 +38,6 @@
                                 :src="subarticle.source.logo"
                                 class="h-10 w-10 rounded-full ml-1 object-cover"
                             />
-
-                           
                         </div>
 
                         <div
@@ -58,14 +56,24 @@
                                     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>
 
-                            <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>
                         </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.slice(0, 150)"
+                            v-text="subarticle.body[0]"
                         ></p>
                     </div>
                     <img
@@ -96,7 +104,7 @@
                 </a>
 
                 <div class="flex justify-end items-center">
-                     <div>
+                    <div>
                         <p
                             class="font-semibold text-gray-700 text-sm capitalize MvTyper"
                             v-text="article.source.name"
@@ -107,18 +115,13 @@
                         :src="article.source.logo"
                         class="h-10 w-10 rounded-full ml-1 object-cover"
                     />
-
-                   
                 </div>
 
                 <div
                     class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
                 >
-                    <p class="text-gray-600 text-right">
-                        {{ article.published_date | moment("calendar") }}
-                        &#8210;
-                    </p>
                     <span class="mr-1 ml-1" v-text="article.readtime"></span>
+
                     <svg
                         class="h-4 w-4"
                         viewBox="0 0 443.294 443.294"
@@ -132,6 +135,10 @@
                             d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
                         />
                     </svg>
+                    <p class="ml-1 text-gray-600 text-right">
+                        &#8210;
+                        {{ article.published_date | moment("calendar") }}
+                    </p>
                 </div>
             </div>
         </div>