Fixed dropdowns and spacing

src/frontend/src/components/ui/badge.tsx

@@ -20,8 +20,8 @@ const badgeVariants = cva(
         sm: "h-4 text-xs",
         md: "h-5 text-sm",
         lg: "h-6 text-base",
-        sq: "h-6 text-sm font-medium rounded-md",
+        sq: "h-6 text-sm font-normal rounded-md",
-        xq: "h-5 text-xs font-medium rounded-md",
+        xq: "h-5 text-xs font-normal rounded-md",
       },
     },
     defaultVariants: {

src/frontend/src/components/ui/select.tsx

@@ -18,14 +18,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-8 items-center justify-between rounded-md border border-ring/60 px-4 py-2 text-sm text-primary ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="ml-2 h-4 w-4" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

src/frontend/src/pages/StorePage/index.tsx

@@ -193,7 +193,7 @@ export default function StorePage(): JSX.Element {
         <span className="community-page-description-text">
           Search flows and components from the community.
         </span>
-        <div className="flex w-full flex-col gap-4 p-4">
+        <div className="flex w-full flex-col gap-4 p-0">
           <div className="flex items-end gap-4">
             <div className="relative h-12 w-[40%]">
               <Input
@@ -212,6 +212,18 @@ export default function StorePage(): JSX.Element {
               <Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />
             </div>
             <div className="ml-4 flex w-full gap-2 border-b border-border">
+              <button
+                onClick={() => {
+                  setTabActive("All");
+                }}
+                className={
+                  tabActive === "All"
+                    ? "border-b-2 border-primary p-3"
+                    : " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
+                }
+              >
+                All
+              </button>
               <button
                 onClick={() => {
                   setTabActive("Flows");
@@ -244,6 +256,10 @@ export default function StorePage(): JSX.Element {
             </div>
           </div>
           <div className="flex items-center gap-3 text-sm">
+            <button className="flex h-8 items-center justify-between rounded-md border border-ring/60 px-4 py-2 text-sm text-primary hover:bg-muted">
+              <IconComponent name="CheckCircle2" className="mr-2 h-4 w-4" />
+              Installed Locally
+            </button>
             <Select
               onValueChange={(value) => {
                 if (value === "Flow") {
@@ -258,8 +274,77 @@ export default function StorePage(): JSX.Element {
                 handleGetComponents();
               }}
             >
-              <SelectTrigger className="w-[180px]">
+              <SelectTrigger>
-                <SelectValue placeholder="Both" />
+                <SelectValue placeholder="Component Types" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">Both</SelectItem>
+                <SelectItem value="Flow">Flows</SelectItem>
+                <SelectItem value="Component">Components</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={(value) => {
+                if (value === "Flow") {
+                  filterComponent.current = false;
+                } else if (value === "Component") {
+                  filterComponent.current = true;
+                } else {
+                  filterComponent.current = null;
+                }
+                setPageIndex(1);
+                setPageSize(10);
+                handleGetComponents();
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Use Cases" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">Both</SelectItem>
+                <SelectItem value="Flow">Flows</SelectItem>
+                <SelectItem value="Component">Components</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={(value) => {
+                if (value === "Flow") {
+                  filterComponent.current = false;
+                } else if (value === "Component") {
+                  filterComponent.current = true;
+                } else {
+                  filterComponent.current = null;
+                }
+                setPageIndex(1);
+                setPageSize(10);
+                handleGetComponents();
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Models" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">Both</SelectItem>
+                <SelectItem value="Flow">Flows</SelectItem>
+                <SelectItem value="Component">Components</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={(value) => {
+                if (value === "Flow") {
+                  filterComponent.current = false;
+                } else if (value === "Component") {
+                  filterComponent.current = true;
+                } else {
+                  filterComponent.current = null;
+                }
+                setPageIndex(1);
+                setPageSize(10);
+                handleGetComponents();
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Payment" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="">Both</SelectItem>
@@ -297,7 +382,7 @@ export default function StorePage(): JSX.Element {
               ))}
           </div>
 
-          <div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="mt-2 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
             {loading ? (
               <>
                 <SkeletonCardComponent />

src/frontend/src/style/applies.css

@@ -217,7 +217,7 @@
   }
 
   .main-page-nav-arrangement {
-    @apply flex-max-width justify-between px-6 py-12 pb-2;
+    @apply flex-max-width justify-between px-6 py-8 pb-2;
   }
 
   .main-page-nav-title {
@@ -245,7 +245,7 @@
   }
 
   .community-page-nav-arrangement {
-    @apply flex-max-width justify-between px-6 py-12 pb-2;
+    @apply flex-max-width justify-between px-6 py-8 pb-2;
   }
 
   .community-page-nav-title {