diff --git a/public/images/marker-icon-green.png b/public/images/marker-icon-green.png
new file mode 100644
index 0000000..56db5ea
Binary files /dev/null and b/public/images/marker-icon-green.png differ
diff --git a/public/images/marker-shadow.png b/public/images/marker-shadow.png
new file mode 100644
index 0000000..84c5808
Binary files /dev/null and b/public/images/marker-shadow.png differ
diff --git a/resources/lang/en/outlet.php b/resources/lang/en/outlet.php
index 86dcf85..18af16e 100644
--- a/resources/lang/en/outlet.php
+++ b/resources/lang/en/outlet.php
@@ -28,8 +28,10 @@ return [
     'undeleteable'   => 'Outlet data cannot be deleted.',
 
     // Attributes
-    'name'      => 'Outlet Name',
-    'address'   => 'Outlet Address',
-    'latitude'  => 'Latitude',
-    'longitude' => 'Longitude',
+    'name'       => 'Outlet Name',
+    'address'    => 'Outlet Address',
+    'latitude'   => 'Latitude',
+    'longitude'  => 'Longitude',
+    'location'   => 'Location',
+    'coordinate' => 'Coordinate',
 ];
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 47f604f..615791f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -9,15 +9,13 @@
 
     <title>{{ config('app.name', 'Laravel') }}</title>
 
-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @yield('styles')
 </head>
 <body>
     <div id="app">
@@ -79,5 +77,8 @@
             @yield('content')
         </main>
     </div>
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}"></script>
+    @stack('scripts')
 </body>
 </html>
diff --git a/resources/views/outlets/show.blade.php b/resources/views/outlets/show.blade.php
index 9f11dce..13f7774 100644
--- a/resources/views/outlets/show.blade.php
+++ b/resources/views/outlets/show.blade.php
@@ -25,5 +25,53 @@
             </div>
         </div>
     </div>
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">{{ trans('outlet.location') }}</div>
+            @if ($outlet->coordinate)
+            <div class="card-body" id="mapid"></div>
+            @else
+            <div class="card-body">{{ __('outlet.no_coordinate') }}</div>
+            @endif
+        </div>
+    </div>
 </div>
 @endsection
+
+@section('styles')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+    crossorigin=""/>
+
+<style>
+    #mapid { height: 400px; }
+    .popup-content-row { margin: 6px 0; }
+</style>
+@endsection
+@push('scripts')
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+
+<script>
+    var map = L.map('mapid').setView([{{ $outlet->latitude }}, {{ $outlet->longitude }}], 16);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    var myIcon = L.icon({
+        iconUrl: "{{ url('images/marker-icon-green.png') }}",
+        shadowUrl: "{{ url('images/marker-shadow.png') }}",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
+        className: "marker-icon-green",
+    });
+
+    L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}], { icon: myIcon }).addTo(map)
+        .bindPopup('{!! $outlet->map_popup_content !!}');
+</script>
+@endpush
