diff --git a/src/Redux/slice/blogsSlice.js b/src/Redux/slice/blogsSlice.js
new file mode 100644
index 0000000..407adc9
--- /dev/null
+++ b/src/Redux/slice/blogsSlice.js
@@ -0,0 +1,14 @@
+// apiSlice.js
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const blogApi = createApi({
+    reducerPath: 'blog',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getBlog: builder.query({
+            query: () => 'blog/active',
+        }),
+    }),
+});
+
+export const { useGetBlogQuery } = blogApi;
\ No newline at end of file
diff --git a/src/Redux/slice/communityBannerSlice.js b/src/Redux/slice/communityBannerSlice.js
new file mode 100644
index 0000000..b35e922
--- /dev/null
+++ b/src/Redux/slice/communityBannerSlice.js
@@ -0,0 +1,14 @@
+// apiSlice.js
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const communitiesBanner = createApi({
+    reducerPath: 'communitiesBanner',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getCommunitiesBanner: builder.query({
+            query: () => 'admin/main-community',
+        }),
+    }),
+});
+
+export const { useGetCommunitiesBannerQuery } = communitiesBanner;
\ No newline at end of file
diff --git a/src/Redux/slice/communitySlice.js b/src/Redux/slice/communitySlice.js
index 3c85420..e8a22f2 100644
--- a/src/Redux/slice/communitySlice.js
+++ b/src/Redux/slice/communitySlice.js
@@ -3,10 +3,10 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 export const api = createApi({
     reducerPath: 'communities',
-    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/admin/' }),
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
     endpoints: (builder) => ({
         getCommunities: builder.query({
-            query: () => 'community',
+            query: () => 'community/active',
         }),
     }),
 });
