diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index dc905fd0e8..7479b4d79d 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -8,6 +8,10 @@
 			img: 'discord_webhook.png',
 			instructions: 'Server Settings -> Integration -> Webhooks',
 			key: 'webhook_url'
+		},
+		toggl: {
+			img: 'toggl_connect.png',
+			instructions: 'Go to https://track.toggl.com/profile -> API Token'
 		}
 	}
 </script>
@@ -129,14 +133,15 @@
 					})
 				)
 			}
+			const description = `${manual ? 'Token' : 'OAuth token'} for ${resource_type}`
 			await VariableService.createVariable({
 				workspace: $workspaceStore!,
 				requestBody: {
 					path,
 					value,
 					is_secret: true,
-					description: `OAuth token for ${resource_type}`,
-					is_oauth: true,
+					description,
+					is_oauth: !manual,
 					account: account
 				}
 			})
@@ -148,8 +153,8 @@
 					resource_type,
 					path,
 					value: resourceValue,
-					description: `OAuth token for ${resource_type}`,
-					is_oauth: true
+					description,
+					is_oauth: !manual
 				}
 			})
 			dispatch('refresh')
diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
index e9536f5da4..ae55fc41bc 100644
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-	import Mysql from './icons/Mysql.svelte'
-	import Mail from './icons/Mail.svelte'
-	import DbIcon from './icons/DbIcon.svelte'
-	import PostgresIcon from './icons/PostgresIcon.svelte'
 	import { faGithub } from '@fortawesome/free-brands-svg-icons'
-	import Slack from './icons/Slack.svelte'
 	import Icon from 'svelte-awesome'
-	import GmailIcon from './icons/GmailIcon.svelte'
-	import GSheetsIcon from './icons/GSheetsIcon.svelte'
-	import GitlabIcon from './icons/GItlabIcon.svelte'
+	import AirtableIcon from './icons/AirtableIcon.svelte'
+	import DbIcon from './icons/DbIcon.svelte'
+	import GcalIcon from './icons/GcalIcon.svelte'
 	import GCloudIcon from './icons/GCloudIcon.svelte'
 	import GdriveIcon from './icons/GdriveIcon.svelte'
-	import GcalIcon from './icons/GcalIcon.svelte'
-	import AirtableIcon from './icons/AirtableIcon.svelte'
+	import GitlabIcon from './icons/GItlabIcon.svelte'
+	import GmailIcon from './icons/GmailIcon.svelte'
+	import GSheetsIcon from './icons/GSheetsIcon.svelte'
+	import Mail from './icons/Mail.svelte'
+	import Mysql from './icons/Mysql.svelte'
+	import PostgresIcon from './icons/PostgresIcon.svelte'
+	import Slack from './icons/Slack.svelte'
+	import TogglIcon from './icons/TogglIcon.svelte'
 
 	export let name: string
 	export let after: boolean = false
@@ -51,6 +52,8 @@
 		<GdriveIcon {height} {width} />
 	{:else if name === 'airtable'}
 		<AirtableIcon {height} {width} />
+	{:else if name === 'toggl'}
+		<TogglIcon {height} {width} />
 	{/if}
 	{#if after}
 		{name}
diff --git a/frontend/src/lib/components/icons/TogglIcon.svelte b/frontend/src/lib/components/icons/TogglIcon.svelte
new file mode 100644
index 0000000000..3087911d2d
--- /dev/null
+++ b/frontend/src/lib/components/icons/TogglIcon.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 60 60"
+	style=" fill:#000000;"
+	><linearGradient
+		id="2R_xNhRC2gDYhp_e6bogba"
+		x1="32"
+		x2="32"
+		y1="7"
+		y2="57"
+		gradientUnits="userSpaceOnUse"
+		><stop offset="0" stop-color="#000000" /><stop
+			offset="1"
+			stop-color="#000000"
+		/></linearGradient
+	><path
+		fill="url(#2R_xNhRC2gDYhp_e6bogba)"
+		d="M32,9c12.682,0,23,10.318,23,23S44.682,55,32,55S9,44.682,9,32S19.318,9,32,9 M32,7	C18.193,7,7,18.193,7,32s11.193,25,25,25s25-11.193,25-25S45.807,7,32,7L32,7z"
+	/><linearGradient
+		id="2R_xNhRC2gDYhp_e6bogbb"
+		x1="32.001"
+		x2="32.001"
+		y1="16.294"
+		y2="45.473"
+		gradientUnits="userSpaceOnUse"
+		><stop offset="0" stop-color="#000000" /><stop
+			offset="1"
+			stop-color="#000000"
+		/></linearGradient
+	><rect
+		width="3.999"
+		height="17.995"
+		x="30.001"
+		y="16.005"
+		fill="url(#2R_xNhRC2gDYhp_e6bogbb)"
+	/><linearGradient
+		id="2R_xNhRC2gDYhp_e6bogbc"
+		x1="32.001"
+		x2="32.001"
+		y1="16.294"
+		y2="45.473"
+		gradientUnits="userSpaceOnUse"
+		><stop offset="0" stop-color="#000000" /><stop
+			offset="1"
+			stop-color="#000000"
+		/></linearGradient
+	><path
+		fill="url(#2R_xNhRC2gDYhp_e6bogbc)"
+		d="M35.5,20.043v3.713c3.35,1.379,5.714,4.67,5.714,8.518c0,5.087-4.126,9.214-9.213,9.214	c-5.087,0-9.212-4.126-9.212-9.214c0-3.847,2.36-7.137,5.712-8.517v-3.714c-5.324,1.525-9.223,6.418-9.223,12.23	C19.277,39.3,24.976,45,32,45c7.026,0,12.724-5.7,12.724-12.725C44.724,26.461,40.822,21.567,35.5,20.043z"
+	/></svg
+>
diff --git a/frontend/static/toggl_connect.png b/frontend/static/toggl_connect.png
new file mode 100644
index 0000000000..e43cfbaa59
Binary files /dev/null and b/frontend/static/toggl_connect.png differ