diff --git a/package.json b/package.json
index 3712369a..c4cc09f0 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "vue": "^v3.5.13",
     "vue-boring-avatars": "^1.4.0",
     "vue-debounce": "^3.0.2",
+    "vue-i18n": "11",
     "vue-router": "^4.1.3",
     "vue-template-compiler": "^2.0.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",
diff --git a/src/components/AlbumView/GenreBanner.vue b/src/components/AlbumView/GenreBanner.vue
index bdc42957..ea91d7b8 100644
--- a/src/components/AlbumView/GenreBanner.vue
+++ b/src/components/AlbumView/GenreBanner.vue
@@ -7,7 +7,7 @@
   >
     <div class="scrollable">
       <div class="rounded pad-sm genre-pill">
-        {{ genres.length ? "Genres" : "No genres" }}
+        {{ genres.length ? t('AlbumView.GenreBanner.GenreExists') : t('AlbumView.GenreBanner.GenreDoesNotExist') }}
       </div>
       <div
         v-for="genre in genres"
@@ -27,9 +27,12 @@
 import useAlbumStore from "@/stores/pages/album";
 import useArtistStore from "@/stores/pages/artist";
 import { computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 
 import { getShift } from "@/utils/colortools/shift";
 
+const { t } = useI18n();
+
 const album = useAlbumStore();
 const store = useArtistStore();
 
diff --git a/src/components/AlbumView/Header/Stats.vue b/src/components/AlbumView/Header/Stats.vue
index 42db3cb0..48f303c8 100644
--- a/src/components/AlbumView/Header/Stats.vue
+++ b/src/components/AlbumView/Header/Stats.vue
@@ -6,11 +6,11 @@
         :albumartists="''"
         :small="true"
         :append="!isSmallPhone ? statsText : ''"
-        :prepend="isSmallPhone ? 'Album by ' : ''"
+        :prepend="isSmallPhone ? $t('AlbumView.AlbumBy') : ''"
       />
     </div>
     <div v-if="isSmallPhone" class="stats2">
-      {{ new Date(album.date * 1000).getFullYear() }} {{ !album.is_single ? `• ${album.trackcount} Tracks` : "" }} •
+      {{ new Date(album.date * 1000).getFullYear() }} {{ !album.is_single ? `• ${album.trackcount} ${$t('AlbumView.TrackCountPlural')}` : "" }} •
       {{ formatSeconds(album.duration, true) }}
     </div>
   </div>
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 import { Album } from "@/interfaces";
 import { isSmallPhone } from "@/stores/content-width";
@@ -25,6 +26,8 @@ import { formatSeconds } from "@/utils";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   album: Album;
 }>();
@@ -34,7 +37,7 @@ const statsText = computed(() => {
 
   // hide track count if it's a single, also add an s to track if it's plural
   return `• ${new Date(props.album.date * 1000).getFullYear()} ${
-    !is_single ? `• ${props.album.trackcount.toLocaleString()} Track${props.album.trackcount > 1 ? "s" : ""}` : ""
+    !is_single ? `• ${props.album.trackcount.toLocaleString()} ${props.album.trackcount > 1 ? $t('AlbumView.TrackCountPlural') : $t('AlbumView.TrackCount')}` : ""
   } • ${formatSeconds(props.album.duration, true)}`;
 });
 </script>
diff --git a/src/components/ArtistView/HeaderComponents/Info.vue b/src/components/ArtistView/HeaderComponents/Info.vue
index 5ccdb8e7..cc4890ee 100644
--- a/src/components/ArtistView/HeaderComponents/Info.vue
+++ b/src/components/ArtistView/HeaderComponents/Info.vue
@@ -6,16 +6,16 @@
         }"
     >
         <section class="text">
-            <div class="card-title">Artist</div>
+            <div class="card-title">{{ t('ArtistView.Title') }}</div>
             <div class="artist-name" :class="`${useCircularImage ? 'ellip' : 'ellip2'}`" :title="artist.name">
                 {{ artist.name }}
             </div>
             <div class="stats">
                 <span v-if="artist.trackcount">
-                    {{ artist.trackcount.toLocaleString() }} Track{{ `${artist.trackcount == 1 ? '' : 's'} • ` }}
+                    {{ artist.trackcount.toLocaleString() }} {{ `${artist.trackcount == 1 ? t('ArtistView.TrackCount') : t('ArtistView.TrackCountPlural')} • ` }}
                 </span>
                 <span v-if="artist.albumcount">
-                    {{ artist.albumcount.toLocaleString() }} Album{{ `${artist.albumcount == 1 ? '' : 's'} • ` }}
+                    {{ artist.albumcount.toLocaleString() }} {{ `${artist.albumcount == 1 ? t('ArtistView.AlbumCount') : t('ArtistView.AlbumCountPlural')} • ` }}
                 </span>
                 <span v-if="artist.duration">
                     {{ `${formatSeconds(artist.duration, true)}` }}
@@ -32,6 +32,9 @@ import { getTextColor } from '@/utils/colortools/shift'
 import { Artist } from '@/interfaces'
 import formatSeconds from '@/utils/useFormatSeconds'
 import Buttons from './Buttons.vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
     artist: Artist
diff --git a/src/components/ArtistView/TopTracks.vue b/src/components/ArtistView/TopTracks.vue
index b716ac6e..8da2b140 100644
--- a/src/components/ArtistView/TopTracks.vue
+++ b/src/components/ArtistView/TopTracks.vue
@@ -14,7 +14,7 @@
                 @playThis="playHandler(index)"
             />
         </div>
-        <div v-if="!tracks.length" class="error">No tracks</div>
+        <div v-if="!tracks.length" class="error">{{ t('ArtistView.NoTracks') }}</div>
     </div>
 </template>
 
@@ -24,6 +24,9 @@ import { Track } from '@/interfaces'
 import { isMedium, isSmall } from '@/stores/content-width'
 import SeeAll from '../shared/SeeAll.vue'
 import SongItem from '../shared/SongItem.vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
     tracks: Track[]
diff --git a/src/components/BottomBar/Left.vue b/src/components/BottomBar/Left.vue
index dd0d3ece..e6157f56 100644
--- a/src/components/BottomBar/Left.vue
+++ b/src/components/BottomBar/Left.vue
@@ -30,14 +30,14 @@
         >
             <div v-tooltip class="title">
                 <span class="ellip">
-                    {{ queue.currenttrack?.title || 'Hello there' }}
+                    {{ queue.currenttrack?.title || t('BottomBar.PlaceholderTitle') }}
                 </span>
                 <ExplicitIcon class="explicit-icon" v-if="queue.currenttrack?.explicit" />
                 <MasterFlag :bitrate="queue.currenttrack?.bitrate || 0" />
             </div>
             <ArtistName
                 :artists="queue.currenttrack?.artists || []"
-                :albumartists="queue.currenttrack?.albumartists || 'Welcome to Swing Music'"
+                :albumartists="queue.currenttrack?.albumartists || t('BottomBar.PlaceholderArtist')"
                 class="artist"
             />
         </div>
@@ -55,6 +55,9 @@ import useColorStore from '@/stores/colors'
 import { isLargerMobile, isMobile } from '@/stores/content-width'
 import useQStore from '@/stores/queue'
 import useSettingsStore from '@/stores/settings'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import ExpandSvg from '@/assets/icons/expand.svg'
 import ArtistName from '@/components/shared/ArtistName.vue'
diff --git a/src/components/BottomBar/Right.vue b/src/components/BottomBar/Right.vue
index 72f8f310..41d74375 100644
--- a/src/components/BottomBar/Right.vue
+++ b/src/components/BottomBar/Right.vue
@@ -5,7 +5,7 @@
         <button
             class="repeat"
             :class="{ 'repeat-disabled': settings.repeat == 'none' }"
