diff --git a/backend/.idea/modules.xml b/backend/.idea/modules.xml
new file mode 100644
index 0000000..fced374
--- /dev/null
+++ b/backend/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$USER_HOME$/.cache/JetBrains/Fleet/backend/rangolio.17njcr71mpdhh27o09j2/projects/backend.2429c98e/external_build_system/modules/backend-fleet.iml" filepath="$USER_HOME$/.cache/JetBrains/Fleet/backend/rangolio.17njcr71mpdhh27o09j2/projects/backend.2429c98e/external_build_system/modules/backend-fleet.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py b/backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py
new file mode 100644
index 0000000..f3dc570
--- /dev/null
+++ b/backend/apimanager/migrations/0012_userdata_built_with_alter_userdata_dark_theme_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0.6 on 2024-06-03 11:22
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apimanager', '0011_remove_blog_id_remove_category_id_alter_blog_blog_id_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userdata',
+            name='built_with',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AlterField(
+            model_name='userdata',
+            name='dark_theme',
+            field=models.CharField(default='{"theme": "Dark Mode","background": "bg-dark","textColor": "text-white","linkBackground": "bg-light","linkTextColor": "text-black","captionColor": "#8a8a8a","fontAwesomeIcon": "faSun","borderColor": "secondary","buttonColor": "light","navBar": {"navBarTheme": "navbar-dark","background": "bg-secondary","buttonColor": "light"},"footer": {"background": "bg-secondary","text": "text-black"}}', max_length=1500),
+        ),
+        migrations.AlterField(
+            model_name='userdata',
+            name='light_theme',
+            field=models.CharField(default='{"theme": "Light Mode","background": "bg-light","textColor": "text-black","linkBackground": "bg-dark","linkTextColor": "text-white","captionColor": "#605f5f","fontAwesomeIcon": "faMoon","borderColor": "secondary","buttonColor": "dark","navBar": {"navBarTheme": "navbar-light","background": "bg-secondary","buttonColor": "light"},"footer": {"background": "bg-secondary","text": "text-white"}}', max_length=1500),
+        ),
+    ]
diff --git a/backend/apimanager/models.py b/backend/apimanager/models.py
index 7473bad..917f257 100644
--- a/backend/apimanager/models.py
+++ b/backend/apimanager/models.py
@@ -6,6 +6,7 @@ class UserData(models.Model):
 	name			= models.CharField(default=userdata["name"], null=False, blank=False, max_length=200)
 	intro_content	= models.CharField(default=userdata["intro_content"], null=False, blank=False, max_length=100000)
 	profile_photo 	= models.CharField(null=True, blank=True, max_length=500)
+	built_with 		= models.BooleanField(default=True)
 	default_theme	= models.CharField(default=userdata["default_theme"], null=False, blank=False, max_length=200)
 	dark_theme		= models.CharField(default=userdata["dark_theme"], null=False, blank=False, max_length=1500)
 	light_theme		= models.CharField(default=userdata["light_theme"], null=False, blank=False, max_length=1500)
diff --git a/backend/apimanager/serializers.py b/backend/apimanager/serializers.py
index 5aa03ab..47b1e12 100644
--- a/backend/apimanager/serializers.py
+++ b/backend/apimanager/serializers.py
@@ -13,6 +13,7 @@ class UserDataSerializer(serializers.ModelSerializer):
 			'name',
 			'intro_content',
 			'profile_photo',
+			'built_with'
 		]
 
 class ThemeDataSerializer(serializers.ModelSerializer):