diff --git a/src/Redux/slice/newsSlice.js b/src/Redux/slice/newsSlice.js
new file mode 100644
index 0000000..b813cd7
--- /dev/null
+++ b/src/Redux/slice/newsSlice.js
@@ -0,0 +1,13 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const newsApi = createApi({
+    reducerPath: 'news',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getNews: builder.query({
+            query: () => 'admin/news',
+        }),
+    }),
+});
+
+export const { useGetNewsQuery } = newsApi;
\ No newline at end of file
diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js
index 3a9dfa1..1ca517c 100644
--- a/src/Redux/store/store.js
+++ b/src/Redux/store/store.js
@@ -1,12 +1,23 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { api } from '../slice/communitySlice';
+import { blogApi } from '../slice/blogsSlice';
+import { communitiesBanner } from '../slice/communityBannerSlice';
+import { newsApi } from '../slice/newsSlice';
 
 const store = configureStore({
     reducer: {
         [api.reducerPath]: api.reducer,
+        [blogApi.reducerPath]: blogApi.reducer,
+        [communitiesBanner.reducerPath]: communitiesBanner.reducer,
+        [newsApi.reducerPath]: newsApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
-        getDefaultMiddleware().concat(api.middleware),
+        getDefaultMiddleware().concat(
+            api.middleware,
+            blogApi.middleware,
+            communitiesBanner.middleware,
+            newsApi.middleware
+        ), // Add blogApi.middleware here
 });
 
 export default store;
diff --git a/src/components/BlogPost/BlogPost.jsx b/src/components/BlogPost/BlogPost.jsx
new file mode 100644
index 0000000..5a10785
--- /dev/null
+++ b/src/components/BlogPost/BlogPost.jsx
@@ -0,0 +1,296 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable no-unused-vars */
+import React, { useEffect } from "react";
+import { Box, Text, Image } from "@chakra-ui/react";
+import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
+import Chip from "../Chip/Chip";
+import Footer from "../Footer/Footer";
+import { ChevronRightIcon } from "@chakra-ui/icons";
+import profile from "../../assets/images/profile.png";
+import x from "../../assets/images/x.png";
+import linked from "../../assets/images/linked.png";
+import github from "../../assets/images/github.png";
+import tele from "../../assets/images/tele.png";
+import reddit from "../../assets/images/reddit.png";
+import fb from "../../assets/images/fb.png";
+import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
+import { Link, useParams } from "react-router-dom";
+import NotFound from "../../pages/NotFound";
+
+const BlogPost = () => {
+  const { title_slug } = useParams();
+  const { data, error, isLoading } = useGetBlogQuery();
+  const blogPosts = data?.data;
+  console.log(blogPosts);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  const matchingBlogPost = blogPosts
+    ? blogPosts.find((item) => item.title_slug === title_slug)
+    : null;
+
+  console.log(matchingBlogPost);
+
+  return (
+    <>
+      {matchingBlogPost ? (
+        <Box
+          bg="#000000"
+          height={"auto"}
+          display={"flex"}
+          gap={7}
+          justifyContent={"center"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          color="white"
+          key={matchingBlogPost.id}
+        >
+          <Box
+            bg="#000000"
+            minHeight={"50vh"}
+            width={"70vw"}
+            display={"flex"}
+            gap={5}
+            marginTop={10}
+            justifyContent={"end"}
+            alignItems={"center"}
+            flexDirection={"column"}
+            color="white"
+            sx={{
+              "@media (max-width: 600px)": {
+                minHeight: "inherit",
+                width: "100vw",
+                marginTop: "6rem",
+              },
+            }}
+          >
+            <Text
+              textAlign={"center"}
+              className="rubix-fw-600"
+              fontSize={"40px"}
+              fontFamily={"Mona Sans"}
+              color={"#fff"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "28px",
+                  lineHeight: "45px",
+                  padding: "0px 1rem",
+                },
+              }}
+            >
+              {matchingBlogPost.title}
+            </Text>
+
+            <Text
+              textAlign={"center"}
+              className="rubix-text-xsmall rubix-fw-500"
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "35px",
+                },
+              }}
+            >
+              {matchingBlogPost.category.blog_category}
+              {(function () {
+                const createdAtDate = new Date(matchingBlogPost.createdAt);
+                const formattedDate = createdAtDate.toLocaleDateString(
+                  "en-GB",
+                  {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "2-digit",
+                  }
+                );
+                return (
+                  <Text
+                    as={"span"}
+                    textAlign={"center"}
+                    className="rubix-text-xsmall rubix-fw-500"
+                    marginLeft={"10px"}
+                    sx={{
+                      "@media (max-width: 600px)": {
+                        fontSize: "35px",
+                      },
+                    }}
+                  >
+                    {formattedDate}
+                  </Text>
+                );
+              })()}
+            </Text>
+
+            <Box display={"flex"} gap={3} textAlign={"center"}>
+              <Avatar
+                size="lg"
+                name="Dan Abrahmov"
+                src={`https://rubix.betadelivery.com/${matchingBlogPost.profile_image}`}
+              />
+
+              <Box
+                textAlign={"start"}
+                display={"flex"}
+                flexDirection={"column"}
+                alignItems={"start"}
+                justifyContent={"center"}
+                className="rubix-text-xsmall rubix-fw-500"
+              >
+                <Text>{matchingBlogPost.author_name}</Text>
+                <Text>{matchingBlogPost.author_designation}</Text>
+              </Box>
+            </Box>
+          </Box>
+          {/* ========[ Banner ]======= */}
+          <Box
+            height={"70vh"}
+            width={"85vw"}
+            backgroundImage={`url(https://rubix.betadelivery.com/${matchingBlogPost.content_image_large})`}
+            backgroundRepeat={"no-repeat"}
+            backgroundSize={"cover"}
+            position="relative"
+            sx={{
+              "@media (max-width: 600px)": {
+                height: "215px",
+                width: "100%",
+              },
+            }}
+          >
+            <Box
+              position="absolute"
+              top={0}
+              left={0}
+              width="100%"
+              height="100%"
+              backgroundColor="rgba(0, 0, 0, 0.5)"
+            />
+          </Box>
+
+          <Box
+            bg="#000000"
+            width={"85vw"}
+            height={"auto"}
+            display={"flex"}
+            pb={"60px"}
+            gap={5}
+            justifyContent={"center"}
+            alignItems={"center"}
+            flexDirection={"column"}
+            color="white"
+            position={"relative"}
+            sx={{
+              "@media (max-width: 600px)": {
+                display: "block",
+                top: "inherit",
+              },
+            }}
+          >
+            <Box
+              position={"absolute"}
+              top={0}
+              left={0}
+              display={"flex"}
+              flexDirection={"column"}
+              alignItems={"center"}
+              gap={2}
+              sx={{
+                "@media (max-width: 600px)": {
+                  bottom: "0px",
+                  top: "inherit",
+                  display: "block",
+                  width: "100%",
+                  marginBottom: "20px",
+                  marginTop: "20px",
+                },
+              }}
+            >
+              <Text
+                className="rubix-text-xsmall"
+                sx={{
+                  "@media (max-width: 600px)": {
+                    marginBottom: "15px",
+                  },
+                }}
+              >
+                Share
+              </Text>
+
+              <Text
+                sx={{
+                  "@media (max-width: 600px)": {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "60%",
+                  },
+                }}
+              >
+                <Link to="https://t.me/rubixblockchain" target="_blank">
+                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
+                </Link>
+                <Link to="https://twitter.com/rubixchain" target="_blank">
+                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
+                </Link>
+                <Link to="https://www.facebook.com/RubixChain" target="_blank">
+                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
+                </Link>
+                <Link
+                  to="https://www.linkedin.com/company/rubixnet/"
+                  target="_blank"
+                >
+                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
+                </Link>
+              </Text>
+            </Box>
+            <Box
+              bg="#000000"
+              width={"68vw"}
+              height={"auto"}
+              display={"flex"}
+              flexDirection={"column"}
+              gap={5}
+              justifyContent={"start"}
+              color="white"
+              sx={{
+                "@media (max-width: 600px)": {
+                  width: "100%",
+                },
+              }}
+            >
+              <Box display={"flex"} gap={5} justifyContent={"start"}>
+                {matchingBlogPost.tags.map((tag, index) => (
+                  <Chip key={index} title={tag.tag} />
+                ))}
+              </Box>
+
+              <Box
+                pt={5}
+                pb={5}
+                sx={{
+                  "@media (max-width: 600px)": {
+                    marginBottom: "3rem",
+                  },
+                }}
+              >
+                <Text
+                  pb={5}
+                  className="rubix-text-small"
+                  dangerouslySetInnerHTML={{ __html: matchingBlogPost.content }}
+                />
+                {/* {matchingBlogPost.content}
+                </Text> */}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      ) : (
+        <NotFound />
+      )}
+    </>
+  );
+};
+
+export default BlogPost;
diff --git a/src/components/Card/CommCard.jsx b/src/components/Card/CommCard.jsx
index aa2d615..81f7415 100644
--- a/src/components/Card/CommCard.jsx
+++ b/src/components/Card/CommCard.jsx
@@ -14,7 +14,8 @@ import linkedin from "../../assets/images/linkedin.png";
 import games from "../../assets/images/discot.png";
 import { Link } from "react-router-dom";
 
