diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 208bfdf..d69237e 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index 89ffb63..68a9eed 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,7 +21,8 @@
     "@tauri-apps/plugin-dialog": "~2",
     "@tauri-apps/plugin-opener": "^2",
     "clsx": "^2.1.1",
-    "solid-js": "^1.9.3"
+    "solid-js": "^1.9.3",
+    "tailwind-scrollbar-hide": "^2.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
diff --git a/frontend/src-tauri/src/lib.rs b/frontend/src-tauri/src/lib.rs
index ac2ed67..1d4a06c 100644
--- a/frontend/src-tauri/src/lib.rs
+++ b/frontend/src-tauri/src/lib.rs
@@ -117,8 +117,8 @@ pub fn run() {
             let win_builder =
               WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
                 .hidden_title(true)
-                .inner_size(480.0, 320.0);
-      
+                .inner_size(480.0, 360.0)
+                .resizable(false);
             // set transparent title bar only when building for macOS
             #[cfg(target_os = "macos")]
             let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
@@ -135,9 +135,9 @@ pub fn run() {
               unsafe {
                 let bg_color = NSColor::colorWithRed_green_blue_alpha_(
                     nil,
-                    250.0 / 255.0,
-                    250.0 / 255.0,
-                    250.5 / 255.0,
+                    245.0 / 255.0,
+                    245.0 / 255.0,
+                    245.0 / 255.0,
                     1.0,
                 );
                 ns_window.setBackgroundColor_(bg_color);
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index db9e959..2129247 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -27,61 +27,79 @@ function App() {
   };
 
   return (
-    <main class="container px-4 pt-2 pb-4">
-      <Search
-        triggerMode="focus"
-        options={options()}
-        onInputChange={(query) => setOptions(queryEmojiData(query))}
-        onChange={(result) => setEmoji(result)}
-        optionValue="name"
-        optionLabel="name"
-        placeholder="Search an emoji…"
-        itemComponent={(props) => (
-          <Search.Item
-            item={props.item}
-            class={clsx(
-              "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
-              "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none"
-            )}
-          >
-            <Search.ItemLabel class="mx-[-100px]">
-              {props.item.rawValue.emoji}
-            </Search.ItemLabel>
-          </Search.Item>
-        )}
-      >
-        <Search.Control
-          class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
-          aria-label="Emoji"
+    <main class="container pt-2">
+      <div class="px-4">
+        <Search
+          triggerMode="focus"
+          options={options()}
+          onInputChange={(query) => setOptions(queryEmojiData(query))}
+          onChange={(result) => setEmoji(result)}
+          optionValue="name"
+          optionLabel="name"
+          placeholder="Search for stuff..."
+          itemComponent={(props) => (
+            <Search.Item
+              item={props.item}
+              class={clsx(
+                "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
+                "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none"
+              )}
+            >
+              <Search.ItemLabel class="mx-[-100px]">
+                {props.item.rawValue.emoji}
+              </Search.ItemLabel>
+            </Search.Item>
+          )}
         >
-          <Search.Indicator
-            class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
-            loadingComponent={
+          <Search.Control
+            class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
+            aria-label="Emoji"
+          >
+            <Search.Indicator
+              class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
+              loadingComponent={
+                <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
+                  <IconRefresh size={20} class="m-auto animate-spin" />
+                </Search.Icon>
+              }
+            >
               <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
-                <IconRefresh size={20} class="m-auto animate-spin" />
+                <IconSearch class="m-auto size-5 text-gray-600" />
               </Search.Icon>
-            }
-          >
-            <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
-              <IconSearch class="m-auto size-5 text-gray-600" />
-            </Search.Icon>
-          </Search.Indicator>
-          <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
-        </Search.Control>
-        <Search.Portal>
-          <Search.Content
-            class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
-            <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
-            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-              😬 No emoji found
-            </Search.NoResult>
-          </Search.Content>
-        </Search.Portal>
-      </Search>
-      <div class="mt-4 text-base leading-none">
+            </Search.Indicator>
+            <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
+          </Search.Control>
+          <Search.Portal>
+            <Search.Content
+              class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
+              onCloseAutoFocus={(e) => e.preventDefault()}
+            >
+              <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
+              <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
+                😬 No emoji found
+              </Search.NoResult>
+            </Search.Content>
+          </Search.Portal>
+        </Search>
+      </div>
+      {/* <div class="mt-4 text-base leading-none">
         Emoji selected: {emoji()?.emoji} {emoji()?.name}
+      </div> */}
+      <div class="px-4 mt-4 bg-white rounded-t-2xl">
+        <div class="h-[254px] overflow-scroll scrollbar-hide">
+          <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
+            <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
+            <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+            <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+            <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+            <div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
+            <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
+            <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+          </div>
+        </div>
+      </div>
+      <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
+        footer
       </div>
     </main>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 622aff8..71bc21a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,7 +10,7 @@
 }
 
 :root {
-  @apply bg-neutral-50 text-black rounded-xl;
+  @apply bg-neutral-100 text-black rounded-xl;
   font-family: Manrope, sans-serif;
   font-size: 16px;
   line-height: 24px;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c6e0218..97f179f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,5 +8,8 @@ export default {
       },
     },
   },
-  plugins: [require("@kobalte/tailwindcss")],
+  plugins: [
+    require("@kobalte/tailwindcss"),
+    require("tailwind-scrollbar-hide"),
+  ],
 };