diff --git a/frontend/index.html b/frontend/index.html
index 0c589ec..fb0b53b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/data/homepage/media/profile.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Rangolio</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index bb271a0..172eceb 100755
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -34,8 +34,10 @@ function App() {
   }
 
   useEffect(() => {
-    DataService.getData('shared/user-data').then( response =>
-    setUserData(response.data)
+    DataService.getData('shared/user-data').then( response =>{
+        setUserData(response.data)
+        document.title = response.data.name
+      }
     )
     DataService.getData('shared/theme-config').then( response =>{
         setThemeConfig(response.data)
diff --git a/frontend/src/AppEditable.jsx b/frontend/src/AppEditable.jsx
index 70ccb07..ea44892 100755
--- a/frontend/src/AppEditable.jsx
+++ b/frontend/src/AppEditable.jsx
@@ -49,8 +49,10 @@ function AppEditable() {
         setUserData({
           "name": responseData["name"],
           "introContent": responseData["intro_content"],
-          "profilePhoto": responseData["profile_photo"]
+          "profilePhoto": responseData["profile_photo"],
+          "builtWith": responseData["built_with"]
         })
+        document.title = responseData.name
       }
     )
     EditableDataService.getData('/data/shared/theme-config/').then( response =>{
diff --git a/frontend/src/components/editable/blog-list.jsx b/frontend/src/components/editable/blog-list.jsx
index 0b3e2de..7545e58 100755
--- a/frontend/src/components/editable/blog-list.jsx
+++ b/frontend/src/components/editable/blog-list.jsx
@@ -30,12 +30,12 @@ function BlogList(props) {
   const ThemeConfig = props.ThemeConfig;
 
   const [categoryData, setCategoryData] = useState('loading');
+  const [featuredBlogData, setFeaturedBlogData] = useState(null);
 
   const loadBlogs = () => {
     EditableDataService.getData(`/data/category/${categoryID}/`).then(response => {
         let responseData = response.data
         let blogMetadata = []
-        console.log(responseData)
         let localCategoryData = {
           "id": responseData["category_id"],
           "name": responseData["name"],
@@ -46,17 +46,18 @@ function BlogList(props) {
           "blogMetadata": responseData["blog_metadata"]
         }
         for (let eachBlog of responseData["blog_metadata"]){
-        blogMetadata.push({
-        "id": eachBlog["blog_id"],
-        "name": eachBlog["name"],
-        "description": eachBlog["description"],
-        "tagLine": eachBlog["tagline"],
-        "coverImage": eachBlog["cover_image"],
-        "parentCategory": eachBlog["parent_category"]
-        })
+          blogMetadata.push({
+          "id": eachBlog["blog_id"],
+          "name": eachBlog["name"],
+          "description": eachBlog["description"],
+          "tagLine": eachBlog["tagline"],
+          "coverImage": eachBlog["cover_image"],
+          "parentCategory": eachBlog["parent_category"]
+          })
         }
         localCategoryData.blogMetadata = blogMetadata
         setCategoryData(localCategoryData)
+        setFeaturedBlogData(blogMetadata.find(blog => blog.id === localCategoryData.featuredBlog))
       }
       );
   }
@@ -107,25 +108,41 @@ return (
             </CardBody>
           </Card>
         </div>
-        <div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
-          <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
+        <div className="container">
+          {
+            featuredBlogData ?
+            <CardListViewer
+              key={featuredBlogData.id}
+              totalItems={featuredBlogData === 'nodata' ? 0 : 1}
+              cardType={"longCard"}
+              resourceType={"blog"}
+              textColor={ThemeConfig[GlobalTheme].textColor}
+              bgColor={ThemeConfig[GlobalTheme].background}
+              borderColor={ThemeConfig[GlobalTheme].borderColor}
+              itemObject={featuredBlogData}
+            /> : ''
+          }
+          <div className="row">
             {categoryData === 'loading' ? <Spinner /> :
               categoryData.blogMetadata.map((item, index) => (
-                <CardListViewer
-                  key={item.blog_id} // Ensuring keys are unique and correct
-                  totalItems={categoryData.blogMetadata.length}
-                  featuredBlog={categoryData.featuredBlog}
-                  updateFeaturedBlog={updateFeaturedBlog}
-                  cardType={"smallCard"}
-                  resourceType={"blog"}
-                  textColor={ThemeConfig[GlobalTheme].textColor}
-                  bgColor={ThemeConfig[GlobalTheme].background}
-                  borderColor={ThemeConfig[GlobalTheme].borderColor}
-                  itemObject={item}
-                />
+                <div className="col-3" key={item.blog_id}>
+                  <div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
+                    <CardListViewer
+                      totalItems={categoryData.blogMetadata.length}
+                      featuredBlog={categoryData.featuredBlog}
+                      updateFeaturedBlog={updateFeaturedBlog}
+                      cardType={"smallCard"}
+                      resourceType={"blog"}
+                      textColor={ThemeConfig[GlobalTheme].textColor}
+                      bgColor={ThemeConfig[GlobalTheme].background}
+                      borderColor={ThemeConfig[GlobalTheme].borderColor}
+                      itemObject={item}
+                    />
+                  </div>
+                </div>
               ))
             }
-          </h3>
+          </div>
         </div>
       </Col>
     </Row>
diff --git a/frontend/src/components/editable/blog.jsx b/frontend/src/components/editable/blog.jsx
index 23b3304..aaa1a90 100755
--- a/frontend/src/components/editable/blog.jsx
+++ b/frontend/src/components/editable/blog.jsx
@@ -127,14 +127,14 @@ function Blog(props) {
               color={ThemeConfig[GlobalTheme].buttonColor}
               onClick={() => toggleFileModal()}
             >
-              Set Profile Photo
+              Set Cover Image
             </Button>
             <Button
               outline
               color={ThemeConfig[GlobalTheme].buttonColor}
               onClick={() => setCoverImage('-')}
             >
-              Remove Profile Photo
+              Remove Cover Image
             </Button>
           </ButtonGroup>
           <InputGroup className="mb-3">
diff --git a/frontend/src/components/editable/shared/footer.jsx b/frontend/src/components/editable/shared/footer.jsx
index 01fc953..ad6555d 100755
--- a/frontend/src/components/editable/shared/footer.jsx
+++ b/frontend/src/components/editable/shared/footer.jsx
@@ -80,7 +80,9 @@ const Footer = (props) => {
             <div className="blogContent text-center text-md-left mt-3">
               {new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a>
               <br />
-              Built with <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a>
+              <div className='m-2'>
+                { UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""}
+              </div>
             </div>
           </Col>
         </Row>
diff --git a/frontend/src/components/viewable/blog-list.jsx b/frontend/src/components/viewable/blog-list.jsx
index e7fb025..330f5c4 100755
--- a/frontend/src/components/viewable/blog-list.jsx
+++ b/frontend/src/components/viewable/blog-list.jsx
@@ -34,16 +34,9 @@ function BlogList(props) {
   
   useEffect(() => {
     DataService.getData(`category/${categoryID}/category-data`).then(response =>{
-      setCategoryData(response.data);
-      console.log(response.data)
-      if (response.data.featuredBlog){
-        DataService.getData(`blog/${response.data.featuredBlog}/blog-data`).then(response =>
-          setFeaturedBlogData(response.data)
-        );
+        setCategoryData(response.data);
+        setFeaturedBlogData(response.data.blogMetadata.find(blog => blog.id === response.data.featuredBlog))
       }
-      else
-        setFeaturedBlogData("nodata")
-    }
     );
   }, [categoryID]);
 
@@ -63,38 +56,39 @@ function BlogList(props) {
               </CardBody>
             </Card>
             </div>
-            <div className="" style={{ width: '70%', margin: 'auto', display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
-            <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
-            {`Featured`}
-            </h3>
-            {
-              featuredBlogData === 'loading' ? <Spinner /> :
-              <CardListViewer
-                key={featuredBlogData.id}
-                totalItems={featuredBlogData === 'nodata' ? 0 : 1}
-                cardType={"longCard"}
-                resourceType={"blog"}
-                textColor={ThemeConfig[GlobalTheme].textColor}
-                bgColor={ThemeConfig[GlobalTheme].background}
-                borderColor={ThemeConfig[GlobalTheme].borderColor}
-                itemObject={featuredBlogData}
-              />
-            }
-            {
-              categoryData === 'loading' ? <Spinner /> :
-              categoryData.blogMetadata.map((item, index) => (
+            <div className="container">
+              {
+                featuredBlogData ?
                 <CardListViewer
-                  key={item.id}
-                  totalItems={categoryData.blogMetadata.length} 
-                  cardType={"smallCard"} 
+                  key={featuredBlogData.id}
+                  totalItems={featuredBlogData === 'nodata' ? 0 : 1}
+                  cardType={"longCard"}
                   resourceType={"blog"}
-                  textColor={ThemeConfig[GlobalTheme].textColor} 
-                  bgColor={ThemeConfig[GlobalTheme].background} 
+                  textColor={ThemeConfig[GlobalTheme].textColor}
+                  bgColor={ThemeConfig[GlobalTheme].background}
                   borderColor={ThemeConfig[GlobalTheme].borderColor}
-                  itemObject={item}
-                />
-              ))
-            }
+                  itemObject={featuredBlogData}
+                /> : ''
+              }
+              <div className="row">
+                {categoryData === 'loading' ? <Spinner /> :
+                  categoryData.blogMetadata.map((item, index) => (
+                    <div className="col-3" key={item.id}>
+                      <div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}>
+                        <CardListViewer
+                          totalItems={categoryData.blogMetadata.length}
+                          cardType={"smallCard"}
+                          resourceType={"blog"}
+                          textColor={ThemeConfig[GlobalTheme].textColor}
+                          bgColor={ThemeConfig[GlobalTheme].background}
+                          borderColor={ThemeConfig[GlobalTheme].borderColor}
+                          itemObject={item}
+                        />
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
             </div>
           </Col>
         </Row>
diff --git a/frontend/src/components/viewable/shared/footer.jsx b/frontend/src/components/viewable/shared/footer.jsx
index 9ddab27..147752e 100755
--- a/frontend/src/components/viewable/shared/footer.jsx
+++ b/frontend/src/components/viewable/shared/footer.jsx
@@ -23,7 +23,9 @@ const Footer = (props) => {
             <div className="blogContent text-center text-md-left mt-3">
               {new Date().getFullYear()}, <a className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="/">{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }</a>
               <br />
-              { UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""}
+              <div className='m-2'>
+                { UserData.builtWith ? <span>Built with <a target="_blank" className={`${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`} href="https://github.com/barunespadhy/rangolio">Rangolio</a></span>:""}
+              </div>
             </div>
           </Col>
         </Row>