diff --git a/components/community.css b/components/community.css
index 571d6ef6..490eb45f 100644
--- a/components/community.css
+++ b/components/community.css
@@ -15,3 +15,11 @@
   margin: calc(-100px / 2);
   width: 250px;
 }
+@keyframes orbit {
+  0% {
+    transform: rotate(0deg) translate(300px) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translate(300px) rotate(-360deg);
+  }
+}
diff --git a/components/community.tsx b/components/community.tsx
index 953ca4e6..1827a0be 100644
--- a/components/community.tsx
+++ b/components/community.tsx
@@ -1,3 +1,4 @@
+
 import React from "react";
 import "./community.css";
 import Image from "next/image";
@@ -7,11 +8,12 @@ import TwitterSvg from "@/public/images/social/twitter.svg";
 import SlackSvg from "@/public/images/social/slack.svg";
 import YoutubeSvg from "@/public/images/social/youtube.svg";
 import LinkedinSvg from "@/public/images/social/linkedin.svg";
-import { OrbitingCircles } from "./magicui/orbitcircle";
 import Link from "next/link";
 
 type cardSurrondStyle = {
   transform: string;
+  animation?: string;
+  animationDelay?: string; 
 };
 
 type CardProps = {
@@ -30,21 +32,21 @@ type CardData = {
   description: string;
   radius: number;
   duration: number;
-  delay: number;
 };
 
 const createCircleStyles = (
   totalCircles: number,
   index: number,
-  containerWidth: number
+  radius: number,
 ): cardSurrondStyle => {
-  const angle = 360 - 90;
-  const dangle = 360 / totalCircles;
-  const currentAngle = angle + dangle * index;
+  const angle = 360 / totalCircles;
+  const currentAngle = angle * index;
+  console.log(index, currentAngle);
+
   return {
-    transform: `rotate(${currentAngle}deg) translate(${
-      containerWidth / 2
-    }px) rotate(-${currentAngle}deg)`,
+    transform: `rotate(${currentAngle}deg) translate(${radius}px) rotate(-${currentAngle}deg)`,
+    animation: `orbit 20s linear infinite`,
+    animationDelay: `-${(index * 20) / totalCircles}s`,
   };
 };
 
@@ -63,7 +65,7 @@ function SocialLinkCard({
       rel="noopener noreferrer"
       style={showExtraStyle ? { ...style } : {}}
       className={`${
-        showExtraStyle ? "circle" : "w-[280px] mx-auto mb-5"
+        showExtraStyle ? "circle" : "w-3/4 mx-auto mb-5"
       } z-10 bg-white shadow-md rounded-lg border border-accent-500 p-4 hover:shadow-xl flex items-center justify-start group transition duration-300`}
     >
       <div className="w-12 h-12 text-center sm:mr-2">
@@ -89,7 +91,6 @@ export default function Community() {
       description: "Let's talk about regression testing!",
       radius: 300,
       duration: 20,
-      delay: 1,
     },
     {
       link: "https://github.com/keploy/keploy",
@@ -98,7 +99,6 @@ export default function Community() {
       description: "Contribute code to Keploy or report a bug",
       radius: 300,
       duration: 20,
-      delay: 5,
     },
     {
       link: "https://join.slack.com/t/keploy/shared_invite/zt-2dno1yetd-Ec3el~tTwHYIHgGI0jPe7A",
@@ -107,7 +107,6 @@ export default function Community() {
       description: "Connect and chat with other Keploy users",
       radius: 300,
       duration: 20,
-      delay: 9,
     },
     {
       link: "https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg",
@@ -116,7 +115,6 @@ export default function Community() {
       description: "Learn with Keploy team and community videos",
       radius: 300,
       duration: 20,
-      delay: 13,
     },
     {
       link: "https://www.linkedin.com/company/74471957",
@@ -125,16 +123,11 @@ export default function Community() {
       description: "Follow us and connect with other Keploy engineers!",
       radius: 300,
       duration: 20,
-      delay: 17,
     },
   ];
 
-  // Define the number of circles you want to render
   const totalCircles = cardsData.length;
 
-  // You can adjust this width as per your requirement or dynamically based on the parent component's state
-  const containerWidth = 600;
-
   const cardsSurround = Array.from({ length: totalCircles }, (_, index) => (
     <SocialLinkCard
       key={index}
@@ -142,7 +135,7 @@ export default function Community() {
       svgIcon={cardsData[index].svgIcon}
       platformName={cardsData[index].platformName}
       description={cardsData[index].description}
-      style={createCircleStyles(totalCircles, index, containerWidth)}
+      style={createCircleStyles(totalCircles, index, cardsData[index].radius)}
       showExtraStyle={true}
     />
   ));
@@ -166,28 +159,13 @@ export default function Community() {
       </div>
 
       <div className="mx-auto w-fit">
-        <div className="relative hidden md:block m-auto h-[600px] w-[600px] mt-24 mb-24 items-center justify-center bg-background">
-          <div>
-            <Image src={CommunityBunny} alt="Image" className="absolute pl-5 -translate-x-1/2 translate-y-1/5 left-1/2 bg-background max-w-2xl" />
-          </div>
-          <div className="flex justify-center items-center">
-            {cardsData.map((card, index) => (
-              <OrbitingCircles
-                key={index}
-                className="size-[60px] border-none bg-transparent top-72 z-10"
-                duration={card.duration}
-                delay={card.delay}
-                radius={card.radius}
-              >
-                <SocialLinkCard
-                  link={card.link}
-                  svgIcon={card.svgIcon}
-                  platformName={card.platformName}
-                  description={card.description}
-                />
-              </OrbitingCircles>
-            ))}
-          </div>
+        <div className="ciclegraph hidden md:block relative w-[600px] h-[600px] mx-auto mt-24 mb-24">
+          {cardsSurround}
+          <Image
+            src={CommunityBunny}
+            alt="Image"
+            className="absolute -translate-x-1/2 -translate-y-1/2 bg-white top-1/2 left-1/2"
+          />
         </div>
         <div className="md:hidden">
           <Image src={CommunityBunny} alt="Image" className="w-3/4 mx-auto" />
@@ -197,3 +175,4 @@ export default function Community() {
     </section>
   );
 }
+
diff --git a/components/magicui/orbitcircle.tsx b/components/magicui/orbitcircle.tsx
deleted file mode 100644
index 4bcf1e6c..00000000
--- a/components/magicui/orbitcircle.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'; // Ensure you have this import
-import { cn } from "@/lib/utils";
-
-export interface OrbitingCirclesProps {
-  className?: string;
-  children?: React.ReactNode;
-  reverse?: boolean;
-  duration?: number;
-  delay?: number;
-  radius?: number;
-  path?: boolean;
-}
-
-export function OrbitingCircles({
-  className,
-  children,
-  reverse,
-  duration = 20,
-  delay = 10,
-  radius = 50,
-  path = true,
-}: OrbitingCirclesProps) {
-  return (
-    <>
-      {path && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          version="1.1"
-          className="pointer-events-none absolute inset-0 size-full"
-        >
-          <circle
-            className="stroke-black stroke-2 dark:stroke-black/40 invisible"
-            cx="50%"
-            cy="50%"
-            r={radius}
-            fill="none"
-          />
-        </svg>
-      )}
-
-      <div
-        style={{
-          "--duration": duration,
-          "--radius": radius,
-          "--delay": -delay,
-        } as React.CSSProperties}
-        className={cn(
-          "absolute flex size-full transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
-          { "[animation-direction:reverse]": reverse },
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </>
-  );
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 60f9e429..b2b38e3e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,6 @@ module.exports = {
         marquee: "marquee var(--duration) linear infinite",
         "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "background-position-spin": "background-position-spin 3000ms infinite alternate",
-        orbit: "orbit calc(var(--duration)*1s) linear infinite",
       },
       keyframes: {
         marquee: {
@@ -26,16 +25,6 @@ module.exports = {
           "0%": { backgroundPosition: "top center" },
           "100%": { backgroundPosition: "bottom center" },
         },
-        orbit: {
-          "0%": {
-            transform:
-              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
-          },
-          "100%": {
-            transform:
-              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
-          },
-      },
     },
       colors: {
         // Brand Palette