diff --git a/materialious/src/lib/ChannelThumbnail.svelte b/materialious/src/lib/ChannelThumbnail.svelte
index d8fd59ec..79a126c0 100644
--- a/materialious/src/lib/ChannelThumbnail.svelte
+++ b/materialious/src/lib/ChannelThumbnail.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import type { Channel } from './Api/model';
+	import type { Channel } from './api/model';
 	import { cleanNumber, getBestThumbnail, proxyGoogleImage, truncate } from './misc';
 	import { interfaceLowBandwidthMode } from './store';
 
diff --git a/materialious/src/lib/Comment.svelte b/materialious/src/lib/Comment.svelte
index a17ea7be..f1cdf954 100644
--- a/materialious/src/lib/Comment.svelte
+++ b/materialious/src/lib/Comment.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { getComments } from './Api';
-	import { type Comment, type Comments } from './Api/model';
+	import { getComments } from './api';
+	import { type Comment, type Comments } from './api/model';
 	import { getBestThumbnail, numberWithCommas, proxyGoogleImage } from './misc';
 	import { interfaceLowBandwidthMode } from './store';
 
diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 428564c9..1b2cf937 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -13,8 +13,8 @@
 	import { get } from 'svelte/store';
 	import type { FullscreenChangeEvent, MediaTimeUpdateEvent, PlayerSrc } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
