diff --git a/LICENSE b/LICENSE
index 3a3b2d2..98845b0 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Nuxt UI Templates
+Copyright (c) 2025 GitFlux
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/app/components/Issue/Card.vue b/app/components/Issue/Card.vue
new file mode 100644
index 0000000..4e98190
--- /dev/null
+++ b/app/components/Issue/Card.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+interface GitHubIssue {
+  id: number;
+  number: number;
+  title: string;
+  body?: string | null;
+  state: string;
+  user: {
+    login: string;
+    avatar_url: string;
+    html_url: string;
+  } | null;
+  labels: Array<{
+    id: number;
+    name: string;
+    color: string;
+    description?: string;
+  }>;
+  assignees: Array<{
+    login: string;
+    avatar_url: string;
+    html_url: string;
+  }>;
+  comments: number;
+  created_at: string;
+  updated_at: string;
+  html_url: string;
+}
+
+const props = defineProps<{
+  issue: GitHubIssue;
+  owner: string;
+  repo: string;
+}>();
+
+// Format time relative to now
+const formatTimeAgo = (dateString: string) => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  const intervals = [
+    { label: 'year', seconds: 31536000 },
+    { label: 'month', seconds: 2592000 },
+    { label: 'day', seconds: 86400 },
+    { label: 'hour', seconds: 3600 },
+    { label: 'minute', seconds: 60 },
+  ];
+
+  for (const interval of intervals) {
+    const count = Math.floor(diffInSeconds / interval.seconds);
+    if (count > 0) {
+      return `${count} ${interval.label}${count !== 1 ? 's' : ''} ago`;
+    }
+  }
+
+  return 'just now';
+};
+
+// Get contrasting text color for label background
+const getTextColor = (backgroundColor: string) => {
+  const hex = backgroundColor.replace('#', '');
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 128 ? '#000000' : '#ffffff';
+};
+</script>
+
+<template>
+  <UCard class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
+    <div class="flex items-start gap-3">
+      <!-- Issue state icon -->
+      <div class="flex-shrink-0 mt-1">
+        <UIcon
+          :name="issue.state === 'open' ? 'i-heroicons-exclamation-circle' : 'i-heroicons-check-circle'"
+          :class="{
+            'text-green-600 dark:text-green-500': issue.state === 'open',
+            'text-purple-600 dark:text-purple-500': issue.state === 'closed'
+          }"
+          class="w-5 h-5"
+        />
+      </div>
+
+      <div class="flex-1 min-w-0">
+        <!-- Issue title and number -->
+        <div class="flex items-start gap-2 mb-2">
+          <NuxtLink
+            :to="issue.html_url"
+            target="_blank"
+            class="font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 line-clamp-2 flex-1 min-w-0"
+          >
+            {{ issue.title }}
+          </NuxtLink>
+          <span class="text-gray-500 dark:text-gray-400 font-mono text-sm flex-shrink-0">
+            #{{ issue.number }}
+          </span>
+        </div>
+
+        <!-- Issue metadata -->
+        <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-3">
+          <div v-if="issue.user" class="flex items-center gap-1">
+            <UAvatar
+              :src="issue.user.avatar_url"
+              :alt="issue.user.login"
+              size="2xs"
+            />
+            <span>{{ issue.user.login }}</span>
+          </div>
+          <div v-else class="flex items-center gap-1">
+            <UIcon name="i-heroicons-user" class="w-4 h-4" />
+            <span>Unknown user</span>
+          </div>
+          <span>opened {{ formatTimeAgo(issue.created_at) }}</span>
+          <div v-if="issue.comments > 0" class="flex items-center gap-1">
+            <UIcon name="i-heroicons-chat-bubble-left" class="w-4 h-4" />
+            <span>{{ issue.comments }}</span>
+          </div>
+        </div>
+
+        <!-- Labels -->
+        <div v-if="issue.labels && issue.labels.length > 0" class="flex flex-wrap gap-1 mb-3">
+          <span
+            v-for="label in issue.labels.slice(0, 5)"
+            :key="label.id"
+            class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+            :style="{
+              backgroundColor: `#${label.color}`,
+              color: getTextColor(`#${label.color}`)
+            }"
+          >
+            {{ label.name }}
+          </span>
+          <span
+            v-if="issue.labels.length > 5"
+            class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
+          >
+            +{{ issue.labels.length - 5 }} more
+          </span>
+        </div>
+
+        <!-- Assignees -->
+        <div v-if="issue.assignees && issue.assignees.length > 0" class="flex items-center gap-2">
+          <span class="text-xs text-gray-500 dark:text-gray-400">Assigned to:</span>
+          <div class="flex -space-x-2">
+            <UTooltip
+              v-for="assignee in issue.assignees.slice(0, 3)"
+              :key="assignee.login"
+              :text="assignee.login"
+            >
+              <UAvatar
+                :src="assignee.avatar_url"
+                :alt="assignee.login"
+                size="2xs"
+                class="border-2 border-white dark:border-gray-800"
+              />
+            </UTooltip>
+            <div
+              v-if="issue.assignees.length > 3"
+              class="flex items-center justify-center w-6 h-6 text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-full border-2 border-white dark:border-gray-800"
+            >
+              +{{ issue.assignees.length - 3 }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
\ No newline at end of file
diff --git a/app/components/Issue/List.vue b/app/components/Issue/List.vue
new file mode 100644
index 0000000..80738d0
--- /dev/null
+++ b/app/components/Issue/List.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+interface GitHubIssue {
+  id: number;
+  number: number;
+  title: string;
+  body?: string | null;
+  state: string;
+  user: {
+    login: string;
+    avatar_url: string;
+    html_url: string;
+  } | null;
+  labels: Array<{
+    id: number;
+    name: string;
+    color: string;
+    description?: string;
+  }>;
+  assignees: Array<{
+    login: string;
+    avatar_url: string;
+    html_url: string;
+  }>;
+  comments: number;
+  created_at: string;
+  updated_at: string;
+  html_url: string;
+}
+
+const props = defineProps<{
+  issues: GitHubIssue[];
+  owner: string;
+  repo: string;
+  isLoading?: boolean;
+  currentState?: "open" | "closed" | "all";
+  totalCount?: number;
+  openCount?: number;
+  closedCount?: number;
+}>();
+
+const emit = defineEmits<{
+  'update:state': [state: "open" | "closed" | "all"];
+  'update:sort': [sort: "created" | "updated" | "comments"];
+  'update:direction': [direction: "asc" | "desc"];
+}>();
+
+const currentState = computed(() => props.currentState || "open");
+const currentSort = ref<"created" | "updated" | "comments">("created");
+const currentDirection = ref<"asc" | "desc">("desc");
+
+// Filter options
+const stateOptions = [
+  { label: 'Open', value: 'open', count: props.openCount },
+  { label: 'Closed', value: 'closed', count: props.closedCount },
+  { label: 'All', value: 'all', count: props.totalCount },
+];
+
+const sortOptions: Array<{
+  label: string;
+  value: "created" | "updated" | "comments";
+  direction: "asc" | "desc";
+}> = [
+  { label: 'Newest', value: 'created', direction: 'desc' },
+  { label: 'Oldest', value: 'created', direction: 'asc' },
+  { label: 'Most commented', value: 'comments', direction: 'desc' },
+  { label: 'Least commented', value: 'comments', direction: 'asc' },
+  { label: 'Recently updated', value: 'updated', direction: 'desc' },
+  { label: 'Least recently updated', value: 'updated', direction: 'asc' },
+];
+
+function updateState(state: "open" | "closed" | "all") {
+  emit('update:state', state);
+}
+
+function updateSort(option: { value: "created" | "updated" | "comments", direction: "asc" | "desc" }) {
+  currentSort.value = option.value;
+  currentDirection.value = option.direction;
+  emit('update:sort', option.value);
+  emit('update:direction', option.direction);
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Header with filters and sorting -->
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+      <!-- State filter tabs -->
+      <div class="flex items-center gap-1">
+        <UButton
+          v-for="option in stateOptions"
+          :key="option.value"
+          :variant="currentState === option.value ? 'solid' : 'ghost'"
+          :color="currentState === option.value ? 'primary' : 'neutral'"
+          size="sm"
+          @click="updateState(option.value as 'open' | 'closed' | 'all')"
+          class="font-medium"
+        >
+          {{ option.label }}
+          <UBadge
+            v-if="option.count !== undefined"
+            :color="currentState === option.value ? 'neutral' : 'neutral'"
+            variant="subtle"
+            size="xs"
+            class="ml-1"
+          >
+            {{ option.count }}
+          </UBadge>
+        </UButton>
+      </div>
+
+      <!-- Sort dropdown -->
+      <div class="flex items-center gap-2">
+        <UDropdown :items="[sortOptions.map(option => ({
+          label: option.label,
+          click: () => updateSort(option)
+        }))]">
+          <UButton
+            variant="outline"
+            size="sm"
+            trailing-icon="i-heroicons-chevron-down"
+          >
+            {{ sortOptions.find(opt =>
+              opt.value === currentSort && opt.direction === currentDirection
+            )?.label || 'Sort' }}
+          </UButton>
+        </UDropdown>
+      </div>
+    </div>
+
+    <!-- Issues list -->
+    <div v-if="isLoading && issues.length === 0" class="space-y-4">
+      <!-- Loading skeletons -->
+      <div v-for="i in 5" :key="`skeleton-${i}`" class="animate-pulse">
+        <UCard>
+          <div class="flex items-start gap-3">
+            <div class="w-5 h-5 bg-gray-300 dark:bg-gray-600 rounded-full flex-shrink-0"></div>
+            <div class="flex-1 space-y-2">
+              <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
+              <div class="flex items-center gap-4">
+                <div class="w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
+                <div class="h-3 bg-gray-300 dark:bg-gray-600 rounded w-24"></div>
+                <div class="h-3 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </div>
+
+    <div v-else-if="issues.length === 0" class="text-center py-12">
+      <UIcon
+        :name="currentState === 'open' ? 'i-heroicons-exclamation-circle' : 'i-heroicons-check-circle'"
+        class="w-12 h-12 mx-auto mb-4 text-gray-400 dark:text-gray-500"
+      />
+      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
+        No {{ currentState === 'all' ? '' : currentState }} issues found
+      </h3>
+      <p class="text-gray-600 dark:text-gray-300">
+        {{ currentState === 'open'
+           ? 'There are no open issues for this repository.'
+           : currentState === 'closed'
+           ? 'There are no closed issues for this repository.'
+           : 'This repository has no issues yet.' }}
+      </p>
+    </div>
+
+    <div v-else class="space-y-3">
+      <IssueCard
+        v-for="issue in issues"
+        :key="issue.id"
+        :issue="issue"
+        :owner="owner"
+        :repo="repo"
+        class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+      />
+    </div>
+
+    <!-- Loading more indicator -->
+    <div v-if="isLoading && issues.length > 0" class="py-4 flex items-center justify-center">
+      <div class="flex items-center gap-3 text-gray-500 dark:text-gray-400 font-mono text-sm">
+        <span class="w-4 h-4 border-2 border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300 rounded-full motion-safe:animate-spin"></span>
+        Loading more issues...
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.motion-safe\\:animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}
+
+.motion-safe\\:animate-fill-both {
+  animation-fill-mode: both;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index ae28e3b..1bb8562 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -14,21 +14,21 @@ function handleClick(event: MouseEvent) {
   if (!target) return;
 
   // Handle copy button clicks
-  const copyTarget = target.closest('[data-copy]');
+  const copyTarget = target.closest("[data-copy]");
   if (copyTarget) {
-    const wrapper = copyTarget.closest('.readme-code-block');
+    const wrapper = copyTarget.closest(".readme-code-block");
     if (!wrapper) return;
 
-    const pre = wrapper.querySelector('pre');
+    const pre = wrapper.querySelector("pre");
     if (!pre?.textContent) return;
 
     copy(pre.textContent);
 
-    const icon = copyTarget.querySelector('span');
+    const icon = copyTarget.querySelector("span");
     if (!icon) return;
 
-    const originalIcon = 'i-heroicons-document-duplicate';
-    const successIcon = 'i-heroicons-check';
+    const originalIcon = "i-heroicons-document-duplicate";
+    const successIcon = "i-heroicons-check";
 
     icon.classList.remove(originalIcon);
     icon.classList.add(successIcon);
@@ -62,6 +62,26 @@ function handleClick(event: MouseEvent) {
   min-width: 0;
 }
 
+@media screen and (prefers-color-scheme: light) {
+  .readme {
+    color: #000;
+  }
+
+  .readme svg {
+    filter: invert(1);
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  .readme {
+    color: #fff;
+  }
+
+  .readme svg {
+    filter: invert(1);
+  }
+}
+
 /* README headings */
 .readme :deep(h1),
 .readme :deep(h2),
@@ -71,7 +91,6 @@ function handleClick(event: MouseEvent) {
 .readme :deep(h6) {
   font-family: "Monaspace Krypton", ui-monospace, SFMono-Regular, monospace;
   font-weight: 500;
-  color: rgb(17 24 39);
   margin-top: 2rem;
   margin-bottom: 1rem;
   line-height: 1.3;
@@ -260,4 +279,4 @@ function handleClick(event: MouseEvent) {
     border-top-color: rgb(75 85 99);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/composables/useGithub.ts b/app/composables/useGithub.ts
index a7314be..fdc6340 100644
--- a/app/composables/useGithub.ts
+++ b/app/composables/useGithub.ts
@@ -3,11 +3,11 @@ import { Octokit } from "octokit";
 const useOctokit = () => {
   const { user } = useUserSession();
 
-  if (!user.value?.githubToken) {
+  if (!(user.value as any)?.githubToken) {
     throw new Error("GitHub access token not found. Please login first.");
   }
 
-  return new Octokit({ auth: user.value.githubToken });
+  return new Octokit({ auth: (user.value as any).githubToken });
 };
 
 export const useAuthenticatedUser = async (token: string) => {
@@ -99,3 +99,70 @@ export const useGithubRepoReleases = (owner: string, repo: string) => {
     {},
   );
 };
+
+export const useGithubRepoIssues = (
+  owner: string,
+  repo: string,
+  options: MaybeRef<{
+    state?: "open" | "closed" | "all";
+    sort?: "created" | "updated" | "comments";
+    direction?: "asc" | "desc";
+    per_page?: number;
+    page?: number;
+  }> = {},
+) => {
+  return useAsyncData(
+    () => `github-issues-${owner}-${repo}-${JSON.stringify(unref(options))}`,
+    async () => {
+      const octokit = useOctokit();
+      const opts = unref(options);
+      return octokit.rest.issues.listForRepo({
+        owner,
+        repo,
+        state: opts.state || "open",
+        sort: opts.sort || "created",
+        direction: opts.direction || "desc",
+        per_page: opts.per_page || 25,
+        page: opts.page || 1,
+      });
+    },
+    {
+      watch: [() => unref(options)],
+    },
+  );
+};
+
+export const useGithubRepoIssuesCount = (owner: string, repo: string, state: "closed") => {
+  return useAsyncData(
+    `github-issues-count-${owner}-${repo}-${state}`,
+    async () => {
+      const octokit = useOctokit();
+      try {
+        // Use the search API to get an accurate count of closed issues
+        // This is more efficient than fetching all issues just for the count
+        const searchQuery = `repo:${owner}/${repo} type:issue state:${state}`;
+        const response = await octokit.rest.search.issuesAndPullRequests({
+          q: searchQuery,
+          per_page: 1, // We only need the total_count, not the actual results
+        });
+        return response.data.total_count;
+      } catch {
+        // Fallback: try to fetch first page of closed issues and estimate
+        try {
+          const response = await octokit.rest.issues.listForRepo({
+            owner,
+            repo,
+            state,
+            per_page: 1,
+          });
+          // This won't give us the exact count, but it's better than nothing
+          // GitHub doesn't provide total count in the response headers for issues API
+          return response.data.length > 0 ? 1 : 0;
+        } catch {
+          return 0;
+        }
+      }
+    },
+    {},
+  );
+};
diff --git a/app/pages/[org]/[repo].vue b/app/pages/[org]/[repo]/index.vue
similarity index 94%
rename from app/pages/[org]/[repo].vue
rename to app/pages/[org]/[repo]/index.vue
index 0a557f7..2aff136 100644
--- a/app/pages/[org]/[repo].vue
+++ b/app/pages/[org]/[repo]/index.vue
@@ -136,7 +136,7 @@ function getLanguageColor(language: string): string {
 </script>
 
 <template>
-  <main class="container flex-1 w-full py-8">
+  <div class="flex-1 w-full py-8">
     <!-- Loading state -->
     <div v-if="pending" class="animate-pulse">
       <div class="h-8 bg-gray-300 rounded w-2/3 mb-4"></div>
@@ -211,6 +211,23 @@ function getLanguageColor(language: string): string {
 
           <!-- Navigation buttons -->
           <nav class="hidden sm:flex items-center gap-1 ml-auto">
+            <UButton
+              :to="`/${org}/${repo}/issues`"
+              icon="i-heroicons-exclamation-circle"
+              size="sm"
+              variant="outline"
+            >
+              Issues
+              <UBadge
+                v-if="repository?.open_issues_count"
+                color="primary"
+                variant="subtle"
+                size="xs"
+                class="ml-1"
+              >
+                {{ repository.open_issues_count }}
+              </UBadge>
+            </UButton>
             <UButton
               :to="repository.html_url"
               target="_blank"
@@ -254,7 +271,26 @@ function getLanguageColor(language: string): string {
               Website
             </UButton>
 
-            <!-- Mobile GitHub link -->
+            <!-- Mobile navigation links -->
+            <UButton
+              :to="`/${org}/${repo}/issues`"
+              icon="i-heroicons-exclamation-circle"
+              size="sm"
+              variant="ghost"
+              class="sm:hidden text-gray-600 dark:text-gray-300"
+            >
+              Issues
+              <UBadge
+                v-if="repository?.open_issues_count"
+                color="primary"
+                variant="subtle"
+                size="xs"
+                class="ml-1"
+              >
+                {{ repository.open_issues_count }}
+              </UBadge>
+            </UButton>
+
             <UButton
               :to="repository.html_url"
               target="_blank"
@@ -376,13 +412,7 @@ function getLanguageColor(language: string): string {
             </a>
           </h2>
         </div>
-
-        <div
-          v-if="readmeData?.html"
-          class="prose prose-gray dark:prose-invert max-w-none"
-        >
-          <div v-html="readmeData.html" />
-        </div>
+        <Readme v-if="readmeData?.html" :html="readmeData?.html"></Readme>
         <div v-else class="text-center py-12 text-gray-500 dark:text-gray-400">
           <UIcon
             name="i-heroicons-document-text"
@@ -609,7 +639,7 @@ function getLanguageColor(language: string): string {
       </p>
       <UButton to="/" icon="i-heroicons-home"> Back to Home </UButton>
     </div>
-  </main>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/pages/[org]/[repo]/issues.vue b/app/pages/[org]/[repo]/issues.vue
new file mode 100644
index 0000000..b462012
--- /dev/null
+++ b/app/pages/[org]/[repo]/issues.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const org = route.params.org as string;
+const repo = route.params.repo as string;
+
+// State management from URL query parameters
+const currentState = computed({
+  get: () => {
+    const state = route.query.state as string;
+    return (state === "closed" || state === "all") ? state : "open";
+  },
+  set: (value: "open" | "closed" | "all") => {
+    navigateTo({
+      query: { ...route.query, state: value }
+    });
+  }
+});
+
+const currentSort = computed({
+  get: () => {
+    const sort = route.query.sort as string;
+    return (sort === "updated" || sort === "comments") ? sort : "created";
+  },
+  set: (value: "created" | "updated" | "comments") => {
+    navigateTo({
+      query: { ...route.query, sort: value }
+    });
+  }
+});
+
+const currentDirection = computed({
+  get: () => {
+    const direction = route.query.direction as string;
+    return direction === "asc" ? "asc" : "desc";
+  },
+  set: (value: "asc" | "desc") => {
+    navigateTo({
+      query: { ...route.query, direction: value }
+    });
+  }
+});
+
+// Fetch repository data for context
+const { data: repoData } = useGithubRepo(org, repo);
+const repository = computed(() => repoData.value?.data);
+
+// Fetch issues with current filters - reactive to URL changes
+const issuesOptions = computed(() => ({
+  state: currentState.value as "open" | "closed" | "all",
+  sort: currentSort.value as "created" | "updated" | "comments",
+  direction: currentDirection.value as "asc" | "desc",
+  per_page: 25,
+}));
+
+const {
+  data: issuesData,
+  pending: issuesLoading,
+  refresh: refreshIssues,
+} = useGithubRepoIssues(org, repo, issuesOptions);
+
+const issues = computed(() => (issuesData.value?.data || []) as any[]);
+
+// Fetch accurate closed issues count using the search API
+const { data: closedIssuesCount } = useGithubRepoIssuesCount(org, repo, "closed");
+
+// Calculate counts
+const openCount = computed(() => {
+  // GitHub API doesn't return total count in headers for issues, so we'll use the repo's open_issues_count
+  return repository.value?.open_issues_count || 0;
+});
+
+const closedCount = computed(() => {
+  return closedIssuesCount.value || 0;
+});
+
+const totalCount = computed(() => {
+  const open = openCount.value || 0;
+  const closed = closedCount.value || 0;
+  return open + closed;
+});
+
+// Header reference for sticky behavior
+const header = useTemplateRef("header");
+const isHeaderPinned = shallowRef(false);
+
+function checkHeaderPosition() {
+  const el = header.value;
+  if (!el) return;
+
+  const style = getComputedStyle(el);
+  const top = parseFloat(style.top) || 0;
+  const rect = el.getBoundingClientRect();
+
+  isHeaderPinned.value = Math.abs(rect.top - top) < 1;
+}
+
+if (import.meta.client) {
+  useEventListener("scroll", checkHeaderPosition, { passive: true });
+  useEventListener("resize", checkHeaderPosition);
+}
+
+onMounted(() => {
+  checkHeaderPosition();
+});
+
+// Handle filter and sort updates
+function updateState(state: "open" | "closed" | "all") {
+  currentState.value = state;
+}
+
+function updateSort(sort: "created" | "updated" | "comments") {
+  currentSort.value = sort;
+}
+
+function updateDirection(direction: "asc" | "desc") {
+  currentDirection.value = direction;
+}
+
+// SEO meta
+useSeoMeta({
+  title: () =>
+    repository.value
+      ? `Issues · ${repository.value.full_name} - Gitflux`
+      : `Issues · ${org}/${repo} - Gitflux`,
+  description: () =>
+    repository.value?.description
+      ? `View and track issues for ${repository.value.full_name}. ${repository.value.description}`
+      : `View and track issues for ${org}/${repo} repository on Gitflux`,
+});
+</script>
+
+<template>
+  <div class="flex-1 w-full py-8">
+    <article class="issues-page">
+      <!-- Repository header -->
+      <header
+        class="area-header sticky top-14 z-10 bg-white dark:bg-gray-900 py-4 border-b border-gray-200 dark:border-gray-700"
+        ref="header"
+        :class="{ 'shadow-sm': isHeaderPinned }"
+      >
+        <div class="flex items-center gap-3 flex-wrap min-w-0">
+          <div class="flex flex-col items-start min-w-0">
+            <nav
+              class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-1"
+            >
+              <NuxtLink
+                :to="`/${org}`"
+                class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
+              >
+                {{ org }}
+              </NuxtLink>
+              <span>/</span>
+              <NuxtLink
+                :to="`/${org}/${repo}`"
+                class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
+              >
+                {{ repo }}
+              </NuxtLink>
+              <span>/</span>
+              <span class="text-gray-900 dark:text-white font-medium"
+                >Issues</span
+              >
+            </nav>
+
+            <h1
+              class="font-mono text-2xl sm:text-3xl font-medium text-gray-900 dark:text-white flex items-center gap-2"
+            >
+              <UIcon
+                name="i-heroicons-exclamation-circle"
+                class="w-6 h-6 text-green-600 dark:text-green-500"
+              />
+              Issues
+            </h1>
+          </div>
+
+          <!-- Navigation buttons -->
+          <nav class="hidden sm:flex items-center gap-1 ml-auto">
+            <UButton
+              :to="`/${org}/${repo}`"
+              icon="i-heroicons-arrow-left"
+              size="sm"
+              variant="outline"
+            >
+              Back to Repository
+            </UButton>
+          </nav>
+        </div>
+      </header>
+
+      <!-- Issues content -->
+      <section class="area-content">
+        <div class="mb-6">
+          <div v-if="repository" class="max-w-3xl min-h-[2rem] mb-4">
+            <p
+              v-if="repository.description"
+              class="text-gray-600 dark:text-gray-300"
+            >
+              {{ repository.description }}
+            </p>
+          </div>
+        </div>
+
+        <IssueList
+          :issues="issues"
+          :owner="org"
+          :repo="repo"
+          :is-loading="issuesLoading"
+          :current-state="currentState"
+          :total-count="totalCount"
+          :open-count="openCount"
+          :closed-count="closedCount"
+          @update:state="updateState"
+          @update:sort="updateSort"
+          @update:direction="updateDirection"
+        />
+      </section>
+
+      <!-- Sidebar -->
+      <div class="area-sidebar">
+        <div class="sticky top-24 space-y-6">
+          <!-- Repository info card -->
+          <UCard v-if="repository">
+            <template #header>
+              <h3 class="text-sm font-medium text-gray-900 dark:text-white">
+                Repository
+              </h3>
+            </template>
+
+            <div class="space-y-3">
+              <div class="flex items-center gap-2">
+                <UIcon
+                  :name="
+                    repository.private
+                      ? 'i-heroicons-lock-closed'
+                      : 'i-heroicons-globe-alt'
+                  "
+                  :class="{
+                    'text-amber-500': repository.private,
+                    'text-green-500': !repository.private,
+                  }"
+                  class="w-4 h-4"
+                />
+                <span class="text-sm text-gray-900 dark:text-white">
+                  {{ repository.private ? "Private" : "Public" }}
+                </span>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <UIcon
+                  name="i-heroicons-star"
+                  class="w-4 h-4 text-yellow-500"
+                />
+                <span class="text-sm text-gray-900 dark:text-white">
+                  {{ repository.stargazers_count?.toLocaleString() || 0 }} stars
+                </span>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <UIcon
+                  name="i-heroicons-code-bracket"
+                  class="w-4 h-4 text-blue-500"
+                />
+                <span class="text-sm text-gray-900 dark:text-white">
+                  {{ repository.forks_count?.toLocaleString() || 0 }} forks
+                </span>
+              </div>
+
+              <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
+                <UButton
+                  :to="repository.html_url"
+                  target="_blank"
+                  icon="i-simple-icons-github"
+                  size="sm"
+                  variant="outline"
+                  block
+                >
+                  View on GitHub
+                </UButton>
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.issues-page {
+  display: grid;
+  gap: 2rem;
+  padding-inline: 2rem;
+
+  /* Mobile: single column layout */
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "header"
+    "content"
+    "sidebar";
+}
+
+/* Tablet: header full width, content and sidebar side by side */
+@media (min-width: 1024px) {
+  .issues-page {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "header  header"
+      "content sidebar";
+  }
+}
+
+/* Desktop: floating sidebar alongside all content */
+@media (min-width: 1280px) {
+  .issues-page {
+    grid-template-columns: 1fr 20rem;
+    grid-template-areas:
+      "header  sidebar"
+      "content sidebar";
+  }
+}
+
+.area-header {
+  grid-area: header;
+}
+
+.area-content {
+  grid-area: content;
+  min-width: 0;
+}
+
+.area-sidebar {
+  grid-area: sidebar;
+}
+
+/* Ensure proper text wrapping */
+.issues-page {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+.issues-page > * {
+  max-width: 100%;
+  min-width: 0;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cdf4621..fe29f09 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
     },
     session: {
       name: "nuxt-session",
-      password: process.env.NUXT_SESSION_PASSWORD || "",
+      password: "",
       cookie: {
         sameSite: "lax",
         secure: false, // Allow cookies over HTTP in development