diff --git a/src/app/Products/sights/page.tsx b/src/app/Products/sights/page.tsx
new file mode 100644
index 0000000..49fd45c
--- /dev/null
+++ b/src/app/Products/sights/page.tsx
@@ -0,0 +1,22 @@
+import { getSights } from "@queries/PSA";
+import styles from '../styles.module.css';
+import PageHero from "@components/PageHero";
+import SortTable from "@components/SortTable";
+import {Suspense} from "react";
+import Loading from "@/components/Loading-Green";
+
+export default async function SightsPage() {
+  const data = await getSights();
+
+  return (
+    <div>
+      <PageHero title="Sights" />
+
+      <div className="container mx-auto">
+          <Suspense fallback={<Loading/>}>
+          <SortTable data={data}></SortTable>
+          </Suspense>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/PopNavDialog/page.tsx b/src/app/components/PopNavDialog/page.tsx
index e71c8a1..d7d968d 100644
--- a/src/app/components/PopNavDialog/page.tsx
+++ b/src/app/components/PopNavDialog/page.tsx
@@ -17,7 +17,6 @@ import {
 import {
   Bars3Icon,
   MagnifyingGlassIcon,
-  ShoppingBagIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { validateRequest } from "@/lib/auth/validate-request";
@@ -25,7 +24,8 @@ import { User } from "lucia";
 import  Cookies  from "js-cookie";   
 import { logoutSession } from "@/actions/userActions";
 import { useRouter } from "next/navigation";
-import { lucia } from "@/lib/auth";
+import Image from "next/image";
+
 import { logout } from "@/lib/auth/actions";
 
 const navigation = {
@@ -91,7 +91,13 @@ const navigation = {
   ],
 };
 
-export default function PopNavDialog(props:any) {
+interface PopNavDialogProps {
+  sessionCookie: {
+    user: User;
+  };
+}
+
+export default function PopNavDialog(props: PopNavDialogProps) {
  const [open, setOpen] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const router = useRouter();
@@ -153,22 +159,24 @@ export default function PopNavDialog(props:any) {
                   >
                     <div className="grid grid-cols-2 gap-x-4">
                       {category.featured.map((item) => (
-                        <div key={item.name} className="group relative text-sm">
-                          <img alt={item.imageAlt} src={item.imageSrc} className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"/>
-                          <a
+                        <Fragment key={item.name}>
+                          <Image alt={item.imageAlt} src={item.imageSrc} className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75" width={500} height={500} />
+                           
+                           <a
                             href={item.href}
                             className="mt-6 block font-medium text-gray-900"
                           >
                             <span
                               aria-hidden="true"
                               className="absolute inset-0 z-10"
-                            />
+                            >
                             {item.name}
+                            </span>
                           </a>
                           <p aria-hidden="true" className="mt-1">
                             See Build 
                           </p>
-                        </div>
+                        </Fragment>
                       ))}
                     </div>
                     {category.sections.map((section) => (
@@ -236,10 +244,12 @@ export default function PopNavDialog(props:any) {
 
             <div className="border-t border-gray-200 px-4 py-6">
               <a href="#" className="-m-2 flex items-center p-2">
-                <img
+                <Image
                   alt=""
                   src="https://tailwindui.com/plus/img/flags/flag-canada.svg"
                   className="block h-auto w-5 shrink-0"
+                  width={20}
+                  height={20}
                 />
                 <span className="ml-3 block text-base font-medium text-gray-900">
                   CAD
@@ -302,10 +312,12 @@ export default function PopNavDialog(props:any) {
                                     key={item.name}
                                     className="group relative text-base sm:text-sm"
                                   >
-                                    <img
+                                    <Image
                                       alt={item.imageAlt}
                                       src={item.imageSrc}
                                       className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"
+                                      width={500}
+                                      height={500}
                                     />
                                     <a
                                       href={item.href}
@@ -373,7 +385,7 @@ export default function PopNavDialog(props:any) {
               <div className="ml-auto flex items-center">
                 <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
                   <a
-                    href={linkPath} onClick={async (e) => {e.preventDefault(); console.log("in the onclick"); await logout()} } className="text-sm font-medium text-gray-700 hover:text-gray-800">
+                    href={linkPath} onClick={async () => { console.log("in the onclick"); await logout()} } className="text-sm font-medium text-gray-700 hover:text-gray-800">
                       {user == null?"Sign In": "Log Out"} 
                   </a>
                   <span aria-hidden="true" className="h-6 w-px bg-gray-200" />
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index f26f65e..ef2ba09 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -9,6 +9,7 @@ const navigation = {
     { name: 'Lowers', href: '/Products/lowers', role: "All" },
     { name: 'Uppers', href: '/Products/uppers', role: "All" },
     { name: 'Optics', href: '/Products/optics', role: "All" },
+    { name: 'Sights', href: '/Products/sights', role: "All" },
     { name: 'Accessories', href: '/Products/accessories', role: "All" },
     { name: 'Suppressors', href: '/Products/suppressors', role: "All" },
   ],
diff --git a/src/db/queries/PSA/index.ts b/src/db/queries/PSA/index.ts
index ff2188a..aa8a660 100644
--- a/src/db/queries/PSA/index.ts
+++ b/src/db/queries/PSA/index.ts
@@ -1,7 +1,6 @@
 import { db } from '@db/index';
 import { bb_products, psa } from '@schemas/schema';
-import { eq, lt, gte, ne, and, like } from 'drizzle-orm';
-import CATEGORY from '@src/data/parts_cats.json';
+import { eq, and, like } from 'drizzle-orm';
 
 export async function getPSA(page = 1) {
   const limit = 20;
@@ -36,7 +35,11 @@ export async function getARCompleteLowers(page = 1) {
     .offset(offset);
 }
 
-export async function getProductType(productType : any,  page = 1) {
+interface ProductType {
+  name: string;
+}
+
+export async function getProductType(productType: ProductType | string, page = 1) {
   const limit = 40;
   const offset = (page - 1) * limit;
   await new Promise((resolve) => setTimeout(resolve,1000));
@@ -123,6 +126,16 @@ export async function getOptics(page = 1) {
     .where(and(like(psa.fineline, "%Optics%")))
     .offset(offset);
 }
+export async function getSights(page = 1) {
+  const limit = 40;
+  const offset = (page - 1) * limit;
+  
+  return await db.select()
+    .from(bb_products)
+    .limit(limit)
+    .where(and(like(bb_products.subcategory, "%Sights")))
+    .offset(offset);
+}
 
 export async function getStocksParts(page = 1) {
   const limit = 40;