diff --git a/app/Http/Controllers/Homepage/AnnouncementController.php b/app/Http/Controllers/Homepage/AnnouncementController.php
index 4212df0..fac8a54 100644
--- a/app/Http/Controllers/Homepage/AnnouncementController.php
+++ b/app/Http/Controllers/Homepage/AnnouncementController.php
@@ -37,8 +37,7 @@ public function read($slug){
             'title' => 'Pengumuman',
             'page' => 'announcements',
             'announcement' => $announcement,
-            'popularAnnouncements' => News::where('category', '1')->orderBy('views', 'desc')->take(5)->get(),
-            'otherAnnouncements' => News::where('category', '1')->orderByDesc('id')->where('id', '!=', $announcement->id)->take(3)->get()
+            'otherAnnouncements' => News::where('category', '1')->orderByDesc('id')->where('id', '!=', $announcement->id)->take(4)->get()
         ];
 
         return view('homepage.announcements.read', $data);
diff --git a/public/assets/homepage/css/custom.css b/public/assets/homepage/css/custom.css
index be4d6b3..e9bc04f 100644
--- a/public/assets/homepage/css/custom.css
+++ b/public/assets/homepage/css/custom.css
@@ -40,3 +40,15 @@ .information-title{
 .information-desc{
     height: 3.5rem;
 }
+
+.detail-announcement-img {
+    width: 100%;
+    height: 500px;
+    object-fit: contain;
+    border-radius: 8px;
+    background-color: #F7F7F7;
+}
+
+.announcement-title{
+    height: 7rem;
+}
diff --git a/resources/views/homepage/announcements/index.blade.php b/resources/views/homepage/announcements/index.blade.php
index 15c5d36..8387f64 100644
--- a/resources/views/homepage/announcements/index.blade.php
+++ b/resources/views/homepage/announcements/index.blade.php
@@ -26,7 +26,7 @@
                         <ul class="blog-side-image blog-wrapper grid-loading grid grid-3col xxl-grid-2col xl-grid-2col lg-grid-2col md-grid-1col sm-grid-1col xs-grid-1col gutter-extra-large">
                             <li class="grid-sizer"></li>
                             @forelse ($announcements as $item)
-                                <!-- start blog item -->
+                            <!-- start blog item -->
                             <li class="grid-item">
                                 <div class="blog-box d-md-flex d-block flex-row h-100 border-radius-6px overflow-hidden box-shadow-extra-large">
                                     <div class="blog-image w-50 sm-w-100 cover-background" style="background-image: url({{asset(display_image($item->image, 'news', 'simedkom-logo-circle.png'))}}); {{str_contains(display_image($item->image, 'news', 'simedkom-logo-circle.png'), 'assets') ? 'background-size: 80%;' : ''}}">
@@ -34,7 +34,7 @@
                                     </div>
                                     <div class="blog-content w-50 sm-w-100 pt-50px pb-40px ps-40px pe-40px xl-p-30px bg-white d-flex flex-column justify-content-center align-items-start last-paragraph-no-margin">
                                         <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="categories-btn bg-dark-gray text-white text-uppercase fw-500 mb-30px">{{idn_date($item->created_at, 'd F Y')}}</a>
-                                        <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="card-title text-dark-gray text-dark-gray-hover mb-5px fw-600 fs-18 lh-28">{{shorten_text($item->title, 80)}}</a>
+                                        <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="card-title text-dark-gray text-dark-gray-hover mb-5px fw-600 fs-18 lh-28 announcement-title">{{shorten_text($item->title, 80)}}</a>
                                         <div class="mt-15px"><span class="separator bg-dark-gray"></span><a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="text-dark-gray text-dark-gray-hover d-inline-block fs-15 fw-500 fw-500">Baca Selengkapnya</a></div>
                                     </div>
                                 </div>
diff --git a/resources/views/homepage/announcements/read.blade.php b/resources/views/homepage/announcements/read.blade.php
index eb1a0f2..b589d0c 100644
--- a/resources/views/homepage/announcements/read.blade.php
+++ b/resources/views/homepage/announcements/read.blade.php
@@ -6,8 +6,13 @@
             <div class="container">
                 <div class="row justify-content-center">
                     <div class="col-lg-10 text-center">
-                        <span class="fs-18 mb-30px d-inline-block sm-mb-20px">By <a href="#" class="text-dark-gray text-decoration-line-bottom">Jackson</a> in <a href="#" class="text-dark-gray text-decoration-line-bottom">Marketing</a> on 26 November 2021</span>
-                        <h1 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0">Marketing tips and tricks for your creative website.</h1>
+                        <span class="fs-18 mb-30px d-inline-block sm-mb-20px">
+                            <span class="mr-2"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-week mb-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M7 14h.013" /><path d="M10.01 14h.005" /><path d="M13.01 14h.005" /><path d="M16.015 14h.005" /><path d="M13.015 17h.005" /><path d="M7.01 17h.005" /><path d="M10.01 17h.005" /></svg> {{idn_date($announcement->created_at, 'd F Y')}}</span>
+                            <span>
+                                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye mb-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg> {{$announcement->views}}
+                            </span>
+                        </span>
+                        <h1 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0">{{$announcement->title}}</h1>
                     </div>
                 </div>
             </div>
@@ -17,7 +22,7 @@
         <section class="py-0 ps-13 pe-13 lg-ps-4 lg-pe-4 sm-px-0">
             <div class="container-fluid">
                 <div class="row justify-content-center">
-                    <div class="col-12"><img src="{{asset(display_image($announcement->image, 'news'))}}" class="w-100" alt=""></div>
+                    <div class="col-12"><img src="{{asset(display_image($announcement->image, 'news'))}}" class="detail-announcement-img" alt=""></div>
                 </div>
             </div>
         </section>
@@ -28,21 +33,8 @@
                 <div class="row justify-content-center">
                     <div class="col-lg-10">
                         <div class="row">
-                            {{-- <div class="col-lg-3 col-md-4 text-center sm-mb-30px">
-                                <div class="pb-20px">
-                                    <img src="https://via.placeholder.com/150x150" class="rounded-circle w-130px mb-20px" alt="">
-                                    <span class="d-block lh-22">Words by</span>
-                                    <a href="blog-grid.html" class="text-dark-gray alt-font fw-500 text-uppercase">Jackson smith</a>
-                                </div>
-                                <div class="h-3px w-100 bg-dark-gray mb-20px"></div>
-                                <ul class="d-flex list-unstyled justify-content-center">
-                                    <li class="me-25px"><a href="#" class="text-uppercase alt-font fs-13"><i class="feather icon-feather-message-circle me-5px icon-small align-middle"></i>Comment</a></li>
-                                    <li><a href="#" class="text-uppercase alt-font fs-13"><i class="feather icon-feather-heart me-5px icon-small align-middle"></i>Like</a></li>
-                                </ul>
-                            </div> --}}
                             <div class="col-md-12 text-md-start">
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <span class="text-dark-gray text-decoration-line-bottom">inventore veritatis et quasi</span> architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia.</p>
+                                {!!$announcement->content!!}
                             </div>
                         </div>
                     </div>
@@ -50,5 +42,72 @@
             </div>
         </section>
         <!-- end section -->
+        <!-- start section -->
+        <section class="half-section pt-0">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-10">
+                        @if (filled($announcement->tag))
+                        <div class="row mb-30px">
+                            <div class="tag-cloud col-md-9 text-center text-md-start sm-mb-15px">
+                                <a href="javascript: void(0);">{{$announcement->tag}}</a>
+                            </div>
+                        </div>
+                        @endif
+                        <div class="row justify-content-center">
+                            <div class="col-12 text-center elements-social social-icon-style-04">
+                                <ul class="large-icon dark">
+                                    <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
+                                    <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
+                                    <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
+                                    <li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
+                                    <li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start section -->
+        <section class="bg-very-light-gray">
+            <div class="container">
+                <div class="row justify-content-center mb-1">
+                    <div class="col-lg-7 text-center">
+                        <span class="alt-font fw-500 text-uppercase d-inline-block">Eksplorasi</span>
+                        <h5 class="alt-font text-dark-gray fw-500">Pengumuman lainnya</h5>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12 px-0">
+                        <ul class="blog-grid blog-wrapper grid-loading grid grid-2col xl-grid-2col lg-grid-2 col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large">
+                            <li class="grid-sizer"></li>
+                            @forelse ($otherAnnouncements as $item)
+                            <!-- start blog item -->
+                            <li class="grid-item">
+                                <div class="blog-box d-md-flex d-block flex-row h-100 border-radius-6px overflow-hidden box-shadow-extra-large">
+                                    <div class="blog-image w-50 sm-w-100 cover-background" style="background-image: url({{asset(display_image($item->image, 'news', 'simedkom-logo-circle.png'))}}); {{str_contains(display_image($item->image, 'news', 'simedkom-logo-circle.png'), 'assets') ? 'background-size: 80%;' : ''}}">
+                                        <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="blog-post-image-overlay"></a>
+                                    </div>
+                                    <div class="blog-content w-50 sm-w-100 pt-50px pb-40px ps-40px pe-40px xl-p-30px bg-white d-flex flex-column justify-content-center align-items-start last-paragraph-no-margin">
+                                        <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="categories-btn bg-dark-gray text-white text-uppercase fw-500 mb-30px">{{idn_date($item->created_at, 'd F Y')}}</a>
+                                        <a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="card-title text-dark-gray text-dark-gray-hover mb-5px fw-600 fs-18 lh-28 announcement-title">{{shorten_text($item->title, 60)}}</a>
+                                        <div class="mt-15px"><span class="separator bg-dark-gray"></span><a href="{{route('homepage.announcements.read', ['slug' => $item->slug])}}" class="text-dark-gray text-dark-gray-hover d-inline-block fs-15 fw-500 fw-500">Baca Selengkapnya</a></div>
+                                    </div>
+                                </div>
+                            </li>
+                            <!-- end blog item -->
+                            @empty
+                            <div style="text-align: center">
+                                Tidak ada berita lainnya
+                            </div>
+                            @endforelse
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
         <!-- start footer -->
 @include('partials.homepage.footer')