-            :title="settings.repeat == 'all' ? 'Repeat all' : settings.repeat == 'one' ? 'Repeat one' : 'No repeat'"
+            :title="settings.repeat == 'all' ? t('BottomBar.RepeatOptions.All') : settings.repeat == 'one' ? t('BottomBar.RepeatOptions.One') : t('BottomBar.RepeatOptions.None')"
             @click="settings.toggleRepeatMode"
         >
             <RepeatOneSvg v-if="settings.repeat == 'one'" />
@@ -26,6 +26,9 @@
 <script setup lang="ts">
 import useQueue from '@/stores/queue'
 import useSettings from '@/stores/settings'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
 import RepeatAllSvg from '@/assets/icons/repeat.svg'
diff --git a/src/components/CardListView/SortBanner.vue b/src/components/CardListView/SortBanner.vue
index 6e72e562..1773938b 100644
--- a/src/components/CardListView/SortBanner.vue
+++ b/src/components/CardListView/SortBanner.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="itemsortby">
-        <div class="tt select circular">Sort By</div>
+        <div class="tt select circular">{{ t('CardList.SortBy') }}</div>
         <div class="left group">
             <SortKey
                 :items="($route.name == Routes.AlbumList ? albumitems : artistitems).concat(items)"
@@ -22,31 +22,34 @@ import { useRoute } from 'vue-router'
 import { useAlbumList, useArtistList } from '@/stores/pages/itemlist'
 import SortKey from './SortKey.vue'
 import ChartSvg from '@/assets/icons/chart.svg'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const route = useRoute()
 const store = route.name === Routes.AlbumList ? useAlbumList() : useArtistList()
 
 const items = [
-    { key: 'trackcount', displayName: 'No. of tracks' },
-    { key: 'duration', displayName: 'Duration' },
-    { key: 'created_date', displayName: 'Date added' },
-    { key: 'lastplayed', displayName: 'Last played' },
+    { key: 'trackcount', displayName: t('CardList.SortByOptions.TrackCount') },
+    { key: 'duration', displayName: t('CardList.SortByOptions.Duration') },
+    { key: 'created_date', displayName: t('CardList.SortByOptions.CreatedDate') },
+    { key: 'lastplayed', displayName: t('CardList.SortByOptions.LastPlayed') },
 ]
 
 const statitems = [
-    { key: 'playcount', displayName: 'Plays' },
-    { key: 'playduration', displayName: 'Play duration' },
+    { key: 'playcount', displayName: t('CardList.SortByOptions.PlayCount') },
+    { key: 'playduration', displayName: t('CardList.SortByOptions.PlayDuration') },
 ]
 
 const albumitems = [
-    { key: 'title', displayName: 'Title' },
-    { key: 'albumartists', displayName: 'Artist' },
-    { key: 'date', displayName: 'Year released' },
+    { key: 'title', displayName: t('CardList.SortByOptions.Title') },
+    { key: 'albumartists', displayName: t('CardList.SortByOptions.AlbumArtists') },
+    { key: 'date', displayName: t('CardList.SortByOptions.Date') },
 ]
 
 const artistitems = [
-    { key: 'name', displayName: 'Name' },
-    { key: 'albumcount', displayName: 'No. of albums' },
+    { key: 'name', displayName: t('CardList.SortByOptions.Name') },
+    { key: 'albumcount', displayName: t('CardList.SortByOptions.NoOfAlbums') },
 ]
 </script>
 
diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue
index 2a00ac83..42771035 100644
--- a/src/components/FolderView/FolderItem.vue
+++ b/src/components/FolderView/FolderItem.vue
@@ -17,7 +17,7 @@
       <div class="info">
         <div class="f-item-text ellip">{{ folder.name }}</div>
         <div class="f-count" v-if="folder.trackcount">
-          {{ folder.trackcount.toLocaleString() + ` File${folder.trackcount == 1 ? "" : "s"}` }}
+          {{ folder.trackcount.toLocaleString() + ` ${folder.trackcount == 1 ? t('FolderView.FileCount') : t('FolderView.FileCountPlural')}` }}
         </div>
       </div>
       <div v-if="!folder_page" class="check">
@@ -31,6 +31,9 @@
 <script setup lang="ts">
 import { Routes } from "@/router";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import { Folder } from "@/interfaces";
 
diff --git a/src/components/HomeView/Browse.vue b/src/components/HomeView/Browse.vue
index 43e097e1..f3024f0f 100644
--- a/src/components/HomeView/Browse.vue
+++ b/src/components/HomeView/Browse.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="homebrowse">
-    <div class="btitle"><b>Browse Library</b></div>
+    <div class="btitle"><b>{{ t('HomeView.Browse.Title') }}</b></div>
     <div class="browselist">
       <RouterLink
         v-for="i in browselist"
