diff --git a/app/Http/Controllers/Homepage/NewsController.php b/app/Http/Controllers/Homepage/NewsController.php
new file mode 100644
index 0000000..9c00802
--- /dev/null
+++ b/app/Http/Controllers/Homepage/NewsController.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Controllers\Homepage;
+
+use App\Http\Controllers\Controller;
+use App\Models\News;
+use Illuminate\Http\Request;
+
+class NewsController extends Controller
+{
+    public function index(Request $request){
+
+        $data = [
+            'title' => 'Berita',
+            'page' => 'news',
+        ];
+
+        $search = $request->input('search', null);
+
+        if($search){
+            $data['news'] = News::where('title', 'LIKE', "%{$search}%")
+            // ->orWhere('content', 'LIKE', "%{$search}%")
+            ->latest()
+            ->simplePaginate(12);
+        }else{
+            $data['news'] = News::latest()->simplePaginate(12);
+        }
+
+        return view('homepage.news.index', $data);
+    }
+
+    public function read($slug){
+        $news = News::where('slug', $slug)->first();
+        $news->increment('views', 1);
+
+        $data = [
+            'title' => 'Berita',
+            'page' => 'news',
+            'news' => $news,
+            'popularNews' => News::orderBy('views', 'desc')->take(5)->get(),
+            'otherNews' => News::orderByDesc('id')->where('id', '!=', $news->id)->take(3)->get()
+        ];
+
+        return view('homepage.news.read', $data);
+
+    }
+}
diff --git a/app/Models/News.php b/app/Models/News.php
index ad99e9a..a33717b 100644
--- a/app/Models/News.php
+++ b/app/Models/News.php
@@ -18,6 +18,11 @@ class News extends Model
         'link',
         'tag',
         'category',
+        'views',
         'author_id'
     ];
+
+    public function author(){
+        return $this->belongsTo(User::class, 'author_id', 'id');
+    }
 }
diff --git a/public/assets/homepage/css/custom.css b/public/assets/homepage/css/custom.css
index b02b1e1..be4d6b3 100644
--- a/public/assets/homepage/css/custom.css
+++ b/public/assets/homepage/css/custom.css
@@ -19,6 +19,12 @@ .information-img {
     border-radius: 8px;
 }
 