-	import { deleteVideoProgress, getVideoProgress, saveVideoProgress } from './Api';
-	import type { VideoPlay } from './Api/model';
+	import { deleteVideoProgress, getVideoProgress, saveVideoProgress } from './api';
+	import type { VideoPlay } from './api/model';
 	import {
 		getBestThumbnail,
 		proxyVideoUrl,
diff --git a/materialious/src/lib/PlaylistThumbnail.svelte b/materialious/src/lib/PlaylistThumbnail.svelte
index 1cf7395d..6eda54a1 100644
--- a/materialious/src/lib/PlaylistThumbnail.svelte
+++ b/materialious/src/lib/PlaylistThumbnail.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import type { Playlist } from './Api/model';
+	import type { Playlist } from './api/model';
 	import { getBestThumbnail, letterCase, truncate } from './misc';
 	import { interfaceLowBandwidthMode } from './store';
 
diff --git a/materialious/src/lib/Search.svelte b/materialious/src/lib/Search.svelte
index b4f83be4..fcbd16f3 100644
--- a/materialious/src/lib/Search.svelte
+++ b/materialious/src/lib/Search.svelte
@@ -3,7 +3,7 @@
 	import Mousetrap from 'mousetrap';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { getSearchSuggestions } from './Api';
+	import { getSearchSuggestions } from './api';
 	import { interfaceSearchSuggestionsStore } from './store';
 
 	const dispatch = createEventDispatcher();
diff --git a/materialious/src/lib/ShareVideo.svelte b/materialious/src/lib/ShareVideo.svelte
index 5f071ca4..5bdd2185 100644
--- a/materialious/src/lib/ShareVideo.svelte
+++ b/materialious/src/lib/ShareVideo.svelte
@@ -2,7 +2,7 @@
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from 'svelte-i18n';
-	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './Api/model';
+	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './api/model';
 
 	export let video: VideoBase | Video | Notification | PlaylistPageVideo;
 </script>
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 4c408144..cbca3b55 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -2,8 +2,8 @@
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import { getChannel, getDeArrow, getThumbnail, getVideo, getVideoProgress } from './Api';
-	import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './Api/model';
+	import { getChannel, getDeArrow, getThumbnail, getVideo, getVideoProgress } from './api';
+	import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './api/model';
 	import {
 		cleanNumber,
 		getBestThumbnail,
diff --git a/materialious/src/lib/Transcript.svelte b/materialious/src/lib/Transcript.svelte
index 254777eb..ae65a088 100644
--- a/materialious/src/lib/Transcript.svelte
+++ b/materialious/src/lib/Transcript.svelte
@@ -5,7 +5,7 @@
 	import { get } from 'svelte/store';
 	import type { MediaTimeUpdateEvent } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
-	import type { VideoPlay } from './Api/model';
+	import type { VideoPlay } from './api/model';
 	import { decodeHtmlCharCodes, videoLength } from './misc';
 	import { instanceStore } from './store';
 
diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte
index 5a980293..75921f7e 100644
--- a/materialious/src/lib/VideoList.svelte
+++ b/materialious/src/lib/VideoList.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import { removePlaylistVideo } from './Api';
-	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './Api/model';
+	import { removePlaylistVideo } from './api';
+	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './api/model';
 	import ContentColumn from './ContentColumn.svelte';
-	import Thumbnail from './Thumbnail.svelte';
 	import { authStore } from './store';
+	import Thumbnail from './Thumbnail.svelte';
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
 	export let playlistId: string = '';
diff --git a/materialious/src/lib/android/plugins/colorTheme.ts b/materialious/src/lib/android/plugins/colorTheme.ts
new file mode 100644
index 00000000..2516bdc7
--- /dev/null
+++ b/materialious/src/lib/android/plugins/colorTheme.ts
@@ -0,0 +1,28 @@
+import { registerPlugin } from "@capacitor/core";
+
+export interface ColorTheme {
+  getColorPalette: () => Promise<{
+    primary: number;
+    onPrimary: number;
+    secondary: number;
+    accent: number;
+  }>;
+}
+
+export function convertToHexColorCode(color: number) {
+  // Convert the negative number to a positive unsigned integer
+  const unsignedColor = color < 0 ? color + 0x100000000 : color;
+
+  // Extract the RGB components
+  const r = (unsignedColor >> 16) & 0xff;
+  const g = (unsignedColor >> 8) & 0xff;
+  const b = unsignedColor & 0xff;
+
+  // Convert to hex format and pad with zeros if necessary
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+}
+
+
+const colorTheme = registerPlugin<ColorTheme>('ColorTheme');
+
+export default colorTheme;
\ No newline at end of file
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index 4663e8c2..97acfa69 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -3,8 +3,8 @@
 	import { navigating } from '$app/stores';
 	import '$lib/android/http/androidRequests';
 	import colorTheme, { convertToHexColorCode } from '$lib/android/plugins/ColorTheme';
-	import { getFeed } from '$lib/Api/index';
-	import type { Notification } from '$lib/Api/model';
+	import { getFeed } from '$lib/api/index';
+	import type { Notification } from '$lib/api/model';
 	import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings';
 	import Logo from '$lib/Logo.svelte';
 	import MiniPlayer from '$lib/MiniPlayer.svelte';
diff --git a/materialious/src/routes/(app)/+page.ts b/materialious/src/routes/(app)/+page.ts
index 2b9e970e..ab438cfb 100644
--- a/materialious/src/routes/(app)/+page.ts
+++ b/materialious/src/routes/(app)/+page.ts
@@ -1,4 +1,4 @@
-import { getPopular } from '$lib/api/index.js';
+import { getPopular } from '$lib/api/index';
 import { error } from '@sveltejs/kit';
 
 export async function load() {
diff --git a/materialious/src/routes/(app)/channel/[slug]/+page.svelte b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
index ec578faf..4c61c41a 100644
--- a/materialious/src/routes/(app)/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { amSubscribed, deleteUnsubscribe, getChannelContent, postSubscribe } from '$lib/Api';
-	import type { ChannelContentPlaylists, ChannelContentVideos } from '$lib/Api/model';
+	import { amSubscribed, deleteUnsubscribe, getChannelContent, postSubscribe } from '$lib/api';
+	import type { ChannelContentPlaylists, ChannelContentVideos } from '$lib/api/model';
 	import ContentColumn from '$lib/ContentColumn.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
diff --git a/materialious/src/routes/(app)/channel/[slug]/+page.ts b/materialious/src/routes/(app)/channel/[slug]/+page.ts
index 51e0af6f..551e9c48 100644
--- a/materialious/src/routes/(app)/channel/[slug]/+page.ts
+++ b/materialious/src/routes/(app)/channel/[slug]/+page.ts
@@ -1,4 +1,4 @@
-import { getChannel } from '$lib/api/index.js';
+import { getChannel } from '$lib/api/index';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
diff --git a/materialious/src/routes/(app)/history/+page.svelte b/materialious/src/routes/(app)/history/+page.svelte
index 0ebbf88d..e57f90d0 100644
--- a/materialious/src/routes/(app)/history/+page.svelte
+++ b/materialious/src/routes/(app)/history/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { deleteAllVideoProgress, deleteHistory, getHistory, getVideo } from '$lib/Api';
-	import type { VideoPlay } from '$lib/Api/model';
+	import { deleteAllVideoProgress, deleteHistory, getHistory, getVideo } from '$lib/api';
+	import type { VideoPlay } from '$lib/api/model';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import VideoList from '$lib/VideoList.svelte';
 	import { activePageStore, synciousStore } from '$lib/store';
diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
index 6c6c9dd6..cedfddb2 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getPlaylist } from '$lib/Api/index';
-	import type { PlaylistPageVideo } from '$lib/Api/model.js';
-	import VideoList from '$lib/VideoList.svelte';
+	import { getPlaylist } from '$lib/api/index';
+	import type { PlaylistPageVideo } from '$lib/api/model.js';
 	import { cleanNumber, unsafeRandomItem } from '$lib/misc.js';
 	import { activePageStore, playlistSettingsStore } from '$lib/store';
+	import VideoList from '$lib/VideoList.svelte';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { onMount } from 'svelte';
diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.ts b/materialious/src/routes/(app)/playlist/[slug]/+page.ts
index 76139ee9..c87433bf 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.ts
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.ts
@@ -1,4 +1,4 @@
-import { getPlaylist } from '$lib/api/index.js';
+import { getPlaylist } from '$lib/api/index';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
diff --git a/materialious/src/routes/(app)/subscriptions/+page.svelte b/materialious/src/routes/(app)/subscriptions/+page.svelte
index 000ad99c..7902c515 100644
--- a/materialious/src/routes/(app)/subscriptions/+page.svelte
+++ b/materialious/src/routes/(app)/subscriptions/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getFeed } from '$lib/Api/index.js';
-	import VideoList from '$lib/VideoList.svelte';
+	import { getFeed } from '$lib/api/index';
 	import { activePageStore } from '$lib/store';
+	import VideoList from '$lib/VideoList.svelte';
 	import { _ } from 'svelte-i18n';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 
diff --git a/materialious/src/routes/(app)/subscriptions/+page.ts b/materialious/src/routes/(app)/subscriptions/+page.ts
index 64fd816a..6b27f7a4 100644
--- a/materialious/src/routes/(app)/subscriptions/+page.ts
+++ b/materialious/src/routes/(app)/subscriptions/+page.ts
@@ -1,4 +1,4 @@
-import { getFeed } from '$lib/api/index.js';
+import { getFeed } from '$lib/api/index';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
diff --git a/materialious/src/routes/(app)/trending/+page.ts b/materialious/src/routes/(app)/trending/+page.ts
index 1c496c9d..aa67d83c 100644
--- a/materialious/src/routes/(app)/trending/+page.ts
+++ b/materialious/src/routes/(app)/trending/+page.ts
@@ -1,4 +1,4 @@
-import { getTrending } from '$lib/api/index.js';
+import { getTrending } from '$lib/api/index.';
 import type { Video } from '$lib/api/model';
 import { error } from '@sveltejs/kit';
 
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index dc00d15f..ca65f296 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -8,8 +8,8 @@
 		getPlaylist,
 		postSubscribe,
 		removePlaylistVideo
-	} from '$lib/Api/index.js';
-	import type { Comments, PlaylistPage, PlaylistPageVideo } from '$lib/Api/model.js';
+	} from '$lib/api/index';
+	import type { Comments, PlaylistPage, PlaylistPageVideo } from '$lib/api/model.js';
 	import Comment from '$lib/Comment.svelte';
 	import {
 		cleanNumber,
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.ts b/materialious/src/routes/(app)/watch/[slug]/+page.ts
index 1fa27a42..7e00b036 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.ts
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.ts
@@ -5,7 +5,7 @@ import {
 	getPersonalPlaylists,
 	getVideo,
 	postHistory
-} from '$lib/api/index.js';
+} from '$lib/api/index';
 import { phaseDescription } from '$lib/misc';
 import {
 	authStore,
diff --git a/materialious/src/routes/(no-layout)/embed/[slug]/+page.ts b/materialious/src/routes/(no-layout)/embed/[slug]/+page.ts
index fa33adfe..dce71ce0 100644
--- a/materialious/src/routes/(no-layout)/embed/[slug]/+page.ts
+++ b/materialious/src/routes/(no-layout)/embed/[slug]/+page.ts
@@ -1,4 +1,4 @@
-import { getVideo } from '$lib/api/index.js';
+import { getVideo } from '$lib/api/index';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
 import type { PhasedDescription } from '../../../../lib/misc.js';