diff --git a/src/app/HomeClient/HomeClient.jsx b/src/app/HomeClient/HomeClient.jsx
index 8e0490e7e..1854436f3 100644
--- a/src/app/HomeClient/HomeClient.jsx
+++ b/src/app/HomeClient/HomeClient.jsx
@@ -25,11 +25,7 @@ import { cn } from "@/lib/utils"
 import { Eye, EyeOff } from "lucide-react"
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import {
-  Alert,
-  AlertTitle,
-  AlertDescription,
-} from '@/components/ui/alert';
+import { useNotification } from "@/hooks/use-notification";
 import {
   Card,
   CardHeader,
@@ -48,10 +44,9 @@ export default function HomeClient() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { error, success } = useNotification();
   const [values, setValues] = useState({ username: '', password: '' });
   const [loading, setLoading] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState(null);
 
   const { username, password } = values;
 
@@ -66,19 +61,18 @@ export default function HomeClient() {
       await fetchToken(values);
       await getUserSelf();
       await fetchAllGroups();
+      success("Logged in successfully!");
       router.push(routes.browse);
     } catch (err) {
       setLoading(false);
-      setErrorMessage(err.message);
-      setShowError(true);
+      error(err.message);
     }
   };
 
   useEffect(() => {
     const message = searchParams.get('message');
     if (message) {
-      setErrorMessage(message);
-      setShowError(true);
+      error(message);
       router.replace(window.location.pathname);
     }
   }, [searchParams, router]);
