diff --git a/bun.lockb b/bun.lockb
index fbbdab7e..45e1b00d 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 7948e74a..97ac17b9 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "svelte-check": "^3.0.1",
     "svelte-hero-icons": "^5.0.0",
     "svelte-tiny-virtual-list": "^2.0.5",
+    "sveltekit-i18n": "^2.4.2",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
diff --git a/src/lib/components/lemmy/SiteCard.svelte b/src/lib/components/lemmy/SiteCard.svelte
index 17bd15c7..f6398eb6 100644
--- a/src/lib/components/lemmy/SiteCard.svelte
+++ b/src/lib/components/lemmy/SiteCard.svelte
@@ -2,21 +2,14 @@
   import Markdown from '$lib/components/markdown/Markdown.svelte'
   import Avatar from '$lib/components/ui/Avatar.svelte'
   import StickyCard from '$lib/components/ui/StickyCard.svelte'
-  import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
-  import RelativeDate from '$lib/components/util/RelativeDate.svelte'
-  import { publishedToDate } from '$lib/components/util/date.js'
-  import { getClient } from '$lib/lemmy.js'
   import type { PersonView, SiteView, Tagline } from 'lemmy-js-client'
-  import { Button, Disclosure, Popover } from 'mono-svelte'
+  import { Button } from 'mono-svelte'
   import {
     BuildingOffice,
-    Calendar,
     ChartBar,
-    ChatBubbleOvalLeftEllipsis,
     Icon,
     InformationCircle,
     Newspaper,
-    PencilSquare,
     ServerStack,
     UserGroup,
   } from 'svelte-hero-icons'
@@ -24,6 +17,7 @@
   import LabelStat from '../ui/LabelStat.svelte'
   import ItemList from './generic/ItemList.svelte'
   import { userLink } from '$lib/lemmy/generic'
+  import { t } from '$lib/translations'
 
   export let site: SiteView
   export let taglines: Tagline[] | undefined = undefined
@@ -49,15 +43,25 @@
     </div>
   </div>
   <div class="flex flex-row gap-1 !border-0">
-    <Button href="/modlog" title="Modlog" color="ghost" size="square-md">
+    <Button
+      href="/modlog"
+      title={$t('routes.modlog')}
+      color="ghost"
+      size="square-md"
+    >
       <Icon src={Newspaper} size="16" mini />
     </Button>
-    <Button href="/legal" title="Legal" color="ghost" size="square-md">
+    <Button
+      href="/legal"
+      title={$t('routes.legal')}
+      color="ghost"
+      size="square-md"
+    >
       <Icon src={BuildingOffice} size="16" mini />
     </Button>
     <Button
       href="/instances"
-      title="Instances"
+      title={$t('routes.instances')}
       class="3xl:rounded-l-none"
       color="ghost"
       size="square-md"
@@ -78,7 +82,8 @@
 
     <Expandable>
       <svelte:fragment slot="title">
-        <Icon src={InformationCircle} size="15" mini /> About
+        <Icon src={InformationCircle} size="15" mini />
+        {$t('cards.site.about')}
       </svelte:fragment>
       <Markdown source={site.site.description} />
       <div class="my-4" />
@@ -87,21 +92,22 @@
 
     <Expandable>
       <svelte:fragment slot="title">
-        <Icon src={ChartBar} size="15" mini /> Stats
+        <Icon src={ChartBar} size="15" mini />
+        {$t('cards.site.stats')}
       </svelte:fragment>
       <div class="flex flex-row gap-4 flex-wrap">
         <LabelStat
-          label="Users"
+          label={$t('content.users')}
           content={site.counts.users.toString()}
           formatted
         />
         <LabelStat
-          label="Posts"
+          label={$t('content.posts')}
           content={site.counts.posts.toString()}
           formatted
         />
         <LabelStat
-          label="Communities"
+          label={$t('content.communities')}
           content={site.counts.communities.toString()}
           formatted
         />
