diff --git a/src/components/display/fewlines/Account/Account.tsx b/src/components/display/fewlines/Account/Account.tsx
index d6f8b6064..b4c9db5cb 100644
--- a/src/components/display/fewlines/Account/Account.tsx
+++ b/src/components/display/fewlines/Account/Account.tsx
@@ -1,84 +1,41 @@
-import Link from "next/link";
 import React from "react";
-import styled from "styled-components";
 
 import { Container } from "../Container";
 import { H1 } from "../H1/H1";
 import { H2 } from "../H2/H2";
 import { LoginsIcon } from "../LoginsIcon/LoginsIcon";
-import { NeutralLink } from "../NeutralLink/NeutralLink";
-import RightChevron from "../RightChevron/RightChevron";
+import { SectionListItem } from "../SectionListItem/SectionListItem";
 import { SecurityIcon } from "../SecurityIcon/SecurityIcon";
-import { ShadowBox } from "../ShadowBox/ShadowBox";
+
+export const SECTION_LIST_CONTENT = {
+  LOGINS: {
+    text:
+      "Manage your logins options, including emails, phone numbers and social logins",
+    icon: <LoginsIcon />,
+  },
+  SECURITY: {
+    text:
+      "Set or change your password. You can check your connections history here",
+    icon: <SecurityIcon />,
+  },
+};
 
 const Account: React.FC = () => {
   return (
     <Container>
       <H1>Welcome to your account</H1>
       <H2>First name last name</H2>
-      <ShadowBox>
-        <Content>
-          <Link href="/account/logins">
-            <NeutralLink>
-              <Flex>
-                <LoginsIcon />
-                <TextBox>
-                  <Span>LOGINS</Span>
-                  <div>
-                    Manage your logins options, including emails, phone numbers
-                    and social logins
-                  </div>
-                </TextBox>
-                <RightChevron />
-              </Flex>
-            </NeutralLink>
-          </Link>
-        </Content>
-      </ShadowBox>
-      <ShadowBox>
-        <Content>
-          <Link href="/account/security">
-            <NeutralLink>
-              <Flex>
-                <SecurityIcon />
-                <TextBox>
-                  <Span>SECURITY</Span>
-                  <div>
-                    Set or change your password. You can check your connections
-                    history here,
-                  </div>
-                </TextBox>
-                <RightChevron />
-              </Flex>
-            </NeutralLink>
-          </Link>
-        </Content>
-      </ShadowBox>
+      {Object.entries(SECTION_LIST_CONTENT).map(([sectionName, content]) => {
+        return (
+          <SectionListItem
+            key={sectionName}
+            sectionName={sectionName}
+            content={content}
+          />
+        );
+      })}
     </Container>
   );
 };
 
 export default Account;
-
-const Content = styled.div`
-  cursor: pointer;
-`;
-
-const Flex = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${({ theme }) => theme.spaces.xs};
-`;
-
-export const TextBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  max-width: 50%;
-  font-size: ${({ theme }) => theme.fontSizes.xxs};
-  line-height: ${({ theme }) => theme.lineHeights.title};
-`;
-
-export const Span = styled.p`
-  font-size: ${({ theme }) => theme.fontSizes.s};
-`;
diff --git a/src/components/display/fewlines/SectionListItem/SectionListItem.tsx b/src/components/display/fewlines/SectionListItem/SectionListItem.tsx
new file mode 100644
index 000000000..89829bd3f
--- /dev/null
+++ b/src/components/display/fewlines/SectionListItem/SectionListItem.tsx
@@ -0,0 +1,61 @@
+import Link from "next/link";
+import React from "react";
+import styled from "styled-components";
+
+import { NeutralLink } from "../NeutralLink/NeutralLink";
+import { RightChevron } from "../RightChevron/RightChevron";
+import { ShadowBox } from "../ShadowBox/ShadowBox";
+
+type SectionListItemProps = {
+  sectionName: string;
+  content: { text: string; icon: JSX.Element };
+};
+
+export const SectionListItem: React.FC<SectionListItemProps> = ({
+  sectionName,
+  content,
+}) => {
+  const { text, icon } = content;
+
+  return (
+    <>
+      <ShadowBox>
+        <Content>
+          <Link href={`/account/${sectionName.toLocaleLowerCase()}`}>
+            <NeutralLink>
+              <Flex>
+                {icon}
+                <TextBox>
+                  <SectionName>{sectionName}</SectionName>
+                  {text}
+                </TextBox>
+                <RightChevron />
+              </Flex>
+            </NeutralLink>
+          </Link>
+        </Content>
+      </ShadowBox>
+    </>
+  );
+};
+
+const Content = styled.div`
+  cursor: pointer;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({ theme }) => theme.spaces.xs};
+`;
+
+export const TextBox = styled.div`
+  max-width: 50%;
+  font-size: ${({ theme }) => theme.fontSizes.xs};
+  line-height: ${({ theme }) => theme.lineHeights.title};
+`;
+
+export const SectionName = styled.p`
+  font-size: ${({ theme }) => theme.fontSizes.s};
+`;
diff --git a/tests/pages/AccountPage.test.tsx b/tests/pages/AccountPage.test.tsx
index 70ab0a7e0..8aa84f5c6 100644
--- a/tests/pages/AccountPage.test.tsx
+++ b/tests/pages/AccountPage.test.tsx
@@ -1,14 +1,14 @@
 import { mount } from "enzyme";
-import { execPath } from "process";
 import React from "react";
 
-import {
-  TextBox,
-  Span,
-} from "@src/components/display/fewlines/Account/Account";
+import { SECTION_LIST_CONTENT } from "@src/components/display/fewlines/Account/Account";
 import { AccountPage } from "@src/components/display/fewlines/Account/Account.stories";
 import { H1 } from "@src/components/display/fewlines/H1/H1";
 import { H2 } from "@src/components/display/fewlines/H2/H2";
+import {
+  TextBox,
+  SectionName,
+} from "@src/components/display/fewlines/SectionListItem/SectionListItem";
 import { ShadowBox } from "@src/components/display/fewlines/ShadowBox/ShadowBox";
 import { AccountApp } from "@src/pages/_app";
 
@@ -50,20 +50,14 @@ describe("AccountPage", () => {
     const shadowBoxes = component.find(ShadowBox);
     expect(shadowBoxes).toHaveLength(2);
 
-    const accountSectionListName = ["LOGINS", "SECURITY"];
-    const accountSectionListContent = [
-      "Manage your logins options, including emails, phone numbers and social logins",
-      "Set or change your password. You can check your connections history here,",
-    ];
-
     shadowBoxes.forEach((shadowBox, index) => {
       const textBox = shadowBox.find(TextBox);
+      const [sectionName, { text }] = Object.entries(SECTION_LIST_CONTENT)[
+        index
+      ];
 
-      expect(textBox.find(Span).text()).toEqual(accountSectionListName[index]);
-
-      expect(
-        textBox.contains(<div>{accountSectionListContent[index]}</div>),
-      ).toEqual(true);
+      expect(textBox.find(SectionName).text()).toEqual(sectionName);
+      expect(textBox.contains(text)).toEqual(true);
     });
   });
 });