diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 18caff8..1103426 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -50,7 +50,7 @@ function Header() {
       </div>
       <div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}>
         {dropdown &&
-          <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
+          <a href="/" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
         }
         <a href="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a>
         <a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
diff --git a/src/pages/BestLocations/index.tsx b/src/pages/BestLocations/index.tsx
index fc75777..34a0894 100644
--- a/src/pages/BestLocations/index.tsx
+++ b/src/pages/BestLocations/index.tsx
@@ -130,24 +130,28 @@ function BestLocation() {
             <div className={'mr-5'} style={{ flex: 1}}>
               {topLocations.map(x => (
                 <>
-                  <div style={{ float: 'right', cursor: 'pointer' }}>
+                  {/* UNCOMMENT....IF THERES A PURPOSE FOR RIGHT THREE DOTS */}
+                  {/* <div style={{ float: 'right', cursor: 'pointer' }}>
                     <a className={'text-xl'}>
                       ...
                     </a>
-                  </div>
-                  <div className={'mb-2'}>
-                    <p className={'text-xl'}>{x.row_number}.{x.name}</p>
+                  </div> */}
+                  <div className={'mb-2 best-locations-title'}>
+                    <a className={'text-xl'} href={`/location/${x.id}`}>{x.row_number}.{x.name}</a>
                   </div>
                   <div style={{ maxWidth: 200, maxHeight: 200, margin: '0 30px 30px 10px', float: 'left' }}>
-                    <img src={x.thumbnail.String.toString()} style={{ width: '100%', objectFit: 'cover', height: 200 }} />
+                    <a href={`/location/${x.id}`}>
+                      <img src={x.thumbnail.String.toString()} style={{ width: '100%', objectFit: 'cover', height: '100%', aspectRatio: '1/1' }} />
+                    </a>
                   </div>
-                  <div>{x.address}</div>
+                  <div className={'text-md font-bold'}>{x.regency_name}</div>
+                  <div className={'text-xs mb-2'}>{x.address}</div>
                   <div>$$$ (IDR 1000-12000)</div>
-                  <div><a href={x.google_maps_link} target={'_'}> Maps </a></div>
-                  <div className={'mt-6'}>
-                    <div className={'text-xs bg-secondary'} style={{ width: 160, display: 'inline-block', borderRadius: 7 }}>
-                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 7, borderTopLeftRadius: 7}}>CRITICS SCORE</div>
-                      <div className={"flex flex-row items-center p-3"}>
+                  <a href={x.google_maps_link} target={'_'}><div className={'text-sm mt-2 items-center'}><svg style={{ display: 'inline-block', marginBottom: 3}} xmlns="http://www.w3.org/2000/svg" height="12" fill={'white'} viewBox="0 -960 960 960" width="12  "><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>Maps Location</div></a>
+                  <div className={'mt-4'}>
+                    <div className={'text-xs bg-secondary'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
+                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 5, borderTopLeftRadius: 5}}>CRITICS SCORE</div>
+                      <div className={"flex flex-row items-center p-2"}>
                         <div className={'mr-3 users-score-bar'}>
                           <p className={`text-xl text-center ${x.critic_score.Valid ? 'font-bold' : ''}`}>{x.critic_score.Valid ? Number(x.critic_score.Int32) / Number(x.critic_count) * 10 : "N/A"}</p>
                           <div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
@@ -157,9 +161,9 @@ function BestLocation() {
                         <p className={'text-xs users-score'}>{x.critic_count} reviews</p>
                       </div>
                     </div>
-                    <div className={'text-xs bg-secondary ml-3'} style={{ width: 160, display: 'inline-block', borderRadius: 7 }}>
-                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 7, borderTopRightRadius: 7}}>USERS SCORE</div>
-                      <div className={"flex flex-row items-center p-3"}>
+                    <div className={'text-xs bg-secondary ml-3'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
+                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 5, borderTopRightRadius: 5}}>USERS SCORE</div>
+                      <div className={"flex flex-row items-center p-2"}>
                         <div className={'mr-3 users-score-bar'}>
                           <p className={`text-xl text-center ${x.user_score.Valid ? 'font-bold' : ''}`}>{x.user_score.Valid ? x.user_score.Int32 : "N/A" }</p>
                           <div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
diff --git a/src/pages/BestLocations/style.css b/src/pages/BestLocations/style.css
index fe62f1f..82dbc01 100644
--- a/src/pages/BestLocations/style.css
+++ b/src/pages/BestLocations/style.css
@@ -17,6 +17,12 @@
   z-index: 1;
 }
 
+.best-locations-title a:hover {
+  cursor: pointer;
+  color: white;
+  border-bottom: 1px solid white;
+}
+
 .regions-dropdown:hover .dropdown-content {
   display: block;
 }