@@ -136,30 +130,6 @@ export default function HomeClient() {
             </CardHeader>
 
             <CardContent className="p-0 pt-2 space-y-6">
-            {showError && (
-              <div className="mb-4">
-                <Alert
-                  variant="destructive"
-                  className="flex items-start gap-3 bg-[#FFEBEE] rounded-[4px] border-0"
-                >
-                  <img
-                    src="/assets/icons/Alert/ErrorFilled.svg"
-                    alt="Error"
-                    width={24}
-                    height={24}
-                    className="mt-1"
-                  />
-                  <div>
-                    <AlertTitle className="text-base font-semibold text-[#A41411]">
-                      An error occurred
-                    </AlertTitle>
-                    <AlertDescription className="text-sm text-[#A41411]">
-                      {errorMessage}
-                    </AlertDescription>
-                  </div>
-                </Alert>
-              </div>
-            )}
             <form onSubmit={handleSubmit} className="space-y-4">
               <div>
                 <label htmlFor="username" className="block text-base font-normal text-[#101010] mb-1">
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index cd7bb8015..e92ec800d 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -23,6 +23,7 @@ import { GlobalProvider } from "@/context";
 
 import Header from "@/components/Header/Header";
 import Footer from "@/components/Footer/Footer";
+import { Toaster } from "@/components/ui/sonner";
 
 // Global CSS
 import "react-virtualized-tree/lib/main.css";
@@ -44,6 +45,7 @@ export default function RootLayout({ children }) {
           <Header />
           <main className="flex-grow px-page">{children}</main>
           <Footer />
+          <Toaster />
         </GlobalProvider>
       </body>
     </html>
diff --git a/src/app/search/SearchClient.jsx b/src/app/search/SearchClient.jsx
index 9c06d7c15..b3adc3979 100644
--- a/src/app/search/SearchClient.jsx
+++ b/src/app/search/SearchClient.jsx
@@ -10,18 +10,21 @@
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along
- with this program; if not, write to the Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
 'use client';
 
 import React, { useState } from "react";
 import search from "@/services/search";
-import { initialState, initialMessageSearch, entriesOptions } from "../../constants/constants";
-import { Alert } from "@/components/Widgets";
+import { initialState, entriesOptions } from "../../constants/constants";
+import { useNotification } from "@/hooks/use-notification";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -42,14 +45,12 @@ import {
   AccordionContent,
 } from "@/components/ui/accordion";
 
-
 const SearchClient = () => {
+  const { error, success } = useNotification();
   const [searchData, setSearchData] = useState(initialState);
   const [searchResult, setSearchResult] = useState("");
   const [pagesOptions, setPagesOptions] = useState();
   const [loading, setLoading] = useState(false);
-  const [showMessage, setShowMessage] = useState(false);
-  const [message, setMessage] = useState(initialMessageSearch);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -57,15 +58,15 @@ const SearchClient = () => {
     search(searchData)
       .then((result) => {
         setSearchResult(result.search);
+        success(`Found ${result.search.length} files matching your search.`);
         const arr = [];
         for (let i = 0; i < result.pages; i++) {
           arr.push({ id: i + 1, value: i + 1 });
         }
         setPagesOptions(arr);
       })
-      .catch((error) => {
-        setMessage({ type: "danger", text: error.message });
-        setShowMessage(true);
+      .catch((err) => {
+        error(err.message || "An error occurred during search.");
       })
       .finally(() => setLoading(false));
   };
@@ -90,228 +91,198 @@ const SearchClient = () => {
   ]
 
   return (
-    <div className="min-h-screen mx-40 py-8">
-      {showMessage && (
-        <Alert type={message.type} setShow={setShowMessage} message={message.text} />
-      )}
+    <div className="min-h-screen py-8 max-w-5xl mx-auto px-4">
+      <Card className="border-0 shadow-lg bg-[#F9FAFB]">
+        <CardHeader className="pb-4">
+          <CardTitle className="text-3xl font-bold text-gray-900">Advanced Search</CardTitle>
+          <CardDescription className="text-gray-500">
+            Find files across uploads based on filename, license, or copyright.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Upload type */}
+            <div className="space-y-4">
+              <p className="text-lg font-medium text-[#101010]">Limit search to:</p>
+              <RadioGroup
+                value={searchData.searchType}
+                onValueChange={(val) => setSearchData(prev => ({ ...prev, searchType: val }))}
+                className="space-y-2"
+              >
+                <div className="flex items-start gap-2">
+                  <RadioGroupItem value="directory" id="directory" className="w-4 h-4 mt-1" />
+                  <Label htmlFor="directory" className="text-base text-[#101010]">
+                    Containers only (rpms, tars, isos, etc), including directories.
+                  </Label>
+                </div>
 
-      <h1 className="text-3xl font-semibold text-[#101010] mb-4">Search</h1>
+                <div className="flex items-start gap-2">
+                  <RadioGroupItem value="containers" id="containers" className="w-4 h-4 mt-1" />
+                  <Label htmlFor="containers" className="text-base text-[#101010]">
+                    Containers only (rpms, tars, isos, etc), excluding directories.
+                  </Label>
+                </div>
 
-      <form onSubmit={handleSubmit} className="space-y-6">
-        {/* Upload type */}
-        <div className="space-y-4">
-          <p className="text-lg font-medium text-[#101010]">Limit search to:</p>
-          <RadioGroup
-            value={searchData.searchType}
-            onValueChange={(val) => setSearchData(prev => ({ ...prev, searchType: val }))}
-            className="space-y-2"
-          >
-            <div className="flex items-start gap-2">
-              <RadioGroupItem
-                value="directory"
-                id="directory"
-                className="w-4 h-4 mt-1"
-              />
-              <Label htmlFor="directory" className="text-base text-[#101010]">
-                Containers only (rpms, tars, isos, etc), including directories.
-              </Label>
+                <div className="flex items-start gap-2">
+                  <RadioGroupItem value="allfiles" id="allfiles" className="w-4 h-4 mt-1" />
+                  <Label htmlFor="allfiles" className="text-base text-[#101010]">
+                    All Files
+                  </Label>
+                </div>
+              </RadioGroup>
             </div>
 
-              <div className="flex items-start gap-2">
-                <RadioGroupItem
-                  value="containers"
-                  id="containers"
-                  className="w-4 h-4 mt-1"
-                />
-                <Label htmlFor="containers" className="text-base text-[#101010]">
-                  Containers only (rpms, tars, isos, etc), excluding directories. The filtering for license or copyright is not supported in this case.
-                </Label>
-              </div>
+            {/* Required search criteria */}
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="search-criteria">
+                <AccordionTrigger className="text-lg font-semibold">
+                  Required Search Criteria
+                </AccordionTrigger>
+                <AccordionContent className="space-y-4 pt-4">
+                  <div>
+                    <Label className="mb-2 block">Choose upload to search into:</Label>
+                    <Select
+                      name="uploadId"
+                      onValueChange={(value) => handleChange({ target: { name: "uploadId", value } })}
+                    >
+                      <SelectTrigger className="h-10">
+                        <SelectValue placeholder="All uploads" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {uploadOptions.map((upload) => (
+                          <SelectItem key={upload.id} value={String(upload.id)}>
+                            {upload.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-            <div className="flex items-start gap-2">
-              <RadioGroupItem
-                value="allfiles"
-                id="allfiles"
-                className="w-4 h-4 mt-1"
-              />
-              <Label htmlFor="allfiles" className="text-base text-[#101010]">
-                All Files
-              </Label>
-            </div>
-          </RadioGroup>
-        </div>
+                  <div>
+                    <Label className="mb-2 block">Filename to find:</Label>
+                    <Input
+                      type="text"
+                      name="filename"
+                      value={searchData.filename}
+                      onChange={handleChange}
+                      placeholder="Enter filename (e.g. %v3.war)"
+                    />
+                  </div>
 
-        {/* Required search criteria */}
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="search-criteria">
-            <AccordionTrigger className="flex w-full items-center justify-between text-lg font-semibold mb-2 transition-all">
-                You must choose one or more search criteria (not case sensitive)
-            </AccordionTrigger>
-
-            <AccordionContent className="space-y-4 pb-2">
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">
-                  Choose upload to search into:
-                </label>
-                <Select
-                  name="uploadId"
-                  onValueChange={(value) =>
-                    handleChange({ target: { name: "uploadId", value } })
-                  }
-                >
-                  <SelectTrigger className="h-10 text-sm">
-                    <SelectValue placeholder="All uploads" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-48 overflow-y-auto">
-                    {uploadOptions.map((upload) => (
-                      <SelectItem key={upload.id} value={String(upload.id)}>
-                        {upload.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="mb-2 block">File size ≥ (bytes):</Label>
+                      <Input
+                        type="text"
+                        name="filesizemin"
+                        value={searchData.filesizemin}
+                        onChange={handleChange}
+                        placeholder="Min size"
+                      />
+                    </div>
+                    <div>
+                      <Label className="mb-2 block">File size ≤ (bytes):</Label>
+                      <Input
+                        type="text"
+                        name="filesizemax"
+                        value={searchData.filesizemax}
+                        onChange={handleChange}
+                        placeholder="Max size"
+                      />
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
 
+              {/* Optional filters */}
+              <AccordionItem value="optional-filters">
+                <AccordionTrigger className="text-lg font-semibold">
+                  Optional Search Filters
+                </AccordionTrigger>
+                <AccordionContent className="space-y-4 pt-4">
+                  <div>
+                    <Label className="mb-2 block">License:</Label>
+                    <Input
+                      type="text"
+                      name="license"
+                      value={searchData.license}
+                      onChange={handleChange}
+                      placeholder="e.g. ^AGPL$"
+                    />
+                  </div>
+                  <div>
+                    <Label className="mb-2 block">Copyright:</Label>
+                    <Input
+                      type="text"
+                      name="copyright"
+                      value={searchData.copyright}
+                      onChange={handleChange}
+                      placeholder="e.g. Copyright 2024"
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
 
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">
-                  Enter the filename to find:
-                </label>
-                <Input
-                  type="text"
-                  name="filename"
-                  value={searchData.filename}
-                  onChange={handleChange}
-                  placeholder="Enter filename"
-                />
-                <p className="text-sm text-[#00669D] mt-1">
-                  You can use '%' as a wild-card. For example: '%v3.war', or 'mypkg%.tar'.
-                </p>
-              </div>
-
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">
-                  File size is ≥
-                </label>
-                <Input
-                  type="text"
-                  name="filesizemin"
-                  value={searchData.filesizemin}
-                  onChange={handleChange}
-                  placeholder="Enter file size in bytes"
-                />
-              </div>
-
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">
-                  File size is ≤
-                </label>
-                <Input
-                  type="text"
-                  name="filesizemax"
-                  value={searchData.filesizemax}
-                  onChange={handleChange}
-                  placeholder="Enter file size in bytes"
-                  className={"mb-4"}
-                />
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-
-        {/* Optional filters */}
-        <AccordionItem value="optional-filters">
-          <AccordionTrigger
-            className="flex w-full items-center justify-between text-lg font-semibold text-left
-            [&[data-state=open]>svg]:rotate-180 after:hidden"
-          >
-            <span>
-              You may also choose one or more optional search filters (not case sensitive)
-            </span>
-          </AccordionTrigger>
-          <AccordionContent>
-            <div className="space-y-4 mt-2">
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">License:</label>
-                <Input
-                  type="text"
-                  name="license"
-                  value={searchData.license}
-                  onChange={handleChange}
-                  placeholder="Enter license"
-                />
-                <p className="text-sm text-[#00669D] mt-1">For example, '^AGPL$'.</p>
-              </div>
-
-              <div>
-                <label className="block text-base font-medium text-gray-700 mb-1">Copyright:</label>
-                <Input
-                  type="text"
-                  name="copyright"
-                  value={searchData.copyright}
-                  onChange={handleChange}
-                  placeholder="Enter copyright"
-                />
-                <p className="text-sm text-[#00669D] mt-1">
-                  For example, 'Copyright 2014-2020 fossology'.
-                </p>
-              </div>
+            {/* Pagination settings */}
+            <div className="flex items-center gap-2 text-sm text-gray-700 pt-4">
+              <span>Show</span>
+              <Select
+                name="limit"
+                onValueChange={(value) => handleChange({ target: { name: "limit", value } })}
+              >
+                <SelectTrigger className="h-8 w-[70px]">
+                  <SelectValue placeholder={searchData.limit || entriesOptions[0].entry} />
+                </SelectTrigger>
+                <SelectContent>
+                  {entriesOptions.map((opt) => (
+                    <SelectItem key={opt.entry} value={String(opt.entry)}>
+                      {opt.entry}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span>entries</span>
             </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-
-        {/* Entries dropdown */}
-        <div className="flex items-center gap-2 text-sm text-gray-700">
-          <span>Show</span>
-          <Select
-            name="limit"
-            onValueChange={(value) =>
-              handleChange({ target: { name: "limit", value } })
-            }
-          >
-            <SelectTrigger className="h-8 py-1 text-sm w-fit">
-              <SelectValue placeholder={searchData.limit || entriesOptions[0].entry} />
-            </SelectTrigger>
-            <SelectContent>
-              {entriesOptions.map((opt) => (
-                <SelectItem key={opt.entry} value={String(opt.entry)}>
-                  {opt.entry}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <span>entries</span>
-        </div>
 
-        {/* Submit */}
-        <div>
-        <Button
-          type="submit"
-          disabled={loading || !searchData.searchType || !searchData.uploadId?.trim() && !searchData.filename?.trim() && !searchData.filesizemin?.trim() && !searchData.filesizemax?.trim()}
-          className="bg-[#004494] text-white h-10 px-8 py-2 rounded text-base font-medium hover:bg-[#00095C] disabled:bg-[#9EB9D3] disabled:text-white"
-        >
-          {loading ? "Searching..." : "Search"}
-        </Button>
-        </div>
-      </form>
+            <div className="pt-4">
+              <Button
+                type="submit"
+                disabled={loading || !searchData.searchType || (!searchData.uploadId?.trim() && !searchData.filename?.trim() && !searchData.filesizemin?.trim() && !searchData.filesizemax?.trim())}
+                className="w-full md:w-auto bg-[#004494] text-white h-11 px-12 hover:bg-[#003377]"
+              >
+                {loading ? "Searching..." : "Search Files"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
 
       {/* Search results */}
       {searchResult && (
-        <div className="mt-8">
-          <h3 className="text-lg font-semibold mb-2">
-            {searchResult.length} files matching your search result.
-          </h3>
-          {searchResult.map(({ uploadTreeId, uploadName, folderName, fileName }, index) => (
-            <div key={uploadTreeId} className="p-4 border border-gray-300 rounded mb-3">
-              <div className="font-medium">
-                {index + 1}. Folder: {folderName}
+        <Card className="mt-8 border-0 shadow-md">
+          <CardHeader>
+            <CardTitle className="text-xl font-semibold">
+              {searchResult.length} Results Found
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {searchResult.map(({ uploadTreeId, uploadName, folderName, fileName }, index) => (
+              <div 
+                key={uploadTreeId} 
+                className="p-4 border border-gray-100 rounded-lg hover:bg-blue-50 transition-colors bg-white shadow-sm"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-blue-600 font-bold">{index + 1}.</span>
+                  <div className="font-semibold text-gray-800">Folder: {folderName}</div>
+                </div>
+                <div className="ml-6 mt-1 text-sm text-gray-600 font-mono italic">
+                  {uploadName}/{fileName}
+                </div>
               </div>
-              <div className="ml-3 text-sm text-gray-700">
-                {uploadName}/{fileName}
-              </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </CardContent>
+        </Card>
       )}
     </div>
   );
diff --git a/src/components/Widgets/Alert/index.jsx b/src/components/Widgets/Alert/index.jsx
index abc207655..d3ee516e2 100644
--- a/src/components/Widgets/Alert/index.jsx
+++ b/src/components/Widgets/Alert/index.jsx
@@ -16,10 +16,18 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 const Alert = ({ message, type, setShow }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShow(false);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [setShow]);
+
   return (
     <div className="main-container d-flex justify-content-end mt-3">
       <div
diff --git a/src/hooks/use-notification.js b/src/hooks/use-notification.js
new file mode 100644
index 000000000..67589365d
--- /dev/null
+++ b/src/hooks/use-notification.js
@@ -0,0 +1,65 @@
+/*
+ SPDX-FileCopyrightText: 2025 Antigravity AI
+
+SPDX-License-Identifier: GPL-2.0-only
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+*/
+
+import { toast } from "sonner";
+
+/**
+ * Custom hook to handle notifications using sonner.
+ * Addresses Issue #157.
+ */
+export const useNotification = () => {
+  const notify = (message, options = {}) => {
+    return toast(message, options);
+  };
+
+  const success = (message, options = {}) => {
+    return toast.success(message, {
+      ...options,
+      style: {
+        background: 'var(--success-bg, #e6ffed)',
+        borderColor: 'var(--success-border, #b7eb8f)',
+        color: 'var(--success-text, #14532d)',
+      },
+    });
+  };
+
+  const error = (message, options = {}) => {
+    return toast.error(message, {
+      duration: 5000, // Addresses Issue #154 in the new hook
+      ...options,
+      style: {
+        background: 'var(--error-bg, #fff1f0)',
+        borderColor: 'var(--error-border, #ffa39e)',
+        color: 'var(--error-text, #721c24)',
+      },
+    });
+  };
+
+  const info = (message, options = {}) => {
+    return toast.info(message, options);
+  };
+
+  const warning = (message, options = {}) => {
+    return toast.warning(message, options);
+  };
+
+  return {
+    notify,
+    success,
+    error,
+    info,
+    warning,
+    dismiss: toast.dismiss,
+  };
+};
diff --git a/src/styles/global.css b/src/styles/global.css
index 86b282037..d5daba210 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,7 +19,7 @@ SPDX-License-Identifier: GPL-2.0-only
 /*
 * This file contains all styling which is common for all theme (which defines basic layout)
 */
-@import 'tailwindcss' important; 
+@import "tailwindcss" important;
 /* @import "tailwindcss/preflight"; */
 /* @tailwind components; */
 /* @tailwind utilities; */
@@ -30,8 +30,16 @@ SPDX-License-Identifier: GPL-2.0-only
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: #FFFFFF;
+  --background: #ffffff;
   --foreground: #101010;
+
+  /* Notification Colors */
+  --success-bg: #e6ffed;
+  --success-border: #b7eb8f;
+  --success-text: #14532d;
+  --error-bg: #fff1f0;
+  --error-border: #ffa39e;
+  --error-text: #721c24;
 }
 
 /* Dark theme override */
@@ -40,7 +48,6 @@ SPDX-License-Identifier: GPL-2.0-only
   --foreground: #ffffff;
 }
 
-
 /* Font size */
 .font-size-small {
   font-size: 0.875rem;
@@ -60,14 +67,18 @@ SPDX-License-Identifier: GPL-2.0-only
   list-style-type: disclosure-closed;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Inter', sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Inter", sans-serif;
   font-weight: 700;
 }
 
 /* Header */
 
-
 @media (max-width: 991px) {
   .dropleft .dropdown-menu {
     right: unset !important;