diff --git a/index.html b/index.html
index b286088..a2e1a88 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>sociowire-frontend</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/Filters/FilterButtons.jsx b/src/components/Filters/FilterButtons.jsx
new file mode 100644
index 0000000..e3dc66c
--- /dev/null
+++ b/src/components/Filters/FilterButtons.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import "./../../styles/filters.css";
+
+export default function FilterButtons({ onSelect }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
+
+      <button className="sw-filter-btn" onClick={() => onSelect("news")}>
+        <i className="fa-solid fa-newspaper"></i>
+        <div className="sw-filter-label">News</div>
+      </button>
+
+      <button className="sw-filter-btn" onClick={() => onSelect("friends")}>
+        <i className="fa-solid fa-user-group"></i>
+        <div className="sw-filter-label">Friends</div>
+      </button>
+
+      <button className="sw-filter-btn" onClick={() => onSelect("events")}>
+        <i className="fa-solid fa-calendar-days"></i>
+        <div className="sw-filter-label">Events</div>
+      </button>
+
+      <button className="sw-filter-btn" onClick={() => onSelect("market")}>
+        <i className="fa-solid fa-chart-line"></i>
+        <div className="sw-filter-label">Market</div>
+      </button>
+
+    </div>
+  );
+}
diff --git a/src/styles/filters.css b/src/styles/filters.css
new file mode 100644
index 0000000..9a43e26
--- /dev/null
+++ b/src/styles/filters.css
@@ -0,0 +1,37 @@
+.sw-filter-btn {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #0b1020);
+  border: 2px solid rgba(255,255,255,0.25);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  transition: transform .15s, box-shadow .15s;
+}
+
+.sw-filter-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.75);
+}
+
+.sw-filter-btn i {
+  font-size: 26px;
+  margin-bottom: 4px;
+}
+
+.sw-filter-label {
+  font-size: 0.7rem;
+  margin-top: 4px;
+  text-align: center;
+  color: #dbeafe;
+}
+
+.sw-filter-active {
+  border-color: #38bdf8;
+  box-shadow: 0 0 16px #38bdf8;
+}
