diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 35e4cbe..845fb5d 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -5,16 +5,29 @@
         <v-list-item title="Explore" :active="isExploreRoute" @click="goTo('/')" />
         <v-list-item title="Trending" :active="isTrendingRoute" @click="goTo('/trending')" />
         <v-list-item v-if="isAuthenticated" title="Favorites" :active="$route.path === '/favorites'" @click="goTo('/favorites')" />
-        <v-list-item v-if="isAuthenticated">
+        
+        <v-list-group class="extensions-list-group" value="extensions">
+          <template #activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              title="Extensions"
+            />
+          </template>
+          
+          <v-list-item
+            v-for="ext in extensions"
+            :key="ext.name"
+            :title="ext.name"
+            :href="ext.url"
+            target="_blank"
+          />
+        </v-list-group>
+        
+        <v-list-item>
           <div class="d-flex align-center w-100">
             <v-btn variant="text" icon="mdi-github" href="https://github.com/gorse-io/gitrec" target="_blank" />
-            <v-btn variant="text" icon="mdi-logout" @click="logout" />
-          </div>
-        </v-list-item>
-        <v-list-item v-if="!isAuthenticated">
-          <div class="d-flex align-center w-100">
-            <v-btn variant="text" icon="mdi-github" href="https://github.com/gorse-io/gitrec" target="_blank" />
-            <v-btn variant="text" icon="mdi-login" @click="goTo('/login')" />
+            <v-btn v-if="isAuthenticated" variant="text" icon="mdi-logout" @click="logout" />
+            <v-btn v-if="!isAuthenticated" variant="text" icon="mdi-login" @click="goTo('/login')" />
           </div>
         </v-list-item>
       </v-list>
@@ -29,9 +42,9 @@
         <span class="route-title">GitRec</span>
         <v-spacer />
         <div class="d-none d-md-flex align-center ga-1">
-          <v-btn variant="text" :to="'/'" :active="isExploreRoute" color="white">Explore</v-btn>
-          <v-btn variant="text" :to="'/trending'" :active="isTrendingRoute" color="white">Trending</v-btn>
-          <v-btn v-if="isAuthenticated" variant="text" :to="'/favorites'" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
+          <v-btn variant="text" to="/" :active="isExploreRoute" color="white">Explore</v-btn>
+          <v-btn variant="text" to="/trending" :active="isTrendingRoute" color="white">Trending</v-btn>
+          <v-btn v-if="isAuthenticated" variant="text" to="/favorites" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
 
           <v-menu location="bottom end">
             <template #activator="{ props }">
@@ -41,18 +54,10 @@
             </template>
             <v-list density="compact">
               <v-list-item
-                title="Chrome Extension"
-                href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
-                target="_blank"
-              />
-              <v-list-item
-                title="Edge Add-on"
-                href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
-                target="_blank"
-              />
-              <v-list-item
-                title="Firefox Add-on"
-                href="https://addons.mozilla.org/addon/gitrec/"
+                v-for="ext in extensions"
+                :key="ext.name"
+                :title="ext.name"
+                :href="ext.url"
                 target="_blank"
               />
             </v-list>
@@ -117,47 +122,54 @@
 </template>
 
 <script>