-const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
+const CommCard = ({ id, img, name, designation, description, link }) => {
+  console.log(img);
   const imgHeight = {
     minWidth: `214px`,
     height: "240px",
@@ -46,7 +47,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
             },
           }}
         >
-          <Image src={imageUrl} style={imgHeight} />
+          <Image src={img} style={imgHeight} />
         </Text>
         <Text
           position={"relative"}
@@ -88,7 +89,7 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, link }) => {
         {name}
       </Text>
       <Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
-        {jobTitle}
+        {designation}
       </Text>
       <Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
         {description}
diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx
index 275edf3..48600d8 100644
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -1,101 +1,142 @@
+/* eslint-disable react/jsx-key */
 /* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import cardimg from "../../assets/images/CardImg.png";
 import { Badge } from "@chakra-ui/react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
 
-const HomeCard = ({ key, date, text, link }) => {
-  return (   
-    <Box
-      backgroundImage={
-        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
-      }
-      padding={"1px"}
-      borderRadius={"8px"}
-      sx={{
-        "@media (max-width: 600px)": {
-          width: "90%",
-          margin: "0 auto",
-        },
-      }}
-    >
-      <Box
-        width={"420px"}
-        background={"#151419"}
-        borderRadius={"10px"}
-        minHeight={"420px"}
-        key={key}
-        sx={{
-          "@media (max-width: 600px)": {
-            width: "100%",
-            minHeight: "0",
-          },
-        }}
-      >
-        <Image src={cardimg} />
-        <Box padding={"1rem"}>
-          <Badge
-            backgroundColor={"#565263"}
-            color={"#fff"}
-            fontWeight={"400"}
-            borderRadius={"20px"}
-            padding={"3px 16px"}
-          >
-            INSIGHT
-          </Badge>
+const HomeCard = ({ cardkey, date, text, link }) => {
+  const { title_slug } = useParams();
+  const { data } = useGetBlogQuery();
+  const blogCards = data?.data;
 
-          <Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
-            {date}
-          </Text>
-          <Text
-            color={"#fff"}
-            fontSize={"20px"}
-            marginBottom={"20px"}
-            minHeight={"70px"}
-            maxWidth={"460px"}
-          >
-            {text}
-          </Text>
+  const matchingBlogPost = blogCards
+    ? blogCards.find((item) => item.title_slug === title_slug)
+    : null;
+
+  return (
+    <>
+      {blogCards?.map((card) => (
+        <Box
+          backgroundImage={
+            "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
+          }
+          padding={"1px"}
+          borderRadius={"8px"}
+          sx={{
+            "@media (max-width: 600px)": {
+              width: "90%",
+              margin: "0 auto",
+            },
+          }}
+        >
           <Box
-            display={"flex"}
-            alignItems={"center"}
-            _hover={
-              {
-                //   flexDirection: "column-reverse",
-              }
-            }
-          >
-            <Box
-              position={"relative"}
-              width={"10%"}
-              _before={{
-                content: '""',
+            width={"420px"}
+            background={"#151419"}
+            borderRadius={"10px"}
+            minHeight={"490px"}
+            key={card.id}
+            sx={{
+              "@media (max-width: 600px)": {
                 width: "100%",
-                position: "absolute",
-                left: "0",
-                borderBottom: "1px solid #DE858E",
-                zIndex: "2",
-              }}
-            ></Box>
-            <Link to={link}>
-              <Button
-                position={"relative"}
-                backgroundColor={"transparent"}
+                minHeight: "0",
+              },
+            }}
+          >
+            <Image
+              maxHeight={"250px"}
+              width={"100%"}
+              objectFit={"cover"}
+              borderRadius={"10px"}
+              objectPosition={"center"}
+              src={`https://rubix.betadelivery.com/${card.content_image_large}`}
+            />
+            <Box padding={"1rem"}>
+              <Badge
+                backgroundColor={"#565263"}
                 color={"#fff"}
-                fontFamily={"Poppins"}
                 fontWeight={"400"}
-                _hover={{
-                  backgroundColor: "transparent",
+                borderRadius={"20px"}
+                padding={"3px 16px"}
+              >
+                INSIGHT
+              </Badge>
+
+              {(function () {
+                const createdAtDate = new Date(card.createdAt);
+                const formattedDate = createdAtDate.toLocaleDateString(
+                  "en-GB",
+                  {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "2-digit",
+                  }
+                );
+                return (
+                  <Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
+                    {formattedDate}
+                  </Text>
+                );
+              })()}
+
+              <Text
+                color={"#fff"}
+                fontSize={"20px"}
+                marginBottom={"20px"}
+                minHeight={"50px"}
+                maxWidth={"460px"}
+                sx={{
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  WebkitLineClamp: 2,
                 }}
               >
-                Read More
-              </Button>
-            </Link>
+                {card.meta_description}
+              </Text>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                _hover={
+                  {
+                    //   flexDirection: "column-reverse",
+                  }
+                }
+              >
+                <Box
+                  position={"relative"}
+                  width={"10%"}
+                  _before={{
+                    content: '""',
+                    width: "100%",
+                    position: "absolute",
+                    left: "0",
+                    borderBottom: "1px solid #DE858E",
+                    zIndex: "2",
+                  }}
+                ></Box>
+                <Link to={`/blogs/${card.title_slug}`}>
+                  <Button
+                    position={"relative"}
+                    backgroundColor={"transparent"}
+                    color={"#fff"}
+                    fontFamily={"Poppins"}
+                    fontWeight={"400"}
+                    _hover={{
+                      backgroundColor: "transparent",
+                    }}
+                  >
+                    Read More
+                  </Button>
+                </Link>
+              </Box>
+            </Box>
           </Box>
         </Box>
-      </Box>
-    </Box>
+      ))}
+    </>
   );
 };
 
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index 58afc9b..631b7b0 100644
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -1,7 +1,9 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 /* eslint-disable react/no-unknown-property */
 import { Box, Button, Container, Text } from "@chakra-ui/react";
 import banner from "../../assets/images/communityBanner.webp";
+import { useGetCommunitiesBannerQuery } from "../../Redux/slice/communityBannerSlice";
 
 const BannerContent = [
   {
@@ -19,10 +21,20 @@ const BannerContent = [
 ];
 
 const CommunityBanner = ({ onClick }) => {
+  const { data } = useGetCommunitiesBannerQuery();
+  const content = data?.data.rows;
+  // const loop = () => {
+  //   blogPosts.map((item) => {
+  //     console.log(item);
+  //   });
+  // };
+  // loop();
+  console.log(content);
+
   return (
     <Box
       height={"100vh"}
-      backgroundImage={`url(${banner})`}
+      backgroundImage={`url(https://rubix.betadelivery.com/${content?.[1]?.banner_image})`}
       backgroundRepeat={"no-repeat"}
       backgroundSize={"cover"}
       display={"grid"}
@@ -53,7 +65,7 @@ const CommunityBanner = ({ onClick }) => {
         }}
       >
         <Box
-          width={"75%"}
+          width={"100%"}
           sx={{
             "@media (max-width: 500px)": {
               width: "100%",
@@ -84,7 +96,7 @@ const CommunityBanner = ({ onClick }) => {
                 color: "#fff",
               }}
             >
-              {BannerContent[0].heading1}
+              {content?.[1]?.Heading}
             </span>
             <br
               sx={{
@@ -94,7 +106,7 @@ const CommunityBanner = ({ onClick }) => {
                 },
               }}
             />
-            {BannerContent[0].heading2}
+            {/* {BannerContent[0].heading2} */}
           </Text>
           <Box
             marginTop={"1.5rem"}
@@ -122,7 +134,7 @@ const CommunityBanner = ({ onClick }) => {
                 },
               }}
             >
-              {BannerContent[1].subheading}
+              {content?.[1]?.sub_heading}
             </Text>
           </Box>
           <Button
@@ -181,7 +193,7 @@ const CommunityBanner = ({ onClick }) => {
               zIndex: 1,
             }}
           >
-            {BannerContent[2].btn}
+            {content?.[1]?.CTO_button_title}
           </Button>
         </Box>
       </Container>
diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx
index 5d40101..9c51adc 100644
--- a/src/components/Community/CommunityCard.jsx
+++ b/src/components/Community/CommunityCard.jsx
@@ -11,7 +11,7 @@ import {
   SimpleGrid,
   Text,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
 import CommCard from "../Card/CommCard";
 import imgOne from "../../assets/images/Component115.png";
 import imgtwo from "../../assets/images/Component116.png";
@@ -28,6 +28,7 @@ import imgtweleve from "../../assets/images/kiran.jpg";
 import { useEffect } from "react";
 import axios from "axios";
 import { useGetCommunitiesQuery } from "../../Redux/slice/communitySlice";
+import Loader from "../Loader/Loader";
 
 const individuals = [
   {
@@ -129,78 +130,81 @@ const individuals = [
 ];
 
 const CommunityCard = () => {
-  // const { data, error, isLoading } = useGetCommunitiesQuery();
-
-  useEffect(() => {
-    // async function fetchData() {
-    //   try {
-    //     const response = await axios.get(
-    //       "https://rubix.betadelivery.com/api/admin/community"
-    //     );
-    //     console.log(response.data.data.rows);
-    //   } catch (error) {
-    //     // Handle errors
-    //     console.error("Error fetching data:", error.message);
-    //   }
-    // }
-    // // Call the fetchData function to initiate the request
-    // fetchData();
-  }, []);
+  const { data, error, isLoading } = useGetCommunitiesQuery();
+  const [state, setState] = useState();
+  const profile = data?.data?.data;
+  console.log(data?.data?.data);
+  useEffect(() => {}, []);
 
   return (
     <>
-      <Box backgroundColor={"#101015"}>
-        <Container
-          maxW={"1200px"}
-          padding={"0rem"}
-          paddingBottom={"6rem"}
-          sx={{
-            "@media (max-width: 1024px)": {
-              padding: "3rem",
-            },
-            "@media (max-width: 435px)": {},
-          }}
-        >
-          <Text
-            as={"h2"}
-            paddingTop={"4rem"}
-            paddingBottom={"4rem"}
-            fontWeight={700}
-            fontSize={"38px"}
-            textAlign={"center"}
-            textTransform={"capitalize"}
-            color={"#fff"}
-            id="rubix-community"
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <Box backgroundColor={"#101015"}>
+          <Container
+            maxW={"1200px"}
+            padding={"0rem"}
+            paddingBottom={"6rem"}
             sx={{
-              "@media (max-width: 435px)": {
-                fontSize: "35px",
-              },
-              "@media (max-width: 375px)": {
-                fontSize: "28px",
-                textAlign: "center",
+              "@media (max-width: 1024px)": {
+                padding: "3rem",
               },
+              "@media (max-width: 435px)": {},
             }}
           >
-            Rubix Community
-          </Text>
-          <SimpleGrid
-            spacing={"50px"}
-            templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
-          >
-            {individuals.map((item) => (
-              <CommCard
-                key={item.id}
-                location={item.location}
-                name={item.name}
-                jobTitle={item.jobTitle}
-                description={item.description}
-                imageUrl={item.imageUrl}
-                link={item.link}
-              />
-            ))}
-          </SimpleGrid>
-        </Container>
-      </Box>
+            <Text
+              as={"h2"}
+              paddingTop={"4rem"}
+              paddingBottom={"4rem"}
+              fontWeight={700}
+              fontSize={"38px"}
+              textAlign={"center"}
+              textTransform={"capitalize"}
+              color={"#fff"}
+              id="rubix-community"
+              sx={{
+                "@media (max-width: 435px)": {
+                  fontSize: "35px",
+                },
+                "@media (max-width: 375px)": {
+                  fontSize: "28px",
+                  textAlign: "center",
+                },
+              }}
+            >
+              Rubix Community
+            </Text>
+            <SimpleGrid
+              spacing={"50px"}
+              templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
+            >
+              {/* {individuals.map((item) => (
+                <CommCard
+                  key={item.id}
+                  location={item.location}
+                  name={item.name}
+                  jobTitle={item.jobTitle}
+                  description={item.description}
+                  imageUrl={item.imageUrl}
+                  link={item.link}
+                  item.profile_image
+                />
+              ))} */}
+              {profile.map((item) => (
+                <CommCard
+                  key={item.id}
+                  description={item.description}
+                  designation={item.designation}
+                  name={item.member_name}
+                  img={`https://rubix.betadelivery.com/${item.profile_image}`}
+                  link={item.linkedin}
+                />
+              ))}
+            </SimpleGrid>
+          </Container>
+        </Box>
+      )}
     </>
   );
 };
diff --git a/src/components/EventsInternal/EventDates/EventDates.jsx b/src/components/EventsInternal/EventDates/EventDates.jsx
index b87e4d3..5a4eed2 100644
--- a/src/components/EventsInternal/EventDates/EventDates.jsx
+++ b/src/components/EventsInternal/EventDates/EventDates.jsx
@@ -7,7 +7,7 @@ const EventDates = () => {
     <Box
       width={"20%"}
       sx={{
-        "@media (max-width: 600px)": {
+        "@media (max-width: 768px)": {
           width: "100%",
         },
       }}
@@ -20,15 +20,60 @@ const EventDates = () => {
         fontFamily={"Poppins"}
         marginBottom={"2rem"}
         minW={"300px"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            minWidth: "270px",
+          },
+          "@media (max-width: 768px)": {
+            width: "100%",
+          },
+        }}
       >
-        <Text mb={"20px"}>Details</Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              textAlign: "center",
+              fontWeight: "600",
+            },
+          }}
+        >
+          Details
+        </Text>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           <Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
         </Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           <Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
         </Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           <Image src={calendar} mr={"10px"} /> Friday, May 18 - 8.00 PM
         </Text>
       </Box>
@@ -41,9 +86,36 @@ const EventDates = () => {
         fontFamily={"Poppins"}
         marginBottom={"2rem"}
         minW={"300px"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            minWidth: "270px",
+          },
+          "@media (max-width: 768px)": {
+            width: "100%",
+          },
+        }}
       >
-        <Text mb={"20px"}>Location</Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              textAlign: "center",
+              fontWeight: "600",
+            },
+          }}
+        >
+          Location
+        </Text>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           <Image src={pin} mr={"10px"} /> Anywhere 123, anycity
         </Text>
       </Box>
