diff --git a/src/app/[language]/videos/results/page.tsx b/src/app/[language]/videos/results/page.tsx
new file mode 100644
index 0000000..d04e8e3
--- /dev/null
+++ b/src/app/[language]/videos/results/page.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+import SearchResultsPage from "@/features/SearchResultsPage";
+import { getServerTranslation } from "@/services/i18n";
+
+type Props = {
+  params: { language: string };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { t } = await getServerTranslation(params.language, "videos");
+
+  return {
+    title: t("search-title"),
+  };
+}
+
+export default function Results() {
+  return <SearchResultsPage />;
+}
diff --git a/src/components/FeaturedVideoCard/__snapshots__/featuredVideoCard.test.tsx.snap b/src/components/FeaturedVideoCard/__snapshots__/featuredVideoCard.test.tsx.snap
index c56b404..1a9f888 100644
--- a/src/components/FeaturedVideoCard/__snapshots__/featuredVideoCard.test.tsx.snap
+++ b/src/components/FeaturedVideoCard/__snapshots__/featuredVideoCard.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FeaturedVideoCard should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root custom-class css-1ahnmrs-MuiPaper-root-MuiCard-root-FeaturedVideoCardContainer-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root custom-class css-jwtqct-MuiPaper-root-MuiCard-root-FeaturedVideoCardContainer-root"
     data-testid="video-card"
     style="--Paper-shadow: var(--mui-shadows-1); --Paper-overlay: var(--mui-overlays-1);"
   >
