From 351628dc14021a1b3fe4785e8eb28515e36f7594 Mon Sep 17 00:00:00 2001
From: "envil a.k.a pow" <pow.zone@outlook.com>
Date: Sun, 4 Feb 2024 19:49:37 +0700
Subject: [PATCH] Squashed commit of the following:

commit 0849fc6b363ebd74e71fdb16db46d7e21d431a67
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 19:07:33 2024 +0700

    fix: styling on open sidebar button

commit 83760bea8fbb18447abc5cfd5d3bb59efc3e1a10
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 19:04:04 2024 +0700

    fix: styling in codeblock

commit 46181e339ac0abec53ac160e408e6c356d424cbf
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 19:01:35 2024 +0700

    feat: create custom runtime

commit dec6ee65b568b3441830a4b6a812b57a32484f16
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 15:08:49 2024 +0700

    fix: remove unused custom plugin tailwindcss

commit 9321effbea5305c4c2fba2897cbd7f5e95e33284
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 15:07:31 2024 +0700

    fix: global styling & add nav links

commit e47aa793b8df17f280ebd6bba3297df9423ba0cf
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 01:50:24 2024 +0700

    fix: format command in readme.md

commit 4421cb1a6e0f95dcb45683bd5f9c6cfbf9119893
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 01:49:29 2024 +0700

    fix: contributing step

commit e3c30d213dab109a9c962da2392cb3d5e0965e92
Author: envilion s. <pow.zone@outlook.com>
Date:   Sun Feb 4 01:38:33 2024 +0700

    fix: readme.md