@@ -55,15 +127,59 @@ const EventDates = () => {
         borderRadius={"5px"}
         fontFamily={"Poppins"}
         minW={"300px"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            minWidth: "270px",
+          },
+          "@media (max-width: 600px)": {
+            width: "100%",
+          },
+        }}
       >
-        <Text mb={"20px"}>Organizer</Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              textAlign: "center",
+            },
+          }}
+        >
+          Organizer
+        </Text>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           Rubix Team
         </Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           +91 4578451245
         </Text>
-        <Text display={"flex"} alignItems={"center"} mb={"20px"}>
+        <Text
+          display={"flex"}
+          alignItems={"center"}
+          mb={"20px"}
+          sx={{
+            "@media (max-width: 768px)": {
+              justifyContent: "center",
+            },
+          }}
+        >
           rubix@gmail.com
         </Text>
       </Box>
diff --git a/src/components/EventsInternal/EventsInternal.jsx b/src/components/EventsInternal/EventsInternal.jsx
index 046377f..5c66234 100644
--- a/src/components/EventsInternal/EventsInternal.jsx
+++ b/src/components/EventsInternal/EventsInternal.jsx
@@ -45,7 +45,10 @@ const EventsInternal = () => {
             flexDirection={"column"}
             color="white"
             sx={{
-              "@media (max-width: 600px)": {
+              "@media (max-width: 1024px)": {
+                minHeight: "30vh",
+              },
+              "@media (max-width: 820px)": {
                 minHeight: "inherit",
                 width: "100vw",
                 marginTop: "6rem",
@@ -60,7 +63,7 @@ const EventsInternal = () => {
               fontFamily={"Mona Sans"}
               color={"#fff"}
               sx={{
-                "@media (max-width: 600px)": {
+                "@media (max-width: 768px)": {
                   fontSize: "28px",
                   lineHeight: "45px",
                   padding: "0px 1rem",
@@ -71,7 +74,7 @@ const EventsInternal = () => {
             </Text>
             <Text
               sx={{
-                "@media (max-width: 600px)": {
+                "@media (max-width: 768px)": {
                   padding: "0px 1rem",
                 },
               }}
@@ -87,7 +90,7 @@ const EventsInternal = () => {
             alignItems={"flex-start"}
             justifyContent={"center"}
             sx={{
-              "@media (max-width: 600px)": {
+              "@media (max-width: 820px)": {
                 flexDirection: "column",
               },
             }}
@@ -95,7 +98,10 @@ const EventsInternal = () => {
             <Box
               width={"845px"}
               sx={{
-                "@media (max-width: 600px)": {
+                "@media (max-width: 1024px)": {
+                  width: "610px",
+                },
+                "@media (max-width: 768px)": {
                   width: "100%",
                 },
               }}
@@ -104,8 +110,12 @@ const EventsInternal = () => {
                 pb={"2rem"}
                 width={"815px"}
                 sx={{
-                  "@media (max-width: 600px)": {
-                    height: "215px",
+                  "@media (max-width: 1024px)": {
+                    height: "auto",
+                    width: "555px",
+                  },
+                  "@media (max-width: 768px)": {
+                    height: "auto",
                     width: "100%",
                   },
                 }}
@@ -119,7 +129,7 @@ const EventsInternal = () => {
                 color="white"
                 width={"94%"}
                 sx={{
-                  "@media (max-width: 600px)": {
+                  "@media (max-width: 768px)": {
                     display: "block",
                     top: "inherit",
                     width: "100%",
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 0a6c2eb..f0ca630 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -271,7 +271,7 @@ const Footer = () => {
                     }}
                   >
                     <UnorderedList
-                      listStyle={"none"}
+                      liststyle={"none"}
                       listStyleType={"none"}
                       color={"#B0B0B0"}
                       fontFamily={"Poppins"}
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 06b0280..4d849fc 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -2,51 +2,51 @@
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import HomeCard from "../Card/HomeCard";
 
-const content = [
-  {
-    id: 1,
-    date: `Published: January 5, 2023`,
-    text: `Bring your own BlockSpace`,
-    link: `bring-your-own-blockspace`,
-  },
-  {
-    id: 5,
-    date: `Published: January 28, 2022`,
-    text: `Enterprise blockchains on a Public Chain!`,
-    link: `enterprise-blockchains-on-a-public-chain`,
-  },
-  {
-    id: 3,
-    date: `Published: December 30, 2021`,
-    text: `Mining Rubix Tokens — What You Need To Know`,
-    link: `mining-rubix-tokens-what-you-need-to-know`,
-  },
-  {
-    id: 4,
-    date: `Published: March 11, 2022`,
-    text: `Securing wallet to wallet transfers across the network: Rubix solved it differently`,
-    link: `securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently`,
-  },
+// const content = [
+//   {
+//     id: 1,
+//     date: `Published: January 5, 2023`,
+//     text: `Bring your own BlockSpace`,
+//     link: `bring-your-own-blockspace`,
+//   },
+//   {
+//     id: 5,
+//     date: `Published: January 28, 2022`,
+//     text: `Enterprise blockchains on a Public Chain!`,
+//     link: `enterprise-blockchains-on-a-public-chain`,
+//   },
+//   {
+//     id: 3,
+//     date: `Published: December 30, 2021`,
+//     text: `Mining Rubix Tokens — What You Need To Know`,
+//     link: `mining-rubix-tokens-what-you-need-to-know`,
+//   },
+//   {
+//     id: 4,
+//     date: `Published: March 11, 2022`,
+//     text: `Securing wallet to wallet transfers across the network: Rubix solved it differently`,
+//     link: `securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently`,
+//   },
 
-  {
-    id: 6,
-    date: `Published: January 12, 2022`,
-    text: `Multichain over Blockchain — A reality check on security threat`,
-    link: `multichain-over-blockchain-a-reality-check-on-security-threat`,
-  },
-  {
-    id: 2,
-    date: `Published: December 30, 2021`,
-    text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
-    link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
-  },
-  // {
-  //   id: 7,
-  //   date: `Published: January 12, 2022`,
-  //   text: `Enterprise blockchains on a Public Chain`,
-  //   link: `enterprise-blockchains-on-a-public-chain`,
-  // },
-];
+//   {
+//     id: 6,
+//     date: `Published: January 12, 2022`,
+//     text: `Multichain over Blockchain — A reality check on security threat`,
+//     link: `multichain-over-blockchain-a-reality-check-on-security-threat`,
+//   },
+//   {
+//     id: 2,
+//     date: `Published: December 30, 2021`,
+//     text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
+//     link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
+//   },
+//   // {
+//   //   id: 7,
+//   //   date: `Published: January 12, 2022`,
+//   //   text: `Enterprise blockchains on a Public Chain`,
+//   //   link: `enterprise-blockchains-on-a-public-chain`,
+//   // },
+// ];
 
 const Content = {
   heading: `Rubix Insights`,
@@ -101,14 +101,16 @@ const ResourcesPage = () => {
             },
           }}
         >
-          {content.map((item) => (
+          {/* {content.map((item) => (
             <HomeCard
               key={item.id}
+              cardkey={item.id}
               // date={item.date}
               text={item.text}
               link={item.link}
             />
-          ))}
+          ))} */}
+          <HomeCard />
         </Container>
         {/* <Box textAlign={"center"} marginTop={"4rem"}>
           <Button
diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
new file mode 100644
index 0000000..7c235f1
--- /dev/null
+++ b/src/components/Loader/Loader.jsx
@@ -0,0 +1,24 @@
+import { Box, Spinner } from "@chakra-ui/react";
+
+const Loader = () => {
+  return (
+    <>
+      <Box
+        height={"100vh"}
+        background={"#101015"}
+        display={"grid"}
+        placeContent={"center"}
+      >
+        <Spinner
+          thickness="4px"
+          speed="0.65s"
+          emptyColor="gray.200"
+          color="#DE858E"
+          size="xl"
+        />
+      </Box>
+    </>
+  );
+};
+
+export default Loader;
diff --git a/src/components/MobileComponent/MobileCommunityCard.jsx b/src/components/MobileComponent/MobileCommunityCard.jsx
index 5641245..e4bdcb9 100644
--- a/src/components/MobileComponent/MobileCommunityCard.jsx
+++ b/src/components/MobileComponent/MobileCommunityCard.jsx
@@ -215,7 +215,18 @@ const MobileCommunityCard = () => {
                       },
                     }}
                   >
-                    <Image src={item.imageUrl} style={imgHeight} />
+                    <Image
+                      src={item.imageUrl}
+                      sx={{
+                        "@media (max-width: 820px)": {
+                          height: "auto",
+                          minW: "auto",
+                        },
+                        "@media (max-width: 600px)": {
+                          style: { imgHeight },
+                        },
+                      }}
+                    />
                   </Text>
                 </Text>
                 <Text
diff --git a/src/components/NewsPage/NewsContent.jsx b/src/components/NewsPage/NewsContent.jsx
index 79ff4f6..4c2e441 100644
--- a/src/components/NewsPage/NewsContent.jsx
+++ b/src/components/NewsPage/NewsContent.jsx
@@ -4,6 +4,7 @@ import cardimg from "../../assets/images/cardimg2.png";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 import Pagination from "../Pagination/Pagination";
+import { useGetNewsQuery } from "../../Redux/slice/newsSlice";
 
 const contents = [
   {
@@ -74,6 +75,10 @@ const contents = [
 ];
 
 const NewsContent = () => {
+  const { data } = useGetNewsQuery();
+  const newsCard = data?.data;
+  console.log(newsCard);
+
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 9;
   const totalPages = Math.ceil(contents.length / itemsPerPage);
diff --git a/src/pages/Blogs.jsx b/src/pages/Blogs.jsx
new file mode 100644
index 0000000..4954fd1
--- /dev/null
+++ b/src/pages/Blogs.jsx
@@ -0,0 +1,10 @@
+import BlogPost from "../components/BlogPost/BlogPost";
+import Loader from "../components/Loader/Loader";
+import { useGetBlogQuery } from "../Redux/slice/blogsSlice";
+
+const Blogs = () => {
+  const { isLoading } = useGetBlogQuery();
+  return <>{isLoading ? <Loader /> : <BlogPost />}</>;
+};
+
+export default Blogs;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index a43cdd2..fcf8819 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -12,12 +12,18 @@ import { NewSubnetComp } from "../components/SubnetsComponent";
 import Partner from "../components/HomePage/Partner";
 import PartnerMobile from "../components/MobileComponent/PartnerMobile";
 import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
+import Loader from "../components/Loader/Loader";
 //
 
 // import { useBreakpointValue } from "@chakra-ui/react";
 
 const HomePage = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [loading, setLoading] = useState(false);
+
+  setTimeout(() => {
+    setLoading(true);
+  }, 2000);
 
   useEffect(() => {
     const handleResize = () => {
@@ -38,14 +44,20 @@ const HomePage = () => {
   const isMobile = windowWidth <= 996;
   return (
     <>
-      <HomeBanner />
-      {/* <NewSubnetComp /> */}
-      {!isMobile ? <NewSubnetComp /> : <MobileSubnet />} 
-      <Stats />
-      <WhitePaper />
-      {!isMobile ? <Partner /> : <PartnerMobile />}
-      {/* <Client /> */}
-      {!isMobile ? <Resources /> : <ResourcesMobile />}
+      {loading ? (
+        <>
+          <HomeBanner />
+          {/* <NewSubnetComp /> */}
+          {!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
+          <Stats />
+          <WhitePaper />
+          {!isMobile ? <Partner /> : <PartnerMobile />}
+          {/* <Client /> */}
+          {!isMobile ? <Resources /> : <ResourcesMobile />}
+        </>
+      ) : (
+        <Loader />
+      )}
     </>
   );
 };
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index db8e910..3f659d2 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -28,6 +28,8 @@ import Ecosystem from "../pages/Ecosystem";
 import Events from "../pages/Events";
 import NewsPage from "../pages/NewsPage";
 import EventsInternnal from "../pages/EventsInternnal";
+import Blogs from "../pages/Blogs";
+import BlogPost from "../components/BlogPost/BlogPost";
 
 export const route = [
   {
@@ -103,6 +105,14 @@ export const route = [
     path: "events-internal",
     element: <EventsInternnal />,
   },
+  {
+    path: "blogs/:title_slug",
+    element: <Blogs />,
+  },
+  {
+    path: ":title_slug",
+    element: <BlogPost />,
+  },
   {
     path: "*",
     element: <NotFound />,