diff --git a/app/(prowler)/services/page.tsx b/app/(prowler)/services/page.tsx
index 77c6de68ec..1564675110 100644
--- a/app/(prowler)/services/page.tsx
+++ b/app/(prowler)/services/page.tsx
@@ -1,5 +1,34 @@
-import React from "react";
-
+import { FilterControls } from "@/components/filters";
+import {
+  AmazonEC2Icon,
+  AmazonEMRIcon,
+  AmazonGuardDutyIcon,
+  AmazonInspectorIcon,
+  AmazonMacieIcon,
+  AmazonRDSIcon,
+  AmazonRoute53Icon,
+  AmazonS3Icon,
+  AmazonSNSIcon,
+  AmazonVPCIcon,
+  AWSAccountIcon,
+  AWSAthenaIcon,
+  AWSCertificateManagerIcon,
+  AWSCloudFormationIcon,
+  AWSCloudTrailIcon,
+  AWSCloudWatchIcon,
+  AWSConfigIcon,
+  AWSDatabaseMigrationServiceIcon,
+  AWSGlueIcon,
+  AWSIAMIcon,
+  AWSLambdaIcon,
+  AWSNetworkFirewallIcon,
+  AWSOrganizationsIcon,
+  AWSResourceExplorerIcon,
+  AWSSecurityHubIcon,
+  AWSSystemsManagerIncidentManagerIcon,
+  AWSTrustedAdvisorIcon,
+  IAMAccessAnalyzerIcon,
+} from "@/components/icons";
 import { Header } from "@/components/ui";
 
 export default function Services() {
@@ -9,8 +38,36 @@ export default function Services() {
         title="Services"
         icon="material-symbols:linked-services-outline"
       />
+      <FilterControls />
 
-      <p>Hi hi from Services page</p>
+      <IAMAccessAnalyzerIcon />
+      <AWSAccountIcon />
+      <AWSCertificateManagerIcon />
+      <AWSAthenaIcon />
+      <AWSLambdaIcon />
+      <AWSCloudFormationIcon />
+      <AWSCloudTrailIcon />
+      <AWSCloudWatchIcon />
+      <AWSConfigIcon />
+      <AWSDatabaseMigrationServiceIcon />
+      <AmazonEC2Icon />
+      <AmazonEMRIcon />
+      <AWSGlueIcon />
+      <AmazonGuardDutyIcon />
+      <AmazonInspectorIcon />
+      <AWSIAMIcon />
+      <AmazonMacieIcon />
+      <AWSNetworkFirewallIcon />
+      <AWSOrganizationsIcon />
+      <AmazonRDSIcon />
+      <AWSResourceExplorerIcon />
+      <AmazonRoute53Icon />
+      <AmazonS3Icon />
+      <AWSSecurityHubIcon />
+      <AmazonSNSIcon />
+      <AWSSystemsManagerIncidentManagerIcon />
+      <AWSTrustedAdvisorIcon />
+      <AmazonVPCIcon />
     </>
   );
 }
diff --git a/components/providers/CustomRadioProvider.tsx b/components/providers/CustomRadioProvider.tsx
index f40ac37056..05c9926b0a 100644
--- a/components/providers/CustomRadioProvider.tsx
+++ b/components/providers/CustomRadioProvider.tsx
@@ -4,7 +4,8 @@ import { UseRadioProps } from "@nextui-org/radio/dist/use-radio";
 import { cn, RadioGroup, useRadio, VisuallyHidden } from "@nextui-org/react";
 import React from "react";
 
-import { AwsProvider, AzureProvider, GoogleCloudProvider } from "../icons";
+import { AWSProviderBadge, AzureProviderBadge } from "../icons/providers-badge";
+import { GCPProviderBadge } from "../icons/providers-badge/GCPProviderBadge";
 
 interface CustomRadioProps extends UseRadioProps {
   description?: string;
@@ -56,19 +57,19 @@ export const CustomRadioProvider = () => {
     <RadioGroup label="Select one provider" name="provider">
       <CustomRadio description="Amazon Web Services" value="aws">
         <div className="flex items-center">
-          <AwsProvider size={26} />
+          <AWSProviderBadge size={26} />
           <span className="ml-2">AWS</span>
         </div>
       </CustomRadio>
       <CustomRadio description="Google Cloud Platform" value="gcp">
         <div className="flex items-center">
-          <GoogleCloudProvider size={26} />
+          <GCPProviderBadge size={26} />
           <span className="ml-2">GCP</span>
         </div>
       </CustomRadio>
       <CustomRadio description="Microsoft Azure" value="azure">
         <div className="flex items-center">
-          <AzureProvider size={26} />
+          <AzureProviderBadge size={26} />
           <span className="ml-2">Azure</span>
         </div>
       </CustomRadio>