@@ -111,7 +117,8 @@
     {#if admins}
       <Expandable>
         <svelte:fragment slot="title">
-          <Icon src={UserGroup} size="15" mini /> Admins
+          <Icon src={UserGroup} size="15" mini />
+          {$t('cards.site.admins')}
         </svelte:fragment>
         <ItemList
           items={admins.map((a) => ({
diff --git a/src/lib/components/lemmy/dropdowns/Location.svelte b/src/lib/components/lemmy/dropdowns/Location.svelte
index c74eaf88..0fb33786 100644
--- a/src/lib/components/lemmy/dropdowns/Location.svelte
+++ b/src/lib/components/lemmy/dropdowns/Location.svelte
@@ -6,6 +6,7 @@
   import { Select } from 'mono-svelte'
   import { GlobeAmericas, Icon } from 'svelte-hero-icons'
   import { amModOfAny } from '../moderation/moderation'
+  import { t } from '$lib/translations'
 
   export let selected: string
   export let navigate: boolean = true
@@ -33,19 +34,19 @@
     {#if showLabel}
       <span class="flex items-center gap-1">
         <Icon src={GlobeAmericas} size="16" mini />
-        Location
+        {$t('filter.location.label')}
       </span>
     {/if}
   </svelte:fragment>
-  <option value="All">All</option>
-  <option value="Local">Local</option>
+  <option value="All">{$t('filter.location.all')}</option>
+  <option value="Local">{$t('filter.location.local')}</option>
   <option value="Subscribed" disabled={$profile?.jwt == undefined}>
-    Subscribed
+    {$t('filter.location.subscribed')}
   </option>
   <option
     value="ModeratorView"
     disabled={!$profile?.jwt || !amModOfAny($profile?.user)}
   >
-    Moderator
+    {$t('filter.location.moderator')}
   </option>
 </Select>
diff --git a/src/lib/components/lemmy/dropdowns/Sort.svelte b/src/lib/components/lemmy/dropdowns/Sort.svelte
index 740f2579..56c2f81c 100644
--- a/src/lib/components/lemmy/dropdowns/Sort.svelte
+++ b/src/lib/components/lemmy/dropdowns/Sort.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores'
   import { site } from '$lib/lemmy.js'
   import { userSettings } from '$lib/settings'
+  import { t } from '$lib/translations'
   import { searchParam } from '$lib/util.js'
   import { feature } from '$lib/version.js'
   import type { SortType } from 'lemmy-js-client'
@@ -33,21 +34,19 @@
   >
     <span slot="label" class="flex items-center gap-1">
       <Icon src={ChartBar} size="13" mini />
-      Sort
+      {$t('filter.sort.label')}
     </span>
-    <option value="Active">Active</option>
-    <option value="Hot">Hot</option>
+    <option value="Active">{$t('filter.sort.active')}</option>
+    <option value="Hot">{$t('filter.sort.hot')}</option>
     {#if feature('scaledSort', $site?.version)}
-      <option value="Scaled">Scaled</option>
+      <option value="Scaled">{$t('filter.sort.scaled')}</option>
     {/if}
-    <option value="TopAll">Top</option>
-    <option value="New">New</option>
-    {#if feature('controversialSort', $site?.version)}
-      <option value="Controversial">Controversial</option>
-    {/if}
-    <option value="Old">Old</option>
-    <option value="MostComments">Comments</option>
-    <option value="NewComments">New Replies</option>
+    <option value="TopAll">{$t('filter.sort.top.label')}</option>
+    <option value="New">{$t('filter.sort.new')}</option>
+    <option value="Old">{$t('filter.sort.old')}</option>
+    <option value="Controversial">{$t('filter.sort.controversial')}</option>
+    <option value="MostComments">{$t('filter.sort.mostcomments')}</option>
+    <option value="NewComments">{$t('filter.sort.newcomments')}</option>
   </Select>
   {#if selected?.startsWith('Top')}
     <div transition:fly={{ easing: backOut, x: 2 }}>
@@ -62,18 +61,26 @@
       >
         <span slot="label" class="flex items-center gap-1">
           <Icon src={Clock} size="15" mini />
-          Time
+          {$t('filter.sort.top.time.label')}
         </span>
-        <option value="TopAll">All</option>
-        <option value="TopNineMonths">9 Months</option>
-        <option value="TopSixMonths">6 Months</option>
-        <option value="TopThreeMonths">3 Months</option>
-        <option value="TopMonth">Month</option>
-        <option value="TopWeek">Week</option>
-        <option value="TopDay">Day</option>
-        <option value="TopTwelveHour">12 Hours</option>
-        <option value="TopSixHour">6 Hours</option>
-        <option value="TopHour">Hour</option>
+        <option value="TopAll">{$t('filter.sort.top.time.all')}</option>
+        <option value="TopNineMonths">
+          {$t('filter.sort.top.time.9months')}
+        </option>
+        <option value="TopSixMonths">
+          {$t('filter.sort.top.time.6months')}
+        </option>
+        <option value="TopThreeMonths">
+          {$t('filter.sort.top.time.3months')}
+        </option>
+        <option value="TopMonth">{$t('filter.sort.top.time.month')}</option>
+        <option value="TopWeek">{$t('filter.sort.top.time.week')}</option>
+        <option value="TopDay">{$t('filter.sort.top.time.day')}</option>
+        <option value="TopTwelveHour">
+          {$t('filter.sort.top.time.12hours')}
+        </option>
+        <option value="TopSixHour">{$t('filter.sort.top.time.6hours')}</option>
+        <option value="TopHour">{$t('filter.sort.top.time.hour')}</option>
       </Select>
     </div>
   {/if}
diff --git a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
index 2dde6655..17bc2860 100644
--- a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
+++ b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { userSettings } from '$lib/settings.js'
+  import { t } from '$lib/translations'
   import { Select } from 'mono-svelte'
   import { Icon, ViewColumns } from 'svelte-hero-icons'
 
@@ -11,12 +12,12 @@
     {#if showLabel}
       <span class="flex items-center gap-1">
         <Icon src={ViewColumns} size="14" mini />
-        View
+        {$t('filter.view.label')}
       </span>
     {/if}
   </svelte:fragment>
-  <option value="cozy">Cozy</option>
-  <option value="list">List</option>
-  <option value="compact">Compact</option>
-  <option value="card">Legacy</option>
+  <option value="cozy">{$t('filter.view.cozy')}</option>
+  <option value="list">{$t('filter.view.list')}</option>
+  <option value="compact">{$t('filter.view.compact')}</option>
+  <option value="card">{$t('filter.view.legacy')}</option>
 </Select>
diff --git a/src/lib/components/lemmy/util/SearchBar.svelte b/src/lib/components/lemmy/util/SearchBar.svelte
index cae4911d..20e74627 100644
--- a/src/lib/components/lemmy/util/SearchBar.svelte
+++ b/src/lib/components/lemmy/util/SearchBar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
+  import { t } from '$lib/translations'
   import { TextInput } from 'mono-svelte'
 
   let query: string = ''
@@ -15,7 +16,7 @@
   <TextInput
     bind:value={query}
     class="w-full h-full {$$props.class}"
-    placeholder="Search"
+    placeholder={$t('nav.search')}
     autofocus
   />
 </form>
diff --git a/src/lib/components/ui/navbar/Navbar.svelte b/src/lib/components/ui/navbar/Navbar.svelte
index 198446e2..9c2ca49f 100644
--- a/src/lib/components/ui/navbar/Navbar.svelte
+++ b/src/lib/components/ui/navbar/Navbar.svelte
@@ -37,6 +37,7 @@
   import Logo from '../Logo.svelte'
   import { LINKED_INSTANCE_URL } from '$lib/instance'
   import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
+  import { t } from '$lib/translations'
 
   let searching = false
 </script>
@@ -48,7 +49,7 @@
   "
   style={$$props.style}
 >
-  <NavButton href="/" label="Home" class="ml-2 logo">
+  <NavButton href="/" label={$t('nav.home')} class="ml-2 logo">
     <svelte:fragment slot="icon">
       {#if LINKED_INSTANCE_URL}
         {#if $site}
@@ -171,7 +172,7 @@
     {#if $profile?.user && isAdmin($profile.user)}
       <NavButton
         href="/admin"
-        label="Admin"
+        label={$t('nav.admin')}
         icon={ServerStack}
         class="relative"
         isSelectedFilter={(path) => path.startsWith('/admin')}
@@ -184,7 +185,11 @@
       </NavButton>
     {/if}
     {#if amModOfAny($profile?.user)}
-      <NavButton href="/moderation" label="Moderation" class="relative">
+      <NavButton
+        href="/moderation"
+        label={$t('nav.moderation')}
+        class="relative"
+      >
         {#if ($profile?.user?.notifications.reports ?? 0) > 0}
           <div
             class="rounded-full w-2 h-2 bg-red-500 absolute -top-1 -left-1"
@@ -193,10 +198,14 @@
         <ShieldIcon let:isSelected slot="icon" filled={isSelected} width={18} />
       </NavButton>
     {/if}
-    <NavButton href="/communities" label="Explore" icon={GlobeAlt} />
+    <NavButton
+      href="/communities"
+      label={$t('nav.communities')}
+      icon={GlobeAlt}
+    />
     <NavButton
       on:click={() => (searching = true)}
-      label="Search"
+      label={$t('nav.search')}
       icon={MagnifyingGlass}
     />
     <Menu placement="top">
@@ -204,13 +213,13 @@
         class="relative"
         color="primary"
         slot="target"
-        label="Create"
+        label={$t('nav.create.label')}
         icon={Plus}
       />
-      <MenuDivider>Create</MenuDivider>
+      <MenuDivider>{$t('nav.create.label')}</MenuDivider>
       <MenuButton link href="/create/post" disabled={!$profile?.jwt}>
         <Icon src={PencilSquare} mini width={16} slot="prefix" />
-        Post
+        {$t('nav.create.post')}
       </MenuButton>
       <MenuButton
         link
@@ -221,11 +230,11 @@
             !isAdmin($profile.user))}
       >
         <Icon src={Newspaper} mini width={16} slot="prefix" />
-        Community
+        {$t('nav.create.community')}
       </MenuButton>
       {#if !$profile?.jwt}
         <span class="text-sm mx-4 my-1 py-1">
-          <Link highlight href="/login">Log in</Link> to create content.
+          {$t('nav.create.logingate')}
         </span>
       {/if}
     </Menu>
diff --git a/src/lib/components/ui/sidebar/Sidebar.svelte b/src/lib/components/ui/sidebar/Sidebar.svelte
index bf37719e..01f2de59 100644
--- a/src/lib/components/ui/sidebar/Sidebar.svelte
+++ b/src/lib/components/ui/sidebar/Sidebar.svelte
@@ -26,6 +26,7 @@
   import Expandable from '$lib/components/ui/Expandable.svelte'
   import EndPlaceholder from '../EndPlaceholder.svelte'
   import Application from '../../../../routes/admin/applications/Application.svelte'
+  import { t } from '$lib/translations'
 </script>
 
 <nav
@@ -35,11 +36,13 @@
 >
   {#if $profile?.jwt}
     <SidebarButton icon={UserCircle} href="/profile/user">
-      <span slot="label">Profile</span>
+      <span slot="label">
+        {$t('profile.profile')}
+      </span>
     </SidebarButton>
     <SidebarButton icon={Inbox} href="/inbox">
       <span slot="label" class="flex items-center gap-2">
-        Inbox
+        {$t('profile.inbox')}
         {#if $profile?.user?.notifications.inbox}
           <Badge
             class="w-5 h-5 !p-0 grid place-items-center ml-auto"
@@ -51,22 +54,30 @@
       </span>
     </SidebarButton>
     <SidebarButton icon={Bookmark} href="/saved">
-      <span slot="label">Saved</span>
+      <span slot="label">{$t('profile.saved')}</span>
     </SidebarButton>
   {:else}
-    <SidebarButton href="/login" title="Log In" icon={ArrowLeftOnRectangle}>
-      <span slot="label">Log In</span>
+    <SidebarButton
+      href="/login"
+      title={$t('account.login')}
+      icon={ArrowLeftOnRectangle}
+    >
+      <span slot="label">{$t('account.login')}</span>
     </SidebarButton>
-    <SidebarButton href="/signup" title="Sign Up" icon={Identification}>
-      <span slot="label">Sign Up</span>
+    <SidebarButton
+      href="/signup"
+      title={$t('account.signup')}
+      icon={Identification}
+    >
+      <span slot="label">{$t('account.signup')}</span>
     </SidebarButton>
     {#if LINKED_INSTANCE_URL === undefined}
       <SidebarButton
         href="/accounts"
-        title="Change Instance"
+        title={$t('account.changeinstance')}
         icon={ServerStack}
       >
-        <span slot="label">Change Instance</span>
+        <span slot="label">{$t('account.changeinstance')}</span>
       </SidebarButton>
     {/if}
   {/if}
@@ -78,7 +89,7 @@
       </div>
     {/each}
     <SidebarButton href="/accounts" icon={UserGroup}>
-      <span slot="label">Accounts</span>
+      <span slot="label">{$t('account.accounts')}</span>
     </SidebarButton>
   {/if}
   <hr class="border-slate-200 dark:border-zinc-900 my-1" />
@@ -99,7 +110,7 @@
           : '//max-lg:hidden'}"
       >
         <EndPlaceholder>
-          Subscribed
+          {$t('profile.subscribed')}
           <span slot="action" class="dark:text-white text-black">
             {$profile.user.follows.length}
           </span>
diff --git a/src/lib/i18n/en.json b/src/lib/i18n/en.json
new file mode 100644
index 00000000..844e7021
--- /dev/null
+++ b/src/lib/i18n/en.json
@@ -0,0 +1,113 @@
+{
+  "profile": {
+    "profile": "Profile",
+    "inbox": "Inbox",
+    "saved": "Saved",
+    "subscribed": "Subscribed"
+  },
+  "nav": {
+    "home": "Home",
+    "admin": "Admin",
+    "moderation": "Moderation",
+    "communities": "Explore",
+    "search": "Search",
+    "create": {
+      "label": "Create",
+      "post": "Post",
+      "community": "Community",
+      "logingate": "You must log in to create content."
+    },
+    "menu": {
+      "label": "Profile",
+      "app": "App",
+      "settings": "Settings",
+      "colorscheme": {
+        "label": "Color Scheme",
+        "system": "System",
+        "dark": "Dark",
+        "light": "Light"
+      },
+      "theme": "Theme",
+      "about": "About",
+      "source": "Source",
+      "donate": "Donate",
+      "instance": "Instance"
+    }
+  },
+  "account": {
+    "login": "Log In",
+    "logout": "Log Out",
+    "signup": "Sign Up",
+    "accounts": "Accounts",
+    "changeinstance": "Change Instance"
+  },
+  "filter": {
+    "location": {
+      "label": "Location",
+      "all": "All",
+      "local": "Local",
+      "subscribed": "Subscribed",
+      "moderator": "Moderator"
+    },
+    "sort": {
+      "label": "Sort",
+      "active": "Active",
+      "hot": "Hot",
+      "top": {
+        "label": "Top",
+        "time": {
+          "label": "Time",
+          "all": "All",
+          "9months": "9 Months",
+          "6months": "6 Months",
+          "3months": "3 Months",
+          "month": "Month",
+          "week": "Week",
+          "day": "Day",
+          "12hours": "12 Hours",
+          "6hours": "6 Hours",
+          "hour": "Hour"
+        }
+      },
+      "new": "New",
+      "old": "Old",
+      "controversial": "Controversial",
+      "scaled": "Scaled",
+      "mostcomments": "Comments",
+      "newcomments": "New Replies"
+    },
+    "view": {
+      "label": "View",
+      "cozy": "Cozy",
+      "list": "List",
+      "compact": "Compact",
+      "legacy": "Legacy"
+    }
+  },
+  "form": {
+    "username": "Username",
+    "instance": "Instance URL",
+    "password": "Password",
+    "2fa": "2FA Code",
+    "forgotpassword": "Forgot Password",
+    "submit": "Submit"
+  },
+  "routes": {
+    "frontpage": "Frontpage",
+    "modlog": "Modlog",
+    "instances": "Instances",
+    "legal": "Legal"
+  },
+  "cards": {
+    "site": {
+      "about": "About",
+      "stats": "Stats",
+      "admins": "Admins"
+    }
+  },
+  "content": {
+    "users": "Users",
+    "posts": "Posts",
+    "communities": "Communities"
+  }
+}
\ No newline at end of file
diff --git a/src/lib/translations.ts b/src/lib/translations.ts
new file mode 100644
index 00000000..90f5fcbb
--- /dev/null
+++ b/src/lib/translations.ts
@@ -0,0 +1,15 @@
+import i18n, { type Config } from 'sveltekit-i18n'
+
+const config: Config = {
+  loaders: [
+    {
+      locale: 'en',
+      key: '',
+      loader: async () => (await import('./i18n/en.json')).default,
+    },
+  ],
+}
+
+export const { t, locale, locales, loading, loadTranslations } = new i18n(
+  config
+)
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 0883c153..447a691e 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,3 +1,10 @@
 import { env } from '$env/dynamic/public'
+import { loadTranslations } from '$lib/translations.js'
 
-export let ssr = (env.PUBLIC_SSR_ENABLED?.toLowerCase() ?? 'false') == 'true'
\ No newline at end of file
+export let ssr = (env.PUBLIC_SSR_ENABLED?.toLowerCase() ?? 'false') == 'true'
+
+export const load = async ({ url }) => {
+  await loadTranslations('en')
+
+  return
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d81bd29..32b18f35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,29 +17,14 @@
   import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
   import Location from '$lib/components/lemmy/dropdowns/Location.svelte'
   import Header from '$lib/components/ui/layout/pages/Header.svelte'
+  import { t } from '$lib/translations.js'
 
   export let data
-
-  let sidebar = false
 </script>
 
-<Modal bind:open={sidebar}>
-  <span slot="title">About</span>
-  <div class="mx-auto">
-    {#if $site}
-      <SiteCard
-        site={$site.site_view}
-        taglines={$site.taglines}
-        admins={$site.admins}
-        version={$site.version}
-      />
-    {/if}
-  </div>
-</Modal>
-
 <div class="flex flex-col gap-4 max-w-full w-full min-w-0">
   <header>
-    <Header>Frontpage</Header>
+    <Header>{$t('routes.frontpage')}</Header>
   </header>
   <div class="flex items-center gap-2">
     <Location changeDefault selected={data.listingType} />