diff --git a/vue/index.html b/vue/index.html
index 99f583a..891c171 100644
--- a/vue/index.html
+++ b/vue/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RSS-Reader</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>
diff --git a/vue/src/App.vue b/vue/src/App.vue
index 15c3fb5..7c0a0ed 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -1,22 +1,17 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/feeds">Feeds</RouterLink>
-      </nav>
-    </div>
-  </header>
+  <!-- <header> -->
+  <!--   <div class="wrapper"> -->
+  <!--     <nav> -->
+  <!--       <RouterLink to="/">Home</RouterLink> -->
+  <!--       <RouterLink to="/about">About</RouterLink> -->
+  <!--       <RouterLink to="/feeds">Feeds</RouterLink> -->
+  <!--     </nav> -->
+  <!--   </div> -->
+  <!-- </header> -->
 
   <RouterView />
 </template>
@@ -59,7 +54,6 @@ nav a:first-of-type {
 
 @media (min-width: 1024px) {
   header {
-    display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
@@ -68,11 +62,6 @@ nav a:first-of-type {
     margin: 0 2rem 0 0;
   }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
 
   nav {
     text-align: left;
diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
index 656b1fa..08912f8 100644
--- a/vue/src/assets/main.css
+++ b/vue/src/assets/main.css
@@ -31,15 +31,3 @@ a,
   }
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue
index fbdf732..8157c6f 100644
--- a/vue/src/components/RssFeeds.vue
+++ b/vue/src/components/RssFeeds.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
 
@@ -27,16 +27,6 @@ async function getReadable(feed, index) {
     console.error('Error fetching data:', error)
     showMessageForXSeconds(error, 5)
   }
-  // try {
-  //   const response = await fetch(feed.url);
-  //   const html = await response.text();
-  //   const doc = new DOMParser().parseFromString(html, 'text/html');
-  //   const article = new Readability(doc).parse();
-  //   feeds.value[index].content = article.content;
-  // } catch (error) {
-  //   console.error(error);
-  //   showMessageForXSeconds(error, 5);
-  // }
 }
 
 function showMessageForXSeconds(text, seconds) {
@@ -60,10 +50,18 @@ const fetchData = async () => {
       }
     });
     feeds.value = response.data.feeds[0].items;
+    await nextTick();
+    setupIntersectionObserver();
   } catch (error) {
     console.error('Error fetching data:', error)
     showMessageForXSeconds(error, 5)
   }
+  //  const observedDivs = document.querySelectorAll(".observe");
+  //  if (observedDivs.length > 0) {
+  //    observedDivs.forEach(observedDiv => {
+  //      observer.observe(observedDiv);
+  //    });
+  //  }
 };
 
 async function sync() {
@@ -88,20 +86,53 @@ async function sync() {
   }
 }
 
+let observer; // Declare observer outside the setup function
+
+function setupIntersectionObserver() {
+  observer = new IntersectionObserver(handleIntersection, {
+    root: null, // Use the viewport as the root
+    rootMargin: '0px',
+    threshold: 0.5, // Fire the callback when at least 50% of the element is visible
+  });
+
+  const observedDivs = document.querySelectorAll(".observe");
+  if (observedDivs.length > 0) {
+    observedDivs.forEach(observedDiv => {
+      observer.observe(observedDiv);
+    });
+  }
+}
+
+function handleIntersection(entries) {
+  // The callback function for when the target element enters or exits the viewport
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      // Element is in the viewport
+      console.log('Element is in sight');
+    } else {
+      // Element is out of sight
+      console.log('Element is out of sight');
+
+      // You can call your function here
+
+    }
+  });
+}
+
+
 onMounted(() => {
   fetchData();
 });
-
 </script>
 
 <template>
   <div>
     <h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button>
     <div v-if="showMessage" class="message">{{ message }}</div>
-    <div id='aricle'>
+    <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-for="(feed, index) in feeds">
-        <div v-bind:id="'article_' + index">
+        <div v-bind:id="'article_' + index" class="observe">
           <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
           <p v-html='feed.content'></p>
         </div>
