diff --git a/Cargo.lock b/Cargo.lock
index bbb1144..4f9f1ec 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -21,9 +21,9 @@ dependencies = [
 
 [[package]]
 name = "actix-files"
-version = "0.6.4"
+version = "0.6.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc517050e349356239da19a5e100cd61c21658b3ae183b02c1c6799c581bddf3"
+checksum = "bf0bdd6ff79de7c9a021f5d9ea79ce23e108d8bfc9b49b5b4a2cf6fad5a35212"
 dependencies = [
  "actix-http",
  "actix-service",
@@ -273,6 +273,21 @@ version = "0.2.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0942ffc6dcaadf03badf6e6a2d0228460359d5e34b57ccdc720b7382dfbd5ec5"
 
+[[package]]
+name = "android-tzdata"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e999941b234f3131b00bc13c22d06e8c5ff726d1b6318ac7eb276997bbb4fef0"
+
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.79"
@@ -352,9 +367,9 @@ dependencies = [
 
 [[package]]
 name = "base64"
-version = "0.21.5"
+version = "0.21.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "35636a1494ede3b646cc98f74f8e62c773a38a659ebc777a2cf26b9b74171df9"
+checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
 
 [[package]]
 name = "bitflags"
@@ -508,6 +523,21 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
+[[package]]
+name = "chrono"
+version = "0.4.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f2c685bad3eb3d45a01354cedb7d5faa66194d1d58ba6e267a8de788f79db38"
+dependencies = [
+ "android-tzdata",
+ "iana-time-zone",
+ "js-sys",
+ "num-traits",
+ "serde",
+ "wasm-bindgen",
+ "windows-targets 0.48.5",
+]
+
 [[package]]
 name = "ciborium"
 version = "0.2.1"
@@ -780,6 +810,12 @@ version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
 
+[[package]]
+name = "estimated_read_time"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "649cfd341410b1f8906e8ca1b39e5534be9312fda9182edd770cec34dfbce8d7"
+
 [[package]]
 name = "flate2"
 version = "1.0.28"
@@ -921,9 +957,9 @@ dependencies = [
 
 [[package]]
 name = "getrandom"
-version = "0.2.11"
+version = "0.2.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fe9006bed769170c11f845cf00c7c1e9092aeb3f268e007c3e760ac68008070f"
+checksum = "190092ea657667030ac6a35e305e62fc4dd69fd98ac98631e5d3a2b1575a12b5"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -1019,9 +1055,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.22"
+version = "0.3.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4d6250322ef6e60f93f9a2162799302cd6f68f79f6e5d85c8c16f14d1d958178"
+checksum = "b553656127a00601c8ae5590fcfdc118e4083a7924b6cf4ffc1ea4b99dc429d7"
 dependencies = [
  "bytes",
  "fnv",
@@ -1141,46 +1177,219 @@ dependencies = [
 ]
 
 [[package]]
-name = "icondata"
-version = "0.0.8"
+name = "iana-time-zone"
+version = "0.1.59"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098"
+checksum = "b6a67363e2aa4443928ce15e57ebae94fd8949958fd1223c4cfc0cd473ad7539"
 dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "icondata"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e38f18389f3cd0e664bd42f1dfe0aba4acda0a44036fb720eb07e8ba3a09640c"
+dependencies = [
+ "icondata_ai",
+ "icondata_bi",
+ "icondata_bs",
+ "icondata_cg",
+ "icondata_ch",
  "icondata_core",
  "icondata_fa",
  "icondata_fi",
+ "icondata_hi",
+ "icondata_im",
  "icondata_io",
+ "icondata_lu",
+ "icondata_oc",
+ "icondata_ri",
+ "icondata_si",
+ "icondata_tb",
+ "icondata_ti",
+ "icondata_vs",
+ "icondata_wi",
+]
+
+[[package]]
+name = "icondata_ai"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9bf3a9c196a6a169f790639ecc8fdd4396660b1d53b905230bf0b364776a56fc"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_bi"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6ce125f0d203e66444b02982af9b15631f2385573ad7992af79d4d4babc638d"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_bs"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67940e592b0b8df8d7adc055c8542d135ce1d7d6ad01d8fb8de9405ebfc21c2e"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_cg"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0eba691ca17a43ffc8ebbcf200cd3ea54ad75837f210a6a6ace87a491be8314"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_ch"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2870b3c4ebf013b7e27af71d4c55f10b97ea448831e9a156cb53fec0f262dc20"
+dependencies = [
+ "icondata_core",
 ]
 
 [[package]]
 name = "icondata_core"
-version = "0.0.2"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1640a4c1d5ddd08ab1d9854ffa7a2fa3dc52339492676b6d3031e77ca579f434"
+checksum = "6c97be924215abd5e630d84e95a47c710138a6559b4c55039f4f33aa897fa859"
 
 [[package]]
 name = "icondata_fa"
-version = "0.0.8"
+version = "0.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a515ecda53468cf4a383409da1708da2e4c00253561873c46304cd7f412e9414"
+checksum = "0c7fee576096efe5567a7216a6fb8154db8eae9ae108e5a4706805204208c2af"
 dependencies = [
  "icondata_core",
 ]
 
 [[package]]
 name = "icondata_fi"
-version = "0.0.8"
+version = "0.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a68806fd5abc6bcf395fc54f6193b0f9085aa2a6c740d72825e7e43be4d6a366"
+checksum = "e1a4e81557c205a12ac051046595bb616f388537468987f7ee8960f897cdc538"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_hi"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3435d50de04c61799613995e753e613dc4f2771aa08eb94a7318289a5ea9d784"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_im"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce4bd1d64bb67bb080f605e3e600271894b67c4aaa18965179586ef5990a2297"
 dependencies = [
  "icondata_core",
 ]
 
 [[package]]
 name = "icondata_io"
-version = "0.0.8"
+version = "0.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "134d9fb91cdd0e7ac971199e2c8c8eb917a975faeeee54b227a0068c4f70c886"
+checksum = "35b9d681c936a6e087940beb4766159cddc080d7f1fd5ef0ef3ab9f50a11f3f6"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_lu"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d552c45cc3ab1d1bf88cc0201004eb92418141e5454e9e0e46c4b4a4faf66248"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_oc"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8be19499912a05d5db89ccb88dbe3c459ca4100bda3dbcbddff69f2dcf71d305"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_ri"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "114a85cc95d1bfaee8dc5bf8a07dd043fc9e75499dc2ff4ac5e066193c594930"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_si"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc30cb2dbc2ac53f23dddbcb0ad73720970b24c0ed13935df8082b74fb627860"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_tb"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f2b8d8e2047546285805795e6d3cb6e820a52bb008e15942e11353c7ba659f2"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_ti"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f85074d4bf10960d0f2b01ce3d9cfa2b2434a170d0738336411bb61e83227e4"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_vs"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a82bb4a8b1523200fc7c3b588bb80858db16708067093110ee8614db63b8913"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_wi"
+version = "0.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d2c65b534aa9d7ccb107d892200e8fef2d1849acad160af067e9e20ced3619b"
 dependencies = [
  "icondata_core",
 ]
@@ -1273,9 +1482,9 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.66"
+version = "0.3.67"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cee9c64da59eae3b50095c18d3e74f8b73c0b86d2792824ff01bbce68ba229ca"
+checksum = "9a1d36f1235bc969acba30b7f5990b864423a6068a10f7c90ae8f0112e3a59d1"
 dependencies = [
  "wasm-bindgen",
 ]
@@ -1395,13 +1604,16 @@ dependencies = [
 
 [[package]]
 name = "leptos_icons"
-version = "0.1.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b3fad7820b18b983d49ff4262df88de94dc8fd993278937979cc0dd188868e5"
+checksum = "6a0477a66b90ed94d3b3e9472247189359426c1b6313f8589d3f2edf3fdf676b"
 dependencies = [
- "icondata",
+ "encoding_rs",
+ "icondata_core",
+ "lazy_static",
  "leptos",
- "tracing",
+ "log",
+ "paste",
 ]
 
 [[package]]
@@ -1532,9 +1744,9 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.151"
+version = "0.2.152"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "302d7ab3130588088d277783b1e2d2e10c9e9e4a16dd9050e6ec93fb3e7048f4"
+checksum = "13e3bf6590cbc649f4d1a3eefc9d5d6eb746f5200ffb04e5e142700b8faa56e7"
 
 [[package]]
 name = "linear-map"
@@ -1676,6 +1888,15 @@ dependencies = [
  "minimal-lexical",
 ]
 
+[[package]]
+name = "num-traits"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39e3200413f237f41ab11ad6d161bc7239c84dcb631773ccd7de3dfe4b5c267c"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "num_threads"
 version = "0.1.6"
@@ -1726,7 +1947,7 @@ dependencies = [
  "libc",
  "redox_syscall",
  "smallvec",
- "windows-targets",
+ "windows-targets 0.48.5",
 ]
 
 [[package]]
@@ -1787,17 +2008,20 @@ checksum = "69d3587f8a9e599cc7ec2c00e331f71c4e69a5f9a4b8a6efd5b07466b9736f9a"
 
 [[package]]
 name = "portfolio"
-version = "0.3.0"
+version = "0.5.0"
 dependencies = [
  "actix-files",
  "actix-web",
  "anyhow",
  "cfg-if",
+ "chrono",
  "console_error_panic_hook",
  "console_log",
+ "estimated_read_time",
  "futures",
  "gloo-net 0.5.0",
  "gray_matter",
+ "icondata",
  "leptos",
  "leptos_actix",
  "leptos_icons",
@@ -2747,9 +2971,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.89"
+version = "0.2.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0ed0d4f68a3015cc185aff4db9506a015f4b96f95303897bfa23f846db54064e"
+checksum = "b1223296a201415c7fad14792dbefaace9bd52b62d33453ade1c5b5f07555406"
 dependencies = [
  "cfg-if",
  "wasm-bindgen-macro",
@@ -2757,9 +2981,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.89"
+version = "0.2.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b56f625e64f3a1084ded111c4d5f477df9f8c92df113852fa5a374dbda78826"
+checksum = "fcdc935b63408d58a32f8cc9738a0bffd8f05cc7c002086c6ef20b7312ad9dcd"
 dependencies = [
  "bumpalo",
  "log",
@@ -2772,9 +2996,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.39"
+version = "0.4.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac36a15a220124ac510204aec1c3e5db8a22ab06fd6706d881dc6149f8ed9a12"
+checksum = "bde2032aeb86bdfaecc8b261eef3cba735cc426c1f3a3416d1e0791be95fc461"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -2784,9 +3008,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.89"
+version = "0.2.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0162dbf37223cd2afce98f3d0785506dcb8d266223983e4b5b525859e6e182b2"
+checksum = "3e4c238561b2d428924c49815533a8b9121c664599558a5d9ec51f8a1740a999"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -2794,9 +3018,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.89"
+version = "0.2.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0eb82fcb7930ae6219a7ecfd55b217f5f0893484b7a13022ebb2b2bf20b5283"
+checksum = "bae1abb6806dc1ad9e560ed242107c0f6c84335f1749dd4e8ddb012ebd5e25a7"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2807,15 +3031,15 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.89"
+version = "0.2.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ab9b36309365056cd639da3134bf87fa8f3d86008abf99e612384a6eecd459f"
+checksum = "4d91413b1c31d7539ba5ef2451af3f0b833a005eb27a631cec32bc0635a8602b"
 
 [[package]]
 name = "web-sys"
-version = "0.3.66"
+version = "0.3.67"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "50c24a44ec86bb68fbecd1b3efed7e85ea5621b39b35ef2766b66cd984f8010f"
+checksum = "58cd2333b6e0be7a39605f0e255892fd7418a682d8da8fe042fe25128794d2ed"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -2852,13 +3076,22 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows-core"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33ab640c8d7e35bf8ba19b884ba838ceb4fba93a4e8c65a9059d08afcfc683d9"
+dependencies = [
+ "windows-targets 0.52.0",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
 dependencies = [
- "windows-targets",
+ "windows-targets 0.48.5",
 ]
 
 [[package]]
@@ -2867,13 +3100,28 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
 dependencies = [
- "windows_aarch64_gnullvm",
- "windows_aarch64_msvc",
- "windows_i686_gnu",
- "windows_i686_msvc",
- "windows_x86_64_gnu",
- "windows_x86_64_gnullvm",
- "windows_x86_64_msvc",
+ "windows_aarch64_gnullvm 0.48.5",
+ "windows_aarch64_msvc 0.48.5",
+ "windows_i686_gnu 0.48.5",
+ "windows_i686_msvc 0.48.5",
+ "windows_x86_64_gnu 0.48.5",
+ "windows_x86_64_gnullvm 0.48.5",
+ "windows_x86_64_msvc 0.48.5",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a18201040b24831fbb9e4eb208f8892e1f50a37feb53cc7ff887feb8f50e7cd"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.0",
+ "windows_aarch64_msvc 0.52.0",
+ "windows_i686_gnu 0.52.0",
+ "windows_i686_msvc 0.52.0",
+ "windows_x86_64_gnu 0.52.0",
+ "windows_x86_64_gnullvm 0.52.0",
+ "windows_x86_64_msvc 0.52.0",
 ]
 
 [[package]]
@@ -2882,42 +3130,84 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb7764e35d4db8a7921e09562a0304bf2f93e0a51bfccee0bd0bb0b666b015ea"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbaa0368d4f1d2aaefc55b6fcfee13f41544ddf36801e793edbbfd7d7df075ef"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a28637cb1fa3560a16915793afb20081aba2c92ee8af57b4d5f28e4b3e7df313"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffe5e8e31046ce6230cc7215707b816e339ff4d4d67c65dffa206fd0f7aa7b9a"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d6fa32db2bc4a2f5abeacf2b69f7992cd09dca97498da74a151a3132c26befd"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a657e1e9d3f514745a572a6846d3c7aa7dbe1658c056ed9c3344c4109a6949e"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04"
+
 [[package]]
 name = "winreg"
 version = "0.50.0"
diff --git a/Cargo.toml b/Cargo.toml
index 27bc945..6244f06 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "portfolio"
-version = "0.4.0"
+version = "0.5.0"
 edition = "2021"
 
 [lib]
@@ -16,16 +16,11 @@ gloo-net = { version = "0.5", features = ["http"] }
 log = "0.4"
 cfg-if = "1.0"
 serde = "1.0"
+chrono = { version = "0.4", features = ["serde"] }
 
 # https://carlosted.github.io/icondata/
-leptos_icons = { version = "0.1.0", features = [
-    "FiExternalLink",
-    "FaGithubBrands",
-    "FaLinkedinBrands",
-    "FaEnvelopeSolid",
-    "FaCaretDownSolid",
-    "IoConstruct"
-]}
+leptos_icons = "0.2"
+icondata = "0.3"
 
 # dependecies for client (enable when csr or hydrate set)
 wasm-bindgen = { version = "0.2", optional = true }
@@ -43,6 +38,7 @@ gray_matter = { version = "0.2", optional = true } # frontmatter parser
 serde_yaml = { version = "0.9", optional = true }
 anyhow = { version = "1.0", optional = true }
 thiserror = { version = "1.0", optional = true }
+estimated_read_time = { version = "1.0", optional = true }
 
 [features]
 default = ["csr"]
@@ -75,7 +71,8 @@ ssr = [
     "dep:gray_matter",
     "dep:serde_yaml",
     "dep:anyhow",
-    "dep:thiserror"
+    "dep:thiserror",
+    "dep:estimated_read_time"
 ]
 
 [package.metadata.cargo-all-features]
diff --git a/data_src/posts/test.md b/data_src/posts/test.md
index 0cc74e5..f2ee268 100644
--- a/data_src/posts/test.md
+++ b/data_src/posts/test.md
@@ -2,7 +2,7 @@
 image_path: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png?20150906031702"
 slug: test_layout
 title: Testing layout
-date: 2023-11-26
+date: 2023-11-26T00:00:00Z
 description: Testing the layout of the site.
 project_link: none
 draft: true
@@ -17,7 +17,7 @@ tags:
 ##### Heading 5
 ###### Heading 6
 
-This is a paragraph tag. It's used for displaying text content.
+This is a paragraph tag. It's used `for` displaying text content.
 
 [Click me to visit Example website!](https://www.example.com)
 
diff --git a/src/app/components/datetime.rs b/src/app/components/datetime.rs
new file mode 100644
index 0000000..06ce4b3
--- /dev/null
+++ b/src/app/components/datetime.rs
@@ -0,0 +1,41 @@
+use leptos::*;
+use chrono::Datelike;
+
+fn human_datetime(datetime: &chrono::DateTime<chrono::Local>) -> String {
+    format!(
+        "{day} {month} {year}",
+        day = datetime.day(),
+        month = human_month(datetime.month()),
+        year = datetime.year()
+    )
+}
+
+fn human_month<'a>(month: u32) -> &'a str {
+    match month {
+        1 => "Jan.",
+        2 => "Feb.",
+        3 => "Mar.",
+        4 => "Avr.",
+        5 => "Mai",
+        6 => "Juin",
+        7 => "Juillet",
+        8 => "Août",
+        9 => "Sept.",
+        10 => "Oct.",
+        11 => "Nov.",
+        12 => "Dec.",
+        _ => "Invalide"
+    }
+}
+
+#[component]
+pub fn DateTime(
+    datetime: chrono::DateTime<chrono::Local>
+) -> impl IntoView {
+    view! {
+        <span class="icon_container">
+            <leptos_icons::Icon icon=icondata::BiCalendarAltRegular />
+            { human_datetime(&datetime) }
+        </span>
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/link.rs b/src/app/components/link.rs
index 2ccbe41..065d1bb 100644
--- a/src/app/components/link.rs
+++ b/src/app/components/link.rs
@@ -1,6 +1,4 @@
 use leptos::*;
-use leptos_icons::FiIcon::FiExternalLink;
-use leptos_icons::*;
 
 #[component]
 pub fn Link(
@@ -11,7 +9,7 @@ pub fn Link(
     view! {
         <a class="link" href={url} target="_blank">
             { children() }
-            <i><Icon icon=Icon::from(FiExternalLink) /></i>
+            <i><leptos_icons::Icon icon=icondata::FiExternalLink /></i>
         </a>
     }
 }
\ No newline at end of file
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
index 2eebd68..3e3c192 100644
--- a/src/app/components/mod.rs
+++ b/src/app/components/mod.rs
@@ -27,8 +27,16 @@ mod loading;
 
 pub use loading::Loading;
 
-mod title;
+mod nav;
 
-pub use title::Title;
+pub use nav::Nav;
 
 pub use mon_parcours::MonParcours;
+
+mod reading_time;
+
+pub use reading_time::ReadingTime;
+
+mod datetime;
+
+pub use datetime::DateTime;
\ No newline at end of file
diff --git a/src/app/components/nav.rs b/src/app/components/nav.rs
new file mode 100644
index 0000000..5e6ee8c
--- /dev/null
+++ b/src/app/components/nav.rs
@@ -0,0 +1,31 @@
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn Nav() -> impl IntoView {
+    let (mobile_menu, set_mobile_menu) = create_signal(false);
+
+    let mobile_burger = move || {
+        if mobile_menu() {
+            view! { <leptos_icons::Icon icon=icondata::IoClose /> }
+        } else {
+            view! { <leptos_icons::Icon icon=icondata::FiMenu /> }
+        }
+    };
+
+    view! {
+        <nav>
+            <div class="nav-main">
+                <A href="/" class="nav-home">Florian RICHER</A>
+
+                <span class="nav-mobile" on:click=move |_| set_mobile_menu(!mobile_menu())>
+                    {mobile_burger}
+                </span>
+            </div>
+            <div class="nav-links" class:open=move || mobile_menu()>
+                <A href="/experience" class="nav-link">Mon parcours</A>
+                <A href="/posts" class="nav-link">Blog</A>
+            </div>
+        </nav>
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/reading_time.rs b/src/app/components/reading_time.rs
new file mode 100644
index 0000000..b24be6d
--- /dev/null
+++ b/src/app/components/reading_time.rs
@@ -0,0 +1,24 @@
+use leptos::*;
+
+fn human_reading_time(reading_time: u64) -> String {
+    match reading_time {
+        0..=60 => format!("{reading_time}s"),
+        _ => {
+            let min = reading_time / 60;
+            let secs = reading_time - min * 60;
+            format!("{min}min {secs}s")
+        }
+    }
+}
+
+#[component]
+pub fn ReadingTime(
+    time: u64
+) -> impl IntoView {
+    view! {
+        <span class="icon_container">
+            <leptos_icons::Icon icon=icondata::BiTimeFiveRegular />
+            { human_reading_time(time) }
+        </span>
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/social_link.rs b/src/app/components/social_link.rs
index b897dd1..203533d 100644
--- a/src/app/components/social_link.rs
+++ b/src/app/components/social_link.rs
@@ -1,5 +1,4 @@
 use leptos::*;
-use leptos_icons::*;
 
 #[component]
 pub fn SocialLinkContainer(
@@ -17,11 +16,11 @@ pub fn SocialLink(
     children: Children,
     #[prop(optional)]
     url: Option<String>,
-    icon: Icon,
+    icon: icondata::Icon,
 ) -> impl IntoView {
     view! {
         <a class="social_link" href=url target="_blank">
-            <Icon icon=icon />
+            <leptos_icons::Icon icon=icon />
             <span>{ children() }</span>
         </a>
     }
diff --git a/src/app/components/timeline.rs b/src/app/components/timeline.rs
index 97d9166..c4d2a53 100644
--- a/src/app/components/timeline.rs
+++ b/src/app/components/timeline.rs
@@ -1,5 +1,4 @@
 use leptos::*;
-use leptos_icons::FaIcon::FaCaretDownSolid;
 use leptos_icons::*;
 
 #[component]
@@ -113,7 +112,7 @@ impl IntoView for TimelineCard {
             <details>
                 <summary>
                     { self.titles.collect_view() }
-                    <i><Icon icon=Icon::from(FaCaretDownSolid) /></i>
+                    <i><Icon icon=icondata::FaCaretDownSolid /></i>
                 </summary>
                 <div>{ self.cards.collect_view() }</div>
             </details>
diff --git a/src/app/components/title.rs b/src/app/components/title.rs
deleted file mode 100644
index e834a8d..0000000
--- a/src/app/components/title.rs
+++ /dev/null
@@ -1,17 +0,0 @@
-use leptos::*;
-use leptos_router::A;
-
-#[component]
-pub fn Title(
-    href: String,
-    #[prop[optional]]
-    title: Option<String>
-) -> impl IntoView {
-    view! {
-        <header>
-            <A href=href>r"< Retour"</A>
-            <h1>{title}</h1>
-            <span></span>
-        </header>
-    }
-}
diff --git a/src/app/components/top_component.rs b/src/app/components/top_component.rs
index 45912f1..2e3d0c2 100644
--- a/src/app/components/top_component.rs
+++ b/src/app/components/top_component.rs
@@ -1,6 +1,4 @@
 use leptos::*;
-use leptos_icons::FaIcon::{FaGithubBrands, FaLinkedinBrands, FaEnvelopeSolid};
-use leptos_icons::*;
 
 use super::*;
 
@@ -28,9 +26,9 @@ pub fn TopComponent() -> impl IntoView {
                     <a href="/posts".to_string()>Mon blog</a>
                 </div>
                 <SocialLinkContainer>
-                    <SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</SocialLink>
-                    <SocialLink icon=Icon::from(FaLinkedinBrands) url="https://www.linkedin.com/in/florian-richer-80960b129/".to_string()>Linkedin</SocialLink>
-                    <SocialLink icon=Icon::from(FaEnvelopeSolid) url="mailto:florian.richer@protonmail.com".to_string()>Mail</SocialLink>
+                    <SocialLink icon=icondata::FaGithubBrands url="https://github.com/mrdev023".to_string()>Github</SocialLink>
+                    <SocialLink icon=icondata::FaLinkedinBrands url="https://www.linkedin.com/in/florian-richer-80960b129/".to_string()>Linkedin</SocialLink>
+                    <SocialLink icon=icondata::FaEnvelopeSolid url="mailto:florian.richer@protonmail.com".to_string()>Mail</SocialLink>
                 </SocialLinkContainer>
             </div>
         </div>
diff --git a/src/app/mod.rs b/src/app/mod.rs
index 87881e6..790043f 100644
--- a/src/app/mod.rs
+++ b/src/app/mod.rs
@@ -4,7 +4,6 @@ pub mod models;
 
 mod pages;
 
-#[cfg(feature = "ssr")]
 mod utils;
 
 use leptos::*;
diff --git a/src/app/models/mod.rs b/src/app/models/mod.rs
index 73f805a..bc89fad 100644
--- a/src/app/models/mod.rs
+++ b/src/app/models/mod.rs
@@ -1,6 +1,6 @@
 mod post;
 
-pub use post::Post;
+pub use post::{Post, PostMetadata};
 
 cfg_if::cfg_if! {
     if #[cfg(feature = "ssr")] {
diff --git a/src/app/models/post.rs b/src/app/models/post.rs
index 04ae40e..348f6b0 100644
--- a/src/app/models/post.rs
+++ b/src/app/models/post.rs
@@ -5,10 +5,12 @@ pub struct PostMetadata {
     pub slug: String,
     pub image_path: String,
     pub title: String,
-    pub date: String,
+    pub date: chrono::DateTime<chrono::Local>,
     pub description: String,
     pub project_link: String,
     pub draft: bool,
+    #[serde(default)]
+    pub reading_time: u64,
     pub tags: Vec<String>,
 }
 
@@ -34,12 +36,14 @@ cfg_if::cfg_if! {
             fn try_from(content: String) -> Result<Self, Self::Error> {
                 use gray_matter::{Matter, engine::YAML};
                 let matter = Matter::<YAML>::new();
-                let post_data = matter
+                let mut post_data = matter
                     .parse_with_struct::<PostMetadata>(&content)
                     .ok_or_else(|| PostDeserializationError::InvalidFrontMatter)?;
 
                 let content = post_data.content;
 
+                post_data.data.reading_time = crate::app::utils::reading_time::calculate_reading_time(&content);
+
                 use pulldown_cmark::{Parser, Options, html};
                 let parser = Parser::new_ext(&content, Options::all());
                 let mut html_output = String::new();
diff --git a/src/app/pages/experience.rs b/src/app/pages/experience.rs
index a216fe7..e05f646 100644
--- a/src/app/pages/experience.rs
+++ b/src/app/pages/experience.rs
@@ -1,10 +1,10 @@
 use leptos::*;
-use super::super::components::{Title, MonParcours};
+use super::super::components::{Nav, MonParcours};
 #[component]
 pub fn Experience() -> impl IntoView {
     view! {
+        <Nav/>
         <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
-            <Title href="/".to_string() title="Mon parcours".to_string()/>
             <MonParcours/>
         </main>
     }
diff --git a/src/app/pages/home.rs b/src/app/pages/home.rs
index 39c39cb..f03ed2a 100644
--- a/src/app/pages/home.rs
+++ b/src/app/pages/home.rs
@@ -1,9 +1,10 @@
 use leptos::*;
-use super::super::components::{TopComponent};
+use super::super::components::TopComponent;
+
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
+        <main>
             <TopComponent/>
         </main>
     }
diff --git a/src/app/pages/posts.rs b/src/app/pages/posts.rs
index 832e81b..6c843fb 100644
--- a/src/app/pages/posts.rs
+++ b/src/app/pages/posts.rs
@@ -1,10 +1,9 @@
 use leptos::*;
-use leptos_icons::*;
 use leptos_router::*;
 use crate::app::{
-    models::Post,
+    models::{Post, PostMetadata},
     components::{
-        Title, Loading
+        Loading, Nav, ReadingTime, DateTime
     }
 };
 
@@ -50,6 +49,34 @@ pub async fn get_post(
     .and_then(|post| post.ok_or_else(|| ServerFnError::ServerError("Post not found".to_string())))
 }
 
+#[component]
+pub fn PostHeader(
+    metadata: PostMetadata,
+    full_element: bool
+) -> impl IntoView {
+    let class = if full_element {
+        "metadata border-b-2 pb-5"
+    } else {
+        "metadata"
+    };
+
+    let title = if full_element {
+        view! { <>{metadata.title.clone()}</> }.into_view()
+    } else {
+        view! { <A href=format!("/posts/{}", metadata.slug.clone())>{metadata.title.clone()}</A> }
+    };
+
+    view! {
+        <div class=class>
+            <h2>{title}</h2>
+            <p>{metadata.description.clone()}</p>
+            <DateTime datetime=metadata.date />
+            <ReadingTime time=metadata.reading_time />
+            <PostTags tags=metadata.tags.clone()/>
+        </div>
+    }
+}
+
 #[component]
 pub fn PostTags(
     tags: Vec<String>
@@ -75,7 +102,7 @@ pub fn PostListCard(
                 if post.metadata.draft {
                     Some(view!{
                         <div class="warning">
-                            <Icon icon=Icon::from(IoIcon::IoConstruct)/>
+                            <leptos_icons::Icon icon=icondata::IoConstruct/>
                         </div>
                     })
                 } else {
@@ -83,12 +110,7 @@ pub fn PostListCard(
                 }
             }
 
-            <div>
-                <PostTags tags=post.metadata.tags.clone()/>
-                <h2><A href=format!("/posts/{}", post.metadata.slug.clone())>{post.metadata.title.clone()}</A></h2>
-                <p>{post.metadata.description.clone()}</p>
-                <span>{post.metadata.date.clone()}</span>
-            </div>
+            <PostHeader metadata=post.metadata.clone() full_element=false />
         </div>
     }
 }
@@ -107,16 +129,19 @@ pub fn PostList() -> impl IntoView {
         })
     };
 
-    let title = move || match tag() {
-        Some(tag) => view! { <Title href="/posts".to_string() title=format!("Posts for {}", tag)/> },
-        None => view! { <Title href="/".to_string() title="Posts".to_string()/> }
+    let filter_view = move || {
+        tag().and_then(|tag| Some(view! {
+            <div class="mx-auto max-w-3xl mb-5">
+                Tag sélectionné : <A class="tag" href="/posts".to_string()>{tag}<leptos_icons::Icon icon=icondata::IoClose class="scale-125 ml-1 inline" /></A>
+            </div>
+        }))
     };
 
     view! {
         <Suspense fallback=move || view! { <Loading title="Chargement des posts...".to_string() /> }>
+            <Nav/>
+            {filter_view}
             <main class="posts">
-                { title }
-
                 <div class="posts__cards">{posts_view}</div>
             </main>
         </Suspense>
@@ -134,12 +159,10 @@ pub fn PostElement() -> impl IntoView {
         post.and_then(|post| {
             view! {
                 <>
-                    <Title href="/posts".to_string() title=post.metadata.title.clone()/>
-                    <PostTags tags=post.metadata.tags.clone()/>
                     {
                         if post.metadata.draft {
                             Some(view!{
-                                <div class="bg-warning text-on_warning dark:bg-dark_warning dark:text-dart_on_warning rounded-md p-5">
+                                <div class="bg-warning text-on_warning dark:bg-dark_warning dark:text-dart_on_warning rounded-md p-5 mb-5">
                                     r#"
                                     L'article est en cours d'écriture. La formulation peut ne pas être exacte et les phrases peuvent contenir des fautes.
                                     "#
@@ -149,6 +172,9 @@ pub fn PostElement() -> impl IntoView {
                             None
                         }
                     }
+
+                    <PostHeader metadata=post.metadata.clone() full_element=true />
+
                     <div inner_html={post.content.clone()}></div>
                 </>
             }
@@ -157,6 +183,7 @@ pub fn PostElement() -> impl IntoView {
 
     view! {
         <Suspense fallback=move || view! { <Loading title="Chargement du post...".to_string() /> }>
+            <Nav/>
             <main class="post">
                 {post_view}
                 <script>load();</script>
diff --git a/src/app/utils/datetime.rs b/src/app/utils/datetime.rs
new file mode 100644
index 0000000..37e8293
--- /dev/null
+++ b/src/app/utils/datetime.rs
@@ -0,0 +1,28 @@
+use chrono::{Datelike, DateTime, Local};
+
+pub fn human_datetime(datetime: &DateTime<Local>) -> String {
+    format!(
+        "{day} {month} {year}",
+        day = datetime.day(),
+        month = human_month(datetime.month()),
+        year = datetime.year()
+    )
+}
+
+fn human_month<'a>(month: u32) -> &'a str {
+    match month {
+        1 => "Jan.",
+        2 => "Feb.",
+        3 => "Mar.",
+        4 => "Avr.",
+        5 => "Mai",
+        6 => "Juin",
+        7 => "Juillet",
+        8 => "Août",
+        9 => "Sept.",
+        10 => "Oct.",
+        11 => "Nov.",
+        12 => "Dec.",
+        _ => "Invalide"
+    }
+}
\ No newline at end of file
diff --git a/src/app/utils/mod.rs b/src/app/utils/mod.rs
index 0dfbad9..e474011 100644
--- a/src/app/utils/mod.rs
+++ b/src/app/utils/mod.rs
@@ -1 +1,4 @@
-pub(crate) mod data_src;
\ No newline at end of file
+#[cfg(feature = "ssr")]
+pub(crate) mod data_src;
+
+pub(crate) mod reading_time;
\ No newline at end of file
diff --git a/src/app/utils/reading_time.rs b/src/app/utils/reading_time.rs
new file mode 100644
index 0000000..143a06c
--- /dev/null
+++ b/src/app/utils/reading_time.rs
@@ -0,0 +1,11 @@
+#[cfg(feature = "ssr")]
+pub fn calculate_reading_time(content: &String) -> u64 {
+    let doc_read_time = estimated_read_time::Options::new()
+                    .word_length(5)
+                    .technical_document(true)
+                    .technical_difficulty(2)
+                    .build()
+                    .unwrap_or_default();
+
+    estimated_read_time::text(&content, &doc_read_time).seconds()
+}
\ No newline at end of file
diff --git a/style/icon_container.css b/style/icon_container.css
new file mode 100644
index 0000000..58fbc02
--- /dev/null
+++ b/style/icon_container.css
@@ -0,0 +1,9 @@
+@layer components {
+    .icon_container {
+        @apply flex items-center gap-2;
+
+        & > svg {
+            @apply scale-125;
+        }
+    }
+}
\ No newline at end of file
diff --git a/style/nav.css b/style/nav.css
new file mode 100644
index 0000000..a56cb73
--- /dev/null
+++ b/style/nav.css
@@ -0,0 +1,37 @@
+@layer components {
+    nav {
+        @apply mx-auto max-w-3xl py-5;
+        @apply md:flex md:justify-between md:items-center; /* Transition css only for mobile */
+        @apply font-semibold relative;
+
+        & > .nav-main {
+            @apply max-md:flex max-md:justify-between max-md:items-center;
+
+            & > .nav-mobile {
+                @apply md:hidden scale-125;
+            }
+        
+            & > .nav-home {
+                @apply uppercase font-semibold text-lg;
+            }
+        }
+
+        & > .nav-links {
+            @apply max-md:transition-transform max-md:scale-y-0; /* Transition css only for mobile */
+            @apply w-full flex flex-col gap-3 md:w-auto md:flex-row;
+            @apply bg-surface dark:bg-dark_surface;
+            @apply max-md:my-5 max-md:p-5 max-md:border-2 max-md:absolute max-md:z-10;
+
+            &.open {
+                @apply max-md:scale-y-100; /* Transition css only for mobile */
+            }
+        }
+
+        & a {
+            @apply transition-colors duration-500;
+            &:hover {
+                @apply text-primary underline;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/style/portfolio.css b/style/portfolio.css
index da8be78..70dac52 100644
--- a/style/portfolio.css
+++ b/style/portfolio.css
@@ -9,6 +9,11 @@
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';
-@import './title.css';
 @import './top_component.css';
-/*@import './mermaid.css';*/
\ No newline at end of file
+@import './nav.css';
+@import './icon_container.css';
+/*@import './mermaid.css';*/
+
+body {
+    @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface px-10;
+}
\ No newline at end of file
diff --git a/style/post.css b/style/post.css
index 0c7355e..0d82e3f 100644
--- a/style/post.css
+++ b/style/post.css
@@ -1,32 +1,31 @@
 @layer components {
     .posts, .post {
-        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
-        @apply min-h-screen p-5;
+        @apply min-h-screen;
 
         & h1 {
-            @apply text-5xl;
-        }
-
-        & h2 {
             @apply text-4xl;
         }
 
-        & h3 {
+        & h2 {
             @apply text-3xl;
         }
 
-        & h4 {
+        & h3 {
             @apply text-2xl;
         }
 
-        & h5 {
+        & h4 {
             @apply text-xl;
         }
 
-        & h6 {
+        & h5 {
             @apply text-lg;
         }
 
+        & h6 {
+            @apply text-base;
+        }
+
         & h1, & h2, & h3, & h4, & h5, & h6 {
             @apply my-3 font-bold;
         }
@@ -36,25 +35,45 @@
         }
 
         & ul li {
-            @apply list-disc list-inside;
+            @apply list-disc list-inside ml-5;
         }
 
         & ol li {
-            @apply list-decimal list-inside;
+            @apply list-decimal list-inside ml-5;
+        }
+
+        & a {
+            @apply text-primary;
         }
 
         & blockquote {
-            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3;
+            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3 bg-primary/5 dark:bg-dark_primary/5;
         }
 
         & .tags_list {
             @apply flex flex-row flex-wrap gap-2;
         }
+
+        & code {
+            @apply bg-primary/10 dark:bg-dark_primary/10 rounded-md p-1;
+        }
+
+        /* Fix useless padding */
+        & pre code {
+            @apply p-0;
+        }
+
+        .metadata {
+            & > .icon_container, & > .tags_list {
+                @apply my-1;
+            }
+        }
     }
 
     .posts {
         & > .posts__cards {
-            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+            @apply grid grid-cols-1 gap-5 md:grid-cols-2;
+            @apply mx-auto max-w-3xl;
 
             & > div {
                 @apply rounded-xl overflow-hidden relative;
@@ -70,7 +89,7 @@
                 }
 
                 & > div {
-                    @apply p-5 flex flex-col gap-3;
+                    @apply p-5;
                 }
             }
         }
diff --git a/style/title.css b/style/title.css
deleted file mode 100644
index 1f6e1a4..0000000
--- a/style/title.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-    header {
-        @apply flex flex-col md:flex-row items-center justify-between p-5;
-
-        & h1 {
-            @apply my-3 font-bold text-center text-6xl mb-5 flex-1;
-        }
-    }
-}
diff --git a/style/top_component.css b/style/top_component.css
index 42d1fbd..39953e4 100644
--- a/style/top_component.css
+++ b/style/top_component.css
@@ -3,14 +3,14 @@
         @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
 
         & > div {
-            @apply flex-1 p-10;
+            @apply flex-1;
         }
 
         & > .top_component__image {
-            @apply flex justify-center items-center;
+            @apply flex justify-center items-center px-5;
 
             & > img {
-                @apply mx-auto rounded-lg;
+                @apply rounded-lg w-full;
             }
         }