diff --git a/src/components/FeaturedVideoCard/styled.tsx b/src/components/FeaturedVideoCard/styled.tsx
index de60cf2..236123a 100644
--- a/src/components/FeaturedVideoCard/styled.tsx
+++ b/src/components/FeaturedVideoCard/styled.tsx
@@ -49,7 +49,7 @@ export const FeaturedVideoCardContainer = styled(Card, {
           -webkit-line-clamp: 2;
           color: ${theme.palette.colors.white};
           display: -webkit-box;
-          font-size: 28px;
+          font-size: 26px;
           font-style: normal;
           font-weight: 500;
           letter-spacing: 0.4px;
@@ -81,7 +81,7 @@ export const FeaturedVideoCardContainer = styled(Card, {
       }
     }
 
-    ${theme.breakpoints.down("xl")} {
+    ${theme.breakpoints.down("lg")} {
       .${cardContentClasses.root} {
         .video-detail {
           .${typographyClasses.h3} {
diff --git a/src/components/Navbar/navbar.test.tsx b/src/components/Navbar/navbar.test.tsx
index 7657b9f..887e998 100644
--- a/src/components/Navbar/navbar.test.tsx
+++ b/src/components/Navbar/navbar.test.tsx
@@ -119,8 +119,10 @@ describe("Navbar Component", () => {
 
   test("should navigate on search submit", () => {
     customRender(<Navbar />);
-    fireEvent.submit(screen.getByTestId("search-query"));
-    expect(mockNavigateTo).toHaveBeenCalledWith("videos", { search: "" });
+    const searchInput = screen.getByPlaceholderText("Search...");
+    fireEvent.change(searchInput, { target: { value: "some test search" } });
+    fireEvent.submit(searchInput.closest("form")!);
+    expect(mockNavigateTo).toHaveBeenCalledWith("searchResult", { search: "some test search" });
   });
 
   test("should contain all user menu options", () => {
@@ -147,14 +149,6 @@ describe("Navbar Component", () => {
     expect(searchInput).toHaveValue("");
   });
 
-  test("should navigate on search submit", () => {
-    customRender(<Navbar />);
-    const searchInput = screen.getByTestId("search-query");
-    fireEvent.change(searchInput, { target: { value: "Test Query" } });
-    fireEvent.submit(searchInput);
-    expect(mockNavigateTo).toHaveBeenCalledWith("videos", { search: "Test Query" });
-  });
-
   test("should call logout and purge persistor when logout is clicked", async () => {
     customRender(<Navbar />);
     fireEvent.click(screen.getByTestId("avatar-btn"));
diff --git a/src/components/Navbar/navbar.tsx b/src/components/Navbar/navbar.tsx
index 4eb4008..792b412 100644
--- a/src/components/Navbar/navbar.tsx
+++ b/src/components/Navbar/navbar.tsx
@@ -51,7 +51,9 @@ function Navbar() {
 
   const handleSearch = (searchEvent: React.FormEvent) => {
     searchEvent.preventDefault();
-    navigateTo("videos", { search: searchQuery });
+    if (searchQuery.length > 0) {
+      navigateTo("searchResult", { search: searchQuery });
+    }
   };
 
   const handleClearSearch = () => {
diff --git a/src/components/SearchVideoCard/searchVideoCard.tsx b/src/components/SearchVideoCard/searchVideoCard.tsx
new file mode 100644
index 0000000..bbd99c2
--- /dev/null
+++ b/src/components/SearchVideoCard/searchVideoCard.tsx
@@ -0,0 +1,69 @@
+import React, { FC } from "react";
+
+import Box from "@mui/material/Box";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Image from "next/image";
+
+import useNavigation from "@/hooks/useNavigation";
+import { convertSecondsToFormattedTime, formatDateTime, trimTextLength } from "@/utils/utils";
+
+import { SearchVideoCardContainer, ImageContainerBox } from "./styled";
+import { SearchVideoCardProps } from "./types";
+
+const SearchVideoCard: FC<SearchVideoCardProps> = ({
+  id,
+  className,
+  event_time,
+  thumbnail,
+  workstream_id,
+  title,
+  description,
+  video_duration,
+  width = "100%",
+}) => {
+  const inAppThumbnail = `${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/${thumbnail}`;
+  const { navigateTo } = useNavigation();
+
+  return (
+    <SearchVideoCardContainer
+      $width={width}
+      className={className}
+      data-testid="search-video-card"
+      onClick={() => navigateTo("videoDetail", { id })}
+    >
+      <CardContent>
+        <ImageContainerBox>
+          <Image
+            alt={title}
+            height={192}
+            width={315}
+            src={thumbnail ? inAppThumbnail : "/assets/images/temp-youtube-logo.webp"}
+          />
+          <Typography data-testid="video-duration" className="video-duration" component="div">
+            {convertSecondsToFormattedTime(video_duration)}
+          </Typography>
+        </ImageContainerBox>
+
+        <Box className="video-detail">
+          <Typography variant="h3" component="div" title={title}>
+            {trimTextLength(title, 70)}
+          </Typography>
+          <Typography className="organizer-name" data-testid="video-card-organizer">
+            {workstream_id}
+          </Typography>
+          <Typography variant="bodySmall" className="date-time" data-testid="video-card-date-time">
+            {event_time ? formatDateTime(event_time) : null}
+          </Typography>
+          {description && (
+            <Typography variant="bodySmall" className="video-description" data-testid="video-description">
+              {trimTextLength(description, 250)}
+            </Typography>
+          )}
+        </Box>
+      </CardContent>
+    </SearchVideoCardContainer>
+  );
+};
+
+export default SearchVideoCard;
diff --git a/src/components/SearchVideoCard/styled.tsx b/src/components/SearchVideoCard/styled.tsx
new file mode 100644
index 0000000..a3a9997
--- /dev/null
+++ b/src/components/SearchVideoCard/styled.tsx
@@ -0,0 +1,133 @@
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import { cardContentClasses } from "@mui/material/CardContent";
+import { styled, css } from "@mui/material/styles";
+import { typographyClasses } from "@mui/material/Typography";
+
+import { shouldForwardProp } from "@/utils/styleUtils";
+
+export const SearchVideoCardContainer = styled(Card, {
+  name: "SearchVideoCardContainer",
+  shouldForwardProp,
+})<{ $width: string }>(({ theme, $width }) => {
+  return css`
+    display: flex;
+    background-color: transparent;
+    background-image: unset;
+    border-radius: ${theme.shape.borderRadius + 8}px;
+    overflow: hidden;
+    width: ${$width};
+    margin-top: 10px;
+    cursor: pointer;
+
+    .${cardContentClasses.root} {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: row;
+      gap: ${theme.spacing(2.5)};
+      padding: 0;
+      :last-child {
+        padding: 0;
+      }
+
+      img {
+        border-radius: ${theme.shape.borderRadius + 8}px;
+        height: auto;
+        object-fit: cover;
+        width: 400px;
+      }
+
+      .video-detail {
+        width: calc(100% - 400px);
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+
+        .${typographyClasses.h3} {
+          -webkit-line-clamp: 2;
+          color: ${theme.palette.colors.white};
+          display: -webkit-box;
+          font-size: 28px;
+          font-style: normal;
+          font-weight: 500;
+          letter-spacing: 0.4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+        }
+
+        .date-time,
+        .organizer-name {
+          color: ${theme.palette.colors.gray};
+          font-size: 18px;
+          font-style: normal;
+          font-weight: 500;
+          letter-spacing: 0.4px;
+        }
+
+        .video-description {
+          -webkit-line-clamp: 3;
+          display: -webkit-box;
+          color: ${theme.palette.colors.white};
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 29px;
+          letter-spacing: 0.4px;
+          padding-top: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+
+    ${theme.breakpoints.down("lg")} {
+      height: 100%;
+
+      .${cardContentClasses.root} {
+        flex-direction: column;
+
+        .video-detail {
+          width: 100%;
+
+          .${typographyClasses.h3} {
+            font-size: 20px;
+            line-height: 24px;
+          }
+          .date-time,
+          .organizer-name {
+            font-size: 14px;
+            line-height: 14px;
+          }
+          .video-description {
+            font-size: 14px;
+            line-height: 14px;
+          }
+        }
+      }
+    }
+  `;
+});
+
+export const ImageContainerBox = styled(Box, {
+  name: "ImageContainerBox",
+  shouldForwardProp,
+})(({ theme }) => {
+  return css`
+    position: relative;
+    display: inline-flex;
+
+    .video-duration {
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 2px;
+      bottom: 10px;
+      color: ${theme.palette.colors.white};
+      font-size: 12px;
+      padding: 2px 4px;
+      position: absolute;
+      right: 10px;
+      z-index: 9999;
+    }
+  `;
+});
diff --git a/src/components/SearchVideoCard/types.ts b/src/components/SearchVideoCard/types.ts
new file mode 100644
index 0000000..93d32a2
--- /dev/null
+++ b/src/components/SearchVideoCard/types.ts
@@ -0,0 +1,11 @@
+export type SearchVideoCardProps = {
+  id: number;
+  className?: string;
+  event_time: string;
+  thumbnail?: string;
+  title: string;
+  description: string;
+  video_duration: number;
+  workstream_id: string;
+  width?: string;
+};
diff --git a/src/features/SearchResultsPage/index.tsx b/src/features/SearchResultsPage/index.tsx
new file mode 100644
index 0000000..d773de2
--- /dev/null
+++ b/src/features/SearchResultsPage/index.tsx
@@ -0,0 +1,3 @@
+import SearchResultsPage from "./searchResultsPage";
+
+export default SearchResultsPage;
diff --git a/src/features/SearchResultsPage/searchResultsPage.tsx b/src/features/SearchResultsPage/searchResultsPage.tsx
new file mode 100644
index 0000000..d8a40a8
--- /dev/null
+++ b/src/features/SearchResultsPage/searchResultsPage.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+import { faker } from "@faker-js/faker";
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useSearchParams } from "next/navigation";
+
+import MainLayoutContainer from "@/components/containers/MainLayoutContainer";
+import SearchVideoCard from "@/components/SearchVideoCard/searchVideoCard";
+import Select from "@/components/Select";
+import { TAllEventsPyaload } from "@/models/Events";
+import { useGetEventsQuery } from "@/redux/events/apiSlice";
+import { parseNonPassedParams } from "@/utils/utils";
+
+import { FilterBox, NoSearchResultsWrapper, SearchCardLoadingState, SearchResultsContainer } from "./styled";
+import { defaultParams } from "./types";
+
+const selectMenuItems: string[] = Array(3)
+  .fill("")
+  .map(() => faker.lorem.words(1));
+
+const loaderCards: string[] = Array(5)
+  .fill("")
+  .map(() => faker.lorem.words(1));
+
+const SearchResultsPage = () => {
+  const searchParams = useSearchParams();
+
+  const [searchedQuery, setSearchedQuery] = useState<string>("");
+  const [requestParams, setRequestParams] = useState<TAllEventsPyaload>(defaultParams);
+  const { data: videoListings, isFetching, isLoading, isUninitialized, error } = useGetEventsQuery(requestParams);
+
+  const isDataLoading = isFetching || isLoading || isUninitialized;
+
+  useEffect(() => {
+    const search = searchParams?.get("search") as string;
+    setSearchedQuery(search);
+
+    setRequestParams((prev) => {
+      const apiParams = { ...prev };
+      if (search) {
+        apiParams.tag = "";
+        apiParams.search = search;
+      }
+      const updatedParams = parseNonPassedParams(apiParams) as TAllEventsPyaload;
+      return updatedParams;
+    });
+  }, [searchParams]);
+
+  const renderResults = () => {
+    if (error || isDataLoading) {
+      return loaderCards.map((_) => (
+        <SearchCardLoadingState key={_}>
+          <Skeleton width={350} height={208} variant="rounded" animation="wave" />
+          <Box>
+            <Skeleton width={250} height={30} />
+            <br />
+            <Skeleton width={100} height={20} />
+            <Skeleton width={100} height={20} />
+            <br />
+            <Skeleton width={250} height={20} />
+            <Skeleton width={250} height={20} />
+            <Skeleton width={250} height={20} />
+          </Box>
+        </SearchCardLoadingState>
+      ));
+    }
+
+    if (videoListings?.results?.length) {
+      return videoListings?.results?.map((videoCard) => <SearchVideoCard key={videoCard.id} {...videoCard} width="100%" />);
+    }
+
+    return (
+      <NoSearchResultsWrapper>
+        <Typography variant="h3" component="div">
+          No videos found for &apos;{searchedQuery}&apos;
+        </Typography>
+      </NoSearchResultsWrapper>
+    );
+  };
+
+  return (
+    <MainLayoutContainer>
+      <FilterBox>
+        <Stack>
+          <Typography variant="h2" component="div" title={searchedQuery}>
+            Showing search results for &apos;{searchedQuery}&apos;
+          </Typography>
+          <Select label={"Sort by"} menuItems={selectMenuItems} handleChange={() => {}} />
+        </Stack>
+      </FilterBox>
+
+      <Box width="100%">
+        <SearchResultsContainer>{renderResults()}</SearchResultsContainer>
+      </Box>
+    </MainLayoutContainer>
+  );
+};
+
+export default SearchResultsPage;
diff --git a/src/features/SearchResultsPage/styled.tsx b/src/features/SearchResultsPage/styled.tsx
new file mode 100644
index 0000000..efd9e66
--- /dev/null
+++ b/src/features/SearchResultsPage/styled.tsx
@@ -0,0 +1,78 @@
+import Box, { boxClasses } from "@mui/material/Box";
+import { stackClasses } from "@mui/material/Stack";
+import { styled, css } from "@mui/material/styles";
+import { typographyClasses } from "@mui/material/Typography";
+
+export const SearchResultsContainer = styled("div", {
+  name: "SearchResultsContainer",
+})(
+  ({ theme }) => css`
+    display: flex;
+    padding-top: ${theme.spacing(3)};
+    width: 100%;
+    flex-direction: column;
+    gap: 30px;
+  `
+);
+
+export const FilterBox = styled(Box, {
+  name: "FilterBox",
+})(
+  ({ theme }) => css`
+    width: 100%;
+    .${stackClasses.root} {
+      flex-direction: row;
+      justify-content: space-between;
+      width: 100%;
+      margin-bottom: 10px;
+
+      .${typographyClasses.h2} {
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        color: ${theme.palette.colors.white};
+        display: -webkit-box;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 500;
+        letter-spacing: 0.4px;
+        line-height: 28px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 10px;
+        text-transform: capitalize;
+      }
+    }
+  `
+);
+
+export const SearchCardLoadingState = styled(Box, {
+  name: "SearchCardLoadingState",
+})(
+  () => css`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: flex-start;
+    .${boxClasses.root} {
+    }
+  `
+);
+
+export const NoSearchResultsWrapper = styled("div", {
+  name: "NoSearchResultsWrapper",
+})(
+  ({ theme }) => css`
+    margin-top: 10rem;
+
+    .${typographyClasses.h3} {
+      color: ${theme.palette.colors.white};
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 400;
+      letter-spacing: 0.4px;
+      line-height: 28px;
+      text-align: center;
+    }
+  `
+);
diff --git a/src/features/SearchResultsPage/types.ts b/src/features/SearchResultsPage/types.ts
new file mode 100644
index 0000000..6da8c6d
--- /dev/null
+++ b/src/features/SearchResultsPage/types.ts
@@ -0,0 +1,5 @@
+export const defaultParams = {
+  event_type: "SESSION",
+  page: 1,
+  status: "PUBLISHED",
+};
diff --git a/src/features/VideosListingPage/videosListingPage.tsx b/src/features/VideosListingPage/videosListingPage.tsx
index a5cb967..50dee63 100644
--- a/src/features/VideosListingPage/videosListingPage.tsx
+++ b/src/features/VideosListingPage/videosListingPage.tsx
@@ -45,17 +45,12 @@ const VideosListingPage = () => {
 
   useEffect(() => {
     const tagId = searchParams?.get("tag") as string;
-    const search = searchParams?.get("search") as string;
 
     const tag = tags?.find((t) => String(t.id) === tagId) || defaultTag;
     setSelectedTag(tag);
     setRequestParams((prev) => {
       const apiParams = { ...prev };
       if (tag && tag.id !== 0) apiParams.tag = tag.name;
-      if (search) {
-        apiParams.tag = "";
-        apiParams.search = search;
-      }
       const updatedParams = parseNonPassedParams(apiParams) as TAllEventsPyaload;
       return updatedParams;
     });
diff --git a/src/hooks/useNavigation.ts b/src/hooks/useNavigation.ts
index 1c11715..6897118 100644
--- a/src/hooks/useNavigation.ts
+++ b/src/hooks/useNavigation.ts
@@ -12,6 +12,9 @@ export const ALLOWED_PAGES = {
   get videos(): string {
     return "/videos";
   },
+  get searchResult(): string {
+    return `${this.videos}/results`;
+  },
   videoDetail(id: string) {
     return `/videos/${id}`;
   },
diff --git a/src/services/i18n/locales/en/videos.json b/src/services/i18n/locales/en/videos.json
index 843cf39..e693f20 100644
--- a/src/services/i18n/locales/en/videos.json
+++ b/src/services/i18n/locales/en/videos.json
@@ -1,7 +1,11 @@
 {
   "title": "Videos",
   "description": "Videos of session portal!",
+  "search-title": "Search results",
   "dropdown": {
     "defaultFilter": "Sort By"
+  },
+  "search": {
+    "showing-results": "Showing search results for"
   }
 }