diff --git a/.gitignore b/.gitignore
index 134b7f3..1509e89 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,7 +34,7 @@ yarn-error.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
-.env.lcal
+.env.local
 .env*.local
 .env.prod
 # vercel
diff --git a/package-lock.json b/package-lock.json
index a238c1b..c21fbc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
         "@ungap/with-resolvers": "^0.1.0",
         "@upstash/ratelimit": "^2.0.5",
         "@upstash/redis": "^1.33.0",
-        "@vercel/kv": "^3.0.0",
         "axios": "^1.8.4",
         "canvas": "^3.2.0",
         "class-variance-authority": "^0.7.1",
@@ -2662,19 +2661,6 @@
         "uncrypto": "^0.1.3"
       }
     },
-    "node_modules/@vercel/kv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@vercel/kv/-/kv-3.0.0.tgz",
-      "integrity": "sha512-pKT8fRnfyYk2MgvyB6fn6ipJPCdfZwiKDdw7vB+HL50rjboEBHDVBEcnwfkEpVSp2AjNtoaOUH7zG+bVC/rvSg==",
-      "deprecated": "Vercel KV is deprecated. If you had an existing KV store, it should have moved to Upstash Redis which you will see under Vercel Integrations. For new projects, install a Redis integration from Vercel Marketplace: https://vercel.com/marketplace?category=storage&search=redis",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@upstash/redis": "^1.34.0"
-      },
-      "engines": {
-        "node": ">=14.6"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -7653,8 +7639,9 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "extraneous": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "4"
       },
@@ -7666,8 +7653,9 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
       "integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
-      "extraneous": true,
       "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "extend": "^3.0.2",
         "https-proxy-agent": "^5.0.0",
@@ -7682,8 +7670,9 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
       "integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
-      "extraneous": true,
       "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "gaxios": "^5.0.0",
         "json-bigint": "^1.0.0"
@@ -7696,8 +7685,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "extraneous": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e476147..740f860 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { type IPaper } from "@/interface";
 import Image from "next/image";
 import { Eye, Download, Check } from "lucide-react";
@@ -23,6 +24,8 @@ interface CardProps {
 }
 
 const Card = ({ paper, onSelect, isSelected }: CardProps) => {
+  const [previewOpen, setPreviewOpen] = React.useState(false);
+
   const handleDownload = async (paper: IPaper) => {
     await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
   };
@@ -34,77 +37,109 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   const paperLink = `/paper/${paper._id}`;
 
   return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
-        isSelected && "bg-white",
-      )}
-    >
-      <Link href={paperLink} target="_blank" rel="noopener noreferrer">
-        <Image
-          src={paper.thumbnail_url}
-          alt={paper.subject}
-          width={320}
-          height={180}
-          className="w-full object-cover p-4 pb-3 md:h-[250px]"
-        />
-
-        <div className="justify-center">
-          <div className="flex flex-row items-center justify-between px-4 pb-2">
-            <div className="text-md font-play font-medium">
-              {extractBracketContent(paper.subject)}
-            </div>
-            <div className="flex gap-2">
-              <Link href={paperLink} target="_blank" rel="noopener noreferrer">
-                <Eye size={22} />
-              </Link>
-              <Download
-                size={20}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  void handleDownload(paper);
-                }}
-                className="cursor-pointer"
-              />
+    <>
+      <div
+        className={cn(
+          "overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
+          isSelected && "bg-white",
+        )}
+      >
+        <Link href={paperLink} target="_blank" rel="noopener noreferrer">
+          <Image
+            src={paper.thumbnail_url}
+            alt={paper.subject}
+            width={320}
+            height={180}
+            className="w-full object-cover p-4 pb-3 md:h-[250px]"
+          />
+
+          <div className="justify-center">
+            <div className="flex flex-row items-center justify-between px-4 pb-2">
+              <div className="text-md font-play font-medium">
+                {extractBracketContent(paper.subject)}
+              </div>
             </div>
-          </div>
 
-          <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
+            <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
 
-          <div className="space-y-2 p-4">
-            <div className="font-play text-lg font-semibold">
-              {extractWithoutBracketContent(paper.subject)}
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Capsule>{paper.exam}</Capsule>
-              <Capsule>{paper.slot}</Capsule>
-              <Capsule>{paper.year}</Capsule>
-              <Capsule>{paper.semester}</Capsule>
+            <div className="space-y-2 p-4">
+              <div className="font-play text-lg font-semibold">
+                {extractWithoutBracketContent(paper.subject)}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Capsule>{paper.exam}</Capsule>
+                <Capsule>{paper.slot}</Capsule>
+                <Capsule>{paper.year}</Capsule>
+                <Capsule>{paper.semester}</Capsule>
+              </div>
             </div>
           </div>
-        </div>
-      </Link>
-
-      <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
-        <div className="flex items-center gap-2">
-          <input
-            checked={isSelected}
-            onChange={handleCheckboxChange}
-            className="h-5 w-5 accent-[#7480FF]"
-            type="checkbox"
+        </Link>
+
+        <div className="flex justify-end gap-2 px-4 pb-2">
+          <Eye
+            size={22}
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              setPreviewOpen(true);
+            }}
+          />
+
+          <Download
+            size={20}
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleDownload(paper);
+            }}
+            className="cursor-pointer"
           />
-          <p>Select</p>
         </div>
-        {paper.answer_key_included && (
-          <div className="flex items-center gap-2 font-normal text-[#7480FF]">
-            <Check color="#7480FF" />
-            Answer Key
+
+        <div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
+          <div className="flex items-center gap-2">
+            <input
+              checked={isSelected}
+              onChange={handleCheckboxChange}
+              className="h-5 w-5 accent-[#7480FF]"
+              type="checkbox"
+            />
+            <p>Select</p>
           </div>
-        )}
+
+          {paper.answer_key_included && (
+            <div className="flex items-center gap-2 font-normal text-[#7480FF]">
+              <Check color="#7480FF" />
+              Answer Key
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+
+      {previewOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          onClick={() => setPreviewOpen(false)}
+        >
+          <div
+            className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              className="absolute right-3 top-3 z-10 text-xl"
+              onClick={() => setPreviewOpen(false)}
+            >
+              ✕
+            </button>
+            <iframe
+              src={paper.file_url}
+              className="w-full h-full rounded-md"
+            />
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/src/components/SidebarSection.tsx b/src/components/SidebarSection.tsx
index e90573c..1247edc 100644
--- a/src/components/SidebarSection.tsx
+++ b/src/components/SidebarSection.tsx
@@ -23,7 +23,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
   updater,
 }) => (
   <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
-    <Accordion className="w-full" type="single" value={label}>
+    <Accordion className="w-full" type="single" collapsible>
       <AccordionItem className="border-none no-underline" value={label}>
         <AccordionTrigger className="w-full no-underline">
           <div className="font-play text-sm no-underline">{label}</div>