diff --git a/bun.lockb b/bun.lockb
index ea54506..dec149c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss
index d7032e7..4e42303 100644
--- a/packages/core/src/_utils.scss
+++ b/packages/core/src/_utils.scss
@@ -313,6 +313,12 @@
   border-radius: var(--prj-border-radius);
 }
 
+@each $index, $variable, $value in $spacings {
+  .msp-border-#{$index} {
+    border: #{$index}px var(--msp-border-style) var(--msp-border-color);
+  }
+}
+
 .msp-text-none {
   text-transform: none;
 }
diff --git a/packages/website/.gitignore b/packages/website/.gitignore
index f13c5cc..9ac1368 100644
--- a/packages/website/.gitignore
+++ b/packages/website/.gitignore
@@ -1,7 +1,7 @@
 
-# Manually linked deps managed by bun
-sass/@**
-
+# Compiled assets managed by bun
+static/css/**/*
+static/js/**/*
 
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
diff --git a/packages/website/_scripts/build.ts b/packages/website/_scripts/build.ts
new file mode 100644
index 0000000..a4ecb9c
--- /dev/null
+++ b/packages/website/_scripts/build.ts
@@ -0,0 +1,66 @@
+import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
+import type { FileImporter } from "sass";
+
+const outdir = "./static";
+
+const nodeModuleImporter: FileImporter<"async"> = {
+	findFileUrl(url) {
+		if (url.startsWith("@")) {
+			return new URL(import.meta.resolve(url));
+		}
+
+		return null;
+	},
+};
+
+const sassPlugin: BunPlugin = {
+	name: "Sass Loader",
+	async setup(build: PluginBuilder) {
+		const sass = await import("sass");
+		build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
+			// read and compile it with the sass compiler
+			const result = await sass.compileAsync(path, {
+				importers: [nodeModuleImporter],
+			});
+
+			return {
+				loader: "css",
+				contents: result.css,
+			};
+		});
+	},
+};
+
+const assets: BuildConfig[] = [
+	{
+		entrypoints: ["./sass/style.scss"],
+		outdir: `${outdir}/css`,
+		naming: "[name].css",
+		plugins: [sassPlugin],
+		minify: true,
+
+		// On by default in Bun v1.2+
+		html: true,
+		experimentalCss: true,
+	},
+
+	{
+		entrypoints: ["./js/index.ts"],
+		outdir: `${outdir}/js`,
+		target: "browser",
+		splitting: true,
+		minify: true,
+	},
+];
+
+await Promise.all(
+	assets.map(async (item) => {
+		const result = await Bun.build(item);
+
+		if (!result.success) {
+			throw new AggregateError(result.logs, "Build failed");
+		}
+	}),
+);
+
+console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`);
diff --git a/packages/website/config.toml b/packages/website/config.toml
index be866ed..aa8c799 100644
--- a/packages/website/config.toml
+++ b/packages/website/config.toml
@@ -3,8 +3,8 @@ base_url = "https://mini-strap.alecodes.page"
 
 output_dir = "dist"
 
-# Whether to automatically compile all Sass files in the sass directory
-compile_sass = true
+# Managed by bun
+compile_sass = false
 
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = true
diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts
new file mode 100644
index 0000000..a50e789
--- /dev/null
+++ b/packages/website/js/index.ts
@@ -0,0 +1 @@
+console.log("hello world!");
diff --git a/packages/website/package.json b/packages/website/package.json
index 58a3ead..8e34106 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -6,13 +6,14 @@
 		"dev": "zola serve --port 3000 --fast"
 	},
 	"dependencies": {
-		"@mini-strap/core": "workspace:*"
+		"@mini-strap/core": "workspace:*",
+		"@mini-strap/components": "workspace:*"
 	},
 	"devDependencies": {
-		"@types/bun": "latest"
+		"@types/bun": "latest",
+		"sass": "^1.83.0"
 	},
 	"peerDependencies": {
 		"typescript": "^5.0.0"
 	}
 }
-
diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss
index e903ac2..4643c8a 100644
--- a/packages/website/sass/style.scss
+++ b/packages/website/sass/style.scss
@@ -1,4 +1,4 @@
-@import "@mini-strap/core/style.scss";
+@use "@mini-strap/core";
 
 html {
   // background-color: red;
diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html
index 4a921e4..782fc79 100644
--- a/packages/website/templates/base.html
+++ b/packages/website/templates/base.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
-<html lang={i18next.language}>
+<html lang="en">
 
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <HeadHrefLangs />
-    <title>{title}</title>
+    <title>alecodes.page</title>
     <ViewTransitions />
 
-    <link rel="stylesheet" href="style.css" />
+    <script src="/js/index.js"></script>
+    <link rel="stylesheet" href="/css/style.css" />
   </head>
 
   <body transition:animate="fade">
     <header class="position-sticky py-1 py-lg-3">
-      <Navbar />
+      {% include "partials/navbar.html" %}
     </header>
     <main>
       {% block content %}{% endblock %}
diff --git a/packages/website/templates/partials/navbar.html b/packages/website/templates/partials/navbar.html
new file mode 100644
index 0000000..77adf91
--- /dev/null
+++ b/packages/website/templates/partials/navbar.html
@@ -0,0 +1,93 @@
+<div id="main-navbar" class="pt-1">
+  <nav class="navbar navbar-desktop msp-d-none msp-d-lg-block msp-container">
+    <ul class="msp-list-unstyle msp-hstack">
+      <li class="nav-item">
+        <a class="nav-link" href={link.href}>{link.text}</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="msp-text-end msp-d-lg-none">
+    <OffCanvasBtn />
+    <OffCanvas>
+    <nav class="navbar navbar-mobile">
+      <ul class="list-unstyle text-start">
+        <li class="nav-item mb-3">
+          <a class="nav-link" href={link.href}>{link.text}</a>
+        </li>
+      </ul>
+    </nav>
+    </OffCanvas>
+  </div>
+</div>
+
+<script>
+  const setActiveLink = () => {
+    const links =
+      document.querySelectorAll < HTMLAnchorElement > (`#main-navbar a`);
+
+    links.forEach((link) => {
+      if (link.pathname === '/' && location.pathname === '/') {
+        link.classList.add('active');
+        return;
+      }
+
+      if (link.pathname === '/' && location.pathname !== '/') {
+        link.classList.remove('active');
+        return;
+      }
+
+      location.pathname.startsWith(link.pathname) ?
+        link.classList.add('active') :
+        link.classList.remove('active');
+    });
+  };
+  // Add active class to the current link
+  document.addEventListener('astro:page-load', setActiveLink, {
+    once: true
+  });
+  document.addEventListener('astro:after-swap', setActiveLink);
+</script>
+
+<style lang="scss">
+  nav {
+    width: 100%;
+  }
+
+  .navbar-desktop ul {
+    width: fit-content;
+    margin-left: auto;
+
+    .nav-item {
+      margin-bottom: 0;
+    }
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li>a {
+    padding: 0.25rem 0.5rem;
+  }
+
+  a {
+    --boder-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-decoration: none;
+
+    transition: background-color 200ms, color 200ms;
+  }
+
+  a.active {
+    border: 1px solid var(--prj-accent-bg);
+  }
+
+  a:hover {
+    --border-color: var(--prj-accent-bg);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+    border: 1px solid var(--border-color);
+  }
+</style>