diff --git a/frontend/spec-trackr-app/package-lock.json b/frontend/spec-trackr-app/package-lock.json
index 898801446..50df5e508 100644
--- a/frontend/spec-trackr-app/package-lock.json
+++ b/frontend/spec-trackr-app/package-lock.json
@@ -13,9 +13,13 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.9.0",
+        "bootstrap": "^5.3.6",
         "gh-pages": "^6.3.0",
+        "lucide-react": "^0.513.0",
         "react": "^19.1.0",
+        "react-bootstrap": "^2.10.10",
         "react-dom": "^19.1.0",
+        "react-icons": "^5.5.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -2887,6 +2891,85 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.9",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.9.tgz",
+      "integrity": "sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3210,6 +3293,15 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -3549,6 +3641,12 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
       "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/q": {
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.8.tgz",
@@ -3564,6 +3662,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
+    "node_modules/@types/react": {
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
+      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3627,6 +3743,12 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -4923,6 +5045,25 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5218,6 +5359,12 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
       "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q=="
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -5915,6 +6062,12 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6210,6 +6363,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8670,6 +8833,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -10478,6 +10650,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.513.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.513.0.tgz",
+      "integrity": "sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -12678,6 +12859,25 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12849,6 +13049,37 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.10.tgz",
+      "integrity": "sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -12964,11 +13195,26 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13049,6 +13295,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15270,6 +15532,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/underscore": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -15497,6 +15774,15 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/frontend/spec-trackr-app/package.json b/frontend/spec-trackr-app/package.json
index b8064c204..6450f4f49 100644
--- a/frontend/spec-trackr-app/package.json
+++ b/frontend/spec-trackr-app/package.json
@@ -9,9 +9,13 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.9.0",
+    "bootstrap": "^5.3.6",
     "gh-pages": "^6.3.0",
+    "lucide-react": "^0.513.0",
     "react": "^19.1.0",
+    "react-bootstrap": "^2.10.10",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -41,4 +45,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "https://2025advancedprogramming-production.up.railway.app"}
+  "proxy": "https://2025advancedprogramming-production.up.railway.app"
+}
diff --git a/frontend/spec-trackr-app/src/TableauEmbed.js b/frontend/spec-trackr-app/src/TableauEmbed.js
index 4c63b08c3..7c38600c0 100644
--- a/frontend/spec-trackr-app/src/TableauEmbed.js
+++ b/frontend/spec-trackr-app/src/TableauEmbed.js
@@ -6,7 +6,7 @@ const TableauEmbed = () => {
   return (
   <div style={{ width: '100%', maxWidth: '1400px', margin: '0 auto' }}>
     <iframe
-      src="https://public.tableau.com/views/_17492253239990/1?:embed=yes&:showVizHome=no"
+      src="https://public.tableau.com/views/_17492732225060/1?:language=ko-KR&:display_count=n&:origin=viz_share_link"
       style={{ width: '100%', height: '800px', border: 'none' }}
       allowFullScreen
       title="Tableau 워드클라우드"
diff --git a/frontend/spec-trackr-app/src/com_sp.jsx b/frontend/spec-trackr-app/src/com_sp.jsx
index da515803f..8ab907173 100644
--- a/frontend/spec-trackr-app/src/com_sp.jsx
+++ b/frontend/spec-trackr-app/src/com_sp.jsx
@@ -1,7 +1,27 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import "./total.css";
+import {
+  Card,
+  Button,
+  Form,
+  Container,
+  Badge,
+  InputGroup,
+  Row,
+  Col
+} from 'react-bootstrap';
+import {
+  FaSearch,
+  FaBuilding,
+  FaUserTie,
+  FaMapMarkerAlt,
+  FaGraduationCap,
+  FaClock,
+  FaAward,
+  FaStar
+} from "react-icons/fa";
 
+// 직업 분류
 const jobCategories = ["생산/제조", "연구개발/설계", "IT/인터넷"];
 
 const ComSp = ({ onSpecTabClick }) => {
@@ -11,26 +31,44 @@ const ComSp = ({ onSpecTabClick }) => {
   const [companyOptions, setCompanyOptions] = useState([]);
   const [positionOptions, setPositionOptions] = useState([]);
   const [rawOptions, setRawOptions] = useState([]);
-  const [activeTab, setActiveTab] = useState("채용 공고");
+  const [activeTab, setActiveTab] = useState("");
   const [jobPostingResults, setJobPostingResults] = useState([]);
   const [companySearchTerm, setCompanySearchTerm] = useState(""); // 회사 검색어
-  
+
+  const filteredCompanyOptions = companyOptions.filter(company =>
+    company.toLowerCase().includes(companySearchTerm.toLowerCase())
+  );
+
+  const CustomSelect = ({ options, value, onChange, placeholder }) => (
+    <Form.Control
+      as="select"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="form-select"
+    >
+      <option value="">{placeholder}</option>
+      {options.map((option, index) => (
+        <option key={index} value={option}>{option}</option>
+      ))}
+    </Form.Control>
+  );
 
   useEffect(() => {
     if (selectedJobCategory) {
-      axios.post(`${process.env.REACT_APP_API_URL}/get-company-name-and-detail-job`, {
-        job_category: selectedJobCategory,
-      })
-      .then((res) => {
-        const uniqueResults = Array.from(new Map(res.data.map(item => [JSON.stringify(item), item])).values());
-        setRawOptions(uniqueResults);
-        setCompanyOptions([...new Set(uniqueResults.map(item => item.company_name))].sort());
-        setPositionOptions([...new Set(uniqueResults.map(item => item.detail_job))].sort());
-        setSelectedCompany("");
-        setSelectedPosition("");
-        setJobPostingResults([]);
-      })
-      .catch((err) => console.error("API 오류:", err));
+      axios
+        .post(`${process.env.REACT_APP_API_URL}/get-company-name-and-detail-job`, {
+          job_category: selectedJobCategory,
+        })
+        .then((res) => {
+          const uniqueResults = Array.from(new Map(res.data.map(item => [JSON.stringify(item), item])).values());
+          setRawOptions(uniqueResults);
+          setCompanyOptions([...new Set(uniqueResults.map(item => item.company_name))].sort());
+          setPositionOptions([...new Set(uniqueResults.map(item => item.detail_job))].sort());
+          setSelectedCompany("");
+          setSelectedPosition("");
+          setJobPostingResults([]);
+        })
+        .catch((err) => console.error("API 오류:", err));
     } else {
       setRawOptions([]);
       setCompanyOptions([]);
@@ -73,186 +111,243 @@ const ComSp = ({ onSpecTabClick }) => {
 
   useEffect(() => {
     if (selectedJobCategory && selectedCompany && selectedPosition) {
-      axios.post(`${process.env.REACT_APP_API_URL}/get-job-posting`, {
-        job_category: selectedJobCategory,
-        company_name: selectedCompany,
-        detail_job: selectedPosition,
-      })
-      .then((res) => {
-        const uniqueResults = Array.from(
-          new Map(res.data.map(item => [JSON.stringify(item), item])).values()
-        );
-        setJobPostingResults(uniqueResults);
-      })
-      .catch((err) => {
-        console.error("채용공고 불러오기 오류:", err);
-        setJobPostingResults([]);
-      });
+      axios
+        .post(`${process.env.REACT_APP_API_URL}/get-job-posting`, {
+          job_category: selectedJobCategory,
+          company_name: selectedCompany,
+          detail_job: selectedPosition,
+        })
+        .then((res) => {
+          const uniqueResults = Array.from(new Map(res.data.map(item => [JSON.stringify(item), item])).values());
+          setJobPostingResults(uniqueResults);
+        })
+        .catch((err) => {
+          console.error("채용공고 불러오기 오류:", err);
+          setJobPostingResults([]);
+        });
     } else {
       setJobPostingResults([]);
     }
   }, [selectedJobCategory, selectedCompany, selectedPosition]);
 
-  const handlePositionClick = () => {
-    if (selectedCompany) {
-      const filtered = rawOptions.filter(item => item.company_name === selectedCompany);
-      setPositionOptions([...new Set(filtered.map(item => item.detail_job))].sort());
-    }
-  };
-
-  // 검색 필터링된 회사 목록
-  const filteredCompanyOptions = companyOptions.filter(company =>
-    company.toLowerCase().includes(companySearchTerm.toLowerCase())
-  );
-
+  // --- 렌더링 ---
   return (
-    <div className="container">
-      <h1 className="title">SpecTrackr</h1>
-
-      <div className="button-group">
-        <button
-          className="btn selected"
-          onClick={() => setActiveTab("채용공고 검색")}
-        >
-          채용공고 검색
-        </button>
-        <button
-          className={`btn ${activeTab === "스펙 검색" ? "selected" : ""}`}
-          onClick={() => {
-            setActiveTab("스펙 검색");
-            if (onSpecTabClick) onSpecTabClick();
-          }}
-        >
-          스펙 검색
-        </button>
+    <Container>
+      {/* 상단 중앙 제목 */}
+      <div className="text-center my-5">
+        <h1 className="display-4 fw-bold mb-2" style={{ fontWeight: 700 }}>SpecTrackr</h1>
+        <div className="lead" style={{ fontWeight: 300 }}>
+          채용 공고 검색과 스펙 분석을 한 번에
+        </div>
       </div>
 
-      <div className="outer-box">
-        <div className="section">
-          <label className="select-label">직업 분류를 선택하세요</label>
-          <div className="flex flex-wrap gap-2">
-            {jobCategories.map((category) => (
-              <button
-                key={category}
-                className={`job-btn ${selectedJobCategory === category ? "selected" : ""}`}
-                onClick={() => setSelectedJobCategory(category)}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-        </div>
+      {/* 버튼: 100% 가로, 반반, 붙어 있도록 */}
+      <Row className="mb-4" style={{ marginLeft: 0, marginRight: 0 }}>
+        <Col xs={6} className="p-0">
+          <Button
+            className="w-100 py-3 rounded-0 rounded-start"
+            variant={activeTab === "채용공고 검색" ? "dark" : "outline-dark"}
+            onClick={() => setActiveTab("채용공고 검색")}
+            style={{ fontSize: "1.2rem", fontWeight: 500, borderRight: 0 }}
+          >
+            채용공고 검색
+          </Button>
+        </Col>
+        <Col xs={6} className="p-0">
+          <Button
+            className="w-100 py-3 rounded-0 rounded-end"
+            variant={activeTab === "스펙 검색" ? "dark" : "outline-dark"}
+            onClick={() => {
+              setActiveTab("스펙 검색");
+              if (onSpecTabClick) onSpecTabClick();
+            }}
+            style={{ fontSize: "1.2rem", fontWeight: 500 }}
+          >
+            스펙 검색
+          </Button>
+        </Col>
+      </Row>
 
-        <div className="select-row">
-          <div className="select-col">
-            <label className="select-label">회사를 선택하세요</label>
-            <input
-              type="text"
-              className="search-input"
-              placeholder="회사 검색..."
-              value={companySearchTerm}
-              onChange={(e) => setCompanySearchTerm(e.target.value)}
-            />
-            <select
-              className="select"
-              value={selectedCompany}
-              onChange={(e) => setSelectedCompany(e.target.value)}
-            >
-              <option value="">회사를 선택하세요</option>
-              {filteredCompanyOptions.map((company, index) => (
-                <option key={index} value={company}>{company}</option>
-              ))}
-            </select>
-          </div>
-          <div className="select-col">
-            <label className="select-label">직무를 선택하세요</label>
-            <select
-              className="select"
-              value={selectedPosition}
-              onClick={handlePositionClick}
-              onChange={(e) => setSelectedPosition(e.target.value)}
-            >
-              <option value="">직무를 선택하세요</option>
-              {positionOptions.map((position, idx) => (
-                <option key={idx} value={position}>{position}</option>
-              ))}
-            </select>
-          </div>
-        </div>
+      {/* 조건부 렌더링: 채용공고 검색 탭만 아래 UI 표시 */}
+      {activeTab === "채용공고 검색" && (
+        <>
+          {/* 직업 분류 선택 */}
+          <Card className="mb-4">
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span role="img" aria-label="category">🗂️</span>
+                직업 분류 선택
+              </div>
+              <div className="d-flex flex-wrap gap-2">
+                {jobCategories.map((category) => (
+                  <Button
+                    key={category}
+                    variant={selectedJobCategory === category ? "dark" : "outline-dark"}
+                    onClick={() => setSelectedJobCategory(category)}
+                  >
+                    {category}
+                  </Button>
+                ))}
+              </div>
+            </Card.Body>
+          </Card>
 
-        <div className="section">
-          <label className="select-label">검색 결과</label>
-          <div className="tab-group">
-            <button
-              className={`tab-btn ${activeTab === "채용 공고" ? "tab-active" : "tab-inactive"}`}
-              onClick={() => setActiveTab("채용 공고")}
-            >
-              채용 공고
-            </button>
-          </div>
-          <div className="result-box">
-            {activeTab === "채용 공고" && (
-              <>
-                {jobPostingResults.length > 0 ? (
-                  <ul className="posting-list">
-                    {jobPostingResults.map((posting, index) => {
-                      const isValidImage =
-                        posting.image &&
-                        posting.image !== "null" &&
-                        posting.image !== null &&
-                        posting.image.trim() !== "";
+          {/* 회사/직무 선택 */}
+          <Row className="g-4 mb-4">
+            <Col md={6}>
+              <Card>
+                <Card.Body>
+                  <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <FaBuilding className="me-2" />
+                    회사 선택
+                  </div>
+                  <Form.Group>
+                    <Form.Label className="fw-bold">회사 검색</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FaSearch />
+                      </InputGroup.Text>
+                      <Form.Control
+                        placeholder="회사명을 입력하세요"
+                        value={companySearchTerm}
+                        onChange={(e) => setCompanySearchTerm(e.target.value)}
+                      />
+                    </InputGroup>
+                  </Form.Group>
+                  <Form.Group className="mt-3">
+                    <Form.Label className="fw-bold">회사 선택</Form.Label>
+                    <CustomSelect
+                      options={filteredCompanyOptions}
+                      value={selectedCompany}
+                      onChange={setSelectedCompany}
+                      placeholder="회사를 선택하세요"
+                    />
+                  </Form.Group>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md={6}>
+              <Card>
+                <Card.Body>
+                  <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <FaUserTie className="me-2" />
+                    직무 선택
+                  </div>
+                  <Form.Group>
+                    <Form.Label className="fw-bold">직무 선택</Form.Label>
+                    <CustomSelect
+                      options={positionOptions}
+                      value={selectedPosition}
+                      onChange={setSelectedPosition}
+                      placeholder="직무를 선택하세요"
+                    />
+                  </Form.Group>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
 
-                      return (
-                        <li key={index} className="posting-item">
-                          {isValidImage ? (
-                            <div className="image-container">
-                              <img
-                                src={posting.image}
-                                alt="채용 이미지"
-                                className="job-image"
-                                onError={(e) => {
-                                  e.target.onerror = null;
-                                  e.target.style.display = "none";
-                                }}
-                              />
-                            </div>
-                          ) : (
-                            <div className="posting-info">
-                              <span><strong>회사:</strong> {selectedCompany}</span><br />
-                              <span><strong>직무:</strong> {selectedPosition}</span><br />
-                              <span><strong>근무지:</strong> {posting.location}</span><br />
-                              <span><strong>학력:</strong> {posting.education_level}</span><br />
-                              <span><strong>경력:</strong> {posting.experience}</span><br />
-                              <span>
-                                <strong>요구사항:</strong><br />
-                                {posting.etc_requirements
-                                  ? posting.etc_requirements
-                                      .split(/[•■ㅁㅇㆍ·*＞-]\s*/)
-                                      .filter(item => item.trim() !== "")
-                                      .map((item, index) => (
-                                        <React.Fragment key={index}>
-                                          • {item.trim()}
-                                          <br />
-                                        </React.Fragment>
-                                      ))
-                                  : "없음"}
-                              </span>
-                              <span><strong>우대사항:</strong> {posting.preferred_qualification || "없음"}</span>
-                            </div>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
+          {/* 채용공고 결과 */}
+          <Card>
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span role="img" aria-label="posting">📄</span>
+                채용 공고
+              </div>
+              <div style={{ maxHeight: "500px", overflowY: "auto" }}>
+                {selectedJobCategory && selectedCompany && selectedPosition ? (
+                  jobPostingResults.length > 0 ? (
+                    <div className="d-grid gap-4">
+                      {jobPostingResults.map((posting, index) => {
+                        const isValidImage =
+                          posting.image &&
+                          posting.image !== "null" &&
+                          posting.image !== null &&
+                          posting.image.trim() !== "";
+                        return (
+                          <Card key={index}>
+                            <Card.Body>
+                              <div className="d-flex justify-content-between align-items-start mb-3">
+                                <div>
+                                  <h5 className="fw-bold">{selectedCompany}</h5>
+                                  <Badge bg="secondary" className="mb-2">{selectedPosition}</Badge>
+                                </div>
+                              </div>
+                              <div className="row g-3 mb-3">
+                                <div className="col-md-6">
+                                  <FaMapMarkerAlt className="me-2" />
+                                  {posting.location}
+                                </div>
+                                <div className="col-md-6">
+                                  <FaGraduationCap className="me-2" />
+                                  {posting.education_level}
+                                </div>
+                                <div className="col-md-6">
+                                  <FaClock className="me-2" />
+                                  {posting.experience}
+                                </div>
+                              </div>
+                              {isValidImage && (
+                                <div className="mb-4">
+                                  <img
+                                    src={posting.image}
+                                    alt="채용 이미지"
+                                    className="img-fluid rounded"
+                                    onError={(e) => {
+                                      e.target.onerror = null;
+                                      e.target.style.display = "none";
+                                    }}
+                                  />
+                                </div>
+                              )}
+                              <div className="mb-3">
+                                <div className="d-flex align-items-center mb-2">
+                                  <FaAward className="me-2 text-muted" />
+                                  <h6 className="m-0 fw-bold">요구사항</h6>
+                                </div>
+                                <ul className="list-unstyled">
+                                  {posting.etc_requirements
+                                    ?.split(/[•■ㅁㅇㆍ·*＞-]\s*/)
+                                    .filter(item => item.trim() !== "")
+                                    .map((req, idx) => (
+                                      <li key={idx} className="mb-1">
+                                        • {req.trim()}
+                                      </li>
+                                    ))}
+                                </ul>
+                              </div>
+                              <div>
+                                <div className="d-flex align-items-center mb-2">
+                                  <FaStar className="me-2 text-muted" />
+                                  <h6 className="m-0 fw-bold">우대사항</h6>
+                                </div>
+                                <p className="m-0">
+                                  {posting.preferred_qualification || "우대사항이 없습니다"}
+                                </p>
+                              </div>
+                            </Card.Body>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="text-center py-5 text-muted">
+                      <FaBuilding className="display-5 mb-3" />
+                      <p>해당 조건에 대한 채용 공고가 없습니다.</p>
+                    </div>
+                  )
                 ) : (
-                  <p>해당 조건에 대한 채용 공고가 없습니다.</p>
+                  <div className="text-center py-5 text-muted">
+                    <FaBuilding className="display-5 mb-3" />
+                    <p>직업 분류, 회사, 직무를 모두 선택해주세요</p>
+                  </div>
                 )}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
+              </div>
+            </Card.Body>
+          </Card>
+        </>
+      )}
+    </Container>
   );
 };
 
diff --git a/frontend/spec-trackr-app/src/index.js b/frontend/spec-trackr-app/src/index.js
index d56218d29..185749669 100644
--- a/frontend/spec-trackr-app/src/index.js
+++ b/frontend/spec-trackr-app/src/index.js
@@ -5,6 +5,8 @@ import App from './App';
 import ComSp from "./com_sp";
 import "./index.css";
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
diff --git a/frontend/spec-trackr-app/src/sp_com.jsx b/frontend/spec-trackr-app/src/sp_com.jsx
index 90f9b05c3..3e608a8ab 100644
--- a/frontend/spec-trackr-app/src/sp_com.jsx
+++ b/frontend/spec-trackr-app/src/sp_com.jsx
@@ -1,7 +1,26 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import "./total.css";
+import {
+  Card,
+  Button,
+  Form,
+  Container,
+  Row,
+  Col,
+  InputGroup
+} from "react-bootstrap";
+import { FaSearch, FaBuilding, FaUserTie, FaUser, FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import TableauEmbed from "./TableauEmbed";
+import "./total.css";
+
+const initialSpec = {
+  school: "",
+  grade: "",
+  social: "",
+  language: "",
+  award: "",
+  certificate: ""
+};
 
 const SpCom = ({ onCompanyTabClick }) => {
   const [activeTab, setActiveTab] = useState("스펙 검색");
@@ -12,52 +31,38 @@ const SpCom = ({ onCompanyTabClick }) => {
   const [rawCompanyOptions, setRawCompanyOptions] = useState([]);
   const [rawPositionOptions, setRawPositionOptions] = useState([]);
   const [allSchools, setAllSchools] = useState([]);
-
   const [applicants, setApplicants] = useState([]);
   const [currentApplicantIndex, setCurrentApplicantIndex] = useState(0);
   const [recommendedApplicants, setRecommendedApplicants] = useState([]);
-  const [carouselIndex, setCarouselIndex] = useState(0); // ✅ carousel 상태 추가
+  const [carouselIndex, setCarouselIndex] = useState(0);
   const [companySearch, setCompanySearch] = useState("");
   const [schoolSearch, setSchoolSearch] = useState("");
+  const [mySpec, setMySpec] = useState(initialSpec);
 
+  // 필터링
   const filteredCompanies = companyOptions.filter(company =>
-  company.toLowerCase().includes(companySearch.toLowerCase())
+    company.toLowerCase().includes(companySearch.toLowerCase())
   );
-
   const filteredSchools = allSchools.filter(school =>
     school.toLowerCase().includes(schoolSearch.toLowerCase())
   );
 
-
-  const initialSpec = {
-    school: "",
-    grade: "",
-    social: "",
-    language: "",
-    award: "",
-    certificate: ""
-  };
-  const [mySpec, setMySpec] = useState(initialSpec);
-
   const handleInput = (key, value) => {
     setMySpec(prev => ({ ...prev, [key]: value }));
   };
 
-  // ✅ 학교 목록 불러오기
+  // 학교 목록 불러오기
   useEffect(() => {
     axios
       .get(`${process.env.REACT_APP_API_URL}/get-all-universities`)
       .then(res => setAllSchools((res.data || []).filter(Boolean).sort()))
-      .catch(err => {
-        console.error("대학교 목록 오류:", err);
-        setAllSchools([]);
-      });
+      .catch(() => setAllSchools([]));
   }, []);
 
-  // ✅ 회사/직무 목록 초기화
+  // 회사/직무 전체 목록 불러오기
   useEffect(() => {
     axios
-      .post(`${process.env.REACT_APP_API_URL}/get-companiy-by-detail-job`, { detail_job: "" })
+      .post(`${process.env.REACT_APP_API_URL}/get-company-by-detail-job`, { detail_job: "" })
       .then(res => {
         const companies = res.data.map(item => item.company).filter(Boolean).sort();
         setRawCompanyOptions(companies);
@@ -72,29 +77,29 @@ const SpCom = ({ onCompanyTabClick }) => {
       });
   }, []);
 
-  // ✅ 선택 회사에 따른 직무 필터
+  // 회사 선택 시 직무 필터
   useEffect(() => {
     if (selectedCompany) {
       axios
         .post(`${process.env.REACT_APP_API_URL}/get-detail-job-by-company`, { company: selectedCompany })
         .then(res => setPositionOptions(res.data.map(i => i.detail_job).filter(Boolean).sort()));
     } else {
-      setPositionOptions([...rawPositionOptions]);
+      setPositionOptions(rawPositionOptions);
     }
   }, [selectedCompany, rawPositionOptions]);
 
-  // ✅ 선택 직무에 따른 회사 필터
+  // 직무 선택 시 회사 필터
   useEffect(() => {
     if (selectedPosition) {
       axios
-        .post(`${process.env.REACT_APP_API_URL}/get-companiy-by-detail-job`, { detail_job: selectedPosition })
+        .post(`${process.env.REACT_APP_API_URL}/get-company-by-detail-job`, { detail_job: selectedPosition })
         .then(res => setCompanyOptions(res.data.map(i => i.company).filter(Boolean).sort()));
     } else {
-      setCompanyOptions([...rawCompanyOptions]);
+      setCompanyOptions(rawCompanyOptions);
     }
   }, [selectedPosition, rawCompanyOptions]);
 
-  // ✅ 합격자 스펙 불러오기
+  // 회사+직무 선택 시 합격자 불러오기
   useEffect(() => {
     if (selectedCompany && selectedPosition) {
       axios
@@ -106,16 +111,13 @@ const SpCom = ({ onCompanyTabClick }) => {
           setApplicants(res.data || []);
           setCurrentApplicantIndex(0);
         })
-        .catch(err => {
-          console.error("합격자 API 오류:", err);
-          setApplicants([]);
-        });
+        .catch(() => setApplicants([]));
     } else {
       setApplicants([]);
     }
   }, [selectedCompany, selectedPosition]);
 
-  // ✅ 추천 기업 불러오기
+  // 내 학교 기준 추천 기업
   useEffect(() => {
     if (mySpec.school) {
       axios
@@ -124,247 +126,357 @@ const SpCom = ({ onCompanyTabClick }) => {
           setRecommendedApplicants(res.data || []);
           setCarouselIndex(0);
         })
-        .catch(err => {
-          console.error("추천 기업 API 오류:", err);
-          setRecommendedApplicants([]);
-        });
+        .catch(() => setRecommendedApplicants([]));
     } else {
       setRecommendedApplicants([]);
     }
   }, [mySpec.school]);
 
+  // 합격자 스펙
   const currentApplicant = applicants[currentApplicantIndex];
-
   const acceptedSpec = currentApplicant
     ? {
-        school: currentApplicant.university ?? "",
-        grade: currentApplicant.gpa ?? "",
+        school: currentApplicant.university || "",
+        grade: currentApplicant.gpa || "",
         social: "",
         language: currentApplicant.toeic ? `토익 ${currentApplicant.toeic}` : "",
         award: "",
         certificate: ""
       }
-    : {
-        school: "서울대학교",
-        grade: "3.0 / 4.5",
-        social: "없음",
-        language: "텝스 100점",
-        award: "다이브 해커톤 1등",
-        certificate: "없음"
-      };
+    : initialSpec;
 
+  // --- 렌더링 ---
   return (
-    <div className="container">
-      <h1 className="title">SpecTrackr</h1>
-
-      <div className="button-group">
-        <button
-          className={`btn ${activeTab === "채용공고 검색" ? "selected" : ""}`}
-          onClick={() => {
-            setActiveTab("채용공고 검색");
-            onCompanyTabClick && onCompanyTabClick();
-          }}
-        >
-          채용공고 검색
-        </button>
-        <button
-          className={`btn ${activeTab === "스펙 검색" ? "selected" : ""}`}
-          onClick={() => setActiveTab("스펙 검색")}
-        >
-          스펙 검색
-        </button>
-      </div>
-
-      <div className="outer-box">
-        <div className="select-row">
-          <div className="select-col">
-            <label className="select-label">회사를 선택하세요</label>
-            <input
-              type="text"
-              placeholder="회사 검색"
-              className="search-input"
-              value={companySearch}
-              onChange={(e) => setCompanySearch(e.target.value)}
-            />
-            <select
-              className="select"
-              value={selectedCompany}
-              onChange={(e) => setSelectedCompany(e.target.value)}
-            >
-              <option value="">회사를 선택하세요</option>
-              {filteredCompanies.map((company, idx) => (
-                <option key={idx} value={company}>
-                  {company}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="select-col">
-            <label className="select-label">직무를 선택하세요</label>
-            <select
-              className="select"
-              value={selectedPosition}
-              onChange={(e) => setSelectedPosition(e.target.value)}
-            >
-              <option value="">직무를 선택하세요</option>
-              {positionOptions.map((pos, idx) => (
-                <option key={idx} value={pos}>
-                  {pos}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="spec-input-section">
-          <label className="spec-input-label">나의 스펙 입력</label>
-          <div className="spec-input-box">
-            <div className="spec-btn">
-              school
-              <input
-                type="text"
-                placeholder="학교 검색"
-                className="search-input"
-                value={schoolSearch}
-                onChange={(e) => setSchoolSearch(e.target.value)}
-              />
-              <select
-                className="spec-input"
-                value={mySpec.school}
-                onChange={(e) => handleInput("school", e.target.value)}
-              >
-                <option value="">학교 선택</option>
-                {filteredSchools.map((school, idx) => (
-                  <option key={idx} value={school}>
-                    {school}
-                  </option>
-                ))}
-              </select>
-            </div>
-            {Object.entries(initialSpec).map(([key]) =>
-              key === "school" ? null : (
-                <div key={key} className="spec-btn">
-                  {key}
-                  <input
-                    className="spec-input"
-                    type="text"
-                    value={mySpec[key]}
-                    placeholder={key}
-                    onChange={(e) => handleInput(key, e.target.value)}
-                  />
-                </div>
-              )
-            )}
-          </div>
+    <Container>
+      {/* 상단 중앙 제목 */}
+      <div className="text-center my-5">
+        <h1 className="display-4 fw-bold mb-2" style={{ fontWeight: 700 }}>SpecTrackr</h1>
+        <div className="lead" style={{ fontWeight: 300 }}>
+          채용 공고 검색과 스펙 분석을 한 번에
         </div>
+      </div>
 
+      {/* 버튼: 100% 가로, 반반, 검정/흰색 */}
+      <Row className="mb-4" style={{ marginLeft: 0, marginRight: 0 }}>
+        <Col xs={6} className="p-0">
+          <Button
+            className="w-100 py-3 rounded-0 rounded-start"
+            variant={activeTab === "채용공고 검색" ? "dark" : "outline-dark"}
+            onClick={() => {
+              setActiveTab("채용공고 검색");
+              onCompanyTabClick && onCompanyTabClick();
+            }}
+            style={{ fontSize: "1.2rem", fontWeight: 500, borderRight: 0 }}
+          >
+            채용공고 검색
+          </Button>
+        </Col>
+        <Col xs={6} className="p-0">
+          <Button
+            className="w-100 py-3 rounded-0 rounded-end"
+            variant={activeTab === "스펙 검색" ? "dark" : "outline-dark"}
+            onClick={() => setActiveTab("스펙 검색")}
+            style={{ fontSize: "1.2rem", fontWeight: 500 }}
+          >
+            스펙 검색
+          </Button>
+        </Col>
+      </Row>
 
+      {/* 조건부 렌더링: 스펙 검색 탭만 아래 UI 표시 */}
+      {activeTab === "스펙 검색" && (
+        <>
+          {/* 회사/직무 선택 */}
+          <Row className="g-4 mb-4">
+            <Col md={6}>
+              <Card>
+                <Card.Body>
+                  <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <FaBuilding className="me-2" />
+                    회사 선택
+                  </div>
+                  <Form.Group>
+                    <Form.Label className="fw-bold">회사 검색</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FaSearch />
+                      </InputGroup.Text>
+                      <Form.Control
+                        placeholder="회사명을 입력하세요"
+                        value={companySearch}
+                        onChange={e => setCompanySearch(e.target.value)}
+                      />
+                    </InputGroup>
+                  </Form.Group>
+                  <Form.Group className="mt-3">
+                    <Form.Label className="fw-bold">회사 선택</Form.Label>
+                    <Form.Select
+                      value={selectedCompany}
+                      onChange={e => setSelectedCompany(e.target.value)}
+                    >
+                      <option value="">회사를 선택하세요</option>
+                      {filteredCompanies.map((company, idx) => (
+                        <option key={idx} value={company}>
+                          {company}
+                        </option>
+                      ))}
+                    </Form.Select>
+                  </Form.Group>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md={6}>
+              <Card>
+                <Card.Body>
+                  <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <FaUserTie className="me-2" />
+                    직무 선택
+                  </div>
+                  <Form.Group>
+                    <Form.Label className="fw-bold">직무 선택</Form.Label>
+                    <Form.Select
+                      value={selectedPosition}
+                      onChange={e => setSelectedPosition(e.target.value)}
+                    >
+                      <option value="">직무를 선택하세요</option>
+                      {positionOptions.map((pos, idx) => (
+                        <option key={idx} value={pos}>
+                          {pos}
+                        </option>
+                      ))}
+                    </Form.Select>
+                  </Form.Group>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
 
-        <div className="spec-compare-row">
-          <div className="spec-column">
-            <div className="spec-title-outside">나의 스펙</div>
-            <div className="spec-box">
-              <div className="spec-content">
-                {Object.entries(mySpec).map(([key, value]) => (
-                  <div key={key}>{key} : {value || "없음"}</div>
-                ))}
+          {/* 나의 스펙 입력 */}
+          <Card className="mb-4">
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <FaUser className="me-2" />
+                나의 스펙 입력
               </div>
-            </div>
-          </div>
+              <Form>
+                <Row className="g-4">
+                  {/* 학교 및 학점 */}
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">학교</Form.Label>
+                      <InputGroup className="mb-2">
+                        <Form.Control
+                          type="text"
+                          placeholder="학교 검색"
+                          value={schoolSearch}
+                          onChange={e => setSchoolSearch(e.target.value)}
+                        />
+                      </InputGroup>
+                      <Form.Select
+                        value={mySpec.school}
+                        onChange={e => handleInput("school", e.target.value)}
+                      >
+                        <option value="">학교 선택</option>
+                        {filteredSchools.map((school, idx) => (
+                          <option key={idx} value={school}>
+                            {school}
+                          </option>
+                        ))}
+                      </Form.Select>
+                    </Form.Group>
+                  </Col>
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">학점 (Grade)</Form.Label>
+                      <Form.Control
+                        type="text"
+                        placeholder="학점을 입력하세요"
+                        value={mySpec.grade}
+                        onChange={e => handleInput("grade", e.target.value)}
+                      />
+                    </Form.Group>
+                  </Col>
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">사회경험 (Social)</Form.Label>
+                      <Form.Control
+                        type="text"
+                        placeholder="사회경험을 입력하세요"
+                        value={mySpec.social}
+                        onChange={e => handleInput("social", e.target.value)}
+                      />
+                    </Form.Group>
+                  </Col>
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">어학 (Language)</Form.Label>
+                      <Form.Control
+                        type="text"
+                        placeholder="어학 성적/자격 입력"
+                        value={mySpec.language}
+                        onChange={e => handleInput("language", e.target.value)}
+                      />
+                    </Form.Group>
+                  </Col>
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">수상 (Award)</Form.Label>
+                      <Form.Control
+                        type="text"
+                        placeholder="수상 내역 입력"
+                        value={mySpec.award}
+                        onChange={e => handleInput("award", e.target.value)}
+                      />
+                    </Form.Group>
+                  </Col>
+                  <Col md={6}>
+                    <Form.Group className="mb-3">
+                      <Form.Label className="fw-semibold">자격증 (Certificate)</Form.Label>
+                      <Form.Control
+                        type="text"
+                        placeholder="자격증 입력"
+                        value={mySpec.certificate}
+                        onChange={e => handleInput("certificate", e.target.value)}
+                      />
+                    </Form.Group>
+                  </Col>
+                </Row>
+              </Form>
+            </Card.Body>
+          </Card>
 
-          <div className="spec-column">
-            <div className="spec-title-outside">합격자 스펙</div>
-            <div className="spec-box">
-              <div className="spec-content">
-                <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-                  <button
-                    className="carousel-arrow"
+          {/* 나의 스펙 / 합격자 스펙 비교 표 */}
+          <Card className="mb-4">
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-4" style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                <span role="img" aria-label="vs" style={{ fontSize: "1.5rem" }}>🆚</span>
+                나의 스펙 vs 합격자 스펙
+                <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8 }}>
+                  <Button
+                    size="sm"
+                    variant="outline-secondary"
                     onClick={() =>
-                      setCurrentApplicantIndex((prev) =>
+                      setCurrentApplicantIndex(prev =>
                         applicants.length === 0 ? 0 : (prev - 1 + applicants.length) % applicants.length
                       )
                     }
                     disabled={applicants.length <= 1}
-                    style={{ marginRight: 8 }}
                   >
-                    ◀
-                  </button>
-                  <div>
-                    {Object.entries(acceptedSpec).map(([key, value]) => (
-                      <div key={key}>
-                        {key} : {value || "없음"}
-                      </div>
-                    ))}
-                  </div>
-                  <button
-                    className="carousel-arrow"
+                    <FaArrowLeft />
+                  </Button>
+                  <span className="fw-semibold" style={{ minWidth: 48, textAlign: "center" }}>
+                    {applicants.length > 0 ? `${currentApplicantIndex + 1} / ${applicants.length}` : "0 / 0"}
+                  </span>
+                  <Button
+                    size="sm"
+                    variant="outline-secondary"
                     onClick={() =>
-                      setCurrentApplicantIndex((prev) =>
+                      setCurrentApplicantIndex(prev =>
                         applicants.length === 0 ? 0 : (prev + 1) % applicants.length
                       )
                     }
                     disabled={applicants.length <= 1}
-                    style={{ marginLeft: 8 }}
                   >
-                    ▶
-                  </button>
+                    <FaArrowRight />
+                  </Button>
                 </div>
-                {applicants.length > 1 && (
-                  <div style={{ textAlign: "center", marginTop: 4, fontSize: 12 }}>
-                    {currentApplicantIndex + 1} / {applicants.length}
-                  </div>
-                )}
               </div>
-            </div>
-          </div>
-        </div>
-
-        {/* ✅ 추천 기업 영역 */}
-        <div className="company-section">
-          <label className="company-label">추천 기업</label>
-          <div className="company-carousel">
-            <button
-              className="carousel-arrow left"
-              onClick={() => setCarouselIndex(prev => Math.max(prev - 1, 0))}
-              disabled={carouselIndex === 0}
-            >
-              &#8592;
-            </button>
+              <div className="table-responsive">
+                <table className="table table-bordered align-middle mb-0">
+                  <thead className="table-light">
+                    <tr>
+                      <th className="text-center fw-bold" style={{ width: "25%" }}>구분</th>
+                      <th className="text-center fw-bold" style={{ width: "37.5%" }}>나의 스펙</th>
+                      <th className="text-center fw-bold" style={{ width: "37.5%" }}>합격자 스펙</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td className="text-center fw-semibold">학교</td>
+                      <td className="text-center">{mySpec.school || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.school || "없음"}</td>
+                    </tr>
+                    <tr>
+                      <td className="text-center fw-semibold">학점</td>
+                      <td className="text-center">{mySpec.grade || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.grade || "없음"}</td>
+                    </tr>
+                    <tr>
+                      <td className="text-center fw-semibold">사회경험</td>
+                      <td className="text-center">{mySpec.social || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.social || "없음"}</td>
+                    </tr>
+                    <tr>
+                      <td className="text-center fw-semibold">어학</td>
+                      <td className="text-center">{mySpec.language || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.language || "없음"}</td>
+                    </tr>
+                    <tr>
+                      <td className="text-center fw-semibold">수상</td>
+                      <td className="text-center">{mySpec.award || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.award || "없음"}</td>
+                    </tr>
+                    <tr>
+                      <td className="text-center fw-semibold">자격증</td>
+                      <td className="text-center">{mySpec.certificate || "없음"}</td>
+                      <td className="text-center">{acceptedSpec.certificate || "없음"}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </Card.Body>
+          </Card>
 
-            <div className="carousel-content">
-              {recommendedApplicants
-                .slice(carouselIndex * 4, carouselIndex * 4 + 4)
-                .map((rec, idx) => (
-                  <div key={idx} className="company-card">
-                    <div className="company-name">{rec.company}</div>
-                    <div className="position-name">{rec.detail_job}</div>
-                  </div>
+          {/* 추천 기업 */}
+          <Card className="mb-4">
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                <span role="img" aria-label="company" style={{ fontSize: "1.5rem" }}>🏢</span>
+                추천 기업
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  overflowX: "auto",
+                  gap: "12px",
+                  paddingBottom: "8px"
+                }}
+              >
+                {recommendedApplicants.map((rec, idx) => (
+                  <Card
+                    key={idx}
+                    className="p-2 text-center"
+                    style={{
+                      minWidth: 140,
+                      maxWidth: 140,
+                      flex: "0 0 auto",
+                      height: 100,
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "center"
+                    }}
+                  >
+                    <div className="fw-bold">{rec.company}</div>
+                    <div style={{ fontSize: 13 }}>{rec.detail_job}</div>
+                  </Card>
                 ))}
-            </div>
-
-            <button
-              className="carousel-arrow right"
-              onClick={() =>
-                setCarouselIndex(prev =>
-                  (prev + 1) * 4 < recommendedApplicants.length ? prev + 1 : prev
-                )
-              }
-              disabled={(carouselIndex + 1) * 4 >= recommendedApplicants.length}
-            >
-              &#8594;
-            </button>
-          </div>
-        </div>
+              </div>
+            </Card.Body>
+          </Card>
 
-        {/* ✅ 직무별 스펙 Tableau 시각화 영역 */}
-        <div className="tableau-section">
-          <label className="company-label">직무별 스펙</label>
-          <div className="tableau-box">
-            <TableauEmbed />
-          </div>
-        </div>
-      </div>
-    </div>
+          {/* 직무별 스펙 */}
+          <Card>
+            <Card.Body>
+              <div className="fw-bold fs-5 mb-3" style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                <span role="img" aria-label="chart" style={{ fontSize: "1.5rem" }}>📊</span>
+                직무별 스펙
+              </div>
+              <TableauEmbed />
+            </Card.Body>
+          </Card>
+        </>
+      )}
+    </Container>
   );
 };