diff --git a/src/app/(main)/my-voyage/[teamId]/features/components/Card.test.tsx b/src/app/(main)/my-voyage/[teamId]/features/components/Card.test.tsx
new file mode 100644
index 00000000..e7aaea03
--- /dev/null
+++ b/src/app/(main)/my-voyage/[teamId]/features/components/Card.test.tsx
@@ -0,0 +1,107 @@
+import { render } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import React from "react";
+import Card from "./Card";
+import { type Feature, features } from "./fixtures/Features";
+import { rootReducer } from "@/store/store";
+import { useUser } from "@/store/hooks";
+
+jest.mock("./EditPopover", () => <div>mock child component</div>);
+jest.mock("@/store/hooks", () => ({
+  useUser: jest.fn(),
+}));
+jest.mock("@hello-pangea/dnd", () => ({
+  DragDropContext: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  Droppable: ({
+    children,
+  }: {
+    children: (provided: {
+      droppableProps: Record<string, unknown>;
+      innerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+  }) => (
+    <div>
+      {children({
+        droppableProps: {},
+        innerRef: React.createRef<HTMLDivElement>(),
+      })}
+    </div>
+  ),
+  Draggable: ({
+    children,
+  }: {
+    children: (provided: {
+      draggableProps: Record<string, unknown>;
+      dragHandleProps: Record<string, unknown>;
+      innerRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+  }) => (
+    <div>
+      {children({
+        draggableProps: {},
+        dragHandleProps: {},
+        innerRef: React.createRef<HTMLDivElement>(),
+      })}
+    </div>
+  ),
+}));
+
+// "current user" id is 25b7b76c-1567-4910-9d50-e78819daccf1
+const renderWithStore = (feature: Feature, userId: string) => {
+  const store = configureStore({
+    reducer: rootReducer,
+  });
+
+  (useUser as jest.Mock).mockReturnValue({ id: userId });
+
+  return render(
+    <Provider store={store}>
+      <Card index={1} feature={feature} setEditMode={jest.fn()} />
+    </Provider>,
+  );
+};
+
+describe("Feature Card component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders edit button if current user's id matches id of user who added feature", () => {
+    const card = renderWithStore(
+      features[0],
+      "25b7b76c-1567-4910-9d50-e78819daccf1",
+    );
+
+    const cardAction = card.getByRole("button", { name: /feature menu/i });
+    const avatar = card.queryByRole("img", { name: /avatar/i });
+
+    expect(cardAction).toBeInTheDocument();
+    expect(avatar).not.toBeInTheDocument();
+  });
+
+  it("renders avatar if current user's id doesn't match id of user who added feature", () => {
+    const card = renderWithStore(
+      features[0],
+      "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
+    );
+
+    const cardAction = card.queryByRole("button", { name: /feature menu/i });
+    const avatar = card.getByRole("img", { name: /avatar/i });
+
+    expect(cardAction).not.toBeInTheDocument();
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("wraps long word to new line", () => {
+    const card = renderWithStore(
+      features[0],
+      "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
+    );
+
+    const description = card.getByText(features[0].description);
+    expect(description.closest("span")).toHaveClass("break-all");
+  });
+});
diff --git a/src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx b/src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx
index 800e8397..a8502957 100644
--- a/src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx
+++ b/src/app/(main)/my-voyage/[teamId]/features/components/Card.tsx
@@ -67,7 +67,9 @@ export default function Card({ feature, index, setEditMode }: CardProps) {
             )}
             <div className="flex items-center justify-between">
               <div className="flex flex-col gap-y-1">
-                <span className="text-base font-semibold">{description}</span>
+                <span className="break-all text-base font-semibold">
+                  {description}
+                </span>
                 <span className="text-[10px] text-neutral-focus">{`Added by ${
                   isCurrentUser ? "you" : firstName + " " + lastName
                 }`}</span>
diff --git a/src/app/(main)/my-voyage/[teamId]/features/components/fixtures/Features.ts b/src/app/(main)/my-voyage/[teamId]/features/components/fixtures/Features.ts
index 82035022..9c646b10 100644
--- a/src/app/(main)/my-voyage/[teamId]/features/components/fixtures/Features.ts
+++ b/src/app/(main)/my-voyage/[teamId]/features/components/fixtures/Features.ts
@@ -23,289 +23,89 @@ export interface FeaturesList {
   features: Feature[];
 }
 
-export const featuresLists: FeaturesList[] = [
+export const features = [
   {
-    categoryId: 25,
-    categoryName: "must have",
-    features: [
-      {
-        id: 50,
-        description: "User Accounts",
-        order: 0,
-        teamMemberId: 33,
-        category: {
-          id: 25,
-          name: "must have",
-        },
-        addedBy: {
-          member: {
-            id: "25b7b76c-1567-4910-9d50-e78819daccf1",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=wavatar&r=x",
-            firstName: "Joso",
-            lastName: "Mađar",
-          },
-        },
-      },
-      {
-        id: 51,
-        description: "Admin dashboard",
-        order: 1,
-        teamMemberId: 33,
-        category: {
-          id: 25,
-          name: "must have",
-        },
-        addedBy: {
-          member: {
-            id: "25b7b76c-1567-4910-9d50-e78819daccf1",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=wavatar&r=x",
-            firstName: "Joso",
-            lastName: "Mađar",
-          },
-        },
-      },
-      {
-        id: 52,
-        description: "Friend List",
-        order: 2,
-        teamMemberId: 35,
-        category: {
-          id: 25,
-          name: "must have",
-        },
-        addedBy: {
-          member: {
-            id: "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=monsterid&r=x",
-            firstName: "Larry",
-            lastName: "Castro",
-          },
-        },
-      },
-      {
-        id: 62,
-        description: "Stripe integration",
-        order: 3,
-        teamMemberId: 36,
-        category: {
-          id: 25,
-          name: "must have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
+    id: 50,
+    description: "User Accounts",
+    order: 0,
+    teamMemberId: 33,
+    category: {
+      id: 25,
+      name: "must have",
+    },
+    addedBy: {
+      member: {
+        id: "25b7b76c-1567-4910-9d50-e78819daccf1",
+        avatar:
+          "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=wavatar&r=x",
+        firstName: "Joso",
+        lastName: "Mađar",
       },
-    ],
+    },
   },
   {
-    categoryId: 26,
-    categoryName: "should have",
-    features: [
-      {
-        id: 49,
-        description: "Themes",
-        order: 0,
-        teamMemberId: 33,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "25b7b76c-1567-4910-9d50-e78819daccf1",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=wavatar&r=x",
-            firstName: "Joso",
-            lastName: "Mađar",
-          },
-        },
-      },
-      {
-        id: 54,
-        description: "Save links",
-        order: 1,
-        teamMemberId: 35,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=monsterid&r=x",
-            firstName: "Larry",
-            lastName: "Castro",
-          },
-        },
-      },
-      {
-        id: 55,
-        description: "Charts and Graphs",
-        order: 2,
-        teamMemberId: 34,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "3eca1a73-01aa-448c-8410-dce17ff08938",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=robohash&r=x",
-            firstName: "Jessica",
-            lastName: "Williamson",
-          },
-        },
-      },
-      {
-        id: 56,
-        description: "Chat",
-        order: 3,
-        teamMemberId: 34,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
-      },
-      {
-        id: 57,
-        description: "Share images",
-        order: 4,
-        teamMemberId: 34,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "3eca1a73-01aa-448c-8410-dce17ff08938",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=robohash&r=x",
-            firstName: "Jessica",
-            lastName: "Williamson",
-          },
-        },
-      },
-      {
-        id: 60,
-        description: "Notifications",
-        order: 5,
-        teamMemberId: 36,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
+    id: 51,
+    description: "Admin dashboard",
+    order: 1,
+    teamMemberId: 33,
+    category: {
+      id: 25,
+      name: "must have",
+    },
+    addedBy: {
+      member: {
+        id: "25b7b76c-1567-4910-9d50-e78819daccf1",
+        avatar:
+          "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=wavatar&r=x",
+        firstName: "Joso",
+        lastName: "Mađar",
       },
-      {
-        id: 61,
-        description: "Mobile app",
-        order: 6,
-        teamMemberId: 36,
-        category: {
-          id: 26,
-          name: "should have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
-      },
-    ],
+    },
   },
   {
-    categoryId: 27,
-    categoryName: "nice to have",
-    features: [
-      {
-        id: 53,
-        description: "Share on LinkedIn",
-        order: 0,
-        teamMemberId: 35,
-        category: {
-          id: 27,
-          name: "nice to have",
-        },
-        addedBy: {
-          member: {
-            id: "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=monsterid&r=x",
-            firstName: "Larry",
-            lastName: "Castro",
-          },
-        },
-      },
-      {
-        id: 58,
-        description: "Share PDF",
-        order: 1,
-        teamMemberId: 36,
-        category: {
-          id: 27,
-          name: "nice to have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
+    id: 52,
+    description: "Friend List",
+    order: 2,
+    teamMemberId: 35,
+    category: {
+      id: 25,
+      name: "must have",
+    },
+    addedBy: {
+      member: {
+        id: "5d6eb1aa-6e9c-4b26-a363-6a35e5d76daa",
+        avatar:
+          "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=monsterid&r=x",
+        firstName: "Larry",
+        lastName: "Castro",
       },
-      {
-        id: 59,
-        description: "Upload files",
-        order: 2,
-        teamMemberId: 36,
-        category: {
-          id: 27,
-          name: "nice to have",
-        },
-        addedBy: {
-          member: {
-            id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
-            avatar:
-              "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
-            firstName: "Leonarda",
-            lastName: "Rowe",
-          },
-        },
+    },
+  },
+  {
+    id: 62,
+    description: "Stripe integration",
+    order: 3,
+    teamMemberId: 36,
+    category: {
+      id: 25,
+      name: "must have",
+    },
+    addedBy: {
+      member: {
+        id: "dff75faa-1f39-446d-a60c-9589e5ead90f",
+        avatar:
+          "https://gravatar.com/avatar/3bfaef00e02a22f99e17c66e7a9fdd31?s=400&d=identicon&r=x",
+        firstName: "Leonarda",
+        lastName: "Rowe",
       },
-    ],
+    },
+  },
+];
+
+export const featuresLists: FeaturesList[] = [
+  {
+    categoryId: 25,
+    categoryName: "must have",
+    features,
   },
 ];
diff --git a/src/components/navbar/ChinguMenu.tsx b/src/components/navbar/ChinguMenu.tsx
index 8b1b35be..4809b082 100644
--- a/src/components/navbar/ChinguMenu.tsx
+++ b/src/components/navbar/ChinguMenu.tsx
@@ -5,19 +5,20 @@ import routePaths from "@/utils/routePaths";
 
 export default function ChinguMenu() {
   return (
-    <Link href={routePaths.dashboardPage()}>
-      <div className="flex cursor-pointer flex-col items-center gap-2 sm:flex-row">
-        <Image
-          src={chinguLogo}
-          width={50}
-          height={50}
-          alt="Chingu Logo"
-          priority={true}
-        />
-        <h2 className="text-xs font-semibold text-base-300 sm:text-lg">
-          Chingu
-        </h2>
-      </div>
+    <Link
+      href={routePaths.dashboardPage()}
+      className="flex cursor-pointer flex-col flex-wrap items-center gap-2 sm:flex-row"
+    >
+      <Image
+        src={chinguLogo}
+        width={50}
+        height={50}
+        alt="Chingu Logo"
+        priority={true}
+      />
+      <h2 className="hidden text-xs font-semibold text-base-300 sm:flex sm:text-lg">
+        Chingu
+      </h2>
     </Link>
   );
 }
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index f8f2efe2..84097420 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -6,11 +6,11 @@ interface NavbarProps {
 
 export default function Navbar({ children }: NavbarProps) {
   return (
-    <nav className="flex h-[65px] bg-base-100 p-2">
-      <div className="flex flex-1 sm:flex-row sm:pl-2">
+    <nav className="flex h-[75px] justify-between border-b border-base-100 bg-base-200 py-3 pl-6 pr-2 shadow-sm sm:px-10">
+      <div className="flex items-center sm:flex-row sm:pl-2">
         <ChinguMenu />
       </div>
-      <div className="flex items-center space-x-2 sm:gap-x-10">{children}</div>
+      <div className="flex items-center gap-x-8 sm:gap-x-10">{children}</div>
     </nav>
   );
 }
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 1cb19daf..2c638bed 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -30,7 +30,7 @@ export default function PageButton({
   ariaLabel,
 }: PageButtonProps) {
   const buttonStyles = `${
-    isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem] px-0"
+    isOpen ? "flex justify-start w-full" : "h-[3.125rem] w-[3.125rem] p-0"
   }`;
 
   const getButtonBackgroundStyle = (page: string) =>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index a74b76d3..0f7cb811 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -146,15 +146,15 @@ export default function Sidebar() {
   return (
     <aside
       className={`${
-        isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } flex h-full flex-col justify-between border-r border-neutral-content bg-base-200 text-center shadow-[4px_4px_4px_0] shadow-neutral-focus/5`}
+        isOpenSidebar ? "w-[15.626rem]" : "w-auto"
+      } flex h-full flex-col justify-between border-r border-base-100 bg-base-200 text-center shadow-md`}
     >
       <div
         className={`flex flex-col ${
-          isOpenSidebar ? "items-start pl-10" : "items-center"
-        } pt-6`}
+          isOpenSidebar ? "items-start px-6 pt-6" : "items-center"
+        } px-5 pt-6`}
       >
-        <ul>
+        <ul className="w-full">
           {pagesProperties.map((element) => (
             <PageButton
               key={element.name}
@@ -186,7 +186,7 @@ export default function Sidebar() {
           </ul>
         )}
       </div>
-      <div className="flex min-h-[80px] flex-col items-end justify-start border-t border-neutral-content pr-6 pt-4">
+      <div className="flex min-h-[80px] flex-col items-end justify-start border-t border-base-100 pr-6 pt-4">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>