diff --git a/package.json b/package.json
index 12eff5fb..46bbf826 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "react-shadow": "^20.4.0",
     "rimraf": "^5.0.5",
     "sortablejs": "^1.15.2",
+    "swiper": "^11.1.0",
     "tailwindcss": "^3.4.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
diff --git a/src/interface/components/store/header.tsx b/src/interface/components/store/header.tsx
new file mode 100644
index 00000000..d33d362c
--- /dev/null
+++ b/src/interface/components/store/header.tsx
@@ -0,0 +1,30 @@
+import logo from '../../../resources/icons/betterseqta-dark-full.png';
+import logoDark from '../../../resources/icons/betterseqta-light-full.png';
+
+export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) {
+  return <header className="sticky top-0 z-50 w-full bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800">
+    <div className="flex items-center justify-between px-4 py-1">
+      <img src={logo} className="h-16 dark:hidden" />
+      <img src={logoDark} className="hidden h-16 dark:block" />
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search themes..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="px-4 py-2 pl-10 bg-gray-100 rounded-full dark:bg-zinc-700 dark:text-gray-100 focus:outline-none focus:border-transparent" />
+        <svg
+          className="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+        </svg>
+      </div>
+    </div>
+  </header>;
+}
diff --git a/src/interface/index.html b/src/interface/index.html
index ba020507..43c86d39 100644
--- a/src/interface/index.html
+++ b/src/interface/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BetterSEQTA+ Settings</title>
   </head>
-  <body>
+  <body class="dark:bg-zinc-900">
     <div id="ExtensionPopup"></div>
     <script type="module" src="./main.tsx"></script>
     <script type="module" src="./dark.ts"></script>
diff --git a/src/interface/main.tsx b/src/interface/main.tsx
index 6a4e0d8d..23ae293e 100644
--- a/src/interface/main.tsx
+++ b/src/interface/main.tsx
@@ -11,7 +11,7 @@ import ThemeCreator from './pages/ThemeCreator';
 import Store from './pages/Store';
 
 browser.storage.local.get().then(({ telemetry, DarkMode }) => {
-  if (DarkMode) document.body.classList.add('dark');
+  if (DarkMode) document.documentElement.classList.add('dark');
 
   if (telemetry === true)
   Sentry.init({
diff --git a/src/interface/pages/Store.tsx b/src/interface/pages/Store.tsx
index a947a044..f1b4aab1 100644
--- a/src/interface/pages/Store.tsx
+++ b/src/interface/pages/Store.tsx
@@ -1,9 +1,112 @@
+import { useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Scrollbar, Autoplay } from 'swiper/modules';
+import Header from '../components/store/header';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/autoplay';
+
 const Store = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const swiperCover = useRef<any | null>(null);
+
+  const coverThemes = [
+    {
+      coverImage: 'https://via.placeholder.com/300x200',
+      name: 'Theme Name',
+      description: 'Theme description goes here.'
+    },
+    {
+      coverImage: 'https://via.placeholder.com/300x200',
+      name: 'Theme Name',
+      description: 'Theme description goes here.'
+    },
+    {
+      coverImage: 'https://via.placeholder.com/300x200',
+      name: 'Theme Name',
+      description: 'Theme description goes here.'
+    }
+  ]
+
   return (
-    <div>
-      <h2>Store</h2>
+    <div className="w-screen h-screen overflow-y-scroll bg-zinc-100 dark:bg-zinc-900">
+      
+      <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+
+      <div className="px-32 py-12">
+        <div className="relative w-full bg-green-100 aspect-[8/3] rounded-xl overflow-clip">
+          <Swiper
+            ref={swiperCover}
+            spaceBetween={0}
+            slidesPerView={1}
+            modules={[Scrollbar, Autoplay]}
+            navigation
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+              pauseOnMouseEnter: true
+            }}
+            pagination={{ clickable: true }}
+            scrollbar={{ draggable: true }}    
+            onSlideChange={() => console.log('slide change')}
+            onSwiper={(swiper) => console.log(swiper)}
+          >
+            { coverThemes.map((theme, index) => (
+                <SwiperSlide key={index}>
+                  <img
+                    src={theme.coverImage}
+                    alt="Theme Preview"
+                    className="object-cover w-full h-full"
+                  />
+                </SwiperSlide>
+              )) }
+          </Swiper>
+
+          {/* pagination */}
+          <div className='absolute z-10 flex gap-2 bottom-2 right-2'>
+
+            <button onClick={ () => {swiperCover.current?.swiper.slidePrev() }} className='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
+              </svg>
+            </button>
+
+            <button onClick={ () => {swiperCover.current?.swiper.slideNext() }} className='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+              </svg>
+            </button>
+
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-8 px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {
+          Array.from({ length: 30 }).map((_, index) => (
+          <div key={index} className="overflow-hidden bg-white rounded-lg shadow-md dark:bg-zinc-800">
+            <img
+              src="https://via.placeholder.com/300x200"
+              alt="Theme Preview"
+              className="object-cover w-full h-48"
+            />
+            <div className="p-4">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                Theme Name
+              </h3>
+              <p className="mt-2 text-gray-600 dark:text-gray-400">
+                Theme description goes here.
+              </p>
+              <button className="px-4 py-2 mt-4 text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                Install
+              </button>
+            </div>
+          </div>))}
+      </div>
     </div>
-  )
-}
+  );
+};
 
 export default Store;
\ No newline at end of file
