diff --git a/src/app/api/media/[mediaId]/route.ts b/src/app/api/media/[mediaId]/route.ts
index afe680b82e79205f3638b1960a4e0cf153b359aa..46a7b54728ad8f482d42b04945d1b01d13c1e6c3 100644
--- a/src/app/api/media/[mediaId]/route.ts
+++ b/src/app/api/media/[mediaId]/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse, NextRequest } from "next/server"
 
 import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType";
 
 export async function GET(req: NextRequest) {
   const mediaId = req.url.split("/").pop() || ""
diff --git a/src/app/api/video/[videoId]/route.ts b/src/app/api/video/[videoId]/route.ts
index 2b53ca8e855d1397c5364400c77e4581fcb5a673..fa073c26322dbc2d347d31bfdb938c5f734f497a 100644
--- a/src/app/api/video/[videoId]/route.ts
+++ b/src/app/api/video/[videoId]/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse, NextRequest } from "next/server"
 
 import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType";
 
 /**
  * @deprecated
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b6d9afca982f4ae47660953297b9b6d9683ffb7f..822bf863d2902ab6306322c49eced2c5046f1813 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { Roboto } from 'next/font/google'
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils/cn'
 
 import './globals.css'
 import Head from 'next/head'
diff --git a/src/app/main.tsx b/src/app/main.tsx
index 8c8b451c57e156ecb4f254835eb23f6bd1b71b81..2696711cd28a0ea653257c73c455502127d949ae 100644
--- a/src/app/main.tsx
+++ b/src/app/main.tsx
@@ -1,20 +1,22 @@
 "use client"
 
+import { useEffect } from "react"
+import { usePathname, useRouter } from "next/navigation"
+
+import { ChannelInfo, MediaInfo } from "@/types/general"
+import { getCollectionKey } from "@/lib/business/getCollectionKey"
+
 import { useStore } from "./state/useStore"
 import { HomeView } from "./views/home-view"
 import { PublicChannelsView } from "./views/public-channels-view"
 import { PublicChannelView } from "./views/public-channel-view"
 import { UserChannelView } from "./views/user-channel-view"
-import { PublicVideoView } from "./views/public-video-view"
 import { UserAccountView } from "./views/user-account-view"
 import { NotFoundView } from "./views/not-found-view"
-import { ChannelInfo, MediaInfo } from "@/types/general"
-import { useEffect } from "react"
-import { usePathname, useRouter } from "next/navigation"
-import { TubeLayout } from "./interface/tube-layout"
+import { TubeLayout } from "../components/interface/tube-layout"
 import { PublicMusicVideosView } from "./views/public-music-videos-view"
-import { getCollectionKey } from "@/lib/getCollectionKey"
-import { PublicVideoEmbedView } from "./views/public-video-embed-view"
+import { PublicMediaEmbedView } from "./views/public-media-embed-view"
+import { PublicMediaView } from "./views/public-media-view"
 
 // this is where we transition from the server-side space
 // and the client-side space
@@ -139,12 +141,12 @@ export function Main({
   return (
     <TubeLayout>
       {view === "home" && <HomeView />}
-      {view === "public_video_embed" && <PublicVideoEmbedView />}
-      {view === "public_video" && <PublicVideoView />}
+      {view === "public_media_embed" && <PublicMediaEmbedView />}
+      {view === "public_media" && <PublicMediaView />}
       {view === "public_music_videos" && <PublicMusicVideosView />}
       {view === "public_channels" && <PublicChannelsView />}
       {view === "public_channel" && <PublicChannelView />}
-      {/*view === "user_videos" && <UserVideosView />*/}
+      {/*view === "user_medias" && <UserMediasView />*/}
       {view === "user_channel" && <UserChannelView />}
       {view === "user_account" && <UserAccountView />}
       {view === "not_found" && <NotFoundView />}
diff --git a/src/app/server/actions/ai-tube-hf/deleteFileFromDataset.ts b/src/app/server/actions/ai-tube-hf/deleteFileFromDataset.ts
index 41ebed5961b00f345f553670e60e582d784410f4..46774e754d92b26bde06bf5d894c14c38dc7a771 100644
--- a/src/app/server/actions/ai-tube-hf/deleteFileFromDataset.ts
+++ b/src/app/server/actions/ai-tube-hf/deleteFileFromDataset.ts
@@ -1,4 +1,4 @@
-import { deleteFile } from "@/huggingface/hub/src"
+import { deleteFile } from "@/lib/huggingface/hub/src"
 
 import { getCredentials } from "./getCredentials"
 
diff --git a/src/app/server/actions/ai-tube-hf/downloadClapProject.ts b/src/app/server/actions/ai-tube-hf/downloadClapProject.ts
index 304a86c0c353ca30d34372edd8378fb3e4ff3ea5..03c6b993b53b9df545cfafd484eba797d3714e68 100644
--- a/src/app/server/actions/ai-tube-hf/downloadClapProject.ts
+++ b/src/app/server/actions/ai-tube-hf/downloadClapProject.ts
@@ -1,10 +1,10 @@
 import { v4 as uuidv4 } from "uuid"
-import { Credentials } from "@/huggingface/hub/src"
+import { Credentials } from "@/lib/huggingface/hub/src"
 
-import { ClapProject } from "@/clap/types"
+import { ClapProject } from "@/lib/clap/types"
 import { ChannelInfo, MediaInfo, VideoRequest } from "@/types/general"
 import { defaultVideoModel } from "@/app/config"
-import { parseClap } from "@/clap/parseClap"
+import { parseClap } from "@/lib/clap/parseClap"
 
 import { parseVideoModelName } from "../utils/parseVideoModelName"
 import { computeOrientationProjectionWidthHeight } from "../utils/computeOrientationProjectionWidthHeight"
