diff --git a/db.json b/db.json
index 3d4ae94..ee46537 100644
--- a/db.json
+++ b/db.json
@@ -2,8 +2,8 @@
     "postId": 1,
     "id": 1,
     "name": "id labore ex et quam laborum",
-    "email": "Eliseo@gardner.biz",
-    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
+    "email": "பிரதமர் மோடி",
+    "body": "பிரதமர் மோடி ஜப்பானின் பிரதமர் கிஷிடாவை சந்தித்தார்"
   },
   {
     "postId": 1,
diff --git a/package-lock.json b/package-lock.json
index 4e55cb6..5fb868a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "infinite",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.14.1",
@@ -4193,6 +4194,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -20279,9 +20291,11 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -25709,6 +25723,13 @@
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "requires": {
         "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+        }
       }
     },
     "ansi-html": {
@@ -38173,9 +38194,11 @@
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
     },
     "type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "optional": true,
+      "peer": true
     },
     "type-is": {
       "version": "1.6.18",
diff --git a/public/index.html b/public/index.html
index a815dca..89f6541 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,8 +14,8 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    
-    <title>React App</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Noto+Sans:400,400i,700,700i" rel="stylesheet" /><link href="https://fonts.googleapis.com/earlyaccess/notosanstamil.css" rel="stylesheet" type="text/css" />
+    <title>Dinamalar Infinite Scroll App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.css b/src/App.css
index 74b5e05..b9e640c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,4 @@
+body{ font-family: 'Noto Sans Tamil', Roboto, sans-serif;}
 .App {
   text-align: center;
 }
@@ -24,9 +25,31 @@
   color: white;
 }
 
+.title a {
+  color: #3a3b39;
+  text-decoration: none;
+}
+.card-text{ color: #555;}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+.mt-2{ margin:0; padding: .5em 0; border-bottom: #ccc solid 1px; color: #555;}
+.title {
+  margin: 0;
+  font-size: 1.5rem;
+  text-decoration: none;
+  line-height: 1.4;
+  color: #3a3b39;
+}
+
+
 .App-link {
   color: #61dafb;
 }
+.imgfit{ width: 100%; margin-bottom: .5em;}
 
 @keyframes App-logo-spin {
   from {
diff --git a/src/App.js b/src/App.js
index 2035c75..2424478 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import Comment from "./components/Comment";
 import Loader from "./components/Loader";
 import EndMsg from "./components/EndMsg";
 
+
 function App() {
   const [items, setItems] = useState([]);
 
@@ -16,7 +17,7 @@ function App() {
   useEffect(() => {
     const getComments = async () => {
       const res = await fetch(
-        `https://jsonplaceholder.typicode.com/comments?_page=1&_limit=20`
+        `https://rss.dinamalar.com/internal/wnews.asp?id=31`
         // For json server use url below
         // `http://localhost:3004/comments?_page=1&_limit=20`
       );
@@ -29,7 +30,7 @@ function App() {
 
   const fetchComments = async () => {
     const res = await fetch(
-      `https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=20`
+      `https://rss.dinamalar.com/internal/wnews.asp?id=31`
       // For json server use url below
       // `http://localhost:3004/comments?_page=${page}&_limit=20`
     );
@@ -47,6 +48,9 @@ function App() {
     setpage(page + 1);
   };
   return (
+    <>
+   <h2 className="card-title text-center mt-2 h5"> Dinamalar Listing Page - Infinite Scroll </h2>
+
     <InfiniteScroll
       dataLength={items.length} //This is important field to render the next data
       next={fetchData}
@@ -57,11 +61,12 @@ function App() {
       <div className="container">
         <div className="row m-2">
           {items.map((item) => {
-            return <Comment key={item.id} item={item} />;
+            return <Comment key={item.guid} item={item} />;
           })}
         </div>
       </div>
     </InfiniteScroll>
+    </>
   );
 }
 
diff --git a/src/components/Comment.js b/src/components/Comment.js
index 88ddf53..afc634a 100644
--- a/src/components/Comment.js
+++ b/src/components/Comment.js
@@ -1,13 +1,20 @@
 
 
-function Comment({item: { id, email, body }}) {
+
+function Comment({item: { guid, title, description, permaLink, StoryImage }}) {
     return (
         <div className="col-sm-4 my-2" >
       <div className="card shadow-sm w-100" style={{ minHeight: 225 }}>
         <div className="card-body">
-          <h5 className="card-title text-center h2">Id : {id}</h5>
-          <h6 className="card-subtitle mb-2 text-muted text-center">{email}</h6>
-          <p className="card-text">{body}</p>
+          <h5 className="card-title text-left h4"> 
+          <a href={permaLink.web} className="title" target="_blank"> {title}</a>
+          </h5>
+        
+         <img className="imgfit" src={StoryImage}/>
+          <p className="card-text">{description}</p>
+          <hr/>
+          <p className="card-text text-center">Id No: {guid}</p>
+         
         </div>
       </div>
     </div>