Refactor App and ResourceDisplay components for improved layout and user interaction. Updated ResetButton to use a simpler design and repositioned elements for better accessibility. Enhanced visual presentation of available buildings in the shop section.

src/App.tsx

@@ -139,27 +139,16 @@ function App() {
             <VStack spacing={8}>
               <Box textAlign="center" w="full" position="relative">
                 <Flex direction="column" align="center" mb={4}>
-                  <Box maxW="400px" mb={2}>
+                  {points === 0 && (
-                    <Image src={logoImg} alt="Clicker Clicker 2" />
-                  </Box>
                     <Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
-                    Click anywhere to start (and then scroll down)
+                      Click anywhere to start
                     </Text>
+                  )}
                 </Flex>
-                
-                {/* Reset button positioned in the top right */}
-                <Box position="absolute" top={0} right={0}>
-                  <ResetButton />
-                </Box>
               </Box>
               
               <VStack spacing={8} w="full">
-                {/* Shop Section */}
+                {/* Buildings Grid */}
-                <Box bg="gray.800" p={6} borderRadius="lg" w="full">
-                  <Flex justify="space-between" align="center" mb={6}>
-                    <Heading as="h2" size="xl" color="blue.400">Shop</Heading>
-                    <Text fontSize="lg" color="yellow.400">Level {playerLevel}</Text>
-                  </Flex>
                 <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
                   {availableBuildings.map((building) => (
                     <BuildingButton
@@ -177,7 +166,6 @@ function App() {
                   ))}
                   <NextBuildingPreview />
                 </SimpleGrid>
-                </Box>
 
                 <Box h="1px" bg="gray.600" w="full" />
 

src/components/ResetButton.tsx

@@ -7,8 +7,6 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
   useDisclosure,
-  IconButton,
-  Tooltip
 } from '@chakra-ui/react'
 import React, { useRef } from 'react'
 import { useGameStore } from '../store/gameStore'
@@ -25,17 +23,14 @@ export function ResetButton() {
 
   return (
     <>
-      <Tooltip label="Reset Game">
+      <Button
-        <IconButton
-          aria-label="Reset Game"
-          icon={<span>🔄</span>}
         onClick={onOpen}
         colorScheme="red"
-          size="md"
+        size="sm"
         variant="ghost"
-          borderRadius="full"
+      >
-        />
+        Reset
-      </Tooltip>
+      </Button>
 
       <AlertDialog
         isOpen={isOpen}

src/components/ResourceDisplay.tsx

@@ -1,5 +1,7 @@
-import { Box, HStack, Text, Progress, Flex, Divider, Tooltip } from '@chakra-ui/react'
+import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
+import logoImg from '../assets/logo.png'
+import { ResetButton } from './ResetButton'
 
 export function ResourceDisplay() {
   const { points, pointsPerSecond, clickPower, getTotalMultiplier, activeMultipliers, playerLevel } = useGameStore()
@@ -35,13 +37,47 @@ export function ResourceDisplay() {
       shadow="lg"
     >
       <Flex 
-        justify="center" 
-        align="center" 
-        wrap="nowrap"
         maxW="1200px"
         mx="auto"
         px={4}
+        position="relative"
+      >
+        {/* Logo */}
+        <Box 
+          position="absolute" 
+          left={4} 
+          top="50%" 
+          transform="translateY(-50%)"
+          h="40px"
+          w="auto"
+        >
+          <Image 
+            src={logoImg} 
+            alt="Clicker Clicker 2" 
+            h="100%" 
+            w="auto"
+            objectFit="contain"
+          />
+        </Box>
+
+        {/* Reset button */}
+        <Box 
+          position="absolute" 
+          right={4} 
+          top="50%" 
+          transform="translateY(-50%)"
+          zIndex={1}
+        >
+          <ResetButton />
+        </Box>
+
+        {/* Main content - centered */}
+        <Flex 
+          justify="center" 
+          align="center" 
+          wrap="nowrap"
           gap={4}
+          w="full"
         >
           {/* Points */}
           <Box textAlign="center" minW="120px">
@@ -86,6 +122,7 @@ export function ResourceDisplay() {
             </Box>
           </Tooltip>
         </Flex>
+      </Flex>
     </Box>
   )
 }