diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index c5ad64a..d7742b9 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -8,6 +8,7 @@
       "name": "front-end",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.6.2",
         "next": "14.0.3",
         "react": "^18",
         "react-dom": "^18"
@@ -286,6 +287,11 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -323,6 +329,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -475,6 +491,17 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -502,6 +529,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -578,6 +613,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -806,6 +873,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1137,6 +1223,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/front-end/package.json b/front-end/package.json
index 418464c..9cf70c7 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -9,13 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.6.2",
+    "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0"
   }
-}
+}
diff --git a/front-end/public/Logo.png b/front-end/public/Logo.png
new file mode 100644
index 0000000..9d611c2
Binary files /dev/null and b/front-end/public/Logo.png differ
diff --git a/front-end/src/components/Navbar.jsx b/front-end/src/components/Navbar.jsx
new file mode 100644
index 0000000..23e2353
--- /dev/null
+++ b/front-end/src/components/Navbar.jsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Logo from "../../public/Logo.png";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function Navbar() {
+  const router = useRouter();
+  const [activePage, setActivePage] = useState(router.pathname);
+  return (
+    <div className="bg-[#F9EFE7] text-black flex justify-between px-[80px] font-quicksand font-semibold">
+      <Image src={Logo} className="py-[24px]" />
+
+      <div className="flex gap-[48px] items-center">
+        <Link href="/" className={activePage === "/" ? "text-[#3A8412]" : "text-neutral-500"}>Beranda</Link>
+        <Link href="/dashboard" className={activePage === "/dashboard" ? "text-[#3A8412]" : "text-neutral-500"}>Dashboard</Link>
+        <Link href="/verifikasi" className={activePage === "/verifikasi" ? "text-[#3A8412]" : "text-neutral-500"}>Verifikasi</Link>
+      </div>
+
+      <div className="flex items-center gap-2">
+        Nama Pengguna
+        <div className="bg-green-500 rounded-full w-[32px] aspect-square"></div>
+      </div>
+    </div>
+  );
+}
diff --git a/front-end/src/pages/axios.js b/front-end/src/pages/axios.js
new file mode 100644
index 0000000..aabd49c
--- /dev/null
+++ b/front-end/src/pages/axios.js
@@ -0,0 +1,37 @@
+import axios from "axios"
+import { useEffect, useState } from "react"
+
+function WeatherComponent({time, cuaca, temp}) {
+  return(
+    <div className="flex flex-col justify-center bg-white w-fit text-black font-quicksand">
+      <h1>{time}</h1>
+      <h1 className="text-[20px] font-semibold">{cuaca}</h1>
+      <h1 className="text-center">{temp}°C</h1>
+    </div>
+  )
+}
+
+export default function Page() {
+  const [data, setData] = useState([])
+  useEffect(() => {  
+    axios.get("https://ibnux.github.io/BMKG-importer/cuaca/501397.json")
+    .then((res) => {
+      console.log(res.data)
+      setData(res.data)
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+  }, [])
+  return(
+    <main className="text-white grid grid-cols-4 gap-4">
+      {
+        data.map((weather) => {
+          return(
+            <WeatherComponent time={weather.jamCuaca} cuaca={weather.cuaca} temp={weather.tempC} />
+          )
+        })
+      }
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/front-end/src/pages/dashboard.jsx b/front-end/src/pages/dashboard.jsx
new file mode 100644
index 0000000..67969b2
--- /dev/null
+++ b/front-end/src/pages/dashboard.jsx
@@ -0,0 +1,10 @@
+import Navbar from "@/components/Navbar";
+
+export default function Dashboard() {
+  return(
+    <main>
+      <Navbar />
+      Dashboard page
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/front-end/src/pages/index.js b/front-end/src/pages/index.js
index 4242c98..52b3fe5 100644
--- a/front-end/src/pages/index.js
+++ b/front-end/src/pages/index.js
@@ -1,12 +1,13 @@
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
+import Navbar from '@/components/Navbar'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
   return (
     <main>
-      landing page
+      <Navbar />
     </main>
   )
 }
diff --git a/front-end/src/pages/verifikasi.js b/front-end/src/pages/verifikasi.js
new file mode 100644
index 0000000..ed9c799
--- /dev/null
+++ b/front-end/src/pages/verifikasi.js
@@ -0,0 +1,9 @@
+import Navbar from "@/components/Navbar";
+
+export default function VerifikasiPage() {
+  return(
+    <main>
+      <Navbar />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/front-end/src/styles/globals.css b/front-end/src/styles/globals.css
index fd81e88..31eed8e 100644
--- a/front-end/src/styles/globals.css
+++ b/front-end/src/styles/globals.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
index d53b2ea..9021562 100644
--- a/front-end/tailwind.config.js
+++ b/front-end/tailwind.config.js
@@ -7,11 +7,28 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      colors: {
+        neutral: {
+          50: "#F8F8F8",
+          100: "#F1F1F1",
+          300: "#D6D5D6",
+          500: "#A4A4A4",
+          700: "#7F7E7F",
+          900: "#444344",
+          1000: "#262526"
+        },
+        "green-1": {
+          100: "#EAF3E6",
+          300: "#C1DCB3",
+          400: "#ADD199",
+          500: "#98C580",
+          600: "#7CA268",
+          900: "#293721"
+        }
       },
+      fontFamily: {
+        quicksand: ["Quicksand", "sans-serif"], 
+      }
     },
   },
   plugins: [],
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..fa61b22
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Mentoring-Web-TPW23",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}