diff --git a/frontend/__tests__/SoftwareIndex.test.tsx b/frontend/__tests__/SoftwareIndex.test.tsx
deleted file mode 100644
index d0cba5d18..000000000
--- a/frontend/__tests__/SoftwareIndex.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2022 - 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {render, screen} from '@testing-library/react'
-import SoftwareIndexPage from '../pages/software/index'
-import {WrappedComponentWithProps} from '../utils/jest/WrappedComponents'
-import {mockResolvedValue} from '../utils/jest/mockFetch'
-
-// mock fetch response
-import softwareItem from './__mocks__/softwareItem.json'
-import {RsdUser} from '../auth'
-
-const mockedResponse=[softwareItem]
-
-describe('pages/software/index.tsx', () => {
-  beforeEach(() => {
-    mockResolvedValue(mockedResponse, {
-      status:206,
-      headers:{
-        // mock getting Content-Range from the header
-        get:()=>'0-11/200'
-      },
-      statusText:'OK',
-    })
-  })
-
-  it('renders heading with the title Software', async() => {
-    render(WrappedComponentWithProps(
-      SoftwareIndexPage, {
-        props: {
-          count:200,
-          page:0,
-          rows:12,
-          software:mockedResponse,
-          tags:[],
-        },
-        // user session
-        session:{
-          status: 'missing',
-          token: 'test-token',
-          user: {name:'Test user'} as RsdUser
-        }
-      }
-    ))
-    const heading = await screen.findByRole('heading',{
-      name: 'Software'
-    })
-    expect(heading).toBeInTheDocument()
-    expect(heading.innerHTML).toEqual('Software')
-  })
-  it('renders software card title',async()=>{
-    render(WrappedComponentWithProps(
-      SoftwareIndexPage, {
-        props: {
-          count:200,
-          page:0,
-          rows:12,
-          software:mockedResponse,
-          tags:[]
-        },
-        // user session
-        session:{
-          status: 'missing',
-          token: 'test-token',
-          user: {name:'Test user'} as RsdUser
-        }
-      }
-    ))
-    const cardTitle = mockedResponse[0].brand_name
-    const card = await screen.findByText(cardTitle)
-    expect(card).toBeInTheDocument()
-  })
-})
diff --git a/frontend/__tests__/SoftwareOverview.test.tsx b/frontend/__tests__/SoftwareOverview.test.tsx
new file mode 100644
index 000000000..efd1a9204
--- /dev/null
+++ b/frontend/__tests__/SoftwareOverview.test.tsx
@@ -0,0 +1,126 @@
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 - 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {render, screen, within} from '@testing-library/react'
+import {WithAppContext} from '~/utils/jest/WithAppContext'
+
+import SoftwareOverviewPage from '../pages/software/index'
+import {LayoutType} from '~/components/software/overview/SearchSection'
+
+// mocked data & props
+import mockData from './__mocks__/softwareOverviewData.json'
+const mockProps = {
+  search:null,
+  keywords:null,
+  prog_lang: null,
+  licenses:null,
+  order:null,
+  page: 1,
+  rows: 12,
+  count: 408,
+  layout: 'masonry' as LayoutType,
+  keywordsList: mockData.keywordsList,
+  languagesList: mockData.languagesList,
+  licensesList: mockData.licensesList,
+  software: mockData.software as any,
+  highlights: mockData.highlights as any
+}
+
+describe('pages/software/index.tsx', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders title All software', () => {
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const heading = screen.getByRole('heading',{
+      name: 'All software'
+    })
+    expect(heading).toBeInTheDocument()
+  })
+  it('renders highlights section with all (5) items', () => {
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const carousel = screen.getByTestId('highlights-carousel')
+    const cards = screen.getAllByTestId('highlights-card')
+    expect(cards.length).toEqual(mockData.highlights.length)
+  })
+
+  it('renders software filter panel with orderBy and 3 filters (combobox)', () => {
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    // get reference to filter panel
+    const panel = screen.getByTestId('software-filters-panel')
+    // find order by testid
+    const order = within(panel).getByTestId('filters-order-by')
+    // should have 3 filters
+    const filters = within(panel).getAllByRole('combobox')
+    expect(filters.length).toEqual(3)
+    // screen.debug(filters)
+  })
+
+  it('renders searchbox with placeholder Find software', async () => {
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    screen.getByPlaceholderText('Find software')
+  })
+
+  it('renders layout options (toggle button group)', async () => {
+    mockProps.layout='masonry'
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const buttonGroup = screen.getByTestId('card-layout-options')
+  })
+
+  it('renders (12) masonry cards', async () => {
+    mockProps.layout='masonry'
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const cards = screen.getAllByTestId('software-masonry-card')
+    expect(cards.length).toEqual(mockProps.software.length)
+  })
+
+  it('renders (12) grid cards', async () => {
+    mockProps.layout='grid'
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const cards = screen.getAllByTestId('software-grid-card')
+    expect(cards.length).toEqual(mockProps.software.length)
+  })
+
+  it('renders (12) list items', async () => {
+    mockProps.layout='list'
+    render(
+      <WithAppContext>
+        <SoftwareOverviewPage {...mockProps} />
+      </WithAppContext>
+    )
+    const cards = screen.getAllByTestId('software-list-item')
+    expect(cards.length).toEqual(mockProps.software.length)
+  })
+
+})
diff --git a/frontend/__tests__/__mocks__/softwareOverviewData.json b/frontend/__tests__/__mocks__/softwareOverviewData.json
new file mode 100644
index 000000000..699c81f1f
--- /dev/null
+++ b/frontend/__tests__/__mocks__/softwareOverviewData.json
@@ -0,0 +1,497 @@
+{
+  "keywordsList":[
+    {
+      "keyword": "Big data",
+      "keyword_cnt": 46
+    },
+    {
+      "keyword": "GPU",
+      "keyword_cnt": 33
+    },
+    {
+      "keyword": "High performance computing",
+      "keyword_cnt": 23
+    },
+    {
+      "keyword": "Image processing",
+      "keyword_cnt": 33
+    },
+    {
+      "keyword": "Inter-operability & linked data",
+      "keyword_cnt": 36
+    },
+    {
+      "keyword": "Machine learning",
+      "keyword_cnt": 17
+    },
+    {
+      "keyword": "Multi-scale & multi model simulations",
+      "keyword_cnt": 32
+    },
+    {
+      "keyword": "Optimized data handling",
+      "keyword_cnt": 38
+    },
+    {
+      "keyword": "Real time data analysis",
+      "keyword_cnt": 37
+    },
+    {
+      "keyword": "Text analysis & natural language processing",
+      "keyword_cnt": 33
+    },
+    {
+      "keyword": "Visualization",
+      "keyword_cnt": 38
+    },
+    {
+      "keyword": "Workflow technologies",
+      "keyword_cnt": 31
+    }
+  ],
+  "languagesList":[
+    {
+      "prog_language": "C++",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "CMake",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "CSS",
+      "prog_language_cnt": 4
+    },
+    {
+      "prog_language": "Dart",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "Dockerfile",
+      "prog_language_cnt": 9
+    },
+    {
+      "prog_language": "GLSL",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "Go",
+      "prog_language_cnt": 3
+    },
+    {
+      "prog_language": "HTML",
+      "prog_language_cnt": 6
+    },
+    {
+      "prog_language": "Java",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "JavaScript",
+      "prog_language_cnt": 4
+    },
+    {
+      "prog_language": "Jinja",
+      "prog_language_cnt": 2
+    },
+    {
+      "prog_language": "Jupyter Notebook",
+      "prog_language_cnt": 2
+    },
+    {
+      "prog_language": "Makefile",
+      "prog_language_cnt": 4
+    },
+    {
+      "prog_language": "PLpgSQL",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "Python",
+      "prog_language_cnt": 5
+    },
+    {
+      "prog_language": "R",
+      "prog_language_cnt": 4
+    },
+    {
+      "prog_language": "Ruby",
+      "prog_language_cnt": 3
+    },
+    {
+      "prog_language": "Shell",
+      "prog_language_cnt": 9
+    },
+    {
+      "prog_language": "Swift",
+      "prog_language_cnt": 1
+    },
+    {
+      "prog_language": "TeX",
+      "prog_language_cnt": 3
+    },
+    {
+      "prog_language": "TypeScript",
+      "prog_language_cnt": 1
+    }
+  ],
+  "licensesList":[
+    {
+      "license": "Apache-2.0",
+      "license_cnt": 68
+    },
+    {
+      "license": "CC-BY-4.0",
+      "license_cnt": 67
+    },
+    {
+      "license": "CC-BY-NC-ND-3.0",
+      "license_cnt": 81
+    },
+    {
+      "license": "GPL-2.0-or-later",
+      "license_cnt": 68
+    },
+    {
+      "license": "LGPL-2.0-or-later",
+      "license_cnt": 72
+    },
+    {
+      "license": "MIT",
+      "license_cnt": 84
+    }
+  ],
+  "software":[
+    {
+      "id": "bdf9dd4d-46f7-42b7-87e1-173857b9238f",
+      "slug": "software-avon-sausages-dynamic",
+      "brand_name": "Software: Avon Sausages dynamic",
+      "short_statement": "Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals",
+      "image_id": "b5f66923d5533c42f87cfcac398275705b13e59d",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 1,
+      "mention_cnt": 4,
+      "is_published": true,
+      "keywords": [
+        "Text analysis & natural language processing"
+      ],
+      "keywords_text": "Text analysis & natural language processing",
+      "prog_lang": null,
+      "licenses": [
+        "MIT",
+        "Apache-2.0"
+      ]
+    },
+    {
+      "id": "f2da6206-e693-49b8-a33a-5f5963ccb5bf",
+      "slug": "software-override-mazda-data",
+      "brand_name": "Software: override Mazda Data",
+      "short_statement": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+      "image_id": "425a1fac3db6f89d5b258cb5a0bf0bbeaa31159f",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 3,
+      "mention_cnt": 3,
+      "is_published": true,
+      "keywords": [
+        "Visualization"
+      ],
+      "keywords_text": "Visualization",
+      "prog_lang": null,
+      "licenses": null
+    },
+    {
+      "id": "7da44697-4227-4088-b78d-4d52ee177ab4",
+      "slug": "real-software-hmph-virginia-armenian",
+      "brand_name": "Real software: hmph Virginia Armenian",
+      "short_statement": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+      "image_id": "3fbd02ad27d9c3d11f90431c4ff48f94bb9b9af2",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 2,
+      "mention_cnt": 1,
+      "is_published": true,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": null,
+      "licenses": [
+        "LGPL-2.0-or-later",
+        "CC-BY-NC-ND-3.0"
+      ]
+    },
+    {
+      "id": "542e8504-5a07-46d1-a931-b1d048024368",
+      "slug": "real-software-woman",
+      "brand_name": "Real software: woman",
+      "short_statement": "The Football Is Good For Training And Recreational Purposes",
+      "image_id": "b5f66923d5533c42f87cfcac398275705b13e59d",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 2,
+      "mention_cnt": 3,
+      "is_published": true,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": null,
+      "licenses": [
+        "CC-BY-4.0"
+      ]
+    },
+    {
+      "id": "bf5b70f1-0df8-45dc-aa5b-7b3055a0faf8",
+      "slug": "real-software-berkshire-buckinghamshire-policy",
+      "brand_name": "Real software: Berkshire Buckinghamshire policy",
+      "short_statement": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
+      "image_id": "795cb8f47ea710c8c138adec049bea9c98246149",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 2,
+      "mention_cnt": 8,
+      "is_published": true,
+      "keywords": [
+        "Real time data analysis"
+      ],
+      "keywords_text": "Real time data analysis",
+      "prog_lang": null,
+      "licenses": [
+        "MIT",
+        "CC-BY-NC-ND-3.0"
+      ]
+    },
+    {
+      "id": "5b18576d-3ef2-4ad3-9742-d2ada295bca8",
+      "slug": "real-software-gasoline-magenta",
+      "brand_name": "Real software: Gasoline magenta",
+      "short_statement": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+      "image_id": "b80a775f137291e3298bd0c2585fa9717db9fc7c",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 3,
+      "mention_cnt": 2,
+      "is_published": true,
+      "keywords": [
+        "High performance computing"
+      ],
+      "keywords_text": "High performance computing",
+      "prog_lang": null,
+      "licenses": [
+        "CC-BY-NC-ND-3.0"
+      ]
+    },
+    {
+      "id": "68bc6c6b-2c7f-4f29-9066-1cac93b54e2e",
+      "slug": "real-software-female-gah-capitulation-southwest-road-avon-mole-georgia-missouri-connect-checking-ascii-gastonia-country-grocery-pink-world-css-smart",
+      "brand_name": "Real software: female gah capitulation Southwest Road Avon mole Georgia Missouri connect Checking ASCII Gastonia Country Grocery pink World CSS Smart",
+      "short_statement": "The Football Is Good For Training And Recreational Purposes",
+      "image_id": "1727af42cf0deb5fcc30befca450d1a3d4927eab",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 1,
+      "mention_cnt": 10,
+      "is_published": true,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": null,
+      "licenses": [
+        "LGPL-2.0-or-later",
+        "CC-BY-NC-ND-3.0"
+      ]
+    },
+    {
+      "id": "6da8bfe5-2a98-4071-9546-996903da48fa",
+      "slug": "real-software-bandwidth",
+      "brand_name": "Real software: bandwidth",
+      "short_statement": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+      "image_id": "a27c82df7e1d2b13757ede271dd652c57d37d5d1",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": null,
+      "mention_cnt": 4,
+      "is_published": true,
+      "keywords": [
+        "Big data",
+        "Workflow technologies"
+      ],
+      "keywords_text": "Big data Workflow technologies",
+      "prog_lang": null,
+      "licenses": [
+        "GPL-2.0-or-later"
+      ]
+    },
+    {
+      "id": "8fd29445-963e-49c7-b5e3-c33f6fdc241b",
+      "slug": "real-software-borders-maxime",
+      "brand_name": "Real software: Borders maxime",
+      "short_statement": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
+      "image_id": "0734d6a1e1e8e4e99c9d3d78c6fd635c3e41699f",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 3,
+      "mention_cnt": 8,
+      "is_published": true,
+      "keywords": [
+        "GPU",
+        "Optimized data handling"
+      ],
+      "keywords_text": "GPU Optimized data handling",
+      "prog_lang": null,
+      "licenses": [
+        "Apache-2.0"
+      ]
+    },
+    {
+      "id": "04e967b5-0de5-450b-8fc6-99dccf526953",
+      "slug": "real-software-salmon-minivan-unbranded-sedan",
+      "brand_name": "Real software: salmon Minivan Unbranded Sedan",
+      "short_statement": "The Football Is Good For Training And Recreational Purposes",
+      "image_id": "786e0df3a302c9e02b36710ee634a7c49f5b4d2a",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 1,
+      "mention_cnt": 2,
+      "is_published": true,
+      "keywords": [
+        "GPU"
+      ],
+      "keywords_text": "GPU",
+      "prog_lang": null,
+      "licenses": null
+    },
+    {
+      "id": "48fd3afc-65dc-4f6b-ab61-662db9eb97f8",
+      "slug": "real-software-incredible-indexing-violet",
+      "brand_name": "Real software: Incredible indexing violet",
+      "short_statement": "New range of formal shirts are designed keeping you in mind. With fits and styling that will make you stand apart",
+      "image_id": "3fbd02ad27d9c3d11f90431c4ff48f94bb9b9af2",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 4,
+      "mention_cnt": 1,
+      "is_published": true,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": [
+        "R"
+      ],
+      "licenses": [
+        "CC-BY-NC-ND-3.0",
+        "MIT"
+      ]
+    },
+    {
+      "id": "b0e51739-bbd5-4a70-8639-38ad0bf76c16",
+      "slug": "real-software-southeast-southwest-copy-zirconium",
+      "brand_name": "Real software: Southeast Southwest copy Zirconium",
+      "short_statement": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+      "image_id": "8ac56d71326e8acc332de83a585f7b87e111957c",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "contributor_cnt": 2,
+      "mention_cnt": 10,
+      "is_published": true,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": [
+        "Python"
+      ],
+      "licenses": [
+        "MIT",
+        "LGPL-2.0-or-later"
+      ]
+    }
+  ],
+  "highlights":[
+    {
+      "id": "20a59ce6-96fc-4257-81ab-d235d73822a0",
+      "slug": "real-software-facilitate-evolve-uganda",
+      "brand_name": "Real software: facilitate evolve Uganda",
+      "short_statement": "New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016",
+      "image_id": "6404fe74f01e90845f37f5e8f36c914596de48c5",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "is_published": true,
+      "contributor_cnt": 5,
+      "mention_cnt": 10,
+      "keywords": [
+        "GPU",
+        "Inter-operability & linked data"
+      ],
+      "keywords_text": "GPU Inter-operability & linked data",
+      "prog_lang": [
+        "Go",
+        "Ruby",
+        "Shell",
+        "Makefile",
+        "Dockerfile"
+      ],
+      "licenses": null,
+      "position": 1
+    },
+    {
+      "id": "cd5bb638-32af-494b-b00d-0c28ccc4ba7f",
+      "slug": "real-software-sticky-phosphorus-json-enable",
+      "brand_name": "Real software: sticky Phosphorus JSON enable",
+      "short_statement": "The beautiful range of Apple Naturalé that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients",
+      "image_id": "f3921426c70da70364e528bca17ecce65721120b",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "is_published": true,
+      "contributor_cnt": 5,
+      "mention_cnt": 10,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": null,
+      "licenses": [
+        "CC-BY-4.0",
+        "CC-BY-NC-ND-3.0"
+      ],
+      "position": 2
+    },
+    {
+      "id": "eb259590-bedd-4e41-9cff-b8f168752391",
+      "slug": "real-software-utilize-orange-female-actinium",
+      "brand_name": "Real software: utilize orange female Actinium",
+      "short_statement": "The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J",
+      "image_id": "b5f66923d5533c42f87cfcac398275705b13e59d",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "is_published": true,
+      "contributor_cnt": 4,
+      "mention_cnt": 10,
+      "keywords": [
+        "Inter-operability & linked data"
+      ],
+      "keywords_text": "Inter-operability & linked data",
+      "prog_lang": null,
+      "licenses": null,
+      "position": 3
+    },
+    {
+      "id": "873bee1f-afd4-4e94-a0b2-8b3bf57392cc",
+      "slug": "real-software-rustic-into-buckinghamshire",
+      "brand_name": "Real software: Rustic into Buckinghamshire",
+      "short_statement": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
+      "image_id": "b80a775f137291e3298bd0c2585fa9717db9fc7c",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "is_published": true,
+      "contributor_cnt": 2,
+      "mention_cnt": 10,
+      "keywords": [
+        "Inter-operability & linked data"
+      ],
+      "keywords_text": "Inter-operability & linked data",
+      "prog_lang": null,
+      "licenses": [
+        "GPL-2.0-or-later"
+      ],
+      "position": 4
+    },
+    {
+      "id": "b0e51739-bbd5-4a70-8639-38ad0bf76c16",
+      "slug": "real-software-southeast-southwest-copy-zirconium",
+      "brand_name": "Real software: Southeast Southwest copy Zirconium",
+      "short_statement": "The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive",
+      "image_id": "8ac56d71326e8acc332de83a585f7b87e111957c",
+      "updated_at": "2023-05-11T16:29:51.35019+00:00",
+      "is_published": true,
+      "contributor_cnt": 2,
+      "mention_cnt": 10,
+      "keywords": null,
+      "keywords_text": null,
+      "prog_lang": [
+        "Python"
+      ],
+      "licenses": [
+        "MIT",
+        "LGPL-2.0-or-later"
+      ],
+      "position": 5
+    }
+  ]
+}
\ No newline at end of file
diff --git a/frontend/__tests__/__mocks__/softwareOverviewData.json.license b/frontend/__tests__/__mocks__/softwareOverviewData.json.license
new file mode 100644
index 000000000..3bb7d18c2
--- /dev/null
+++ b/frontend/__tests__/__mocks__/softwareOverviewData.json.license
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+SPDX-FileCopyrightText: 2022 - 2023 dv4all
+
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/components/cards/CardTitleSubtitle.tsx b/frontend/components/cards/CardTitleSubtitle.tsx
new file mode 100644
index 000000000..a3bb980fc
--- /dev/null
+++ b/frontend/components/cards/CardTitleSubtitle.tsx
@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type CardTitleSubtitleProps = {
+  title: string
+  subtitle:string
+}
+
+export default function CardTitleSubtitle({title,subtitle}:CardTitleSubtitleProps) {
+  return (
+    <>
+    <h2 className="text-xl font-medium line-clamp-1">
+      {title}
+    </h2>
+    <div className="py-2">
+      <p className="text-gray-600 line-clamp-3 break-words">
+        {subtitle}
+      </p>
+    </div>
+    </>
+  )
+}
diff --git a/frontend/components/software/overview/KeywordList.tsx b/frontend/components/cards/KeywordList.tsx
similarity index 100%
rename from frontend/components/software/overview/KeywordList.tsx
rename to frontend/components/cards/KeywordList.tsx
diff --git a/frontend/components/software/overview/ProgrammingLanguageList.tsx b/frontend/components/cards/ProgrammingLanguageList.tsx
similarity index 100%
rename from frontend/components/software/overview/ProgrammingLanguageList.tsx
rename to frontend/components/cards/ProgrammingLanguageList.tsx
diff --git a/frontend/components/software/overview/SoftwareMetrics.tsx b/frontend/components/cards/SoftwareMetrics.tsx
similarity index 95%
rename from frontend/components/software/overview/SoftwareMetrics.tsx
rename to frontend/components/cards/SoftwareMetrics.tsx
index 4efb7e837..4ecf36ab6 100644
--- a/frontend/components/software/overview/SoftwareMetrics.tsx
+++ b/frontend/components/cards/SoftwareMetrics.tsx
@@ -31,7 +31,7 @@ export default function SoftwareMetrics({contributor_cnt,mention_cnt,downloads}:
       {(downloads && downloads > 0) &&
         <div className="flex gap-2 items-center">
           <DownloadsIcon />
-          <span className="text-sm">34K</span>
+          <span className="text-sm">{downloads}</span>
         </div>
       }
     </div>
diff --git a/frontend/components/layout/ImageWithPlaceholder.tsx b/frontend/components/layout/ImageWithPlaceholder.tsx
index 687ddffbc..29efbcd9c 100644
--- a/frontend/components/layout/ImageWithPlaceholder.tsx
+++ b/frontend/components/layout/ImageWithPlaceholder.tsx
@@ -12,22 +12,33 @@ export type ImageWithPlaceholderProps = {
   bgSize?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down',
   bgPosition?: string
   placeholder?: string
+  width?: string
+  height?: string
+  type?: 'gradient' | 'icon'
 }
 
 export default function ImageWithPlaceholder({
-  src, alt, className, bgSize = 'contain', bgPosition = 'center', placeholder
+  src, alt, className, bgSize = 'contain', bgPosition = 'center', placeholder,
+  width = '4rem', height = '4rem', type='icon'
 }: ImageWithPlaceholderProps
 ) {
 
   if (!src) {
+    if (type === 'gradient') {
+      return (
+        <div
+          className="w-full bg-gradient-to-br from-base-300 from-0% via-base-100 via-70% to-base-100"
+        />
+      )
+    }
     return (
       <div
         className={`flex flex-col justify-center items-center text-grey-500 rounded-sm ${className ?? ''}`}
       >
         <PhotoSizeSelectActualOutlinedIcon
           sx={{
-            width: '4rem',
-            height: '4rem'
+            width,
+            height
           }}
         />
         <div className="uppercase text-center">{placeholder}</div>
diff --git a/frontend/components/mention/MentionNote.tsx b/frontend/components/mention/MentionNote.tsx
index ac83ea50c..881aea638 100644
--- a/frontend/components/mention/MentionNote.tsx
+++ b/frontend/components/mention/MentionNote.tsx
@@ -1,11 +1,11 @@
-// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2022 dv4all
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 - 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
 export default function MentionNote({note}: { note: string | null }) {
   if (note) {
-    return <div className="mt-2 text-sm opacity-60">{note}</div>
+    return <div className="mt-2 text-sm opacity-70">{note}</div>
   }
   return null
 }
diff --git a/frontend/components/software/highlights/HighlightsCard.tsx b/frontend/components/software/highlights/HighlightsCard.tsx
new file mode 100644
index 000000000..643e9c738
--- /dev/null
+++ b/frontend/components/software/highlights/HighlightsCard.tsx
@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link'
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import {getImageUrl} from '~/utils/editImage'
+import KeywordList from '~/components/cards/KeywordList'
+import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
+import ProgrammingLanguageList from '~/components/cards//ProgrammingLanguageList'
+import SoftwareMetrics from '~/components/cards/SoftwareMetrics'
+
+type SoftwareCardProps = {
+  item: SoftwareListItem
+}
+
+export default function HighlightsCard({item}:SoftwareCardProps){
+
+  const visibleNumberOfKeywords: number = 3
+  const visibleNumberOfProgLang: number = 3
+
+  return (
+    <Link
+      data-testid="highlights-card"
+      key={item.id}
+      href={`/software/${item.slug}`}
+      className="hover:text-inherit">
+      <div className="flex-shrink-0 transition bg-white shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none flex flex-col sm:flex-row w-[20rem] sm:w-full" >
+        {/* Cover image */}
+        {
+          item.image_id &&
+          <img
+            className="object-contain object-left w-full rounded-tr-lg rounded-tl-lg sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-none sm:w-[20rem] sm:h-[20rem]"
+            src={`${getImageUrl(item.image_id) ?? ''}`}
+            alt={`Cover image for ${item.brand_name}`}
+          />
+        }
+
+        {/* Card content */}
+        <div className="flex flex-col p-4 max-w-[22rem]">
+          <CardTitleSubtitle
+            title={item.brand_name}
+            subtitle={item.short_statement}
+          />
+
+          {/* keywords */}
+          <div className="flex-1 overflow-hidden">
+            <KeywordList
+              keywords={item.keywords}
+              visibleNumberOfKeywords={visibleNumberOfKeywords}
+            />
+          </div>
+
+          <div className="flex gap-2 justify-between mt-8">
+            {/* Languages */}
+            <ProgrammingLanguageList
+              prog_lang={item.prog_lang}
+              visibleNumberOfProgLang={visibleNumberOfProgLang}
+            />
+            {/* Metrics */}
+            <SoftwareMetrics
+              contributor_cnt={item.contributor_cnt}
+              mention_cnt={item.mention_cnt}
+              downloads={item.downloads}
+            />
+          </div>
+        </div>
+      </div>
+  </Link>
+  )
+}
diff --git a/frontend/components/software/highlights/HighlightsCarousel.tsx b/frontend/components/software/highlights/HighlightsCarousel.tsx
index f8c6db136..5cddaa69d 100644
--- a/frontend/components/software/highlights/HighlightsCarousel.tsx
+++ b/frontend/components/software/highlights/HighlightsCarousel.tsx
@@ -5,11 +5,13 @@
 
 import {UIEventHandler, useRef, useState} from 'react'
 import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights'
-import {SoftwareCard} from '~/components/software/overview/SoftwareCard'
+import LeftButton from './LeftButton'
+import RightButton from './RightButton'
+import HighlightsCard from './HighlightsCard'
 
 export const HighlightsCarousel = ({items=[]}: {items:SoftwareHighlight[]}) => {
-
-  const canrdMovement: number = 680 // card size + margin
+  // card size + margin
+  const cardMovement: number = 680
   // Keep track of the current scroll position of the carousel.
   const [scrollPosition, setScrollPosition] = useState(0)
   const carousel = useRef<HTMLDivElement>(null)
@@ -18,13 +20,13 @@ export const HighlightsCarousel = ({items=[]}: {items:SoftwareHighlight[]}) => {
   const handleNextClick = () => {
     // move the scroll to the left
     if (carousel.current) {
-      carousel.current.scrollLeft -= canrdMovement
+      carousel.current.scrollLeft += cardMovement
     }
   }
 
   const handlePrevClick = () => {
     if (carousel.current) {
-      carousel.current.scrollLeft += canrdMovement
+      carousel.current.scrollLeft -= cardMovement
     }
   }
 
@@ -34,50 +36,27 @@ export const HighlightsCarousel = ({items=[]}: {items:SoftwareHighlight[]}) => {
   }
 
   return (
-    <div className="group relative w-full overflow-x-visible" >
+    <div
+      data-testid="highlights-carousel"
+      className="group relative w-full overflow-x-visible" >
       {/* Left Button */}
       {scrollPosition > 0 &&
-        <button
-          onClick={handleNextClick}
-          className='transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-40 hover:cursor-pointer hover:opacity-100 absolute left-8 top-1/2 z-10'
-        >
-          <div
-            className='text-white bg-black w-16 h-16 -mt-8 rounded-full flex items-center justify-center'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
-              viewBox="0 0 256 256">
-              <path fill="currentColor"
-                d="M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z"></path>
-            </svg>
-          </div>
-        </button>
+        <LeftButton handlePrevClick={handlePrevClick} />
       }
-
       {/* Right Button */}
-      <button
-        onClick={handlePrevClick}
-        className='transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-50 hover:cursor-pointer hover:opacity-100 absolute right-8 top-1/2 z-10'
-      >
-        <div className='text-white bg-black w-16 h-16 -mt-8 rounded-full flex items-center justify-center'>
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
-            viewBox="0 0 256 256">
-            <path fill="currentColor"
-              d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z"></path>
-          </svg>
-        </div>
-      </button>
-
+      <RightButton handleNextClick={handleNextClick} />
       {/* Carousel */}
       <div
         ref={carousel}
         onScroll={handleScroll}
         // snap on mobile only
-        className="flex gap-4 snap-start sm:snap-none scroll-smooth overflow-x-scroll scrollbar-hide p-4 sm:pr-[600px] lg:pl-[100px] 2xl:pl-[400px] "
-        style={{left: -scrollPosition}}>
+        className="flex gap-4 snap-start sm:snap-none scroll-smooth overflow-x-scroll scrollbar-hide p-4 sm:pr-[600px] lg:pl-[100px] 2xl:pl-[400px]"
+        style={{scrollbarWidth:'none',left:-scrollPosition}}>
         {/* render software card in the row direction */}
         {items.map(highlight => (
           <div key={highlight.id}
           className="snap-center flex-shrink-0 hover:scale-[101%] transition duration-500">
-            <SoftwareCard item={highlight} direction={'row'}/>
+            <HighlightsCard item={highlight}/>
           </div>
         ))
       }
diff --git a/frontend/components/software/highlights/LeftButton.tsx b/frontend/components/software/highlights/LeftButton.tsx
new file mode 100644
index 000000000..5e91b7e2b
--- /dev/null
+++ b/frontend/components/software/highlights/LeftButton.tsx
@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export default function LeftButton({handlePrevClick}:{handlePrevClick:()=>void}) {
+  return (
+    <button
+      onClick={handlePrevClick}
+      className='transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-40 hover:cursor-pointer hover:opacity-100 absolute left-8 top-1/2 z-10'
+      aria-label="Previous"
+    >
+      <div
+        className="text-base-100 bg-secondary w-16 h-16 -mt-8 rounded-full flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
+          viewBox="0 0 256 256">
+          <path fill="currentColor"
+            d="M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z"></path>
+        </svg>
+      </div>
+    </button>
+  )
+}
diff --git a/frontend/components/software/highlights/RightButton.tsx b/frontend/components/software/highlights/RightButton.tsx
new file mode 100644
index 000000000..fdfcf0bfb
--- /dev/null
+++ b/frontend/components/software/highlights/RightButton.tsx
@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export default function RightButton({handleNextClick}:{handleNextClick:()=>void}) {
+  return (
+    <button
+      onClick={handleNextClick}
+      className="transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-50 hover:cursor-pointer hover:opacity-100 absolute right-8 top-1/2 z-10"
+      aria-label="Next"
+    >
+      <div className="text-base-100 bg-secondary w-16 h-16 -mt-8 rounded-full flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
+          viewBox="0 0 256 256">
+          <path fill="currentColor"
+            d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z"></path>
+        </svg>
+      </div>
+    </button>
+  )
+}
diff --git a/frontend/components/software/overview/SearchInput.tsx b/frontend/components/software/overview/SearchInput.tsx
index 0b1c9d1d4..42030fd52 100644
--- a/frontend/components/software/overview/SearchInput.tsx
+++ b/frontend/components/software/overview/SearchInput.tsx
@@ -52,7 +52,6 @@ export default function SearchInput({
   return (
     <TextField
       size="small"
-      // variant="filled"
       type="text"
       placeholder={placeholder}
       value={state.value}
diff --git a/frontend/components/software/overview/SearchSection.tsx b/frontend/components/software/overview/SearchSection.tsx
index 2d1295142..8206bbcf1 100644
--- a/frontend/components/software/overview/SearchSection.tsx
+++ b/frontend/components/software/overview/SearchSection.tsx
@@ -9,12 +9,13 @@ import ViewQuiltIcon from '@mui/icons-material/ViewQuilt'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import useMediaQuery from '@mui/material/useMediaQuery'
-
-import SearchInput from './SearchInput'
 import Button from '@mui/material/Button'
 import FormControl from '@mui/material/FormControl'
 import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
+
+import {rowsPerPageOptions} from '~/config/pagination'
+import SearchInput from './SearchInput'
 import {setDocumentCookie} from './userSettings'
 
 export type LayoutType = 'list'|'grid'|'masonry'
@@ -25,7 +26,7 @@ type SearchSectionProps = {
   count: number
   placeholder: string
   layout: LayoutType
-  search?: string
+  search?: string | null
   resetFilters: () => void
   setModal: (modal: boolean) => void
   setView: (view:LayoutType)=>void
@@ -39,7 +40,7 @@ export default function SearchSection({
 }: SearchSectionProps) {
   const smallScreen = useMediaQuery('(max-width:640px)')
   return (
-    <section>
+    <section data-testid="search-section">
       <div className="flex border rounded-md shadow-sm bg-base-100 p-2">
         <SearchInput
           placeholder={placeholder}
@@ -47,6 +48,7 @@ export default function SearchSection({
           defaultValue={search ?? ''}
         />
         <ToggleButtonGroup
+          data-testid="card-layout-options"
           orientation="horizontal"
           value={layout}
           size="small"
@@ -78,9 +80,8 @@ export default function SearchSection({
           }}
           title={`Show ${rows} items on page`}
         >
-          {/* <InputLabel id="select-rows-label">Items</InputLabel> */}
           <Select
-            id="demo-select-rows"
+            id="select-rows"
             labelId="select-rows-label"
             variant="outlined"
             value={rows ?? 12}
@@ -95,9 +96,8 @@ export default function SearchSection({
               border: '1px solid #fff'
             }}
           >
-            <MenuItem value={12}>12</MenuItem>
-            <MenuItem value={24}>24</MenuItem>
-            <MenuItem value={48}>48</MenuItem>
+            {/* load page options from config */}
+            {rowsPerPageOptions.map(item => <MenuItem key={item} value={item}>{item}</MenuItem>) }
           </Select>
         </FormControl>
       </div>
diff --git a/frontend/components/software/overview/SoftwareCard.tsx b/frontend/components/software/overview/SoftwareCard.tsx
deleted file mode 100644
index 7f2a23050..000000000
--- a/frontend/components/software/overview/SoftwareCard.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import Link from 'next/link'
-import {SoftwareListItem} from '~/types/SoftwareTypes'
-import {getImageUrl} from '~/utils/editImage'
-
-type SoftwareCardProps = {
-  item: SoftwareListItem;
-  direction?: string
-}
-
-export const SoftwareCard = ({item, direction}:SoftwareCardProps) => {
-
-  const visibleNumberOfKeywords: number = 3
-  const visibleNumberOfProgLang: number = 3
-  const isHorizontal = !!direction
-
-  return (
-    <Link href={`/software/${item.slug}`} key={item.id} className="hover:text-inherit">
-      <div className={`flex-shrink-0 transition bg-white shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none ${isHorizontal ? 'flex flex-col sm:flex-row w-[20rem] sm:w-full' : 'flex-col'}`} >
-        {/* Cover image */}
-        {
-          item.image_id &&
-          <img
-            className={`
-              object-cover
-              ${isHorizontal
-                ? 'w-full rounded-tr-lg rounded-tl-lg   sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-none sm:w-[20rem] sm:h-[20rem]'
-                : 'w-full rounded-tr-lg rounded-tl-lg'
-              }`}
-          src={`${getImageUrl(item.image_id) ?? ''}`}
-          alt={`Cover image for ${item.brand_name}`}
-          />
-        }
-
-        {/* Card content */}
-        <div className={`flex flex-col p-4 ${isHorizontal ? 'max-w-[350px]' : ''}`}>
-          <h2 className="text-xl font-medium mb-2 line-clamp-1">
-            {item.brand_name}
-          </h2>
-          <p className="text-gray-600 mb-2 line-clamp-3 break-words">
-            {item.short_statement}
-          </p>
-
-          {/* keywords */}
-          <ul className="text-gray-600 text-sm flex flex-wrap gap-3 mt-5">
-            {// limits the keywords to 'visibleNumberOfKeywords' per software.
-              item.keywords?.slice(0, visibleNumberOfKeywords)
-                .map((keyword:string, index: number) => (
-                  <li className="bg-slate-100 px-1 m-0 rounded" key={index}>{keyword}</li>
-                ))}
-
-            { //  Show the number of keywords that are not visible.
-              (item.keywords?.length > 0)
-              && (item.keywords?.length > visibleNumberOfKeywords)
-              && (item.keywords?.length - visibleNumberOfKeywords > 0)
-              && `+ ${item.keywords?.length - visibleNumberOfKeywords}`
-            }
-          </ul>
-
-          {/* <div className="flex-1" /> */}
-          <div className="flex gap-3 justify-between mt-8">
-
-          {/* Languages */}
-          <ul className="text-gray-500 text-sm flex flex-wrap gap-1">
-            {// limits the keywords to 'visibleNumberOfProgLang' per software.
-              item.prog_lang?.slice(0, visibleNumberOfProgLang)
-              .map((lang:string, index: number) => (
-                <li className="px-1 m-0" key={index}>{lang}</li>
-                ))}
-            { //  Show the number of keywords that are not visible.
-              (item.prog_lang?.length > 0)
-              && (item.prog_lang?.length > visibleNumberOfProgLang)
-              && (item.prog_lang?.length - visibleNumberOfProgLang > 0)
-              && `+ ${item.prog_lang?.length - visibleNumberOfProgLang}`
-            }
-          </ul>
-          {/* Metrics */}
-          <div className="flex gap-5">
-            <div className="flex gap-2 items-center">
-              <svg
-                width="18"
-                height="14"
-                viewBox="0 0 16 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                  d="M2.33301 3.47317C2.33314 2.87434 2.49682 2.28572 2.80817 1.76441C3.11951 1.24311 3.56794 0.80683 4.10995 0.497916C4.65195 0.189001 5.26912 0.0179413 5.90157 0.00133611C6.53401 -0.0152691 7.16026 0.123144 7.71952 0.403144C8.27879 0.683144 8.75209 1.09522 9.09348 1.59939C9.43488 2.10355 9.63279 2.68269 9.66799 3.28059C9.7032 3.87848 9.57451 4.47485 9.29442 5.0118C9.01433 5.54874 8.59234 6.00805 8.06941 6.34513C9.19554 6.73606 10.1723 7.43702 10.874 8.35779C11.5757 9.27855 11.9701 10.377 12.0067 11.5118C12.0051 11.6341 11.9537 11.7512 11.8631 11.8384C11.7725 11.9257 11.6498 11.9765 11.5206 11.9802C11.3914 11.9839 11.2656 11.9401 11.1697 11.8581C11.0737 11.7761 11.015 11.6622 11.0057 11.5402C10.9659 10.3094 10.4215 9.14172 9.48761 8.28446C8.55376 7.42719 7.30395 6.94776 6.00301 6.94776C4.70208 6.94776 3.45226 7.42719 2.51842 8.28446C1.58457 9.14172 1.04009 10.3094 1.00035 11.5402C0.993666 11.6639 0.936068 11.7802 0.839893 11.8642C0.743718 11.9481 0.616616 11.9931 0.485815 11.9895C0.355015 11.9859 0.23092 11.9339 0.140115 11.8447C0.0493107 11.7555 -0.000980916 11.6362 1.44997e-05 11.5124C0.0364184 10.3775 0.43085 9.27894 1.13254 8.35805C1.83422 7.43715 2.81105 6.7361 3.93728 6.34513C3.44267 6.02657 3.03791 5.59832 2.75829 5.09773C2.47866 4.59715 2.33266 4.03941 2.33301 3.47317ZM6.00335 0.946702C5.29539 0.946702 4.61644 1.21288 4.11584 1.68669C3.61524 2.16049 3.33401 2.80311 3.33401 3.47317C3.33401 4.14323 3.61524 4.78585 4.11584 5.25965C4.61644 5.73346 5.29539 5.99964 6.00335 5.99964C6.7113 5.99964 7.39025 5.73346 7.89085 5.25965C8.39145 4.78585 8.67268 4.14323 8.67268 3.47317C8.67268 2.80311 8.39145 2.16049 7.89085 1.68669C7.39025 1.21288 6.7113 0.946702 6.00335 0.946702ZM11.5355 3.47317C11.4368 3.47317 11.3407 3.47949 11.2459 3.49212C11.1798 3.50333 11.1119 3.50182 11.0464 3.48766C10.9808 3.47351 10.919 3.44701 10.8645 3.40975C10.81 3.37248 10.7641 3.32521 10.7293 3.27076C10.6945 3.21631 10.6717 3.15579 10.6622 3.09281C10.6527 3.02984 10.6567 2.9657 10.674 2.90421C10.6912 2.84273 10.7214 2.78516 10.7627 2.73495C10.8039 2.68474 10.8555 2.64291 10.9142 2.61196C10.9729 2.58101 11.0376 2.56157 11.1044 2.5548C11.7682 2.46397 12.4449 2.58461 13.0283 2.89772C13.6116 3.21083 14.0684 3.69864 14.3267 4.28437C14.5851 4.87011 14.6303 5.52052 14.4553 6.13325C14.2803 6.74598 13.895 7.28624 13.36 7.669C14.1464 8.00227 14.8141 8.54379 15.2825 9.22823C15.751 9.91267 16.0001 10.7108 16 11.5263C16 11.6519 15.9473 11.7724 15.8534 11.8613C15.7595 11.9501 15.6322 12 15.4995 12C15.3668 12 15.2395 11.9501 15.1456 11.8613C15.0517 11.7724 14.999 11.6519 14.999 11.5263C14.9989 10.8215 14.759 10.1355 14.3147 9.56984C13.8705 9.00421 13.2456 8.58906 12.5325 8.38589L12.1762 8.28483V7.22624L12.4498 7.09423C12.8554 6.89978 13.1799 6.58164 13.3709 6.19117C13.562 5.8007 13.6084 5.36068 13.5027 4.94216C13.3971 4.52363 13.1454 4.15103 12.7885 3.8845C12.4316 3.61796 11.9902 3.47306 11.5355 3.47317Z"
-                  fill="black"
-                  />
-              </svg>
-              <span className="text-sm">{item.contributor_cnt || 0}</span>
-            </div>
-
-            <div className="flex gap-2 items-center">
-              <svg
-                width="14"
-                height="10"
-                viewBox="0 0 14 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                  d="M5 4C5 3.86739 5.05268 3.74021 5.14645 3.64645C5.24021 3.55268 5.36739 3.5 5.5 3.5H10.5C10.6326 3.5 10.7598 3.55268 10.8536 3.64645C10.9473 3.74021 11 3.86739 11 4C11 4.13261 10.9473 4.25979 10.8536 4.35355C10.7598 4.44732 10.6326 4.5 10.5 4.5H5.5C5.36739 4.5 5.24021 4.44732 5.14645 4.35355C5.05268 4.25979 5 4.13261 5 4ZM5.5 6.5H10.5C10.6326 6.5 10.7598 6.44732 10.8536 6.35355C10.9473 6.25979 11 6.13261 11 6C11 5.86739 10.9473 5.74021 10.8536 5.64645C10.7598 5.55268 10.6326 5.5 10.5 5.5H5.5C5.36739 5.5 5.24021 5.55268 5.14645 5.64645C5.05268 5.74021 5 5.86739 5 6C5 6.13261 5.05268 6.25979 5.14645 6.35355C5.24021 6.44732 5.36739 6.5 5.5 6.5ZM14 1V8.5C13.9984 8.89732 13.8398 9.27789 13.5588 9.55884C13.2779 9.83979 12.8973 9.99835 12.5 10H1.5C1.10326 10 0.722669 9.84283 0.441543 9.56287C0.160418 9.28292 0.0016531 8.90299 0 8.50625V2.5C0 2.36739 0.0526784 2.24021 0.146447 2.14645C0.240215 2.05268 0.367392 2 0.5 2C0.632608 2 0.759785 2.05268 0.853553 2.14645C0.947322 2.24021 1 2.36739 1 2.5V8.5C1 8.63261 1.05268 8.75979 1.14645 8.85355C1.24021 8.94732 1.36739 9 1.5 9C1.63261 9 1.75979 8.94732 1.85355 8.85355C1.94732 8.75979 2 8.63261 2 8.5V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H13C13.2652 0 13.5196 0.105357 13.7071 0.292893C13.8946 0.48043 14 0.734784 14 1ZM13 1H3V8.5C2.99995 8.67047 2.97034 8.83964 2.9125 9H12.5C12.6326 9 12.7598 8.94732 12.8536 8.85355C12.9473 8.75979 13 8.63261 13 8.5V1Z"
-                  fill="black"
-                  />
-              </svg>
-              <span className="text-sm">{item.mention_cnt || 0}</span>
-            </div>
-
-            {/* TODO Add download counts to the cards */}
-            {item?.downloads && item?.downloads > 0 && (
-              <div className="flex gap-2 items-center">
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 12 12"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  >
-                  <path
-                    d="M0.532693 8.16797C0.673971 8.16797 0.809464 8.22409 0.909363 8.32399C1.00926 8.42389 1.06539 8.55938 1.06539 8.70066V10.2987C1.06539 10.3968 1.14493 10.4763 1.24295 10.4763H10.1212C10.1683 10.4763 10.2134 10.4576 10.2467 10.4243C10.28 10.391 10.2987 10.3458 10.2987 10.2987V8.70066C10.2987 8.55938 10.3548 8.42389 10.4547 8.32399C10.5546 8.22409 10.6901 8.16797 10.8314 8.16797C10.9727 8.16797 11.1082 8.22409 11.2081 8.32399C11.308 8.42389 11.3641 8.55938 11.3641 8.70066V10.2987C11.3641 10.6284 11.2332 10.9445 11.0001 11.1776C10.767 11.4107 10.4508 11.5417 10.1212 11.5417H1.24295C0.913299 11.5417 0.59715 11.4107 0.364052 11.1776C0.130953 10.9445 0 10.6284 0 10.2987V8.70066C0 8.55938 0.0561227 8.42389 0.156022 8.32399C0.255921 8.22409 0.391414 8.16797 0.532693 8.16797Z"
-                    fill="black"
-                    />
-                  <path
-                    d="M0.866531 2.99728C0.91594 2.9478 0.974619 2.90855 1.03921 2.88177C1.1038 2.85499 1.17304 2.8412 1.24297 2.8412C1.31289 2.8412 1.38213 2.85499 1.44672 2.88177C1.51132 2.90855 1.56999 2.9478 1.6194 2.99728L5.14938 6.52655V0.532694C5.14938 0.391415 5.2055 0.255921 5.3054 0.156022C5.4053 0.0561224 5.54079 0 5.68207 0C5.82335 0 5.95884 0.0561224 6.05874 0.156022C6.15864 0.255921 6.21477 0.391415 6.21477 0.532694V6.52655L9.74474 2.99728C9.84458 2.89745 9.97999 2.84136 10.1212 2.84136C10.2624 2.84136 10.3978 2.89745 10.4976 2.99728C10.5975 3.09712 10.6535 3.23253 10.6535 3.37372C10.6535 3.51491 10.5975 3.65032 10.4976 3.75016L6.05851 8.18926C6.0091 8.23874 5.95042 8.278 5.88583 8.30478C5.82124 8.33156 5.752 8.34534 5.68207 8.34534C5.61215 8.34534 5.54291 8.33156 5.47832 8.30478C5.41372 8.278 5.35505 8.23874 5.30564 8.18926L0.866531 3.75016C0.817052 3.70075 0.777799 3.64207 0.751017 3.57748C0.724235 3.51288 0.710449 3.44364 0.710449 3.37372C0.710449 3.3038 0.724235 3.23456 0.751017 3.16996C0.777799 3.10537 0.817052 3.04669 0.866531 2.99728Z"
-                    fill="black"
-                    />
-                </svg>
-                <span className="text-sm">34K</span>
-              </div>
-            )}
-            </div>
-          </div>
-        </div>
-      </div>
-  </Link>
-  )
-}
-// TODO Only show images every 3rd card for testing purposes
-// index % 3 === 0  <-- todo
diff --git a/frontend/components/software/overview/SoftwareFiltersPanel.tsx b/frontend/components/software/overview/SoftwareFiltersPanel.tsx
index 179a36dc8..5cb6682c4 100644
--- a/frontend/components/software/overview/SoftwareFiltersPanel.tsx
+++ b/frontend/components/software/overview/SoftwareFiltersPanel.tsx
@@ -6,7 +6,9 @@
 
 export default function SoftwareFiltersPanel({children}: { children: any }) {
   return (
-    <div className="flex bg-base-100 p-4 shadow rounded-md flex-col gap-8 w-[17rem]">
+    <div
+      data-testid="software-filters-panel"
+      className="flex bg-base-100 p-4 shadow rounded-md flex-col gap-8 w-[17rem]">
       {children}
     </div>
   )
diff --git a/frontend/components/software/overview/SoftwareGridCard.tsx b/frontend/components/software/overview/SoftwareGridCard.tsx
index 15f613e7e..81a7a641c 100644
--- a/frontend/components/software/overview/SoftwareGridCard.tsx
+++ b/frontend/components/software/overview/SoftwareGridCard.tsx
@@ -8,59 +8,53 @@ import Link from 'next/link'
 
 import {SoftwareListItem} from '~/types/SoftwareTypes'
 import {getImageUrl} from '~/utils/editImage'
-import KeywordList from './KeywordList'
-import ProgrammingLanguageList from './ProgrammingLanguageList'
-import SoftwareMetrics from './SoftwareMetrics'
+import KeywordList from '../../cards/KeywordList'
+import ProgrammingLanguageList from '../../cards/ProgrammingLanguageList'
+import SoftwareMetrics from '../../cards/SoftwareMetrics'
+import CardTitleSubtitle from '../../cards/CardTitleSubtitle'
+import ImageWithPlaceholder from '~/components/layout/ImageWithPlaceholder'
 
 type SoftwareCardProps = {
-  item: SoftwareListItem;
-  direction?: string
+  item: SoftwareListItem
 }
 
-export default function SoftwareGridCard({item, direction}:SoftwareCardProps){
+export default function SoftwareGridCard({item}:SoftwareCardProps){
 
   const visibleNumberOfKeywords: number = 3
   const visibleNumberOfProgLang: number = 3
 
   return (
     <Link
+      data-testid="software-grid-card"
       href={`/software/${item.slug}`}
       className="flex-1 flex flex-col hover:text-inherit"
     >
       {/* Card content */}
       <div className="flex flex-col h-full transition overflow-hidden bg-base-100 shadow-md hover:shadow-lg rounded-md" >
-        {/* Cover image - 40% of card height */}
-        {
-          item.image_id &&
-          <div className="h-[40%] overflow-hidden relative">
-            <img
-              // style={{...imgStyle}}
-              className="w-full object-cover absolute left-0 top-0 right-0 bottom-0"
-              src={`${getImageUrl(item.image_id) ?? ''}`}
-              alt={`Cover image for ${item.brand_name}`}
-            />
-          </div>
-        }
-        {/* Card body - 60% of card height */}
-        <div className={`${item.image_id ? 'h-[60%]' : 'flex-1'} flex flex-col p-4`}>
-          <h2 className="text-xl font-medium line-clamp-1">
-            {item.brand_name}
-          </h2>
-          <div className="py-2"></div>
-            <p className="text-gray-600 line-clamp-3 break-words">
-              {item.short_statement}
-            </p>
-          <div>
-        </div>
-        {/* keywords */}
-        <div className="flex-1 overflow-hidden">
-          <KeywordList
-            keywords={item.keywords}
-            visibleNumberOfKeywords={visibleNumberOfKeywords}
+        {/* Cover image - 33% of card height */}
+        <div className="h-[33%] flex overflow-hidden relative bg-base-100">
+          <ImageWithPlaceholder
+            src={`${getImageUrl(item.image_id) ?? ''}`}
+            alt={`Logo for ${item.brand_name}`}
+            type="gradient"
+            className="w-full text-base-content-disabled p-4"
           />
         </div>
+        {/* Card body - 67% of card height */}
+        <div className="h-[67%] flex flex-col p-4">
+          <CardTitleSubtitle
+            title={item.brand_name}
+            subtitle={item.short_statement}
+          />
+
+          {/* keywords */}
+          <div className="flex-1 overflow-auto">
+            <KeywordList
+              keywords={item.keywords}
+              visibleNumberOfKeywords={visibleNumberOfKeywords}
+            />
+          </div>
 
-          {/* <div className="flex-1" /> */}
           <div className="flex gap-2 justify-between mt-4">
             {/* Languages */}
             <ProgrammingLanguageList
@@ -76,6 +70,6 @@ export default function SoftwareGridCard({item, direction}:SoftwareCardProps){
           </div>
         </div>
       </div>
-  </Link>
+    </Link>
   )
 }
diff --git a/frontend/components/software/highlights/SoftwareHighlights.tsx b/frontend/components/software/overview/SoftwareHighlights.tsx
similarity index 91%
rename from frontend/components/software/highlights/SoftwareHighlights.tsx
rename to frontend/components/software/overview/SoftwareHighlights.tsx
index 0dd3d634d..0cf43cdbd 100644
--- a/frontend/components/software/highlights/SoftwareHighlights.tsx
+++ b/frontend/components/software/overview/SoftwareHighlights.tsx
@@ -4,7 +4,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {HighlightsCarousel} from './HighlightsCarousel'
+import {HighlightsCarousel} from '../highlights/HighlightsCarousel'
 import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights'
 
 export default function SoftwareHighlights({highlights}: { highlights: SoftwareHighlight[] }) {
diff --git a/frontend/components/software/overview/SoftwareMasonryCard.tsx b/frontend/components/software/overview/SoftwareMasonryCard.tsx
new file mode 100644
index 000000000..d5053dd16
--- /dev/null
+++ b/frontend/components/software/overview/SoftwareMasonryCard.tsx
@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link'
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import {getImageUrl} from '~/utils/editImage'
+import KeywordList from '~/components/cards/KeywordList'
+import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
+import ProgrammingLanguageList from '~/components/cards/ProgrammingLanguageList'
+import SoftwareMetrics from '~/components/cards/SoftwareMetrics'
+
+type SoftwareCardProps = {
+  item: SoftwareListItem
+}
+
+export default function SoftwareMasonryCard({item}:SoftwareCardProps){
+
+  const visibleNumberOfKeywords: number = 3
+  const visibleNumberOfProgLang: number = 3
+
+  return (
+    <Link
+      data-testid="software-masonry-card"
+      key={item.id}
+      href={`/software/${item.slug}`}
+      className="hover:text-inherit">
+      <div className="flex-shrink-0 transition bg-white shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none flex-col">
+        {/* Cover image */}
+        {
+          item.image_id &&
+          <img
+            className="object-cover w-full rounded-tr-lg rounded-tl-lg"
+            src={`${getImageUrl(item.image_id) ?? ''}`}
+            alt={`Cover image for ${item.brand_name}`}
+          />
+        }
+
+        {/* Card content */}
+        <div className="flex flex-col p-4">
+          <CardTitleSubtitle
+            title={item.brand_name}
+            subtitle={item.short_statement}
+          />
+
+          <KeywordList
+            keywords={item.keywords}
+            visibleNumberOfKeywords={visibleNumberOfKeywords}
+          />
+
+          <div className="flex gap-2 justify-between mt-8">
+            {/* Languages */}
+            <ProgrammingLanguageList
+              prog_lang={item.prog_lang}
+              visibleNumberOfProgLang={visibleNumberOfProgLang}
+            />
+            {/* Metrics */}
+            <SoftwareMetrics
+              contributor_cnt={item.contributor_cnt}
+              mention_cnt={item.mention_cnt}
+              downloads={item.downloads}
+            />
+          </div>
+
+        </div>
+      </div>
+    </Link>
+  )
+}
diff --git a/frontend/components/software/overview/SoftwareOverviewContent.tsx b/frontend/components/software/overview/SoftwareOverviewContent.tsx
index 85d9c5a2d..8f7f47dd6 100644
--- a/frontend/components/software/overview/SoftwareOverviewContent.tsx
+++ b/frontend/components/software/overview/SoftwareOverviewContent.tsx
@@ -8,6 +8,7 @@ import {LayoutType} from './SearchSection'
 import SoftwareOverviewMasonry from './SoftwareOverviewMasonry'
 import SoftwareOverviewGrid from './SoftwareOverviewGrid'
 import SoftwareOverviewList from './SoftwareOverviewList'
+import NoContent from '~/components/layout/NoContent'
 
 type SoftwareOverviewContentProps = {
   layout: LayoutType
@@ -16,6 +17,10 @@ type SoftwareOverviewContentProps = {
 
 export default function SoftwareOverviewContent({layout, software}: SoftwareOverviewContentProps) {
 
+  if (!software || software.length === 0) {
+    return <NoContent />
+  }
+
   if (layout === 'masonry') {
     // Masenory grid layout
     return (
diff --git a/frontend/components/software/overview/SoftwareOverviewGrid.tsx b/frontend/components/software/overview/SoftwareOverviewGrid.tsx
index 99883e635..2b73e4d9d 100644
--- a/frontend/components/software/overview/SoftwareOverviewGrid.tsx
+++ b/frontend/components/software/overview/SoftwareOverviewGrid.tsx
@@ -11,12 +11,13 @@ import FlexibleGridSection from '~/components/layout/FlexibleGridSection'
 export default function SoftwareOverviewGrid({software = []}: { software: SoftwareListItem[] }) {
   const grid={
     height: '28rem',
-    minWidth: '19rem',
+    minWidth: '18rem',
     maxWidth: '1fr'
   }
 
   return (
     <FlexibleGridSection
+      data-testid="software-overview-grid"
       className="mt-4 gap-8"
       {...grid}
     >
diff --git a/frontend/components/software/overview/SoftwareOverviewList.tsx b/frontend/components/software/overview/SoftwareOverviewList.tsx
index 5dbb6f910..57a639c92 100644
--- a/frontend/components/software/overview/SoftwareOverviewList.tsx
+++ b/frontend/components/software/overview/SoftwareOverviewList.tsx
@@ -12,61 +12,68 @@ import {getImageUrl} from '~/utils/editImage'
 import ContributorIcon from '~/components/icons/ContributorIcon'
 import MentionIcon from '~/components/icons/MentionIcon'
 import DownloadsIcon from '~/components/icons/DownloadsIcon'
+import ImageWithPlaceholder from '~/components/layout/ImageWithPlaceholder'
 
 export default function SoftwareOverviewList({software = []}: { software: SoftwareListItem[] }) {
   return (
-    <section className="flex-1 mt-2">
-      <List>
-        {software.map(item => (
-          <Link
-            key={item.id}
-            href={`/software/${item.slug}`}
-            className='hover:text-inherit'
-          >
-            <div className='flex gap-2 p-2 transition shadow-sm border bg-base-100 mb-2 rounded' >
-              {item.image_id &&
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  className="w-12 h-12 rounded-sm object-cover"
-                  src={getImageUrl(item.image_id) ?? ''}
-                  alt={`Cover image for ${item.brand_name}`}
-                />}
-
-              <div className="flex flex-col md:flex-row gap-3 flex-1">
-                <div className="flex-1">
-                  <div className='line-clamp-2 md:line-clamp-1 break-words font-medium'>
+    <section
+      data-testid="software-overview-list"
+      className="flex-1 mt-2"
+    >
+      {software.map(item => (
+        <Link
+          data-testid="software-list-item"
+          key={item.id}
+          href={`/software/${item.slug}`}
+          className='hover:text-inherit'
+          title={item.brand_name}
+        >
+          <div className='flex gap-2 transition shadow-sm border bg-base-100 mb-2 rounded hover:shadow-lg'>
+            {item.image_id ?
+              <img
+                src={`${getImageUrl(item.image_id) ?? ''}`}
+                alt={`Cover image for ${item.brand_name}`}
+                className="w-12 text-base-content-disabled p-2 object-contain"
+              />
+              :
+              <div
+                className="w-12 bg-gradient-to-br from-base-300 from-0% via-base-100 via-70% to-base-100"
+              />
+            }
+            <div className="flex flex-col md:flex-row gap-3 flex-1 py-2">
+              <div className="flex-1">
+                <div className='line-clamp-2 md:line-clamp-1 break-words font-medium'>
                   {item.brand_name}
-                  </div>
-                  <div className='line-clamp-3 md:line-clamp-1 break-words text-sm opacity-70'>
-                    {item.short_statement}
-                  </div>
                 </div>
+                <div className='line-clamp-3 md:line-clamp-1 break-words text-sm opacity-70'>
+                  {item.short_statement}
+                </div>
+              </div>
 
-                {/* Indicators */}
-                <div className="flex gap-5 mr-4">
-                  <div className="flex gap-2 items-center">
-                    <ContributorIcon />
-                    <span className="text-sm">{item.contributor_cnt || 0}</span>
-                  </div>
-                  <div className="flex gap-2 items-center">
-                    <MentionIcon />
-                    <span className="text-sm">{item.mention_cnt || 0}</span>
-                  </div>
+              {/* Indicators */}
+              <div className="flex gap-5 mr-4">
+                <div className="flex gap-2 items-center">
+                  <ContributorIcon />
+                  <span className="text-sm">{item.contributor_cnt || 0}</span>
+                </div>
+                <div className="flex gap-2 items-center">
+                  <MentionIcon />
+                  <span className="text-sm">{item.mention_cnt || 0}</span>
+                </div>
 
-                {/* TODO Add download counts to the cards */}
-                  {(item?.downloads && item?.downloads > 0) &&
-                  <div className="flex gap-2 items-center">
-                    <DownloadsIcon />
-                    <span className="text-sm">34K</span>
-                  </div>
-                }
+              {/* TODO Add download counts to the cards */}
+              {(item?.downloads && item?.downloads > 0) &&
+                <div className="flex gap-2 items-center">
+                  <DownloadsIcon />
+                  <span className="text-sm">34K</span>
                 </div>
+              }
               </div>
             </div>
-          </Link>
-          )
-        )}
-      </List>
+          </div>
+        </Link>
+        )
+      )}
     </section>
   )
 }
diff --git a/frontend/components/software/overview/SoftwareOverviewMasonry.tsx b/frontend/components/software/overview/SoftwareOverviewMasonry.tsx
index 4fef85163..a4539e36e 100644
--- a/frontend/components/software/overview/SoftwareOverviewMasonry.tsx
+++ b/frontend/components/software/overview/SoftwareOverviewMasonry.tsx
@@ -5,14 +5,16 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {SoftwareListItem} from '~/types/SoftwareTypes'
-import {SoftwareCard} from './SoftwareCard'
+import SoftwareMasonryCard from './SoftwareMasonryCard'
 
 export default function SoftwareOverviewMasonry({software=[]}: { software:SoftwareListItem[]}) {
   return (
-    <section className="w-full lg:columns-2 xl:columns-3 gap-8 mt-4">
+    <section
+      data-testid="software-overview-masonry"
+      className="w-full lg:columns-2 xl:columns-3 gap-8 mt-4">
       {software.map((item, index) => (
         <div key={index} className="mb-8 break-inside-avoid">
-          <SoftwareCard item={item}/>
+          <SoftwareMasonryCard item={item}/>
         </div>
       ))}
     </section>
diff --git a/frontend/components/software/overview/filters/FilterHeader.tsx b/frontend/components/software/overview/filters/FilterHeader.tsx
index c31d2d4e8..e34ecfa61 100644
--- a/frontend/components/software/overview/filters/FilterHeader.tsx
+++ b/frontend/components/software/overview/filters/FilterHeader.tsx
@@ -18,7 +18,7 @@ export default function FilterHeader({filterCnt,resetFilters}:FilterHeaderProps)
           className="rounded-full bg-gray-100 h-8 w-8 flex items-center justify-center font-semibold">
           {filterCnt}
         </span>
-        Filters
+        {filterCnt===1 ? 'Filter' : 'Filters'}
       </div>
 
       <Button
diff --git a/frontend/components/software/overview/filters/FilterOption.tsx b/frontend/components/software/overview/filters/FilterOption.tsx
new file mode 100644
index 000000000..b280dfe22
--- /dev/null
+++ b/frontend/components/software/overview/filters/FilterOption.tsx
@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {HTMLAttributes} from 'react'
+
+type FilterOptionProps = {
+  props: HTMLAttributes<HTMLLIElement>,
+  label: string,
+  count: number
+}
+
+export default function FilterOption({props,label,count}:FilterOptionProps) {
+  return (
+    <li className="flex w-full items-center content-between" {...props} >
+      <div className="text-sm flex-1">
+        {label}
+      </div>
+      <div className="text-xs opacity-70">
+        ({count})
+      </div>
+    </li>
+  )
+}
diff --git a/frontend/components/software/overview/filters/FilterTitle.tsx b/frontend/components/software/overview/filters/FilterTitle.tsx
new file mode 100644
index 000000000..72f9e5e96
--- /dev/null
+++ b/frontend/components/software/overview/filters/FilterTitle.tsx
@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export default function FilterTitle({title,count}:{title:string,count:number}) {
+  return (
+    <div className="flex justify-between items-center">
+      <div className="font-semibold">{title}</div>
+      <div className="text-sm opacity-70">{count}</div>
+    </div>
+  )
+}
diff --git a/frontend/components/software/overview/filters/KeywordsFilter.tsx b/frontend/components/software/overview/filters/KeywordsFilter.tsx
index b98c1bfa8..fd4eb867e 100644
--- a/frontend/components/software/overview/filters/KeywordsFilter.tsx
+++ b/frontend/components/software/overview/filters/KeywordsFilter.tsx
@@ -8,6 +8,8 @@ import Autocomplete from '@mui/material/Autocomplete'
 import TextField from '@mui/material/TextField'
 
 import {KeywordFilterOption} from './softwareFiltersApi'
+import FilterTitle from './FilterTitle'
+import FilterOption from './FilterOption'
 
 type KeywordsFilterProps = {
   keywords: string[],
@@ -38,10 +40,10 @@ export default function KeywordsFilter({keywords,keywordsList,handleQueryChange}
 
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Keywords</div>
-        <div className="text-sm opacity-60">{keywordsList.length}</div>
-      </div>
+      <FilterTitle
+        title="Keywords"
+        count={keywordsList.length ?? ''}
+      />
       <Autocomplete
         className="mt-4"
         value={selected}
@@ -56,15 +58,12 @@ export default function KeywordsFilter({keywords,keywordsList,handleQueryChange}
         defaultValue={[]}
         filterSelectedOptions
         renderOption={(props, option) => (
-          <li className="flex w-full items-center content-between" {...props} >
-            <div className="text-sm flex-1">{
-              option.keyword
-            }</div>
-            <div className="text-xs opacity-60">({
-              option.keyword_cnt
-            })
-            </div>
-          </li>
+          <FilterOption
+            key={option.keyword}
+            props={props}
+            label={option.keyword}
+            count={option.keyword_cnt}
+          />
         )}
         renderInput={(params) => (
           <TextField {...params} placeholder="Keywords"/>
diff --git a/frontend/components/software/overview/filters/LicensesFilter.tsx b/frontend/components/software/overview/filters/LicensesFilter.tsx
index 16e67b363..089336515 100644
--- a/frontend/components/software/overview/filters/LicensesFilter.tsx
+++ b/frontend/components/software/overview/filters/LicensesFilter.tsx
@@ -8,6 +8,8 @@ import {useEffect, useState} from 'react'
 import Autocomplete from '@mui/material/Autocomplete'
 import TextField from '@mui/material/TextField'
 import {LicensesFilterOption} from './softwareFiltersApi'
+import FilterTitle from './FilterTitle'
+import FilterOption from './FilterOption'
 
 
 type LicensesFilterProps = {
@@ -32,10 +34,10 @@ export default function LicensesFilter({licenses,licensesList,handleQueryChange}
 
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Licenses</div>
-        <div className="text-sm opacity-60">{licensesList.length}</div>
-      </div>
+      <FilterTitle
+        title="Licenses"
+        count={licensesList.length ?? ''}
+      />
       <Autocomplete
         className="mt-4"
         value={selected}
@@ -50,10 +52,12 @@ export default function LicensesFilter({licenses,licensesList,handleQueryChange}
         defaultValue={[]}
         filterSelectedOptions
         renderOption={(props, option) => (
-          <li className="flex items-center w-full content-between" {...props} >
-            <div className="flex-1 text-sm">{option.license}</div>
-            <div className="text-xs opacity-60">({option.license_cnt})</div>
-          </li>
+          <FilterOption
+            key={option.license}
+            props={props}
+            label={option.license}
+            count={option.license_cnt}
+          />
         )}
         renderInput={(params) => (
           <TextField {...params} placeholder="Licenses"/>
diff --git a/frontend/components/software/overview/filters/OrderBy.tsx b/frontend/components/software/overview/filters/OrderBy.tsx
index df5260fe6..e72a629fe 100644
--- a/frontend/components/software/overview/filters/OrderBy.tsx
+++ b/frontend/components/software/overview/filters/OrderBy.tsx
@@ -8,6 +8,12 @@ import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 
+export const softwareOrderOptions = [
+  {key: 'contributor_cnt', label: 'Contributors', direction:'desc.nullslast'},
+  {key: 'mention_cnt', label: 'Mentions', direction:'desc.nullslast'},
+  {key: 'brand_name', label: 'Name', direction:'asc'},
+]
+
 type OrderByProps = {
   orderBy: string
   handleQueryChange: (key: string, value: string | string[]) => void
@@ -15,20 +21,24 @@ type OrderByProps = {
 
 export default function OrderBy({orderBy,handleQueryChange}:OrderByProps) {
   return (
-    <FormControl fullWidth size="small">
-      <InputLabel id="demo-simple-select-label">Order by</InputLabel>
+    <FormControl
+      data-testid="filters-order-by"
+      fullWidth
+      size="small"
+    >
+      <InputLabel id="order-by-label">Order by</InputLabel>
       <Select
-        labelId="demo-simple-select-label"
-        id="demo-simple-select"
+        labelId="order-by-label"
+        id="select-order-by"
         value={orderBy}
         label="Order by"
         onChange={(e) => {
-          // setOrderBy(e.target.value)
           handleQueryChange('order', e.target.value)
         }}
       >
-        <MenuItem value={'contributor_cnt'}>Contributions</MenuItem>
-        <MenuItem value={'mention_cnt'}>Mentions</MenuItem>
+        {
+          softwareOrderOptions.map(option => <MenuItem key={option.key} value={option.key}>{option.label}</MenuItem>)
+        }
       </Select>
     </FormControl>
   )
diff --git a/frontend/components/software/overview/filters/ProgrammingLanguagesFilter.tsx b/frontend/components/software/overview/filters/ProgrammingLanguagesFilter.tsx
index d9f6a93ec..a8eb3f695 100644
--- a/frontend/components/software/overview/filters/ProgrammingLanguagesFilter.tsx
+++ b/frontend/components/software/overview/filters/ProgrammingLanguagesFilter.tsx
@@ -7,8 +7,9 @@ import {useEffect, useState} from 'react'
 import Autocomplete from '@mui/material/Autocomplete'
 import TextField from '@mui/material/TextField'
 
-import {ProgrammingLanguage} from '../../filter/softwareFilterApi'
 import {LanguagesFilterOption} from './softwareFiltersApi'
+import FilterTitle from './FilterTitle'
+import FilterOption from './FilterOption'
 
 type ProgrammingLanguagesFilterProps = {
   prog_lang: string[],
@@ -32,10 +33,10 @@ export default function ProgrammingLanguagesFilter({prog_lang,languagesList,hand
 
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Program languages</div>
-        <div className="text-sm  opacity-60">{languagesList.length}</div>
-      </div>
+      <FilterTitle
+        title="Program languages"
+        count={languagesList.length ?? ''}
+      />
       <Autocomplete
         className="mt-4"
         value={selected}
@@ -50,15 +51,12 @@ export default function ProgrammingLanguagesFilter({prog_lang,languagesList,hand
         defaultValue={[]}
         filterSelectedOptions
         renderOption={(props, option) => (
-          <li className="flex w-full items-center content-between" {...props} >
-            <div className="text-sm flex-1">{
-              option.prog_language
-            }</div>
-            <div className="text-xs opacity-60">({
-              option.prog_language_cnt
-            })
-            </div>
-          </li>
+          <FilterOption
+            key={option.prog_language}
+            props={props}
+            label={option.prog_language}
+            count={option.prog_language_cnt}
+          />
         )}
         renderInput={(params) => (
           <TextField {...params} placeholder="Program languages"/>
diff --git a/frontend/components/software/overview/filters/index.tsx b/frontend/components/software/overview/filters/index.tsx
index 3e681df1e..d7489ea5b 100644
--- a/frontend/components/software/overview/filters/index.tsx
+++ b/frontend/components/software/overview/filters/index.tsx
@@ -4,9 +4,6 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-// TODO! examine what can be removed
-import {Keyword} from '~/components/keyword/FindKeyword'
-import {ProgrammingLanguage} from '../../filter/softwareFilterApi'
 import FilterHeader from './FilterHeader'
 import OrderBy from './OrderBy'
 import KeywordsFilter from './KeywordsFilter'
diff --git a/frontend/components/software/overview/useSoftwareParams.ts b/frontend/components/software/overview/useSoftwareParams.ts
index 1ddebf7f3..8a5719322 100644
--- a/frontend/components/software/overview/useSoftwareParams.ts
+++ b/frontend/components/software/overview/useSoftwareParams.ts
@@ -28,7 +28,7 @@ export default function useSoftwareParams() {
       params['rows'] = getDocumentCookie('rsd_page_rows',12)
     }
     // construct url with all query params
-    const url = buildFilterUrl(params, 'highlights')
+    const url = buildFilterUrl(params, 'software')
     if (key === 'page') {
       // when changin page we scroll to top
       router.push(url, url, {scroll: true})
diff --git a/frontend/components/softwarePage/FeaturedSoftwareCarousel.tsx b/frontend/components/softwarePage/FeaturedSoftwareCarousel.tsx
deleted file mode 100644
index 74f99b4dc..000000000
--- a/frontend/components/softwarePage/FeaturedSoftwareCarousel.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {UIEventHandler, useRef, useState} from 'react'
-import {SoftwareCard} from './SoftwareCard'
-
-export const FeaturedSoftwareCarousel = ({cards}: {cards:any}) => {
-
-  const canrdMovement: number = 680 // card size + margin
-  // const canrdMovementVertical: number = 320 // card size + margin
-
-  // Keep track of the current scroll position of the carousel.
-  const [scrollPosition, setScrollPosition] = useState(0)
-  const carousel = useRef<HTMLDivElement>(null)
-
-  // Event handlers for the next and previous buttons.
-  const handleNextClick = () => {
-    // move the scroll to the left
-    if (carousel.current) {
-      carousel.current.scrollLeft -= canrdMovement
-    }
-  }
-
-  const handlePrevClick = () => {
-    if (carousel.current) {
-      carousel.current.scrollLeft += canrdMovement
-    }
-  }
-
-// TODO
-  const handleScroll:UIEventHandler<HTMLDivElement> = (event:any) => {
-    // update the scroll position state variable whenever the user scrolls
-    setScrollPosition(event.target.scrollLeft)
-  }
-
-  return (
-    <div className='group relative w-full overflow-x-visible' >
-      {/* Left Button */}
-      {scrollPosition > 0 &&
-        <button onClick={handleNextClick}
-              className='transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-40 hover:cursor-pointer hover:opacity-100 absolute left-8 top-1/2 z-10'>
-        <div
-          className='text-white bg-black w-16 h-16 -mt-8 rounded-full flex items-center justify-center'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
-              viewBox="0 0 256 256">
-              <path fill="currentColor"
-                d="M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z"></path>
-            </svg>
-          </div>
-        </button>
-      }
-
-      {/* Right Button */}
-      <button onClick={handlePrevClick}
-          className='transition duration-500 opacity-0 scale-50 group-hover:scale-100 group-hover:opacity-50 hover:cursor-pointer hover:opacity-100 absolute right-8 top-1/2 z-10'>
-          <div className='text-white bg-black w-16 h-16 -mt-8 rounded-full flex items-center justify-center'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"
-              viewBox="0 0 256 256">
-              <path fill="currentColor"
-                d="m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17Z"></path>
-            </svg>
-          </div>
-        </button>
-
-
-      {/* Carousel */}
-      <div
-        ref={carousel}
-        onScroll={handleScroll}
-        // snap on mobile only
-        className="flex gap-4 snap-start sm:snap-none scroll-smooth overflow-x-scroll scrollbar-hide p-4 sm:pr-[600px] lg:pl-[100px] 2xl:pl-[400px] "
-        style={{left: -scrollPosition}}>
-        {/* TODO  software card type */}
-        {cards.length > 0 && cards.map((card: any, index: number) => (
-          <div key={index}
-          className="snap-center flex-shrink-0 hover:scale-[101%] transition duration-500">
-            <SoftwareCard index={index} item={card} direction={'row'}/>
-          </div>
-        ))
-      }
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/components/softwarePage/SearchInput.tsx b/frontend/components/softwarePage/SearchInput.tsx
deleted file mode 100644
index c2156e70f..000000000
--- a/frontend/components/softwarePage/SearchInput.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2022 - 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {useState, useEffect} from 'react'
-import {useDebounce} from '~/utils/useDebounce'
-import TextField from '@mui/material/TextField'
-
-type SearchInputProps = {
-  placeholder: string,
-  onSearch: Function,
-  delay?: number,
-  defaultValue?: string,
-}
-
-export default function SearchInput({
-  placeholder,
-  onSearch,
-  delay = 400,
-  defaultValue = ''
-}: SearchInputProps) {
-  const [state, setState] = useState({
-    value: defaultValue ?? '',
-    wait: true
-  })
-  const searchFor = useDebounce(state.value, delay)
-
-  useEffect(() => {
-    if ((searchFor !== '' && defaultValue === '') || defaultValue !== '') {
-      setState({value: defaultValue, wait: true})
-    }
-  }, [searchFor, defaultValue])
-
-  useEffect(() => {
-    let abort = false
-    const {wait, value} = state
-    if (!wait && value === searchFor) {
-      if (abort) return
-      setState({
-        wait: true,
-        value
-      })
-      onSearch(searchFor)
-    }
-    return () => {
-      abort = true
-    }
-  }, [state, searchFor, onSearch])
-
-  return (
-    <TextField
-      className="bg-base-100 w-full"
-      size="small"
-      variant="outlined"
-      type="text"
-      placeholder={placeholder}
-      value={state.value}
-      onChange={({target}) => setState({value: target.value, wait: false})}
-    />
-  )
-}
diff --git a/frontend/components/softwarePage/SoftwareCard.tsx b/frontend/components/softwarePage/SoftwareCard.tsx
deleted file mode 100644
index 0b35ec1bf..000000000
--- a/frontend/components/softwarePage/SoftwareCard.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-/* eslint-disable @next/next/no-img-element */
-import Link from 'next/link'
-
-export const SoftwareCard = ({item, direction, index}: {
-  item: any; direction?: string; index: number;
-}) => {
-
-  const visibleNumberOfKeywords: number = 3
-  const visibleNumberOfProgLang: number = 3
-
-  const isHorizontal = !!direction
-  return (
-    <Link href={'/software/'+item.slug} key={item.id} className="hover:text-inherit">
-      <div className={`flex-shrink-0 transition bg-white shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full
-                    select-none ${isHorizontal ? 'flex flex-col sm:flex-row w-[300px] sm:w-full' : 'flex-col'}`} >
-        {/* Cover image */}
-        <img
-          className={`
-            object-cover
-            ${isHorizontal
-              ? 'w-full rounded-tr-lg rounded-tl-lg   sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-none sm:w-[320px] sm:h-[300px]'
-              : 'w-full rounded-tr-lg rounded-tl-lg'
-            }`}
-          src={`https://picsum.photos/id/${index + 35}/500/300`}
-          alt={`Cover image for ${item.brand_name}`}
-          />
-
-        {/* Card content */}
-        <div className={`flex flex-col p-4 ${isHorizontal ? 'max-w-[350px]' : ''}`}>
-
-        <h2 className="text-xl font-medium mb-2 line-clamp-1">
-          {item.brand_name}
-        </h2>
-        <p className="text-gray-600 mb-2 line-clamp-3 break-words">
-          {item.short_statement}
-        </p>
-        {/* keywords */}
-        <ul className="text-gray-600 text-sm flex flex-wrap gap-3 mt-5">
-
-          {// limits the keywords to 'visibleNumberOfKeywords' per software.
-            item.keywords?.slice(0, visibleNumberOfKeywords)
-              .map((keyword:string, index: number) => (
-                <li className="bg-slate-100 px-1 m-0 rounded" key={index}>{keyword}</li>
-              ))}
-
-          { //  Show the number of keywords that are not visible.
-            (item.keywords?.length > 0)
-            && (item.keywords?.length > visibleNumberOfKeywords)
-            && (item.keywords?.length - visibleNumberOfKeywords > 0)
-            && `+ ${item.keywords?.length - visibleNumberOfKeywords}`
-          }
-        </ul>
-
-        <div className="flex-1" />
-          <div className="flex gap-3 justify-between mt-8">
-
-        {/* Languages */}
-        <ul className="text-gray-500 text-sm flex flex-wrap gap-1">
-          {// limits the keywords to 'visibleNumberOfProgLang' per software.
-            item.prog_lang?.slice(0, visibleNumberOfProgLang)
-            .map((lang:string, index: number) => (
-              <li className="px-1 m-0" key={index}>{lang}</li>
-              ))}
-          { //  Show the number of keywords that are not visible.
-            (item.prog_lang?.length > 0)
-            && (item.prog_lang?.length > visibleNumberOfProgLang)
-            && (item.prog_lang?.length - visibleNumberOfProgLang > 0)
-            && `+ ${item.prog_lang?.length - visibleNumberOfProgLang}`
-          }
-        </ul>
-        {/* Metrics */}
-        <div className="flex gap-5">
-            <div className="flex gap-2 items-center">
-              <svg
-                width="18"
-                height="14"
-                viewBox="0 0 16 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                  d="M2.33301 3.47317C2.33314 2.87434 2.49682 2.28572 2.80817 1.76441C3.11951 1.24311 3.56794 0.80683 4.10995 0.497916C4.65195 0.189001 5.26912 0.0179413 5.90157 0.00133611C6.53401 -0.0152691 7.16026 0.123144 7.71952 0.403144C8.27879 0.683144 8.75209 1.09522 9.09348 1.59939C9.43488 2.10355 9.63279 2.68269 9.66799 3.28059C9.7032 3.87848 9.57451 4.47485 9.29442 5.0118C9.01433 5.54874 8.59234 6.00805 8.06941 6.34513C9.19554 6.73606 10.1723 7.43702 10.874 8.35779C11.5757 9.27855 11.9701 10.377 12.0067 11.5118C12.0051 11.6341 11.9537 11.7512 11.8631 11.8384C11.7725 11.9257 11.6498 11.9765 11.5206 11.9802C11.3914 11.9839 11.2656 11.9401 11.1697 11.8581C11.0737 11.7761 11.015 11.6622 11.0057 11.5402C10.9659 10.3094 10.4215 9.14172 9.48761 8.28446C8.55376 7.42719 7.30395 6.94776 6.00301 6.94776C4.70208 6.94776 3.45226 7.42719 2.51842 8.28446C1.58457 9.14172 1.04009 10.3094 1.00035 11.5402C0.993666 11.6639 0.936068 11.7802 0.839893 11.8642C0.743718 11.9481 0.616616 11.9931 0.485815 11.9895C0.355015 11.9859 0.23092 11.9339 0.140115 11.8447C0.0493107 11.7555 -0.000980916 11.6362 1.44997e-05 11.5124C0.0364184 10.3775 0.43085 9.27894 1.13254 8.35805C1.83422 7.43715 2.81105 6.7361 3.93728 6.34513C3.44267 6.02657 3.03791 5.59832 2.75829 5.09773C2.47866 4.59715 2.33266 4.03941 2.33301 3.47317ZM6.00335 0.946702C5.29539 0.946702 4.61644 1.21288 4.11584 1.68669C3.61524 2.16049 3.33401 2.80311 3.33401 3.47317C3.33401 4.14323 3.61524 4.78585 4.11584 5.25965C4.61644 5.73346 5.29539 5.99964 6.00335 5.99964C6.7113 5.99964 7.39025 5.73346 7.89085 5.25965C8.39145 4.78585 8.67268 4.14323 8.67268 3.47317C8.67268 2.80311 8.39145 2.16049 7.89085 1.68669C7.39025 1.21288 6.7113 0.946702 6.00335 0.946702ZM11.5355 3.47317C11.4368 3.47317 11.3407 3.47949 11.2459 3.49212C11.1798 3.50333 11.1119 3.50182 11.0464 3.48766C10.9808 3.47351 10.919 3.44701 10.8645 3.40975C10.81 3.37248 10.7641 3.32521 10.7293 3.27076C10.6945 3.21631 10.6717 3.15579 10.6622 3.09281C10.6527 3.02984 10.6567 2.9657 10.674 2.90421C10.6912 2.84273 10.7214 2.78516 10.7627 2.73495C10.8039 2.68474 10.8555 2.64291 10.9142 2.61196C10.9729 2.58101 11.0376 2.56157 11.1044 2.5548C11.7682 2.46397 12.4449 2.58461 13.0283 2.89772C13.6116 3.21083 14.0684 3.69864 14.3267 4.28437C14.5851 4.87011 14.6303 5.52052 14.4553 6.13325C14.2803 6.74598 13.895 7.28624 13.36 7.669C14.1464 8.00227 14.8141 8.54379 15.2825 9.22823C15.751 9.91267 16.0001 10.7108 16 11.5263C16 11.6519 15.9473 11.7724 15.8534 11.8613C15.7595 11.9501 15.6322 12 15.4995 12C15.3668 12 15.2395 11.9501 15.1456 11.8613C15.0517 11.7724 14.999 11.6519 14.999 11.5263C14.9989 10.8215 14.759 10.1355 14.3147 9.56984C13.8705 9.00421 13.2456 8.58906 12.5325 8.38589L12.1762 8.28483V7.22624L12.4498 7.09423C12.8554 6.89978 13.1799 6.58164 13.3709 6.19117C13.562 5.8007 13.6084 5.36068 13.5027 4.94216C13.3971 4.52363 13.1454 4.15103 12.7885 3.8845C12.4316 3.61796 11.9902 3.47306 11.5355 3.47317Z"
-                  fill="black"
-                  />
-              </svg>
-              <span className="text-sm">{item.contributor_cnt || 0}</span>
-            </div>
-
-          <div className="flex gap-2 items-center">
-              <svg
-                width="14"
-                height="10"
-                viewBox="0 0 14 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                  d="M5 4C5 3.86739 5.05268 3.74021 5.14645 3.64645C5.24021 3.55268 5.36739 3.5 5.5 3.5H10.5C10.6326 3.5 10.7598 3.55268 10.8536 3.64645C10.9473 3.74021 11 3.86739 11 4C11 4.13261 10.9473 4.25979 10.8536 4.35355C10.7598 4.44732 10.6326 4.5 10.5 4.5H5.5C5.36739 4.5 5.24021 4.44732 5.14645 4.35355C5.05268 4.25979 5 4.13261 5 4ZM5.5 6.5H10.5C10.6326 6.5 10.7598 6.44732 10.8536 6.35355C10.9473 6.25979 11 6.13261 11 6C11 5.86739 10.9473 5.74021 10.8536 5.64645C10.7598 5.55268 10.6326 5.5 10.5 5.5H5.5C5.36739 5.5 5.24021 5.55268 5.14645 5.64645C5.05268 5.74021 5 5.86739 5 6C5 6.13261 5.05268 6.25979 5.14645 6.35355C5.24021 6.44732 5.36739 6.5 5.5 6.5ZM14 1V8.5C13.9984 8.89732 13.8398 9.27789 13.5588 9.55884C13.2779 9.83979 12.8973 9.99835 12.5 10H1.5C1.10326 10 0.722669 9.84283 0.441543 9.56287C0.160418 9.28292 0.0016531 8.90299 0 8.50625V2.5C0 2.36739 0.0526784 2.24021 0.146447 2.14645C0.240215 2.05268 0.367392 2 0.5 2C0.632608 2 0.759785 2.05268 0.853553 2.14645C0.947322 2.24021 1 2.36739 1 2.5V8.5C1 8.63261 1.05268 8.75979 1.14645 8.85355C1.24021 8.94732 1.36739 9 1.5 9C1.63261 9 1.75979 8.94732 1.85355 8.85355C1.94732 8.75979 2 8.63261 2 8.5V1C2 0.734784 2.10536 0.48043 2.29289 0.292893C2.48043 0.105357 2.73478 0 3 0H13C13.2652 0 13.5196 0.105357 13.7071 0.292893C13.8946 0.48043 14 0.734784 14 1ZM13 1H3V8.5C2.99995 8.67047 2.97034 8.83964 2.9125 9H12.5C12.6326 9 12.7598 8.94732 12.8536 8.85355C12.9473 8.75979 13 8.63261 13 8.5V1Z"
-                  fill="black"
-                  />
-              </svg>
-              <span className="text-sm">{item.mention_cnt || 0}</span>
-            </div>
-
-          {/* TODO Add download counts to the cards */}
-          {item.downloads > 0 && (
-            <div className="flex gap-2 items-center">
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                >
-                <path
-                  d="M0.532693 8.16797C0.673971 8.16797 0.809464 8.22409 0.909363 8.32399C1.00926 8.42389 1.06539 8.55938 1.06539 8.70066V10.2987C1.06539 10.3968 1.14493 10.4763 1.24295 10.4763H10.1212C10.1683 10.4763 10.2134 10.4576 10.2467 10.4243C10.28 10.391 10.2987 10.3458 10.2987 10.2987V8.70066C10.2987 8.55938 10.3548 8.42389 10.4547 8.32399C10.5546 8.22409 10.6901 8.16797 10.8314 8.16797C10.9727 8.16797 11.1082 8.22409 11.2081 8.32399C11.308 8.42389 11.3641 8.55938 11.3641 8.70066V10.2987C11.3641 10.6284 11.2332 10.9445 11.0001 11.1776C10.767 11.4107 10.4508 11.5417 10.1212 11.5417H1.24295C0.913299 11.5417 0.59715 11.4107 0.364052 11.1776C0.130953 10.9445 0 10.6284 0 10.2987V8.70066C0 8.55938 0.0561227 8.42389 0.156022 8.32399C0.255921 8.22409 0.391414 8.16797 0.532693 8.16797Z"
-                  fill="black"
-                  />
-                <path
-                  d="M0.866531 2.99728C0.91594 2.9478 0.974619 2.90855 1.03921 2.88177C1.1038 2.85499 1.17304 2.8412 1.24297 2.8412C1.31289 2.8412 1.38213 2.85499 1.44672 2.88177C1.51132 2.90855 1.56999 2.9478 1.6194 2.99728L5.14938 6.52655V0.532694C5.14938 0.391415 5.2055 0.255921 5.3054 0.156022C5.4053 0.0561224 5.54079 0 5.68207 0C5.82335 0 5.95884 0.0561224 6.05874 0.156022C6.15864 0.255921 6.21477 0.391415 6.21477 0.532694V6.52655L9.74474 2.99728C9.84458 2.89745 9.97999 2.84136 10.1212 2.84136C10.2624 2.84136 10.3978 2.89745 10.4976 2.99728C10.5975 3.09712 10.6535 3.23253 10.6535 3.37372C10.6535 3.51491 10.5975 3.65032 10.4976 3.75016L6.05851 8.18926C6.0091 8.23874 5.95042 8.278 5.88583 8.30478C5.82124 8.33156 5.752 8.34534 5.68207 8.34534C5.61215 8.34534 5.54291 8.33156 5.47832 8.30478C5.41372 8.278 5.35505 8.23874 5.30564 8.18926L0.866531 3.75016C0.817052 3.70075 0.777799 3.64207 0.751017 3.57748C0.724235 3.51288 0.710449 3.44364 0.710449 3.37372C0.710449 3.3038 0.724235 3.23456 0.751017 3.16996C0.777799 3.10537 0.817052 3.04669 0.866531 2.99728Z"
-                  fill="black"
-                  />
-              </svg>
-              <span className="text-sm">34K</span>
-              </div>
-            )}
-          </div>
-        </div>
-        </div>
-      </div>
-  </Link>
-  )
-}
-// TODO Only show images every 3rd card for testing purposes
-// index % 3 === 0  <-- todo
diff --git a/frontend/components/softwarePage/SoftwareFilterPanel.tsx b/frontend/components/softwarePage/SoftwareFilterPanel.tsx
deleted file mode 100644
index 00e8fd451..000000000
--- a/frontend/components/softwarePage/SoftwareFilterPanel.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {ForwardedRef} from 'react'
-import Button from '@mui/material/Button'
-import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
-import Select from '@mui/material/Select'
-import MenuItem from '@mui/material/MenuItem'
-import Autocomplete from '@mui/material/Autocomplete'
-import TextField from '@mui/material/TextField'
-import useSoftwareFilterPanel from '~/components/softwarePage/useSoftwarefilterPanel'
-
-// Ref needed to emebd a custom component inside a MUI modal:
-// https://mui.com/material-ui/guides/composition/#caveat-with-refs
-type Ref = {
-  ref?: ForwardedRef<unknown>
-}
-
-export default function SoftwareFilterPanel({ref}: Ref) {
-  const {
-    keywords,
-    keywordsList,
-    languages,
-    languagesList,
-    licenses,
-    licensesList,
-    handleQueryChange,
-    orderBy, setOrderBy,
-    getFilterCount,
-    resetFilters
-  } = useSoftwareFilterPanel()
-
-  // @ts-ignore
-  return <div ref={ref} className="flex bg-white m-4 p-4 shadow rounded-md flex-col gap-8 max-w-[230px]">
-    <div className="flex">
-      <div className="flex justify-center items-center gap-2 mr-12">
-        <span
-          className="rounded-full bg-gray-100 h-8 w-8 flex items-center justify-center font-semibold">
-          {getFilterCount()}
-        </span>
-        Filters
-      </div>
-
-      <Button
-        size="small"
-        onClick={resetFilters}
-        disabled={getFilterCount() === 0}
-        className="bg-red-200 ml-44"
-        variant="outlined"
-        color="primary"
-      >
-        Clear
-      </Button>
-    </div>
-
-    {/* Order by */}
-    <FormControl fullWidth size="small">
-      <InputLabel id="demo-simple-select-label">Order by</InputLabel>
-      <Select
-        labelId="demo-simple-select-label"
-        id="demo-simple-select"
-        value={orderBy}
-        label="Order by"
-        onChange={(e) => {
-          setOrderBy(e.target.value)
-          handleQueryChange('order', e.target.value)
-        }}
-      >
-        <MenuItem value={'contributor_cnt'}>Contributions</MenuItem>
-        <MenuItem value={'mention_cnt'}>Mentions</MenuItem>
-      </Select>
-    </FormControl>
-
-    {/* Keywords */}
-    <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Keywords</div>
-        <div className="text-sm opacity-60">{keywordsList.length}</div>
-      </div>
-      <Autocomplete
-        className="mt-4"
-        value={keywords}
-        size="small"
-        multiple
-        clearOnEscape
-        options={keywordsList}
-        getOptionLabel={(option) => (option.keyword)}
-        isOptionEqualToValue={(option, value) => {
-          return option.keyword === value.keyword
-        }}
-        defaultValue={[]}
-        filterSelectedOptions
-        renderOption={(props, option) => (
-          <li className="flex w-full items-center content-between" {...props} >
-            <div className="text-sm flex-1">{
-              option.keyword
-            }</div>
-            <div className="text-xs opacity-60">({
-              option.cnt
-            })
-            </div>
-          </li>
-        )}
-        renderInput={(params) => (
-          <TextField {...params} placeholder="Keywords"/>
-        )}
-        onChange={(event, newValue) => {
-          // extract values into string[] for url query
-          const queryFilter = newValue.map(item => item.keyword)
-          handleQueryChange('keywords', queryFilter)
-        }}
-      />
-    </div>
-
-    {/* Programme Languages */}
-    <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Program languages</div>
-        <div className="text-sm  opacity-60">{languagesList.length}</div>
-      </div>
-      <Autocomplete
-        className="mt-4"
-        value={languages}
-        size="small"
-        multiple
-        clearOnEscape
-        options={languagesList}
-        getOptionLabel={(option) => option.prog_lang}
-        isOptionEqualToValue={(option, value) => {
-          return option.prog_lang === value.prog_lang
-        }}
-        defaultValue={[]}
-        filterSelectedOptions
-        renderOption={(props, option) => (
-          <li className="flex w-full items-center content-between" {...props} >
-            <div className="text-sm flex-1">{
-              option.prog_lang
-            }</div>
-            <div className="text-xs opacity-60">({
-              option.cnt
-            })
-            </div>
-          </li>
-        )}
-        renderInput={(params) => (
-          <TextField {...params} placeholder="Program languages"/>
-        )}
-        onChange={(event, newValue) => {
-          // extract values into string[] for url query
-          const queryFilter = newValue.map(item => item.prog_lang)
-          // update query url
-          handleQueryChange('prog_lang', queryFilter)
-        }}
-      />
-    </div>
-
-    {/* Licenses */}
-    <div>
-      <div className="flex justify-between items-center">
-        <div className="font-semibold">Licenses</div>
-        <div className="text-sm opacity-60">{licensesList.length}</div>
-      </div>
-      <Autocomplete
-        className="mt-4"
-        value={licenses}
-        size="small"
-        multiple
-        clearOnEscape
-        options={licensesList}
-        getOptionLabel={(option) => option.license}
-        isOptionEqualToValue={(option, value) => {
-          return option.license === value.license
-        }}
-        defaultValue={[]}
-        filterSelectedOptions
-        renderOption={(props, option) => (
-          <li className="flex items-center w-full content-between" {...props} >
-            <div className="flex-1 text-sm">{option.license}</div>
-            <div className="text-xs opacity-60">({option.cnt})</div>
-          </li>
-        )}
-        renderInput={(params) => (
-          <TextField {...params} placeholder="Licenses"/>
-        )}
-        onChange={(event, newValue) => {
-          // extract values into string[] for url query
-          const queryFilter = newValue.map(item => item.license)
-          // update query url
-          handleQueryChange('licenses', queryFilter)
-        }}
-      />
-    </div>
-  </div>
-}
diff --git a/frontend/components/softwarePage/softwarePagePanel.d.ts b/frontend/components/softwarePage/softwarePagePanel.d.ts
deleted file mode 100644
index 395af70e6..000000000
--- a/frontend/components/softwarePage/softwarePagePanel.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-export type License = {
-  license: string;
-  cnt: number;
-}
diff --git a/frontend/components/softwarePage/useSoftwarefilterPanel.ts b/frontend/components/softwarePage/useSoftwarefilterPanel.ts
deleted file mode 100644
index 94e6ebcd7..000000000
--- a/frontend/components/softwarePage/useSoftwarefilterPanel.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {useRouter} from 'next/router'
-import {getBaseUrl} from '~/utils/fetchHelpers'
-import {useEffect, useState} from 'react'
-import {ProgrammingLanguage} from '~/components/software/filter/softwareFilterApi'
-import {SoftwareListItem} from '~/types/SoftwareTypes'
-import {ssrSoftwareParams} from '~/utils/extractQueryParam'
-import {buildFilterUrl, softwareListUrl} from '~/utils/postgrestUrl'
-import {getSoftwareList} from '~/utils/getSoftware'
-import {Keyword} from '../keyword/FindKeyword'
-import {License} from '~/components/softwarePage/softwarePagePanel'
-
-export default function useSoftwarefilterPanel() {
-  const router = useRouter()
-  const baseUrl = getBaseUrl()
-
-  const [orderBy, setOrderBy] = useState<string>('')
-  const [search, setSearch] = useState('')
-
-  // keyword list is an array of objects or a string
-  const [keywordsList, setKeywordsList] = useState<Keyword[]>([])
-  const [keywords, setKeywords] = useState<Keyword[]>([])
-
-  const [languages, setLanguages] = useState<ProgrammingLanguage[]>([])
-  const [languagesList, setLanguagesList] = useState<ProgrammingLanguage[]>([])
-
-  const [licenses, setLicenses] = useState<License[]>([])
-  const [licensesList, setLicensesList] = useState<License[]>([])
-
-  const [software, setSoftware] = useState<{ count: number, items: SoftwareListItem[] }>({
-    count: 0,
-    items: []
-  })
-
-  useEffect(() => {
-    if (baseUrl) {
-      // fetch keywords list
-      fetch(`${baseUrl}/rpc/keyword_count_for_software?keyword=ilike.**&cnt=gt.0&order=cnt.desc.nullslast,keyword.asc`)
-        .then((response) => response.json())
-        .then((data) => setKeywordsList(data))
-
-      // fetch programme languages list
-      fetch(`${baseUrl}/rpc/prog_lang_cnt_for_software?prog_lang=ilike.**&cnt=gt.0&order=cnt.desc.nullslast,prog_lang.asc`)
-        .then((response) => response.json())
-        .then((data) => setLanguagesList(data))
-
-      // fetch licenses list
-      fetch(`${baseUrl}/rpc/license_cnt_for_software`)
-        .then((response) => response.json())
-        .then((data) => {
-          setLicensesList(data)
-        })
-    }
-  }, [baseUrl])
-
-  useEffect(() => {
-    if (search !== '') {
-      const {search:searchInput} = ssrSoftwareParams(router.query)
-      if (searchInput && searchInput !== '') {
-        setSearch(searchInput)
-      } else {
-        setSearch('')
-      }
-    }
-  }, [router.query,search])
-
-  useEffect(() => {
-    if (orderBy !== '') {
-      const {order} = ssrSoftwareParams(router.query)
-      if (order && order !== '') {
-        setOrderBy(order)
-      } else {
-        setOrderBy('')
-      }
-    }
-  }, [router.query, orderBy])
-
-  useEffect(() => {
-    if (keywordsList.length > 0) {
-      const {keywords} = ssrSoftwareParams(router.query)
-      if (keywords && keywords.length > 0) {
-        const selectedKeywords: Keyword[] = keywordsList.filter(option => {
-          return keywords.includes(option.keyword)
-        })
-        setKeywords(selectedKeywords)
-      } else {
-        setKeywords([])
-      }
-    }
-  }, [keywordsList, router.query])
-
-  useEffect(() => {
-    if (languagesList.length > 0) {
-      const {prog_lang} = ssrSoftwareParams(router.query)
-      if (prog_lang && prog_lang.length > 0) {
-        const selectedProgLang: ProgrammingLanguage[] = languagesList.filter(option => {
-          return prog_lang.includes(option.prog_lang)
-        })
-        setLanguages(selectedProgLang)
-      } else {
-        setLanguages([])
-      }
-    }
-  }, [languagesList, router.query])
-
-  useEffect(() => {
-    if (licensesList.length > 0) {
-      const {licenses} = ssrSoftwareParams(router.query)
-      if (licenses && licenses.length > 0) {
-        const selected: License[] = licensesList.filter(option => {
-          return licenses.includes(option.license)
-        })
-        setLicenses(selected)
-      } else {
-        setLicenses([])
-      }
-    }
-  }, [licensesList, router.query])
-
-  useEffect(() => {
-    let orderBy
-    // extract params from page-query
-    const {search, keywords, prog_lang, licenses, order, page} = ssrSoftwareParams(router.query)
-
-    // update components based on query params
-    if (order) {
-      setOrderBy(order)
-      orderBy = `${orderBy}.desc.nullslast`
-    }
-    if (search) {
-      setSearch(search)
-    }
-
-    //build api url
-    const url = softwareListUrl({
-      baseUrl,
-      search,
-      keywords,
-      licenses,
-      order: orderBy,
-      prog_lang,
-      limit: 24,
-      offset: 24 * (page ?? 0)
-    })
-
-    // get software list from api
-    getSoftwareList({url})
-      .then(resp => {
-        setSoftware({
-          count: resp.count ?? 0,
-          items: resp.data ?? []
-        })
-      })
-
-  }, [router.query, baseUrl])
-
-
-  function handleQueryChange(key: string, value: string | string[]) {
-    const url = buildFilterUrl({
-      // take existing params from url (query)
-      ...ssrSoftwareParams(router.query),
-      [key]: value,
-      // start from first page
-      page: 0,
-      // use 24 items
-      rows: 24
-    }, 'highlights')
-
-    // update page url
-    router.push(url)
-  }
-
-  function getFilterCount() {
-    let count = 0
-    if (orderBy !== '') count++
-    if (keywords.length > 0) count++
-    if (languages.length > 0) count++
-    if (licenses.length > 0) count++
-    if (search !== '') count++
-    return count
-  }
-
-  function resetFilters() {
-    // return pathname without filters/query
-    router.replace(router.pathname, undefined, {shallow: true})
-  }
-
-  return {
-    orderBy, setOrderBy,
-    keywords, keywordsList,
-    languages, languagesList,
-    licenses, licensesList,
-    software, setSoftware,
-    search, setSearch,
-    handleQueryChange,
-    getFilterCount,
-    resetFilters
-  }
-}
-
diff --git a/frontend/next.config.js b/frontend/next.config.js
index 802426667..3104fbd95 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2021 - 2022 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2021 - 2022 dv4all
+// SPDX-FileCopyrightText: 2021 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2021 - 2023 dv4all
 // SPDX-FileCopyrightText: 2022 Ewan Cahen (Netherlands eScience Center) <e.cahen@esciencecenter.nl>
 // SPDX-FileCopyrightText: 2022 Jesús García Gonzalez (Netherlands eScience Center) <j.g.gonzalez@esciencecenter.nl>
 // SPDX-FileCopyrightText: 2022 Netherlands eScience Center
@@ -15,6 +15,8 @@ module.exports = {
   // create standalone output to use in docker image
   // and achieve minimal image size (see Dockerfile)
   output: 'standalone',
+  // enable source maps in production?
+  productionBrowserSourceMaps: true,
   // disable strict mode if you want react to render compent once
   // see for more info https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
   reactStrictMode: false,
diff --git a/frontend/pages/highlights/index.tsx b/frontend/pages/highlights/index.tsx
deleted file mode 100644
index 68137f479..000000000
--- a/frontend/pages/highlights/index.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {useEffect, useState} from 'react'
-import {GetServerSidePropsContext} from 'next/types'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import Pagination from '@mui/material/Pagination'
-
-import {app} from '~/config/app'
-import {getBaseUrl} from '~/utils/fetchHelpers'
-import {softwareListUrl} from '~/utils/postgrestUrl'
-import {getSoftwareList} from '~/utils/getSoftware'
-import {ssrSoftwareParams} from '~/utils/extractQueryParam'
-import {SoftwareListItem} from '~/types/SoftwareTypes'
-import MainContent from '~/components/layout/MainContent'
-import AppHeader from '~/components/AppHeader'
-import AppFooter from '~/components/AppFooter'
-import SoftwareFiltersPanel from '~/components/software/overview/SoftwareFiltersPanel'
-import SoftwareHighlights from '~/components/software/highlights/SoftwareHighlights'
-import OverviewPageBackground from '~/components/software/overview/PageBackground'
-import SearchSection, {LayoutType} from '~/components/software/overview/SearchSection'
-import useSoftwareParams from '~/components/software/overview/useSoftwareParams'
-import SoftwareOverviewContent from '~/components/software/overview/SoftwareOverviewContent'
-import SoftwareFilters from '~/components/software/overview/filters/index'
-import {
-  KeywordFilterOption, LanguagesFilterOption, LicensesFilterOption,
-  softwareKeywordsFilter, softwareLanguagesFilter,
-  softwareLicesesFilter
-} from '~/components/software/overview/filters/softwareFiltersApi'
-import FilterModal from '~/components/software/overview/filters/FilterModal'
-import PageMeta from '~/components/seo/PageMeta'
-import CanonicalUrl from '~/components/seo/CanonicalUrl'
-import {getUserSettings, setDocumentCookie} from '~/components/software/overview/userSettings'
-import {SoftwareHighlight, getSoftwareHighlights} from '~/components/admin/software-highlights/apiSoftwareHighlights'
-
-
-type SoftwareHighlightsPageProps = {
-  search?: string
-  keywords?: string[],
-  keywordsList: KeywordFilterOption[],
-  prog_lang?: string[],
-  languagesList: LanguagesFilterOption[],
-  licenses?: string[],
-  licensesList: LicensesFilterOption[],
-  order: string,
-  page: number,
-  rows: number,
-  count: number,
-  layout: LayoutType,
-  software: SoftwareListItem[],
-  highlights: SoftwareHighlight[]
-}
-
-const pageTitle = `Software | ${app.title}`
-const pageDesc = 'The list of research software registerd in the Research Software Directory.'
-
-export default function SoftwareHighlightsPage({
-  search, keywords,
-  prog_lang, licenses,
-  order, page, rows,
-  count, layout,
-  keywordsList, languagesList,
-  licensesList, software, highlights
-}: SoftwareHighlightsPageProps) {
-  const [view, setView] = useState<LayoutType>('masonry')
-  const smallScreen = useMediaQuery('(max-width:640px)')
-  const {handleQueryChange, resetFilters} = useSoftwareParams()
-
-  const [modal,setModal] = useState(false)
-  const numPages = Math.ceil(count / rows)
-  const filterCnt = getFilterCount()
-
-  // console.group('SoftwareHighlightsPage')
-  // console.log('search...', search)
-  // console.log('keywords...', keywords)
-  // console.log('prog_lang...', prog_lang)
-  // console.log('licenses...', licenses)
-  // console.log('order...', order)
-  // console.log('layout...', layout)
-  // console.log('view...', view)
-  // console.log('software...', software)
-  // console.log('highlights...', highlights)
-  // console.groupEnd()
-
-  // Update view state based on layout value from cookie
-  useEffect(() => {
-    if (layout) {
-      setView(layout)
-    }
-  },[layout])
-
-  function getFilterCount() {
-    let count = 0
-    if (order) count++
-    if (keywords) count++
-    if (prog_lang) count++
-    if (licenses) count++
-    if (search) count++
-    return count
-  }
-
-  function setLayout(view: LayoutType) {
-    // update local view
-    setView(view)
-    // save to cookie
-    setDocumentCookie(view,'rsd_page_layout')
-  }
-
-  return (
-    <>
-      {/* Page Head meta tags */}
-      <PageMeta
-        title={pageTitle}
-        description={pageDesc}
-      />
-      {/* canonical url meta tag */}
-      <CanonicalUrl />
-      <OverviewPageBackground>
-        {/* App header */}
-        <AppHeader />
-        {/* Software Highlights Carousel */}
-        <SoftwareHighlights highlights={highlights} />
-        {/* Main page body */}
-        <MainContent className='pb-12'>
-          {/* Page title */}
-          <h1
-            className="my-4 text-2xl"
-            id="list-top"
-          >
-            All software
-          </h1>
-          {/* Page grid with 2 sections: left filter panel and main content */}
-          <div className="flex-1 flex w-full my-4 gap-8">
-            {/* Filters panel large screen */}
-            {smallScreen===false &&
-              <SoftwareFiltersPanel>
-                <SoftwareFilters
-                  keywords={keywords ?? []}
-                  keywordsList={keywordsList}
-                  languages={prog_lang ?? []}
-                  languagesList={languagesList}
-                  licenses={licenses ?? []}
-                  licensesList={licensesList}
-                  orderBy={order ?? ''}
-                  filterCnt={filterCnt}
-                  resetFilters={resetFilters}
-                  handleQueryChange={handleQueryChange}
-                />
-              </SoftwareFiltersPanel>
-            }
-            {/* Search & main content section */}
-            <div className="flex-1">
-              <SearchSection
-                page={page}
-                rows={rows}
-                count={count}
-                search={search}
-                placeholder={keywords?.length ? 'Find within selection' : 'Find software'}
-                layout={view}
-                resetFilters={resetFilters}
-                setView={setLayout}
-                setModal={setModal}
-                handleQueryChange={handleQueryChange}
-              />
-              {/* Software content: cards or list */}
-              <SoftwareOverviewContent
-                layout={view}
-                software={software}
-              />
-              {/* Pagination */}
-              <div className="flex justify-center mt-8">
-                {numPages > 1 &&
-                  <Pagination
-                    count={numPages}
-                    page={page}
-                    onChange={(_, page) => {
-                      handleQueryChange('page',page.toString())
-                    }}
-                  />
-                }
-              </div>
-            </div>
-          </div>
-        </MainContent>
-        <AppFooter />
-      </OverviewPageBackground>
-      {/* filter for mobile */}
-      {
-        smallScreen===true &&
-        <FilterModal
-          open={modal}
-          keywords={keywords ?? []}
-          keywordsList={keywordsList}
-          prog_lang={prog_lang ?? []}
-          languagesList={languagesList}
-          licenses={licenses ?? []}
-          licensesList={licensesList}
-          order={order ?? ''}
-          // setOrderBy={setOrderBy}
-          filterCnt={filterCnt}
-          resetFilters={resetFilters}
-          handleQueryChange={handleQueryChange}
-          setModal={setModal}
-        />
-      }
-    </>
-  )
-}
-
-// fetching data server side
-// see documentation https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  let orderBy, offset=0
-  // extract params from page-query
-  const {search, keywords, prog_lang, licenses, order, rows, page} = ssrSoftwareParams(context.query)
-  // extract user settings from cookie
-  const {rsd_page_layout, rsd_page_rows} = getUserSettings(context.req)
-  // default rows values comes from user settings
-  let page_rows = rsd_page_rows
-
-  if (order) {
-    orderBy=`${order}.desc.nullslast`
-  }
-  // if rows && page are provided as query params
-  if (rows && page) {
-    offset = rows * (page - 1)
-    // use rows provided as param
-    page_rows = rows
-  }
-  // construct postgREST api url with query params
-  const url = softwareListUrl({
-    baseUrl: getBaseUrl(),
-    search,
-    keywords,
-    licenses,
-    prog_lang,
-    order: orderBy,
-    limit: page_rows,
-    offset
-  })
-
-  // console.log('software...url...', url)
-  // console.log('search...', search)
-  // console.log('page_rows...', page_rows)
-
-  // get software items AND filter options
-  const [
-    software,
-    keywordsList,
-    languagesList,
-    licensesList,
-    {highlights}
-  ] = await Promise.all([
-    getSoftwareList({url}),
-    softwareKeywordsFilter({search, keywords, prog_lang, licenses}),
-    softwareLanguagesFilter({search, keywords, prog_lang, licenses}),
-    softwareLicesesFilter({search, keywords, prog_lang, licenses}),
-    getSoftwareHighlights({
-      page: 0,
-      // get max. 20 items
-      rows: 20,
-      orderBy: 'position'
-    })
-  ])
-
-  // is passed as props to page
-  // see params of page function
-  return {
-    props: {
-      search,
-      keywords,
-      keywordsList,
-      prog_lang,
-      languagesList,
-      licenses,
-      licensesList,
-      page,
-      order,
-      rows: page_rows,
-      layout: rsd_page_layout,
-      count: software.count,
-      software: software.data,
-      highlights
-    },
-  }
-}
diff --git a/frontend/pages/software/index.tsx b/frontend/pages/software/index.tsx
index 52e310587..660d55602 100644
--- a/frontend/pages/software/index.tsx
+++ b/frontend/pages/software/index.tsx
@@ -1,214 +1,301 @@
-// SPDX-FileCopyrightText: 2021 - 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2021 - 2023 dv4all
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {MouseEvent, ChangeEvent} from 'react'
-import {useRouter} from 'next/router'
+import {useEffect, useState} from 'react'
 import {GetServerSidePropsContext} from 'next/types'
-import TablePagination from '@mui/material/TablePagination'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import Pagination from '@mui/material/Pagination'
 
 import {app} from '~/config/app'
-import DefaultLayout from '~/components/layout/DefaultLayout'
-import PageTitle from '~/components/layout/PageTitle'
-import Searchbox from '~/components/form/Searchbox'
-import SoftwareGrid from '~/components/software/SoftwareGrid'
-import {SoftwareListItem} from '~/types/SoftwareTypes'
-import {rowsPerPageOptions} from '~/config/pagination'
+import {getBaseUrl} from '~/utils/fetchHelpers'
+import {softwareListUrl} from '~/utils/postgrestUrl'
 import {getSoftwareList} from '~/utils/getSoftware'
 import {ssrSoftwareParams} from '~/utils/extractQueryParam'
-import {softwareListUrl,ssrSoftwareUrl} from '~/utils/postgrestUrl'
-import {getBaseUrl} from '~/utils/fetchHelpers'
-import SoftwareFilter from '~/components/software/filter'
-import {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
+import {SoftwareListItem} from '~/types/SoftwareTypes'
+import MainContent from '~/components/layout/MainContent'
+import AppHeader from '~/components/AppHeader'
+import AppFooter from '~/components/AppFooter'
 import PageMeta from '~/components/seo/PageMeta'
 import CanonicalUrl from '~/components/seo/CanonicalUrl'
-import {getUserSettings} from '~/components/software/overview/userSettings'
+import {
+  SoftwareHighlight,
+  getSoftwareHighlights
+} from '~/components/admin/software-highlights/apiSoftwareHighlights'
+import SoftwareFiltersPanel from '~/components/software/overview/SoftwareFiltersPanel'
+import SoftwareHighlights from '~/components/software/overview/SoftwareHighlights'
+import OverviewPageBackground from '~/components/software/overview/PageBackground'
+import SearchSection, {LayoutType} from '~/components/software/overview/SearchSection'
+import useSoftwareParams from '~/components/software/overview/useSoftwareParams'
+import SoftwareOverviewContent from '~/components/software/overview/SoftwareOverviewContent'
+import SoftwareFilters from '~/components/software/overview/filters/index'
+import {
+  KeywordFilterOption, LanguagesFilterOption, LicensesFilterOption,
+  softwareKeywordsFilter, softwareLanguagesFilter,
+  softwareLicesesFilter
+} from '~/components/software/overview/filters/softwareFiltersApi'
+import FilterModal from '~/components/software/overview/filters/FilterModal'
+import {getUserSettings, setDocumentCookie} from '~/components/software/overview/userSettings'
+import {softwareOrderOptions} from '~/components/software/overview/filters/OrderBy'
 
-type SoftwareIndexPageProps = {
-  count: number,
+type SoftwareOverviewProps = {
+  search?: string | null
+  keywords?: string[] | null,
+  keywordsList: KeywordFilterOption[],
+  prog_lang?: string[] | null,
+  languagesList: LanguagesFilterOption[],
+  licenses?: string[] | null,
+  licensesList: LicensesFilterOption[],
+  order?: string | null,
   page: number,
   rows: number,
-  keywords?: string[],
-  prog_lang?: string[],
+  count: number,
+  layout: LayoutType,
   software: SoftwareListItem[],
-  search?: string,
+  highlights: SoftwareHighlight[]
 }
 
 const pageTitle = `Software | ${app.title}`
 const pageDesc = 'The list of research software registerd in the Research Software Directory.'
 
-export default function SoftwareIndexPage(
-  {software=[], count, page, rows, keywords, prog_lang, search}: SoftwareIndexPageProps
-) {
-  // use next router (hook is only for browser)
-  const router = useRouter()
-  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions('software')
+export default function SoftwareOverviewPage({
+  search, keywords,
+  prog_lang, licenses,
+  order, page, rows,
+  count, layout,
+  keywordsList, languagesList,
+  licensesList, software, highlights
+}: SoftwareOverviewProps) {
+  const [view, setView] = useState<LayoutType>('masonry')
+  const smallScreen = useMediaQuery('(max-width:640px)')
+  const {handleQueryChange, resetFilters} = useSoftwareParams()
 
-  // console.group('SoftwareIndexPage')
-  // console.log('query...', router.query)
-  // console.groupEnd()
+  const [modal,setModal] = useState(false)
+  const numPages = Math.ceil(count / rows)
+  const filterCnt = getFilterCount()
 
-  // next/previous page button
-  function handleTablePageChange(
-    event: MouseEvent<HTMLButtonElement> | null,
-    newPage: number,
-  ) {
-    const url = ssrSoftwareUrl({
-      // take existing params from url (query)
-      ...ssrSoftwareParams(router.query),
-      page: newPage,
-    })
-    router.push(url)
-  }
+  // console.group('SoftwareHighlightsPage')
+  // console.log('search...', search)
+  // console.log('keywords...', keywords)
+  // console.log('prog_lang...', prog_lang)
+  // console.log('licenses...', licenses)
+  // console.log('order...', order)
+  // console.log('page...', page)
+  // console.log('rows...', rows)
+  // console.log('count...', count)
+  // console.log('layout...', layout)
+  // console.log('keywordsList...', keywordsList)
+  // console.log('languagesList...', languagesList)
+  // console.log('licensesList...', licensesList)
+  // console.log('software...', software)
+  // console.log('highlights...', highlights)
+  // console.groupEnd()
 
-  function handlePaginationChange(
-    event: ChangeEvent<unknown>,
-    newPage: number,
-  ) {
-    // Pagination component starts counting from 1, but we need to start from 0
-    handleTablePageChange(event as any, newPage - 1)
-  }
+  // Update view state based on layout value from cookie
+  useEffect(() => {
+    if (layout) {
+      setView(layout)
+    }
+  },[layout])
 
-  // change number of cards per page
-  function handleItemsPerPage(
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ){
-    const url = ssrSoftwareUrl({
-      // take existing params from url (query)
-      ...ssrSoftwareParams(router.query),
-      // reset to first page
-      page: 0,
-      rows: parseInt(event.target.value),
-    })
-    router.push(url)
+  function getFilterCount() {
+    let count = 0
+    // if (order) count++
+    if (keywords) count++
+    if (prog_lang) count++
+    if (licenses) count++
+    if (search) count++
+    return count
   }
 
-  function handleSearch(searchFor: string) {
-    // debugger
-    const url = ssrSoftwareUrl({
-      // take existing params from url (query)
-      ...ssrSoftwareParams(router.query),
-      search: searchFor,
-      // start from first page
-      page: 0,
-    })
-    router.push(url)
+  function setLayout(view: LayoutType) {
+    // update local view
+    setView(view)
+    // save to cookie
+    setDocumentCookie(view,'rsd_page_layout')
   }
 
-  function handleFilters({keywords,prog_lang}:{keywords:string[],prog_lang:string[]}){
-    const url = ssrSoftwareUrl({
-      // take existing params from url (query)
-      ...ssrSoftwareParams(router.query),
-      keywords,
-      prog_lang,
-      // start from first page
-      page: 0,
-    })
-    router.push(url)
-  }
-
-  // TODO! handle sort options
-  // function handleSort(sortOn:string){
-  //   logger(`software.index.handleSort: TODO! Sort on...${sortOn}`,'warn')
-  // }
-
   return (
-    <DefaultLayout>
+    <>
       {/* Page Head meta tags */}
       <PageMeta
         title={pageTitle}
         description={pageDesc}
       />
       {/* canonical url meta tag */}
-      <CanonicalUrl/>
-      <PageTitle title="Software">
-        <div className="md:flex flex-wrap justify-end">
-          <div className="flex items-center">
-            <SoftwareFilter
-              keywords={keywords ?? []}
-              prog_lang={prog_lang ?? []}
-              onApply={handleFilters}
-            />
-            <Searchbox
-              placeholder={keywords?.length ? 'Find within selection' : 'Find software'}
-              onSearch={handleSearch}
-              defaultValue={search}
-            />
+      <CanonicalUrl />
+      <OverviewPageBackground>
+        {/* App header */}
+        <AppHeader />
+        {/* Software Highlights Carousel */}
+        <SoftwareHighlights highlights={highlights} />
+        {/* Main page body */}
+        <MainContent className='pb-12'>
+          {/* Page title */}
+          <h1
+            className="my-4 text-2xl"
+            id="list-top"
+            role="heading"
+          >
+            All software
+          </h1>
+          {/* Page grid with 2 sections: left filter panel and main content */}
+          <div className="flex-1 flex w-full my-4 gap-8">
+            {/* Filters panel large screen */}
+            {smallScreen===false &&
+              <SoftwareFiltersPanel>
+                <SoftwareFilters
+                  keywords={keywords ?? []}
+                  keywordsList={keywordsList}
+                  languages={prog_lang ?? []}
+                  languagesList={languagesList}
+                  licenses={licenses ?? []}
+                  licensesList={licensesList}
+                  orderBy={order ?? ''}
+                  filterCnt={filterCnt}
+                  resetFilters={resetFilters}
+                  handleQueryChange={handleQueryChange}
+                />
+              </SoftwareFiltersPanel>
+            }
+            {/* Search & main content section */}
+            <div className="flex-1">
+              <SearchSection
+                page={page}
+                rows={rows}
+                count={count}
+                search={search}
+                placeholder={keywords?.length ? 'Find within selection' : 'Find software'}
+                layout={view}
+                resetFilters={resetFilters}
+                setView={setLayout}
+                setModal={setModal}
+                handleQueryChange={handleQueryChange}
+              />
+              {/* Software content: cards or list */}
+              <SoftwareOverviewContent
+                layout={view}
+                software={software}
+              />
+              {/* Pagination */}
+              <div className="flex justify-center mt-8">
+                {numPages > 1 &&
+                  <Pagination
+                    count={numPages}
+                    page={page}
+                    onChange={(_, page) => {
+                      handleQueryChange('page',page.toString())
+                    }}
+                  />
+                }
+              </div>
+            </div>
           </div>
-          <TablePagination
-            component="nav"
-            count={count}
-            page={page}
-            labelRowsPerPage="Per page"
-            onPageChange={handleTablePageChange}
-            rowsPerPage={rows}
-            rowsPerPageOptions={rowsPerPageOptions}
-            onRowsPerPageChange={handleItemsPerPage}
-          />
-        </div>
-      </PageTitle>
-
-      <SoftwareGrid
-        className='gap-[0.125rem] p-[0.125rem] pt-4 pb-12'
-        grid={{
-          height: itemHeight,
-          minWidth,
-          maxWidth
-        }}
-        software={software}
-      />
-
-      <div className="flex flex-wrap justify-center mb-8">
-        <Pagination
-          count={Math.ceil(count/rows)}
-          page={page + 1}
-          onChange={handlePaginationChange}
-          size="large"
-          shape="rounded"
+        </MainContent>
+        <AppFooter />
+      </OverviewPageBackground>
+      {/* filter for mobile */}
+      {
+        smallScreen===true &&
+        <FilterModal
+          open={modal}
+          keywords={keywords ?? []}
+          keywordsList={keywordsList}
+          prog_lang={prog_lang ?? []}
+          languagesList={languagesList}
+          licenses={licenses ?? []}
+          licensesList={licensesList}
+          order={order ?? ''}
+          // setOrderBy={setOrderBy}
+          filterCnt={filterCnt}
+          resetFilters={resetFilters}
+          handleQueryChange={handleQueryChange}
+          setModal={setModal}
         />
-      </div>
-    </DefaultLayout>
+      }
+    </>
   )
 }
 
 // fetching data server side
 // see documentation https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
-export async function getServerSideProps(context:GetServerSidePropsContext) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  let orderBy, offset=0
   // extract params from page-query
-  const {search, keywords, prog_lang, rows, page} = ssrSoftwareParams(context.query)
+  const {search, keywords, prog_lang, licenses, order, rows, page} = ssrSoftwareParams(context.query)
   // extract user settings from cookie
-  const {rsd_page_rows} = getUserSettings(context.req)
+  const {rsd_page_layout, rsd_page_rows} = getUserSettings(context.req)
+  // default rows values comes from user settings
+  let page_rows = rsd_page_rows
+
+  if (order) {
+    // extract order direction from definitions
+    const orderInfo = softwareOrderOptions.find(item=>item.key===order)
+    if (orderInfo) orderBy=`${order}.${orderInfo.direction}`
+  }
+  // if rows && page are provided as query params
+  if (rows && page) {
+    offset = rows * (page - 1)
+    // use rows provided as param
+    page_rows = rows
+  }
   // construct postgREST api url with query params
   const url = softwareListUrl({
     baseUrl: getBaseUrl(),
     search,
     keywords,
+    licenses,
     prog_lang,
-    order: search ? undefined : 'mention_cnt.desc.nullslast,contributor_cnt.desc.nullslast,updated_at.desc.nullslast,brand_name.asc',
-    limit: rows ?? rsd_page_rows,
-    offset: rows && page ? rows * page : undefined,
+    order: orderBy,
+    limit: page_rows,
+    offset
   })
 
   // console.log('software...url...', url)
+  // console.log('order...', order)
+  // console.log('orderBy...', orderBy)
+  // console.log('page_rows...', page_rows)
 
-  // get software list, we do not pass the token
-  // when token is passed it will return not published items too
-  const software = await getSoftwareList({url})
+  // get software items, filter options AND highlights
+  const [
+    software,
+    keywordsList,
+    languagesList,
+    licensesList,
+    // extract highlights from fn response (we don't need count)
+    {highlights}
+  ] = await Promise.all([
+    getSoftwareList({url}),
+    softwareKeywordsFilter({search, keywords, prog_lang, licenses}),
+    softwareLanguagesFilter({search, keywords, prog_lang, licenses}),
+    softwareLicesesFilter({search, keywords, prog_lang, licenses}),
+    getSoftwareHighlights({
+      page: 0,
+      // get max. 20 items
+      rows: 20,
+      orderBy: 'position'
+    })
+  ])
 
-  // will be passed as props to page
-  // see params of SoftwareIndexPage function
+  // passed as props to the page
+  // see params of page function
   return {
     props: {
-      search: search ?? null,
-      keywords: keywords ?? null,
-      prog_lang: prog_lang ?? null,
-      count: software.count,
+      search,
+      keywords,
+      keywordsList,
+      prog_lang,
+      languagesList,
+      licenses,
+      licensesList,
       page,
-      rows: rows ?? rsd_page_rows,
+      order,
+      rows: page_rows,
+      layout: rsd_page_layout,
+      count: software.count,
       software: software.data,
+      highlights
     },
   }
 }