diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 4a561f1bb..5668aaa6e 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -33,6 +33,7 @@ import {
 import { ExclamationIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import {
   CycleIssueResponse,
@@ -424,8 +425,13 @@ export const IssuesView: React.FC<Props> = ({
             {Object.keys(filters).map((key) => {
               if (filters[key as keyof typeof filters] !== null)
                 return (
-                  <div key={key} className="flex items-center gap-x-2 rounded bg-white px-2 py-1">
-                    <span className="font-medium capitalize text-gray-500">{key}:</span>
+                  <div
+                    key={key}
+                    className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
+                  >
+                    <span className="font-medium capitalize text-gray-500">
+                      {replaceUnderscoreIfSnakeCase(key)}:
+                    </span>
                     {filters[key as keyof IIssueFilterOptions] === null ||
                     (filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
                       <span>None</span>
@@ -536,7 +542,7 @@ export const IssuesView: React.FC<Props> = ({
                               return (
                                 <p
                                   key={memberId}
-                                  className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
+                                  className="inline-flex items-center gap-x-1 rounded-full px-0.5 py-0.5 font-medium capitalize"
                                 >
                                   <Avatar user={member} />
                                   <span>{member?.first_name}</span>
@@ -577,7 +583,7 @@ export const IssuesView: React.FC<Props> = ({
                               return (
                                 <p
                                   key={memberId}
-                                  className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
+                                  className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize"
                                 >
                                   <Avatar user={member} />
                                   <span>{member?.first_name}</span>
@@ -621,7 +627,6 @@ export const IssuesView: React.FC<Props> = ({
                 );
             })}
           </div>
-
           {Object.keys(filters).length > 0 &&
             nullFilters.length !== Object.keys(filters).length && (
               <PrimaryButton
@@ -653,9 +658,10 @@ export const IssuesView: React.FC<Props> = ({
                 priority: null,
                 assignees: null,
                 labels: null,
+                created_by: null,
               })
             }
-            className="mt-2 flex items-center gap-x-1 text-xs"
+            className="mt-2 flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
           >
             <span>Clear all filters</span>
             <XMarkIcon className="h-4 w-4" />
@@ -684,7 +690,7 @@ export const IssuesView: React.FC<Props> = ({
           isNotEmpty ? (
             <>
               {isCompleted && (
-                <div className="flex items-center gap-2 text-sm mb-4 text-gray-500">
+                <div className="mb-4 flex items-center gap-2 text-sm text-gray-500">
                   <ExclamationIcon height={14} width={14} />
                   <span>Completed cycles are not editable.</span>
                 </div>
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index 8a9dd2e95..cafb7b85b 100644
--- a/apps/app/components/views/form.tsx
+++ b/apps/app/components/views/form.tsx
@@ -153,7 +153,7 @@ export const ViewForm: React.FC<Props> = ({
             />
           </div>
           <div>
-            <div className="flex gap-4">
+            <div className="flex gap-4 flex-wrap items-center">
               {Object.keys(filters ?? {}).map((key) => {
                 const queryKey = key as keyof typeof filters;
                 if (queryKey === "state")
@@ -163,7 +163,7 @@ export const ViewForm: React.FC<Props> = ({
                         const state = statesList.find((state) => state.id === stateID);
                         if (!state) return null;
                         return (
-                          <div className="flex items-center gap-2 text-xs" key={state.id}>
+                          <div className="flex items-center gap-2 text-xs border bg-white rounded-full px-2 py-1.5" key={state.id}>
                             {getStateGroupIcon(state?.group, "16", "16", state?.color)}
                             {state?.name}
                           </div>
@@ -175,7 +175,7 @@ export const ViewForm: React.FC<Props> = ({
                   return (
                     <div className="flex gap-3" key={key}>
                       {filters.priority?.map((priority) => (
-                        <div className="flex items-center gap-2 text-xs" key={priority}>
+                        <div className="flex items-center gap-2 text-xs border bg-white rounded-full px-2 py-1.5" key={priority}>
                           {getPriorityIcon(priority)}
                           {priority}
                         </div>
@@ -190,7 +190,7 @@ export const ViewForm: React.FC<Props> = ({
 
                         if (!member) return null;
                         return (
-                          <div className="flex items-center gap-2 text-xs" key={member.member.id}>
+                          <div className="flex items-center gap-2 text-xs border bg-white rounded-full px-1.5 py-1" key={member.member.id}>
                             <Avatar user={member.member} />
                             {member.member.first_name && member.member.first_name !== ""
                               ? member.member.first_name