+.popular-post-img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+}
+
 /* .information-img {
     width: 100%;
     height: 200px;
diff --git a/resources/views/homepage/index.blade.php b/resources/views/homepage/index.blade.php
index f88a070..ab6ca54 100644
--- a/resources/views/homepage/index.blade.php
+++ b/resources/views/homepage/index.blade.php
@@ -68,15 +68,15 @@
                             <li class="grid-item">
                                 <div class="card bg-transparent border-0 h-100">
                                     <div class="blog-image position-relative overflow-hidden border-radius-4px">
-                                        <a href="demo-elearning-blog-single-simple.html">
-                                            <img src="{{display_image($item->image, 'news')}}" alt="" class="information-img" />
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
+                                            <img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
                                         </a>
                                     </div>
                                     <div class="card-body px-0 pt-30px pb-30px">
-                                        <span class="fs-13 text-uppercase mb-5px d-block"><a href="blog-grid.html" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
-                                        <a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
+                                        <span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
                                         <p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
-                                        <a href="demo-elearning-blog-single-simple.html" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
                                     </div>
                                 </div>
                             </li>
@@ -116,7 +116,7 @@
                                 <div class="card bg-transparent border-0 h-100">
                                     <div class="blog-image position-relative overflow-hidden border-radius-4px">
                                         <a href="demo-elearning-blog-single-simple.html">
-                                            <img src="{{display_image($item->image, 'news', 'simedkom-logo-circle.png')}}" alt="" class="information-img" />
+                                            <img src="{{asset(display_image($item->image, 'news', 'simedkom-logo-circle.png'))}}" alt="" class="information-img" />
                                         </a>
                                     </div>
                                     <div class="card-body px-0 pt-30px pb-30px">
diff --git a/resources/views/homepage/news/index.blade.php b/resources/views/homepage/news/index.blade.php
new file mode 100644
index 0000000..a8629f4
--- /dev/null
+++ b/resources/views/homepage/news/index.blade.php
@@ -0,0 +1,58 @@
+@include('partials.homepage.head')
+    <body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
+        @include('partials.homepage.header')
+        <!-- start page title -->
+        <section class="half-section page-title-center-alignment cover-background top-space-margin">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center position-relative page-title-large">
+                        <h1 class="d-inline-block fw-600 ls-minus-1px text-dark-gray mb-15px">Berita</h1>
+                    </div>
+                    <div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
+                        <ul>
+                            <li><a href="{{route('homepage.landing')}}">Beranda</a></li>
+                            <li><a href="{{route('homepage.news.index')}}">Berita</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end page title -->
+        <!-- start section -->
+        <section class="pt-0 ps-15 pe-15 xl-ps-2 xl-pe-2 lg-ps-2 lg-pe-2 sm-mx-0">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
+                        {{-- <ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> --}}
+                            <li class="grid-sizer"></li>
+                            @foreach ($news as $item)
+                                <!-- start blog item -->
+                            <li class="grid-item">
+                                <div class="card bg-transparent border-0 h-100">
+                                    <div class="blog-image position-relative overflow-hidden border-radius-4px">
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
+                                            <img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
+                                        </a>
+                                    </div>
+                                    <div class="card-body px-0 pt-30px pb-30px">
+                                        <span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
+                                        <p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
+                                    </div>
+                                </div>
+                            </li>
+                            <!-- end blog item -->
+                            @endforeach
+                        </ul>
+                    </div>
+                    <div class="col-12 mt-2 d-flex justify-content-center">
+                        {{$news->links()}}
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start footer -->
+@include('partials.homepage.footer')
diff --git a/resources/views/homepage/news/read.blade.php b/resources/views/homepage/news/read.blade.php
new file mode 100644
index 0000000..c3a3db8
--- /dev/null
+++ b/resources/views/homepage/news/read.blade.php
@@ -0,0 +1,178 @@
+@include('partials.homepage.head')
+    <body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
+        @include('partials.homepage.header')
+        <!-- start section -->
+        <section class="top-space-margin right-side-bar">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
+                        <!-- start blog details  -->
+                        <div class="col-12 blog-details mb-12">
+                            <div class="entry-meta mb-20px fs-15">
+                                <span><i class="text-dark-gray feather icon-feather-calendar"></i><a href="javascript:void(0);">{{idn_date($news->created_at, 'd F Y')}}</a></span>
+                                <span><i class="text-dark-gray feather icon-feather-user"></i><a href="javascript:void(0);">{{$news->author->name}}</a></span>
+                                <span><i class="text-dark-gray feather icon-feather-eye"></i><a href="javascript:void(0);">{{$news->views}}</a></span>
+                                {{-- <span><i class="text-dark-gray feather icon-feather-eye"></i><a href="javascript:void(0);">{{$news->views}}</a></span> --}}
+                            </div>
+                            <h5 class="text-dark-gray fw-600 w-80 sm-w-100 mb-6">{{$news->title}}</h5>
+                            <img src="{{asset(display_image($news->image, 'news'))}}" alt="Gambar {{$news->title}}" class="w-100 border-radius-6px mb-7">
+                            {!!$news->content!!}
+                        </div>
+                        <div class="col-12">
+                            <div class="row mb-50px sm-mb-30px">
+                                <div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
+                                    <a href="javascript:void(0);">{{$news->tag}}</a>
+                                </div>
+                            </div>
+                            <div class="row justify-content-center">
+                                <div class="col-12 text-center elements-social social-icon-style-04">
+                                    <ul class="medium-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"><span></span></i></a></li>
+                                        <li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></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>
+                        <!-- end blog details -->
+                    </div>
+                    <!-- start sidebar -->
+                    <aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
+                        <div class="mb-15 md-mb-50px xs-mb-35px">
+                            <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Berita terpopuler</div>
+                            <ul class="popular-post-sidebar position-relative">
+                                @foreach ($popularNews as $item)
+                                <li class="d-flex align-items-center">
+                                    <figure>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}"><img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="popular-post-img"></a>
+                                    </figure>
+                                    <div class="col media-body">
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">{{shorten_text($item->title, 30)}}</a>
+                                        <div><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="d-inline-block fs-15">{{idn_date($item->created_at, 'd F y')}}</a></div>
+                                    </div>
+                                </li>
+                                @endforeach
+                            </ul>
+                        </div>
+                        <div class="mb-17 md-mb-50px xs-mb-35px">
+                            <div class="bg-white box-shadow-extra-large p-14 xl-p-10 newsletter-style-05">
+                                <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-20px pb-15px position-relative">Cari Berita</div>
+                                <p class="fs-15 lh-24">Temukan informasi yang ingin Anda ketahui.</p>
+                                <form action="{{route('homepage.news.index')}}" method="get" class="position-relative">
+                                    <input class="w-100 fs-15 input-small form-control box-shadow-medium-bottom border-radius-0px text-center required mb-10px" type="text" name="search" placeholder="Masukan kata kunci" />
+                                    <button type="submit" class="btn btn-small btn-dark-gray w-100 btn-box-shadow" aria-label="Cari">Cari</button>
+                                    <div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
+                                </form>
+                            </div>
+                        </div>
+                        <div class="mb-15 md-mb-50px xs-mb-35px elements-social social-icon-style-10">
+                            <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Tetap Terkoneksi</div>
+                            <div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0">
+                                <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="facebook text-dark-gray" href="https://www.facebook.com/" target="_blank">
+                                        <i class="fa-brands fa-facebook-f fs-18 me-10px"></i>
+                                        <span class="fw-500">Facebook</span>
+                                    </a>
+                                </div>
+                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="dribbble text-dark-gray" href="http://www.dribbble.com" target="_blank">
+                                        <i class="fa-brands fa-dribbble fs-18 me-10px"></i>
+                                        <span class="fw-500">Dribbble</span>
+                                    </a>
+                                </div>
+                                <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="twitter text-dark-gray" href="http://www.twitter.com" target="_blank">
+                                        <i class="fa-brands fa-twitter fs-18 me-10px"></i>
+                                        <span class="fw-500">Twitter</span>
+                                    </a>
+                                </div>
+                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="youtube text-dark-gray" href="http://www.youtube.com" target="_blank">
+                                        <i class="fa-brands fa-youtube fs-18 me-10px"></i>
+                                        <span class="fw-500">Youtube</span>
+                                    </a>
+                                </div>
+                                <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="instagram text-dark-gray" href="http://www.instagram.com" target="_blank">
+                                        <i class="fa-brands fa-instagram fs-18 me-10px"></i>
+                                        <span class="fw-500">Instagram</span>
+                                    </a>
+                                </div>
+                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="vimeo text-dark-gray" href="https://vimeo.com/" target="_blank">
+                                        <i class="fa-brands fa-vimeo-v fs-18 me-10px"></i>
+                                        <span class="fw-500">Vimeo</span>
+                                    </a>
+                                </div>
+                                <div class="col border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="linkedin text-dark-gray" href="https://www.linkedin.com/" target="_blank">
+                                        <i class="fa-brands fa-linkedin-in fs-18 me-10px"></i>
+                                        <span class="fw-500">Linkedin</span>
+                                    </a>
+                                </div>
+                                <div class="col ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="behance text-dark-gray" href="http://www.behance.com/" target="_blank">
+                                        <i class="fa-brands fa-behance fs-18 me-10px"></i>
+                                        <span class="fw-500 fs-16">Behance</span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mb-15 md-mb-50px xs-mb-35px">
+                            <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Tag</div>
+                            <div class="tag-cloud">
+                                <a href="javascript:void(0);">{{$news->tag}}</a>
+                            </div>
+                        </div>
+                    </aside>
+                    <!-- end sidebar -->
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start section -->
+        <section class="bg-very-light-gray">
+            <div class="container">
+                <div class="row justify-content-center mb-2">
+                    <div class="col-12 col-lg-7 text-center">
+                        <span class="fs-15 fw-500 text-uppercase d-inline-block">Eksplorasi</span>
+                        <h4 class="text-dark-gray fw-600">Baca berita lainnya</h4>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
+                            <li class="grid-sizer"></li>
+                            @forelse ($otherNews as $item)
+                            <!-- start blog item -->
+                            <li class="grid-item">
+                                <div class="card bg-transparent border-0 h-100">
+                                    <div class="blog-image position-relative overflow-hidden border-radius-4px">
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
+                                            <img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
+                                        </a>
+                                    </div>
+                                    <div class="card-body px-0 pt-30px pb-30px">
+                                        <span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
+                                        <p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
+                                        <a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
+                                    </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')
diff --git a/resources/views/partials/homepage/header.blade.php b/resources/views/partials/homepage/header.blade.php
index f8988c6..446c413 100644
--- a/resources/views/partials/homepage/header.blade.php
+++ b/resources/views/partials/homepage/header.blade.php
@@ -32,8 +32,8 @@
                 </button>
                 <div class="collapse navbar-collapse" id="navbarNav">
                     <ul class="navbar-nav">
-                        <li class="nav-item"><a href="demo-hosting.html" class="nav-link fs-25 {{$page === 'landing' ? 'active-menu' : ''}}">Beranda</a></li>
-                        <li class="nav-item"><a href="demo-hosting-about.html" class="nav-link fs-25">Berita</a></li>
+                        <li class="nav-item"><a href="{{route('homepage.landing')}}" class="nav-link fs-25 {{$page === 'landing' ? 'active-menu' : ''}}">Beranda</a></li>
+                        <li class="nav-item"><a href="{{route('homepage.news.index')}}" class="nav-link fs-25 {{$page === 'news' ? 'active-menu' : ''}}">Berita</a></li>
                         <li class="nav-item"><a href="demo-hosting-hosting.html" class="nav-link fs-25">Pengumuman</a></li>
                         <li class="nav-item"><a href="demo-hosting-domain.html" class="nav-link fs-25">Tentang Kami</a></li>
                         <li class="nav-item"><a href="demo-hosting-pricing.html" class="nav-link fs-25">Kontak</a></li>
diff --git a/routes/web.php b/routes/web.php
index d5b31ad..038a906 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,11 +25,17 @@
 use App\Http\Controllers\Dashboard\SubClassificationController;
 use App\Http\Controllers\Dashboard\SubLocationController;
 use App\Http\Controllers\Dashboard\UserController;
+use App\Http\Controllers\Homepage\NewsController as HomepageNewsController;
 use App\Http\Controllers\Homepage\LandingPageController;
 use Illuminate\Support\Facades\Route;
 
 Route::name('homepage.')->group(function(){
-    Route::get('/', [LandingPageController::class, 'index']);
+    Route::get('/', [LandingPageController::class, 'index'])->name('landing');
+
+    Route::prefix('news')->name('news.')->controller(HomepageNewsController::class)->group(function(){
+        Route::get('/', 'index')->name('index');
+        Route::get('/{slug}', 'read')->name('read');
+    });
 });
 
 Route::prefix('auth')->group(function(){