commit 2e2aeaf90e140f29b8e2e107a062352d1fca07f1
Author: Wisnu Kristanto <45446283+nu07@users.noreply.github.com>
Date:   Sun Feb 4 00:03:10 2024 +0700

    feat: switch darkmode (#40)

    * feat: switch darkmode

    * feat: dark css on landing pages

commit dd49b0c5694e95f5b4c4df6677e2ae9fe0d1b46d
Author: Muhammad Dean Fahreza <muhammaddean27@gmail.com>
Date:   Sat Feb 3 23:39:34 2024 +0700

    docs: Mempebaharui dokumentasi (#39)

commit fb0566920462eb7f01823e182118ad9fee7e4b0f
Author: envilion s. <pow.zone@outlook.com>
Date:   Sat Feb 3 19:56:57 2024 +0700

    feat: new syntax highlighting

commit a0a5faf709d02c615bb3caea8957fc77dbedad37
Author: envilion s. <pow.zone@outlook.com>
Date:   Sat Feb 3 17:39:38 2024 +0700

    feat: add featured links in sidebar

commit 50d503f80caa6ea12ac116952e2b3d2b2539dea6
Author: envil a.k.a pow <86885041+abnvlf@users.noreply.github.com>
Date:   Wed Jan 31 00:24:27 2024 +0700

    fix: ignore package-lock.json file (#32)

    * fix: ignore package-lock.json file

    * fix: remove package-lock.json

commit b65be510adea2e04716dc5b169f569433942f8dd
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Tue Jan 30 20:43:02 2024 +0700

    Docs: instalasi

    minimal versi python ke 3.11.6

commit adce6f71c59dec01ef748bc5537d3f9c587207f0
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Tue Jan 30 20:31:54 2024 +0700

    Docs: instalasi

    pip install

commit 1bd953ecfb580ebffacfc35bba2cff8b99006df8
Author: envil a.k.a pow <86885041+abnvlf@users.noreply.github.com>
Date:   Mon Jan 29 21:09:41 2024 +0700

    docs: remove instalasi & informasi module link (#26)

commit 03b6b4b1eb640dec1bdb09845fc73b5c47aec9c2
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Thu Jan 25 11:40:51 2024 +0700

    docs: instalasi

commit c7504f06341e0a19f7ebc3163e83d5397a8f3a2e
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Thu Jan 25 10:51:29 2024 +0700

    docs:

commit 39faa3c9c3c6a71092d28071ea46937d36bba6ea
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Wed Jan 24 13:29:37 2024 +0700

    ubah kode sumber

commit e1bf2a6c02058e5415c0b236f62ecf3b066af6ef
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Wed Jan 24 13:23:30 2024 +0700

    docs: standar_deviasi & entropy

    ubah kode sumber standar_deviasi & entropy

commit 7fcc67c7e7d9d80fb50ff0521cf24050ac60775d
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Wed Jan 24 13:11:52 2024 +0700

    docs:

commit ce46eec0b0310d825cffd05d104ae9c5f1e94ad9
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Wed Jan 24 13:06:31 2024 +0700

    docs: entropy

    menambahkan dokumentasi entropy

commit b2ddd1824fa76a005e4504dd8f565347cf133402
Author: dherlyar <dherlyar.i@gmail.com>
Date:   Wed Jan 24 12:25:35 2024 +0700

    docs: entropy

    menambahkan dokumentasi entropy

commit c9aacb6c72644133a9830f540ee444d3ad2d8a1f
Author: envil a.k.a pow <86885041+abnvlf@users.noreply.github.com>
Date:   Tue Jan 23 20:06:32 2024 +0700

    feat: embel replit (#13)

commit 8e544edbc04568b7d9ed87686409f10b93921b57
Author: envil a.k.a pow <86885041+abnvlf@users.noreply.github.com>
Date:   Tue Jan 23 19:41:51 2024 +0700

    feat: fix responsive design landing page (#12)

commit 4c63c4603fa01745ecf5904ed672c0cb23330fb4
Author: envilion s <pow.zone@outlook.com>
Date:   Tue Jan 23 19:18:43 2024 +0700

    feat: compress img
---
 .gitignore                                    |  4 +-
 .nvmrc                                        |  1 +
 README.md                                     | 85 +++++++++++++++++-
 app/(landing)/layout.tsx                      | 20 +++++
 app/{ => (landing)}/page.tsx                  | 35 +-------
 app/docs/fisika/energi-kinetik/page.mdx       |  9 +-
 app/docs/fisika/energi-potensial/page.mdx     | 10 ++-
 app/docs/fisika/hukum-ohm/page.mdx            |  9 +-
 app/docs/fisika/kecepatan/page.mdx            | 22 ++++-
 app/docs/fisika/masa-jenis/page.mdx           |  9 +-
 app/docs/get-started/instalasi/page.mdx       |  6 +-
 app/docs/layout.tsx                           | 32 ++++---
 .../matematika/diameter-lingkaran/page.mdx    |  9 +-
 .../matematika/keliling-lingkaran/page.mdx    |  9 +-
 app/docs/matematika/luas-lingkaran/page.mdx   |  9 +-
 .../matematika/persamaan-kuadrat/page.mdx     |  8 +-
 .../matematika/radian-ke-derajat/page.mdx     |  9 +-
 app/docs/statistika/entropy/page.mdx          | 10 ++-
 app/docs/statistika/standar-deviasi/page.mdx  | 12 ++-
 app/globals.css                               | 49 ++++++++++-
 app/layout.tsx                                | 15 ++--
 components/Codeblock.tsx                      | 88 +++++++++++++++++++
 components/Navbar.tsx                         | 70 +++++++++++++++
 components/Provider.tsx                       | 28 ++++++
 components/Sidebar.tsx                        | 86 +++++++++---------
 components/ThemeSwitcher.tsx                  | 45 ++++++++++
 constants/featuredLinks.ts                    | 24 +++++
 constants/navLinks.ts                         | 24 +++++
 hooks/useNavStyle.ts                          | 13 +++
 next.config.mjs                               | 11 ++-
 package.json                                  | 12 ++-
 tailwind.config.ts                            |  4 +-
 32 files changed, 657 insertions(+), 120 deletions(-)
 create mode 100644 .nvmrc
 create mode 100644 app/(landing)/layout.tsx
 rename app/{ => (landing)}/page.tsx (60%)
 create mode 100644 components/Codeblock.tsx
 create mode 100644 components/Navbar.tsx
 create mode 100644 components/Provider.tsx
 create mode 100644 components/ThemeSwitcher.tsx
 create mode 100644 constants/featuredLinks.ts
 create mode 100644 constants/navLinks.ts
 create mode 100644 hooks/useNavStyle.ts

diff --git a/.gitignore b/.gitignore
index c1d8cbc..2615872 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+package-lock.json
+yarn.lock
 
 # testing
 /coverage
@@ -36,4 +38,4 @@ yarn-error.log*
 next-env.d.ts
 
 /OpenSeries
-/testing
\ No newline at end of file
+/testing
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..18c2841
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20.11.0
\ No newline at end of file
diff --git a/README.md b/README.md
index b2fa096..84bca74 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,84 @@
-# OpenSeries Web
+# Website OpenSeries
+
+Selamat datang di repositori OpenSeries! Repositori ini berisi kode sumber untuk website OpenSeries. Kami menggunakan runtime dan package manager dari Bun, jadi jika Anda ingin berkontribusi, pastikan untuk menginstal Bun terlebih dahulu dengan mengacu pada dokumentasi resmi di https://bun.sh/.
+
+## Memulai
+
+Untuk berkontribusi pada website OpenSeries, ikuti langkah-langkah berikut:
+
+1. Fork repositori ini di GitHub.
+
+2. Clone repositori yang telah di-fork ke mesin lokal Anda:
+
+    ```bash
+    git clone https://github.com/nama-anda/OpenSeries.git
+    ```
+
+3. Pindah ke direktori proyek:
+
+    ```bash
+    cd OpenSeries
+    ```
+
+4. Pastikan branch Anda diatur ke `develop`:
+
+    ```bash
+    git checkout develop
+    ```
+
+5. Buat branch baru untuk fitur atau perbaikan bug:
+
+    ```bash
+    git checkout -b nama-fitur
+    ```
+
+## Alur Pengembangan
+
+1. Instal paket yang diperlukan menggunakan Bun:
+
+    ```bash
+    bun install
+    ```
+
+2. Jalankan proyek menggunakan Bun:
+
+    ```bash
+    bun dev
+    ```
+
+3. Sebelum melakukan commit, jalankan linter Bun untuk memastikan kualitas kode:
+
+    ```bash
+    bun lint
+    ```
+
+4. Format kode menggunakan Bun Prettier:
+
+    ```bash
+    bun format
+    ```
+
+5. Lakukan commit perubahan Anda dengan menggunakan salah satu awalan pesan commit berikut:
+
+    - `feat:` untuk fitur baru
+    - `fix:` untuk perbaikan bug
+    - `docs:` untuk perubahan dokumentasi
+    - `add:` untuk menambahkan file atau aset
+
+    Contoh commit:
+
+    ```bash
+    git commit -m "feat: menambahkan fitur baru"
+    ```
+
+## Pull Request
+
+Setelah membuat perubahan, dorong branch ke fork Anda di GitHub dan buat pull request yang dituju ke branch develop repositori ini.
+
+## Kontributor
+
+Terima kasih kepada semua kontributor yang telah membantu meningkatkan website OpenSeries! Jika Anda tertarik berkontribusi, silakan fork repositori ini dan kirim pull request ke branch develop.
+
+## Lisensi
+
+Proyek ini dilisensikan di bawah Lisensi MIT.
diff --git a/app/(landing)/layout.tsx b/app/(landing)/layout.tsx
new file mode 100644
index 0000000..3298b63
--- /dev/null
+++ b/app/(landing)/layout.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useNavStyle } from "@/hooks/useNavStyle";
+import { ReactNode, useEffect } from "react";
+
+type Props = {
+    children: ReactNode;
+};
+
+const Layout = ({ children }: Props) => {
+    const { setLandingStyles } = useNavStyle();
+
+    useEffect(() => {
+        setLandingStyles();
+    }, [setLandingStyles]);
+
+    return <>{children}</>;
+};
+
+export default Layout;
diff --git a/app/page.tsx b/app/(landing)/page.tsx
similarity index 60%
rename from app/page.tsx
rename to app/(landing)/page.tsx
index b7947ed..fd2bb01 100644
--- a/app/page.tsx
+++ b/app/(landing)/page.tsx
@@ -3,40 +3,11 @@
 import Link from "next/link";
 import landingImg from "@/assets/landing.png";
 import { projectByLinks } from "@/constants/projectByLinks";
-import { socialLinks } from "@/constants/socialLinks";
 import Image from "next/image";
 
 export default function Home() {
     return (
         <>
-            <nav className="fixed inset-x-0 top-0 z-40 border-b bg-white py-6">
-                <div className="container flex items-center justify-between">
-                    <Link
-                        className="bg-gradient-to-br from-indigo-600 to-rose-400 bg-clip-text font-bold text-transparent"
-                        href="/"
-                    >
-                        OpenSeries
-                    </Link>
-                    <div className="flex items-center gap-6">
-                        <Link
-                            className="font-medium text-zinc-500 transition-all duration-300 hover:text-indigo-600"
-                            href="/docs"
-                        >
-                            Docs
-                        </Link>
-                        <div className="flex items-center gap-2">
-                            {socialLinks.map((link) => (
-                                <Link
-                                    key={link.name}
-                                    href={link.href}
-                                    target="_blank"
-                                    className={`${link.icon} text-xl text-zinc-500 transition-all duration-300 hover:text-indigo-600`}
-                                ></Link>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </nav>
             <main className="flex min-h-dvh items-center justify-center py-20">
                 <div className="container grid items-center gap-10 text-center lg:grid-cols-2 lg:text-left">
                     <div className="order-2 space-y-8 lg:order-1">
@@ -52,18 +23,18 @@ export default function Home() {
                         </p>
                         <div className="flex flex-col items-center gap-6 lg:items-start xl:flex-row xl:items-center">
                             <Link
-                                className="whitespace-nowrap rounded-md bg-indigo-600 px-8 py-4 font-medium text-white shadow-2xl shadow-indigo-600/60 transition-all duration-200 hover:bg-indigo-700"
+                                className="whitespace-nowrap rounded-md bg-indigo-600 px-8 py-4 font-medium text-white hover:bg-indigo-700"
                                 href="/docs"
                             >
                                 Get Started
                             </Link>
-                            <span className="flex flex-wrap items-center gap-2">
+                            <span className="flex flex-wrap items-center gap-2 text-zinc-500 dark:text-zinc-400">
                                 By
                                 {projectByLinks.map((link) => (
                                     <Link
                                         key={link.name}
                                         target="_blank"
-                                        className="whitespace-nowrap rounded-full border-2 border-rose-400 px-4 py-1 text-xs font-medium text-rose-400 transition-all duration-200 hover:bg-rose-100"
+                                        className="whitespace-nowrap rounded-full border-2 border-rose-400 px-4 py-1 text-xs font-medium text-rose-400 hover:bg-rose-400/20"
                                         href={link.href}
                                     >
                                         {link.name}
diff --git a/app/docs/fisika/energi-kinetik/page.mdx b/app/docs/fisika/energi-kinetik/page.mdx
index 650085f..c3809dd 100644
--- a/app/docs/fisika/energi-kinetik/page.mdx
+++ b/app/docs/fisika/energi-kinetik/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Energi Kinetik
 
 Rumus:
@@ -26,4 +28,9 @@ print(fisika.energi_kinetik(masa_benda, kecepatan_benda))
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/EnergiKinetik?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.fisika as fisika
+
+masa_benda = 14
+kecepatan_benda = 23.4
+print(fisika.energi_kinetik(masa_benda, kecepatan_benda))
+`} />
diff --git a/app/docs/fisika/energi-potensial/page.mdx b/app/docs/fisika/energi-potensial/page.mdx
index dcdd650..bf44082 100644
--- a/app/docs/fisika/energi-potensial/page.mdx
+++ b/app/docs/fisika/energi-potensial/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Energi Potensial
 
 Rumus:
@@ -27,4 +29,10 @@ print(fisika.energi_potensial(massa_benda_potensial, gravitasi_bumi, ketinggian_
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/EnergiPotensial?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.fisika as fisika
+
+massa_benda_potensial = 12
+gravitasi_bumi = 9.78
+ketinggian_benda = 400
+print(fisika.energi_potensial(massa_benda_potensial, gravitasi_bumi, ketinggian_benda))
+`} />
diff --git a/app/docs/fisika/hukum-ohm/page.mdx b/app/docs/fisika/hukum-ohm/page.mdx
index 3af9ae7..a366a41 100644
--- a/app/docs/fisika/hukum-ohm/page.mdx
+++ b/app/docs/fisika/hukum-ohm/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Hukum Ohm
 
 Rumus:
@@ -24,4 +26,9 @@ print(fisika.hukum_ohm(kuat_arus, hambatan))
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/HukumOhm?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.fisika as fisika
+
+kuat_arus = 30
+hambatan = 3
+print(fisika.hukum_ohm(kuat_arus, hambatan))
+`} />
diff --git a/app/docs/fisika/kecepatan/page.mdx b/app/docs/fisika/kecepatan/page.mdx
index 5f71cbc..f45b1ad 100644
--- a/app/docs/fisika/kecepatan/page.mdx
+++ b/app/docs/fisika/kecepatan/page.mdx
@@ -1,11 +1,26 @@
+import Codeblock from "@/components/Codeblock";
+
 # Kecepatan
 
+Kecepatan adalah perpindahan yang ditempuh oleh manusia maupun massa benda yang di dalam jangka waktu tertentu yang ditanyakan dalam satuan meter per sekon (`m/s`) yaitu satuan ukuran panjang per satuan ukuran waktu.
+
 Rumus:
 
 ```
 v = s / t
 ```
 
+ket:
+
+`v = kecepatan`
+
+`s = jarak`
+
+`t = waktu`
+
+Rumus kecepatan ini biasanya digunakan untuk menentukan besaran waktu perpindahan suatu objek dari suatu tempat ke tempat lainnya,
+misalnya pergerakan mobil, penerbangan pesawat, perpindahan sebuah roda, manusia berlari _sprint_, dan lain-lain.
+
 Fungsi [sumber kode [disini](https://github.com/bellshade/OpenSeries/blob/main/OpenSeries/fisika.py#L5C1-L25C55)]
 
 ```python
@@ -24,4 +39,9 @@ print(fisika.kecepatan(jarak, waktu))
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/Kecepatan?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.fisika as fisika
+
+waktu = 2.3
+jarak = 4
+print(fisika.kecepatan(jarak, waktu))
+`} />
diff --git a/app/docs/fisika/masa-jenis/page.mdx b/app/docs/fisika/masa-jenis/page.mdx
index a752c73..da961f2 100644
--- a/app/docs/fisika/masa-jenis/page.mdx
+++ b/app/docs/fisika/masa-jenis/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Masa Jenis
 
 Rumus:
@@ -26,4 +28,9 @@ print(fisika.masa_jenis(massa_benda, volume_benda))
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/MasaJenis?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.fisika as fisika
+
+massa_benda = 14
+volume_benda = 8
+print(fisika.masa_jenis(massa_benda, volume_benda))
+`} />
diff --git a/app/docs/get-started/instalasi/page.mdx b/app/docs/get-started/instalasi/page.mdx
index 1c13749..68b5164 100644
--- a/app/docs/get-started/instalasi/page.mdx
+++ b/app/docs/get-started/instalasi/page.mdx
@@ -4,7 +4,7 @@
 
 Installasi `OpenSeries` membutuhkan antara lain:
 
--   Python (dengan minimal versi 3.10)<br /> OpenSeries library berjalan di atas python dengan minimal 3.10, untuk yang memliki versi dibawah atau belum punya dari python, bisa mengunduh dan menginstallnya terlebih dahulu, untuk sumber dari installasi python bisa dilihat [disini](https://www.python.org/downloads/)
+-   Python (dengan minimal versi 3.11.6)<br /> OpenSeries library berjalan di atas python dengan minimal 3.11.6, untuk yang memliki versi dibawah atau belum punya dari python, bisa mengunduh dan menginstallnya terlebih dahulu, untuk sumber dari installasi python bisa dilihat [disini](https://www.python.org/downloads/)
 
 Cek versi python
 
@@ -12,7 +12,7 @@ Cek versi python
 python --version
 ```
 
-jika versi python < 3.10 kamu bisa langsung [download windows](https://www.python.org/ftp/python/3.12.1/python-3.12.1-amd64.exe) atau command dibawah:
+jika versi python < 3.11.6 kamu bisa langsung [download windows](https://www.python.org/ftp/python/3.12.1/python-3.12.1-amd64.exe) atau command dibawah:
 
 Ubuntu
 
@@ -55,7 +55,7 @@ hint: See PEP 668 for the detailed specification.
 kamu harus membuat virtual environment terlebih dahulu, bisa dilihat [disini](https://docs.python.org/3/library/venv.html) atau kamu bisa menambahkan parameter tambahan seperti ini (dengan cara install break packages):
 
 ```bash
-pip install git+https://github.com/bellshade/OpenSeries --break-system-packages
+pip install OpenSeriesBellshade --break-system-packages
 ```
 
 -   **installasi via clone dari github**<br/>kamu bisa installasi via github dengan mengclone dari projek `OpenSeries` dengan cara:
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index a2e076d..0b99065 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -1,16 +1,26 @@
+"use client";
+
 import Sidebar from "@/components/Sidebar";
+import { useNavStyle } from "@/hooks/useNavStyle";
+import { useEffect } from "react";
+import { PythonProvider } from "react-py";
+
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+    const { setDocsStyle } = useNavStyle();
+    const packages = {
+        micropip: ["OpenSeriesBellshade"]
+    };
+
+    useEffect(() => {
+        setDocsStyle();
+    }, [setDocsStyle]);
 
-export default async function MdxLayout({ children }: { children: React.ReactNode }) {
     return (
-        <>
-            <div className="flex h-dvh max-h-dvh flex-col overflow-hidden">
-                <div className="relative flex h-full">
-                    <Sidebar />
-                    <main className="prose prose-indigo w-full max-w-none overflow-y-auto rounded-xl p-10 prose-h1:bg-gradient-to-br prose-h1:from-indigo-600 prose-h1:to-rose-400 prose-h1:bg-clip-text prose-h1:text-transparent prose-img:w-full prose-img:rounded-xl">
-                        {children}
-                    </main>
-                </div>
-            </div>
-        </>
+        <PythonProvider packages={packages}>
+            <Sidebar />
+            <main className="prose prose-indigo max-w-none overflow-y-auto rounded-xl p-8 dark:prose-invert prose-pre:border prose-img:w-full prose-img:rounded-xl dark:prose-h1:bg-clip-text dark:prose-h1:font-bold dark:prose-pre:border-zinc-700 lg:pl-80">
+                {children}
+            </main>
+        </PythonProvider>
     );
 }
diff --git a/app/docs/matematika/diameter-lingkaran/page.mdx b/app/docs/matematika/diameter-lingkaran/page.mdx
index 73deb63..72613ca 100644
--- a/app/docs/matematika/diameter-lingkaran/page.mdx
+++ b/app/docs/matematika/diameter-lingkaran/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Diameter Lingkaran
 
 Rumus:
@@ -19,9 +21,12 @@ import OpenSeries.matematika as matematika
 
 jari = 10
 print(matematika.diameter_lingkaran(jari))
-# 20
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/DiameterLingkaran?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.matematika as matematika
+
+jari = 10
+print(matematika.diameter_lingkaran(jari))
+`} />
diff --git a/app/docs/matematika/keliling-lingkaran/page.mdx b/app/docs/matematika/keliling-lingkaran/page.mdx
index faa8493..31bddf8 100644
--- a/app/docs/matematika/keliling-lingkaran/page.mdx
+++ b/app/docs/matematika/keliling-lingkaran/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Keliling Lingkaran
 
 Rumus:
@@ -19,9 +21,12 @@ import OpenSeries.matematika as matematika
 
 jari = 10
 print(matematika.keliling_lingkaran(jari))
-# 62,8
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/KelilingLingkaran?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.matematika as matematika
+
+jari = 10
+print(matematika.keliling_lingkaran(jari))
+`} />
diff --git a/app/docs/matematika/luas-lingkaran/page.mdx b/app/docs/matematika/luas-lingkaran/page.mdx
index 055c864..dab176c 100644
--- a/app/docs/matematika/luas-lingkaran/page.mdx
+++ b/app/docs/matematika/luas-lingkaran/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Luas Lingkaran
 
 Rumus:
@@ -19,9 +21,12 @@ import OpenSeries.matematika as matematika
 
 jari = 10
 print(matematika.luas_lingkaran(jari))
-# 314
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/LuasLingkaran?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.matematika as matematika
+
+jari = 10
+print(matematika.luas_lingkaran(jari))
+`} />
diff --git a/app/docs/matematika/persamaan-kuadrat/page.mdx b/app/docs/matematika/persamaan-kuadrat/page.mdx
index cf03679..d738c79 100644
--- a/app/docs/matematika/persamaan-kuadrat/page.mdx
+++ b/app/docs/matematika/persamaan-kuadrat/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Persamaan Kuadrat
 
 Rumus:
@@ -20,9 +22,11 @@ Contoh Kode
 import OpenSeries.matematika as matematika
 
 print(matematika.persamaan_kuadrat(1, -3, 2))
-# 2,0
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/PersamaanKuadrat?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.matematika as matematika
+
+print(matematika.persamaan_kuadrat(1, -3, 2))
+`} />
diff --git a/app/docs/matematika/radian-ke-derajat/page.mdx b/app/docs/matematika/radian-ke-derajat/page.mdx
index b70ee73..0a3270e 100644
--- a/app/docs/matematika/radian-ke-derajat/page.mdx
+++ b/app/docs/matematika/radian-ke-derajat/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Radian ke Derajat
 
 Rumus:
@@ -19,9 +21,12 @@ import OpenSeries.matematika as matematika
 
 radian = 1
 print(matematika.radian_ke_derajat(radian))
-# 57,296
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/RadianKeDerajat?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import OpenSeries.matematika as matematika
+
+radian = 1
+print(matematika.radian_ke_derajat(radian))
+`} />
diff --git a/app/docs/statistika/entropy/page.mdx b/app/docs/statistika/entropy/page.mdx
index 68364b1..eb16785 100644
--- a/app/docs/statistika/entropy/page.mdx
+++ b/app/docs/statistika/entropy/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Entropy
 
 Rumus:
@@ -19,7 +21,6 @@ Contoh Kode
 ```python
 from OpenSeries import statistika as statistika
 
-# contoh dari entropy
 label = [1, 1, 2, 2, 3, 3]
 hasil_base_2 = statistika.entropy(label, base=2)
 print(hasil_base_2)
@@ -27,4 +28,9 @@ print(hasil_base_2)
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/Entropy?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`from OpenSeries import statistika as statistika
+
+label = [1, 1, 2, 2, 3, 3]
+hasil_base_2 = statistika.entropy(label, base=2)
+print(hasil_base_2)
+`} />
diff --git a/app/docs/statistika/standar-deviasi/page.mdx b/app/docs/statistika/standar-deviasi/page.mdx
index e0e779e..9053041 100644
--- a/app/docs/statistika/standar-deviasi/page.mdx
+++ b/app/docs/statistika/standar-deviasi/page.mdx
@@ -1,3 +1,5 @@
+import Codeblock from "@/components/Codeblock";
+
 # Standar Deviasi
 
 Rumus:
@@ -20,13 +22,17 @@ Contoh Kode
 import numpy as np
 from OpenSeries import statistika as statistika
 
-# contoh dari standar deviasi
 vektor = np.array([1, 2, 3, 4, 5])
 hasil = statistika.standar_deviasi(vektor)
 print(hasil)
-
 ```
 
 ## Coba Sekarang
 
-<iframe src="https://replit.com/@ItsArul/StandarDeviasi?embed=1&theme=light" className="aspect-video w-full" />
+<Codeblock code={`import numpy as np
+from OpenSeries import statistika as statistika
+
+vektor = np.array([1, 2, 3, 4, 5])
+hasil = statistika.standar_deviasi(vektor)
+print(hasil)
+`} />
diff --git a/app/globals.css b/app/globals.css
index 26d7ff5..7861542 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,16 +3,61 @@
 @tailwind utilities;
 
 @layer base {
+    * {
+        @apply transition-all duration-200;
+    }
+
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
-        @apply text-zinc-800;
+        @apply text-zinc-800 dark:text-zinc-200;
     }
 
     p {
-        @apply text-zinc-600;
+        @apply text-zinc-500 dark:text-zinc-400;
+    }
+
+    pre[data-theme*=" "] {
+        @apply bg-[var(--shiki-light-bg)];
+    }
+
+    code[data-theme*=" "],
+    code[data-theme*=" "] span {
+        @apply bg-[var(--shiki-light-bg)] text-[var(--shiki-light)];
+    }
+
+    html.dark code[data-theme*=" "],
+    html.dark code[data-theme*=" "] span {
+        color: var(--shiki-dark);
+        background-color: var(--shiki-dark-bg);
+    }
+
+    html.dark pre[data-theme*=" "] {
+        background-color: var(--shiki-dark-bg);
+    }
+
+    [data-line-numbers] {
+        counter-reset: line;
+    }
+
+    [data-line-numbers] > [data-line]::before {
+        counter-increment: line;
+        content: counter(line);
+        display: inline-block;
+        width: 1rem;
+        margin-right: 1rem;
+        text-align: right;
+        color: gray;
+    }
+
+    code[data-line-numbers-max-digits="2"] > [data-line]::before {
+        width: 2rem;
+    }
+
+    code[data-line-numbers-max-digits="3"] > [data-line]::before {
+        width: 3rem;
     }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 98a2a33..df4d9ee 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Montserrat } from "next/font/google";
 import "./globals.css";
 import NextTopLoader from "nextjs-toploader";
+import Provider from "@/components/Provider";
+import Navbar from "@/components/Navbar";
 
-const inter = Inter({ subsets: ["latin"] });
+const montserrat = Montserrat({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
     title: "OpenSeries",
@@ -14,9 +16,12 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
-            <body className={`${inter.className}`}>
-                <NextTopLoader color="#4f46e5" />
-                {children}
+            <body className={`${montserrat.className} dark:bg-zinc-800`}>
+                <Provider>
+                    <Navbar />
+                    <NextTopLoader color="#4f46e5" />
+                    {children}
+                </Provider>
             </body>
         </html>
     );
diff --git a/components/Codeblock.tsx b/components/Codeblock.tsx
new file mode 100644
index 0000000..4370f1e
--- /dev/null
+++ b/components/Codeblock.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { usePython } from "react-py";
+import { python } from "@codemirror/lang-python";
+import ReactCodeMirror from "@uiw/react-codemirror";
+import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+import { useTheme } from "next-themes";
+import { tomorrow } from "thememirror";
+
+type Props = {
+    code: string;
+};
+
+const Codeblock = ({ code }: Props) => {
+    const [value, setValue] = useState(code);
+    const { systemTheme, theme } = useTheme();
+    const currentTheme = theme === "system" ? systemTheme : theme;
+
+    const onChange = useCallback((val: string) => {
+        setValue(val);
+    }, []);
+
+    const { runPython, stdout, stderr, isLoading, isRunning } = usePython();
+
+    return (
+        <div className="space-y-4">
+            <div className="relative flex max-w-max divide-x divide-indigo-500 overflow-hidden rounded-lg">
+                <div
+                    className={`absolute inset-0 z-20 grid place-items-center rounded-lg border bg-white dark:border-zinc-700 dark:bg-zinc-900 ${isLoading ? "opacity-100" : "pointer-events-none opacity-0"}`}
+                >
+                    <span className="icon-[tabler--loader] animate-spin text-2xl"></span>
+                </div>
+                <button
+                    className="grid h-12 w-12 place-items-center bg-indigo-600 font-medium text-white hover:bg-indigo-700"
+                    onClick={() => runPython(value)}
+                >
+                    {isRunning ? (
+                        <span className="icon-[ri--loader-3-line] h-6 w-6 animate-spin"></span>
+                    ) : (
+                        <span className="icon-[iconamoon--player-play] h-6 w-6"></span>
+                    )}
+                </button>
+                <button
+                    className="grid h-12 w-12 place-items-center bg-indigo-600 font-medium text-white hover:bg-indigo-700"
+                    onClick={() => setValue(code)}
+                >
+                    <span className="icon-[mdi--restart] h-6 w-6"></span>
+                </button>
+                <button
+                    className="flex items-center gap-2 bg-indigo-600 px-5 py-2.5 font-medium text-white hover:bg-indigo-700"
+                    onClick={() => alert("blm cuy")}
+                >
+                    Buka di Playground
+                </button>
+            </div>
+            <div className="relative overflow-hidden rounded-xl border dark:border-zinc-700">
+                <div
+                    className={`absolute inset-0 z-20 grid place-items-center bg-white dark:bg-zinc-900 ${isLoading ? "opacity-100" : "pointer-events-none opacity-0"}`}
+                >
+                    <span className="flex items-center gap-2 text-xl font-bold text-zinc-600 dark:text-zinc-400">
+                        <span className="icon-[tabler--loader] animate-spin text-2xl"></span>
+                        Loading Environment
+                    </span>
+                </div>
+                <div className="grid divide-x divide-y dark:divide-zinc-700 sm:grid-cols-2">
+                    <div>
+                        <ReactCodeMirror
+                            value={value}
+                            theme={currentTheme === "dark" ? vscodeDark : tomorrow}
+                            height="400px"
+                            extensions={[python()]}
+                            onChange={onChange}
+                        />
+                    </div>
+                    <div className="flex p-8">
+                        {!stdout && !stderr && !isRunning ? <p>Jalankan kodenya untuk melihat output</p> : null}
+                        {stdout}
+                        {stderr}
+                        {isRunning && <span className="icon-[ri--loader-3-line] m-auto animate-spin text-2xl"></span>}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Codeblock;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..5e4f2d6
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { socialLinks } from "@/constants/socialLinks";
+import Link from "next/link";
+import React, { useState } from "react";
+import ThemeSwitcher from "./ThemeSwitcher";
+import { navLinks } from "@/constants/navLinks";
+import { useNavStyle } from "@/hooks/useNavStyle";
+
+type Props = {};
+
+const Navbar = (props: Props) => {
+    const { isLanding } = useNavStyle();
+    const [isOpen, setIsOpen] = useState(false);
+
+    const landingStyle = "fixed";
+    const docsStyle = "sticky px-8";
+
+    return (
+        <nav
+            className={`${isLanding ? landingStyle : docsStyle} inset-x-0 top-0 z-40 border-b bg-white/30 py-3 backdrop-blur-lg dark:border-zinc-700 dark:bg-zinc-800/30`}
+        >
+            <div className={`relative flex items-center justify-between ${isLanding && "container"}`}>
+                <Link
+                    className="bg-gradient-to-br from-indigo-600 to-rose-400 bg-clip-text font-bold text-transparent"
+                    href="/"
+                >
+                    OpenSeries
+                </Link>
+                <div className="flex items-center gap-8">
+                    <div
+                        className={`absolute inset-x-0 top-full mt-3 flex origin-top flex-col gap-x-8 gap-y-6 rounded-lg border bg-white p-12 shadow-2xl dark:border-zinc-700 dark:bg-zinc-800 lg:static lg:m-0 lg:flex-row lg:border-none lg:bg-inherit lg:p-0 lg:shadow-none ${isOpen ? "scale-y-100" : "scale-y-0 lg:scale-y-100"}`}
+                    >
+                        {navLinks.map((link) => (
+                            <Link
+                                key={link.name}
+                                className="text-lg text-zinc-500 hover:text-indigo-600 dark:text-zinc-400 dark:hover:text-indigo-500 lg:text-sm"
+                                href={link.href}
+                                target={link.target}
+                            >
+                                {link.name}
+                            </Link>
+                        ))}
+                    </div>
+                    <div className="flex">
+                        {socialLinks.map((link) => (
+                            <Link
+                                key={link.name}
+                                href={link.href}
+                                target="_blank"
+                                className={`grid h-10 w-10  place-items-center rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700`}
+                            >
+                                <span className={link.icon}></span>
+                            </Link>
+                        ))}
+                        <ThemeSwitcher />
+                        <button
+                            onClick={() => setIsOpen(!isOpen)}
+                            className={`grid h-10 w-10 place-items-center  rounded-lg text-xl text-zinc-500 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 lg:hidden`}
+                        >
+                            <span className="icon-[gg--menu]"></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;
diff --git a/components/Provider.tsx b/components/Provider.tsx
new file mode 100644
index 0000000..b684da0
--- /dev/null
+++ b/components/Provider.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { useState, useEffect } from "react";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const Provider = ({ children }: Props) => {
+    const [mounted, setMounted] = useState<boolean>(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return <>{children}</>;
+    }
+
+    return (
+        <ThemeProvider enableSystem={true} attribute="class">
+            {children}
+        </ThemeProvider>
+    );
+};
+
+export default Provider;
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 1af8dd0..023b2d4 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { documentations } from "@/constants/documentations";
-import { socialLinks } from "@/constants/socialLinks";
+import { featuredLinks } from "@/constants/featuredLinks";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { Fragment, useState } from "react";
+import { useState } from "react";
+
 type Props = {};
 
 export default function Sidebar({}: Props) {
@@ -14,54 +15,57 @@ export default function Sidebar({}: Props) {
     return (
         <>
             <aside
-                className={`absolute inset-y-0 z-20 flex min-w-[300px] max-w-[300px]  grow flex-col gap-4 overflow-y-auto border-r bg-white p-10 transition-all duration-300 md:static md:translate-x-0 ${isOpen ? "translate-x-0" : "-translate-x-[calc(100%+0.6rem)]"}`}
+                className={`fixed inset-y-0 z-20 mt-16 flex min-w-[280px] max-w-[280px] flex-col gap-8 overflow-y-auto border-r bg-inherit p-8 dark:border-r-zinc-800 lg:translate-x-0 ${isOpen ? "translate-x-0" : "-translate-x-full"}`}
             >
-                <header className="flex items-center justify-between border-b pb-3">
-                    <Link
-                        className="bg-gradient-to-br from-indigo-600 to-rose-400 bg-clip-text font-bold text-transparent"
-                        href="/"
-                    >
-                        OpenSeries
-                    </Link>
-                    <div className="flex items-center gap-2">
-                        {socialLinks.map((link) => (
-                            <Link
-                                key={link.name}
-                                href={link.href}
-                                target="_blank"
-                                className={`${link.icon} text-xl text-zinc-500 transition-all duration-300 hover:text-indigo-600`}
-                            ></Link>
-                        ))}
-                    </div>
-                </header>
-                {documentations.map((documentation) => (
-                    <Fragment key={documentation.parent}>
-                        <span className="text-xs font-bold uppercase text-zinc-800">{documentation.parent}</span>
-                        <div className="flex flex-col">
-                            {documentation.childs.map((link) => (
-                                <Link
-                                    key={link.href}
-                                    className={`border-l-2 py-2 pl-6 text-sm transition-all duration-200 hover:border-l-indigo-600 hover:text-indigo-600 ${link.href === pathname ? "border-l-indigo-600 text-indigo-600" : "text-zinc-400"}`}
-                                    href={link.href}
-                                    onClick={() => setIsOpen(false)}
-                                >
-                                    {link.title}
-                                </Link>
-                            ))}
+                <div className="grid gap-2">
+                    {featuredLinks.map((link) => (
+                        <Link
+                            href={link.href}
+                            key={link.name}
+                            target={link.target}
+                            className="group flex items-center gap-2 font-medium text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-300"
+                        >
+                            <div
+                                className={`grid h-10 w-10 place-items-center rounded-lg ${link.href === pathname ? "bg-indigo-600 text-white" : "bg-indigo-600/10 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:text-indigo-500"}`}
+                            >
+                                <span className={`${link.icon} text-xl`}></span>
+                            </div>
+                            {link.name}
+                        </Link>
+                    ))}
+                </div>
+                <div className="space-y-4">
+                    {documentations.map((documentation) => (
+                        <div key={documentation.parent} className="space-y-4">
+                            <span className="text-xs font-bold uppercase text-zinc-800 dark:text-zinc-200">
+                                {documentation.parent}
+                            </span>
+                            <div className="flex flex-col">
+                                {documentation.childs.map((link) => (
+                                    <Link
+                                        key={link.href}
+                                        className={`border-l-2 py-2 pl-6 text-sm font-medium hover:border-l-indigo-600 hover:text-indigo-600 dark:hover:border-l-indigo-500 dark:hover:text-indigo-500 ${link.href === pathname ? "border-l-indigo-600 text-indigo-600 dark:border-l-indigo-500 dark:text-indigo-500" : "text-zinc-400 dark:border-l-zinc-700"}`}
+                                        href={link.href}
+                                        onClick={() => setIsOpen(false)}
+                                    >
+                                        {link.title}
+                                    </Link>
+                                ))}
+                            </div>
                         </div>
-                    </Fragment>
-                ))}
+                    ))}
+                </div>
             </aside>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className={`absolute bottom-5 right-5 flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-2 text-white sm:px-6 md:hidden`}
+                className={`fixed bottom-5 right-5 z-30 flex items-center gap-1 rounded-full bg-zinc-700 px-3 py-3 text-white sm:px-6 lg:hidden`}
             >
-                <span className="hidden sm:block">{isOpen ? "Close" : "Open"} Menu</span>
                 {isOpen ? (
-                    <span className="icon-[ph--x] text-xl"></span>
+                    <span className="icon-[ph--x] text-2xl"></span>
                 ) : (
-                    <span className="icon-[ic--round-menu] text-xl"></span>
+                    <span className="icon-[ic--round-menu] text-2xl"></span>
                 )}
+                <span className="hidden text-lg sm:block">{isOpen ? "Close" : "Open"} Sidebar</span>
             </button>
         </>
     );
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..9807c9e
--- /dev/null
+++ b/components/ThemeSwitcher.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const ThemeSwitcher = () => {
+    const [mounted, setMounted] = useState(false);
+    const { systemTheme, theme, setTheme } = useTheme();
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return null;
+    }
+
+    const renderThemeChanger = () => {
+        const currentTheme = theme === "system" ? systemTheme : theme;
+
+        if (currentTheme === "dark") {
+            return (
+                <button
+                    className="grid h-10 w-10 place-items-center rounded-lg text-xl text-yellow-500 hover:bg-zinc-700"
+                    onClick={() => setTheme("light")}
+                >
+                    <span className="icon-[line-md--sun-rising-loop]"></span>
+                </button>
+            );
+        } else {
+            return (
+                <button
+                    className="grid h-10 w-10 place-items-center rounded-lg text-xl text-zinc-600 hover:bg-zinc-200"
+                    onClick={() => setTheme("dark")}
+                >
+                    <span className="icon-[line-md--moon-loop]"></span>
+                </button>
+            );
+        }
+    };
+
+    return <>{renderThemeChanger()}</>;
+};
+
+export default ThemeSwitcher;
diff --git a/constants/featuredLinks.ts b/constants/featuredLinks.ts
new file mode 100644
index 0000000..8543928
--- /dev/null
+++ b/constants/featuredLinks.ts
@@ -0,0 +1,24 @@
+export const featuredLinks = [
+    {
+        name: "Kontribusi",
+        icon: "icon-[solar--heart-shine-bold]",
+        href: "/contribute"
+    },
+    {
+        name: "Request Fitur",
+        icon: "icon-[solar--hand-stars-bold]",
+        href: "https://github.com/bellshade/OpenSeries/issues",
+        target: "_blank"
+    },
+    {
+        name: "Komunitas",
+        icon: "icon-[solar--users-group-two-rounded-bold]",
+        href: "/community"
+    },
+    {
+        name: "Playground",
+        icon: "icon-[solar--plain-3-bold]",
+        href: "https://play.openseries.pages.dev/",
+        target: "_blank"
+    }
+];
diff --git a/constants/navLinks.ts b/constants/navLinks.ts
new file mode 100644
index 0000000..1409e45
--- /dev/null
+++ b/constants/navLinks.ts
@@ -0,0 +1,24 @@
+export const navLinks = [
+    {
+        name: "Docs",
+        href: "/docs"
+    },
+    {
+        name: "Kontribusi",
+        href: "/contribute"
+    },
+    {
+        name: "Komunitas",
+        href: "/community"
+    },
+    {
+        name: "Request Fitur",
+        href: "https://github.com/bellshade/OpenSeries/issues",
+        target: "_blank"
+    },
+    {
+        name: "Playground",
+        href: "https://play.openseries.pages.dev/",
+        target: "_blank"
+    }
+];
diff --git a/hooks/useNavStyle.ts b/hooks/useNavStyle.ts
new file mode 100644
index 0000000..21ef708
--- /dev/null
+++ b/hooks/useNavStyle.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface NavStyleState {
+    isLanding: boolean;
+    setDocsStyle: () => void;
+    setLandingStyles: () => void;
+}
+
+export const useNavStyle = create<NavStyleState>((set) => ({
+    isLanding: true,
+    setDocsStyle: () => set({ isLanding: false }),
+    setLandingStyles: () => set({ isLanding: true })
+}));
diff --git a/next.config.mjs b/next.config.mjs
index b8f196f..851ffd2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,15 +1,24 @@
 import remarkGfm from "remark-gfm";
 import createMDX from "@next/mdx";
+import rehypePrettyCode from "rehype-pretty-code";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     pageExtensions: ["js", "jsx", "mdx", "md", "ts", "tsx"]
 };
 
+const options = {
+    theme: {
+        light: "light-plus",
+        dark: "dark-plus"
+    },
+    defaultLang: "plaintext"
+};
+
 const withMDX = createMDX({
     options: {
         remarkPlugins: [remarkGfm],
-        rehypePlugins: []
+        rehypePlugins: [[rehypePrettyCode, options]]
     }
 });
 
diff --git a/package.json b/package.json
index 4a3a1b8..881f1c0 100644
--- a/package.json
+++ b/package.json
@@ -10,15 +10,24 @@
         "format": "prettier --write ."
     },
     "dependencies": {
+        "@codemirror/lang-python": "^6.1.4",
         "@mdx-js/loader": "^3.0.0",
         "@mdx-js/react": "^3.0.0",
         "@next/mdx": "^14.0.4",
         "@types/mdx": "^2.0.10",
+        "@uiw/codemirror-theme-vscode": "^4.21.21",
+        "@uiw/react-codemirror": "^4.21.21",
         "next": "14.0.4",
+        "next-themes": "^0.2.1",
         "nextjs-toploader": "^1.6.4",
         "react": "^18",
         "react-dom": "^18",
-        "remark-gfm": "^4.0.0"
+        "react-py": "^1.10.6",
+        "rehype-pretty-code": "^0.12.6",
+        "remark-gfm": "^4.0.0",
+        "shikiji": "^0.9.0",
+        "thememirror": "^2.0.1",
+        "zustand": "^4.5.0"
     },
     "devDependencies": {
         "@iconify/json": "^2.2.169",
@@ -27,7 +36,6 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "@types/three": "^0.160.0",
         "autoprefixer": "^10.0.1",
         "eslint": "^8",
         "eslint-config-next": "14.0.4",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7da7831..f26a398 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,9 @@
 import type { Config } from "tailwindcss";
 import { addDynamicIconSelectors } from "@iconify/tailwind";
+import typography from "@tailwindcss/typography";
 
 const config: Config = {
+    darkMode: ["class"],
     content: [
         "./components/**/*.{js,ts,jsx,tsx,mdx}",
         "./constants/**/*.{js,ts,jsx,tsx,mdx}",
@@ -15,7 +17,7 @@ const config: Config = {
             }
         }
     },
-    plugins: [require("@tailwindcss/typography"), addDynamicIconSelectors()]
+    plugins: [typography(), addDynamicIconSelectors()]
 };
 
 export default config;