@@ -34,10 +34,13 @@ import { triggerScan } from "@/requests/settings/rootdirs";
 import { Routes } from "@/router";
 import { album_card_with } from "@/stores/content-width";
 import useDialog from "@/stores/modal";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const browselist = [
   {
-    title: "Folders",
+    title: t('HomeView.Browse.BrowseList.Folders'),
     route: Routes.folder,
     params: {
       path: "$home",
@@ -45,40 +48,40 @@ const browselist = [
     icon: FolderIcon,
   },
   {
-    title: "Albums",
+    title: t('HomeView.Browse.BrowseList.Albums'),
     route: Routes.AlbumList,
     icon: AlbumIcon,
   },
   {
-    title: "Artists",
+    title: t('HomeView.Browse.BrowseList.Artists'),
     route: Routes.ArtistList,
     icon: ArtistIcon,
   },
   {
-    title: "Playlists",
+    title: t('HomeView.Browse.BrowseList.Playlists'),
     route: Routes.playlists,
     icon: PlaylistIcon,
   },
   {
-    title: "Favorites",
+    title: t('HomeView.Browse.BrowseList.Favorites'),
     route: Routes.favorites,
     icon: HeartIcon,
     class: "favorite",
   },
   {
-    title: "Fav. tracks",
+    title: t('HomeView.Browse.BrowseList.FavTracks'),
     route: Routes.favoriteTracks,
     icon: HeartIcon,
     class: "favorite",
   },
   {
-    title: "Fav. artists",
+    title: t('HomeView.Browse.BrowseList.FavArtists'),
     route: Routes.favoriteArtists,
     icon: ArtistIcon,
     class: "favorite",
   },
   {
-    title: "Fav. albums",
+    title: t('HomeView.Browse.BrowseList.FavAlbums'),
     route: Routes.favoriteAlbums,
     icon: AlbumIcon,
     class: "favorite",
@@ -93,7 +96,7 @@ const browselist = [
   //   class: "settings",
   // },
   {
-    title: "Stats",
+    title: t('HomeView.Browse.BrowseList.Stats'),
     icon: AlbumIcon,
     route: Routes.Stats,
   }
diff --git a/src/components/LeftSidebar/MobileNav.vue b/src/components/LeftSidebar/MobileNav.vue
index d5681f03..27132e75 100644
--- a/src/components/LeftSidebar/MobileNav.vue
+++ b/src/components/LeftSidebar/MobileNav.vue
@@ -33,5 +33,6 @@
 </template>
 
 <script setup lang="ts">
-import { menus } from "./navitems";
+import { useNavItems } from "../LeftSidebar/navitems";
+const { menus } = useNavItems();
 </script>
\ No newline at end of file
diff --git a/src/components/LeftSidebar/NavButtons.vue b/src/components/LeftSidebar/NavButtons.vue
index 0c42517a..ecbcd277 100644
--- a/src/components/LeftSidebar/NavButtons.vue
+++ b/src/components/LeftSidebar/NavButtons.vue
@@ -25,7 +25,8 @@
 </template>
 
 <script setup lang="ts">
-import { menus } from "./navitems";
+import { useNavItems } from "../LeftSidebar/navitems";
+const { menus } = useNavItems();
 </script>
 
 <style lang="scss">
diff --git a/src/components/LeftSidebar/navitems.ts b/src/components/LeftSidebar/navitems.ts
index cd6116d5..280e9246 100644
--- a/src/components/LeftSidebar/navitems.ts
+++ b/src/components/LeftSidebar/navitems.ts
@@ -1,3 +1,4 @@
+import { useI18n } from "vue-i18n";
 import { Routes } from "@/router";
 import useDialog from "@/stores/modal";
 import useSearch from "@/stores/search";
@@ -9,57 +10,63 @@ import SearchSvg from "@/assets/icons/search.svg";
 import SettingsSvg from "@/assets/icons/settings.svg";
 import HomeSvg from "@/assets/icons/home.svg";
 
-const folder = {
-  name: "folders",
-  route_name: Routes.folder,
-  params: { path: "$home" },
-  icon: FolderSvg,
-};
+export const useNavItems = () => {
+  const { t } = useI18n();
 
-const favorites = {
-  name: "favorites",
-  route_name: Routes.favorites,
-  icon: HeartSvg,
-};
+  const folder = {
+    name: t('LeftSidebar.NavItems.Folder'),
+    route_name: Routes.folder,
+    params: { path: "$home" },
+    icon: FolderSvg,
+  };
 
-const playlists = {
-  name: "playlists",
-  route_name: Routes.playlists,
-  icon: PlaylistSvg,
-};
+  const favorites = {
+    name: t('LeftSidebar.NavItems.Favorites'),
+    route_name: Routes.favorites,
+    icon: HeartSvg,
+  };
 
-const home = {
-  name: "home",
-  route_name: Routes.Home,
-  icon: HomeSvg,
-};
+  const playlists = {
+    name: t('LeftSidebar.NavItems.Playlists'),
+    route_name: Routes.playlists,
+    icon: PlaylistSvg,
+  };
 
-export const menus = [
-  home,
-  folder,
-  {
-    name: "search",
-    route_name: Routes.search,
-    params: { page: "top" },
-    query: () => ({ q: useSearch().query }),
-    icon: SearchSvg,
-  },
-  {
-    separator: true,
-  },
-  favorites,
-  playlists,
-  {
-    separator: true,
-  },
-  {
-    name: "settings",
-    route_name: null,
-    icon: SettingsSvg,
-    action: () => {
-      useDialog().showSettingsModal()
-    }
-  },
-];
+  const home = {
+    name: t('LeftSidebar.NavItems.Home'),
+    route_name: Routes.Home,
+    icon: HomeSvg,
+  };
 
-export const topnavitems = [home, folder, favorites, playlists];
+  const menus = [
+    home,
+    folder,
+    {
+      name: t('LeftSidebar.NavItems.Search'),
+      route_name: Routes.search,
+      params: { page: "top" },
+      query: () => ({ q: useSearch().query }),
+      icon: SearchSvg,
+    },
+    {
+      separator: true,
+    },
+    favorites,
+    playlists,
+    {
+      separator: true,
+    },
+    {
+      name: t('LeftSidebar.NavItems.Settings'),
+      route_name: null,
+      icon: SettingsSvg,
+      action: () => {
+        useDialog().showSettingsModal()
+      }
+    },
+  ];
+
+  const topnavitems = [home, folder, favorites, playlists];
+  
+  return { menus, topnavitems };
+};
\ No newline at end of file
diff --git a/src/components/NowPlaying/Header.vue b/src/components/NowPlaying/Header.vue
index 829165be..c5db1a69 100644
--- a/src/components/NowPlaying/Header.vue
+++ b/src/components/NowPlaying/Header.vue
@@ -9,7 +9,7 @@
                         albumhash: queue.currenttrack?.albumhash || ' ',
                     },
                 }"
-                title="Go to Album"
+                :title="t('NowPlaying.GoToAlbum')"
                 class="np-image"
             >
                 <img v-motion-fade class="rounded" :src="paths.images.thumb.large + queue.currenttrack?.image" />
@@ -26,7 +26,7 @@
                 </div>
             </div>
         </div>
-        <h3 class="nowplaying_title" v-if="queue.next">Up Next</h3>
+        <h3 class="nowplaying_title" v-if="queue.next">{{ t('NowPlaying.UpNext') }}</h3>
         <SongItem
             v-if="queue.next"
             :track="queue.next"
@@ -34,7 +34,7 @@
             :source="dropSources.folder"
             @play-this="queue.playNext"
         />
-        <h3 class="nowplaying_title">Queue</h3>
+        <h3 class="nowplaying_title">{{ t('NowPlaying.Queue') }}</h3>
     </div>
 </template>
 
@@ -46,6 +46,9 @@ import { Routes } from '@/router'
 import { isMobile, isSmallPhone } from '@/stores/content-width'
 import useQueueStore from '@/stores/queue'
 import { formatSeconds } from '@/utils'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import Progress from '@/components/LeftSidebar/NP/Progress.vue'
 import Buttons from '../BottomBar/Right.vue'
diff --git a/src/components/NowPlaying/PlayingFrom.vue b/src/components/NowPlaying/PlayingFrom.vue
index 99d9501f..cbd43a5e 100644
--- a/src/components/NowPlaying/PlayingFrom.vue
+++ b/src/components/NowPlaying/PlayingFrom.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="now-playing-top">
-        <router-link class="now-playling-from-link" :to="(data.location as RouteLocationRaw)" title="Go to Play Source">
+        <router-link class="now-playling-from-link" :to="(data.location as RouteLocationRaw)" :title="t('NowPlaying.GoToPlaySource')">
             <div class="from">
                 <img
                     v-if="
@@ -37,6 +37,9 @@ import playingFrom from '@/utils/playingFrom'
 
 import MoreSvg from '@/assets/icons/more.svg'
 import { showQueueContextMenu } from '@/helpers/contextMenuHandler'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const tracklist = useTracklist()
 
diff --git a/src/components/PlaylistView/AfterHeader.vue b/src/components/PlaylistView/AfterHeader.vue
index 64df2178..aa0bd04f 100644
--- a/src/components/PlaylistView/AfterHeader.vue
+++ b/src/components/PlaylistView/AfterHeader.vue
@@ -1,9 +1,13 @@
 <template>
     <div class="p-after-header">
-        <div>All Tracks</div>
+        <div>{{ t('PlaylistView.AllTracks') }}</div>
     </div>
 </template>
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
+</script>
 <style lang="scss">
 .isSmall .p-after-header {
     padding-left: 0.5rem;
diff --git a/src/components/PlaylistView/Header/Info.vue b/src/components/PlaylistView/Header/Info.vue
index 92cd03a8..c785d2cc 100644
--- a/src/components/PlaylistView/Header/Info.vue
+++ b/src/components/PlaylistView/Header/Info.vue
@@ -9,7 +9,7 @@
       <PlayBtnRect :source="playSources.playlist" :bg_color="btn_color" />
     </div>
     <div class="duration">
-      {{ playlist.info.count.toLocaleString() + ` ${playlist.info.count == 1 ? "Track" : "Tracks"}` }}
+      {{ playlist.info.count.toLocaleString() + ` ${playlist.info.count == 1 ? t('PlaylistView.TrackCount') : t('PlaylistView.TrackCountPlural')}` }}
       •
       {{ formatSeconds(playlist.info.duration, true) }}
     </div>
@@ -31,6 +31,9 @@ import PlayBtnRect from "@/components/shared/PlayBtnRect.vue";
 import usePStore from "@/stores/pages/playlist";
 import { balanceText } from "@/utils/balanceText";
 import { Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const playlist = usePStore();
 
diff --git a/src/components/PlaylistView/Header/LastUpdated.vue b/src/components/PlaylistView/Header/LastUpdated.vue
index c0240bf7..3f2578a5 100644
--- a/src/components/PlaylistView/Header/LastUpdated.vue
+++ b/src/components/PlaylistView/Header/LastUpdated.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="last-updated">
-        <span v-if="!isHeaderSmall" class="status">Last updated {{ playlist.info._last_updated }}</span>
+        <span v-if="!isHeaderSmall" class="status">{{ t('PlaylistView.LastUpdated', { date: playlist.info._last_updated }) }}</span>
         <div v-if="Number.isInteger(playlist.info.id)" class="edit">
-            &#160;&#160;|&#160;&#160; <span @click="editPlaylist">Edit</span>&#160;&#160;
+            &#160;&#160;|&#160;&#160; <span @click="editPlaylist">{{ t('PlaylistView.Edit') }}</span>&#160;&#160;
             {{ Number.isInteger(playlist.info.id) ? ' | ' : '' }}
             <DeleteSvg class="edit" @click="deletePlaylist" />
         </div>
@@ -15,6 +15,9 @@ import { isHeaderSmall } from '@/stores/content-width'
 
 import useModalStore from '@/stores/modal'
 import usePStore from '@/stores/pages/playlist'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const playlist = usePStore()
 const modal = useModalStore()
diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue
index 39365190..b68e57eb 100644
--- a/src/components/PlaylistsList/PlaylistCard.vue
+++ b/src/components/PlaylistsList/PlaylistCard.vue
@@ -15,7 +15,7 @@
       </div>
       <div class="p-name ellip">{{ playlist.name }}</div>
       <div class="p-count">
-        <b>{{ playlist.count.toLocaleString() + ` Track${playlist.count === 1 ? "" : "s"}` }}</b>
+        <b>{{ playlist.count.toLocaleString() + ` ${playlist.count === 1 ? t('PlaylistsList.TrackCount') : t('PlaylistsList.TrackCountPlural')}` }}</b>
       </div>
     </div>
   </router-link>
@@ -26,6 +26,9 @@ import { paths } from "../../config";
 import { Playlist } from "../../interfaces";
 import { playSources } from '@/enums'
 import PlayBtn from '../shared/PlayBtn.vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const imguri = paths.images.playlist;
 defineProps<{
diff --git a/src/components/RightSideBar/Home/Recommendation.vue b/src/components/RightSideBar/Home/Recommendation.vue
index c2fe2905..215551b3 100644
--- a/src/components/RightSideBar/Home/Recommendation.vue
+++ b/src/components/RightSideBar/Home/Recommendation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="r-tracks rounded bg-primary">
-    <div class="heading">Similar tracks</div>
+    <div class="heading">{{ t('RightSidebar.SimilarTracks') }}</div>
     <div class="tracks">
       <div v-for="song in songs" :key="song.artist" class="song-item">
         <img src="" class="rounded" loading="lazy"/>
@@ -14,6 +14,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
 const songs = [
   {
     title: "Imagine",
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 1ef551bc..dd6b9608 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -7,8 +7,8 @@
   >
     <NoItems
       :flag="!store.tracklist.length"
-      :title="'No songs in queue'"
-      :description="'When you start playing songs, they will appear here.'"
+      :title="t('RightSidebar.NoQueueTitle')"
+      :description="t('RightSidebar.NoQueueDescription')"
       :icon="QueueSvg"
     />
     <RecycleScroller
@@ -43,6 +43,9 @@ import NoItems from "../shared/NoItems.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 import TrackItem from "@/components/shared/TrackItem.vue";
 import QueueSvg from "@/assets/icons/queue.svg";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const itemHeight = 64;
 const queue = useQStore();
diff --git a/src/components/RightSideBar/Queue/QueueActions.vue b/src/components/RightSideBar/Queue/QueueActions.vue
index 23033d5f..9055d469 100644
--- a/src/components/RightSideBar/Queue/QueueActions.vue
+++ b/src/components/RightSideBar/Queue/QueueActions.vue
@@ -3,9 +3,9 @@
     <div class="left">
       <button v-if="!onNowPlaying" v-wave class="shuffle-queue action" @click="queue.shuffleQueue">
         <ShuffleSvg />
-        <span>Shuffle</span>
+        <span>{{ t('RightSidebar.Shuffle') }}</span>
       </button>
-      <h2 v-else style="margin: 0">Now Playing</h2>
+      <h2 v-else style="margin: 0">{{ t('RightSidebar.NowPlaying') }}</h2>
     </div>
     <div class="right">
       <button class="menu" :class="{ 'btn-active': context_showing }" @click="showContextMenu">
@@ -22,6 +22,10 @@ import { ref } from "vue";
 
 import { showQueueContextMenu } from "@/helpers/contextMenuHandler";
 
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
 import OptionsSvg from "@/assets/icons/more.svg";
 import ShuffleSvg from "@/assets/icons/shuffle.svg";
 
diff --git a/src/components/RightSideBar/Search/TopResults.vue b/src/components/RightSideBar/Search/TopResults.vue
index 7aca50d6..6ee9eb60 100644
--- a/src/components/RightSideBar/Search/TopResults.vue
+++ b/src/components/RightSideBar/Search/TopResults.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="right-top-results">
     <NoItems
-      :title="'No results'"
-      :description="'We can\'t find any results for your search.'"
+      :title="t('Search.NoResultsTitle')"
+      :description="t('Search.NoResultsDescription')"
       :icon="SearchSvg"
       :flag="
         !search.top_results.top_result || !search.top_results.top_result.type
@@ -11,19 +11,19 @@
     <div
       v-if="search.top_results.top_result && search.top_results.top_result.type"
     >
-      <h3 class="h3">Top Result</h3>
+      <h3 class="h3">{{ t('Search.TopResult') }}</h3>
       <TopItem />
     </div>
     <div v-if="search.top_results.tracks.length">
-      <h3 class="h3">Tracks</h3>
+      <h3 class="h3">{{ t('Search.Tracks') }}</h3>
       <TopTracks />
     </div>
     <div v-if="search.top_results.artists.length">
-      <h3 class="h3">Artists</h3>
+      <h3 class="h3">{{ t('Search.Artists') }}</h3>
       <TopArtists />
     </div>
     <div v-if="search.top_results.albums.length">
-      <h3 class="h3">Albums</h3>
+      <h3 class="h3">{{ t('Search.Albums') }}</h3>
       <TopAlbums />
     </div>
   </div>
@@ -39,6 +39,10 @@ import TopArtists from "./Top/TopArtists.vue";
 import NoItems from "@/components/shared/NoItems.vue";
 import SearchSvg from "@/assets/icons/search.svg";
 
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
 const search = useSearchStore();
 </script>
 
diff --git a/src/components/RightSideBar/Search/TracksGrid.vue b/src/components/RightSideBar/Search/TracksGrid.vue
index 6be266d1..cc049a6d 100644
--- a/src/components/RightSideBar/Search/TracksGrid.vue
+++ b/src/components/RightSideBar/Search/TracksGrid.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="tracks-results">
     <div v-if="!search.tracks.value.length" class="t-center">
-      <h5>No tracks</h5>
+      <h5>{{ t('Search.NoTracksTitle') }}</h5>
     </div>
 
     <RecycleScroller
@@ -30,6 +30,9 @@ import useTracklist from "@/stores/queue/tracklist";
 
 import TrackItem from "@/components/shared/TrackItem.vue";
 import AlbumsFetcher from "@/components/ArtistView/AlbumsFetcher.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const queue = useQueue();
 const search = useSearch();
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 996b7f1b..79393bdd 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -14,7 +14,7 @@
         <div id="ginner" ref="inputRef" tabindex="0">
             <button
                 v-auto-animate
-                :title="tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'"
+                :title="tabs.current === tabs.tabs.search ? t('RightSidebar.BackToQueue') : t('RightSidebar.GoToSearch')"
                 :class="{ no_bg: on_nav }"
                 @click.prevent="handleButton"
             >
@@ -24,7 +24,7 @@
             <input
                 id="globalsearch"
                 v-model.trim="search.query"
-                placeholder="Start typing to search"
+                :placeholder="t('Search.SearchPlaceholder')"
                 type="search"
                 autocomplete="off"
                 spellcheck="false"
@@ -52,6 +52,9 @@ import CancelSvg from '@/assets/icons/a.svg'
 import BackSvg from '@/assets/icons/arrow.svg'
 import SearchSvg from '@/assets/icons/search.svg'
 import { Routes } from '@/router'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps<{
     on_nav?: boolean
diff --git a/src/components/SettingsView/About.vue b/src/components/SettingsView/About.vue
index 05b82012..b4866c7d 100644
--- a/src/components/SettingsView/About.vue
+++ b/src/components/SettingsView/About.vue
@@ -1,53 +1,45 @@
 <template>
     <div class="aboutswingmusic">
         <div class="version">Swing Music v{{ settings.version }}</div>
-        Swing Music is a labor of love developed by
-        <a
-            href="https://github.com/cwilvx"
-            target="_blank"
-            >@<u>cwilvx</u></a
-        >
-        on GitHub. If you like this software, a star on GitHub would be nice.
-        Hope you enjoy using it as much as I enjoy building it. 😁🤗
+        <span v-html="t('Settings.About.Developer', { link: '<a href=&quot;https://github.com/cwilvx&quot; target=&quot;_blank&quot;>@<u>cwilvx</u></a>' })"></span>
         <br /><br />
         <div class="links">
-            <h2>Links</h2>
+            <h2>{{ t('Settings.About.LinksTitle') }}</h2>
             <div class="flex">
                 <a
                     href="https://swingmusic.vercel.app/guide/introduction.html"
                     target="_blank"
-                    ><button>Docs</button></a
+                    ><button>{{ t('Settings.About.LinksDocs') }}</button></a
                 >
                 <a
                     href="https://github.com/cwilvx/swingmusic"
                     target="_blank"
-                    ><button>Star on Github</button></a
+                    ><button>{{ t('Settings.About.LinksGitHub') }}</button></a
                 >
                 <a
                     href="https://github.com/cwilvx/swingmusic/issues/new/choose"
                     target="_blank"
                 >
-                    <button>Report issue</button>
+                    <button>{{ t('Settings.About.LinksIssue') }}</button>
                 </a>
                 <a
                     href="https://github.com/cwilvx/swingmusic/blob/master/.github/contributing.md"
                     target="_blank"
-                    ><button>Contribute</button></a
+                    ><button>{{ t('Settings.About.LinksContribute') }}</button></a
                 >
             </div>
         </div>
         <br />
         <div class="contact">
-            <h2>Get in touch</h2>
-            If you like my work, and would like to say hi, I'd like to hear from
-            you.
+            <h2>{{ t('Settings.About.GetInTouchTitle') }}</h2>
+            {{ t('Settings.About.GetInTouchDescription') }}
             <br /><br />
             <div class="flex">
                 <a
                     href="mailto:geoffreymungai45@gmail.com?subject=Hiii 👋😁&body=Hi Mungai,
         "
                     target="_blank"
-                    ><button>Send email</button></a
+                    ><button>{{ t('Settings.About.SendEmail') }}</button></a
                 >
             </div>
         </div>
@@ -56,6 +48,9 @@
 
 <script setup lang="ts">
 import useSettings from '@/stores/settings'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const settings = useSettings()
 </script>
diff --git a/src/components/SettingsView/Components/BackupRestore.vue b/src/components/SettingsView/Components/BackupRestore.vue
index dd200adc..c357c33e 100644
--- a/src/components/SettingsView/Components/BackupRestore.vue
+++ b/src/components/SettingsView/Components/BackupRestore.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="backup-restore">
-        <button class="backupnow" @click="doBackup">Backup</button>
+        <button class="backupnow" @click="doBackup">{{ t('Settings.Backup.Title') }}</button>
         <div class="separator"></div>
-        <h4>Restore backup</h4>
+        <h4>{{ t('Settings.Backup.RestoreBackup') }}</h4>
         <div class="helptext">
-            You have {{ backups.length }} backup{{ backups.length !== 1 ? 's' : '' }} in your backup directory.
+            {{ t('Settings.Backup.BackupCount', { count: backups.length }) }}
         </div>
         <div></div>
         <br />
@@ -20,29 +20,29 @@
                     </div>
                     <div class="item__stats">
                         <div class="item__playlists">
-                            {{ backup.playlists }} playlist{{ backup.playlists !== 1 ? 's' : '' }}
+                            {{ (backup.playlists !== 1 ? t('Settings.Backup.PlaylistCountPlural', { count: backup.playlists }) : t('Settings.Backup.PlaylistCount', { count: backup.playlists })) }}
                         </div>
                         •
                         <div class="item__scrobbles">
-                            {{ backup.scrobbles }} scrobble{{ backup.scrobbles !== 1 ? 's' : '' }}
+                            {{ (backup.scrobbles !== 1 ? t('Settings.Backup.ScrobbleCountPlural', { count: backup.scrobbles }) : t('Settings.Backup.ScrobbleCount', { count: backup.scrobbles })) }}
                         </div>
                         •
                         <div class="item__favorites">
-                            {{ backup.favorites }} favorite{{ backup.favorites !== 1 ? 's' : '' }}
+                            {{ (backup.favorites !== 1 ? t('Settings.Backup.FavoriteCountPlural', { count: backup.favorites }) : t('Settings.Backup.FavoriteCount', { count: backup.favorites })) }}
                         </div>
                         •
                         <div class="item__collections">
-                            {{ backup.collections }} collection{{ backup.collections !== 1 ? 's' : '' }}
+                            {{ (backup.collections !== 1 ? t('Settings.Backup.CollectionCountPlural', { count: backup.collections }) : t('Settings.Backup.CollectionCount', { count: backup.collections })) }}
                         </div>
                     </div>
                 </div>
                 <div class="buttons">
                     <DeleteSvg @click="() => deleteBackup(backup.name)" />
-                    <button class="restore" @click="() => restore(backup.name)">Restore</button>
+                    <button class="restore" @click="() => restore(backup.name)">{{ t('Settings.Backup.RestoreButton') }}</button>
                 </div>
             </div>
         </div>
-        <button class="restore-all" @click="() => restore()">Restore All</button>
+        <button class="restore-all" @click="() => restore()">{{ t('Settings.Backup.RestoreAllButton') }}</button>
     </div>
 </template>
 
@@ -51,6 +51,9 @@ import { backupNow, getBackups, restoreBackup, deleteBackup as deleteBackupReq }
 import { onMounted, ref } from 'vue'
 import { useToast } from '@/stores/notification'
 import DeleteSvg from '@/assets/icons/delete.svg'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const toast = useToast()
 
diff --git a/src/components/SettingsView/Components/List.vue b/src/components/SettingsView/Components/List.vue
index bcdfff07..afaf805a 100644
--- a/src/components/SettingsView/Components/List.vue
+++ b/src/components/SettingsView/Components/List.vue
@@ -12,7 +12,7 @@
             </div>
         </div>
         <div v-if="!items.length" class="option-list-item" style="opacity: 0.5">
-            Root directories not configured. Use the "Configure" button above to configure
+            {{ t('Settings.List.RootNotConfigured') }}
         </div>
     </div>
 </template>
@@ -20,6 +20,9 @@
 <script setup lang="ts">
 import DeleteSvg from '@/assets/icons/delete.svg'
 import FolderSvg from '@/assets/icons/folder.svg'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps<{
     items: {
diff --git a/src/components/SettingsView/Components/NumberInput.vue b/src/components/SettingsView/Components/NumberInput.vue
index eef12721..a7ad0065 100644
--- a/src/components/SettingsView/Components/NumberInput.vue
+++ b/src/components/SettingsView/Components/NumberInput.vue
@@ -8,6 +8,9 @@
 <script setup lang="ts">
 import { useToast } from '@/stores/notification'
 import { ref } from 'vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const toast = useToast()
 
@@ -22,7 +25,7 @@ function handleInput(e: Event) {
     const newValue = (e.target as HTMLInputElement).valueAsNumber
 
     if (Number.isNaN(newValue)) {
-        return toast.showError('Invalid number')
+        return toast.showError(t('Settings.NumberInput.InvalidNumber'))
     }
 
     if (newValue) {
@@ -34,9 +37,9 @@ async function submit(newValue: number) {
     const success = await props.callback(newValue)
 
     if (success) {
-        toast.showSuccess('Updated!')
+        toast.showSuccess(t('Settings.NumberInput.Updated'))
     } else {
-        toast.showError('Failed to update')
+        toast.showError(t('Settings.NumberInput.UpdateFailed'))
     }
 }
 </script>
diff --git a/src/components/SettingsView/Components/SecretInput.vue b/src/components/SettingsView/Components/SecretInput.vue
index 6ed3556b..492c4d04 100644
--- a/src/components/SettingsView/Components/SecretInput.vue
+++ b/src/components/SettingsView/Components/SecretInput.vue
@@ -8,13 +8,16 @@
             </button>
         </div>
         <div class="right">
-            <button>Save</button>
+            <button>{{ t('Settings.Save') }}</button>
         </div>
     </form>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import EyeSvg from '@/assets/icons/eye.svg'
 import EyeSlashSvg from '@/assets/icons/eye.slash.svg'
diff --git a/src/components/SettingsView/Components/SeparatorsInput.vue b/src/components/SettingsView/Components/SeparatorsInput.vue
index 70f673a9..cee270f2 100644
--- a/src/components/SettingsView/Components/SeparatorsInput.vue
+++ b/src/components/SettingsView/Components/SeparatorsInput.vue
@@ -9,13 +9,16 @@
           </b></span
         >
       </div>
-      <button>Save</button>
+      <button>{{ t('Settings.Save') }}</button>
     </form>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Ref, computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const separatorinput: Ref<HTMLInputElement | null> = ref(null);
 const input = ref("");
diff --git a/src/components/bubbles/DropArea.vue b/src/components/bubbles/DropArea.vue
index fed2cc0f..90344e7c 100644
--- a/src/components/bubbles/DropArea.vue
+++ b/src/components/bubbles/DropArea.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="bin-drop-area t-center rounded-sm">
     <div class="bin-count circular">10</div>
-    DROP TRACKS HERE
+    {{ t('Bubbles.DropHere') }}
     <br />
   </div>
 </template>
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
+</script>
 <style lang="scss">
 .bin-drop-area {
   // background-color: $gray;
diff --git a/src/components/nav/NavLinks.vue b/src/components/nav/NavLinks.vue
index 09f0ea6b..789fe2da 100644
--- a/src/components/nav/NavLinks.vue
+++ b/src/components/nav/NavLinks.vue
@@ -18,7 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import { topnavitems } from "../LeftSidebar/navitems";
+  import { useNavItems } from "../LeftSidebar/navitems";
+  const { topnavitems } = useNavItems();
 </script>
 
 <style lang="scss">
diff --git a/src/components/nav/NavSidenav.vue b/src/components/nav/NavSidenav.vue
index 9f3e9f09..a951ac63 100644
--- a/src/components/nav/NavSidenav.vue
+++ b/src/components/nav/NavSidenav.vue
@@ -26,7 +26,8 @@
 
 <script setup lang="ts">
 import LogoSvg from '@/assets/icons/logos/logo-fill.light.svg'
-import { topnavitems } from '../LeftSidebar/navitems'
+import { useNavItems } from "../LeftSidebar/navitems";
+const { topnavitems } = useNavItems();
 
 const emit = defineEmits(['close'])
 
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 00000000..dc2abec9
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,162 @@
+{
+    "Common": {
+    },
+    "AlbumView": {
+        "AlbumBy": "Album by ",
+        "TrackCount": "Track",
+        "TrackCountPlural": "Tracks",
+        "GenreBanner": {
+            "GenreExists": "Genres",
+            "GenreDoesNotExist": "No Genres"
+        }
+    },
+    "ArtistView": {
+        "Title": "Artist",
+        "TrackCount": "Track",
+        "TrackCountPlural": "Tracks",
+        "AlbumCount": "Album",
+        "AlbumCountPlural": "Albums",
+        "NoTracks": "No tracks",
+        "RepeatOptions": {
+            "All": "Repeat all",
+            "One": "Repeat one",
+            "None": "No repeat"
+        }
+    },
+    "BottomBar": {
+        "GoToNowPlaying": "Go to Now Playing",
+        "PlaceholderTitle": "Hello there",
+        "PlaceholderArtist": "Welcome to Swing Music"
+    },
+    "Bubbles": {
+        "DropHere": "DROP TRACKS HERE"
+    },
+    "CardList": {
+        "SortBy": "Sort by",
+        "SortByOptions": {
+            "TrackCount": "No. of tracks",
+            "Duration": "Duration",
+            "CreatedDate": "Date added",
+            "LastPlayed": "Last played",
+            "PlayCount": "Plays",
+            "PlayDuration": "Play duration",
+            "Title": "Title",
+            "AlbumArtists": "Artist",
+            "Date": "Year Released",
+            "Name": "Name",
+            "NoOfAlbums": "No. of albums"
+        }
+    },
+    "FolderView": {
+        "FileCount": "File",
+        "FileCountPlural": "Files"
+    },
+    "HomeView": {
+        "Title": "Home",
+        "Greetings": {
+            "midnight": "Hey there night owl",
+            "dawn": "Hey there early bird",
+            "morning": "Good morning {name}",
+            "afternoon": "Good afternoon {name}",
+            "evening": "Good evening {name}"
+        },
+        "Browse": {
+            "Title": "Browse Library",
+            "BrowseList": {
+                "Folders": "Folders",
+                "Albums": "Albums",
+                "Artists": "Artists",
+                "Playlists": "Playlists",
+                "Favorites": "Favorites",
+                "FavTracks": "Fav. tracks",
+                "FavArtists": "Fav. artists",
+                "FavAlbums": "Fav. albums",
+                "Stats": "Stats"
+            }
+        }
+    },
+    "LeftSidebar": {
+        "NavItems": {
+            "Folder": "Folders",
+            "Favorites": "Favorites",
+            "Playlists": "Playlists",
+            "Home": "Home",
+            "Search": "Search",
+            "Settings": "Settings"
+        }
+    },
+    "NowPlaying": {
+        "GoToAlbum": "Go to album",
+        "UpNext": "Up Next",
+        "Queue": "Queue",
+        "GoToPlaySource": "Go to play source"
+    },
+    "PlaylistsList": {
+        "TrackCount": "Track",
+        "TrackCountPlural": "Tracks"
+    },
+    "PlaylistView": {
+        "TrackCount": "Track",
+        "TrackCountPlural": "Tracks",
+        "LastUpdated": "Last Updated {date}",
+        "Edit": "Edit",
+        "AllTracks": "All Tracks"
+    },
+    "RightSidebar": {
+        "SimilarTracks": "Similar Tracks",
+        "Shuffle": "Shuffle",
+        "NowPlaying": "Now Playing",
+        "NoQueueTitle": "No songs in queue",
+        "NoQueueDescription": "When you start playing songs, they will appear here."
+    },
+    "Search": {
+        "NoResultsTitle": "No results",
+        "NoTracksTitle": "No tracks",
+        "NoResultsDescription": "We can't find any results for your search.",
+        "TopResult": "Top Result",
+        "Tracks": "Tracks",
+        "Artists": "Artists",
+        "Albums": "Albums",
+        "BackToQueue": "Back to Queue",
+        "GoToSearch": "Go to Search",
+        "SearchPlaceholder": "Start typing to search"
+    },
+    "Settings": {
+        "Save": "Save",
+        "Cancel": "Cancel",
+        "Backup": {
+            "Title": "Backup",
+            "RestoreBackup": "Restore Backup",
+            "BackupCount": "You have {count} backup(s) in your backup directory.",
+            "PlaylistCount": "{count} playlist",
+            "PlaylistCountPlural": "{count} playlists",
+            "ScrobbleCount": "{count} scrobble",
+            "ScrobbleCountPlural": "{count} scrobbles",
+            "FavoriteCount": "{count} favorite",
+            "FavoriteCountPlural": "{count} favorites",
+            "CollectionCount": "{count} collection",
+            "CollectionCountPlural": "{count} collections",
+            "RestoreButton": "Restore",
+            "RestoreAllButton": "Restore All"
+        },
+        "List": {
+            "RootNotConfigured": "Root directories not configured. Use the \"Configure\" button above to configure"
+        },
+        "NumberInput": {
+            "InvalidNumber": "Invalid number",
+            "Updated": "Updated",
+            "UpdateFailed": "Failed to update"
+        },
+        "About": {
+            "Developer": "Swing Music is a labor of love developed by {link} on GitHub. If you like this software, a star on GitHub would be nice. Hope you enjoy using it as much as I enjoy building it. 😁🤗",
+            "LinksTitle": "Links",
+            "LinksDocs": "Docs",
+            "LinksGitHub": "Star on GitHub",
+            "LinksIssue": "Report an issue",
+            "LinksContribute": "Contribute",
+            "GetInTouchTitle": "Get in touch",
+            "GetInTouchDescription": "If you like my work, and would like to say hi, I'd like to hear from you.",
+            "SendEmail": "Send Email"
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/locales/ko.json b/src/locales/ko.json
new file mode 100644
index 00000000..ee14c16e
--- /dev/null
+++ b/src/locales/ko.json
@@ -0,0 +1,162 @@
+{
+    "Common": {
+    },
+    "AlbumView": {
+        "AlbumBy": "",
+        "TrackCount": "트랙",
+        "TrackCountPlural": "트랙",
+        "GenreBanner": {
+            "GenreExists": "장르",
+            "GenreDoesNotExist": "장르 없음"
+        }
+    },
+    "ArtistView": {
+        "Title": "아티스트",
+        "TrackCount": "트랙",
+        "TrackCountPlural": "트랙",
+        "AlbumCount": "앨범",
+        "AlbumCountPlural": "앨범",
+        "NoTracks": "트랙 없음",
+        "RepeatOptions": {
+            "All": "전체 반복",
+            "One": "한 곡 반복",
+            "None": "반복 안 함"
+        }
+    },
+    "BottomBar": {
+        "GoToNowPlaying": "현재 재생으로 이동",
+        "PlaceholderTitle": "반가워요",
+        "PlaceholderArtist": "Swing Music에 오신 것을 환영합니다"
+    },
+    "Bubbles": {
+        "DropHere": "여기에 트랙을 내려놓으세요"
+    },
+    "CardList": {
+        "SortBy": "정렬 기준",
+        "SortByOptions": {
+            "TrackCount": "트랙 수",
+            "Duration": "재생 시간",
+            "CreatedDate": "추가된 날짜",
+            "LastPlayed": "마지막 재생",
+            "PlayCount": "재생 수",
+            "PlayDuration": "재생 시간",
+            "Title": "제목",
+            "AlbumArtists": "아티스트",
+            "Date": "발매 연도",
+            "Name": "이름",
+            "NoOfAlbums": "앨범 수"
+        }
+    },
+    "FolderView": {
+        "FileCount": "파일",
+        "FileCountPlural": "파일"
+    },
+    "HomeView": {
+        "Title": "홈",
+        "Greetings": {
+            "midnight": "저녁형 인간이시군요",
+            "dawn": "아침형 인간이시군요",
+            "morning": "{name}님, 좋은 아침이에요",
+            "afternoon": "{name}님, 좋은 오후에요",
+            "evening": "{name}님, 좋은 저녁이에요"
+        },
+        "Browse": {
+            "Title": "라이브러리 탐색",
+            "BrowseList": {
+                "Folders": "폴더",
+                "Albums": "앨범",
+                "Artists": "아티스트",
+                "Playlists": "재생 목록",
+                "Favorites": "즐겨찾기",
+                "FavTracks": "즐겨찾는 트랙",
+                "FavArtists": "즐겨찾는 아티스트",
+                "FavAlbums": "즐겨찾는 앨범",
+                "Stats": "통계"
+            }
+        }
+    },
+    "LeftSidebar": {
+        "NavItems": {
+            "Folder": "폴더",
+            "Favorites": "즐겨찾기",
+            "Playlists": "재생 목록",
+            "Home": "홈",
+            "Search": "검색",
+            "Settings": "설정"
+        }
+    },
+    "NowPlaying": {
+        "GoToAlbum": "앨범으로 이동",
+        "UpNext": "다음 곡",
+        "Queue": "대기열",
+        "GoToPlaySource": "재생 소스로 이동"
+    },
+    "PlaylistsList": {
+        "TrackCount": "트랙",
+        "TrackCountPlural": "트랙"
+    },
+    "PlaylistView": {
+        "TrackCount": "트랙",
+        "TrackCountPlural": "트랙",
+        "LastUpdated": "{date}에 마지막으로 업데이트됨",
+        "Edit": "편집",
+        "AllTracks": "모든 트랙"
+    },
+    "RightSidebar": {
+        "SimilarTracks": "유사한 트랙",
+        "Shuffle": "셔플",
+        "NowPlaying": "현재 재생",
+        "NoQueueTitle": "대기열에 곡이 없습니다",
+        "NoQueueDescription": "곡 재생을 시작하면 여기에 나타납니다."
+    },
+    "Search": {
+        "NoResultsTitle": "결과 없음",
+        "NoTracksTitle": "트랙 없음",
+        "NoResultsDescription": "검색 결과를 찾을 수 없습니다.",
+        "TopResult": "최고 결과",
+        "Tracks": "트랙",
+        "Artists": "아티스트",
+        "Albums": "앨범",
+        "BackToQueue": "대기열로 돌아가기",
+        "GoToSearch": "검색으로 이동",
+        "SearchPlaceholder": "검색어를 입력하세요"
+    },
+    "Settings": {
+        "Save": "저장",
+        "Cancel": "취소",
+        "Backup": {
+            "Title": "백업",
+            "RestoreBackup": "백업 복원",
+            "BackupCount": "백업 디렉토리에 {count} 개의 백업이 있습니다.",
+            "PlaylistCount": "{count} 개의 재생 목록",
+            "PlaylistCountPlural": "{count} 개의 재생 목록",
+            "ScrobbleCount": "{count} 개의 스크로블",
+            "ScrobbleCountPlural": "{count} 개의 스크로블",
+            "FavoriteCount": "{count} 개의 즐겨찾기",
+            "FavoriteCountPlural": "{count} 개의 즐겨찾기",
+            "CollectionCount": "{count} 개의 컬렉션",
+            "CollectionCountPlural": "{count} 개의 컬렉션",
+            "RestoreButton": "복원",
+            "RestoreAllButton": "모두 복원"
+        },
+        "List": {
+            "RootNotConfigured": "루트 디렉토리가 구성되지 않았습니다. 위의 \"구성\" 버튼을 사용하여 구성하세요."
+        },
+        "NumberInput": {
+            "InvalidNumber": "유효하지 않은 숫자",
+            "Updated": "업데이트됨",
+            "UpdateFailed": "업데이트 실패"
+        },
+        "About": {
+            "Developer": "Swing Music은 GitHub의 {link}가 사랑을 담아 제작했습니다. 이 소프트웨어가 마음에 드신다면, GitHub에서 Star를 남겨 주세요. 저도 개발하는 것을 즐기는 만큼 여러분도 즐겨주시면 좋겠어요. 😁🤗",
+            "LinksTitle": "링크",
+            "LinksDocs": "문서",
+            "LinksGitHub": "GitHub에서 Star 남기기",
+            "LinksIssue": "문제 보고",
+            "LinksContribute": "기여하기",
+            "GetInTouchTitle": "연락하기",
+            "GetInTouchDescription": "제 작업이 마음에 드시고 인사하고 싶으시다면, 연락을 기다리겠습니다.",
+            "SendEmail": "이메일 보내기"
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 1e455135..adb1201a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { createI18n } from 'vue-i18n'
 
 import { MotionPlugin } from "@vueuse/motion";
 import WrapBalancer from "vue-wrap-balancer";
@@ -22,6 +23,23 @@ import "./assets/scss/index.scss";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 const app = createApp(App);
+import en from './locales/en.json';
+import ko from './locales/ko.json';
+
+const userLocale = navigator.language.split('-')[0];
+const supportedLocales = ['en', 'ko'];
+const fallbackLocale = 'en';
+const locale = supportedLocales.includes(userLocale) ? userLocale : fallbackLocale;
+
+const i18n = createI18n({
+  legacy: false,
+  locale: locale,
+  messages: {
+    en: en,
+    ko: ko
+  },
+});
+
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
@@ -29,6 +47,7 @@ app.use(pinia);
 app.use(router);
 app.use(autoAnimatePlugin);
 app.use(VWave);
+app.use(i18n);
 app.use(MotionPlugin);
 
 app.directive("tooltip", vTooltip);
diff --git a/src/views/HomeView/main.vue b/src/views/HomeView/main.vue
index 527b64a4..c88654b5 100644
--- a/src/views/HomeView/main.vue
+++ b/src/views/HomeView/main.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="homepageview content-page">
         <GenericHeader>
-            <template #name>Home</template>
+            <template #name>{{ t('HomeView.Title') }}</template>
             <template #description>{{ getGreetings(auth.user.username) }}</template>
         </GenericHeader>
         <Browse />
@@ -21,6 +21,7 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted } from 'vue'
+import { useI18n } from "vue-i18n";
 import useAuth from '@/stores/auth'
 
 import { playSources } from '@/enums'
@@ -32,6 +33,7 @@ import Browse from '@/components/HomeView/Browse.vue'
 import PageItem from '@/components/shared/CardScroller.vue'
 import GenericHeader from '@/components/shared/GenericHeader.vue'
 
+const { t } = useI18n();
 const home = useHome()
 const auth = useAuth()
 
@@ -42,20 +44,20 @@ function getGreetings(username: string) {
     const hour = date.getHours()
 
     if (hour <= 3) {
-        return 'Hey there night owl'
+        return t('HomeView.Greetings.midnight')
     } else if (hour <= 5) {
-        return 'Hey there early bird'
+        return t('HomeView.Greetings.dawn')
     } else if (hour <= 12) {
-        return 'Good morning ' + username
+        return t('HomeView.Greetings.morning', { name: username })
     } else if (hour <= 17) {
-        return 'Good afternoon ' + username
+        return t('HomeView.Greetings.afternoon', { name: username })
     } else {
-        return 'Goooood evening ' + username
+        return t('HomeView.Greetings.evening', { name: username })
     }
 }
 
 onMounted(async () => {
-    updatePageTitle('Home')
+    updatePageTitle(t('HomeView.title'))
     await home.fetchAll()
     await nextTick()
     updateCardWidth()
diff --git a/yarn.lock b/yarn.lock
index 6bc0e9d2..e21b9eac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1163,6 +1163,27 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@intlify/core-base@11.1.10":
+  version "11.1.10"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-11.1.10.tgz#4731748992bc6d8e723ca6c2cc5aa5a4c90cf7a5"
+  integrity sha512-JhRb40hD93Vk0BgMgDc/xMIFtdXPHoytzeK6VafBNOj6bb6oUZrGamXkBKecMsmGvDQQaPRGG2zpa25VCw8pyw==
+  dependencies:
+    "@intlify/message-compiler" "11.1.10"
+    "@intlify/shared" "11.1.10"
+
+"@intlify/message-compiler@11.1.10":
+  version "11.1.10"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-11.1.10.tgz#ff5c92c311cd72144126f5c128912adb4e911207"
+  integrity sha512-TABl3c8tSLWbcD+jkQTyBhrnW251dzqW39MPgEUCsd69Ua3ceoimsbIzvkcPzzZvt1QDxNkenMht+5//V3JvLQ==
+  dependencies:
+    "@intlify/shared" "11.1.10"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@11.1.10":
+  version "11.1.10"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-11.1.10.tgz#d869aa8fbc1aa307f26a58848fea6df3c9785b6f"
+  integrity sha512-6ZW/f3Zzjxfa1Wh0tYQI5pLKUtU+SY7l70pEG+0yd0zjcsYcK0EBt6Fz30Dy0tZhEqemziQQy2aNU3GJzyrMUA==
+
 "@jimp/bmp@^0.16.13":
   version "0.16.13"
   resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.16.13.tgz#57ffa5b17417b5a181f6f184bdabc8218e8448ef"
@@ -1761,6 +1782,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
 
+"@vue/devtools-api@^6.5.0":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/reactivity-transform@3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
@@ -5986,6 +6012,15 @@ vue-eslint-parser@^9.3.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@11:
+  version "11.1.10"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-11.1.10.tgz#04578ea4213f96c37939a08f516a648a6d0b84a1"
+  integrity sha512-C+IwnSg8QDSOAox0gdFYP5tsKLx5jNWxiawNoiNB/Tw4CReXmM1VJMXbduhbrEzAFLhreqzfDocuSVjGbxQrag==
+  dependencies:
+    "@intlify/core-base" "11.1.10"
+    "@intlify/shared" "11.1.10"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-observe-visibility@^2.0.0-alpha.1:
   version "2.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"