diff --git a/src/app/server/actions/ai-tube-hf/downloadFileAsBlob.ts b/src/app/server/actions/ai-tube-hf/downloadFileAsBlob.ts
index a39be349d18e9dee55f6644725301a733e9bc143..e4c073bd915b0bb80d42a887076ca34a3ba6e694 100644
--- a/src/app/server/actions/ai-tube-hf/downloadFileAsBlob.ts
+++ b/src/app/server/actions/ai-tube-hf/downloadFileAsBlob.ts
@@ -1,4 +1,4 @@
-import { downloadFile } from "@/huggingface/hub/src"
+import { downloadFile } from "@/lib/huggingface/hub/src"
 import { getCredentials } from "./getCredentials"
 
 export async function downloadFileAsBlob({
diff --git a/src/app/server/actions/ai-tube-hf/downloadFileAsText.ts b/src/app/server/actions/ai-tube-hf/downloadFileAsText.ts
index 3e56721cdaa233c112f6063f6c6d84738c1f6051..2c55a9b02b1e01bd75dfb45be027417d7779d068 100644
--- a/src/app/server/actions/ai-tube-hf/downloadFileAsText.ts
+++ b/src/app/server/actions/ai-tube-hf/downloadFileAsText.ts
@@ -1,4 +1,4 @@
-import { downloadFile } from "@/huggingface/hub/src"
+import { downloadFile } from "@/lib/huggingface/hub/src"
 import { getCredentials } from "./getCredentials"
 
 export async function downloadFileAsText({
diff --git a/src/app/server/actions/ai-tube-hf/getCredentials.ts b/src/app/server/actions/ai-tube-hf/getCredentials.ts
index 913e5f2b8eda9eb7f0ad680fb2e69850240fa608..262e856fdd9cb7f3cdc8a054e42bbf80a2187145 100644
--- a/src/app/server/actions/ai-tube-hf/getCredentials.ts
+++ b/src/app/server/actions/ai-tube-hf/getCredentials.ts
@@ -1,7 +1,7 @@
 
 // safe way to get the credentials
 
-import { Credentials, WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 
 import { adminCredentials, adminUsername } from "../config"
 
diff --git a/src/app/server/actions/ai-tube-hf/getPrivateChannels.ts b/src/app/server/actions/ai-tube-hf/getPrivateChannels.ts
index d6a1bbfb07a9e989dc4a5c93da07648933762d02..862ded92a54df6fec1d8ee0841bcac4718ebca9a 100644
--- a/src/app/server/actions/ai-tube-hf/getPrivateChannels.ts
+++ b/src/app/server/actions/ai-tube-hf/getPrivateChannels.ts
@@ -1,6 +1,6 @@
 "use server"
 
-import { Credentials, listDatasets, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, listDatasets, whoAmI } from "@/lib/huggingface/hub/src"
 import { ChannelInfo } from "@/types/general"
 
 import { adminCredentials } from "../config"
diff --git a/src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts b/src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts
index cf786dbe086d307049aa5b8dcabc76d06da0b301..540bec49deb5981d03214e323c6cd0b8eba5e26c 100644
--- a/src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts
+++ b/src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts
@@ -2,7 +2,7 @@
 
 import { ChannelInfo, VideoRequest } from "@/types/general"
 import { getCredentials } from "./getCredentials"
-import { listFiles } from "@/huggingface/hub/src"
+import { listFiles } from "@/lib/huggingface/hub/src"
 import { parsePromptFileName } from "../utils/parsePromptFileName"
 import { downloadFileAsText } from "./downloadFileAsText"
 import { parseDatasetPrompt } from "../utils/parseDatasetPrompt"
diff --git a/src/app/server/actions/ai-tube-hf/parseChannel.ts b/src/app/server/actions/ai-tube-hf/parseChannel.ts
index 54660ba413f5748e60ee3c5852e500c1518b92e3..bbbf60498c1956fce3298ad40582ab23957ae3d2 100644
--- a/src/app/server/actions/ai-tube-hf/parseChannel.ts
+++ b/src/app/server/actions/ai-tube-hf/parseChannel.ts
@@ -1,6 +1,6 @@
 "use server"
 
-import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, downloadFile, whoAmI } from "@/lib/huggingface/hub/src"
 import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
 import { ChannelInfo, VideoGenerationModel, VideoOrientation } from "@/types/general"
 
diff --git a/src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts b/src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts
index 7ccf9d6f91890ae01a48888451cf724f335add58..e7aca9d4209f2c497f1ed65180e15813d319d7ab 100644
--- a/src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts
+++ b/src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts
@@ -2,7 +2,7 @@
 
 import { Blob } from "buffer"
 
-import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, uploadFile, whoAmI } from "@/lib/huggingface/hub/src"
 import { ChannelInfo, VideoGenerationModel, MediaInfo, VideoOrientation, VideoRequest } from "@/types/general"
 import { formatPromptFileName } from "../utils/formatPromptFileName"
 import { computeOrientationProjectionWidthHeight } from "../utils/computeOrientationProjectionWidthHeight"
diff --git a/src/app/server/actions/comments.ts b/src/app/server/actions/comments.ts
index 1b3cd9ce503245542c9663274a22b1067586ece3..e9fae73180d2df954452a2f30d9ecf42fb72529c 100644
--- a/src/app/server/actions/comments.ts
+++ b/src/app/server/actions/comments.ts
@@ -3,7 +3,7 @@
 import { v4 as uuidv4 } from "uuid"
 
 import { CommentInfo, StoredCommentInfo } from "@/types/general"
-import { stripHtml } from "@/lib/stripHtml"
+import { stripHtml } from "@/lib/utils/stripHtml"
 import { getCurrentUser, getUsers } from "./users"
 import { redis } from "./redis"
 
diff --git a/src/app/server/actions/config.ts b/src/app/server/actions/config.ts
index d01d6420d0a30be87d0682d764bf6b877b34b515..de38300616cd16f46c3e1828b268b31ddfe9763c 100644
--- a/src/app/server/actions/config.ts
+++ b/src/app/server/actions/config.ts
@@ -1,5 +1,5 @@
 
-import { Credentials } from "@/huggingface/hub/src"
+import { Credentials } from "@/lib/huggingface/hub/src"
 
 export const adminApiKey = `${process.env.ADMIN_HUGGING_FACE_API_TOKEN || ""}`
 export const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
diff --git a/src/app/server/actions/stats.ts b/src/app/server/actions/stats.ts
index 5164f3e8966463bf7cd432a16d1b1f815ca0926b..ed79d7c0d4e305b414959eae0b905aad8d146a7f 100644
--- a/src/app/server/actions/stats.ts
+++ b/src/app/server/actions/stats.ts
@@ -1,7 +1,7 @@
 "use server"
 
 import { developerMode } from "@/app/config"
-import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 import { MediaRating } from "@/types/general"
 import { redis } from "./redis";
 
diff --git a/src/app/server/actions/users.ts b/src/app/server/actions/users.ts
index fef56a2ce023a57f64d199aca30236c3da6d9e2c..74c10d335cb1d021399f1b227d862ef58408bf8d 100644
--- a/src/app/server/actions/users.ts
+++ b/src/app/server/actions/users.ts
@@ -1,6 +1,6 @@
 "use server"
 
-import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 import {  UserInfo } from "@/types/general"
 import { adminApiKey } from "./config"
 import { redis } from "./redis"
diff --git a/src/app/server/actions/utils/censorship.ts b/src/app/server/actions/utils/censorship.ts
index 09a40ca21bb8a25b705d0d86f1df7b073f4c1c97..52949d785920fbd0eb8659a46dc52316d3675465 100644
--- a/src/app/server/actions/utils/censorship.ts
+++ b/src/app/server/actions/utils/censorship.ts
@@ -3,7 +3,7 @@
 // for some naked anime stuff or whatever
 // I also want to avoid a PR scandal due to some bad user generated content
 
-import { computeSecretFingerprint } from "@/lib/computeSecretFingerprint"
+import { computeSecretFingerprint } from "@/lib/utils/computeSecretFingerprint"
 
 // those keywords have been generated by looking at the logs of the panorama and the AI Comic Factory
 // those are real requests some users tried to attempt.. :|
diff --git a/src/app/state/useStore.ts b/src/app/state/useStore.ts
index 86507bdad128c591fe5b6e8239b4f933cc171c08..721b4656a7f9076c3b9412d565239c38eae4a9c5 100644
--- a/src/app/state/useStore.ts
+++ b/src/app/state/useStore.ts
@@ -105,8 +105,8 @@ export const useStore = create<{
   setPathname: (pathname: string) => {
     const routes: Record<string, InterfaceView> = {
       "/": "home",
-      "/watch": "public_video",
-      "/embed": "public_video_embed",
+      "/watch": "public_media",
+      "/embed": "public_media_embed",
       "/music": "public_music_videos",
       "/channels": "public_channels",
       "/channel": "public_channel",
diff --git a/src/app/views/home-view/index.tsx b/src/app/views/home-view/index.tsx
index 0c1a79e0f0f8230bdc993437476ef0920da9da5d..9ffe2eff03b4012b8cf4361875c154106e49f2d1 100644
--- a/src/app/views/home-view/index.tsx
+++ b/src/app/views/home-view/index.tsx
@@ -3,10 +3,10 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
-import { VideoList } from "@/app/interface/video-list"
+import { VideoList } from "@/components/interface/video-list"
 import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
 import { extendVideosWithStats } from "@/app/server/actions/ai-tube-hf/extendVideosWithStats"
 
@@ -34,7 +34,7 @@ export function HomeView() {
   }, [currentTag])
 
   const handleSelect = (video: MediaInfo) => {
-    setView("public_video")
+    setView("public_media")
     setPublicVideo(video)
   }
 
diff --git a/src/app/views/not-found-view/index.tsx b/src/app/views/not-found-view/index.tsx
index 79bd2b9be533e11158b58b848c3fa40fb33f3d55..99ad07b17414b55fdcad752908d7f5d8b18db204 100644
--- a/src/app/views/not-found-view/index.tsx
+++ b/src/app/views/not-found-view/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export function NotFoundView() {
   return (
diff --git a/src/app/views/public-channel-view/index.tsx b/src/app/views/public-channel-view/index.tsx
index a72f6c643dd700717116b13c05ebf635e23c1e41..1ec2a060b2ffaa40e89c035cac589997adbe06dd 100644
--- a/src/app/views/public-channel-view/index.tsx
+++ b/src/app/views/public-channel-view/index.tsx
@@ -3,9 +3,9 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { VideoList } from "@/app/interface/video-list"
-import { DefaultAvatar } from "@/app/interface/default-avatar"
+import { cn } from "@/lib/utils/cn"
+import { VideoList } from "@/components/interface/video-list"
+import { DefaultAvatar } from "@/components/interface/default-avatar"
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()
diff --git a/src/app/views/public-channels-view/index.tsx b/src/app/views/public-channels-view/index.tsx
index 14dfc362622e0aec16e219e1c2bc810e482662bb..8611aaa11a084431e17f266e15bf37373960505c 100644
--- a/src/app/views/public-channels-view/index.tsx
+++ b/src/app/views/public-channels-view/index.tsx
@@ -3,9 +3,9 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
-import { ChannelList } from "@/app/interface/channel-list"
+import { ChannelList } from "@/components/interface/channel-list"
 
 export function PublicChannelsView() {
   const [_isPending, startTransition] = useTransition()
diff --git a/src/app/views/public-video-embed-view/index.tsx b/src/app/views/public-media-embed-view/index.tsx
similarity index 93%
rename from src/app/views/public-video-embed-view/index.tsx
rename to src/app/views/public-media-embed-view/index.tsx
index 71eae7b8a087aba737a484d5e76ad12be44fabe2..c335393b3fc219b4f79b13717565a55310d572cb 100644
--- a/src/app/views/public-video-embed-view/index.tsx
+++ b/src/app/views/public-media-embed-view/index.tsx
@@ -3,12 +3,12 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { MediaPlayer } from "@/app/interface/media-player"
+import { cn } from "@/lib/utils/cn"
+import { MediaPlayer } from "@/components/interface/media-player"
 
 import { countNewMediaView } from "@/app/server/actions/stats"
 
-export function PublicVideoEmbedView() {
+export function PublicMediaEmbedView() {
   const [_pending, startTransition] = useTransition()
 
   // current time in the media
diff --git a/src/app/views/public-video-view/index.tsx b/src/app/views/public-media-view/index.tsx
similarity index 95%
rename from src/app/views/public-video-view/index.tsx
rename to src/app/views/public-media-view/index.tsx
index 998e9970770510fdf462e13d9e51a16d3755e25d..da32c2f24ab09fdf09cf82831f04aed3aa1cc9e7 100644
--- a/src/app/views/public-video-view/index.tsx
+++ b/src/app/views/public-media-view/index.tsx
@@ -11,30 +11,29 @@ import { BiCameraMovie } from "react-icons/bi"
 import { useLocalStorage } from "usehooks-ts"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
-import { ActionButton, actionButtonClassName } from "@/app/interface/action-button"
-import { RecommendedVideos } from "@/app/interface/recommended-videos"
+import { ActionButton, actionButtonClassName } from "@/components/interface/action-button"
+import { RecommendedVideos } from "@/components/interface/recommended-videos"
 import { isCertifiedUser } from "@/app/certification"
 import { countNewMediaView } from "@/app/server/actions/stats"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
-import { DefaultAvatar } from "@/app/interface/default-avatar"
-import { LikeButton } from "@/app/interface/like-button"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
+import { DefaultAvatar } from "@/components/interface/default-avatar"
+import { LikeButton } from "@/components/interface/like-button"
 
 import { ReportModal } from "../report-modal"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
-import { CommentList } from "@/app/interface/comment-list"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
+import { CommentList } from "@/components/interface/comment-list"
 import { Input } from "@/components/ui/input"
 
 import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 import { getComments, submitComment } from "@/app/server/actions/comments"
 import { useCurrentUser } from "@/app/state/useCurrentUser"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType"
-import { MediaPlayer } from "@/app/interface/media-player"
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType"
+import { MediaPlayer } from "@/components/interface/media-player"
 
-// TODO: rename to PublicMediaView
-export function PublicVideoView() {
+export function PublicMediaView() {
   const [_pending, startTransition] = useTransition()
 
   const [commentDraft, setCommentDraft] = useState("")
diff --git a/src/app/views/public-music-videos-view/index.tsx b/src/app/views/public-music-videos-view/index.tsx
index 5dcf2025187d70c6b020e869aa6fd9ef47c29f76..2286a0de35ea468df709e9266ca4a89d64f31008 100644
--- a/src/app/views/public-music-videos-view/index.tsx
+++ b/src/app/views/public-music-videos-view/index.tsx
@@ -3,12 +3,12 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
-import { TrackList } from "@/app/interface/track-list"
-import { PlaylistControl } from "@/app/interface/playlist-control"
-import { usePlaylist } from "@/lib/usePlaylist"
+import { TrackList } from "@/components/interface/track-list"
+import { PlaylistControl } from "@/components/interface/playlist-control"
+import { usePlaylist } from "@/lib/hooks/usePlaylist"
 
 export function PublicMusicVideosView() {
   const [_isPending, startTransition] = useTransition()
diff --git a/src/app/views/report-modal/index.tsx b/src/app/views/report-modal/index.tsx
index bbccd0d299f4420005371ef7b152ce26425b516d..419087b453ce353084232813eeaa0bda559bb36c 100644
--- a/src/app/views/report-modal/index.tsx
+++ b/src/app/views/report-modal/index.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
 
 import { ChannelInfo, MediaInfo } from "@/types/general"
-import { ActionButton } from "@/app/interface/action-button"
+import { ActionButton } from "@/components/interface/action-button"
 
 // modal to report a media or channel
 export function ReportModal({
diff --git a/src/app/views/user-account-view/index.tsx b/src/app/views/user-account-view/index.tsx
index 6ce17f6c16c64981c61f999764b9167e04796e8f..dd001c4d24096c026ccd7b7be9299ebb8c350418 100644
--- a/src/app/views/user-account-view/index.tsx
+++ b/src/app/views/user-account-view/index.tsx
@@ -3,8 +3,8 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { ChannelList } from "@/app/interface/channel-list"
+import { cn } from "@/lib/utils/cn"
+import { ChannelList } from "@/components/interface/channel-list"
 
 import { getPrivateChannels } from "@/app/server/actions/ai-tube-hf/getPrivateChannels"
 import { useCurrentUser } from "@/app/state/useCurrentUser"
diff --git a/src/app/views/user-channel-view/index.tsx b/src/app/views/user-channel-view/index.tsx
index 75c6090625d76dc28b5508162ce56bee0fcf8762..ee97c1cb5bf2f67b766c2d08c462013607a744c7 100644
--- a/src/app/views/user-channel-view/index.tsx
+++ b/src/app/views/user-channel-view/index.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { VideoGenerationModel, MediaInfo } from "@/types/general"
 
 import { useLocalStorage } from "usehooks-ts"
@@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { submitVideoRequest } from "@/app/server/actions/submitVideoRequest"
-import { PendingVideoList } from "@/app/interface/pending-video-list"
+import { PendingVideoList } from "@/components/interface/pending-video-list"
 import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 import { parseVideoModelName } from "@/app/server/actions/utils/parseVideoModelName"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
diff --git a/src/app/interface/about/index.tsx b/src/components/interface/about/index.tsx
similarity index 98%
rename from src/app/interface/about/index.tsx
rename to src/components/interface/about/index.tsx
index 0978ae58da1771363480a7dad807131de72176e9..47c95c3d62b88ac7485ffd391c0d779b01c75cda 100644
--- a/src/app/interface/about/index.tsx
+++ b/src/components/interface/about/index.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { AiOutlineQuestionCircle } from "react-icons/ai"
 
 export function About() {
diff --git a/src/app/interface/action-button/index.tsx b/src/components/interface/action-button/index.tsx
similarity index 97%
rename from src/app/interface/action-button/index.tsx
rename to src/components/interface/action-button/index.tsx
index 5a37a157abbb2848d7ae6fa11c07f7fdc334ec47..ffad73aafbb92c36f3ecb524abf9e52cef491170 100644
--- a/src/app/interface/action-button/index.tsx
+++ b/src/components/interface/action-button/index.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export const actionButtonClassName = cn(
   `flex flex-row space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-3 lg:pr-4 h-8 lg:h-9`,
diff --git a/src/app/interface/channel-card/index.tsx b/src/components/interface/channel-card/index.tsx
similarity index 97%
rename from src/app/interface/channel-card/index.tsx
rename to src/components/interface/channel-card/index.tsx
index 8cedbebb48f1462594e7f1642989ffcbe442c345..b24c818ff63eb2d4b3c59f53b2ee54f92b00c558 100644
--- a/src/app/interface/channel-card/index.tsx
+++ b/src/components/interface/channel-card/index.tsx
@@ -3,11 +3,11 @@ import { useState } from "react"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { IoAdd } from "react-icons/io5"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { ChannelInfo } from "@/types/general"
 import { isCertifiedUser } from "@/app/certification"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export function ChannelCard({
   channel,
diff --git a/src/app/interface/channel-list/index.tsx b/src/components/interface/channel-list/index.tsx
similarity index 96%
rename from src/app/interface/channel-list/index.tsx
rename to src/components/interface/channel-list/index.tsx
index 58517e62cc334aa95543ed9d6ecdeeb22eb3bfd4..6f7c521114b3faa37592df62078d9780d98d1acc 100644
--- a/src/app/interface/channel-list/index.tsx
+++ b/src/components/interface/channel-list/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { ChannelInfo } from "@/types/general"
 
 import { ChannelCard } from "../channel-card"
diff --git a/src/app/interface/collection-card/index.tsx b/src/components/interface/collection-card/index.tsx
similarity index 94%
rename from src/app/interface/collection-card/index.tsx
rename to src/components/interface/collection-card/index.tsx
index f3dfd536a67214df6e14ed5cf55347ebdaef359c..a0e1a33135d82c950706cad53acf0df28628e03f 100644
--- a/src/app/interface/collection-card/index.tsx
+++ b/src/components/interface/collection-card/index.tsx
@@ -4,14 +4,14 @@ import { useState } from "react"
 import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CollectionInfo } from "@/types/general"
-import { formatDuration } from "@/lib/formatDuration"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatDuration } from "@/lib/formatters/formatDuration"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
-import { transparentImage } from "@/lib/transparentImage"
+import { transparentImage } from "@/lib/utils/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export function CollectionCard({
   collection,
diff --git a/src/app/interface/collection-list/index.tsx b/src/components/interface/collection-list/index.tsx
similarity index 97%
rename from src/app/interface/collection-list/index.tsx
rename to src/components/interface/collection-list/index.tsx
index 8996fa7737c12b244ad3078970e946a1c9a5120c..ed1ca31fd37399213ce2277126d2e96f2f4a23b9 100644
--- a/src/app/interface/collection-list/index.tsx
+++ b/src/components/interface/collection-list/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CollectionInfo } from "@/types/general"
 
 import { CollectionCard } from "../collection-card"
diff --git a/src/app/interface/comment-card/index.tsx b/src/components/interface/comment-card/index.tsx
similarity index 97%
rename from src/app/interface/comment-card/index.tsx
rename to src/components/interface/comment-card/index.tsx
index 4f15c91e2855e68b6d7d4115ca1437847cb4f111..49b2c160b2d6d36c2873a074ab820565c7e52dda 100644
--- a/src/app/interface/comment-card/index.tsx
+++ b/src/components/interface/comment-card/index.tsx
@@ -1,8 +1,8 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CommentInfo } from "@/types/general"
 import { useEffect, useState } from "react"
 import { DefaultAvatar } from "../default-avatar"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { CommentWithTimeSeeks } from "./time-seeker"
 
 export function CommentCard({
diff --git a/src/app/interface/comment-card/time-seeker.tsx b/src/components/interface/comment-card/time-seeker.tsx
similarity index 100%
rename from src/app/interface/comment-card/time-seeker.tsx
rename to src/components/interface/comment-card/time-seeker.tsx
diff --git a/src/app/interface/comment-list/index.tsx b/src/components/interface/comment-list/index.tsx
similarity index 92%
rename from src/app/interface/comment-list/index.tsx
rename to src/components/interface/comment-list/index.tsx
index 3e1c5d117994562d589a9c7c4964503e7008a44d..40402a4131d8f11705f6e25cb9435560d43b8832 100644
--- a/src/app/interface/comment-list/index.tsx
+++ b/src/components/interface/comment-list/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CommentInfo } from "@/types/general"
 import { CommentCard } from "../comment-card"
 
diff --git a/src/app/interface/default-avatar/impl.tsx b/src/components/interface/default-avatar/impl.tsx
similarity index 100%
rename from src/app/interface/default-avatar/impl.tsx
rename to src/components/interface/default-avatar/impl.tsx
diff --git a/src/app/interface/default-avatar/index.tsx b/src/components/interface/default-avatar/index.tsx
similarity index 100%
rename from src/app/interface/default-avatar/index.tsx
rename to src/components/interface/default-avatar/index.tsx
diff --git a/src/app/interface/equirectangular-video-player/index.tsx b/src/components/interface/equirectangular-video-player/index.tsx
similarity index 95%
rename from src/app/interface/equirectangular-video-player/index.tsx
rename to src/components/interface/equirectangular-video-player/index.tsx
index 256f689f1c9eea750e0d8def6e46242d93dae35c..1648310b61a1c0c1475c5217faea58bb9bf5a1dd 100644
--- a/src/app/interface/equirectangular-video-player/index.tsx
+++ b/src/components/interface/equirectangular-video-player/index.tsx
@@ -2,7 +2,7 @@
 
 import AutoSizer from "react-virtualized-auto-sizer"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 
 import { VideoSphereViewer } from "./viewer"
diff --git a/src/app/interface/equirectangular-video-player/viewer.tsx b/src/components/interface/equirectangular-video-player/viewer.tsx
similarity index 98%
rename from src/app/interface/equirectangular-video-player/viewer.tsx
rename to src/components/interface/equirectangular-video-player/viewer.tsx
index 8783f4004af6992e723258bd970252e1d5d88f63..f47f79c656b0358613e8a8c46c72caa28f5a5d49 100644
--- a/src/app/interface/equirectangular-video-player/viewer.tsx
+++ b/src/components/interface/equirectangular-video-player/viewer.tsx
@@ -14,7 +14,7 @@ import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
 import "@photo-sphere-viewer/settings-plugin/index.css"
 import "@photo-sphere-viewer/video-plugin/index.css"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 
 export function VideoSphereViewer({
diff --git a/src/app/interface/fonts/index.tsx b/src/components/interface/fonts/index.tsx
similarity index 100%
rename from src/app/interface/fonts/index.tsx
rename to src/components/interface/fonts/index.tsx
diff --git a/src/app/interface/gsplat/index.tsx b/src/components/interface/gsplat/index.tsx
similarity index 100%
rename from src/app/interface/gsplat/index.tsx
rename to src/components/interface/gsplat/index.tsx
diff --git a/src/components/interface/latent-engine/index.tsx b/src/components/interface/latent-engine/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab458dead3a265c8c2684468dd18fb9ac8425e2e
--- /dev/null
+++ b/src/components/interface/latent-engine/index.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from "react"
+import { useLatentEngine } from "./useLatentEngine"
+import { mockClap } from "@/lib/clap/mockClap"
+import { Gsplat } from "../gsplat"
+
+export type LatentEngineStatus =
+  | "idle"
+  | "loading"
+  | "loaded"
+  | "failed"
+
+export function LatentEngine({
+  url,
+  width,
+  height,
+  className = "" }: {
+  url: string
+  width?: number
+  height?: number
+  className?: string
+}) {
+  const le = useLatentEngine()
+
+  useEffect(() => {
+    if (!le.loaded) {
+      console.log("let's load an experience")
+      le.load(mockClap())
+    }
+  }, [le.loaded])
+
+  return (
+    <div style={{ width, height }} className={className}>
+      {/* <Gsplat /> */}
+    </div>
+  );
+}
diff --git a/src/components/interface/latent-engine/useLatentEngine.ts b/src/components/interface/latent-engine/useLatentEngine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38d563b0067286c04fc8167c843105cdaee7dfcd
--- /dev/null
+++ b/src/components/interface/latent-engine/useLatentEngine.ts
@@ -0,0 +1,26 @@
+"use client"
+
+import { create } from "zustand"
+
+import { ClapProject } from "@/lib/clap/types"
+import { newClap } from "@/lib/clap/newClap"
+
+export type LatentEngineStore = {
+  clap: ClapProject
+  loaded: boolean
+  load: (clap: ClapProject) => void
+}
+
+export const useLatentEngine = create<LatentEngineStore>((set, get) => ({
+  clap: newClap(),
+  loaded: false,
+
+  // TODO: add a loader for either a Clap or a LatentScript
+
+  load: (clap: ClapProject) => {
+    set({
+      clap,
+      loaded: true
+    })
+  },
+}))
diff --git a/src/app/interface/left-menu/index.tsx b/src/components/interface/left-menu/index.tsx
similarity index 96%
rename from src/app/interface/left-menu/index.tsx
rename to src/components/interface/left-menu/index.tsx
index 2ff2096364d3b09296e9d7c21cedef0a400c945a..3acf5c81e9d2fa4802c8d545049df1b66d8b4cee 100644
--- a/src/app/interface/left-menu/index.tsx
+++ b/src/components/interface/left-menu/index.tsx
@@ -9,7 +9,7 @@ import { CgProfile } from "react-icons/cg"
 import { MdOutlinePlayCircleOutline } from "react-icons/md";
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { showBetaFeatures } from "@/app/config"
 
 import { MenuItem } from "./menu-item"
@@ -89,8 +89,8 @@ export function LeftMenu() {
       )}>
         {/*<MenuItem
           icon={<MdVideoLibrary className="h-6 w-6" />}
-          selected={view === "user_videos"}
-          onClick={() => setView("user_videos")}
+          selected={view === "user_medias"}
+          onClick={() => setView("user_medias")}
           >
           My Videos
         </MenuItem>
diff --git a/src/app/interface/left-menu/menu-item/index.tsx b/src/components/interface/left-menu/menu-item/index.tsx
similarity index 96%
rename from src/app/interface/left-menu/menu-item/index.tsx
rename to src/components/interface/left-menu/menu-item/index.tsx
index d9807572cfd42e915675fcbddd88bea3e33402a2..7d980673e073dc19ce9c61c60ba374179f69d2c3 100644
--- a/src/app/interface/left-menu/menu-item/index.tsx
+++ b/src/components/interface/left-menu/menu-item/index.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export function MenuItem({
   icon = null,
diff --git a/src/app/interface/like-button/generic.tsx b/src/components/interface/like-button/generic.tsx
similarity index 95%
rename from src/app/interface/like-button/generic.tsx
rename to src/components/interface/like-button/generic.tsx
index 1dadc62dac75bc409fe6bb064922451fe96a00a1..df8fb214e2b6f5af637fac25b99993221d57cb55 100644
--- a/src/app/interface/like-button/generic.tsx
+++ b/src/components/interface/like-button/generic.tsx
@@ -3,8 +3,8 @@ import { RiThumbUpFill } from "react-icons/ri"
 import { RiThumbDownLine } from "react-icons/ri"
 import { RiThumbDownFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { cn } from "@/lib/utils/cn"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export const likeButtonClassName = cn(
   `flex flex-row`,
diff --git a/src/app/interface/like-button/index.tsx b/src/components/interface/like-button/index.tsx
similarity index 100%
rename from src/app/interface/like-button/index.tsx
rename to src/components/interface/like-button/index.tsx
diff --git a/src/app/interface/media-list/index.tsx b/src/components/interface/media-list/index.tsx
similarity index 97%
rename from src/app/interface/media-list/index.tsx
rename to src/components/interface/media-list/index.tsx
index 94206cefe3931b9a42706895a2d112ebd42152b9..8cba25d8c38b9fd54ee372fa9f01b0ac6a79b489 100644
--- a/src/app/interface/media-list/index.tsx
+++ b/src/components/interface/media-list/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaDisplayLayout, MediaInfo } from "@/types/general"
 import { TrackCard } from "../track-card"
 import { VideoCard } from "../video-card"
diff --git a/src/app/interface/media-player/cartesian.tsx b/src/components/interface/media-player/cartesian.tsx
similarity index 97%
rename from src/app/interface/media-player/cartesian.tsx
rename to src/components/interface/media-player/cartesian.tsx
index 9d50ae70f9f70a2eebe887b66ee9750f85ec2559..a116276899ff9c4c4a222368c708113f73dbf965 100644
--- a/src/app/interface/media-player/cartesian.tsx
+++ b/src/components/interface/media-player/cartesian.tsx
@@ -3,7 +3,7 @@
 import { Player } from "react-tuby"
 import "react-tuby/css/main.css"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 
 export function CartesianVideoPlayer({
diff --git a/src/app/interface/media-player/equirectangular.tsx b/src/components/interface/media-player/equirectangular.tsx
similarity index 100%
rename from src/app/interface/media-player/equirectangular.tsx
rename to src/components/interface/media-player/equirectangular.tsx
diff --git a/src/app/interface/media-player/gaussian.tsx b/src/components/interface/media-player/gaussian.tsx
similarity index 93%
rename from src/app/interface/media-player/gaussian.tsx
rename to src/components/interface/media-player/gaussian.tsx
index 4dbbb95ab7482131ce668022d061da55523ea133..25bc9f93361afdcdb1ee3bc199cb886256d9ecf7 100644
--- a/src/app/interface/media-player/gaussian.tsx
+++ b/src/components/interface/media-player/gaussian.tsx
@@ -1,7 +1,5 @@
 "use client"
 
-import "react-tuby/css/main.css"
-
 import { MediaInfo } from "@/types/general"
 
 import { Gsplat } from "../gsplat"
diff --git a/src/app/interface/media-player/index.tsx b/src/components/interface/media-player/index.tsx
similarity index 91%
rename from src/app/interface/media-player/index.tsx
rename to src/components/interface/media-player/index.tsx
index b6dfc08959a8c072cbaa765b128201da725a3cab..2f796a6936a3d7f350751350a5f620069ff211f8 100644
--- a/src/app/interface/media-player/index.tsx
+++ b/src/components/interface/media-player/index.tsx
@@ -2,9 +2,9 @@
 
 import AutoSizer from "react-virtualized-auto-sizer"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType"
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType"
 
 import { EquirectangularVideoPlayer } from "./equirectangular"
 import { CartesianVideoPlayer } from "./cartesian"
@@ -21,7 +21,8 @@ export function MediaPlayer({
   className?: string
   // currentTime?: number
 }) {
-  console.log("MediaPlayer called for " + media?.assetUrl)
+  console.log("MediaPlayer called for \"" + media?.label + "\"")
+  
   if (!media || !media?.assetUrl) { return null }
 
   // uncomment one of those to forcefully test the .splatv player!
diff --git a/src/components/interface/media-player/latent.tsx b/src/components/interface/media-player/latent.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9361e3d667f9bb40fb507feedfb92a8cd8320023
--- /dev/null
+++ b/src/components/interface/media-player/latent.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { MediaInfo } from "@/types/general"
+
+import { LatentEngine } from "../latent-engine"
+
+export function LatentPlayer({
+  media,
+  width,
+  height,
+  className = "",
+  // currentTime,
+ }: {
+  media: MediaInfo
+  width?: number
+  height?: number
+  className?: string
+  // currentTime?: number
+}) {
+  // TODO add a play bar which should support fixed, streaming and live modes
+  return (
+    <LatentEngine
+      url={media.clapUrl}
+      width={width}
+      height={height}
+      className={className}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/app/interface/mobile-bottom-menu/index.tsx b/src/components/interface/mobile-bottom-menu/index.tsx
similarity index 97%
rename from src/app/interface/mobile-bottom-menu/index.tsx
rename to src/components/interface/mobile-bottom-menu/index.tsx
index 59fce439c6e66c0a20c91c7faaab3a5134dee555..fd83bf062f225420a84bbf5fe949d02a474ed7f6 100644
--- a/src/app/interface/mobile-bottom-menu/index.tsx
+++ b/src/components/interface/mobile-bottom-menu/index.tsx
@@ -7,7 +7,7 @@ import { PiRobot } from "react-icons/pi"
 import { CgProfile } from "react-icons/cg"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { showBetaFeatures } from "@/app/config"
 
 import { MenuItem } from "../left-menu/menu-item"
diff --git a/src/app/interface/pending-video-card/index.tsx b/src/components/interface/pending-video-card/index.tsx
similarity index 97%
rename from src/app/interface/pending-video-card/index.tsx
rename to src/components/interface/pending-video-card/index.tsx
index 4417800333d628060882fe21c51db4f51ec017e0..dd7bba69a299877b3d92213edc485f303c93bebf 100644
--- a/src/app/interface/pending-video-card/index.tsx
+++ b/src/components/interface/pending-video-card/index.tsx
@@ -1,7 +1,7 @@
 import { PiTrashBold } from "react-icons/pi"
 
 import { TableCell, TableRow } from "@/components/ui/table"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MdLockClock } from "react-icons/md"
 import { MediaInfo } from "@/types/general"
 import { truncate } from "./truncate"
diff --git a/src/app/interface/pending-video-card/truncate.ts b/src/components/interface/pending-video-card/truncate.ts
similarity index 100%
rename from src/app/interface/pending-video-card/truncate.ts
rename to src/components/interface/pending-video-card/truncate.ts
diff --git a/src/app/interface/pending-video-list/index.tsx b/src/components/interface/pending-video-list/index.tsx
similarity index 96%
rename from src/app/interface/pending-video-list/index.tsx
rename to src/components/interface/pending-video-list/index.tsx
index 077670e40645aeedcb8ab4f9fba3b2eb285ece32..a245a0ea4074507ef8c491bb9cffb98c0c5e1377 100644
--- a/src/app/interface/pending-video-list/index.tsx
+++ b/src/components/interface/pending-video-list/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 
diff --git a/src/app/interface/playlist-control/index.tsx b/src/components/interface/playlist-control/index.tsx
similarity index 92%
rename from src/app/interface/playlist-control/index.tsx
rename to src/components/interface/playlist-control/index.tsx
index 48d7b6c74b8d2e0fec61b3486c6ec52631fd6dba..a624af26c5b4b98f21f60796c1f92b6e686876bc 100644
--- a/src/app/interface/playlist-control/index.tsx
+++ b/src/components/interface/playlist-control/index.tsx
@@ -1,8 +1,8 @@
 import { IoIosPlay } from "react-icons/io"
 import { IoIosPause } from "react-icons/io"
 
-import { cn } from "@/lib/utils"
-import { usePlaylist } from "@/lib/usePlaylist"
+import { cn } from "@/lib/utils/cn"
+import { usePlaylist } from "@/lib/hooks/usePlaylist"
 import { MediaInfo } from "@/types/general"
 
 export function PlaylistControl() {
diff --git a/src/app/interface/recommended-videos/index.tsx b/src/components/interface/recommended-videos/index.tsx
similarity index 100%
rename from src/app/interface/recommended-videos/index.tsx
rename to src/components/interface/recommended-videos/index.tsx
diff --git a/src/app/interface/search-input/index.tsx b/src/components/interface/search-input/index.tsx
similarity index 99%
rename from src/app/interface/search-input/index.tsx
rename to src/components/interface/search-input/index.tsx
index bb54806b28c656971c28586a464531f776d9c843..70f0265b4998c6720745a4306dd8e3cac6430f6e 100644
--- a/src/app/interface/search-input/index.tsx
+++ b/src/components/interface/search-input/index.tsx
@@ -5,7 +5,7 @@ import debounce from "lodash.debounce"
 import { GoSearch } from "react-icons/go"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
diff --git a/src/app/interface/top-header/index.tsx b/src/components/interface/top-header/index.tsx
similarity index 97%
rename from src/app/interface/top-header/index.tsx
rename to src/components/interface/top-header/index.tsx
index 9a616d3d2ff3cba6e4bbe587234505a0336ca04a..fb8264cbd4e3ab5711c78be512823e0cc0df9623 100644
--- a/src/app/interface/top-header/index.tsx
+++ b/src/components/interface/top-header/index.tsx
@@ -15,7 +15,7 @@ const pathway = Pathway_Gothic_One({
 })
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
 import Link from 'next/link'
 import { Input } from '@/components/ui/input'
@@ -55,9 +55,9 @@ export function TopHeader() {
 
 
   useEffect(() => {
-    if (view === "public_video_embed") {
+    if (view === "public_media_embed") {
       setHeaderMode("hidden")
-    } else if (view === "public_video" || view === "public_channel" || view === "public_music_videos") {
+    } else if (view === "public_media" || view === "public_channel" || view === "public_music_videos") {
       setHeaderMode("compact")
       setMenuMode("slider_hidden")
     } else {
diff --git a/src/app/interface/top-header/logo.tsx b/src/components/interface/top-header/logo.tsx
similarity index 100%
rename from src/app/interface/top-header/logo.tsx
rename to src/components/interface/top-header/logo.tsx
diff --git a/src/app/interface/track-card/index.tsx b/src/components/interface/track-card/index.tsx
similarity index 95%
rename from src/app/interface/track-card/index.tsx
rename to src/components/interface/track-card/index.tsx
index f1a59435683d8c24ea8467a35741bb45d26ab784..a09f95d86889e553b0bb101451a2f4a07a153e24 100644
--- a/src/app/interface/track-card/index.tsx
+++ b/src/components/interface/track-card/index.tsx
@@ -4,15 +4,15 @@ import { useEffect, useRef, useState } from "react"
 import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaDisplayLayout, MediaInfo } from "@/types/general"
-import { formatDuration } from "@/lib/formatDuration"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatDuration } from "@/lib/formatters/formatDuration"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
-import { transparentImage } from "@/lib/transparentImage"
+import { transparentImage } from "@/lib/utils/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
-import { usePlaylist } from "@/lib/usePlaylist"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
+import { usePlaylist } from "@/lib/hooks/usePlaylist"
 
 export function TrackCard({
   media,
diff --git a/src/app/interface/track-list/index.tsx b/src/components/interface/track-list/index.tsx
similarity index 100%
rename from src/app/interface/track-list/index.tsx
rename to src/components/interface/track-list/index.tsx
diff --git a/src/app/interface/tube-layout/index.tsx b/src/components/interface/tube-layout/index.tsx
similarity index 95%
rename from src/app/interface/tube-layout/index.tsx
rename to src/components/interface/tube-layout/index.tsx
index 1a061404d4ef1b30c7807bb1495c3a321c0f01f7..fa591f2e8e011e77cecabdfb55a9ef29c422f921 100644
--- a/src/app/interface/tube-layout/index.tsx
+++ b/src/components/interface/tube-layout/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { ReactNode } from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { useStore } from "@/app/state/useStore"
 
 import { LeftMenu } from "../left-menu"
@@ -24,7 +24,7 @@ export function TubeLayout({ children }: { children?: ReactNode }) {
   return (
     <div className={cn(
       `dark flex flex-row h-screen w-screen inset-0 overflow-hidden`,
-       view === "public_video"
+       view === "public_media"
        ? `bg-gradient-radial from-neutral-900 to-neutral-950`
        : ''// bg-gradient-to-br from-neutral-950 via-neutral-950 to-neutral-950`
      
diff --git a/src/app/interface/video-card/index.tsx b/src/components/interface/video-card/index.tsx
similarity index 95%
rename from src/app/interface/video-card/index.tsx
rename to src/components/interface/video-card/index.tsx
index cabee3830e62e480a03f06f7b7be258845fcb1cc..323a1c6115f29762a0afbf09ef33a5f0dfc6ec1d 100644
--- a/src/app/interface/video-card/index.tsx
+++ b/src/components/interface/video-card/index.tsx
@@ -4,14 +4,14 @@ import { useEffect, useRef, useState } from "react"
 import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaDisplayLayout, MediaInfo } from "@/types/general"
-import { formatDuration } from "@/lib/formatDuration"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatDuration } from "@/lib/formatters/formatDuration"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
-import { transparentImage } from "@/lib/transparentImage"
+import { transparentImage } from "@/lib/utils/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export function VideoCard({
   media,
diff --git a/src/app/interface/video-list/index.tsx b/src/components/interface/video-list/index.tsx
similarity index 100%
rename from src/app/interface/video-list/index.tsx
rename to src/components/interface/video-list/index.tsx
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 937620af27e5d8ef577f0baca229a9b753ebd017..b9ed85cb6f537d7f4bb2ece1d654d9d915de4f07 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDown } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Accordion = AccordionPrimitive.Root
 
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index d6a7aad5eb09c97a4e321a5b941437ba6ea9ede6..611a7b6695c0fc68dc2711cecfc93ee6bcae43d8 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border border-neutral-200 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-neutral-950 dark:border-neutral-800 dark:[&>svg]:text-neutral-50",
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 75a6e3f8e5ede384655c84ff404db8464786a131..4667eb98e6a3b3662a463045524353f29650591a 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index dbc8d7bcd00c10277d8681dcc66d5715ce4398bd..550021c6a5047459f32ba8c19674ae552351d1b6 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-800",
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 5996723d9a4483be6b676583b3bce5349effe01d..81bffb1c6068a1d6a38d4216a96d94ec88b699b6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-800",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 5e82fbcc7952e7da0a7e2d53ba9ae93e562c2658..5c551ea030cb611002a0452845963997751e3481 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Card = React.forwardRef<
   HTMLDivElement,
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index dbcb8af1d88951ee61ecbe178c9c09bd09a6001d..25d3fd49065f3f759fe2be557501dd4c70096d0b 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index fb24d5b5499a08cee76870adec011cc2bc234a54..243bafa61143d18f4efd9cbaf12caa402428e249 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -5,7 +5,7 @@ import { DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
 
 const Command = React.forwardRef<
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 43ad339bf5b4e5d563909f49ecb7693781b2bbd7..04728f4ebd128af9a222f5062c453986ba770d54 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Dialog = DialogPrimitive.Root
 
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 6bf46d8ae9aa12b1d1ae037e587beed99625829c..b74de87938fbefe1156b1e4077924188cef85f4b 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 1be0795945fc8507c7c165fc7a823728a95d82bd..e81c359e637aedec6ae2474f0d333dfbe7904833 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 534182176bf87f9308355514adc884d2b69750a5..cbeab78ab932bc8e8e61dc231abf88d2223ab7a3 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 9df81583b2c4761080e7b6cef14bfd8dc5f60c28..0eb8273e15bb01cefdeddb7c182cde74330763e5 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 8b35ce6d7b0dd78003308b09354e9f7197eb161a..d5d06df346424d067fc364d1f1b60c33e67efb81 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Popover = PopoverPrimitive.Root
 
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 6469f11956404e701744af016f0a4a46a2e8ab65..73b6ab1b2bae8f528b8a395f5e068869f434e758 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Select = SelectPrimitive.Root
 
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 798a7b0a76cd75dd6f9c84b3a8621d081482039b..2d104947593de7e721456afa7eae75b13d5474bf 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 924511153ef32e3353bba4a2d1f26f9c35ccbea6..42d041575dc500a918b15179abf7f652a00adb58 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 22d60f838dc760e3bd0b741db20679c0b3db0364..eec2aef09be01ff791f287b0ec4b42039568cb0b 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 411f020af058aa0edc8d857b4a93bcf344d95aa0..687dfe868087bce06111501a00cfa30ca72013b0 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 3d348bd764b850f80298782110e9ad9a1ff3324f..b13d89be26cfef3962a12b90cc601939372d6e2f 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index bbd74c277a257cb6f3ebd050b9a2fb1631c3352b..a58d2da9d38b389c5ba298f8eda2180014b7f98b 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -3,7 +3,7 @@ import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const ToastProvider = ToastPrimitives.Provider
 
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index d436143130b40d554c44c70db6208eb3e91d3a7c..b24e31273326535c82e0abd17f9c7c62673f0071 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
diff --git a/src/components/ui/vertical-slider.tsx b/src/components/ui/vertical-slider.tsx
index 4fc1d724dc37170ac41bdd1d5d663fb3489e73a5..57b9fb7e829374c38e236b67090478213b9b9e50 100644
--- a/src/components/ui/vertical-slider.tsx
+++ b/src/components/ui/vertical-slider.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 const VerticalSlider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
diff --git a/src/lib/getChannelRating.ts b/src/lib/business/getChannelRating.ts
similarity index 100%
rename from src/lib/getChannelRating.ts
rename to src/lib/business/getChannelRating.ts
diff --git a/src/lib/getClapAssetSourceType.ts b/src/lib/business/getClapAssetSourceType.ts
similarity index 91%
rename from src/lib/getClapAssetSourceType.ts
rename to src/lib/business/getClapAssetSourceType.ts
index eea3f9ab3b111139f37cfe9dbc380f712ef6b59c..3f361bc9260a4b40fa895968274f636a3c4376e8 100644
--- a/src/lib/getClapAssetSourceType.ts
+++ b/src/lib/business/getClapAssetSourceType.ts
@@ -1,4 +1,4 @@
-import { ClapAssetSource } from "@/clap/types"
+import { ClapAssetSource } from "@/lib/clap/types"
 
 export function getClapAssetSourceSource(input: string = ""): ClapAssetSource {
   
diff --git a/src/lib/getCollectionKey.ts b/src/lib/business/getCollectionKey.ts
similarity index 100%
rename from src/lib/getCollectionKey.ts
rename to src/lib/business/getCollectionKey.ts
diff --git a/src/lib/uploadToHuggingFace.ts b/src/lib/business/uploadToHuggingFace.ts
similarity index 100%
rename from src/lib/uploadToHuggingFace.ts
rename to src/lib/business/uploadToHuggingFace.ts
diff --git a/src/clap/clap-specification-draft.md b/src/lib/clap/clap-specification-draft.md
similarity index 100%
rename from src/clap/clap-specification-draft.md
rename to src/lib/clap/clap-specification-draft.md
diff --git a/src/lib/clap/getClapAssetSource.ts b/src/lib/clap/getClapAssetSource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..285de2d8263058b6073709998aadd4eef8164473
--- /dev/null
+++ b/src/lib/clap/getClapAssetSource.ts
@@ -0,0 +1,25 @@
+import { ClapAssetSource } from "./types"
+
+export function getClapAssetSourceType(input: string = ""): ClapAssetSource {
+  
+  const str = `${input || ""}`.trim()
+
+  if (!str || !str.length) {
+    return "EMPTY"
+  }
+
+  if (str.startsWith("https://") || str.startsWith("http://")) {
+    return "REMOTE"
+  }
+
+  // note that "path" assets are potentially a security risk, they need to be treated with care
+  if (str.startsWith("/") || str.startsWith("../") || str.startsWith("./")) {
+    return "PATH"
+  }
+
+  if (str.startsWith("data:")) {
+    return "DATA"
+  }
+
+  return "PROMPT"
+}
\ No newline at end of file
diff --git a/src/lib/clap/mockClap.ts b/src/lib/clap/mockClap.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15935765ca3dda8c0601ed334901cf2429b6f1e2
--- /dev/null
+++ b/src/lib/clap/mockClap.ts
@@ -0,0 +1,31 @@
+import { newClap } from "./newClap"
+import { newSegment } from "./newSegment"
+import { ClapProject } from "./types"
+
+export function mockClap(): ClapProject {
+  const clap = newClap()
+
+  const mockSegment = newSegment({
+    // id: string
+    // track: number
+    // startTimeInMs: number
+    // endTimeInMs: number
+    // category: ClapSegmentCategory
+    // modelId: string
+    // sceneId: string
+    // prompt: string
+    // label: string
+    // outputType: ClapOutputType
+    // renderId: string
+    // status: ClapSegmentStatus
+    // assetUrl: string
+    // assetDurationInMs: number
+    // createdBy: ClapAuthor
+    // editedBy: ClapAuthor
+    // outputGain: number
+    // seed: number
+  })
+  clap.segments.push(mockSegment)
+
+  return clap
+}
\ No newline at end of file
diff --git a/src/lib/clap/newClap.ts b/src/lib/clap/newClap.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1320dea8d3ab1f4245075bd0a66a2cb8b9a29305
--- /dev/null
+++ b/src/lib/clap/newClap.ts
@@ -0,0 +1,33 @@
+
+import { v4 as uuidv4 } from "uuid"
+
+import { ClapMeta, ClapModel, ClapProject, ClapScene, ClapSegment } from "./types"
+import { getValidNumber } from "@/lib/utils/getValidNumber"
+
+// generate an empty clap file, or copy one from a source
+export function newClap(clap: {
+    meta?: Partial<ClapMeta>
+    models?: ClapModel[]
+    scenes?: ClapScene[]
+    segments?: ClapSegment[]
+  } = {}): ClapProject {
+
+  const meta: ClapMeta = {
+    id: clap?.meta?.id === "string" ? clap.meta.id : uuidv4(),
+    title: clap?.meta?.title === "string" ? clap.meta.title : "",
+    description: typeof clap?.meta?.description === "string" ? clap.meta.description : "",
+    licence: typeof clap?.meta?.licence === "string" ? clap.meta.licence : "",
+    orientation: clap?.meta?.orientation === "portrait" ? "portrait" : clap?.meta?.orientation === "square" ? "square" : "landscape",
+    width: getValidNumber(clap?.meta?.width, 256, 8192, 1024),
+    height: getValidNumber(clap?.meta?.height, 256, 8192, 576),
+    defaultVideoModel: typeof clap?.meta?.defaultVideoModel === "string" ? clap?.meta.defaultVideoModel : "SVD",
+    extraPositivePrompt: Array.isArray(clap?.meta?.extraPositivePrompt) ? clap?.meta.extraPositivePrompt : [],
+    screenplay: typeof clap?.meta?.screenplay === "string" ? clap?.meta.screenplay : "",
+  }
+
+  const models: ClapModel[] = clap?.models && Array.isArray(clap.models) ? clap.models : []
+  const scenes: ClapScene[] =  clap?.scenes && Array.isArray(clap.scenes) ? clap.scenes : []
+  const segments: ClapSegment[] =  clap?.segments && Array.isArray(clap.segments) ? clap.segments : []
+
+  return { meta, models, scenes, segments }
+}
diff --git a/src/lib/clap/newSegment.ts b/src/lib/clap/newSegment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..404617eb24924a386e52d974a14c291e7c9d76fe
--- /dev/null
+++ b/src/lib/clap/newSegment.ts
@@ -0,0 +1,46 @@
+import { v4 as uuidv4 } from "uuid"
+
+import { generateSeed } from "../utils/generateSeed"
+import { ClapSegment } from "./types"
+import { isValidNumber } from "../utils/isValidNumber"
+
+export function newSegment(maybeSegment?: Partial<ClapSegment>) {
+
+  const startTimeInMs =
+    isValidNumber(maybeSegment?.startTimeInMs)
+    ? (maybeSegment?.startTimeInMs || 0)
+    : 0
+
+  const assetDurationInMs =
+    isValidNumber(maybeSegment?.assetDurationInMs)
+    ? (maybeSegment?.assetDurationInMs || 0)
+    : 1000
+
+  const endTimeInMs =
+    isValidNumber(maybeSegment?.endTimeInMs)
+    ? (maybeSegment?.endTimeInMs || 0)
+    : (startTimeInMs + assetDurationInMs)
+
+  const segment: ClapSegment = {
+    id: typeof maybeSegment?.id === "string" ? maybeSegment.id : uuidv4(),
+    track: isValidNumber(maybeSegment?.track) ? (maybeSegment?.track || 0) : 0,
+    startTimeInMs,
+    endTimeInMs,
+    category: typeof maybeSegment?.category === "string" ? maybeSegment.category : "generic",
+    modelId: typeof maybeSegment?.modelId === "string" ? maybeSegment.modelId : "",
+    sceneId: typeof maybeSegment?.sceneId === "string" ? maybeSegment.sceneId : "",
+    prompt: typeof maybeSegment?.prompt === "string" ? maybeSegment.prompt : "",
+    label: typeof maybeSegment?.label === "string" ? maybeSegment.label : "",
+    outputType: typeof maybeSegment?.outputType === "string" ? maybeSegment.outputType : "text",
+    renderId: typeof maybeSegment?.renderId === "string" ? maybeSegment.renderId : "",
+    status: typeof maybeSegment?.status === "string" ? maybeSegment.status : "to_generate",
+    assetUrl: typeof maybeSegment?.assetUrl === "string" ? maybeSegment.assetUrl : "",
+    assetDurationInMs,
+    createdBy: typeof maybeSegment?.createdBy === "string" ?  maybeSegment.createdBy : "ai",
+    editedBy: typeof maybeSegment?.editedBy === "string" ?  maybeSegment.editedBy : "ai",
+    outputGain: isValidNumber(maybeSegment?.outputGain) ? (maybeSegment?.outputGain || 0) : 0,
+    seed: isValidNumber(maybeSegment?.seed) ? (maybeSegment?.seed || 0) : generateSeed()
+  }
+
+  return segment
+}
\ No newline at end of file
diff --git a/src/clap/parseClap.ts b/src/lib/clap/parseClap.ts
similarity index 98%
rename from src/clap/parseClap.ts
rename to src/lib/clap/parseClap.ts
index af6b39970263e53b1f9ebbf0731921f2740f35f4..b7af7833a8fd8efa2fd2914f691017a06578bdc4 100644
--- a/src/clap/parseClap.ts
+++ b/src/lib/clap/parseClap.ts
@@ -2,7 +2,7 @@ import YAML from "yaml"
 import { v4 as uuidv4 } from "uuid"
 
 import { ClapHeader, ClapMeta, ClapModel, ClapProject, ClapScene, ClapSegment } from "./types"
-import { getValidNumber } from "@/lib/getValidNumber"
+import { getValidNumber } from "@/lib/utils/getValidNumber"
 
 /**
  * import a Clap file (from a plain text string)
diff --git a/src/clap/serializeClap.ts b/src/lib/clap/serializeClap.ts
similarity index 98%
rename from src/clap/serializeClap.ts
rename to src/lib/clap/serializeClap.ts
index 570910195d22838977b5eed22d5911d337f37541..93cff910e9ab703c1047eaba1ff20e2170f47bff 100644
--- a/src/clap/serializeClap.ts
+++ b/src/lib/clap/serializeClap.ts
@@ -1,8 +1,9 @@
 import YAML from "yaml"
 import { v4 as uuidv4 } from "uuid"
 
+import { getValidNumber } from "@/lib/utils/getValidNumber"
+
 import { ClapHeader, ClapMeta, ClapModel, ClapProject, ClapScene, ClapSegment } from "./types"
-import { getValidNumber } from "@/lib/getValidNumber"
 
 export async function serializeClap({
   meta, // ClapMeta
diff --git a/src/clap/types.ts b/src/lib/clap/types.ts
similarity index 91%
rename from src/clap/types.ts
rename to src/lib/clap/types.ts
index 95c78ac0584a90eeb011d3ef803630cdc963cc39..f50c9f53720903e60dec69448ff303dd30f7badf 100644
--- a/src/clap/types.ts
+++ b/src/lib/clap/types.ts
@@ -1,5 +1,27 @@
 
-export type ClapSegmentCategory = "splat" | "mesh" | "depth" | "video" | "storyboard" | "transition" | "characters" | "location" | "time" | "era" | "lighting" | "weather" | "action" | "music" | "sound" | "dialogue" | "style" | "camera" | "generic"
+export type ClapSegmentCategory =
+  | "splat"
+  | "mesh"
+  | "depth"
+  | "event"
+  | "interface"
+  | "phenomenon"
+  | "video"
+  | "storyboard"
+  | "transition"
+  | "characters"
+  | "location"
+  | "time"
+  | "era"
+  | "lighting"
+  | "weather"
+  | "action"
+  | "music"
+  | "sound"
+  | "dialogue"
+  | "style"
+  | "camera"
+  | "generic"
 export type ClapOutputType = "text" | "animation" | "transition" | "image" | "video" | "audio"
 export type ClapSegmentStatus =
   | "to_generate"
diff --git a/src/lib/formatDuration.ts b/src/lib/formatters/formatDuration.ts
similarity index 90%
rename from src/lib/formatDuration.ts
rename to src/lib/formatters/formatDuration.ts
index b82522cb8b2878d9c00e78df7159177325938e9e..da46e68d99bf7c3caf2d7c213aa0cc51a2f713e6 100644
--- a/src/lib/formatDuration.ts
+++ b/src/lib/formatters/formatDuration.ts
@@ -1,6 +1,6 @@
 
 import {  intervalToDuration } from 'date-fns'
-import { isValidNumber } from './isValidNumber'
+import { isValidNumber } from '../utils/isValidNumber'
 
 export function formatDuration(seconds: number): string {
   if (!isValidNumber(seconds)) {
diff --git a/src/lib/formatLargeNumber.ts b/src/lib/formatters/formatLargeNumber.ts
similarity index 100%
rename from src/lib/formatLargeNumber.ts
rename to src/lib/formatters/formatLargeNumber.ts
diff --git a/src/lib/formatTimeAgo.ts b/src/lib/formatters/formatTimeAgo.ts
similarity index 100%
rename from src/lib/formatTimeAgo.ts
rename to src/lib/formatters/formatTimeAgo.ts
diff --git a/src/lib/useCanvasImage.ts b/src/lib/hooks/useCanvasImage.ts
similarity index 100%
rename from src/lib/useCanvasImage.ts
rename to src/lib/hooks/useCanvasImage.ts
diff --git a/src/lib/useCharacterLimit.ts b/src/lib/hooks/useCharacterLimit.ts
similarity index 100%
rename from src/lib/useCharacterLimit.ts
rename to src/lib/hooks/useCharacterLimit.ts
diff --git a/src/lib/useCountdown.ts b/src/lib/hooks/useCountdown.ts
similarity index 100%
rename from src/lib/useCountdown.ts
rename to src/lib/hooks/useCountdown.ts
diff --git a/src/lib/useImageDimension.ts b/src/lib/hooks/useImageDimension.ts
similarity index 83%
rename from src/lib/useImageDimension.ts
rename to src/lib/hooks/useImageDimension.ts
index 9cfd06e473929b1046a5dd9caa9d577ebaf09b7a..20de63673088f56fa54d815c72bb59ad5626d16a 100644
--- a/src/lib/useImageDimension.ts
+++ b/src/lib/hooks/useImageDimension.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 
-import { ImageDimension, getImageDimension } from "./getImageDimension"
+import { ImageDimension, getImageDimension } from "../utils/getImageDimension"
 
 export function useImageDimension(src: string) {
   const [dimension, setDimension] = useState<ImageDimension>({
diff --git a/src/lib/usePlaylist.ts b/src/lib/hooks/usePlaylist.ts
similarity index 100%
rename from src/lib/usePlaylist.ts
rename to src/lib/hooks/usePlaylist.ts
diff --git a/src/huggingface/hub/src/consts.ts b/src/lib/huggingface/hub/src/consts.ts
similarity index 100%
rename from src/huggingface/hub/src/consts.ts
rename to src/lib/huggingface/hub/src/consts.ts
diff --git a/src/huggingface/hub/src/error.ts b/src/lib/huggingface/hub/src/error.ts
similarity index 100%
rename from src/huggingface/hub/src/error.ts
rename to src/lib/huggingface/hub/src/error.ts
diff --git a/src/huggingface/hub/src/index.ts b/src/lib/huggingface/hub/src/index.ts
similarity index 100%
rename from src/huggingface/hub/src/index.ts
rename to src/lib/huggingface/hub/src/index.ts
diff --git a/src/huggingface/hub/src/lib/commit.ts b/src/lib/huggingface/hub/src/lib/commit.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/commit.ts
rename to src/lib/huggingface/hub/src/lib/commit.ts
diff --git a/src/huggingface/hub/src/lib/create-repo.ts b/src/lib/huggingface/hub/src/lib/create-repo.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/create-repo.ts
rename to src/lib/huggingface/hub/src/lib/create-repo.ts
diff --git a/src/huggingface/hub/src/lib/delete-file.ts b/src/lib/huggingface/hub/src/lib/delete-file.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/delete-file.ts
rename to src/lib/huggingface/hub/src/lib/delete-file.ts
diff --git a/src/huggingface/hub/src/lib/delete-files.ts b/src/lib/huggingface/hub/src/lib/delete-files.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/delete-files.ts
rename to src/lib/huggingface/hub/src/lib/delete-files.ts
diff --git a/src/huggingface/hub/src/lib/delete-repo.ts b/src/lib/huggingface/hub/src/lib/delete-repo.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/delete-repo.ts
rename to src/lib/huggingface/hub/src/lib/delete-repo.ts
diff --git a/src/huggingface/hub/src/lib/download-file.ts b/src/lib/huggingface/hub/src/lib/download-file.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/download-file.ts
rename to src/lib/huggingface/hub/src/lib/download-file.ts
diff --git a/src/huggingface/hub/src/lib/file-download-info.ts b/src/lib/huggingface/hub/src/lib/file-download-info.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/file-download-info.ts
rename to src/lib/huggingface/hub/src/lib/file-download-info.ts
diff --git a/src/huggingface/hub/src/lib/file-exists.ts b/src/lib/huggingface/hub/src/lib/file-exists.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/file-exists.ts
rename to src/lib/huggingface/hub/src/lib/file-exists.ts
diff --git a/src/huggingface/hub/src/lib/index.ts b/src/lib/huggingface/hub/src/lib/index.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/index.ts
rename to src/lib/huggingface/hub/src/lib/index.ts
diff --git a/src/huggingface/hub/src/lib/list-datasets.ts b/src/lib/huggingface/hub/src/lib/list-datasets.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/list-datasets.ts
rename to src/lib/huggingface/hub/src/lib/list-datasets.ts
diff --git a/src/huggingface/hub/src/lib/list-files.ts b/src/lib/huggingface/hub/src/lib/list-files.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/list-files.ts
rename to src/lib/huggingface/hub/src/lib/list-files.ts
diff --git a/src/huggingface/hub/src/lib/list-models.ts b/src/lib/huggingface/hub/src/lib/list-models.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/list-models.ts
rename to src/lib/huggingface/hub/src/lib/list-models.ts
diff --git a/src/huggingface/hub/src/lib/list-spaces.ts b/src/lib/huggingface/hub/src/lib/list-spaces.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/list-spaces.ts
rename to src/lib/huggingface/hub/src/lib/list-spaces.ts
diff --git a/src/huggingface/hub/src/lib/oauth-handle-redirect.ts b/src/lib/huggingface/hub/src/lib/oauth-handle-redirect.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/oauth-handle-redirect.ts
rename to src/lib/huggingface/hub/src/lib/oauth-handle-redirect.ts
diff --git a/src/huggingface/hub/src/lib/oauth-login-url.ts b/src/lib/huggingface/hub/src/lib/oauth-login-url.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/oauth-login-url.ts
rename to src/lib/huggingface/hub/src/lib/oauth-login-url.ts
diff --git a/src/huggingface/hub/src/lib/parse-safetensors-metadata.ts b/src/lib/huggingface/hub/src/lib/parse-safetensors-metadata.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/parse-safetensors-metadata.ts
rename to src/lib/huggingface/hub/src/lib/parse-safetensors-metadata.ts
diff --git a/src/huggingface/hub/src/lib/upload-file.ts b/src/lib/huggingface/hub/src/lib/upload-file.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/upload-file.ts
rename to src/lib/huggingface/hub/src/lib/upload-file.ts
diff --git a/src/huggingface/hub/src/lib/upload-files-with-progress.ts b/src/lib/huggingface/hub/src/lib/upload-files-with-progress.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/upload-files-with-progress.ts
rename to src/lib/huggingface/hub/src/lib/upload-files-with-progress.ts
diff --git a/src/huggingface/hub/src/lib/upload-files.ts b/src/lib/huggingface/hub/src/lib/upload-files.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/upload-files.ts
rename to src/lib/huggingface/hub/src/lib/upload-files.ts
diff --git a/src/huggingface/hub/src/lib/who-am-i.ts b/src/lib/huggingface/hub/src/lib/who-am-i.ts
similarity index 100%
rename from src/huggingface/hub/src/lib/who-am-i.ts
rename to src/lib/huggingface/hub/src/lib/who-am-i.ts
diff --git a/src/huggingface/hub/src/types/api/api-commit.d.ts b/src/lib/huggingface/hub/src/types/api/api-commit.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-commit.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-commit.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-create-repo.d.ts b/src/lib/huggingface/hub/src/types/api/api-create-repo.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-create-repo.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-create-repo.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-dataset.d.ts b/src/lib/huggingface/hub/src/types/api/api-dataset.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-dataset.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-dataset.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-index-tree.d.ts b/src/lib/huggingface/hub/src/types/api/api-index-tree.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-index-tree.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-index-tree.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-model.d.ts b/src/lib/huggingface/hub/src/types/api/api-model.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-model.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-model.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-space.d.ts b/src/lib/huggingface/hub/src/types/api/api-space.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-space.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-space.d.ts
diff --git a/src/huggingface/hub/src/types/api/api-who-am-i.d.ts b/src/lib/huggingface/hub/src/types/api/api-who-am-i.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/api/api-who-am-i.d.ts
rename to src/lib/huggingface/hub/src/types/api/api-who-am-i.d.ts
diff --git a/src/huggingface/hub/src/types/public.d.ts b/src/lib/huggingface/hub/src/types/public.d.ts
similarity index 100%
rename from src/huggingface/hub/src/types/public.d.ts
rename to src/lib/huggingface/hub/src/types/public.d.ts
diff --git a/src/huggingface/hub/src/utils/FileBlob.ts b/src/lib/huggingface/hub/src/utils/FileBlob.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/FileBlob.ts
rename to src/lib/huggingface/hub/src/utils/FileBlob.ts
diff --git a/src/huggingface/hub/src/utils/WebBlob.ts b/src/lib/huggingface/hub/src/utils/WebBlob.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/WebBlob.ts
rename to src/lib/huggingface/hub/src/utils/WebBlob.ts
diff --git a/src/huggingface/hub/src/utils/checkCredentials.ts b/src/lib/huggingface/hub/src/utils/checkCredentials.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/checkCredentials.ts
rename to src/lib/huggingface/hub/src/utils/checkCredentials.ts
diff --git a/src/huggingface/hub/src/utils/chunk.ts b/src/lib/huggingface/hub/src/utils/chunk.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/chunk.ts
rename to src/lib/huggingface/hub/src/utils/chunk.ts
diff --git a/src/huggingface/hub/src/utils/createBlob.ts b/src/lib/huggingface/hub/src/utils/createBlob.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/createBlob.ts
rename to src/lib/huggingface/hub/src/utils/createBlob.ts
diff --git a/src/huggingface/hub/src/utils/eventToGenerator.ts b/src/lib/huggingface/hub/src/utils/eventToGenerator.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/eventToGenerator.ts
rename to src/lib/huggingface/hub/src/utils/eventToGenerator.ts
diff --git a/src/huggingface/hub/src/utils/hexFromBytes.ts b/src/lib/huggingface/hub/src/utils/hexFromBytes.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/hexFromBytes.ts
rename to src/lib/huggingface/hub/src/utils/hexFromBytes.ts
diff --git a/src/huggingface/hub/src/utils/insecureRandomString.ts b/src/lib/huggingface/hub/src/utils/insecureRandomString.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/insecureRandomString.ts
rename to src/lib/huggingface/hub/src/utils/insecureRandomString.ts
diff --git a/src/huggingface/hub/src/utils/omit.ts b/src/lib/huggingface/hub/src/utils/omit.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/omit.ts
rename to src/lib/huggingface/hub/src/utils/omit.ts
diff --git a/src/huggingface/hub/src/utils/parseLinkHeader.ts b/src/lib/huggingface/hub/src/utils/parseLinkHeader.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/parseLinkHeader.ts
rename to src/lib/huggingface/hub/src/utils/parseLinkHeader.ts
diff --git a/src/huggingface/hub/src/utils/pick.ts b/src/lib/huggingface/hub/src/utils/pick.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/pick.ts
rename to src/lib/huggingface/hub/src/utils/pick.ts
diff --git a/src/huggingface/hub/src/utils/promisesQueue.ts b/src/lib/huggingface/hub/src/utils/promisesQueue.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/promisesQueue.ts
rename to src/lib/huggingface/hub/src/utils/promisesQueue.ts
diff --git a/src/huggingface/hub/src/utils/promisesQueueStreaming.ts b/src/lib/huggingface/hub/src/utils/promisesQueueStreaming.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/promisesQueueStreaming.ts
rename to src/lib/huggingface/hub/src/utils/promisesQueueStreaming.ts
diff --git a/src/huggingface/hub/src/utils/randomUUID.ts b/src/lib/huggingface/hub/src/utils/randomUUID.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/randomUUID.ts
rename to src/lib/huggingface/hub/src/utils/randomUUID.ts
diff --git a/src/huggingface/hub/src/utils/range.ts b/src/lib/huggingface/hub/src/utils/range.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/range.ts
rename to src/lib/huggingface/hub/src/utils/range.ts
diff --git a/src/huggingface/hub/src/utils/sha256-node.ts b/src/lib/huggingface/hub/src/utils/sha256-node.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/sha256-node.ts
rename to src/lib/huggingface/hub/src/utils/sha256-node.ts
diff --git a/src/huggingface/hub/src/utils/sha256.ts b/src/lib/huggingface/hub/src/utils/sha256.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/sha256.ts
rename to src/lib/huggingface/hub/src/utils/sha256.ts
diff --git a/src/huggingface/hub/src/utils/sum.ts b/src/lib/huggingface/hub/src/utils/sum.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/sum.ts
rename to src/lib/huggingface/hub/src/utils/sum.ts
diff --git a/src/huggingface/hub/src/utils/toRepoId.ts b/src/lib/huggingface/hub/src/utils/toRepoId.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/toRepoId.ts
rename to src/lib/huggingface/hub/src/utils/toRepoId.ts
diff --git a/src/huggingface/hub/src/utils/typedEntries.ts b/src/lib/huggingface/hub/src/utils/typedEntries.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/typedEntries.ts
rename to src/lib/huggingface/hub/src/utils/typedEntries.ts
diff --git a/src/huggingface/hub/src/utils/typedInclude.ts b/src/lib/huggingface/hub/src/utils/typedInclude.ts
similarity index 100%
rename from src/huggingface/hub/src/utils/typedInclude.ts
rename to src/lib/huggingface/hub/src/utils/typedInclude.ts
diff --git a/src/huggingface/shared/base64FromBytes.ts b/src/lib/huggingface/shared/base64FromBytes.ts
similarity index 100%
rename from src/huggingface/shared/base64FromBytes.ts
rename to src/lib/huggingface/shared/base64FromBytes.ts
diff --git a/src/huggingface/shared/index.ts b/src/lib/huggingface/shared/index.ts
similarity index 100%
rename from src/huggingface/shared/index.ts
rename to src/lib/huggingface/shared/index.ts
diff --git a/src/huggingface/shared/isBackend.ts b/src/lib/huggingface/shared/isBackend.ts
similarity index 100%
rename from src/huggingface/shared/isBackend.ts
rename to src/lib/huggingface/shared/isBackend.ts
diff --git a/src/huggingface/shared/isFrontend.ts b/src/lib/huggingface/shared/isFrontend.ts
similarity index 100%
rename from src/huggingface/shared/isFrontend.ts
rename to src/lib/huggingface/shared/isFrontend.ts
diff --git a/src/lib/utils.ts b/src/lib/utils/cn.ts
similarity index 100%
rename from src/lib/utils.ts
rename to src/lib/utils/cn.ts
diff --git a/src/lib/computePercentage.ts b/src/lib/utils/computePercentage.ts
similarity index 100%
rename from src/lib/computePercentage.ts
rename to src/lib/utils/computePercentage.ts
diff --git a/src/lib/computeSecretFingerprint.ts b/src/lib/utils/computeSecretFingerprint.ts
similarity index 100%
rename from src/lib/computeSecretFingerprint.ts
rename to src/lib/utils/computeSecretFingerprint.ts
diff --git a/src/lib/computeSha256.ts b/src/lib/utils/computeSha256.ts
similarity index 100%
rename from src/lib/computeSha256.ts
rename to src/lib/utils/computeSha256.ts
diff --git a/src/lib/extractBase64.ts b/src/lib/utils/extractBase64.ts
similarity index 100%
rename from src/lib/extractBase64.ts
rename to src/lib/utils/extractBase64.ts
diff --git a/src/lib/generateSeed.ts b/src/lib/utils/generateSeed.ts
similarity index 100%
rename from src/lib/generateSeed.ts
rename to src/lib/utils/generateSeed.ts
diff --git a/src/lib/getImageDimension.ts b/src/lib/utils/getImageDimension.ts
similarity index 100%
rename from src/lib/getImageDimension.ts
rename to src/lib/utils/getImageDimension.ts
diff --git a/src/lib/getInitialRenderedScene.ts b/src/lib/utils/getInitialRenderedScene.ts
similarity index 100%
rename from src/lib/getInitialRenderedScene.ts
rename to src/lib/utils/getInitialRenderedScene.ts
diff --git a/src/lib/getValidNumber.ts b/src/lib/utils/getValidNumber.ts
similarity index 100%
rename from src/lib/getValidNumber.ts
rename to src/lib/utils/getValidNumber.ts
diff --git a/src/lib/isValidNumber.ts b/src/lib/utils/isValidNumber.ts
similarity index 100%
rename from src/lib/isValidNumber.ts
rename to src/lib/utils/isValidNumber.ts
diff --git a/src/lib/parseAssetToCheckIfGaussian.ts b/src/lib/utils/parseAssetToCheckIfGaussian.ts
similarity index 100%
rename from src/lib/parseAssetToCheckIfGaussian.ts
rename to src/lib/utils/parseAssetToCheckIfGaussian.ts
diff --git a/src/lib/utils/parseAssetToCheckIfLatent.ts b/src/lib/utils/parseAssetToCheckIfLatent.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8023b21d96c2a288a8e91f9681ece39acebd0b7b
--- /dev/null
+++ b/src/lib/utils/parseAssetToCheckIfLatent.ts
@@ -0,0 +1,13 @@
+export function parseAssetToCheckIfLatent(url: string) {
+  let ext = url.toLowerCase().split(".").pop() || ""
+  ext = ext.split("?").shift() || ""
+
+  // check if it's a Clap or a LatentScript file
+  // the .ls is usually small (it's like Makrdown)
+  // while the Clap can be huge (many gbs)
+  if (ext === "clap" || ext === "ls") {
+    return true
+  }
+
+  return false
+}
\ No newline at end of file
diff --git a/src/lib/parseMediaProjectionType.ts b/src/lib/utils/parseMediaProjectionType.ts
similarity index 78%
rename from src/lib/parseMediaProjectionType.ts
rename to src/lib/utils/parseMediaProjectionType.ts
index 5426772837a01cea8bedd4edf5d7e518c765818a..7b0110b3f4b49617f33e378418ce5070963ad233 100644
--- a/src/lib/parseMediaProjectionType.ts
+++ b/src/lib/utils/parseMediaProjectionType.ts
@@ -2,12 +2,22 @@ import { parseProjectionFromLoRA } from "@/app/server/actions/utils/parseProject
 import { MediaInfo, MediaProjection } from "@/types/general"
 
 import { parseAssetToCheckIfGaussian } from "./parseAssetToCheckIfGaussian"
+import { parseAssetToCheckIfLatent } from "./parseAssetToCheckIfLatent"
 
 export function parseMediaProjectionType(media?: MediaInfo): MediaProjection {
   // note: we could also create a new value for when it is undetermined,
   // or we could also return undefined
   if (!media) { return "cartesian" }
 
+  const isLatent = 
+    media.projection === "latent" ||
+    parseAssetToCheckIfLatent(media?.assetUrlHd) ||
+    parseAssetToCheckIfLatent(media?.assetUrl)
+
+  if (isLatent) {
+    return "latent"
+  }
+
   // TODO: add a way to detect its a gaussian splat (the file format, maybe?)
   const isGaussian =
     media.projection === "gaussian" ||
diff --git a/src/lib/pick.ts b/src/lib/utils/pick.ts
similarity index 100%
rename from src/lib/pick.ts
rename to src/lib/utils/pick.ts
diff --git a/src/lib/sleep.ts b/src/lib/utils/sleep.ts
similarity index 100%
rename from src/lib/sleep.ts
rename to src/lib/utils/sleep.ts
diff --git a/src/lib/stripHtml.ts b/src/lib/utils/stripHtml.ts
similarity index 100%
rename from src/lib/stripHtml.ts
rename to src/lib/utils/stripHtml.ts
diff --git a/src/lib/transparentImage.ts b/src/lib/utils/transparentImage.ts
similarity index 100%
rename from src/lib/transparentImage.ts
rename to src/lib/utils/transparentImage.ts
diff --git a/src/lib/triggerDownload.ts b/src/lib/utils/triggerDownload.ts
similarity index 100%
rename from src/lib/triggerDownload.ts
rename to src/lib/utils/triggerDownload.ts
diff --git a/src/types/general.ts b/src/types/general.ts
index 0ade55d416cfd5db545d90f068369b790918652a..200a7bca861e8171b2cda3cd1180016ed40d4ba1 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -356,6 +356,7 @@ export type MediaProjection =
   | "cartesian" // this is the default
   | "equirectangular"
   | "gaussian"
+  | "latent"
 
 
 // TODO: renamed this to MediaInfo
@@ -627,13 +628,13 @@ export type InterfaceView =
   | "home"
   | "user_channels"
   | "user_channel" // for a user to admin their channels
-  | "user_videos"
-  | "user_video"
+  | "user_medias"
+  | "user_media"
   | "user_account"
   | "public_channels"
   | "public_channel" // public view of a channel
-  | "public_video" // public view of a video
-  | "public_video_embed" // for integration into twitter etc
+  | "public_media" // public view of a video
+  | "public_media_embed" // for integration into twitter etc
   | "public_music_videos" // public music videos - it's a special category, because music is *cool*
   | "public_gaming" // for AiTube Gaming
   | "public_4d" // for AiTube 4D