diff --git a/Cargo.lock b/Cargo.lock
index 0def4cd..d933457 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1,6 +1,6 @@
 # This file is automatically @generated by Cargo.
 # It is not intended for manual editing.
-version = 3
+version = 4
 
 [[package]]
 name = "addr2line"
@@ -996,6 +996,28 @@ dependencies = [
  "regex-automata 0.1.10",
 ]
 
+[[package]]
+name = "maud"
+version = "0.26.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df518b75016b4289cdddffa1b01f2122f4a49802c93191f3133f6dc2472ebcaa"
+dependencies = [
+ "itoa",
+ "maud_macros",
+]
+
+[[package]]
+name = "maud_macros"
+version = "0.26.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa453238ec218da0af6b11fc5978d3b5c3a45ed97b722391a2a11f3306274e18"
+dependencies = [
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "md-5"
 version = "0.10.6"
@@ -1353,6 +1375,29 @@ version = "0.2.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5b40af805b3121feab8a3c29f04d8ad262fa8e0561883e7653e024ae4479e6de"
 
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
 [[package]]
 name = "proc-macro2"
 version = "1.0.83"
@@ -2626,6 +2671,7 @@ dependencies = [
  "futures",
  "hex",
  "log",
+ "maud",
  "rayon",
  "regex",
  "ring",
diff --git a/Cargo.toml b/Cargo.toml
index df2454a..a040f9b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -20,3 +20,4 @@ serde_json = "1.0.111"
 tokio = { version = "1.35.1", features = ["full"] }
 uuid = { version = "1.8.0", features = ["v4", "serde"] }
 sqlx = { version = "0.8", features = ["postgres", "runtime-tokio-native-tls", "derive", "uuid", "chrono", "json"] }
+maud = "0.26.0"
diff --git a/migrations/0001_init.sql b/migrations/0001_init.sql
index 26e02dc..877c1ac 100644
--- a/migrations/0001_init.sql
+++ b/migrations/0001_init.sql
@@ -4,7 +4,6 @@ CREATE TABLE IF NOT EXISTS "youtube_meta" (
 	"description"	TEXT,
 	"uploader_name"	TEXT,
 	"uploader_id"	TEXT,
-	"duration"	INTEGER,
 	"views"	INTEGER,
 	"upload_date"	DATE,
 	PRIMARY KEY("id")
@@ -28,8 +27,8 @@ CREATE TABLE IF NOT EXISTS "videos" (
 	"id" UUID NOT NULL PRIMARY KEY DEFAULT gen_random_uuid(),
 	"directory"	TEXT NOT NULL,
 	"path"	TEXT NOT NULL,
-	"duration" INTEGER,
-	"title"	TEXT,
+	"duration" FLOAT NOT NULL,
+	"title"	TEXT NOT NULL,
 	"youtube_id" TEXT,
 	FOREIGN KEY("youtube_id") REFERENCES "youtube_meta"("id")
 );
diff --git a/src/library/mod.rs b/src/library/mod.rs
index 1448cf0..59dc468 100644
--- a/src/library/mod.rs
+++ b/src/library/mod.rs
@@ -42,7 +42,7 @@ impl Library {
     }
 
     pub async fn get_directory_videos(&self, dir: &str) -> Vec<Video> {
-        sqlx::query_as("SELECT * FROM videos WHERE directory = ?1")
+        sqlx::query_as("SELECT * FROM videos WHERE directory = $1")
             .bind(dir)
             .fetch_all(&self.conn)
             .await
diff --git a/src/library/video.rs b/src/library/video.rs
index f8357b3..8a38e1f 100644
--- a/src/library/video.rs
+++ b/src/library/video.rs
@@ -1,4 +1,8 @@
-use crate::{get_pg, pages::ToAPI, yt_meta};
+use crate::{
+    get_pg,
+    pages::ToAPI,
+    yt_meta::{self, get_vid_duration},
+};
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use sqlx::prelude::FromRow;
@@ -10,7 +14,6 @@ pub struct YouTubeMeta {
     pub title: String,
     pub uploader_name: String,
     pub uploader_id: String,
-    pub duration: i64,
     pub views: i64,
     pub upload_date: chrono::NaiveDate,
 }
@@ -52,7 +55,7 @@ pub struct Video {
     pub id: uuid::Uuid,
     pub directory: String,
     pub path: String,
-    pub duration: i64,
+    pub duration: f64,
     pub title: String,
     youtube_id: Option<String>,
 }
@@ -92,6 +95,8 @@ impl Video {
 
         let mut tx = db.begin().await.unwrap();
 
+        let vid_duration = get_vid_duration(v).unwrap();
+
         if let Some(meta) = yt_meta::get_youtube_metadata(v) {
             sqlx::query("INSERT INTO youtube_meta (id, title, description, uploader_name, uploader_id, duration, views, upload_date) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)")
                 .bind(&meta.youtube_id().unwrap())
@@ -104,9 +109,10 @@ impl Video {
                 .bind(&meta.upload_date())
                 .execute(&mut *tx).await.unwrap();
 
-            let vid = sqlx::query_as("INSERT INTO videos (directory, path, title, youtube_id) VALUES ($1, $2, $3, $4, $5)")
+            let vid = sqlx::query_as("INSERT INTO videos (directory, path, duration, title, youtube_id) VALUES ($1, $2, $3, $4, $5)")
                 .bind(&dir)
                 .bind(v.to_str().unwrap())
+                .bind(vid_duration)
                 .bind(meta.title())
                 .bind(meta.youtube_id().unwrap())
                 .fetch_one(&mut *tx).await.unwrap();
@@ -139,10 +145,11 @@ impl Video {
         }
 
         let vid = sqlx::query_as(
-            "INSERT INTO videos (directory, path, title) VALUES ($1, $2, $3, $4) RETURNING *",
+            "INSERT INTO videos (directory, path, duration, title) VALUES ($1, $2, $3, $4) RETURNING *",
         )
         .bind(dir)
         .bind(v.to_str().unwrap())
+        .bind(vid_duration)
         .bind(file_name)
         .fetch_one(&mut *tx)
         .await
diff --git a/src/pages/components.rs b/src/pages/components.rs
new file mode 100644
index 0000000..70c6bbc
--- /dev/null
+++ b/src/pages/components.rs
@@ -0,0 +1,70 @@
+use maud::{html, PreEscaped};
+
+pub fn shell(content: PreEscaped<String>, title: &str) -> PreEscaped<String> {
+    html! {
+        html {
+            head {
+                title=(title)
+            };
+            body {
+                (content)
+            }
+        }
+    }
+}
+
+pub fn loading_spinner() -> PreEscaped<String> {
+    html! {
+        style {
+            ".spinner { display: flex;justify-content: center;align-items: center;height: 100vh;}
+            .spinner-border { border: 2px solid #007bff;border-top: 2px solid transparent;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;}
+            @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}"
+        };
+        div class="spinner" {
+            div class="spinner-border" {};
+        };
+    }
+}
+
+pub fn search_bar(query: &str) -> PreEscaped<String> {
+    html! {
+        form hx-get="/search" action="/search" hx-push-url="true" hx-target="#main-view" hx-swap="innerHTML" {
+            input style="width: 100%;" value=(query) name="query" type="search" placeholder="Search...";
+        };
+    }
+}
+
+pub fn video_element(video: &mut Video) -> PreEscaped<String> {
+    html!(
+        @let desc = video.description().unwrap_or_default().to_owned();
+        @let video_hash = video.hash();
+                article class="container-fluid" style="margin: 50px; cursor: pointer;" {
+                    a href=(format!("/watch?v={video_hash}")) style="text-decoration:none !important;" {
+                img style="width: 350px;" width="480" src=(format!("/video/thumbnail?v={video_hash}"));
+                div style="padding: 10px;" {
+                    h2 style="margin: 0; font-size: 18px;" { (video.title().unwrap()) };
+                    @if !desc.is_empty() {
+                        p style="margin: 0; color: grey; font-size: 14px;margin-top: 10px;" { (desc.chars().take(200).chain("...".to_string().chars()).take(203).collect::<String>()) };
+                    };
+                };
+            };
+                };
+    )
+}
+
+pub fn header(query: &str) -> PreEscaped<String> {
+    html!(
+        header style="padding: 10px 0; display: flex; justify-content: space-between;" {
+            a href="/" style="text-decoration: none; margin-left: 20px;" {
+                div style="margin-right: 20px;display:flex;align-items: center" {
+                    img src="/icon" width="64" style="margin-top: -25px;margin-right: 15px;border-radius: 20%;";
+                    p style="font-size: 42px;" { "WatchDogs" };
+                };
+            };
+            div style="width: 35px;" {};
+            div style="flex-grow: 1; text-align: center;" {
+            (search_bar(query));
+            };
+        };
+    )
+}
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index 2c7ef59..ff06930 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -1,4 +1,5 @@
 pub mod assets;
+pub mod components;
 pub mod index;
 pub mod yt;
 
diff --git a/src/yt_meta.rs b/src/yt_meta.rs
index 3b7ab88..02665e5 100644
--- a/src/yt_meta.rs
+++ b/src/yt_meta.rs
@@ -25,6 +25,32 @@ pub fn get_youtube_metadata(path: &PathBuf) -> Option<YouTubeMeta> {
     Some(YouTubeMeta { inner: val })
 }
 
+pub fn get_vid_duration(path: &PathBuf) -> Option<f64> {
+    // ffprobe -v error -show_entries format=duration -of csv=p=0 input_video.mp4
+    let cmd = std::process::Command::new("ffprobe")
+        .arg("-v")
+        .arg("error")
+        .arg("-show_entries")
+        .arg("format=duration")
+        .arg("-of")
+        .arg("csv=p=0")
+        .arg(path.to_str().unwrap())
+        .stdin(Stdio::piped())
+        .stdout(Stdio::piped())
+        .stderr(Stdio::piped())
+        .spawn()
+        .unwrap();
+
+    let out = cmd.wait_with_output().unwrap();
+
+    let stdout = String::from_utf8_lossy(&out.stdout).to_string();
+    //let stderr = String::from_utf8_lossy(&out.stderr).to_string();
+
+    let val: f64 = stdout.trim().parse().unwrap();
+    log::info!("Extracted Duration from {path:?}");
+    Some(val)
+}
+
 pub struct YouTubeMeta {
     inner: serde_json::Value,
 }