diff --git a/web/src/utils/file.test.ts b/web/src/utils/file.test.ts
new file mode 100644
index 0000000000..1ab0ed48c3
--- /dev/null
+++ b/web/src/utils/file.test.ts
@@ -0,0 +1,25 @@
+import { test, expect } from "vitest";
+
+import { getExtension } from "./file";
+
+test("getExtension function returns correct extension when filename has extension", () => {
+  expect(getExtension("file.txt")).toBe("txt");
+  expect(getExtension("document.pdf")).toBe("pdf");
+  expect(getExtension("image.jpeg")).toBe("jpeg");
+});
+
+test("getExtension function returns empty string when filename does not have an extension", () => {
+  expect(getExtension("filename")).toBe("");
+  expect(getExtension("anotherfile")).toBe("");
+  expect(getExtension("noextension")).toBe("");
+});
+
+test("getExtension function returns correct extension when filename has multiple dots", () => {
+  expect(getExtension("archive.tar.gz")).toBe("gz");
+  expect(getExtension("backup.tar.gz")).toBe("gz");
+  expect(getExtension("code.min.js")).toBe("js");
+});
+
+test("getExtension function returns empty string when filename is undefined or null", () => {
+  expect(getExtension(undefined)).toBe("");
+});
diff --git a/web/src/utils/format.test.ts b/web/src/utils/format.test.ts
new file mode 100644
index 0000000000..15d5f0925f
--- /dev/null
+++ b/web/src/utils/format.test.ts
@@ -0,0 +1,38 @@
+import moment from "moment";
+import { test, expect } from "vitest";
+
+import { dateTimeFormat, bytesFormat, transformMomentToString } from "./format";
+
+test("dateTimeFormat function returns formatted date in local timezone", () => {
+  const date = new Date("2022-01-01T12:00:00");
+  expect(dateTimeFormat(date)).toBe("2022-01-01 12:00");
+});
+
+test("dateTimeFormat function returns formatted date in UTC timezone", () => {
+  const date = new Date("2022-01-01T12:00:00");
+  expect(dateTimeFormat(date, "YYYY-MM-DD HH:mm", false)).toBe("2022-01-01 12:00");
+});
+
+test("bytesFormat function returns formatted string for bytes", () => {
+  expect(bytesFormat(1024)).toBe("1 KB");
+  expect(bytesFormat(1048576)).toBe("1 MB");
+  expect(bytesFormat(0)).toBe("0 Bytes");
+});
+
+test("transformMomentToString function returns formatted string for moment objects", () => {
+  const momentObject = moment("2022-01-01T12:00:00");
+  expect(transformMomentToString(momentObject)).toContain("2022-01-01T12:00:00");
+});
+
+test("transformMomentToString function returns formatted string for array of moment objects", () => {
+  const date1 = "2022-01-01T12:00:00";
+  const date2 = "2022-01-02T12:00:00";
+  const result = transformMomentToString([moment(date1), moment(date2)]);
+  expect(transformMomentToString(result[0])).toContain(date1);
+  expect(transformMomentToString(result[1])).toContain(date2);
+});
+
+test("transformMomentToString function returns original value for non-moment objects", () => {
+  const value = "2022-01-01T12:00:00";
+  expect(transformMomentToString(value)).toBe(value);
+});
diff --git a/web/src/utils/id.test.ts b/web/src/utils/id.test.ts
new file mode 100644
index 0000000000..2b92d92186
--- /dev/null
+++ b/web/src/utils/id.test.ts
@@ -0,0 +1,19 @@
+import { test, expect } from "vitest";
+
+import { newID } from "./id";
+
+test("newID function returns a string", () => {
+  const id = newID();
+  expect(typeof id).toBe("string");
+});
+
+test("newID function returns a lowercase ULID", () => {
+  const id = newID();
+  expect(id).toMatch(/^[0-9a-z]{26}$/);
+});
+
+test("newID function returns unique IDs", () => {
+  const id1 = newID();
+  const id2 = newID();
+  expect(id1).not.toBe(id2);
+});
diff --git a/web/src/utils/path.test.ts b/web/src/utils/path.test.ts
new file mode 100644
index 0000000000..0483de8117
--- /dev/null
+++ b/web/src/utils/path.test.ts
@@ -0,0 +1,13 @@
+import { test, expect } from "vitest";
+
+import { splitPathname } from "./path";
+
+test("splitPathname function correctly splits pathname into primary, secondary, and sub routes", () => {
+  const pathname1 = "localhost:3000/workspace/xxx";
+  const pathname2 = "localhost:3000/workspace/xxx/project/yyy";
+  const pathname3 = "localhost:3000/workspace/xxx/project/yyy/content/zzz";
+
+  expect(splitPathname(pathname1)).toEqual(["workspace", undefined, undefined]);
+  expect(splitPathname(pathname2)).toEqual(["workspace", "project", undefined]);
+  expect(splitPathname(pathname3)).toEqual(["workspace", "project", "content"]);
+});
diff --git a/web/src/utils/regex.test.ts b/web/src/utils/regex.test.ts
new file mode 100644
index 0000000000..541ee610da
--- /dev/null
+++ b/web/src/utils/regex.test.ts
@@ -0,0 +1,29 @@
+import { test, expect } from "vitest";
+
+import { validateKey, validateURL } from "./regex";
+
+test("validateKey function returns true for valid keys", () => {
+  expect(validateKey("valid_key")).toBe(true);
+  expect(validateKey("anotherKey123")).toBe(true);
+  expect(validateKey("123_456")).toBe(true);
+});
+
+test("validateKey function returns false for invalid keys", () => {
+  expect(validateKey("")).toBe(false);
+  expect(validateKey("too_long_key_to_validate_whether_it_is_valid_or_not")).toBe(false);
+  expect(validateKey("with spaces")).toBe(false);
+  expect(validateKey("special!char")).toBe(false);
+});
+
+test("validateURL function returns true for valid URLs", () => {
+  expect(validateURL("http://example.com")).toBe(true);
+  expect(validateURL("https://www.example.com")).toBe(true);
+  expect(validateURL("ftp://ftp.example.com")).toBe(true);
+});
+
+test("validateURL function returns false for invalid URLs", () => {
+  expect(validateURL("example.com")).toBe(false);
+  expect(validateURL("htp://example.com")).toBe(false);
+  expect(validateURL("http://example")).toBe(false);
+  expect(validateURL("http://localhost:3000")).toBe(false);
+});
diff --git a/web/src/utils/sort.test.ts b/web/src/utils/sort.test.ts
new file mode 100644
index 0000000000..27f574fb84
--- /dev/null
+++ b/web/src/utils/sort.test.ts
@@ -0,0 +1,27 @@
+import { test, expect } from "vitest";
+
+import { dateSortCallback, numberSortCallback, stringSortCallback } from "./sort";
+
+test("dateSortCallback sorts dates correctly", () => {
+  const date1 = new Date("2022-01-01");
+  const date2 = new Date("2022-01-02");
+  const date3 = new Date("2022-01-03");
+
+  expect(dateSortCallback(date1, date2)).toBeLessThan(0);
+  expect(dateSortCallback(date2, date1)).toBeGreaterThan(0);
+  expect(dateSortCallback(date2, date3)).toBeLessThan(0);
+  expect(dateSortCallback(date3, date2)).toBeGreaterThan(0);
+  expect(dateSortCallback(date1, date1)).toBe(0);
+});
+
+test("numberSortCallback sorts numbers correctly", () => {
+  expect(numberSortCallback(1, 2)).toBeLessThan(0);
+  expect(numberSortCallback(2, 1)).toBeGreaterThan(0);
+  expect(numberSortCallback(2, 2)).toBe(0);
+});
+
+test("stringSortCallback sorts strings correctly", () => {
+  expect(stringSortCallback("apple", "banana")).toBeLessThan(0);
+  expect(stringSortCallback("banana", "apple")).toBeGreaterThan(0);
+  expect(stringSortCallback("banana", "banana")).toBe(0);
+});
diff --git a/web/src/utils/stringUtils.test.ts b/web/src/utils/stringUtils.test.ts
new file mode 100644
index 0000000000..3e37bcd811
--- /dev/null
+++ b/web/src/utils/stringUtils.test.ts
@@ -0,0 +1,12 @@
+import { test, expect } from "vitest";
+
+import { capitalizeFirstLetter } from "./stringUtils";
+
+test("capitalizeFirstLetter capitalizes the first letter of a string and converts the rest to lowercase", () => {
+  expect(capitalizeFirstLetter("hello")).toBe("Hello");
+  expect(capitalizeFirstLetter("wORLD")).toBe("World");
+  expect(capitalizeFirstLetter("hElLo")).toBe("Hello");
+  expect(capitalizeFirstLetter("")).toBe("");
+  expect(capitalizeFirstLetter("a")).toBe("A");
+  expect(capitalizeFirstLetter("capitalization")).toBe("Capitalization");
+});