diff --git a/README.md b/README.md
index cc4387a..58caac6 100644
--- a/README.md
+++ b/README.md
@@ -2,14 +2,14 @@
 
 Display live GitHub code in an iframe.
 
-> [Demo](https://github-iframe.vercel.app) | [Blog post](https://sanitypress.dev/blog/introducing-github-iframe)
+> [Demo](https://github-iframe-kappa.vercel.app) | [Blog post](https://sanitypress.dev/blog/introducing-github-iframe)
 
 ```html
-<iframe src="https://github-iframe.vercel.app/{owner}/{repo}/{path}"></iframe>
+<iframe src="https://github-iframe-kappa.vercel.app/{owner}/{repo}/{path}"></iframe>
 
 <!-- e.g. -->
 <iframe
-	src="https://github-iframe.vercel.app/nuotsu/github-iframe/src/lib/store.ts"
+	src="https://github-iframe-kappa.vercel.app/nuotsu/github-iframe/src/lib/store.ts"
 	width="100%"
 	height="400px"
 	title="nuotsu/github-iframe/src/lib/store.ts"
diff --git a/package-lock.json b/package-lock.json
index d918011..501a3b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "github-iframe",
-	"version": "0.7.8",
+	"version": "0.8.3",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "github-iframe",
-			"version": "0.7.8",
+			"version": "0.8.3",
 			"dependencies": {
 				"@vercel/analytics": "^1.4.1",
 				"clsx": "^2.1.1",
diff --git a/src/app/(iframe)/[owner]/[repo]/[...path]/page.tsx b/src/app/(iframe)/[owner]/[repo]/[...path]/page.tsx
index 53c379b..298d1d2 100644
--- a/src/app/(iframe)/[owner]/[repo]/[...path]/page.tsx
+++ b/src/app/(iframe)/[owner]/[repo]/[...path]/page.tsx
@@ -1,4 +1,3 @@
-import { getRawContent } from '@/lib/octokit/utils'
 import setHighlights from '@/lib/octokit/setHighlights'
 import ConvertHashToParam from './ConvertHashToParam'
 import Code from './Code'
@@ -8,6 +7,7 @@ import DisplayPath from './DisplayPath'
 import BgColor from './BgColor'
 import { cn } from '@/lib/utils'
 import type { Display } from '@/lib/store'
+import { fetchGithubFileContent } from '@/lib/octokit/github';
 
 export default async function Page({
 	params,
@@ -17,7 +17,7 @@ export default async function Page({
 		owner: string
 		repo: string
 		path?: string[]
-	}>
+	}>;
 	searchParams: Promise<{
 		theme?: string
 		lang?: string
@@ -25,12 +25,19 @@ export default async function Page({
 		lineNums?: string
 		L?: string
 		scrollTo?: string
-	}>
+		token?: string
+	}>;
 }) {
 	const { owner, repo, path } = await params
-	const { theme, lang, display, lineNums, L, scrollTo } = await searchParams
+	const { theme, lang, display, lineNums, L, scrollTo, token} = await searchParams
 
-	const raw = await getRawContent({ owner, repo, path })
+  let raw: string;
+  try {
+    raw = await fetchGithubFileContent(owner, repo, path?.join('/') || '', token);
+  } catch (error) {
+    console.error('Error fetching content:', error);
+    raw = error instanceof Error ? error.message : 'Error loading the code...Try again';
+  }
 
 	return (
 		<>
diff --git a/src/app/(site)/Options.tsx b/src/app/(site)/Options.tsx
index dbeea17..8de2dd5 100644
--- a/src/app/(site)/Options.tsx
+++ b/src/app/(site)/Options.tsx
@@ -1,135 +1,192 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { store, DISPLAYS, type Theme, type Display } from '@/lib/store'
 import Input from '@/ui/Input'
 import { debounce } from '@/lib/utils'
 import {
-	VscSettings,
-	VscFileCode,
-	VscRepo,
-	VscSymbolColor,
-	VscEye,
-	VscEyeClosed,
-	VscPaintcan,
-	VscCode,
-	VscListSelection,
-	VscListOrdered,
+  VscSettings,
+  VscFileCode,
+  VscRepo,
+  VscSymbolColor,
+  VscEye,
+  VscEyeClosed,
+  VscPaintcan,
+  VscCode,
+  VscListSelection,
+  VscListOrdered,
+  VscLock,
+  VscUnlock,
 } from 'react-icons/vsc'
 import { bundledThemes } from 'shiki'
 import Checkbox from '@/ui/Checkbox'
 
 export default function Options() {
-	const {
-		repo,
-		path,
-		theme,
-		lang,
-		display,
-		lineNums,
-		highlight,
-		scrollTo,
-		setRepo,
-		setPath,
-		setTheme,
-		setLang,
-		setDisplay,
-		setLineNums,
-		setHighlight,
-		setScrollTo,
-	} = store()
-
-	const ext = path?.split('.').at(-1) ?? ''
-
-	return (
-		<fieldset className="border border-neutral-300 p-2">
-			<legend className="with-icon">
-				<VscSettings /> Options
-			</legend>
-
-			<div className="grid gap-x-4 gap-y-2 md:grid-cols-2">
-				<Input
-					title="Repo owner/repo"
-					icon={VscRepo}
-					defaultValue={repo}
-					onChange={debounce((e) => setRepo(e.target.value))}
-					pattern=".+/.+"
-					required
-				/>
-
-				<Input
-					title="Path to file"
-					icon={VscFileCode}
-					defaultValue={path}
-					onChange={debounce((e) => setPath(e.target.value))}
-					className="group-[:has(.view-file-source:hover)_input]/root:border-black/30"
-					required
-				/>
-
-				<Input icon={VscSymbolColor}>
-					<select
-						title="Theme"
-						className="input w-full"
-						defaultValue={theme}
-						onChange={(e) => setTheme(e.target.value as Theme)}
-					>
-						<option disabled>Select a theme</option>
-						{Object.entries(bundledThemes).map(([option]) => (
-							<option key={option}>{option}</option>
-						))}
-					</select>
-				</Input>
-
-				<Input
-					label="Language"
-					icon={VscCode}
-					defaultValue={lang}
-					onChange={debounce((e) => setLang(e.target.value))}
-					placeholder={ext}
-				/>
-
-				<Input
-					label="Display"
-					icon={display === 'none' ? VscEyeClosed : VscEye}
-				>
-					<select
-						className="input w-full"
-						defaultValue={display}
-						onChange={(e) => setDisplay(e.target.value as Display)}
-					>
-						{DISPLAYS.map((option) => (
-							<option key={option}>{option}</option>
-						))}
-					</select>
-				</Input>
-
-				<Checkbox
-					label={`${lineNums ? 'Hide' : 'Show'} line numbers`}
-					onIcon={VscListOrdered}
-					offIcon={VscListSelection}
-					defaultChecked={lineNums}
-					reverseChecked
-					onChange={(e) => setLineNums(e.target.checked)}
-				/>
-
-				<Input
-					label="Highlight"
-					title="Lines to highlight"
-					icon={VscPaintcan}
-					defaultValue={highlight}
-					onChange={debounce((e) => setHighlight(e.target.value))}
-					pattern="((\d+|\d+-\d+),)*(\d+|\d+-\d+)"
-					placeholder="lines (e.g. 5,14-19)"
-				/>
-
-				{highlight && (
-					<Checkbox
-						className="anim-fade-to-r"
-						label="Scroll to highlighted line"
-						defaultChecked={scrollTo}
-						onChange={(e) => setScrollTo(e.target.checked)}
-					/>
-				)}
-			</div>
-		</fieldset>
-	)
-}
+  const {
+    repo,
+    path,
+    theme,
+    lang,
+    display,
+    lineNums,
+    highlight,
+    scrollTo,
+    setRepo,
+    setPath,
+    setTheme,
+    setLang,
+    setDisplay,
+    setLineNums,
+    setHighlight,
+    setScrollTo,
+    setToken, // New
+  } = store()
+
+  const ext = path?.split('.').at(-1) ?? ''
+
+  const [token, setLocalToken] = useState<string>('')
+  const [showTokenInput, setShowTokenInput] = useState<boolean>(false)
+  const [showToken, setShowToken] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (showTokenInput && token) {
+      setToken(token)
+    } else {
+      setToken('') // Clear token in store when hidden
+    }
+  }, [token, showTokenInput, setToken])
+
+  return (
+    <fieldset className="border border-neutral-300 p-2">
+      <legend className="with-icon">
+        <VscSettings /> Options
+      </legend>
+
+      <div className="grid gap-x-4 gap-y-2 md:grid-cols-2">
+        <Input
+          title="Repo owner/repo"
+          icon={VscRepo}
+          defaultValue={repo}
+          onChange={debounce((e) => setRepo(e.target.value))}
+          pattern=".+/.+"
+          required
+        />
+
+        <Input
+          title="Path to file"
+          icon={VscFileCode}
+          defaultValue={path}
+          onChange={debounce((e) => setPath(e.target.value))}
+          className="group-[:has(.view-file-source:hover)_input]/root:border-black/30"
+          required
+        />
+
+        <div className="col-span-2 space-y-2">
+          <button
+            type="button"
+            onClick={() => setShowTokenInput(!showTokenInput)}
+            className="w-fit border border-neutral-300 px-3 py-1 rounded-md bg-white text-neutral-700 hover:bg-neutral-50 transition-colors flex items-center gap-2 text-sm"
+          >
+            {showTokenInput ? <VscUnlock /> : <VscLock />}
+            {showTokenInput ? 'Not Private' : 'Private Repo?'}
+          </button>
+
+          {showTokenInput && (
+            <div className="space-y-2">
+              <Input
+                title="Personal Access Token"
+                icon={showToken ? VscEye : VscEyeClosed}
+                value={token}
+                onChange={(e) => setLocalToken(e.target.value)}
+                type={showToken ? 'text' : 'password'}
+                placeholder="ghp_xxxxxxxxxxxxxxxx"
+              />
+              <span
+                onClick={() => setShowToken(!showToken)}
+                className="text-sm text-blue-500 cursor-pointer hover:underline"
+              >
+                {showToken ? 'Hide token' : 'Show token'}
+              </span>
+              <p className="text-xs text-neutral-500">
+                Use a token with <code>repo</code> scope from{' '}
+                <a
+                  href="https://github.com/settings/tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:underline"
+                >
+                  GitHub Settings
+                </a>. Fetches automatically as you type.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <Input icon={VscSymbolColor}>
+          <select
+            title="Theme"
+            className="input w-full"
+            defaultValue={theme}
+            onChange={(e) => setTheme(e.target.value as Theme)}
+          >
+            <option disabled>Select a theme</option>
+            {Object.entries(bundledThemes).map(([option]) => (
+              <option key={option}>{option}</option>
+            ))}
+          </select>
+        </Input>
+
+        <Input
+          label="Language"
+          icon={VscCode}
+          defaultValue={lang}
+          onChange={debounce((e) => setLang(e.target.value))}
+          placeholder={ext}
+        />
+
+        <Input
+          label="Display"
+          icon={display === 'none' ? VscEyeClosed : VscEye}
+        >
+          <select
+            className="input w-full"
+            defaultValue={display}
+            onChange={(e) => setDisplay(e.target.value as Display)}
+          >
+            {DISPLAYS.map((option) => (
+              <option key={option}>{option}</option>
+            ))}
+          </select>
+        </Input>
+
+        <Checkbox
+          label={`${lineNums ? 'Hide' : 'Show'} line numbers`}
+          onIcon={VscListOrdered}
+          offIcon={VscListSelection}
+          defaultChecked={lineNums}
+          reverseChecked
+          onChange={(e) => setLineNums(e.target.checked)}
+        />
+
+        <Input
+          label="Highlight"
+          title="Lines to highlight"
+          icon={VscPaintcan}
+          defaultValue={highlight}
+          onChange={debounce((e) => setHighlight(e.target.value))}
+          pattern="((\d+|\d+-\d+),)*(\d+|\d+-\d+)"
+          placeholder="lines (e.g. 5,14-19)"
+        />
+
+        {highlight && (
+          <Checkbox
+            className="anim-fade-to-r"
+            label="Scroll to highlighted line"
+            defaultChecked={scrollTo}
+            onChange={(e) => setScrollTo(e.target.checked)}
+          />
+        )}
+      </div>
+    </fieldset>
+  )
+}
\ No newline at end of file
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 00a446b..8c65650 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { store, getCode } from '@/lib/store'
 import Options from './Options'
 import Actions from './Actions'
@@ -12,6 +13,9 @@ export default function Home() {
 
 	const isValid = repo?.includes('/') && path
 
+	const [iframeError, setIframeError] = useState<string | null>(null)
+
+
 	return (
 		<section className="group/root space-y-6">
 			<Options />
@@ -28,16 +32,20 @@ export default function Home() {
 
 			{isValid && (
 				<div className="group grid h-[400px] bg-neutral-50 transition-transform *:col-span-full *:row-span-full group-has-[.fullscreen-preview:hover]/root:scale-[1.02]">
-					<p className="with-icon m-auto">
-						<VscLoading className="animate-spin" />
-						Loading...
-					</p>
-
-					{isValid && (
+					{!iframeError ? (
+						<>
+						<p className="with-icon m-auto">
+							<VscLoading className="animate-spin" />
+							Loading...
+						</p>
 						<div
 							className="relative"
 							dangerouslySetInnerHTML={{ __html: code }}
+							onError={() => setIframeError('Error loading the code...Try again')}
 						/>
+					</>
+					) : (
+						<p className="text-red-500 text-center m-auto">{iframeError}</p>
 					)}
 				</div>
 			)}
diff --git a/src/lib/octokit/client.ts b/src/lib/octokit/client.ts
index 4f1d0a8..be4f4f8 100644
--- a/src/lib/octokit/client.ts
+++ b/src/lib/octokit/client.ts
@@ -1,5 +1,34 @@
 import { Octokit } from 'octokit'
 
+// Default Octokit instance for public access or pre-configured token
 export const octokit = new Octokit({
-	auth: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
+  auth: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
 })
+
+// Function to fetch file content with an optional token for private repos
+export async function getFileContent({
+  owner,
+  repo,
+  path,
+  token,
+}: {
+  owner: string
+  repo: string
+  path: string
+  token?: string
+}): Promise<string> {
+  // Use a new Octokit instance if a token is provided, otherwise use the default
+  const authOctokit = token ? new Octokit({ auth: token }) : octokit
+  try {
+    const { data } = await authOctokit.rest.repos.getContent({
+      owner,
+      repo,
+      path,
+      mediaType: { format: 'raw' },
+    })
+    return String(data)
+  } catch (error) {
+    console.error('Error fetching file content:', error)
+    throw error
+  }
+}
\ No newline at end of file
diff --git a/src/lib/octokit/github.ts b/src/lib/octokit/github.ts
new file mode 100644
index 0000000..7e8ff49
--- /dev/null
+++ b/src/lib/octokit/github.ts
@@ -0,0 +1,56 @@
+// src/lib/octokit/github.ts
+export async function fetchGithubFileContent(
+  owner: string,
+  repo: string,
+  path: string,
+  token?: string,
+): Promise<string> {
+  const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
+  const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/main/${path}`; // Fallback for public repos
+  const baseHeaders: HeadersInit = {
+    'Accept': 'application/vnd.github.v3+json',
+  };
+
+  // Try API without token first (for public repos)
+  console.log(`Fetching ${apiUrl} without token...`);
+  let response = await fetch(apiUrl, { headers: baseHeaders });
+  console.log(`API Response status: ${response.status}, OK: ${response.ok}`);
+
+  // If rate limit (429) or auth error (401/403), try with token if provided
+  if ((response.status === 429 || response.status === 401 || response.status === 403) && token) {
+    const authHeaders: HeadersInit = {
+      ...baseHeaders,
+      'Authorization': `token ${token}`,
+    };
+    console.log(`Retrying ${apiUrl} with token due to ${response.status}...`);
+    response = await fetch(apiUrl, { headers: authHeaders });
+    console.log(`Retry status: ${response.status}, OK: ${response.ok}`);
+  }
+
+  if (!response.ok) {
+    if (response.status === 429 || response.status === 403) {
+      // Fallback to raw URL for public repos when rate limited
+      console.log(`Rate limit hit, trying raw URL: ${rawUrl}`);
+      const rawResponse = await fetch(rawUrl);
+      if (rawResponse.ok) {
+        return await rawResponse.text();
+      }
+      console.error(`Raw fetch failed: ${rawResponse.status} - ${await rawResponse.text()}`);
+    }
+    const errorText = await response.text();
+    console.error(`Failed to fetch ${owner}/${repo}/${path}: ${response.status} - ${errorText}`);
+    throw new Error(
+      response.status === 429
+        ? 'API rate limit exceeded. Try using a personal access token for higher limits.'
+        : `Failed to fetch ${owner}/${repo}/${path}: ${response.status} - ${errorText}`
+    );
+  }
+
+  const data = await response.json();
+  if (!data.content || typeof data.content !== 'string') {
+    console.error('No valid content in response:', data);
+    throw new Error('No valid content found in response');
+  }
+
+  return atob(data.content);
+}
\ No newline at end of file
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 8feffe6..9ce1085 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -2,7 +2,7 @@ import { bundledThemes } from 'shiki'
 import { create } from 'zustand'
 import { dev } from '@/lib/env'
 
-export const DOMAIN = 'https://github-iframe.vercel.app'
+export const DOMAIN = 'https://github-iframe-kappa.vercel.app'
 
 export const DISPLAYS = ['none', 'repo', 'path', 'all'] as const
 export const DEFAULT_THEME: Theme = 'dark-plus'
@@ -19,6 +19,7 @@ export const store = create<{
 	lineNums?: boolean
 	highlight?: string
 	scrollTo?: boolean
+	token?: string // New
 
 	setRepo: (repo: string) => void
 	setPath: (path: string) => void
@@ -28,6 +29,7 @@ export const store = create<{
 	setLineNums: (lineNums?: boolean) => void
 	setHighlight: (highlight?: string) => void
 	setScrollTo: (scrollTo?: boolean) => void
+	setToken: (token?: string) => void // New
 }>((set) => ({
 	repo: 'nuotsu/github-iframe',
 	path: 'src/lib/store.ts',
@@ -37,6 +39,7 @@ export const store = create<{
 	lineNums: false,
 	highlight: undefined,
 	scrollTo: false,
+	token: undefined, // New
 
 	setRepo: (repo: string) => set({ repo }),
 	setPath: (path: string) => set({ path }),
@@ -46,11 +49,22 @@ export const store = create<{
 	setLineNums: (lineNums?: boolean) => set({ lineNums }),
 	setHighlight: (highlight?: string) => set({ highlight }),
 	setScrollTo: (scrollTo?: boolean) => set({ scrollTo }),
+	setToken: (token?: string) => set({ token }), // New
 }))
 
 export function getSrc() {
 	return store(
-		({ repo, path, theme, lang, display, lineNums, highlight, scrollTo }) => {
+		({
+			repo,
+			path,
+			theme,
+			lang,
+			display,
+			lineNums,
+			highlight,
+			scrollTo,
+			token,
+		}) => {
 			const domain = dev ? 'http://localhost:3000' : DOMAIN
 			const url = new URL(
 				`${domain}/${repo}/${path}${highlight ? `#L${highlight}` : ''}`,
@@ -61,6 +75,7 @@ export function getSrc() {
 			if (display !== 'none') url.searchParams.set('display', display)
 			if (lineNums) url.searchParams.set('lineNums', '0')
 			if (highlight && scrollTo) url.searchParams.set('scrollTo', '1')
+			if (token) url.searchParams.set('token', token) // New: Add token to URL
 
 			return url.toString()
 		},