diff --git a/gitbutler-ui/src/lib/backend/summarizer.ts b/gitbutler-ui/src/lib/backend/summarizer.ts
index 2e66164ec..dab15d8f5 100644
--- a/gitbutler-ui/src/lib/backend/summarizer.ts
+++ b/gitbutler-ui/src/lib/backend/summarizer.ts
@@ -1,8 +1,8 @@
-import { getAnthropicKey, getAnthropicModel, getModelKind, getOpenAIKey, getOpenAIModel, getTokenOption, KeyOption, ModelKind } from './summarizer_settings';
+import { getAnthropicKey, getAnthropicModel, getModelKind, getOpenAIKey, getOpenAIModel, getKeyOption, KeyOption, ModelKind } from './summarizer_settings';
 import {
 	type AIProvider,
 	ButlerAIProvider,
-	OpenAIProvider as AnthropicAIProvider,
+	AnthropicAIProvider,
     OpenAIProvider
 } from '$lib/backend/aiProviders';
 import { getCloudApiClient, type User } from '$lib/backend/cloud';
@@ -99,9 +99,9 @@ interface SummarizerContext {
 // Secondly, if the user has opted to bring their own key but hasn't provided one, it will return undefined
 export async function buildSummarizer(context: SummarizerContext): Promise<Summarizer | undefined> {
 	const modelKind = await getModelKind();
-	const tokenOption = await getTokenOption();
+	const keyOption = await getKeyOption();
 
-	if (tokenOption === KeyOption.ButlerAPI) {
+	if (keyOption === KeyOption.ButlerAPI) {
 		if (!context.user) return;
 
 		const aiProvider = new ButlerAIProvider(getCloudApiClient(), context.user, modelKind);
diff --git a/gitbutler-ui/src/lib/backend/summarizer_settings.ts b/gitbutler-ui/src/lib/backend/summarizer_settings.ts
index 839e4484a..62ebeeb42 100644
--- a/gitbutler-ui/src/lib/backend/summarizer_settings.ts
+++ b/gitbutler-ui/src/lib/backend/summarizer_settings.ts
@@ -42,12 +42,12 @@ export function setModelKind(modelKind: ModelKind) {
 
 const tokenOptionConfigKey = 'tokenOption';
 
-export async function getTokenOption(): Promise<KeyOption> {
+export async function getKeyOption(): Promise<KeyOption> {
 	const tokenKind = (await gitGetConfig(tokenOptionConfigKey)) as KeyOption | undefined;
 	return tokenKind || KeyOption.ButlerAPI;
 }
 
-export function setTokenOption(tokenOption: KeyOption) {
+export function setKeyOption(tokenOption: KeyOption) {
 	return gitSetConfig(tokenOptionConfigKey, tokenOption);
 }
 
@@ -80,7 +80,7 @@ export async function getAnthropicKey(): Promise<string | undefined> {
 	return key || undefined;
 }
 
-export function setAnthropicToken(token: string) {
+export function setAnthropicKey(token: string) {
 	return gitSetConfig(anthropicKeyConfigKey, token);
 }
 
diff --git a/gitbutler-ui/src/lib/components/AISettings.svelte b/gitbutler-ui/src/lib/components/AISettings.svelte
new file mode 100644
index 000000000..98127fa0d
--- /dev/null
+++ b/gitbutler-ui/src/lib/components/AISettings.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import SectionCard from "$lib/components/SectionCard.svelte";
+	import { KeyOption, ModelKind, getModelKind, getKeyOption, setModelKind, setKeyOption, getAnthropicKey, setAnthropicKey, setOpenAIKey, getOpenAIKey, AnthropicModel, getAnthropicModel, OpenAIModel, getOpenAIModel, setAnthropicModel, setOpenAIModel } from "$lib/backend/summarizer_settings";
+	import Select from "./Select.svelte";
+	import SelectItem from "./SelectItem.svelte";
+	import TextBox from "./TextBox.svelte";
+
+    let modelKind: { name: string, value: ModelKind } | undefined;
+    getModelKind().then((kind) => modelKind = modelKinds.find((option) => option.value == kind))
+    $: if (modelKind) setModelKind(modelKind.value)
+
+    const modelKinds = [
+        {
+            name: "Open AI",
+            value: ModelKind.OpenAI
+        },
+        {
+            name: "Anthropic",
+            value: ModelKind.Anthropic
+        }
+    ]
+
+    let keyOption: { name: string, value: KeyOption } | undefined;
+    getKeyOption().then((persistedKeyOption) => keyOption = keyOptions.find((option) => option.value == persistedKeyOption))
+    $: if (keyOption) setKeyOption(keyOption.value)
+
+    const keyOptions = [
+        {
+            name: "Butler API",
+            value: KeyOption.ButlerAPI
+        },
+        {
+            name: "Bring your own key",
+            value: KeyOption.BringYourOwn
+        }
+    ]
+
+    let openAIKey: string | undefined;
+    getOpenAIKey().then((persistedOpenAIKey) => openAIKey = persistedOpenAIKey)
+    $: if (openAIKey) setOpenAIKey(openAIKey)
+
+    let openAIModel: { name: string, value: OpenAIModel } | undefined;
+    getOpenAIModel().then((persistedOpenAIModel) => openAIModel = openAIModelOptions.find((option) => option.value == persistedOpenAIModel))
+    $: if (openAIModel) setOpenAIModel(openAIModel.value)
+
+    const openAIModelOptions = [
+        {
+            name: "GPT 3.5 Turbo",
+            value: OpenAIModel.GPT35Turbo
+        },
+        {
+            name: "GPT 4",
+            value: OpenAIModel.GPT4
+        },
+        {
+            name: "GPT 4 Turbo",
+            value: OpenAIModel.GPT4Turbo
+        },
+    ]
+
+    let anthropicKey: string | undefined;
+    getAnthropicKey().then((persistedAnthropicKey) => anthropicKey = persistedAnthropicKey)
+    $: if (anthropicKey) setAnthropicKey(anthropicKey)
+
+    let anthropicModel: { name: string, value: AnthropicModel } | undefined;
+    getAnthropicModel().then((persistedAnthropicModel) => anthropicModel = anthropicModelOptions.find((option) => option.value == persistedAnthropicModel))
+    $: if (anthropicModel) setAnthropicModel(anthropicModel.value)
+
+    const anthropicModelOptions = [
+        {
+            name: "Sonnet",
+            value: AnthropicModel.Sonnet
+        },
+        {
+            name: "Opus",
+            value: AnthropicModel.Opus
+        }
+    ]
+</script>
+
+<SectionCard>
+    <svelte:fragment slot="title">Model Kind</svelte:fragment>
+    <svelte:fragment slot="body">
+        GitButler supports OpenAI and Anthropic for various summerization tasks, either proxied via the GitButler servers or in a bring your own key configuration.
+    </svelte:fragment>
+
+    <Select items={modelKinds} bind:value={modelKind} itemId="value" labelId="name">
+        <SelectItem slot="template" let:item>
+            {item.name}
+        </SelectItem>
+    </Select>
+</SectionCard>
+
+<SectionCard>
+    <svelte:fragment slot="title">Key Configuration</svelte:fragment>
+    <svelte:fragment slot="body">
+        GitButler can either be configured to be proxied via the GitButler servers or to use your own key.
+    </svelte:fragment>
+
+    <Select items={keyOptions} bind:value={keyOption} itemId="value" labelId="name">
+        <SelectItem slot="template" let:item>
+            {item.name}
+        </SelectItem>
+    </Select>
+
+    {#if keyOption?.value === KeyOption.BringYourOwn}
+        {#if modelKind?.value == ModelKind.Anthropic}
+            <TextBox label="Anthropic API Key" bind:value={anthropicKey}/>
+
+            <Select items={anthropicModelOptions} bind:value={anthropicModel} itemId="value" labelId="name" label="Model Version">
+                <SelectItem slot="template" let:item>
+                    {item.name}
+                </SelectItem>
+            </Select>
+        {:else if modelKind?.value == ModelKind.OpenAI}
+            <TextBox label="OpenAI API Key" bind:value={openAIKey}/>
+
+            <Select items={openAIModelOptions} bind:value={openAIModel} itemId="value" labelId="name" label="Model Version">
+                <SelectItem slot="template" let:item>
+                    {item.name}
+                </SelectItem>
+            </Select>
+        {/if}
+    {/if}
+</SectionCard>
diff --git a/gitbutler-ui/src/routes/settings/+page.svelte b/gitbutler-ui/src/routes/settings/+page.svelte
index 470003294..2204343ee 100644
--- a/gitbutler-ui/src/routes/settings/+page.svelte
+++ b/gitbutler-ui/src/routes/settings/+page.svelte
@@ -25,6 +25,7 @@
 	import { getContext } from 'svelte';
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
+	import AiSettings from '$lib/components/AISettings.svelte';
 
 	const userSettings = getContext(SETTINGS_CONTEXT) as SettingsStore;
 
@@ -335,35 +336,7 @@
 		</ContentWrapper>
 	{:else if currentSection === 'ai'}
 		<ContentWrapper title="AI Options">
-			<SectionCard>
-				<svelte:fragment slot="title">AI Provider</svelte:fragment>
-				<svelte:fragment slot="caption">
-					GitButler uses a a connection to its API to provide AI functionality, but supports
-					additional providers
-				</svelte:fragment>
-
-				<TextBox readonly selectall bind:value={sshKey} />
-				<div class="row-buttons">
-					<Button
-						kind="filled"
-						color="primary"
-						icon="copy"
-						on:click={() => copyToClipboard(sshKey)}
-					>
-						Copy to Clipboard
-					</Button>
-					<Button
-						kind="outlined"
-						color="neutral"
-						icon="open-link"
-						on:mousedown={() => {
-							openExternalUrl('https://github.com/settings/ssh/new');
-						}}
-					>
-						Add key to GitHub
-					</Button>
-				</div>
-			</SectionCard>
+			<AiSettings />
 		</ContentWrapper>
 	{/if}
 </section>