-import axios from "axios";
+import authMixin from "../mixins/authMixin";
+
+const TOPICS = [
+  "all",
+  "ai",
+  "python",
+  "java",
+  "cpp",
+  "go",
+  "javascript",
+  "typescript",
+  "c",
+  "rust",
+];
+
+const LANGUAGES = [
+  "all",
+  "hackernews",
+  "python",
+  "java",
+  "cpp",
+  "go",
+  "javascript",
+  "typescript",
+  "c",
+  "rust",
+];
+
+const EXTENSIONS = [
+  { name: "Chrome Extension", icon: "mdi-google-chrome", url: "https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" },
+  { name: "Edge Add-on", icon: "mdi-microsoft-edge", url: "https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" },
+  { name: "Firefox Add-on", icon: "mdi-firefox", url: "https://addons.mozilla.org/addon/gitrec/" },
+];
 
 export default {
+  mixins: [authMixin],
   data() {
     return {
       drawer: false,
-      isAuthenticated: false,
-      topics: [
-        "all",
-        "ai",
-        "python",
-        "java",
-        "cpp",
-        "go",
-        "javascript",
-        "typescript",
-        "c",
-        "rust",
-      ],
-      languages: [
-        "all",
-        "hackernews",
-        "python",
-        "java",
-        "cpp",
-        "go",
-        "javascript",
-        "typescript",
-        "c",
-        "rust",
-      ],
+      topics: TOPICS,
+      languages: LANGUAGES,
+      extensions: EXTENSIONS,
     };
   },
   computed: {
     routeTitle() {
-      if (this.isTrendingRoute) {
-        return "Trending";
-      }
-      if (this.isExploreRoute) {
-        return "Explore";
-      }
+      if (this.isTrendingRoute) return "Trending";
+      if (this.isExploreRoute) return "Explore";
       return this.$route.name;
     },
     isExploreRoute() {
@@ -172,49 +184,11 @@ export default {
     activeLanguage() {
       return this.$route.params.language || "all";
     },
-    // Filter topics: hide 'ai' for anonymous users
     visibleTopics() {
-      if (this.isAuthenticated) {
-        return this.topics;
-      }
-      return this.topics.filter(topic => topic !== "ai");
+      return this.isAuthenticated ? this.topics : this.topics.filter(t => t !== "ai");
     },
   },
-  async mounted() {
-    await this.checkAuth();
-  },
   methods: {
-    async checkAuth() {
-      const cached = localStorage.getItem("gitrec_auth_state");
-      if (cached) {
-        try {
-          const { is_authenticated, timestamp } = JSON.parse(cached);
-          if (Date.now() - timestamp < 5 * 60 * 1000) {
-            this.isAuthenticated = is_authenticated;
-            return;
-          }
-        } catch (error) {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      }
-      
-      try {
-        const response = await axios.get("/api/me", { withCredentials: true });
-        this.isAuthenticated = response.data.is_authenticated;
-        if (this.isAuthenticated) {
-          localStorage.setItem("gitrec_auth_state", JSON.stringify({
-            is_authenticated: true,
-            login: response.data.login,
-            timestamp: Date.now()
-          }));
-        } else {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      } catch (error) {
-        localStorage.removeItem("gitrec_auth_state");
-        this.isAuthenticated = false;
-      }
-    },
     goTo(path) {
       this.drawer = false;
       if (this.$route.path !== path) {
@@ -230,21 +204,11 @@ export default {
     topicLabel(topic) {
       return topic.replace("-", " ").toUpperCase();
     },
-    async logout() {
-      try {
-        await axios.get("/api/logout");
-        localStorage.removeItem("gitrec_auth_state");
-        this.isAuthenticated = false;
-        this.$router.push("/");
-      } catch (error) {
-        console.error("Logout failed:", error);
-      }
-    },
   },
 };
 </script>
 
-<style>
+<style scoped>
 .route-title {
   font-weight: 300;
   font-size: 1.2rem;
@@ -259,4 +223,8 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
+
+.extensions-list-group :deep(.v-list-group__items) {
+  --indent-padding: 0px;
+}
 </style>
diff --git a/frontend/src/mixins/authMixin.js b/frontend/src/mixins/authMixin.js
new file mode 100644
index 0000000..706f57d
--- /dev/null
+++ b/frontend/src/mixins/authMixin.js
@@ -0,0 +1,79 @@
+import axios from 'axios';
+
+const AUTH_CACHE_KEY = 'gitrec_auth_state';
+const AUTH_CACHE_EXPIRY_MS = 5 * 60 * 1000; // 5 minutes
+
+export default {
+  data() {
+    return {
+      isAuthenticated: false,
+      authLogin: null,
+    };
+  },
+  methods: {
+    async checkAuth() {
+      const cached = localStorage.getItem(AUTH_CACHE_KEY);
+      if (cached) {
+        try {
+          const data = JSON.parse(cached);
+          if (Date.now() - data.timestamp < AUTH_CACHE_EXPIRY_MS) {
+            this.isAuthenticated = data.is_authenticated;
+            this.authLogin = data.login;
+            return;
+          }
+        } catch {
+          localStorage.removeItem(AUTH_CACHE_KEY);
+        }
+      }
+
+      try {
+        const response = await axios.get('/api/me', { withCredentials: true });
+        this.isAuthenticated = response.data.is_authenticated;
+        this.authLogin = response.data.login;
+        if (this.isAuthenticated) {
+          localStorage.setItem(AUTH_CACHE_KEY, JSON.stringify({
+            is_authenticated: true,
+            login: response.data.login,
+            timestamp: Date.now()
+          }));
+          this.dispatchAuthChange(true);
+        } else {
+          localStorage.removeItem(AUTH_CACHE_KEY);
+        }
+      } catch {
+        this.isAuthenticated = false;
+        this.authLogin = null;
+        localStorage.removeItem(AUTH_CACHE_KEY);
+      }
+    },
+    async logout() {
+      try {
+        await axios.get('/api/logout', { withCredentials: true });
+      } catch (error) {
+        console.error('Logout failed:', error);
+      }
+      localStorage.removeItem(AUTH_CACHE_KEY);
+      this.isAuthenticated = false;
+      this.authLogin = null;
+      this.dispatchAuthChange(false);
+    },
+    dispatchAuthChange(authenticated) {
+      window.dispatchEvent(new CustomEvent('gitrec-auth-change', {
+        detail: { authenticated }
+      }));
+    },
+    handleAuthChange(event) {
+      this.isAuthenticated = event.detail.authenticated;
+      if (!event.detail.authenticated) {
+        this.authLogin = null;
+      }
+    },
+  },
+  mounted() {
+    this.checkAuth();
+    window.addEventListener('gitrec-auth-change', this.handleAuthChange);
+  },
+  beforeUnmount() {
+    window.removeEventListener('gitrec-auth-change', this.handleAuthChange);
+  },
+};
diff --git a/frontend/src/views/Favorites.vue b/frontend/src/views/Favorites.vue
index 9839bb1..ebf468c 100644
--- a/frontend/src/views/Favorites.vue
+++ b/frontend/src/views/Favorites.vue
@@ -1,33 +1,46 @@
 <template>
-  <v-container>
-    <Preloader v-if="feedbacks == null" />
-    <div v-else>
-      <v-list class="feedback-list" lines="one">
-        <v-list-item
-          v-for="feedback in pageFeedbacks"
-          :key="feedback.FeedbackType + feedback.ItemId"
-          :href="'https://github.com/' + feedback.ItemId"
-          target="_blank"
-          rounded="lg"
-          class="feedback-item"
-        >
-          <template #prepend>
-            <v-icon size="18" class="feedback-icon">{{ feedbackIcon(feedback.FeedbackType) }}</v-icon>
-          </template>
+  <div>
+    <v-alert v-if="feedbacks != null && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
+      <Preloader v-if="feedbacks == null" />
+      <div v-else>
+        <v-list class="feedback-list" lines="one">
+          <v-list-item
+            v-for="feedback in pageFeedbacks"
+            :key="feedback.FeedbackType + feedback.ItemId"
+            :href="'https://github.com/' + feedback.ItemId"
+            target="_blank"
+            rounded="lg"
+            class="feedback-item"
+          >
+            <template #prepend>
+              <v-icon size="18" class="feedback-icon">{{ feedbackIcon(feedback.FeedbackType) }}</v-icon>
+            </template>
 
-          <v-list-item-title>{{ feedback.ItemId }}</v-list-item-title>
+            <v-list-item-title>{{ feedback.ItemId }}</v-list-item-title>
 
-          <template #append>
-            <span class="feedback-time">{{ formatTime(feedback.Timestamp) }}</span>
-          </template>
-        </v-list-item>
-      </v-list>
+            <template #append>
+              <span class="feedback-time">{{ formatTime(feedback.Timestamp) }}</span>
+            </template>
+          </v-list-item>
+        </v-list>
 
-      <div v-if="numPage > 1" class="d-flex justify-center my-4">
-        <v-pagination v-model="currentPage" :length="numPage" :total-visible="7" color="primary" />
+        <div v-if="numPage > 1" class="pagination-wrapper d-flex justify-center my-4">
+          <v-pagination
+            v-model="currentPage"
+            :length="numPage"
+            :total-visible="paginationVisibleCount"
+            color="primary"
+          />
+        </div>
       </div>
-    </div>
-  </v-container>
+    </v-container>
+  </div>
 </template>
 
 <script>
@@ -45,14 +58,34 @@ export default {
     return {
       currentPage: 1,
       feedbacks: null,
+      error: null,
+      viewportWidth: typeof window === "undefined" ? 1024 : window.innerWidth,
     };
   },
   mounted() {
-    axios.get("/api/favorites", { withCredentials: true }).then((response) => {
-      this.feedbacks = response.data;
-    });
+    window.addEventListener("resize", this.handleResize);
+    this.fetchFavorites();
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
   },
   methods: {
+    handleResize() {
+      this.viewportWidth = window.innerWidth;
+    },
+    fetchFavorites() {
+      this.error = null;
+      this.feedbacks = null;
+      axios
+        .get("/api/favorites", { withCredentials: true })
+        .then((response) => {
+          this.feedbacks = response.data;
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to fetch favorites.";
+          this.feedbacks = [];
+        });
+    },
     formatTime(timestamp) {
       return timeago.format(timestamp);
     },
@@ -61,6 +94,15 @@ export default {
     },
   },
   computed: {
+    paginationVisibleCount: function () {
+      if (this.viewportWidth < 420) {
+        return 3;
+      }
+      if (this.viewportWidth < 600) {
+        return 5;
+      }
+      return 7;
+    },
     numPage: function () {
       if (this.feedbacks == null) {
         return 0;
@@ -78,6 +120,11 @@ export default {
 </script>
 
 <style>
+.login-alert__text {
+  white-space: normal;
+  line-height: 1.5;
+}
+
 .feedback-icon {
   font-size: 16px;
   vertical-align: middle;
@@ -92,4 +139,9 @@ export default {
   color: #6b7280;
   font-size: 0.875rem;
 }
+
+.pagination-wrapper {
+  max-width: 100%;
+  overflow-x: auto;
+}
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d9ddf4d..d1f602b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -2,7 +2,7 @@
   <div>
     <!-- Login prompt for anonymous users -->
     <v-alert
-      v-if="authChecked && !isAuthenticated"
+      v-if="authChecked && !isAuthenticated && !error"
       type="info"
       variant="tonal"
       class="login-alert"
@@ -17,7 +17,13 @@
       </div>
     </v-alert>
 
-    <v-container>
+    <v-alert v-if="!loading && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
       <div v-if="full_name" class="repo-header">
         <a :href="html_url" target="_blank" class="repo-link">
           <v-icon size="18">mdi-link-variant</v-icon>
@@ -30,33 +36,41 @@
           </span>
           <a :href="html_url + '/stargazers'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-star</v-icon>
-            {{ stargazers_count }}
+            {{ formatNumber(stargazers_count) }}
           </a>
           <a :href="html_url + '/network/members'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-source-fork</v-icon>
-            {{ forks_count }}
+            {{ formatNumber(forks_count) }}
           </a>
           <a :href="html_url + '/watchers'" target="_blank" class="repo-meta-link">
             <v-icon size="16">mdi-eye</v-icon>
-            {{ subscribers_count }}
+            {{ formatNumber(subscribers_count) }}
           </a>
         </div>
       </div>
-      <Preloader v-if="readme == null" />
-      <article v-else class="markdown-body" v-html="readme"></article>
+      <Preloader v-if="loading" />
+      <article v-else-if="!error && readme" class="markdown-body" v-html="readme"></article>
     </v-container>
 
     <v-btn
       icon
       size="large"
       :color="like_pressed ? 'red' : 'primary'"
+      :loading="likeLoading"
       class="fab-btn fab-like"
       @click="like"
     >
       <v-icon>{{ like_pressed ? "mdi-heart" : "mdi-heart-outline" }}</v-icon>
     </v-btn>
 
-    <v-btn icon size="large" color="primary" class="fab-btn fab-next" @click="next">
+    <v-btn 
+      icon 
+      size="large" 
+      color="primary" 
+      :loading="nextLoading"
+      class="fab-btn fab-next" 
+      @click="next"
+    >
       <v-icon>mdi-play</v-icon>
     </v-btn>
   </div>
@@ -66,100 +80,80 @@
 <script>
 import Preloader from "../components/Preloader.vue";
 import axios from "axios";
+import authMixin from "../mixins/authMixin";
 
 export default {
   components: {
     Preloader
   },
+  mixins: [authMixin],
   data() {
     return {
       like_pressed: false,
-      isAuthenticated: false,
+      likeLoading: false,
+      nextLoading: false,
+      loading: false,
       authChecked: false,
       item_id: null,
       full_name: "",
       html_url: null,
-      stargazers_url: null,
-      forks_url: null,
       stargazers_count: 0,
       forks_count: 0,
       subscribers_count: 0,
       language: "",
       readme: null,
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
+      error: null,
       topic: "",
     };
   },
+  computed: {
+    topicPath() {
+      let path = this.topic;
+      if (path === "/cpp") {
+        path = "/c%2B%2B";
+      }
+      return path;
+    },
+  },
   watch: {
     $route() {
-      if (this.$route.params.topic != null) {
-        this.topic = "/" + this.$route.params.topic;
-      } else {
-        this.topic = "";
-      }
+      this.topic = this.$route.params.topic ? "/" + this.$route.params.topic : "";
       this.clearRepository();
       this.recommend();
     },
   },
   created() {
-    if (this.$route.params.topic != null) {
-      this.topic = "/" + this.$route.params.topic;
-    } else {
-      this.topic = "";
-    }
+    this.topic = this.$route.params.topic ? "/" + this.$route.params.topic : "";
     this.clearRepository();
   },
   async mounted() {
     await this.checkAuth();
+    this.authChecked = true;
     this.recommend();
   },
   methods: {
     goToLogin() {
       this.$router.push("/login");
     },
-    async checkAuth() {
-      const cached = localStorage.getItem("gitrec_auth_state");
-      if (cached) {
-        try {
-          const { is_authenticated, timestamp } = JSON.parse(cached);
-          if (Date.now() - timestamp < 5 * 60 * 1000) {
-            this.isAuthenticated = is_authenticated;
-            return;
-          }
-        } catch (error) {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      }
-      
-      try {
-        const response = await axios.get("/api/me", { withCredentials: true });
-        this.isAuthenticated = response.data.is_authenticated;
-        if (this.isAuthenticated) {
-          localStorage.setItem("gitrec_auth_state", JSON.stringify({
-            is_authenticated: true,
-            login: response.data.login,
-            timestamp: Date.now()
-          }));
-        } else {
-          localStorage.removeItem("gitrec_auth_state");
-        }
-      } catch (error) {
-        this.isAuthenticated = false;
-        localStorage.removeItem("gitrec_auth_state");
+    formatNumber(num) {
+      if (num >= 1000) {
+        return (num / 1000).toFixed(1) + "k";
       }
-      this.authChecked = true;
+      return num.toString();
     },
     recommend() {
-      let topic = this.topic;
-      if (topic == "/cpp") {
-        topic = "/c%2B%2B";
-      }
-      console.log("/api/repo" + topic);
-      axios
-        .get("/api/repo" + topic, { withCredentials: true })
+      this.error = null;
+      this.loading = true;
+      return axios
+        .get("/api/repo" + this.topicPath, { withCredentials: true })
         .then((response) => {
           this.setRepository(response.data);
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to fetch repository. Please try again.";
+        })
+        .finally(() => {
+          this.loading = false;
         });
     },
     setRepository(repo) {
@@ -176,6 +170,8 @@ export default {
       this.item_id = null;
       this.full_name = "";
       this.readme = null;
+      this.error = null;
+      this.loading = false;
       this.stargazers_count = 0;
       this.forks_count = 0;
       this.subscribers_count = 0;
@@ -187,30 +183,42 @@ export default {
         this.$router.push("/login");
         return;
       }
+      this.likeLoading = true;
       axios
-        .post("/api/like/" + this.item_id, { withCredentials: true })
+        .post("/api/like/" + this.item_id, null, { withCredentials: true })
         .then(() => {
           this.like_pressed = true;
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to like repository.";
+        })
+        .finally(() => {
+          this.likeLoading = false;
         });
     },
     next() {
+      if (!this.item_id) return;
+
+      this.nextLoading = true;
+      this.error = null;
       axios
-        .post("/api/read/" + this.item_id, { withCredentials: true })
+        .post("/api/read/" + this.item_id, null, { withCredentials: true })
         .then(() => {
-          // load next repo
           this.clearRepository();
-          axios
-            .get("/api/repo" + this.topic, { withCredentials: true })
-            .then((response) => {
-              this.setRepository(response.data);
-            });
+          return this.recommend();
+        })
+        .catch((error) => {
+          this.error = error.response?.data?.error || "Failed to fetch next repository.";
+        })
+        .finally(() => {
+          this.nextLoading = false;
         });
     },
   },
 };
 </script>
 
-<style>
+<style scoped>
 .login-alert {
   cursor: pointer;
 }
@@ -225,10 +233,7 @@ export default {
   min-width: 200px;
   max-width: 980px;
   margin: 0 auto;
-  padding-left: 45px;
-  padding-right: 45px;
-  padding-top: 20px;
-  padding-bottom: 45px;
+  padding: 20px 45px 45px;
 }
 
 @media (max-width: 767px) {
@@ -239,9 +244,7 @@ export default {
 }
 
 .repo-header {
-  padding-top: 10px;
-  padding-left: 45px;
-  padding-right: 45px;
+  padding: 10px 45px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -251,9 +254,7 @@ export default {
 
 @media (max-width: 767px) {
   .repo-header {
-    padding-top: 10px;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding: 10px 15px 0;
   }
 }
 
diff --git a/frontend/src/views/Trending.vue b/frontend/src/views/Trending.vue
index 4fb355e..e0825c3 100644
--- a/frontend/src/views/Trending.vue
+++ b/frontend/src/views/Trending.vue
@@ -1,9 +1,15 @@
 <template>
   <div>
-    <v-container>
+    <v-alert v-if="!loading && error" type="error" variant="tonal">
+      <div class="login-alert__text">
+        {{ error }}
+      </div>
+    </v-alert>
+
+    <v-container v-else>
       <Preloader v-if="loading" />
 
-      <v-list v-else class="repo-list" lines="one">
+      <v-list v-else-if="!error" class="repo-list" lines="one">
         <v-list-item
           v-for="repo in repos"
           :key="repo.id || repo.url || repo.title || repo.full_name"
@@ -97,6 +103,7 @@ export default {
       loading: true,
       repos: [],
       language: "",
+      error: null,
     };
   },
   computed: {
@@ -119,6 +126,8 @@ export default {
   methods: {
     fetchTrending() {
       this.loading = true;
+      this.error = null;
+      this.repos = [];
       
       if (this.isHackerNews) {
         // Fetch Hacker News stories with GitHub repos
@@ -136,10 +145,11 @@ export default {
           .get("/api/trending?" + params.toString(), { withCredentials: true })
           .then((response) => {
             this.repos = response.data;
-            this.loading = false;
           })
           .catch((error) => {
-            console.error("Error fetching trending:", error);
+            this.error = error.response?.data?.error || "Failed to fetch trending repositories.";
+          })
+          .finally(() => {
             this.loading = false;
           });
       }
@@ -149,10 +159,11 @@ export default {
         .get("/api/hackernews", { withCredentials: true })
         .then((response) => {
           this.repos = response.data;
-          this.loading = false;
         })
         .catch((error) => {
-          console.error("Error fetching Hacker News:", error);
+          this.error = error.response?.data?.error || "Failed to fetch Hacker News repositories.";
+        })
+        .finally(() => {
           this.loading = false;
         });
     },
@@ -232,6 +243,11 @@ export default {
 </script>
 
 <style>
+.login-alert__text {
+  white-space: normal;
+  line-height: 1.5;
+}
+
 .repo-list {
   padding: 0;
 }